Как сделать заголовок популярным с помощью настроек анимации Divi

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

Мы собираемся объединить настройки анимации Divi, чтобы создать заголовок, который выделяется и привлекает внимание ваших посетителей. Мы разделим заголовок на 5 частей и создадим эффект вспышки, который заставит ваших посетителей следить за движением и читать то, чем они делятся.

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Начнем воссоздавать!

Добавить новый раздел

Фоновый цвет

Приступим к созданию! Создайте новую страницу и добавьте к ней обычный раздел. Откройте настройки раздела и измените цвет фона.

• Цвет фона: #ededed

Интервал

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

• Нижняя обивка: 10vw

Добавить строку №1

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

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и измените цвет фона строки.

• Цвет фона: # c9c9c9

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите также верхнее и нижнее заполнение строки по умолчанию.

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

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

Добавить содержимое

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

Фоновый цвет

Затем перейдите в настройки фона модуля и добавьте цвет фона.

• Цвет фона: # c9c9c9

Настройки текста

Измените также настройки текста на вкладке дизайна.

• Шрифт текста: Didact Gothic
• Толщина шрифта текста: полужирный
• Цвет текста: # 000000
• Размер текста: 10vw
• Высота текстовой строки: 0.9em
• Ориентация текста: по центру

Интервал

И создайте желаемую форму, используя настраиваемые верхний и нижний отступы.

• Верхняя обивка: 10vw
• Нижняя обивка: 3vw

Анимация

И последнее, но не менее важное: мы собираемся добавить анимацию. Важно убедиться, что продолжительность анимации и начальная непрозрачность равны нулю. Это позволит отображать текстовый модуль с эффектом вспышки.

• Стиль анимации: Затухание
• Повтор анимации: один раз
• Продолжительность анимации: 0 мс
• Задержка анимации: 1000 мс

Клонировать текстовый модуль x4

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

Изменить дубликат №1

Содержание

Измените копию первого дубликата.

Фоновый цвет

Вместе с цветом фона.

• Цвет фона: # 5900ff

Цвет текста

Измените цвет текста на белый.

• Цвет текста: #ffffff

Анимация

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

• Задержка анимации: 1500 мс

Заменить дубликат №2

Содержание

Затем измените содержимое второго дубликата.

Фоновый цвет

Вместе с цветом фона.

• Цвет фона: # ffb200

Цвет текста

И цвет текста тоже.

• Цвет текста: #ffffff

Анимация

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

• Задержка анимации: 2000 мс

Заменить дубликат №3

Содержание

Продолжите, изменив содержимое третьего дубликата.

Анимация

Вместе с задержкой анимации.

• Задержка анимации: 2500 мс

Заменить дубликат №4

Содержание

Переходим к следующему и последнему дубликату. Измените содержание.

Фоновый цвет

Вместе с цветом фона.

• Цвет фона: # 000000

Цвет текста

Измените также цвет текста.

• Цвет текста: # 3a3a3a

Анимация

И увеличиваем задержку анимации в настройках анимации.

• Задержка анимации: 3000 мс

Добавьте отрицательное поле к каждому текстовому модулю, кроме первого

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

• Верхняя маржа: -21.98vw

Преобразовать строку

Преобразовать Перевести

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

• Внизу: -35vw

Преобразовать Повернуть

Измените также значения поворота преобразования.

• Слева: 320 градусов

Добавить строку №2

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

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

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите по умолчанию верхнее заполнение следующей строки.

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

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

Добавить контент H1

Пора начинать добавлять модули! Первый модуль, который нам нужен, - это заголовочный текстовый модуль. Добавьте контент H1 по вашему выбору.

Настройки текста H1

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

• Шрифт заголовка: Didact Gothic
• Толщина шрифта заголовка: полужирный
• Размер текста заголовка: 1.8vw (рабочий стол), 3.8vw (планшет), 4vw (телефон)

Интервал

Добавьте некоторые пользовательские значения полей в настройки интервала.

• Верхняя маржа: -4vw
• Нижняя маржа: 2vw
• Левое поле: 30vw
• Правое поле: 30vw (рабочий стол), 15vw (планшет и телефон)

Добавить модуль разделителя в столбец 2

Видимость

Следующий необходимый нам модуль - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем перейдите на вкладку дизайна и измените цвет разделителя.

• Цвет: # 000000

Размеры

Измените также настройки размера.

• Вес разделителя: 8 пикселей
• Ширина: 7%

Интервал

Вместе с настройками интервалов.

• Нижняя маржа: 1vw
• Левое поле: 30vw

Добавить текстовый модуль описания в столбец 2

Добавить содержимое

Следующий необходимый нам модуль - это еще один текстовый модуль. Введите контент по вашему выбору.

Настройки текста

Затем измените параметры текста на вкладке дизайна.

• Размер текста: 0.8vw (рабочий стол), 1.3vw (планшет), 1.6vw (телефон)
• Высота текстовой строки: 2.2em

Интервал

Также добавьте некоторые пользовательские значения полей в настройки интервала.

• Нижняя маржа: 3vw
• Левое поле: 30vw
• Правое поле: 30vw (рабочий стол), 15vw (планшет и телефон)

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Ширина границы кнопки: 0 пикселей
• Шрифт кнопки: Поппинс
• Толщина шрифта: полужирный
• Стиль шрифта: прописные

Интервал

Перейдите к настройкам интервалов и добавьте несколько значений полей и отступов, и все готово!

• Левое поле: 30vw
• Верхняя обивка: 1vw
• Нижняя обивка: 1vw
• Левый отступ: 3vw
• Правое заполнение: 3vw

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

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

Рабочий стол

Мобильный

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

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