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

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

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

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

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

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

Подход

1. Понимание режимов наложения Divi

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

• Режим наложения, примененный к модулю, будет смешивать модуль + столбец под ним.
• Режим наложения, примененный к столбцу, будет смешивать столбец + строку под ним.
• Режим наложения, примененный к строке, будет смешивать строку + раздел под ней.

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

2. Выбор между полностью темной или светлой цветовой палитрой.

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

3. Удаление всей ширины желоба между колоннами и модулями

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

4. Использование отступов вместо изменения ширины элемента

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

Начнем творить!

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

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

Фоновый цвет

Давайте начнем! Добавьте обычный раздел на новую или существующую страницу и придайте ему правильный цвет фона (в зависимости от того, хотите ли вы воссоздать светлый или темный макет).

• Цвет фона: #ffffff (светлый макет), # 000000 (темный макет)

Интервал

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

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

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

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

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

Столбец 2 градиентный фон

Добавьте градиентный фон во второй столбец строки. Здесь мы разместим текстовый модуль заголовка в следующей части руководства.

• Цвет 1: # c700ff
• Цвет 2: # 32f1ff
• Столбец 2 Направление градиента: 150 градусов
• Столбец 2 Начальная позиция: 20%
• Конечное положение в столбце 2: 60%

Размеры

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

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

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

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

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

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

Фоновый цвет

Дайте вашему модулю правильный фон в зависимости от типа макета, который вы хотите воссоздать.

• Цвет фона: #ffffff (светлый макет), # 000000 (темный макет)

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

Затем измените настройки текста заголовка.

• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000 (светлый макет), #ffffff (темный макет)
• Размер текста заголовка 2: 67 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Интервал между буквами заголовка 2: -2 пикселя

Интервал

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

• Нижний отступ: 50 пикселей

Режим смешивания

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

• Режим наложения: осветлить (светлый макет), затемнить (темный макет).

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

Видимость

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

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

Фоновый цвет

Измените цвет фона в соответствии с типом создаваемого макета.

• Цвет фона: #ffffff (светлый макет), # 000000 (темный макет)

Интервал

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

• Отступ слева: 250 пикселей
• Отступ справа: 250 пикселей

Режим смешивания

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

• Режим наложения: осветлить (светлый макет), затемнить (темный макет).

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

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

К следующему ряду! Используйте следующую структуру столбцов:

Столбец 1 градиентный фон

Продолжите, добавив градиентный фон в первый столбец.

• Цвет 1: # c700ff
• Цвет 2: # 32f1ff
• Столбец 1 Тип градиента: линейный
• Столбец 1 Направление градиента: 105 градусов
• Столбец 1 Начальная позиция: 20%
• Конечное положение столбца 1: 50%

Столбец 2 градиентный фон

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

• Цвет 1: # 32f1ff
• Цвет 2: # c700ff
• Столбец 2 Тип градиента: линейный
• Столбец 2 Направление градиента: 90 градусов
• Столбец 2 Начальная позиция: 40%
• Конечное положение в столбце 2: 60%

Столбец 3 градиентный фон

То же самое и с третьим столбцом.

• Цвет 1: # c700ff
• Цвет 2: # 32f1ff
• Столбец 3 Тип градиента: линейный
• Столбец 3 Направление градиента: 85 градусов
• Столбец 3 Начальная позиция: 20%
• Конечное положение столбца 3: 50%

Размеры

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

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

Интервал

И добавьте немного настраиваемых отступов слева и справа.

• Отступ слева: 100 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Отступ справа: 100 пикселей (компьютер и планшет), 50 пикселей (телефон)

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

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

Пора начинать добавлять модули! Добавьте модуль Blurb в столбец 1 с выбранным заголовком. Позже мы будем использовать отдельный модуль для добавления содержимого тела.

Выберите значок

Выберите нужный значок.

Фоновый цвет

И измените цвет фона модуля Blurb Module.

• Цвет фона: #ffffff (светлый макет), # 000000 (темный макет)

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

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

• Цвет значка: # 000000 (светлая раскладка), #ffffff (темная раскладка)
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 51px

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

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

• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000 (светлый макет), #ffffff (темный макет)
• Интервал между заголовками: -1px
• Высота строки заголовка: 1,2 мм

Интервал

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

• Нижнее поле: 5 пикселей
• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Режим смешивания

И последнее, но не менее важное: примените правильный режим наложения.

• Режим наложения: осветлить (светлый макет), затемнить (темный макет).

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

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

Мы разделяем заголовок и тело модуля Blurb на два модуля, чтобы режим наложения применялся только к значку и заголовку. Идите вперед и добавьте текстовый модуль прямо под модулем Blurb, содержащим основной контент.

Фоновый цвет

Затем добавьте цвет фона.

• Цвет фона: #ffffff (светлый макет), # 0c0c0c (темный макет)

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

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

• Расстояние между буквами текста: 0,5 пикселей
• Высота текстовой строки: 2.3em
• Ориентация текста: по ширине
• Цвет текста: темный (светлый макет), светлый (темный макет)

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 70 пикселей
• Отступ справа: 70 пикселей

Коробка Тень

И в довершение всего, добавьте также тонкую тень от коробки.

• Сила размытия тени коробки: 56 пикселей
• Сила распространения тени коробки: -12 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Клонировать модуль Blurb и текстовый модуль дважды + место в оставшихся столбцах

И последнее, но не менее важное: клонируйте оба модуля, которые вы можете найти в столбце 1, и поместите дубликаты в два оставшихся столбца. Соответственно измените и содержимое.

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

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

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

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