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

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

Давайте перейдем к этому.

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Пример # 3

Рабочий стол

Мобильный

Загрузите БЕСПЛАТНО примеры фона значков Blurb

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

Скачать файлы

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

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

СКАЧАТЬ

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

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

Общие шаги

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

Фон

Чтобы воссоздать эти креативные фоновые рисунки аннотации, откройте новую страницу или добавьте новый раздел к существующей странице. Перед добавлением строки добавьте цвет фона в свой раздел.

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

Интервал

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

• Отступ сверху и снизу: 120 пикселей

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

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

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

Размеры

Перед добавлением каких-либо модулей отрегулируйте размер ряда.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхняя обивка: 8vw
• Нижняя обивка: 15vw
• Левая и правая прокладка: 12vw

Столбец 1

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

Фон

Сначала добавьте белый фон.

• Цвет фона: белый #ffffff

Граница

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

• Закругленные углы: 2vw все четыре угла

Коробка Тень

Наконец, добавьте тень блока.

• Коробка-тень: первый вариант
• Сила размытия коробки-тени: 47 пикселей

Клонировать строку дважды

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

Воссоздать пример №1

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

Удалить содержимое по умолчанию

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

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

Затем выберите значок вместо изображения.

• Значок: Ссылка

Фон

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

• Цвет фона: черный # 000000

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

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

• Цвет значка: желтый # edf000
• Расположение значков: вверху
• Размер шрифта значка:
  • Рабочий стол: 3vw
  • Таблетка: 11vw
  • Телефон: 13vw

Размеры

Продолжайте регулировать размер модуля.

• Ширина содержимого: 100%
• Ширина:
  • Рабочий стол: 11vw
  • Таблетка: 19vw
  • Телефон: 22vw

Интервал

Также добавьте некоторые значения интервалов.

• Верхняя маржа: -5vw
• Нижняя маржа: 0vw
• Левое поле: -1vw
• Верхняя и нижняя обивка: 4vw

Граница

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

• Закругленные углы: 50vw, 0vw в нижнем левом углу.

Коробка Тень

Наконец, добавьте тень блока.

• Коробка-тень: первый вариант
• Сила размытия коробки-тени: 50 пикселей

Пользовательские CSS

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

• Blurb Image: margin-bottom: 0px;

margin-bottom: 0px;

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

Добавить контент H3

Под значком добавьте текстовый модуль с любым содержимым H3 по вашему выбору.

Фон

Зайдите в настройки фона и добавьте градиентный фон.

• Фон: Градиент
• Цвет первый: прозрачный
• Цвет второй: желтый # edf000
• Направление градиента: 180 градусов
• Начальная и конечная позиция: 74%

Текст заголовка

Затем стилизуйте текст H3.

• Текст заголовка Уровень заголовка: H3
• Шрифт H3: Josefin Sans
• Выравнивание H3: по центру
• Цвет шрифта H3: Черный #oooooo
• Размер текста H3:
  • Рабочий стол: 2.4vw
  • Таблетка: 3.4vw
  • Телефон: 4.8vw
• Расстояние между буквами H3: 0em

Размеры

В настройках размера отрегулируйте ширину для планшета и телефона.

• Ширина:
  • Таблетка: 50%
  • Телефон: 60%

Интервал

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

• Левое и правое поле: 5vw
• Верхняя обивка: 1vw

Преобразовать

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

• Преобразовать Перевести:
  • ось x: -20vw
  • ось Y: 13vw
• Поворот трансформации: первый вариант, 280 градусов

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

Удалить содержимое заголовка по умолчанию, кнопку добавления и текстовое содержимое

Следующий и последний модуль, который нам нужен в столбце 1, - это модуль призыва к действию. Добавьте контент по вашему выбору и удалите копию заголовка.

Добавить ссылку

Добавьте соответствующую ссылку на кнопку.

Фон

Убедитесь, что фон не имеет цвета.

Основной текст

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

• Шрифт основного текста: малиновый текст
• Выравнивание основного текста: по левому краю
• Цвет основного текста: темно-серый # 666666
• Размер основного текста:
  • Рабочий стол: 1.2vw
  • Таблетка: 2.6vw
  • Телефон: 3.1vw
• Высота линии корпуса: 1,8 м

Кнопка

Измените также стили кнопок.

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Цвет текста кнопки: Очень темно-серый # 3f3f3f
• Цвет границы кнопки: очень темно-серый # 3f3f3f
• Шрифт кнопки: Josefin Sans
• Маржа кнопки: 3vw
• Обивка кнопок сверху и снизу: 1vw
• Отступ кнопок слева и справа: 3vw

Интервал

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

• Левый и правый отступ: 7vw

Удалить столбец два и клонировать столбец 1

Настройте параметры в столбце 2

Теперь вернитесь к настройкам строки и удалите второй столбец. Сразу после этого клонируйте первый столбец. На следующих шагах мы изменим несколько параметров в дублирующем столбце.

Модуль Blurb

Начните с изменения цвета значка модуля рекламного сообщения.

• Цвет значка: Aqua # 00ffd4

Текстовый модуль

Измените фон градиента и затем скопируйте текстовый модуль.

• Цвет фона: Aqua # 00ffd4
• Изменить содержимое

Воссоздать пример №2

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

Удалить содержимое по умолчанию

Переходим ко второму примеру! Добавьте модуль рекламного сообщения в столбец 1 и удалите все содержимое по умолчанию.

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

Затем выберите значок.

Фон

Теперь добавьте желтый цвет фона.

• Цвет фона: желтый # edf000

Значок

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

• Цвет значка: белый #ffffff
• Расположение значков: вверху
• Размер шрифта значка:
  • Рабочий стол: 3vw
  • Таблетка: 11vw
  • Телефон: 12vw

Размеры

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

• Ширина содержимого: 100%

Интервал

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

• Нижняя маржа: 0vw
• Левое и правое поле: 3vw
• Верхняя и нижняя обивка: 2vw

Граница

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

• Закругленные углы: 2vw все четыре угла

Коробка Тень

Завершите дизайн модуля, добавив тонкую тень блока.

• Коробка-тень: первый вариант

Удалить тень блока и цвет фона столбца 1

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

Пользовательские CSS

Удалите нижнее поле по умолчанию, применяемое к значку рекламного объявления, добавив одну строку кода CSS на вкладку «Дополнительно».

• Blurb Image: margin-bottom: 0px;

margin-bottom: 0px;

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

Добавление содержимого заголовка, содержимого тела и содержимого кнопки

Под модулем рекламного объявления добавьте модуль призыва к действию и вставьте контент по вашему выбору.

Добавить ссылку

Добавьте ссылку на кнопку «Далее».

Фон

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

• Цвет фона: белый #ffffff

Текст заголовка

На вкладке «Дизайн» задайте стиль для текста заголовка H3.

• Заголовок уровня заголовка: H3
• Шрифт H3: Josefin Sans
• Цвет шрифта H3: очень темно-серый # 3f3f3f
• Размер H3:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 6vw
• Высота линии H3: 2.3em

Основной текст

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

• Шрифт основного текста: малиновый текст
• Выравнивание основного текста: по левому краю
• Цвет основного текста: темно-серый # 666666
• Размер основного текста:
  • Рабочий стол: 1.1vw
  • Таблетка: 2.2vw
  • Телефон: 3.1vw
• Высота линии корпуса: 1,8 м

Кнопка

Перейдите к настройкам кнопки и задайте для кнопки следующий стиль:

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Цвет текста кнопки: очень темно-серый # 3f3f3f
• Шрифт кнопки: Josefin Sans
• Ширина границы кнопки: 2-x
• Цвет границы кнопки: очень темно-серый # 3f3f3f
• Кнопка сверху и снизу Маржа: 3vw
• Обивка кнопок сверху и снизу: 1vw
• Отступ кнопок слева и справа: 3vw

Интервал

Теперь отрегулируйте интервал.

• Нижняя маржа: -1vw
• Верхняя обивка: 6vw
• Левый и правый отступ: 7vw

Граница

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

• Закругленные углы: 2vw

Коробка Тень

Наконец, добавьте тень блока.

• Коробка-тень: первый вариант
• Сила размытия коробки-тени: 50 пикселей

Удалить столбец два и клонировать столбец 1

Настройте параметры в столбце 2

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

Модуль Blurb

Измените фон модуля рекламного сообщения с желтого на голубой.

• Цвет значка фона: Aqua # 00ffd4

Модуль призыва к действию

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

• Изменить содержание заголовка
• Изменить ссылку

Воссоздать пример №3

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

Удалить содержимое по умолчанию

Переходим к следующему и последнему примеру! Добавьте модуль рекламного сообщения в столбец 1 и удалите содержимое по умолчанию.

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

Выберите иконку.

Фон

Добавьте к модулю ярко-желтый фон.

• Цвет фона: желтый # f7f426

Значок

Сделайте значок черным и отрегулируйте его размещение

• Цвет значка: Черный # 000000
• Расположение значков: слева
• Размер шрифта значка:
  • Рабочий стол: 3vw
  • Планшет + телефон: 8vw

Размеры

Продолжите, изменив ширину и высоту модуля.

• Ширина содержимого: 100%
• Высота: 23vw

Интервал

Кроме того, отрегулируйте настройки интервала.

• Левое поле: 3vw
• Правое поле: 25vw
• Верхняя обивка: 2vw
• Левый отступ: 1vw

Граница

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

• Закругленные углы: 2vw по всем углам

Коробка Тень

Затем добавьте тень блока.

• Коробка-тень: первый вариант

Преобразовать

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

• ось x: -6vw
• ось Y: 1vw

Удалить цвет фона и тень блока из столбца 1

Перейдите к настройкам столбца 1 и удалите цвет фона и тень блока.

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

Добавить заголовок, текст и содержимое кнопки

Под модулем рекламного объявления добавьте модуль призыва к действию. Добавьте контент по вашему выбору.

Добавить ссылку

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

Фон

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

• Цвет фона: черный #oooooo

Текст заголовка

Затем настройте параметры текста H3.

• Заголовок уровня заголовка: H3
• Шрифт H3: Josefin Sans
• Цвет шрифта H3: ярко-желтый # f7f426
• Размер шрифта H3:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 6vw
• Высота линии H3: 2.3em

Основной текст

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

• Шрифт основного текста: малиновый текст
• Выравнивание основного текста: по левому краю
• Цвет основного текста: белый # 000000
• Размер основного текста:
  • Рабочий стол: 1.2vw
  • Таблетка: 2.2vw
  • Телефон: 3.1vw
• Высота линии корпуса: 1,8 м

Кнопка

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

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Цвет текста кнопки: Aqua # 00ffd4
• Цвет границы кнопки: Aqua # 00ffd4
• Шрифт кнопки: Josefin Sans
• Верхняя и нижняя поля кнопок: 3vw
• Обивка кнопок сверху и снизу: 1vw
• Отступ кнопок слева и справа: 3vw

Размеры

Перейдите к настройкам размеров и внесите некоторые изменения.

• Ширина: 90%
• Выравнивание модуля: по центру

Интервал

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

• Верхняя маржа: -9vw
• Верхняя обивка: 5vw
• Левый и правый отступ: 7vw

Граница

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

• Закругленные углы: 2vw

Коробка Тень

Мы также используем тонкую тень коробки.

• Тень коробки: первый вариант

Преобразовать Перевести

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

• ось Y: -18vw

Удалить столбец два и клонировать столбец 1

Настройте параметры в столбце 2

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

Модуль Blurb

В настройках модуля рекламного сообщения измените фон с желтого на бирюзовый.

• Цвет значка фона: Aqua # 00ffd4

Модуль призыва к действию

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

• Цвет текста заголовка: Aqua # 00ffd4
• Содержание
• Цвет кнопки: # 00ffd4

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

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Пример # 3

Рабочий стол

Мобильный

Заключение

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