Дизайн и виджеты

На этой странице

Внешний вид всего сайта (цвета, шрифты, кнопки, эффекты) настраивается в одном месте — на вкладке Дизайн в редакторе. Дополнения для всего сайта, например кнопки чата и панель объявления, находятся на вкладке Виджеты. Изменения сразу видны в предпросмотре и появляются на сайте после нажатия Опубликовать.

Готовые темы

В редакторе откройте вкладку Дизайн (левая панель).
В блоке Цвета раздел Готовые темы предлагает полные цветовые наборы: Оранжевая, Полуночно-синяя, Неоновый лайм, Роза, Фиолетовая, Светлая студия и Чёрно-белая.
Нажмите на тему, чтобы применить её. После этого любой цвет ниже можно подправить.

Совет: начните с темы, которая ближе всего к вашему бренду, и поменяйте только Акцентный цвет на цвет бренда. Часто этого вполне достаточно.

Цвета

Цвет	Где используется
Фон	Фон страницы.
Карточки / поверхности	Карточки, блоки и более светлые разделы.
Линии и границы	Рамки и разделители.
Основной текст	Заголовки и основной текст.
Второстепенный текст	Более мелкий и приглушённый текст.
Акцентный цвет (кнопки, детали)	Кнопки, выделения, ссылки, иконки.
Текст на акцентном цвете	Текст на кнопках; убедитесь, что он хорошо читается на акцентном цвете.
Цвет свечения	Мягкое свечение за изображениями и разделами.
Светлые карточки (цены)	Светлые карточки с ценами в разделе Пакеты и цены.

Типографика

Шрифт заголовков и Шрифт текста: выбираются из списка веб-шрифтов; предпросмотр подгружает их сразу при выборе.
Насыщенность заголовков: от обычной до сверхжирной.
Межбуквенный интервал заголовков: более плотные или более разреженные заголовки.
Размер заголовка: увеличивает или уменьшает все заголовки.
Размер текста: базовый размер основного текста.
Небольшие надписи заглавными буквами: писать ли небольшие надписи над заголовками заглавными буквами.

Формы

Скругление карточек и Скругление кнопок: от квадратных до полностью круглых.
Вид кнопок: Сплошной цвет, Градиент или Контур.
Ширина контента: насколько широким может быть содержимое на больших экранах.

Эффекты и анимации

Сила свечения: насколько сильный эффект свечения (0 отключает его).
Анимация при прокрутке: как появляются разделы при прокрутке: Без анимации, Плавное появление, Появление снизу, Увеличение или Проявление резкости.
Карточки приподнимаются при наведении: карточки слегка поднимаются под курсором.
Плёночное зерно поверх сайта: тонкая фактурная текстура.
Плавная прокрутка: мягкая прокрутка, когда ссылка ведёт к разделу.

Собственный CSS

В блоке Дополнительно поле Дополнительный CSS позволяет добавить собственный CSS для изменений дизайна, которых нет в настройках. Пример:

.btn { text-transform: uppercase; }

Собственный CSS — для опытных пользователей. Если что-то сломалось, удалите добавленное или воспользуйтесь Ctrl+Z.

Дизайн отдельного раздела

У каждого раздела есть и собственное оформление в Изменить → Оформление: фон (без фона, карточка, свечение, акцент), отступы, выравнивание заголовка и фоновое изображение с затемнением. Многие разделы добавляют свои настройки, например колонки, стиль карточек или форму изображения. См. Разделы и элементы.

Виджеты

Откройте вкладку Виджеты. В ней три группы: Кнопки чата, Панель объявления и Прочее.

Кнопки чата

Плавающие кнопки в углу экрана позволяют посетителям связаться с вами в одно касание.

Включите Показывать кнопки чата.
В блоке Каналы нажмите Добавить элемент для каждого канала и выберите Канал:
- WhatsApp, Viber, Telegram, Messenger, Instagram;
- Звонок, SMS, Email;
- Другая ссылка (любой адрес https://…, с вашей иконкой).
Заполните Номер, имя пользователя или адрес:
- WhatsApp, Viber и Звонок: ваш номер в международном формате, например +381601234567;
- Telegram и Instagram: ваше имя пользователя;
- Email: ваш адрес email;
- Другая ссылка: полный адрес https://….
При желании добавьте Заготовленное сообщение (WhatsApp), Текст рядом с кнопкой (необязательно) и Цвет (пусто = цвет бренда).

Затем выберите, как ведут себя кнопки:

Настройка	Что делает
Текст главной кнопки	Текст на главной кнопке (по умолчанию Chat).
Расположение	Одна кнопка (открывает небольшое меню со всеми каналами) или Все кнопки (столбиком).
Сторона экрана	Справа или Слева.
Показывать текст рядом с кнопками	Показывает подписи рядом с иконками.
Пульсация (привлекает внимание)	Мягкая пульсирующая анимация.
Появляется через	Задержка в секундах перед появлением кнопок.
Показывать на телефоне / Показывать на компьютере	Где видны кнопки.

Панель объявления

Тонкая полоса в самом верху сайта для новостей или предложений (Бесплатная доставка на этой неделе, Новый курс уже доступен).

Включите Показывать панель вверху сайта.
Напишите Текст и при желании Текст ссылки (необязательно) вместе с Ссылка ведёт на.
Выберите Стиль: Акцентная, Тёмная или Светлая.
Решите, отмечать ли Посетитель может её закрыть.

Прочее

Кнопка «наверх»: небольшая кнопка, которая возвращает к началу длинной страницы.
Линия прогресса прокрутки вверху: тонкая линия, которая заполняется по мере прокрутки.

Советы

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

Не нашли ответ?

Напишите нам, и мы ответим в течение одного рабочего дня.

Контакты