Как стилизовать иконки Blurb в качестве дизайнерских акцентов для контента в Divi

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

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

Давайте нырнем!

Sneak Peek

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

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

Чтобы получить доступ к бесплатному макету дизайна акцента модуля аннотации, вам сначала нужно будет загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файл

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Начало работы с созданием дизайна с нуля

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

Использовать нестандартную ширину желоба: ДА
Пользовательская ширина желоба: 1

Это избавит от любых настраиваемых полей между модулями.

Создание текстового модуля

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

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

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

Стилизация текстового модуля

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

Цвет фона: #ffffff

• Шрифт заголовка 2: Nunito
• Толщина шрифта заголовка 2: полужирный
• Стиль шрифта заголовка 2: TT
• Цвет текста заголовка 2: # f24a5b
• Размер текста заголовка 2: 42 пикселя (рабочий стол), 32 пикселя (планшет), 22 пикселя (телефон)
• Заголовок 2 буквы Sp [размер: 16 пикселей
• Высота строки заголовка 2: 1,3 м

• Ширина: 500 пикселей (рабочий стол), 490 пикселей (планшет)
• Выравнивание модуля: по центру
• Пользовательский отступ (рабочий стол): 40 пикселей сверху, 40 пикселей снизу, 50 пикселей слева, 50 пикселей справа
• Пользовательский отступ (телефон): 20 пикселей влево, 20 пикселей вправо.
• Ширина границы: 10 пикселей
• Цвет границы: #ffffff

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

position: relative;

Затем установите значение z-index равным 1.

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

Создание значка Blurb

Теперь мы готовы создать первую иконку рекламного объявления. Для этого мы должны сначала добавить модуль рекламного сообщения и перетащить его в верхнюю часть текстового модуля. Затем удалите фиктивный контент (текст заголовка и основной текст) и нажмите, чтобы использовать значок вместо изображения для рекламного объявления.

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

• Цвет значка: # 2ea3f2
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 100 пикселей
• Пользовательское поле: нижнее поле 0 пикселей (при этом удаляется нижнее поле по умолчанию между модулями; не требуется, если вы используете ширину межстрочного желоба равную 1)

Затем, поскольку мы не используем никакого текста с модулем (только значок), мы можем избавиться от нижнего поля по умолчанию под значком рекламного объявления. Для этого добавьте следующий настраиваемый CSS в поле CSS Blurb Image:

CSS Blurb Image:

margin-bottom: 0px

Дублируйте значок Blurb

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

Размещение значков Blurb с помощью Transform Translate

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

Позиционирование значка рекламного ролика №1

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

• Transform Translate по оси X (рабочий стол): -242px
• Преобразовать преобразовать ось Y (рабочий стол): 50 пикселей
• Преобразовать преобразовать ось X (телефон): -170 пикселей

Позиционирование значка рекламного ролика №2

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

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

• Преобразовать преобразовать ось X (рабочий стол): 242 пикселей
• Преобразовать преобразовать ось Y (рабочий стол): -100 пикселей
• Преобразовать преобразовать ось X (телефон): 190 пикселей

Создание строки из двух столбцов

Чтобы создать следующий столбец, продублируйте существующую строку и измените макет столбца строки на макет с двумя столбцами (1/2 1/2).

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

Затем удалите нижний значок рекламного объявления в первом столбце.

Выравнивание значков вставки в столбце 2

Для значков Blurb в столбце 2 нам нужно сместить верхний значок влево, а нижний - вправо. Мы можем сделать это, просто изменив значение оси X Transform Translate.

Откройте настройки модуля рекламных сообщений для верхнего модуля рекламных сообщений в столбце 2 и обновите следующее:

• Преобразовать преобразовать ось X (рабочий стол): 242 пикселей
• Преобразовать преобразовать ось X (телефон): 170 пикселей

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

Затем обновите значение преобразования преобразования для модуля нижнего рекламного сообщения в столбце 2 следующим образом:

• Transform Translate по оси X (рабочий стол): -242px
• Преобразовать преобразовать ось X (телефон): -190 пикселей

Обновить стили текстового модуля во второй строке

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

Измените содержание заголовка h2 на «Сервис».

• Размер текста заголовка 2: 28 пикселей (рабочий стол), 22 пикселя (планшет), 18 пикселей (телефон)

Сохранить настройки.

Теперь откройте модальное окно настроек для текстового модуля в столбце 2 и обновите следующее:

• Ориентация текста: вправо

Регулировка интервала макета

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

• Пользовательское поле: -100 пикселей внизу

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

Теперь посмотрим на окончательный результат.

Пробуем другие значки

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

Во всплывающем окне «Найти и заменить» обновите следующее:

• Внутри: Этот раздел
• Заменить на: [выберите новый значок]

После этого нажмите кнопку замены.

Это заменит все объявления в вашем разделе на новые.

Вот несколько примеров макета с использованием различных значков.

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

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

Я с нетерпением жду вашего ответа в комментариях.

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