Создайте свою шапку сайта

Шапка сайта — это верхняя часть сайта, которая отображается на всех страницах сайта.

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

У вас есть полная свобода позиционирования элементов, просто перетаскивая их в любую позицию в заголовке – вот и все.

Построитель заголовков – вкладка «Общие»

Вкладка «Общие» — это вид по умолчанию при открытии конструктора заголовков. Здесь у вас есть обзор настройки вашего заголовка.

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

Остальная часть экрана показывает предварительный просмотр вашего заголовка и положение ваших элементов в разделах заголовка.

Прозрачный заголовок

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

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

Вкладка «Общие»

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

Включить — выберите, следует ли включать прозрачный заголовок на рабочем столе , мобильном устройстве или обоих ( рабочий стол+мобильное устройство ).

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

Вы также можете установить ширину логотипа прозрачного заголовка. В зависимости от используемого вами логотипа вы можете добавить логотип для экранов Retina (с более высокой плотностью пикселей), который должен быть как минимум в 2 раза больше или больше. Просто нажмите « Другой логотип для устройств Retina » и загрузите свой логотип Retina.

Вкладка «Дизайн»

На вкладке «Дизайн» вы найдете варианты оформления прозрачного заголовка. Вы сможете установить заголовок сайта, фон, меню, подменю и цвета. Также есть варианты настройки наложения фона и нижней границы. Нижняя граница по умолчанию установлена на 0 пикселей и, следовательно, не видна — увеличение значения границы (1 пиксель или более) сделает ее видимой во внешнем интерфейсе, и вы также получите возможность установить цвет нижней границы.

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

Конструктор заголовков – Дизайн

Вкладка «Дизайн» используется для установки интервала между заголовками:

Ширина устанавливает общий объем пространства, который будут использовать ваши виджеты заголовков:

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

Маржа добавляет пространство к одной или нескольким сторонам заголовка. Это добавит места как в область виджетов заголовка, так и в фон.

Визуальный конструктор заголовков

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

Эти три раздела:

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

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

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

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

Вы можете настроить каждый раздел, щелкнув значок шестеренки в левой части разделов.

В каждом разделе есть две вкладки:

Общий

Высота – установите высоту каждого заголовка отдельно.

Дизайн

Размер нижней границы (и цвет) – если вам нужно отделить заголовок от другого раздела или содержимого веб-сайта, вы можете добавить нижнюю границу, задав ее размер. После того, как вы установите размер границы, появится дополнительная опция (Цвет нижней границы) для выбора цвета границы;

Фон – установите цвет фона заголовка;

Отступы – добавьте отступы с одной или нескольких сторон заголовка. Это добавит пространство между краями раздела заголовка и содержимым;

Маржа — добавьте поля на одной или нескольких сторонах заголовка. Это добавит пространство между этим заголовком и другими областями веб-сайта (другие заголовки, содержимое страницы/публикации, края экрана и т. д.);

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

Раздел «За пределами холста»

Раздел Off Canvas используется для редактирования меню планшета/мобильного телефона. Это меню активируется нажатием кнопки переключения в мобильном меню (также называемом меню «гамбургер»).

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

Общий

Тип заголовка – установите для типа «Выкл. холст» значение «Всплывающее » (меню появляется с правой или левой стороны экрана), « Полноэкранный» или «Выпадающий» ;

Цель раскрывающегося списка — выберите, хотите ли вы, чтобы ваши подменю открывались при нажатии на значок со стрелкой вниз ( Значок ) или при нажатии на весь пункт меню ( Ссылка )

Выравнивание содержимого — выравнивание виджетов раздела «За пределами холста» по левому краю , по центру или правому краю ;

Дизайн

Inner Element Spacing – добавление пространства между элементами;

Фон – установите цвет фона.

Элемент заголовка

Айдентика и логотип сайта

Это элемент «Идентификатор и логотип вашего сайта» (ранее называвшийся « Логотип »). На вкладке «Общие» вы можете добавить свой логотип , установить ширину логотипа и добавить другой логотип для устройств Retina .

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

Вкладка «Дизайн» используется, если вы хотите добавить к этому элементу поле .

Основное меню

Здесь вы найдете пункты меню, добавленные в основное меню ( «Панель управления» > «Внешний вид» > «Меню» ).

На вкладке «Общие» представлены несколько параметров подменю: « Ширина подменю» , «Анимация контейнера» (анимация, используемая при раскрытии подменю), « Разделитель элементов » (добавляет или удаляет разделитель между элементами подменю).

Вы также можете решить, следует ли устанавливать для пунктов меню Stack on Mobile . Это наиболее распространенная настройка мобильных меню — пункты меню располагаются один над другим.

Вкладка «Дизайн» позволит вам установить стиль наведения меню , стиль контейнера подменю , установить цвета текста и фона , шрифт меню , расстояние между мануалами и поля .

Поиск

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

Социальные сети (Заголовок)

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

Вкладка «Дизайн» содержит параметры оформления значков.

Кнопка

Это используется для добавления пользовательской кнопки в заголовок. Добавьте сюда кнопку «Текст» , «Ссылку» и стиль ( вкладка «Дизайн» ).

Вторичное меню

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

Вы можете настроить это меню так же, как и основное меню .

HTML

Используйте этот элемент для добавления HTML-кода или шорткодов.

Виджет

Это используется для добавления любых виджетов веб-сайта ( Панель управления > Внешний вид > Виджеты ) в заголовок.

Кнопка-переключатель

Кнопка переключения (также известная как значок или кнопка-гамбургер) используется для расширения меню планшета/мобильного телефона. Таким образом, этот элемент доступен только на планшетах или мобильных устройствах .

На вкладке «Общие» вы можете выбрать значок кнопки и размер значка , добавить метку меню (текст рядом со значком), если вам это нужно, а также стиль кнопки переключения .

Параметры стиля расположены на вкладке «Дизайн» : «Цвет значка» , «Цвет фона» , «Радиус границы» и «Поля».

Счёт

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

Корзина

Это добавит значок корзины (WooCommerce) в ваш заголовок. Затем укажите, должно ли отображаться также название корзины или только значок корзины, а также хотите ли вы также отображать общую сумму корзины (вкладка «Общие »). Вы также можете стилизовать свою тележку и лоток для тележки ( вкладка «Дизайн» ).

Автор

Розалия Баязитова