Как поменять текст на сайте

Как менять текст и картинки на html сайте

После скачивания архива с сайтом, внутри будут папки и файлы вне этих папок.

Самое первое что нужно усвоить? перед тем как вносить какие либо правки, всегда делайте резервную копию всего сайта, на случай если «поломаете» его своим вмешательством. Просто создайте папку «Резервная копия» и поместите туда копию сайта, и далее можно уже приступать к редактированию.

Сначала давайте разберемся с тем

Как менять текст на html сайте

Это самая популярная правка, поменять кусок текста, например цену, или заголовок или еще чего.

Если вы без опыта, то лучше открыть сайт локально, (файл index.html с помощью браузера, советую гугл хром), и потом вносите правки ,обновляете вкладку с открытым сайтом и смотрите изменения, если же вы уверены в своих действиях, то можете сразу заливать исправленный файл на хостинг.

Например , у нас есть сайт, там есть заголовок «Модные детские 3D рюкзаки и сумки из неопрена»

Выделяем его мышкой, копируем, далее открываем файл в котором этот заголовок находится, если что в строке браузера это видно, если там просто адрес сайта то вам нужен файл index.html, а если в строке дописано определенное название страницы, то нам нужна именно она, пример:

тут мы видим написано zvonok.html вот этот файл нам и нужно открыть в блокноте, если текст который мы хотим менять находится на ней.

Чаще всего в лендингах только одна страница (index.html), есть еще и дополнительные вроде ok.html (страница успешной отправки формы) и privacy.html (Политика конфиденциальности) но их править вам скорее всего никогда не придется, поэтому будем их игнорировать.

Значит мы открываем блокнотом ( советую notepad ++ , скачать можно здесь: https://notepad-plus-plus.org/download/v6.8.8.html )

Открываем в нем файл index.html (он находится в корне сайта, иногда может быть еще index.php, но это сути не меняет). Нажимаем комбинацию клавиш ctrl + F (будучи в Notepad++ при открытом в нем файле index.html). В появившемся окошке переходим во вкладку «заменить» (в самом верху окошка, которое всплыло, кнопочка, кликните по ней). Там будет два поля « Найти: » и « Заменить на: » В первое вставляем текст с сайта (который стоит на сайте в данный момент и его нужно заменить на новый), а в поле «Заменить на:» вставляем собственно новый текст, когда оба поля заполнены (в верхнем старый текст, в нижнем новый) кликаем по кнопке « Заменить всё » (она расположена правее этих полей, по счету третья сверху). После нажатия текст поменяются, программа уведомит, что произведено столько-то успешных замен. После чего нажимаем комбинацию клавиш ctrl + S (сохраняем наш файл index.html). Теперь копируем отредактированный файл index.html на хостинг, согласившись при этом на замену.

Допустим нам нужно заменить « Модные детские 3D рюкзаки и сумки из неопрена » на « Современные детские 3D рюкзаки и сумки из неопрена «. Тогда в поле «найти» вставляем «Модные детские 3D рюкзаки и сумки из неопрена», а в поле заменить на, соответственно новый заголовок: «Современные детские 3D рюкзаки и сумки из неопрена». После чего сохраняем файл (комбинация ctrl+s, или иконка с дискетой в верхнем левом углу программы), теперь перезаливаем отредактированный файл index.html на хостинг, согласившись при этом на замену. Переходим на сайт, обновляем вкладку и видим, что старый заголовок поменялся на новый.

Точно так же можно поменять какой угодно текст, допустим есть цена товара 800 рублей, а нам надо поставить 790. В строке найти пишем 800 в заменить на 790 кликаем заменить все, программа уведомит нас о количестве замен (сколько раз на сайте встречается эта цена. столько замен и будет произведено), далее сохраняем файл перезаливаем на хостинг и радуемся результату. Если цена повторяется, допустим два товара есть по 800 рублей, а снизить цену до 790 нужно только на одном, тогда нужно найти именно тот товар (по названию допустим) и заменить цену только на нем, сохранить перезалить и удостоверится, что все сделали правильно, а если все таки не правильно, то у нас же есть резервная копия которую мы создали в начале. Берем его, и повторяем процедуру, до тех пор пока не получим нужный результат. Например, если поменяли первую цену, и оказалось что это не то что нужно, тогда возвращаем все как было (в нотепаде есть срелка «назад» кликая по ней, можно отменять внесенные правки), и меняем вторую цену, после проверяем все ли в порядке.

А теперь давайте разберемся со вторым моментом.

Как менять картинки на html сайте

Есть два способа, 1й самый простой, буквально заменить старую картинку на новую. Давайте рассмотрим на примере, у нас есть картинка с названием 1.jpg (банально находите в папке нужную картинку)

На скриншоте я кликнул по той картинке которую хочу заменить, потом нажал правую кнопку мыши и кликнул по пункту «свойства» во всплывающем окне. Увидел, что она называется 1 и расширение (формат) у нее .jpg, то-есть 1.jpg (в вашем случае название будет не «1» а другое, название именно той картинки которую хотите поменять), но суть та же.

Заменить эту картинку я хочу на такую:

Как видите называется она 2.jpg

Далее мы называем новую картинку (2.jpg) точно так же как называется старая (та которую мы хотим заменить, в нашем случае это 1.jpg), для этого нажимаем по старой картинке правой кнопкой мыши, кликаем переименовать, название картинки выделится (подсветится синим), после чего нажимаем комбинацию клавиш ctrl+c (стандартная команда «скопировать» в виндовс).

Теперь, когда в буфере обмена у нас уже имеется название картинки, пора переименовать нашу новую картинку, кликаем по ней так же правой кнопкой мыши, нажимаем переименовать, когда название снова подсветится, как и в прошлый раз нажимаем комбинацию ctrl+v (вставить), после нажимаем клавишу Enter. Все! Картинка переименована, теперь нам нужно скопировать новую картинку в ту папку где находится старая, просто перетягиваем мышкой из одной папки ее в другую, при этом согласившись на замену (так же можно ее загружать сразу на хостинг).

Кликаем по «копировать с заменой» и старая картинка успешно поменяется на новую. Теперь логично предположить, что в том месте на сайте, где показывалась старая картинка, теперь будет показываться уже новая.

Мы буквально заменили старую картинку на новую.

Тут нужно упомянуть о нескольких нюансах:

• учитывайте, что новая картинка должна быть такого же размера как и старая (если старая была 100px по высоте и 100px по ширине, то и новая должна быть такой же, тогда точно ничего не поедет на сайте, и скорость загрузки сайта не изменится.
• второй момент, если у картинки которую надо заменить одно расширение, допустим .jpg а у новой .png (или любое другое), то нужно изменить формат новой картинки в точно такой же как и у старой. Например, сохранить 1.png в 1.jpg.

2й способ, для продвинутых: прямо в коде, прописать новое название и расширение картинки. Например, в коде было «1.jpg», а мы пропишем «2.png» Для этого нужно открыть страницу в которой будем вносить правки блокнотом, найти строк где упоминается название нашей картинки, и прописать новое вместо старого, при том что новая картинка должна физически находится в той же папке где и старая.

Вот видео инструкция, для наглядности:

В конце хочу заметить, что вы всегда можете обратится ко мне , что бы правки внес я, и тогда все будет четко.

Как пользоваться вкладкой Elements

Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.

Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.

В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.

Поменять текст

Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.

Попробуйте повторить приём ниже. Где пробовать.

Поменять картинку

Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.

В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.

Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.

Найти блок вёрстки

Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.

Видно, что они “вложены” в строку — при желании их можно “свернуть”:

При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.

Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.

С инструментами разработчика любой блок на странице сайта найти проще простого, но вот повторить трюк с текстовым редактором и HTML файлом будет куда сложнее. Ориентируйтесь по названию тега, его классам и его родителям. Например:

С помощью инструментов разработчика вы поняли, что вам нужен элемент <div js-article-content"> . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .

Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.

В коде теги ищут по их родителям

Скопировать элемент

Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.

Удалить элемент

Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .

В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.

В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

Для вызова команды вам потребуется произвести несколько несложных действий:

1. Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
2. В появившемся окне выберите вкладку консоль;
3. Укажите команду document.designMode = ‘on’ ;
4. Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.

Для чего будет полезна команда:

1. изменять тексты и подменять данные на сайте;
2. тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
3. проверять различные форматы написания текста и быстро принимать решения;
4. быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
5. создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.

Как быстро изменить контент на сайте. Подмена текста с помощью GTM

Иногда необходимо быстро внести изменения в текст на сайте, но сделать это через CMS невозможно. Нет доступа к админ-панели или не получается «достучаться» до программиста. А вам вот уже сейчас нужно рассказать клиентам на своем лендинге, что в рекламной кампании изменились условия. Например, цена или локация. Вероятнее всего, перед запуском рекламы вы подключили отслеживание Google аналитики через GTM (это было бы самым верным решением). В таком случае изменить текстовый контент можно с помощью Custom HTML тега Google Tag Manager.

Временное решение

Сразу отмечу, внедрение таких изменений через GTM — не лучшее решение и, скорее, временное.

GTM базируется на JavaScript. Механизмы индексации контента, внедренного с его помощью, не совсем понятны. JS индексируется исключительно в Google, а вот Яндекс индексировать такой контент не сможет.

Да и в Google, если использовать динамическую подмену с помощью GTM, страницы попросту могут не успевать пройти переиндексацию или не будут индексироваться вовсе.

Чтобы понять, почему так происходит, сравните процесс сканирования HTML и JavaScript сайтов:

Сайты на основе JavaScript

1. Робот Googlebot загружает HTML-файл.
2. Робот Googlebot извлекает ссылки из исходного кода и может посещать их одновременно.
3. Робот Googlebot загружает файлы CSS.
4. Робот Googlebot отправляет все загруженные ресурсы в индексатор Google (Caffeine).
5. Индексатор (Caffeine) индексирует страницу.

1. Робот Googlebot загружает HTML-файл.
2. Робот Googlebot не находит ссылок в исходном коде, поскольку они вводятся только после выполнения JavaScript.
3. Робот Googlebot загружает файлы CSS и JS.
4. Робот Googlebot должен использовать службу веб-рендеринга Google (часть индексатора Caffeine) для анализа, компиляции и выполнения JavaScript.
5. WRS (Web Rendering Services) извлекает данные из внешних API, из базы данных и т. д.
6. Индексатор может индексировать контент.
7. Google может обнаруживать новые ссылки и добавлять их в очередь сканирования робота Googlebot. В случае веб-сайта HTML — второй шаг.

Анализ, компиляция и запуск файлов JavaScript отнимают очень много времени — как для пользователей, так и для Google.

Когда сайт небольшой, шансов на индексацию больше, так как обработка и рендеринг займет меньше времени.

Если контент нужно поменять быстро и ненадолго, предлагаю вам следующий алгоритм.

Подмена текста с помощью Google Tag Manager

Скажем, есть сайт музыкальных инструментов. На одной из страниц нужно поменять описание в разделе «Акустические гитары».

Для начала откройте панель разработчика на вкладке Elements и выберите элемент интересующего вас текста.

Дальше скопируйте путь к тексту, выбрав «селектор CSS» или «путь JS». Лучше выбирать второй вариант, так как он сформирован сразу с query запросом. Он вам пригодится.

У меня получилось следующее:

Этот путь понадобится для пользовательского тега.

Прежде чем добавлять путь JS в GTM, желательно сразу проверить, нужный ли текст выдает запрос. В данном примере все очевидно, но бывают случаи, когда в выбранном коде заключено много элементов, и какие-то могут быть лишними или наоборот лежать в дочерних элементах.

Проверить текст можно, прописав во вкладке Console тот же путь и добавив метод запроса .innerText. Он позволяет получить данные, записанные в найденном элементе.

Если вы скопировали не «JS путь», а «селектор CSS», у вас получится путь без запроса query:

Тогда для проверки в консоли, его необходимо дополнить:

В скобках укажите, что хотите заменить, и через запятую новый текст. В моем случае это:

Вид на странице:

Если все верно, вы сможете увидеть текст с подмененным значением:

Также в Console можно проверить замену текста с помощью запроса .textContent.replace. Этот метод запроса в данном примере не играет важную роль, но его стоит запомнить. Ведь при активной работе с GTM он может стать очень полезным.

Дальше нужно зайти в Google Tag Manager и создать новый тег Custom HTML.

Написать скрипт на замену текста.

<script>
(function () <
var replacementText = «НАШ НОВЫЙ ТЕКСТ»
JS ПУТЬ ИЗМЕНЯЕМОГО КОНТЕНТА.textContent = replacementText
>)();
</script>

Вот что я сделал:

• объявил функцию JavaScript — комбинация «function()»;
• var replacementText — объявил переменную на замену текста;
• переменной var replacementText присвоил “НАШ НОВЫЙ ТЕКСТ”;
• в свойстве textContent указал JS путь и запрос на замену текстового контента.

В моем примере выглядит вот так:

Вид в интерфейсе:

Дальше необходимо настроить триггер и указать адрес страницы, где будет происходить замена.

Для этого нужен триггер загрузки страницы.

Я выбрал триггер DOM Ready, поскольку создаваемый пользовательский тег взаимодействует со структурой DOM после ее загрузки.

Вы также можете выбрать триггер Page View. Но он может сработать некорректно, все зависит от скорости формирования первичной загрузки сайта. И возможна ситуация, что вы будете пытаться задействовать элемент страницы, который еще не загрузился.

Поскольку нужно заменить текст только на одной странице, выбирайте «Некоторые элементы DOM готовы» и указывайте необходимый адрес страницы.

Сохраните и проверьте.

Для этого выберите Preview (Предварительный просмотр) и смотрите отработку триггера. Если все правильно, сохраните и наблюдайте изменения на сайте.

Это далеко не единственный способ подменять контент на сайте с помощью GTM, но достаточно простой и действенный. По этому принципу можно заменять любые текстовые элементы страницы.

Запомнить

Подмена текста с помощью Custom HTML тега Google Tag Manager даст вам возможность оперативно и самостоятельно внести небольшие изменения в контент на сайте.

Для этого нужно:

• использовать вкладку Elements в панели разработчика;
• выбрать нужный элемент текста и скопировать путь к нему с «селектор CSS»/«путь JS» (главное получить в итоге путь с запросом query);
• создать новый тег Custom HTML в GTM и написать скрипт на замену текста;
• настроить триггер и указать адрес страницы, где будет происходить замена.

При такой подмене страницы с изменениями могут не индексироваться. Поэтому прибегать к этому методу стоит, если нет возможности внести изменения через CMS и использовать только как временную меру.