Как вывести блок после шапки в 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
} );