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

Создание уникального текстового дизайна для вашего веб-сайта может быть сложной задачей, особенно если вы не хотите использовать тонны CSS или прибегать к добавлению удобного для поисковой оптимизации текста для изображений, которые вы создаете в Photoshop. С помощью Divi (и некоторого «нестандартного» мышления) вы можете создавать несколько уникальных текстовых дизайнов без каких-либо внешних CSS или пользовательских изображений. Хитрость заключается в том, чтобы использовать разделители разделов Divi для наложения текста, чтобы добавить разрывы и текстуру различными способами. В этом уроке я собираюсь изучить возможности разделителей разделов Divi для создания уникального текстового дизайна, который выведет заголовки ваших страниц на новый уровень.

Давайте начнем.

Sneak Peek

Вот лишь несколько примеров текстового дизайна, возможного с использованием этой техники:

Начиная

Для этого дизайна вам нужно будет создать новую страницу с помощью визуального конструктора. На панели управления WordPress перейдите на Страницы> Добавить новый. Затем дайте своей странице название и разверните визуальный конструктор. Выберите вариант «Строить с нуля». Теперь вы готовы к работе!

Дизайн №1: Разорванный текст с градиентным выделением

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

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

Откройте настройки раздела и обновите следующее:

Цвет фона градиента слева: rgba (124,218,36,0,66)
Цвет фона градиента справа: rgba (0,106,193,0,61)

Ширина: 80%
Выравнивание сечения: по центру

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: #ffffff
Высота верхнего разделителя: 1.8vw
Повторение по горизонтали верхнего делителя: 3x
Расположение верхнего разделителя: поверх содержимого раздела

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: #ffffff
Высота нижнего разделителя: 1.8vw
Горизонтальный повтор нижнего делителя: 3x
Расположение нижнего разделителя: поверх содержимого раздела

Пользовательская маржа: 5vw сверху, 5vw снизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

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

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

Пользовательская ширина: 100%
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

Настройки текстового модуля

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

Шрифт текста: Освальд
Стиль шрифта текста: TT
Цвет текста текста: # 0c71c3
Размер текста текста: 10vw
Высота текстовой строки: 1em
Ориентация текста: по центру
Пользовательское поле: -5vw сверху, -4vw снизу
Пользовательские набивки: 2vw сверху, 2vw снизу

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

Вот окончательный дизайн.

Дизайн текста # 2: текст с текстурой вертикальных линий

Для второго текстового дизайна создайте новый раздел с строкой в ​​одну колонку. Затем добавьте в столбец текстовый модуль. Я подумал, что вместо того, чтобы сначала настраивать раздел, лучше начать с текстового модуля, чтобы вы могли лучше видеть процесс дизайна.

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

В строке из одного столбца добавьте текстовый модуль с содержанием «наша работа». Затем обновите настройки дизайна следующим образом:

Шрифт текста: Поппинс
Толщина шрифта текста: Ультра полужирный
Размер шрифта текста: 8vw
Высота текстовой строки: 1em
Ориентация текста: по центру
Пользовательское поле: 0 пикселей сверху, 0 пикселей снизу

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

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

Пользовательская ширина: 100%
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

Обновите настройки раздела следующим образом:

Ширина: 70%

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: #ffffff
Высота верхнего разделителя: 8vw
Повторение по горизонтали верхнего делителя: 150x
Расположение верхнего разделителя: поверх содержимого раздела

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: #ffffff
Высота нижнего разделителя: 8vw
Горизонтальное повторение нижнего делителя: 150x
Переворот нижнего разделителя: вертикальный
Расположение нижнего разделителя: поверх содержимого раздела

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Ключом к этому дизайну является опция Divider Horizontal Repeat. Установка горизонтального повтора разделителя на 150x с высотой, равной высоте текста, создает серию перекрывающихся вертикальных линий, которые проходят сверху и снизу раздела. Не забудьте настроить нижний разделитель так, чтобы он переворачивался по вертикали, чтобы «линии» тянулись вверх.

Вот окончательный дизайн.

Дизайн №3: Текст с частичной текстурой сверху и снизу

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

Обновить настройки раздела

Цвет фона: # e02b20

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # e02b20
Высота верхнего разделителя: 3vw
Повторение по горизонтали верхнего делителя: 30x

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: # e02b20
Высота нижнего разделителя: 3vw
Горизонтальное повторение нижнего делителя: 30x

Главное здесь - убедиться, что цвет вашего разделителя соответствует цвету фона раздела, чтобы разделители были видны только там, где они перекрывают текст.

Обновить настройки текста

Теперь осталось только обновить цвет текста:

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

Вот окончательный дизайн.

Интересная альтернатива дизайну дизайну №3

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

Цвет фонового градиента слева: # 68a4d8 (небо)
Правый градиент фона: # 1c7503 (трава).
Стартовая позиция: 82%
Конечная позиция: 0%
Индивидуальная набивка: верх 5vw
Стиль верхнего разделителя: облака (или пузыри?)
Цвет нижнего разделителя: # 1c7503

Затем измените цвет текста на # 000835.

Вот результат.

А как насчет мобильных?

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

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

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

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

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

Ваше здоровье!