Использование текстового модуля Divi для создания блочных элементов в дизайне страницы Divi

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

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

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

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

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

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

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

Фоновый цвет

Начните с добавления нового обычного раздела на страницу, над которой вы сейчас работаете. Затем откройте настройки раздела и измените цвет фона.

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

Интервал

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

• Верхний отступ: 280 пикселей (рабочий стол), 150 пикселей (планшет и телефон)
• Нижний отступ: 280 пикселей (рабочий стол), 150 пикселей (планшет и телефон)

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

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

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

Размеры

Не добавляя никаких модулей, откройте настройки строки и сделайте так, чтобы строка занимала всю ширину экрана в настройках размера.

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

Интервал

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

• Отступ слева для столбца 1: 100 пикселей (компьютер и планшет), 50 пикселей (телефон).
• Пользовательское заполнение столбца 2: 50 пикселей.
• Пользовательское заполнение столбца 3: 50 пикселей.

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

Поле содержимого

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

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

Затем перейдите к настройкам текста H2 и внесите некоторые изменения:

• Шрифт заголовка 2: Source Code Pro
• Стиль шрифта заголовка 2: прописные
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 100 пикселей
• Интервал между буквами заголовка 2: 24 пикселя

Интервал

Уменьшите пространство вверху, используя отрицательное верхнее поле.

• Верхнее поле: -50 пикселей

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

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

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

• Шрифт текста: Исходный код Pro
• Цвет текста: #ffffff
• Ориентация текста: по ширине

Размеры

Также уменьшите ширину текстового модуля.

• Ширина: 68%

Интервал

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

• Верхнее поле: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
• Нижнее поле: 100 пикселей (планшет и телефон)

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

Поле содержимого

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

Фоновый цвет

Добавьте черный цвет фона в текстовый модуль.

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

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

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

• Шрифт текста: Исходный код Pro
• Ориентация текста: влево
• Цвет текста: светлый

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

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

• Стиль шрифта ссылки: прописные буквы и подчеркивание
• Цвет подчеркивания ссылки: #ffffff
• Цвет текста ссылки: # edf000
• Размер текста ссылки: 16 пикселей
• Расстояние между буквами ссылки: 3 пикселя

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

Заголовок H3 в нашем поле содержимого требует следующих настроек:

• Стиль шрифта заголовка 3: прописные
• Размер текста заголовка 3: 33 пикселя.

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

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

• Цвет текста заголовка 4: # 4f4f4f
• Размер текста заголовка 4: 19 пикселей
• Интервал между буквами заголовка 4: -1px

Размеры

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

• Ширина: 88% (рабочий стол), 60% (планшет), 90% (телефон)

Интервал

Нам также нужно будет изменить настройки Spacing.

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

Граница

Затем добавьте тонкую границу к текстовому модулю.

• Ширина границы: 2 пикселя
• Цвет границы: # 424242

Коробка Тень

И в завершение добавьте красочную тень коробки.

• Горизонтальное положение тени блока: 19 пикселей
• Положение прямоугольной тени по вертикали: 16 пикселей
• Сила распространения тени коробки: -4px
• Цвет тени: # f2ff00

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

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

Модификации модуля Red Text

Изменить цвет текста ссылки

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

• Цвет текста ссылки: # e02b20

Изменить интервал

Затем перейдите в настройки Интервал и добавьте верхнее поле.

• Верхнее поле: -150 пикселей (рабочий стол), -20 пикселей (планшет), 50 пикселей (телефон)

Изменить цвет тени блока

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

• Цвет тени: # e02b20

Модификации модуля синего текста

Изменить цвет текста ссылки

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

• Цвет текста ссылки: # 0ff3ff

Изменить размер

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

• Размеры: 67% (рабочий стол), 60% (планшет), 90% (телефон)

Изменить интервал

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

• Верхнее поле: -20 пикселей (рабочий стол), -30 пикселей (планшет), 50 пикселей (телефон)
• Левое поле: -160 пикселей (рабочий стол), 200 пикселей (планшет), 0 пикселей (телефон)

Изменить цвет тени блока

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

• Цвет тени: # 0ff3ff

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

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

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

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