В теме Astra простой, но очень мощный конструктор шапки и подвала. С его помощью можно создавать целые многоуровневые структуры, где будет не просто логотип и меню, но и много других полезных элементов. В этой статье рассмотрим как устроен этот конструтор.
Как найти конструктор шапки
Конструктор находится в настройке темы – раздел «Внешний вид – Настроить» в консоли WordPress. Раздел «Заголовок» — это конструктор шапки, а раздел «Подвал» — конструктор подвала. Оба конструктора одинаковые, поэтому в статье покажем только конструктор шапки.
Обзор конструктора
Конструктор состоит из трех строк, в каждой из которых по три колонки. То есть с темой Astra ваша шапка может состоять из трех уровней.
В каждую колонку можно добавлять заранее заготовленные элементы. Часть элементов доступна только в платной версии темы, однако наиболее важные из них доступны в бесплатной версии: меню, кнопки соцсетей, поиск, кнопка…
Также можно добавить в шапку любой блок WordPress или Spectra с помощью двух элементов Widget. Например, кнопку со всплывающим окном с помощью блока Modal или переключатель языков от плагина Polylang.
Дизайн элементов меняется на боковой панели слева. На вкладке «General» размещены параметры содержимого (ширина, видимость на устройствах, отображение тех или иных частей элемента), на вкладке «Design» расположены параметры внешнего вида (цвета, отступы, стиль текста и т.п.).
Параметры строки
Дизайн строки, в которой находятся элементы, можно изменить, кликнув по шестерне в боковой части строки. Обычно то, что вы будете хотеть здесь изменить, это высота строки на вкладке «General», а также цвет фона на вкладке «Design». Еще может понадобиться убрать нижнюю границу, если хотите, чтобы шапка сливалась с титульным баннером.
Если планируете добавить ещё один уровень шапки, неплохой идеей будет — выбрать для него другой цвет. Чтобы этот уровень начал отображаться, нужно добавить в него любой элемент.
Вообще, чтобы получить идеи для дизайна шапки, посмотрите сайты конкурентов. Возможно, увидите там что-нибудь интересное в плане оформления.
Элементы конструктора
Далее рассмотрим отдельные элементы конструктора, из которых можно собирать шапку: их параметры и нюансы работы.
Логотип и иконка
Чтобы загрузить логотип, выберите элемент и нажмите на боковой панели «Выбрать логотип» или «Изменить», если у вас уже есть шаблонный логотип.
Далее во всплывающем окне на вкладке «Загрузить файлы» можно открыть проводник на компьютере и выбрать нужный файл. Если нужно, WordPress позволяет его также обрезать. Например, чтобы избавиться от полей по бокам.
Под окном для загрузки логотипа можно изменить его ширину, если изображение слишком велико. Можно даже сделать разную ширину для разных планшетов и смартфонов, кликнув по иконке с изображением компьютера. Обычно на смартфонах делают размер логотипа немного меньше, чем на компьютерах и планшетах.
Чтобы скрыть название сайта, если оно отображается, но вы этого не хотели бы, нужно просто выключить все устройства в опции «Видимость названия сайта».
Также в самом низу есть подразделение для добавления иконки сайта. Она отображается во вкладке браузера. Процесс загрузки у неё такой же как и с логотипом.
После изменения не забывайте нажимать кнопку «Опубликовать» сверху на боковой панели, чтобы не потерять их.
Меню
Далее — элемент «Основное меню». Перед тем как настраивать сам элемент, сначала нужно создать меню как сущность. Для этого нужно выйти из настройки темы назад к консоли WordPress и перейти в раздел «Внешний вид – Меню».
Если вы загружали готовый шаблон, здесь будет список меню доступных для этого шаблона. Если не загружали, здесь, скорее всего, будет пусто. Ненужные меню можно удалить, если выбрать их и нажать «Удалить» в нижней части страницы.
Чтобы создать новое меню, придумайте простое и понятное название типа «Меню шапки» или «Верхнее меню» и выберите область, в которой оно должно быть. Затем нажмите «Создать». В теме Astra меню шапки называется «Основное меню».
После создания меню как сущности нужно добавить туда страницы. Для этого слева есть секция «Добавьте элементы меню». Правда, если вы только начали создавать сайт, возможно, придется сначала создать страницы в разделе «Страницы». Если уже создали, но не видите нужную страницу, убедитесь, что вы находитесь на вкладке «Все».
Если вы хотите, чтобы при наведении на элемент меню под ним появлялось выпадающее окно с дочерними вариантами, нужно взять дочерние страницы мышкой и перетащить под нужный элемент. Чтобы они стали конкретно под ним как на скриншоте. Место, куда приземлится элемент, будет отмечено пунктирной линией.
Когда меню будет готово, сохраните изменения и вернитесь в конструктор шапки. Теперь элемент «Главное меню» будет отображать только что созданное меню. Останется только настроить его внешний вид.
Обычно то, что вы хотите изменить, это цвет элементов при наведении и цвет активного элемента. Все это можно изменить на вкладке «Design». Первый цвет — по умолчанию, второй — при наведении, третий — цвет активного элемента меню.
При желании можно также изменить стиль меню при наведении с помощью опции «Стиль меню при наведении» вверху. К примеру, добавить подчеркивание.
Если сразу после выбора стиля эффект не отображается, просто опубликуйте изменения и обновите страницу. Цвет подчеркивания будет таким же, как цвет текста в опции «Текст/Ссылка».
Widget
Как вы уже поняли, с помощью блоков «Widget 1» и «Widget 2» можно добавить в шапку или подвал любой блок из редактора WordPress. Это может оказаться полезным инструментом, чтобы добавить того, чего нет среди элементов конструктора.
Чтобы продемонстрировать, как это работает, добавим в шапку кнопку со всплывающим окном, где будет контактная форма. Как на сайтах локальных бизнесов, продающих услуги не через стандартный функционал корзины, а через оформление заявок.
После добавления элемента Widget нажмите на шестерню в этом элементе и увидите, что он по сути представляет собой мини-редактор блоков WordPress. Кнопку со всплывающим окном можно добавить с помощью блока «Modal». Этот и многие другие блоки можно добавить в редактор WordPress, установив плагин Spectra от разработчиков Astra.
Поскольку место для редактирования блока ограничено, можно закрепить всплывающую панель с опциями, чтобы она не плавала, а всегда была сверху. Для этого нажмите на три точки рядом с плюсом и выберите «Верхняя панель инструментов».
Чтобы открыть параметры настройки блока, щелкните три точки уже на панели ниже и выберите «Показать дополнительные настройки».
Понятно, что это не очень удобно — работать в таком ограниченном пространстве. Если вам окей, значит окей. Но если нет, вы можете создать новую страницу, подготовить кнопку или другой блок в полноразмерном редакторе, а затем скопировать его и вставить сюда. Может быть, так будет удобнее.
Иконки соцсетей
В этом элементе у каждой соцсети есть название, иконка и ссылка на ваш профиль. В доступе есть иконки всех популярных соцсетей. Если нужно, можно даже загрузить свою. Опция «Показать метку» включает текстовое название соцсети из поля «LABEL».
На вкладке «Design» можно изменить размер и цвет иконок. Можно даже включить официальный цвет. Или можно задать собственные — под стиль вашего сайта. Как обычно: первый цвет — по умолчанию, второй — при наведении.
HTML
Этот элемент немного похож на «Widget» тем, что позволяет добавить много разных штук. Обычно это HTML-код. Например, чтобы подключить таким образом какой-нибудь сторонний сервис. Но можно добавлять и просто текст. К примеру, кликабельный номер телефона.
Идея в том, что вы добавляете номер телефона в качестве текста, а затем превращаете текст в ссылку в формате «tel двоеточие +380 и номер телефона». Тогда при нажатии на этот текст, смартфон посетителя будет открывать меню звонка.
Дизайн на маленьких экранах
Отдельный момент — мобильное меню. Оно смотрится по другому. Чтобы увидеть, как, перейдите на боковой панели внизу в режим просмотра с планшета или смартфона и выберите «Меню выпадающей панели».
Сначала в элементе «Меню выпадающей панели» необходимо непосредственно назначить правильное меню. Для этого нажмите «Настроить меню» и в варианте «Меню выпадающей панели» выберите нужное меню.
Далее — так же как и с элементом «Основное меню» — вы, наверное, захотите изменить цвета текста или фона, если они выглядят плохо. Как обычно, первый цвет — цвет по умолчанию, второй — при наведении, третий — цвет активного элемента.
За дизайн самой иконки мобильного меню отвечает элемент «Кнопка переключения». В его параметрах есть несколько стилей. Можно пощелкать и выбрать такой, который больше нравится. На вкладке «Design» — изменить цвета и размер иконки.
Вывод
Конструктор шапки Astra — это мощный инструмент, позволяющий без кода создавать шапки и подвалы со сложными макетами: с одного, двух или даже трех уровней.
Для этого в конструкторе есть такие элементы как логотип, меню, кнопка, поиск, иконки соцсетей и т.д. При необходимости конструктор можно расширить с помощью блоков Widget и HTML. Главное после настройки проверить, как шапка выглядит не только на компьютере, но и планшетах и смартфонах.
В этом материале мы рассмотрели возможности доступные в бесплатной версии темы. В Astra Pro конструктор прокачивается еще больше. Кратко об этом, а также о других отличиях платной версии, можно прочитать в нашей другой статье.
Статья по теме 👀
Обзор темы Astra