Как вывести блок после шапки в Reboot

Ниже пример кода, который выводит блок из трех колонок после шапки сайта. В коде есть комментарии, в которых описаны некоторые свойства.

Стили из тега <style> можно перенести в Внешний вид > Настроить > Дополнительные стили.

Установите и активируйте плагин ProFunctions и добавьте в него код:

/**
 * Вывести блок из трех колонок после шапки
 * Все стили, что находятся в теге <style> могут быть перенесены
 * во Внешний вид > Настроить > Дополнительные стили, либо в дочернюю тему
 */
add_action( 'reboot_after_header', function() {
   ?>

   <div class="header-after">
      <div class="container">
         <div class="header-after__item header-after__item--1">
            Колонка 1
         </div>
         <div class="header-after__item header-after__item--2">
            <a href="tel:+79032283585">8 800 000-00-00</a>
            <br>
            Время работы: 10:00 — 21:00
         </div>
         <div class="header-after__item header-after__item--3">
            <!-- для примера здесь размещена иконка поиска -->
            <div class="search-icon js-search-icon my_icon"></div>
         </div>
      </div>
   </div><!--.header-after-->


   <style>
        .header-after {
            margin-top: -30px;
            margin-bottom: 30px;

            /* фоновый цвет */
            background: #eaf8f7;
        }

        .header-after .container {
           /* если у вас шапка на всю ширину */
           /* или в блоке под шапкой большие отступы по бокам */
           /* две строки ниже можно удалить */
            padding-left: 20px;
            padding-right: 20px;
        }

        @media (min-width: 768px) {
            .header-after .container {
                display: flex;
                align-items: center;

                /* если у вас шапка на всю ширину */
                /* или в блоке под шапкой большие отступы по бокам */
                /* две строки ниже можно удалить */
                padding-left: 45px;
                padding-right: 45px;
            }
        }

        .header-after__item {
            flex: 1 0 0;
            padding: 10px 0;
        }

        /* для каждой отдельной колонки можно задать свои стили */
        /* например, для второй колонки текст выровнен по центру */
        /* для третьей колонки текст выровнен по правому краю */
        /* но только для экранов больше 768px через @media (min-width: 768px) */
        .header-after__item--1 {

        }

        .header-after__item--2 {
            text-align: center;
        }

        @media (min-width: 768px) {
            .header-after__item--3 {
                text-align: right;
            }
        }
   </style>

   <?php
} );
Вам помог ответ?
Похожие вопросы
Как вывести встроенную форму подписки?
+8
Как вывести рекламу на страницах?
+8
Как вывести виджеты в подвале сайта?
+8
Что означает ошибка publisher в микроразметке?
+8
Как изменить поля формы обратной связи?
+7
Как во встроенном слайдере вместо записей выводить страницы?
+6
Почему не показывается количество просмотров?
+6
Как изменить цвет активного пункта меню?
+5
Как добавить кликабельный номер телефона в шапку сайта?
+5
C формы обратной связи не приходят письма
+4
Как вывести виджет анонсов записей с миниатюрами?
+4
Как выровнять логотип и название сайта по центру?
+4
Как добавить ссылки на предыдущую/следующую запись на странице записи?
+4
Как изменить почту, на которую приходят сообщения с формы обратной связи?
+3
Как изменить адрес страницы, с которой было отправлено сообщение?
+3
Как изменить фоновый цвет контента?
+3
Как изменить цвет заголовка записи\страницы?
+3
Как вывести содержание поста (оглавление)?
+3
Как вывести подменю в 2 колонки?
+3
Как вывести хлебные крошки?
+3