Как вывести блок после шапки в 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
} );
Вам помог ответ?
Похожие вопросы
Как изменить фоновый цвет контента?
+9
Как в карточках постов "Стандартная" вывести кнопку "Читать далее"?
+9
Как вывести виджет анонсов записей с миниатюрами?
+8
Как на мобильном "Меню в шапке" вывести под "Меню под шапкой"?
+8
Как изменить цвет заголовка записи\страницы?
+7
Как изменить адрес страницы, с которой было отправлено сообщение?
+5
Как изменить иконку в маркированных списках
+5
Как изменить карточки постов на главной странице?
+5
Как добавить фавикон?
+48
Как вывести содержание поста (оглавление)?
+4
Как вывести подменю в 2 колонки?
+4
Почему не отображаются иконки на профили в социальных сетях?
+4
Как вывести блоки Конструктора главной на главной статической странице
+4
Как включить комментарии на страницах?
+4
Как выровнять слева кнопку Наверх?
+3
Как задать фоновую картинку для шапки?
+3
Как добавить рекламный код между карточками постов?
+3
Как убрать автоматический вывод миниатюры на странице записи?
+3
Как вывести блок автора на странице записи?
+3
Как в рекламные блоки вставить код php?
+3