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

В этом уроке мы объединим настройки анимации Divi создать заголовок, который выделяется и привлекает внимание посетителей.

Конечный результат

Часть первая: дизайн

Конфигурация раздела

Цвет фона

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

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

расстояние

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

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

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

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

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

Цвет фона

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

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

калибровка

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

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

расстояние

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

• Обивка сверху: 0px
• Нижняя часть обивки: 0px

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

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

Цвет фона

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

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

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

Также измените настройки текста на вкладке «Дизайн».

• Текст шрифта: Дидакт Готика
• Вес шрифта текста: жирный
• Цвет текста: #000000
• Размер текста: 10vw
• Высота строки текста: 0.9em
• Ориентация текста: Центр

расстояние

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

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

Анимация

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

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

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

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

Цвет фона

С цветом фона.

• Копия 1 = Цвет фона: # 5900ff, цвет текста: #FFF
• Копировать 2 = оставить как есть, изменить продолжительность анимации (Задержка анимации): 1500 мс
• Копировать 3 = Цвет фона: # ffb200, цвет текста: #FFF, изменить продолжительность анимации: 2000 мс
• Копировать 4 = Цвет фона: # 000, цвет текста #FFF, изменить продолжительность анимации: 2500 мс

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

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

• Верхнее поле: -31.98vw

Линия трансформации

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

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

• Внизу: -35vw

Преобразование вращения

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

• Слева: 320deg

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

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

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

калибровка

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

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

расстояние

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

• Верхняя обивка: 0px

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

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

Пришло время добавлять модули. Первый модуль будет текстовым. Вы можете добавить содержание что вы хотите.

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

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

• Шрифт названия: Didact Gothic
• Вес заголовка: жирный
• Размер шрифта: 1.8vw (компьютер), 3.8vw (планшет), 4vw (телефон)

расстояние

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

• Верхнее поле: -4vw
• Нижнее поле: 2vw
• Левое поле: 30vw
• Правое поле: 30vw (компьютер), 15vw (планшеты и телефон)

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

видимость

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

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

Цвет

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

• Цвет: #000000

Dimentionnement

Также измените параметры интервалов.

• Ширина интервала: 8 пикселей
• Ширина: 7%

расстояние

Всегда с параметрами размеров.

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

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

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

Следующим модулем будет еще один текстовый модуль. Вы должны предоставить содержание де Votre Choix.

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

Затем нужно изменить настройки текста во вкладке «Дизайн».

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

расстояние

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

• Низкая маржа: 3vw
• Левое поле: 30vw
• Правое поле: 30vw (компьютер), 15vw (планшеты и телефоны)

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

Настройки модуля кнопки

Для последнего модуля, который будет модулем кнопок. Вы добавите контент по своему выбору и измените настройки следующим образом:

• Использовать пользовательский стиль: Да
• Размер шрифта: 1vw (компьютер), 1.5vw (планшет), 2vw (телефон)
• Ширина границы кнопки: 0px
• Шрифт кнопки: Poppins
• Вес текста: жирный
• Стиль шрифта: верхний регистр

расстояние

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

• Левая внешняя маржа: 30vw
• Внутренний верхний предел: 1vw
• Внутри нижнего поля: 1vw
• Левое внутреннее поле: 3vw
• правое внутреннее поле: 3vw

Закончить

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