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

Шапки, меню в воронках

Статья актуальна для версии магазина: 8.0-8.5 | 7.0-6.5

В данной статье мы рассмотрим настройку блоков типа "Шапка" в воронках.

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

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

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

Шапки, меню в воронках - 7898
Рисунок 1.

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

Шапки, меню в воронках - 5489
Рисунок 2.

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

Шапки, меню в воронках - 7920
Рисунок 3.

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

 

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

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

Шапки, меню в воронках - 3024
Рисунок 4.

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

Внешний вид

Шапки, меню в воронках - 1039
Рисунок 5.

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

Шапки, меню в воронках - 4823
Рисунок 6.

Изображение - задаёт фоновое изображение шапки. При нажатии на кнопку "Обновить изображение" откроется меню управления изображением, через которое можно:

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

 

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

Шапки, меню в воронках - 3212
Рисунок 7.

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

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

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

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

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

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

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

Шапки, меню в воронках - 6555
Рисунок 8.

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

Шапки, меню в воронках - 3920
Рисунок 9.

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

Внимание!

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

 

Пункты меню

Шапки, меню в воронках - 3049
Рисунок 10.

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

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

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

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

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

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

Шапки, меню в воронках - 6266
Рисунок 11.

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

 

Шапки, меню в воронках - 9507
Рисунок 12.

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

  • Прописать в поле "Ссылка" идентификатор блока (идентификатор блока - это его id; узнать его можно согласно инструкции https://www.advantshop.net/help/pages/work-with-css)
  • Выбрать блок вручную. Нажмите кнопку "Выбрать блок". Вы переключитесь на страницу воронки, где вам нужно будет просто кликнуть курсором мыши на нужный блок. После этого идентификатор блока автоматически пропишется в поле "Ссылка".

 

Шапки, меню в воронках - 1775
Рисунок 13.

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

 

Контакты

Шапки, меню в воронках - 9422
Рисунок 14.

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

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

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

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

Шапки, меню в воронках - 6419
Рисунок 15.

 

Логотип

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

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

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

 

Отдельно отметим загрузку изображения из галереи: данная функция позволяет загружать изображения с ресурса www.pexels.com. Все изображения из данного источника являются полностью бесплатными для коммерческого использования.

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

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

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

Шапки, меню в воронках - 4519
Рисунок 16.

 

Кнопка 1

Шапки, меню в воронках - 6881
Рисунок 17.

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

Внимание!

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

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

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

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

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

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

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

Тэги: шапка, шапки, меню, воронка, воронки, шапка воронки, меню шапки