Divi с новым Global Presets! Скидка 10%!

По умолчанию в модуле Полноширинного (Fullwidth) заголовка Divi вы можете использовать не более двух кнопок. Однако, что если вам нужно таких кнопок три или даже больше? Есть один быстрый способ и сегодня я объясню вам, как это сделать.

Допустим, мы создаем полноширинный модуль заголовка на странице сайта и хотим чтобы в нем было 3 кнопки CTA. Мы можем добавить две из них в общих настройках этого Fullwidth модуля. Здесь мы вводим свои текст и URL-адрес кнопки № 1 (и то же самое для кнопки № 2).
А вот чтобы добавить третью кнопку нам нужно будет сделать следующее:

В разделе Content нашего модуля мы добавляем следующий код:

<a href="Ваш URL" class="et_pb_more_button et_pb_button third_button">Кнопка №3</a>

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

ПРИМЕЧАНИЕ. Вставляйте код в режиме Text. Замечено, что режим Visual может самостоятельно изменить значок кавычек “ на «» или ¨¨, и это вызывает проблемы с отображением кнопки.

Итак, этот код добавит еще одну кнопку CTA к вашему модулю Divi, но она будет расположена выше двух первых. Поэтому мы добавляем небольшой кусок пользовательского кода CSS. Его можно вставить или в поле в нижней части опций настройки темы Divi или в файл stylesheet.css вашей дочерней темы или, если такой модуль используется лишь однажды, в соответствующий раздел Custom CSS настроек страницы).

Попробуем следующий код (и, если нужно, поиграем со значениями margin-right и margin-left для позиционирования кнопки):

@media (min-width: 981px) {
.et_pb_fullwidth_header_container .center .header-content {
width: 100% !important;
}
.header-content .third_button {
float: left;
margin-right: -21%;
margin-left: 15%;
}
}

Если дизайн кнопок в заголовке у нас будет изменен в настройках модуля, то третью кнопку нужно будет сделать похожей на две другие. Для этого воспользуемся инструментом разработчика встроенным в браузеры Chrome и Firefox. Щелкаем правой кнопкой мыши на кнопке, дизайн которой хотим скопировать и выбераем «Просмотреть код» (в файерфоксе — «Инспектировать элемент»). 

В правом столбце мы видим  необходимые настройки стиля CSS (как показано на скриншоте ниже). 

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

body #page-container .et_pb_section .et_pb_fullwidth_header_0 .third_button.et_pb_button {
color: #ffffff!important;
border-radius: 10px;
font-size: 23px;
background-color: #e02b20;
}

Теперь все наши кнопки будут иметь одинаковый дизайн.

Узнать как дополнительно стилизовать кнопки  Divi, вы можете в статье о том, как создавать анимированные кнопки при помощью Divi.