Главная / WateFlet — конструктор сайтов / Редактирование разделов

Редактирование разделов

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

1. Как редактировать раздел?
2. Редактирование свойств раздела
3. Редактор текста
   • Как правильно работать с заголовками в текстовом редакторе?
4. Раздел «Информационные блоки»
5. Раздел «Меню»
6. Раздел «Слайдер»
7. Раздел «Обратная связь»
8. Раздел «Карта»
9. Раздел «Контакты»
10. Раздел «Иконки соцсетей»
11. Раздел «Прайс-лист»

Как редактировать раздел?

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

Также можно навести указатель на раздел в списке разделов (список разделов находится в правой части экрана):

Для редактирования раздела он должен быть отображён на странице. Если раздел был скрыт со всех страниц сайта, его можно найти в списке всех разделов нажав на кнопку «показать все»:

После чего можно выбрать, на каких страницах будет показан раздел. Для этого нажмите на раздел и выберите страницы, на которых должен отображаться раздел. Раздел появится в самом верху страниц(ы):

Редактирование свойств раздела

Обозначается иконкой карандашика.

Во вкладке «Изображение, фон» в большинстве разделов можно установить фоновое изображение для раздела из галереи или из интернета. Можно установить его размер:

• 100% по высоте: высота изображения будет всегда равна высоте блока. Если при этом изображение будет не влезать в блок по ширине, оно будет обрезано.
• 100% по ширине: ширина изображения будет всегда равна ширине блока. Если при этом изображение будет не влезать в блок по высоте, оно будет обрезано.
• Автоматический-1: масштабирует изображение так, чтобы его ширина или высота равнялась ширине или высоте блока (изображение всегда заполняет весь блок).
• Автоматический-2: масштабирует изображение таким образом, чтобы изображение целиком поместилось внутрь блока.

Во всех случаях изображение выравнивается по центру (по ширине и по высоте) и сохраняются пропорции (изображения никогда не растягиваются).

Также Вы можете установить один из вариантов прокручивания изображения: оно либо будет прокручиваться вместе с сайтом, либо будет неподвижным относительно экрана. Здесь же можно включить/выключить затемнение фона, если, например, требуется разместить светлый текст поверх фонового изображения. Во вкладке «Настройки» Вы можете выбрать, на каких страницах Вашего сайта будет отображаться этот раздел:

Важно: если раздел отображается сразу на нескольких страницах, все его настройки будут применяться ко всем страницам.
Нельзя поставить разные фоновые изображения для «Шапки», отображаемой одновременно на разных страницах. Если Вы хотите, чтобы раздел выглядел по-разному на разных страницах, нужно использовать копию этого раздела (например, «Шапка 2»).
Здесь же можно изменить название раздела.
Название раздела не отображается на сайте. Оно помогает при редактировании сайта и в некоторых плагинах используется для того, чтобы идентифицировать раздел, из которого пришло сообщение на почту владельца сайта (обратная связь, онлайн-калькулятор и др.) В списке с разделами можно найти нужный раздел по его имени.
Важно: после внесения изменений в окне настроек не забудьте нажать кнопку «Применить», в противном случае изменения не сохранятся.

Редактор текста

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

Разделы в меню текстового редактора:

• Файл: новый документ – стирает всё в окне набора текста.
• Редактировать: содержит набор «горячих» клавиш для управления текстом.
• Вид: позволяет включать/отключать визуальные подсказки при работе с редактором.
• Вставить: позволяет вставить ссылку и видео в текст.
• Формат: содержит полный набор форматирования текста.

Панель быстрого доступа включает в себя кнопки:

• Тёмная тема: включает/выключает тёмную тему, с которой удобно набирать и редактировать текст, окрашенный в белый цвет:

• Выбор начертания: позволяет сделать текст жирным, курсивным, зачёркнутым, подчёркнутым.
• Выровнять текст: выравнивает текст по краям/центру/ширине.
• Вставить/редактировать ссылку: позволяет сделать из текста гиперссылку. Для этого необходимо либо выделить нужный текст, либо навести курсор в нужное место и нажать кнопку «Вставить/редактировать ссылку».

В открывшемся окне нужно установить URL-адрес – страницу, куда будет вести ссылка, отображаемый текст – текст, при нажатии на который человек будет открывать гиперссылку, заголовок – текст, который будет появляться при наведении курсора на гиперссылку, а также способ открытия ссылки. Ссылки можно открывать в текущем, либо новом окне.

• Списки: позволяют создать нумерованные и маркированные списки.
• Цвет текста: позволяет выделять текст цветом. Для этого нужно либо выделить нужный текст, либо навести курсор в нужное место и вызвать выпадающее окно рядом с кнопкой «Цвет текста».

В выпадающем меню можно выбрать предложенные цвета, удалить цветовое выделение, а также создать пользовательский цвет. Цвет можно выбрать вручную на палитре, а можно задать его кодовое значение в кодировках HEX или RGB:

Важно: для корректной работы текстового редактора, рекомендуем набирать текст непосредственно в нём, а не копировать его из сторонних файлов (в том числе из Word). Если Вам необходимо вставить текст в редактор, вставляйте его либо с помощью правой кнопки мыши >> «Вставить как текст», либо после вставки выделите вставленный текст, а затем нажмите «Формат» >> «Удалить форматирование».

Как правильно работать с заголовками в текстовом редакторе?

Важность при ранжировании поисковыми системами:
Чем выше уровень заголовка, тем больше влияния может оказать текст заголовка на место в поисковой выдаче. Наивысшим приоритетом обладает заголовок веб-страницы, далее следуют заголовки первого, второго и т.д. уровней. В случае, если заголовки составлены кое-как, небрежно, то страница может затеряться в поисковых выдачах, а если поисковая система решит, что Вы пытаетесь продвинуть сайт в поисковой выдаче используя заголовки, которые содержат неестественное, избыточное количество ключевых слов, то сайт может попасть в спам-фильтр.

Рекомендации:

• Заголовок веб-страницы должен быть уникальным, привлекательным, и осмысленным.
• Заголовок первого уровня должен быть уникальным, но по смыслу должен совпадать с заголовком веб-страницы.
• В заголовке первого уровня должно быть только самое важное: никаких вольностей и фантазий.
• Располагайте ключевую фразу (слово) ближе к началу заголовка, а если ключевых фраз (слов) несколько, они должны читаться как единое целое, иначе лучше обойтись одной ключевой фразой (словом).
• Не допускается перечисление слов или фраз.
• Старайтесь не включать в заголовок веб-страницы ничего кроме букв, цифр, одного тире либо одного двоеточия (в конце любых заголовков точка не ставится!)
• Оптимальная длина 10-90 символов

Важно: заголовок первого уровня должен быть выше всех остальных заголовков на странице. Остальные заголовки должны располагаться в правильной последовательности в зависимости от уровня, образуя иерархию заголовков. Примеры правильной последовательности:

Раздел «Информационные блоки»

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

Редактирование позволяет:

• Сортировать блоки (для этого в меню редактирования перетащите блок в нужное место);
• Удалять блоки и/или скрывать их на время;
• Устанавливать для блоков изображения и цветной текст (чтобы поменять цвет заголовков, нажмите на цветной круг рядом с ними, а затем выберите цвет);

• Группировать блоки в разделе (по центру, по краям и т.д.), если выключена или отсутствует функция «использовать слайды»;
• Растягивать блоки по высоте в одной строке таким образом, чтобы они были одинаковой высоты с соседними (высота блоков будет определяться самым большим блоком, т.е. тем, у которого больше всего контента). Речь идет только о соседних блоках, т.е. когда блоки находятся на одной строке;
• В некоторых шаблонах в данном разделе есть возможность использовать слайды: блоки будут располагаться в линию, и, если они не поместятся, будет активирована функция перелистывания блоков.

Раздел «Меню»

Позволяет размещать ссылки на разделы страницы, на другие страницы, а также на сторонние сайты.

Редактирование позволяет:

• Добавлять и удалять ссылки в меню;
• Сортировать ссылки (для этого перетащите ссылку в нужное место);
• Изменять название ссылки, указывать прямую ссылку на необходимую страницу;
• Выбирать страницу из списка, если нужно, чтобы ссылка вела на страницу Вашего сайта;
• Выбирать раздел на странице, если нужно, чтобы ссылка вела на раздел на этой странице;
• Выбирать одновременно и раздел, и страницу, если нужно, чтобы ссылка вела на какой-то раздел на определённой странице.

Раздел «Слайдер»

Бывает двух видов: большой и маленький.
Позволяет разместить слайдер с изображениями.

Позволяет размещать ссылки на разделы страницы, на другие страницы, а также на сторонние сайты.

Редактирование позволяет:

• Добавлять изображения из основной галереи;
• Сортировать изображения (для этого перетащите изображение в нужное место);
• Добавлять контроллеры и/или индикаторы для навигации по изображениям, изменять их форму и размер;
• Выбирать тип анимации (сдвиг, исчезновение);
• Устанавливать заголовок и подзаголовок для каждого изображения (в некоторых шаблонах). Для этого нажмите на синюю иконку карандаша в верхней правой части изображения.

Раздел «Обратная связь»

Данный раздел позволяет связаться посетителям сайта с его владельцем через специальную настраиваемую форму. По умолчанию форма имеет поля: «Ваше имя», «Ваш телефон», «Ваш E-mail», «Сообщение» и три дополнительных поля.

Редактирование позволяет:

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

После нажатия на кнопку «Настроить обратную связь», вы сможете установить настройки уведомлений о сообщениях, приходящих с Вашего сайта.

• Установить тему для писем (например, «Сообщение с моего сайта»)
• Установить заголовок в начале сообщения (например, «Заявка на консультацию»)
• Выбрать адрес почтового ящика, куда будут приходить письма
• Настроить уведомления, которые будет видеть посетитель Вашего сайта в случае успешной отправки данных или в случае ошибки.

Здесь же Вы можете настроить уведомления, приходящие пользователю после того, как он заполнит форму в случае, если он заполнил поле «E-mail адрес». Настраивается наименование отправителя, тема письма, а также его содержимое.

Примечание: если обратная связь совмещена с прайс-листом, то в письме можно использовать обозначения, которые будут автоматически подменяться: !price-name! - заменяется на заголовок, в котором указывается наименование товара или услуги. !price! - заменяется на подзаголовок, в котором указывается стоимость товара или услуги. Пример: Вы успешно заказали «!price-name!». Стоимость: !price!. Пользователь увидит в сообщении: Вы успешно заказали «Мягкая игрушка - Медвежонок». Стоимость: 900 рублей.

Важно: после внесения изменений в данном окне не забудьте нажать кнопку «Сохранить», в противном случае изменения не сохранятся.

Раздел «Карта»

Для изменения карты её необходимо создать с помощью конструктора-карт и разместить полученный с помощью конструктора js-код в соответствующее поле. Обратите внимание, карта будет отображаться только на Вашем сайте, но не будет отображаться в WateFlet (вместо карты в конструкторе будет отображаться заглушка).

Так карта будет выглядеть в конструкторе:

А так – на Вашем сайте:

Раздел «Контакты»

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

Раздел «Иконки соцсетей»

Позволяет разместить на сайте иконки социальных сетей.

Редактирование позволяет:

• Сортировать иконки (для этого в меню редактирования перетащите название иконки в нужное место);
• Устанавливать для иконок адрес (url);
• Показывать/скрывать иконки (для этого нажмите на иконку глаза).

Раздел «Прайс-лист»

Позволяет разместить на сайте список товаров или услуг. По умолчанию максимальное количество товаров или услуг в прайс-листе: 50.

Редактирование позволяет:

• Сортировать поля (для этого в меню редактирования перетащите поле в нужное место);
• Удалять товары/услуги или скрывать их на время;
• Показывать или скрывать колонки (номер, описание, цена и т.д.);
• Добавлять свои колонки;
• Выделять избранные колонки цветом;
• Включать/выключать возможность показывать дополнительную информацию в модальном окне при клике на строку;
• Устанавливать для товаров наименование, описание, изображение (будет показано в модальном окне, при клике на строку в прайс-листе).