Использование значков презентаций в качестве эстетических элементов может придать вашему макету уникальный дизайн, о котором вы, возможно, никогда не думали. Помимо размещения значка модуля презентации для покрытия текстового модуля, вы можете использовать фон и границу текстового модуля для стилизации значка. Это создает приятный дизайнерский акцент, который обрамляет контент, придавая вашим иконкам совершенно уникальный дизайн.
В этом уроке я покажу вам, как стилизовать значки презентаций в качестве акцентов дизайна для вашего контента в Divi.
обследование
Вот несколько примеров дизайна, который мы создадим в этом уроке.
Загрузите образцы макетов для этого урока
Чтобы освоить макет шаблонов акцентов модуля аннотации. бесплатно, вам необходимо сначала загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вы должны подписаться на наш список рассылки Divi Daily, используя форма ниже. Как новый подписчик, вы будете получать еще больше достоинств Divi и пакет Divi Layout каждый понедельник. бесплатно ! Если вы уже есть в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «повторно зарегистрированы» или получите дополнительные электронные письма.
скачать
Начните с дизайна с нуля
Для начала создайте новую страницу и дайте ей название. Затем разверните конструктор Divi в общедоступной системе. Добавьте обычный раздел со строкой в один столбец. Перед добавлением вашего первого модуля обновите настройки строки следующим образом:
Использовать произвольную ширину желоба: ДА
Пользовательская ширина желоба: 1
Это исключит любые пользовательские поля между модулями.
Создание текстового модуля
Затем добавьте текстовый модуль внутри строки.
Обновите текстовый модуль следующим текстом заполнения:
Наши услуги В этом разделе отображается список различных услуг, которые мы предлагаем нашим клиентам.
Стилизовать текстовый модуль
Теперь обновите оставшуюся часть параметра Текстовый модуль следующим образом:
- Цвет фона: #ffffff
- Заголовок 2 Шрифт: Nunito
- Заголовок 2 Вес шрифта: жирный
- Название Стиль шрифта 2: TT
- Заголовок 2 Цвет текста: #f24a5b
- Заголовок 2 Размер текста: 42 пикселей (рабочий стол), 32 пикселей (планшет), 22 пикселей (телефон)
- Заголовок 2 Интервал между буквами: 16px
- Заголовок 2 Высота строки: 1.3em
- Ширина: 500px (рабочий стол), 490px (планшет)
- Выравнивание модуля: центр
- Пользовательский отступ (рабочий стол): 40px вверху, 40px внизу, 50px слева, 50px справа
- Пользовательский отступ (телефон): 20px слева, 20px справа
- Ширина границы: 10px
- Цвет границы: #ffffff
Поскольку мы собираемся перекрыть текстовый модуль значками презентации, нам нужно убедиться, что текстовый модуль находится над значками в порядке z-пространства. Для этого нам сначала нужно добавить следующий фрагмент CSS в область CSS основного элемента модуля Text:
положение: относительное;
Затем установите значение z-index в 1.
Теперь этот текстовый модуль будет помещен поверх любых других перекрывающихся модулей, что важно для дизайна.
Создайте значок Blurb
Теперь мы готовы создать первую иконку аннотации. Для этого нам сначала нужно добавить модуль Blurb и перетащить его в верхнюю часть текстового модуля. Затем удалите содержание заполнитель (текст заголовка и основной текст) и нажмите, чтобы использовать значок вместо изображения для текста аннотации.
Затем обновите следующие параметры проекта:
- Цвет значка: # 2ea3f2
- Использовать размер шрифта значка: ДА
- Размер шрифта значка: 100 пикселей
- Пользовательское поле: 0px внизу (это удаляет нижнее поле по умолчанию между модулями, не обязательно, если вы используете ширину желоба 1)
Затем, поскольку мы не используем текст с модулем (только значок), мы можем удалить нижнее поле по умолчанию под значком макета. Для этого добавьте следующий собственный код CSS в область CSS Blurb Image:
Размытое изображение CSS:
нижнее поле: 0 пикселей
Дублируйте значок Blurb
Прежде чем мы начнем размещать рекламное объявление, давайте продолжим, продублируем модуль рекламного объявления и перетащим его под текстовый модуль. Теперь у вас должен быть значок презентации над и под текстовым модулем.
Размещение значков презентации с помощью Transform Translate
Чтобы расположить значки презентации, мы будем использовать параметры преобразования Divi, которые позволяют нам разместить модуль презентации со значком в любом месте страницы.
Значок позиционирования Blur #1
Чтобы расположить верхнюю иконку blurb, откройте настройки модуля blurb и обновите следующее:
- Transform translate X axis (рабочий стол): -242px
- Преобразовать преобразовать ось Y (рабочий стол): 50 пикселей
- Преобразование перевести ось X (телефон): -170px
Тем не менее, вы можете добавить это в соответствии с настройками, которые вы сделали.
Значок позиционирования Blur # 2
Прежде чем размещать этот значок презентации, давайте увеличим его. Для этого откройте настройки модуля Blurb и измените размер шрифта значка на 150 пикселей.
Затем разместите значок презентации, обновив следующие параметры преобразования:
- Transform translate X axis (рабочий стол): 242px
- Преобразовать преобразовать ось Y (рабочий стол): -100 пикселей
- Преобразование перевести ось X (телефон): 190px
Создание еще одного раздела
С этого момента мы можем черпать вдохновение из того, что мы сделали, чтобы создать еще одну зону с другим расположением. Все, что вам нужно сделать, это создать новый столбец и скопировать предыдущие модули. Чтобы выполнить множественное копирование, наведите курсор на каждый модуль, удерживая нажатой клавишу CTRL на клавиатуре.
Конечный результат
Теперь посмотрим на конечный результат.
Заключительные мысли
Добавление значков презентаций в качестве акцентов дизайна в ваш содержание — это пример того, как можно объединить два модуля для создания совершенно уникального дизайна. В этом случае фон и граница текстового модуля служат частичным наложением окружающих значков. Результат уникален и открывает двери для изучения нескольких вариантов дизайна. Не стесняйтесь исследовать различные значки и цветовые комбинации, чтобы создать что-то для своих нужд.
Надеюсь получить известие от вас в комментариях.
