Как показать верхнюю панель в бесплатной теме GeneratePress?

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

Панель уведомлений в теме GeneratePress

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

Верхняя панель в теме GeneratePress

Шаг № 1 – Добавьте содержимое верхней панели

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

• Перейдите в раздел «Внешний вид > Виджеты».
• Прокрутите вниз область виджетов и найдите виджет «Верхняя панель».

Виджет верхней панели в теме GeneratePress

• Нажмите значок + и введите «столбцы» в поле поиска. Это отфильтрует блок «Столбцы» и щелкните его, чтобы вставить.

Блок столбцов фильтра

• Выберите макет 66/33, чтобы отобразить текст шириной 75 %, а кнопку — шириной 25 %.

Выберите макет столбца

• Введите текст в первый столбец (используя блок «Абзац»). Здесь вы можете настроить текст, используя настройки блока на правой боковой панели. Однако рекомендуется настроить типографику и цвета в настройщике, как описано в шаге 3.

Добавить абзац в первый блок

• Аналогичным образом добавьте блок «Кнопка» во второй столбец и добавьте текст в кнопку.

Добавить кнопку во втором столбце

• Используйте «Просмотр списка», чтобы выбрать родительский блок «Столбцы» и выровнять элементы по середине.

Выровнять элементы по середине

Если ширины столбца недостаточно, щелкните первый столбец и измените ширину (например, 80%). Однако обязательно отрегулируйте ширину второго столбца соответствующим образом (например, 20%), чтобы общая ширина соответствовала 100%.

Изменить ширину столбца

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

Проверьте верхнюю панель на живом сайте

Шаг № 2 – Настройте макет верхней панели

Второй шаг — настроить положение и макет верхней панели.

• Перейдите в раздел «Внешний вид > Настройка», чтобы открыть настройщик темы.
• Перейдите в «Макет», а затем в раздел «Верхняя панель».

Настройка макета панели с открытым верхом

• Измените ширину и внутреннюю ширину на «Полная» и установите выравнивание «По центру». Опция заполнения верхней панели будет доступна только с дополнительным плагином GP Premium. Если у вас есть плагин, отрегулируйте отступы, чтобы вокруг контента было достаточно места. Обязательно просматривайте верхнюю панель на настольном компьютере, планшете и мобильном устройстве, выбрав соответствующее представление в левом нижнем углу.

Отрегулируйте ширину и выравнивание

Шаг №3 – Настройка цветов и шрифтов

Следующий шаг — изменить цвета и шрифт содержимого верхней панели.

• Перейдите в раздел «Типографика» в настройщике, прокрутите вниз и нажмите кнопку «Добавить типографику».

Добавить новую типографику

• Введите «top» в поле «Целевой элемент», чтобы отфильтровать, и выберите «Верхняя панель» из результатов.

Выберите типографику верхней панели

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

Изменить настройки шрифта для верхней панели

• После завершения настройки типографики перейдите в раздел «Цвета» в настройщике. Разверните раздел «Верхняя панель» и измените цвет фона, текста и ссылок. Отсюда вы также можете изменить стили кнопок. Однако это повлияет на весь ваш сайт глобально. Если вы хотите изменить цвет ссылки кнопки, я рекомендую сделать это в настройках блока виджета, а не в настройщике.

Изменить цвета верхней панели

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

Верхняя панель в теме GeneratePress

Шаг № 4 – Настройка интервала и ширины верхней панели

Если вы заметили, что отступы/поля и ширина содержимого верхней панели не выровнены должным образом, вы можете вручную добавить CSS, чтобы настроить их (поскольку бесплатная тема не имеет модуля Spacing). Просто щелкните правой кнопкой мыши на верхней панели и выберите опцию «Проверить», чтобы открыть раздел инструментов разработчика в браузере. Найдите боковой раздел и выберите этот элемент. Как вы можете видеть на скриншоте ниже, в моем случае в качестве идентификатора отображается блок 9. Нажмите значок + (правило нового стиля), отображаемый в правой части раздела на вкладке «Стили», и добавьте параметры ширины и поля/отступа.

Я добавляю следующий CSS, чтобы настроить выравнивание содержимого верхней панели.

в сторону#block-9 { ширина: 60%; маржа сверху: 10 пикселей; поле внизу: -30 пикселей; }

Найдите дополнительный блок для верхней панели

Если все выглядит нормально, скопируйте код CSS и перейдите в раздел «Внешний вид > Настройка > Добавить CSS». Вставьте код в поле и нажмите кнопку «Опубликовать».

Добавить пользовательский CSS для верхней панели

Заключительные слова

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