Как анимировать глобальный заголовок с помощью Divi

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

Давайте перейдем к этому.

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Загрузите анимированный глобальный заголовок БЕСПЛАТНО

Чтобы получить доступ к бесплатному анимированному глобальному заголовку, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

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

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

1. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

Перейти в конструктор тем Divi

Начните с перехода к Divi Theme Builder в вашем бэкэнде WordPress.

Создать глобальный заголовок с нуля

Нажмите «Добавить глобальный заголовок» и продолжите, выбрав «Создать глобальный заголовок».

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

Настройки раздела

Интервал

Оказавшись внутри редактора шаблонов, вы можете приступить к созданию глобального заголовка. Мы следим за тем, чтобы у нас был «блочный» дизайн, чтобы в дальнейшем мы могли добавлять анимацию в два разных контейнера; столбец + модуль. Откройте раздел, который вы видите внутри редактора шаблонов, и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

Затем добавьте тень блока.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (13,60,216,0.24)

Индекс Z

И убедитесь, что вы увеличили z-индекс раздела на вкладке «Дополнительно». Это гарантирует, что содержимое глобального заголовка будет отображаться поверх всего содержимого страницы / публикации.

• Индекс Z: 99999

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину экрана.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Видимость

Убедитесь, что вы также установили значение «видимое» для переполнения строки.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Настройки столбца (все три)

Фоновый цвет

После того, как вы завершили настройку строки, вам нужно будет также стилизовать столбцы. Откройте каждый столбец и соответствующим образом измените цвет фона:

• Цвет фона столбца 1: #efefef
• Цвет фона столбца 2: # ffcb0f
• Цвет фона столбца 3: # 2848ff

Интервал

Также добавьте пользовательские отступы сверху и снизу к каждому столбцу.

• Верхняя прокладка: 0,5vw (рабочий стол), 1vw (планшет и телефон)
• Нижняя прокладка: 0,5vw (рабочий стол), 1vw (планшет и телефон)

Главный элемент

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

display: flex;
flex-direction: column;
justify-content: center;

Столбец 1 Индекс Z

И последнее, но не менее важное: откройте настройки столбца 1 и увеличьте индекс z в настройках видимости.

• Индекс Z: 10

Добавить модуль меню в столбец 1

Выберите меню

Пора добавлять модули, начиная с модуля меню в столбце 1. Выберите меню по вашему выбору.

Загрузить логотип

Затем загрузите свой логотип.

Удалить фон

Продолжите, удалив цвет фона модуля.

Макет

Перейдите на вкладку дизайна и убедитесь, что к макету применимы следующие настройки:

• Стиль: Выровнено по левому краю
• Направление раскрывающегося меню: вниз

Настройки текста меню

Настройте следующие параметры текста:

• Шрифт меню: Montserrat
• Цвет текста меню: # 000000
• Размер текста меню: 0,7vw (рабочий стол), 2vw (планшет), 3vw (телефон)

Параметры раскрывающегося меню

Вместе с настройками выпадающего меню.

• Цвет строки раскрывающегося меню: #ffffff

Настройки значков

И измените цвет значка меню гамбургера.

• Цвет значка меню гамбургера: # 2848ff

Размеры

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

• Максимальная ширина логотипа: 6vw (рабочий стол), 9vw (планшет), 13vw (телефон)

Интервал

И завершите настройки модуля, добавив левое и правое поле.

• Левое поле: 2vw
• Правое поле: 2vw

Добавить модуль кода в столбец 1

Вставить код CSS для отзывчивости VW

Теперь, в модуле меню, мы использовали единицу ширины области просмотра для наших значений размера текста и интервалов. Мы сделали это, чтобы вы могли разместить до 8 пунктов меню на разных размерах экрана рабочего стола, не разделяя его на две строки. Нам нужно будет убедиться, что пространство между пунктами меню также создано с помощью модуля vw. Для этого мы добавим модуль кода в столбец 1 и вставим следующие строки кода CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Добавить модуль "Социальные сети" в столбец 2

Добавить социальные сети

В следующем столбце нам понадобится модуль отслеживания социальных сетей. Добавьте нужные социальные сети.

Индивидуальный сброс стилей социальных сетей

Продолжите, сбросив настройки каждой сети.

Выравнивание

Завершите настройки модуля, изменив выравнивание модуля.

• Выравнивание модуля: по центру

Добавить модуль кнопок в столбец 3

Добавить копию

Переходим к следующему и последнему столбцу. Здесь нам понадобится только кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

Выравнивание

Перейдите на вкладку дизайна и измените выравнивание кнопок.

• Расположение кнопок: по центру

Настройки кнопок

Завершите настройки модуля, стилизовав кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 1.2vw (планшет), 2vw (телефон)
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: Ультра полужирный
• Стиль шрифта кнопок: прописные

3. Добавьте соответствующую анимацию к элементам

Комбинация анимации глобального заголовка №1

Столбец 1 Анимация

Теперь, когда мы создали глобальный заголовок, пора добавить анимацию! Чтобы воссоздать первую анимацию, откройте настройки столбца 1 и добавьте следующую анимацию:

• Стиль анимации: Zoom
• Направление анимации: вверх
• Начальная непрозрачность анимации: 100%

Колонка 2 Анимация

Добавьте следующие настройки анимации в столбец 2 рядом:

• Стиль анимации: Zoom
• Направление анимации: вниз
• Задержка анимации: 500 мс
• Начальная непрозрачность анимации: 100%

Столбец 3 Анимация

Завершите настройки столбца, назначив следующую анимацию столбцу 3:

• Стиль анимации: Zoom
• Направление анимации: вверх
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

Модульные анимации (все три модуля)

Завершив настройку столбцов, откройте каждый из модулей по отдельности и используйте для них следующую анимацию:

• Стиль анимации: Затухание
• Задержка анимации: 1500 мс

Комбинация анимации глобального заголовка №2

Столбец 1 Анимация

Хотите вместо этого воссоздать второй набор анимации? Откройте настройки столбца 1 и добавьте следующую анимацию:

• Стиль анимации: слайд
• Направление анимации: вверх
• Начальная непрозрачность анимации: 100%

Колонка 2 Анимация

Используйте следующие настройки анимации для следующего столбца 2:

• Стиль анимации: слайд
• Направление анимации: вверх
• Задержка анимации: 500 мс
• Начальная непрозрачность анимации: 100%

Столбец 3 Анимация

И завершите настройки столбца, применив следующие настройки анимации к столбцу 3:

• Стиль анимации: слайд
• Направление анимации: вверх
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

Модульные анимации (все три модуля)

Затем откройте каждый модуль по отдельности и добавьте следующую анимацию:

• Стиль анимации: слайд
• Направление анимации: вниз
• Задержка анимации: 1500 мс

4. Сохраните изменения Builder и просмотрите результат.

Завершив настройку анимации, вы можете сохранить глобальный заголовок, выйти из построителя тем и просмотреть результат на своем веб-сайте!

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

Теперь, когда мы выполнили все шаги, давайте в последний раз рассмотрим примеры для разных размеров экрана.

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Последние мысли

В этом уроке мы показали вам, как анимировать глобальный заголовок, используя встроенные параметры Divi и конструктор тем. Это отличный способ привлечь внимание к заголовку вашего сайта. Возможности встроенной анимации Divi безграничны. Чтобы помочь вам начать работу, мы показали вам два разных примера. Вы также можете бесплатно скачать файлы JSON!

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