Как вам помочь ?

Шапки, меню

Рассмотрим настройку блоков "Шапка" и “Пункты меню” в воронках.

Назначение и типы шапок в воронках

Элементы вида "шапка" предназначены для создания верхних частей страниц в воронках

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

В режиме редактирования страницы воронки нажмите кнопку "Добавить блок" (рис.1).

Рисунок 1.

Выберите категорию "Шапки" (рис.2).

Рисунок 2.

Для выбора доступно несколько вариантов шапок (рис.3):

Рисунок 3.

Чтобы добавить шапку на страницу нажмите на понравившуюся шапку из списка.

Настройки шапки

Рассмотрим, как настроить шапку. Наведите курсор мыши на добавленную шапку и нажмите кнопку "Настройки" (рис.4).

Рисунок 4.

Шапка имеет следующие вкладки с настройками:

Внешний вид

Рисунок 5.

Цветовая схема - выбор цветовой гаммы и фона шапки. Можно выбрать одну из стандартных цветовых схем (Светлая, Умеренная или Тёмная) или создать свою (Пользовательскую). Для создания своей цветовой схемы выберите из списка "Пользовательская" и нажмите "Редактировать цветовую схему". Укажите нужный цвет фона, текста и кнопок. Сохраните настройки.

Рисунок 6.

Изображение - задает фоновое изображение шапки. Нажмите на "Обновить изображение" и выберите нужный пункт:

  • загрузить изображение с компьютера

  • загрузить по ссылке

  • загрузить изображение из галереи

  • удалить изображение

Загрузка изображений из галереи осуществляется с ресурса www.pexels.com. Все изображения из данного источника полностью бесплатные для коммерческого использования (рис.7).

Рисунок 7.

Отступ сверху - задает величину пустого отступа в шапке сверху.

Отступ снизу - задает величину пустого отступа в шапке снизу.

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

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

Фиксировать при прокрутке - если данная галочка установлена, шапка будет зафиксирована в верхней части страницы при прокрутке страницы вниз.

Наезжать на соседний блок - если данная галочка установлена, шапка будет прозрачной и будет располагаться поверх следующего блока. Сравните:

Без галочки (рис.8):

Рисунок 8.

С галочкой (рис.9):

Рисунок 9.

Если используете эту галочку, позаботьтесь о том, чтобы цвет шрифта надписей в шапке был хорошо различим на фоне следующего блока.

Внимание!

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

Пункты меню

Рисунок 10.

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

Размер шрифта - задает размер шрифта пунктов меню.

Расстояние между пунктами - задает расстояние между пунктами меню.

Добавить новый элемент - добавление нового элемента меню.

Каждый элемент меню имеет поля "Название" и "Ссылка". Ссылка для пункта меню в шапке может быть двух видов - URL-адрес (например, URL-адрес другой страницы воронки или URL-адрес страницы другого сайта) и ссылка на блок.

Для добавления пункта меню второго уровня (вложенного пункта меню) нажмите на значок "+" рядом с нужным пунктом меню (рис.11).

Рисунок 11.

Настройки пункта меню второго уровня идентичны настройке пункта меню первого уровня. В клиентской части это выглядит следующим образом (рис.12):

 

Рисунок 12.

Ссылка на блок - это, фактически, якорная ссылка в пределах одной страницы воронки, "прокручивающая" страницу до указанного блока (подобная "прокрутка" также называется "скролл"). Есть два варианта выбора блока:

  • Прописать в поле "Ссылка" идентификатор блока (идентификатор блока - это его id.

  • Выбрать блок вручную. Нажмите кнопку "Выбрать блок". Вы переключитесь на страницу воронки, где вам нужно будет просто кликнуть курсором мыши на нужный блок. После этого идентификатор блока автоматически пропишется в поле "Ссылка".

 

Рисунок 13.

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

Контакты

Рисунок 14.

Телефон - поле для отображения телефона в шапке. Галочка включает/отключает показ этого элемента в шапке.

Email - поле для отображения e-mail в шапке. Галочка включает/отключает показ этого элемента в шапке.

Кнопки социальных сетей - отображение кнопок социальных сетей. Галочка включает/отключает показ этих элемента в шапке. В полях для кнопок социальных сетей необходимо указывать ссылки на ваши страницы в социальных сетях. Доступны такие социальные сети, как Вконтакте, Facebook, Youtube, Twitter, Instagram, Одноклассники.

Пример отображения контактов в шапке:

Рисунок 15.

Логотип

Показывать логотип - данная галочка включает/отключает показ логотипа в шапке.

Загрузить логотип - возможность загрузки готового логотипа. Доступные варианты загрузки:

  • загрузить изображение с компьютера

  • загрузить по ссылке

  • загрузить изображение из галереи

  • загрузить иконку из галереи

  • удалить изображение

Загрузка изображений из галереи осуществляется с ресурса www.pexels.com. Все изображения из данного источника полностью бесплатные для коммерческого использования (рис.7).

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

Создать логотип - возможность самостоятельно создать логотип.

Пример логотипа в шапке:

Рисунок 16.

 Кнопка 1

Рисунок 17.

Настройки кнопок описаны в соответствующей статье.

Внимание!

Если кнопка активна в шапке, она будет отображаться вместо кнопок социальных сетей; кнопки социальных сетей не будут отображаться в шапке.

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.