Обзор и обзор пакета макетов заголовков от Divi Life

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

Импорт пакета макетов заголовка Divi Life

Перед использованием макетов с Divi Theme Builder вам необходимо импортировать их в свою библиотеку Divi. К счастью, это простой и понятный процесс:

1. Загрузите и разархивируйте макеты в папку на вашем компьютере.
2. Перейдите в Divi > Divi Library в меню панели управления WordPress.
3. Выберите Импорт и экспорт вверху экрана.
4. Выберите « Импорт» во всплывающем окне, выберите « Выбрать файл» и перейдите к макету, который вы хотите загрузить (выберите « ВСЕ-Divi-Life-Header-Templates», если вы хотите загрузить их все сразу.
5. Нажмите « Импортировать макеты Divi Builder» и дождитесь завершения загрузки.

Макеты теперь будут доступны в вашей библиотеке. В приведенном выше примере я выбрал загрузку всех шаблонов. Конструктор тем теперь имеет доступ ко всем макетам. Вам нужно только внести изменения в код и меню для заголовка 1. Остальное работает как есть.

Создание глобального заголовка в конструкторе тем Divi

Откройте Divi Theme Builder и нажмите, чтобы добавить глобальный заголовок. Выберите « Добавить из библиотеки» .

Перейдите на вкладку « Сохраненные макеты» и выберите нужный макет. Подождите, пока он импортируется.

Щелкните значок редактирования, чтобы настроить макет.

Я выбрал Header-1-a. Это показывает макет в виде каркаса. Он включает модуль кода с настраиваемыми CSS и JS. Многие модули включают идентификаторы класса для настраиваемого CSS. Часть кода может не работать в предварительном просмотре построителя тем. Рекомендую просматривать шапку в интерфейсе.

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

Изменение содержимого и стиля

Затем вам просто нужно выбрать меню, добавить свой логотип и настроить цвета в соответствии с вашим веб-сайтом. В заголовке используются стандартные модули, поэтому он работает как любой заголовок. Я выбрал свое меню в приведенном выше примере.

Кнопка уже использует пользовательские стили. Просто добавьте созданные вами цвета и шрифты. Щелкните, чтобы сохранить изменения.

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

Примеры заголовков

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

Мы рассмотрим их сочетание с разными цветами фона и размерами экрана. Я использую макеты домашней страницы и целевой страницы из пакета макетов пиццерии.

Макет заголовка 1

Заголовок 1 включает модуль кода, меню, поиск и кнопку для создания CTA.

В процессе импорта значения не сохраняются правильно, поэтому необходимо изменить три строки в CSS.

Кроме того, меню необходимо будет переименовать и добавить в меню класс CSS. К счастью, все эти настройки легко сделать. Инструкции есть в документации. Это единственный раз, когда мне понадобилась документация во время этого обзора.

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

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

Высота заголовка уменьшается по мере прокрутки. Элементы остаются прежнего размера.

Вот вид планшета. Пункты меню помещаются в раскрывающееся меню. Три элемента с классом CSS включают стиль, который выделяет их среди остальных.

В представлении телефона CTA размещается под логотипом, а также сохраняется стиль для элементов с классом CSS.

Макет заголовка 2

Заголовок 2 использует модуль кода с CSS и JS, рекламное объявление, изображение, текст, социальные сети, меню и модули кнопок.

Это заголовок 2A. Вот как это выглядит на темной странице. Заголовок не занимает всю ширину сайта. Верхнее меню прозрачное и включает кнопки социальных сетей. Внизу находится CTA и контактная информация. Телефонный номер кликабельн.

Вот дизайн на светлой странице. Мне нравится, как выделяется этот CTA.

После прокрутки верхнее меню прокручивается вместе со страницей, а нижнее меню остается вверху.

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

Вот вид телефона. CTA находится под меню. Заголовок прокручивается вместе со страницей.

Макет заголовка 3

Модули для заголовка 3 включают код, подписку в социальных сетях, меню и кнопку.

Вот заголовок 3B на светлом фоне. Верхний раздел включает кнопки социальных сетей и поиск, а нижний раздел добавляет CTA.

Вот как это выглядит на темном фоне.

Верхнее меню прокручивается вместе со страницей, а нижнее меню остается в верхней части экрана.

Вот вид планшета.

Вот как на экране телефона элементы складываются.

Макет заголовка 4

Заголовок 3 включает в себя код, несколько объявлений, кнопку, меню и модули подписки в социальных сетях.

Вот заголовок 3C на светлом фоне. Верхняя часть содержит контактную информацию и CTA, а нижняя часть - кнопки социальных сетей.

Вот как это выглядит на темном фоне. Оригинальные цвета отлично смотрятся с этим фоном. В этом примере я наведен на призыв к действию.

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

Это вид планшета.

В обзоре телефона элементы складываются.

Макет заголовка 5

Заголовок 5 включает в себя модуль кода, несколько объявлений, подписку на социальные сети и модули меню.

Вот заголовок 5C на темном фоне. В верхней части находится интерактивный номер телефона, кнопки социальных сетей и ссылка на контактную форму. Хорошо выделяются красный и темно-серый цвета.

Также красиво смотрится на светлом фоне. Тень коробки более заметна.

Верхняя половина меню продолжает прокручиваться, а нижняя половина остается в верхней части экрана.

Вот вид планшета.

Это телефонный вид. Мне нравится, как складывается содержимое верхнего раздела.

Макет заголовка 6

Заголовок 6 включает модуль кода, 4 объявления, модуль подписки в социальных сетях и модуль меню.

Это заголовок 6B на темном фоне. У этого есть три раздела: верхний включает кнопки социальных сетей, средний включает контактную информацию, а нижний содержит ссылки меню.

Вот заголовок на светлом фоне.

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

Вот вид планшета. Он перемещает номер телефона наверх.

Вот дизайн в виде телефона.

Покупка

Пакет макетов заголовков можно приобрести в Divi Life по цене 49 долларов (в оставшейся части года продается за 5 долларов). Он предназначен для использования на неограниченном количестве сайтов для вас и ваших клиентов и включает доступ ко всем будущим обновлениям. Он также включает поддержку и документацию.

Конечные мысли

Пакет макетов заголовков для Divi Theme Builder - это интересный набор макетов. CSS и JavaScript добавляют стиль, который обычно недоступен в заголовке. Это помогает сделать заголовок совершенно другим, чем стандартные заголовки. Поскольку каждый дизайн имеет несколько предварительно стилизованных вариантов, легко найти что-то, что подходит вашему веб-сайту, без необходимости вносить много изменений. Стиль уже соответствует бесплатным макетам Divi от ET.

Заголовки действительно выглядят профессионально разработанными, и я нашел их простыми в использовании. Я просмотрел только несколько из них. Работа с заголовком 1 - единственный макет, требующий сложных действий. Это не так уж и сложно, если вы прочитаете инструкцию (угадайте, откуда я знаю). Просто имейте в виду, что для этого требуется больше шагов, чем для других.

Если вас интересуют профессионально разработанные заголовки для Divi Theme Builder, стоит взглянуть на пакет макетов заголовков от Divi Life.

Ждем вашего ответа. Вы пробовали пакет макетов заголовков от Divi Life? Дайте нам знать, что вы думаете об этом в комментариях.

Лучшее изображение через PureSolution / shutterstock.com