20 заголовков Flexbox для Divi 5 (скачать бесплатно!)

Flexbox делает это проще, чем когда -либо, создавать заголовки, которые выглядят чистыми, красиво адаптируются к разным размерам экрана и просты в настройке в Divi 5. В этом бесплатном пакете вы найдете 20 уникальных конструкций заголовков Flexbox, каждый из которых построен с системой гибкого макета Divi 5 для точного выравнивания и отзывчивого управления. Если вы хотите использовать существующие глобальные стили вашего сайта или начать с готового дизайна, вы найдете оба варианта здесь.

Предварительный просмотр и живая демонстрация

Давайте посмотрим на все 20 заголовков Flexbox в этом пакете. Этот пакет бесплатен для вас, чтобы загрузить дальше по сообщению.

Подписаться на наш канал на YouTube

Просмотреть живую демонстрацию

Скачать 20 заголовков Flexbox для Divi 5

Получите все 20 заголовков Flexbox бесплатно, в том числе как по умолчанию, так и версии. Каждый заголовок готов импортировать в вашу библиотеку Divi и использовать в создателе темы. Просто скачайте и начните строить.

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Что включено (42 экспорта)

После того, как вы загрузите и расстегнут папку, вы найдете все 42 экспорта макета, аккуратно организованную в версии по умолчанию и Protyled в качестве отдельных заголовков и в виде полных пакетов «все заголовки».

По умолчанию - отдельные заголовки (20) → используют ваши глобальные стили.
По умолчанию - все заголовки (1) → полный пакет с использованием ваших глобальных стилей.

Prestyled-отдельные заголовки (20) → включают в себя встроенный стиль для мгновенного, готового вида.
Prestyled - все заголовки (1) → полный пакет с применением встроенного стиля.

Как установить макеты

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

1. Импорт макетов в библиотеку Divi

Перейти в Диви → Библиотека Диви.

Оказавшись там, нажмите кнопку «Импорт и экспорт», чтобы установить файлы.

Ищите файл Headbox Header Mayouts (All) и нажмите, чтобы импортировать его.

2. Создайте новый шаблон заголовка

Перейти к Divi → Builder.

Создайте новый шаблон заголовка или откройте существующий.

3. Загрузить макет заголовка

После того, как вы находитесь в области заголовка, вы можете использовать библиотеку Divi, чтобы выбрать выбор заголовка. Нажмите кнопку «Добавить макет» в верхнем левом углу строителя тем.

Выберите сохраненный макет .

Нажмите на макет заголовка, который вы хотите добавить в The Theme Builder.

Нажмите кнопку «Используйте эту макет» , чтобы загрузить заголовок.

Обязательно сохраните изменения в новом заголовке и застройке темы.

По умолчанию против Prestyled: Что вы должны выбрать?

Когда вы откроете папку для загрузки, вы увидите две версии каждого заголовка: ** по умолчанию ** и ** prestyled **. Они построены точно так же, разница в том, как они справляются с стилем.

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

Заголовки Prestyled поставляются со всеми их стилями, запеченными в: цвета, шрифты и дизайны кнопок встроены. Они выглядят точно так же, как превью прямо из коробки. Это здорово, если вы создаете быструю демонстрацию, идеи тестирования или хотите получить точный дизайн, который вы видите на скриншотах, не касаясь ваших переменных.

Короче говоря, перейдите по умолчанию, если вы хотите, чтобы заголовки плавно смешивались с существующими стилями сайта. Выберите Prestyled, если вы хотите, чтобы готовый внешний вид показан в предварительных просмотрах.

Настройка заголовков

Система макета Flexbox от Divi 5 дает вам мощные инструменты для настройки макетов, сохраняя при этом все отзывчивые. Вот как настроить эти заголовки в соответствии с стилем вашего сайта.

1. Отрегулируйте настройки гибки

Выберите строку, содержащую элементы заголовка. На вкладке «Дизайн» найдите меню раскрытия макета. Разверните его, чтобы показать настройки Flexbox.

Здесь вы можете изменить направление макета с строки на строку, столбец или столбец. Эта функция позволяет вам изменить направление вашего макета.

Настройки оправдания контента позволяют управлять тем, как элементы гибки распределены вдоль основной оси - основное направление гибкого контейнера, определяемое направлением макета. Он определяет расстояние и выравнивание предметов горизонтально или вертикально, в зависимости от направления макета.

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

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

2. Показать/скрыть элементы в разных точках останова

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

Например, вы можете скрыть значки в социальных сетях в заголовке, чтобы сохранить пространство на мобильных экранах. Находясь в точке останова настольных компьютеров, перейдите к вкладке «Дополнительно». Расширить выпадающее меню видимости. Далее нажмите на точки остановки телефона и планшета, чтобы скрыть элемент.

Используйте адаптивный предварительный просмотр Divi 5, чтобы просмотреть заголовок. При просмотре макета в точке перерыва телефона скрытый элемент будет виден, но с серо -серого, указывая на то, что он будет скрыт на передней части.

3. Добавьте ссылки, где это необходимо

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

Разверните раскрытие ссылки и добавьте ссылку в свою учетную запись в социальных сетях в поле URL -адреса ссылки .

Обязательно сохраните свой заголовок перед выходом из строителя тем.

Если вы еще этого не сделали, вам нужно создать меню для вашего сайта. Выйдите из визуального строителя и перейдите к внешнему виду → меню. Добавьте имя в поле «Имя меню» .

Нажмите на флажок «Основной меню» , а затем нажмите «Создать меню» .

Чтобы добавить страницы в меню, нажмите на вкладку «Просмотреть все» и выберите страницы, которые вы хотели бы появиться в меню. Нажмите «Добавить» в меню , чтобы назначить их.

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

Используйте Divi 5 для строительства ваших заголовков сегодня

Эти 20 заголовков Flexbox - это быстрый способ ускорить ваши сборки Divi 5, независимо от того, работаете ли вы в своих устоявшихся глобальных стилях или начинаете с предварительно разработанного взгляда. Загрузите их, бросьте в создатель темы и сделайте их своими. Flexbox обрабатывает выравнивание, чтобы вы могли сосредоточиться на дизайне.