5 дизайнов модулей Creative Divi Blurb

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

Давай повеселимся!

Sneak Peek

Вот краткий обзор 5 стилей модуля аннотации, которые я создам в этом уроке.

5 дизайнов модулей Creative Divi Blurb

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

Начиная

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

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

1. Всплывающие надписи со списками функций

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

Для начала создайте новый раздел и строку со структурой из четырех столбцов.

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

Цвет фона: # 2e3858
Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Выровнять высоту столбца: ДА
Пользовательская маржа: 5vw сверху, 5vw снизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

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

Выньте последнее предложение в поле содержимого, чтобы немного сократить объем текста. Затем выберите использование значка вместо изображения и выберите значок (подойдет любой).

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

Цвет фона: # df4570
Цвет значка: #ffffff
Ориентация текста: по центру
Шрифт заголовка: Encode Sans Semi Condensed
Стиль шрифта заголовка: TT
Интервал между заглавными буквами: 2 пикселя
Пользовательское поле (для ПК): -5vw сверху, -5vw снизу
Пользовательское поле (планшет): 0 пикселей сверху, 0 пикселей снизу
Пользовательское заполнение: 5vw сверху, 5vw снизу, 3vw слева, 3vw справа
Box Shadow: см. Снимок экрана
Размытие тени коробки Сила: 80 пикселей

Используя контекстное меню или сочетания клавиш cmd + c и cmd + v, скопируйте только что созданный модуль и вставьте его в столбец 3. Затем обновите настройки нового модуля рекламного сообщения другим ярким (но дополнительным) цветом фона:

Цвет фона: # 24c4a3

Пришло время добавить размытия элементов списка рядом с только что созданными всплывающими размытыми фрагментами.

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

Цвет значка: # df4570
Расположение изображения / значка: слева
Шрифт заголовка: Encode Sans Semi Condensed
Пользовательские отступы: 20 пикселей сверху, 20 пикселей снизу, 3vw слева, 3vw справа

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

Вы также можете использовать множественный выбор, чтобы выбрать все три размытия в столбце 4, и массово отредактировать настройки элемента, чтобы изменить цвет значков всех трех на # 24c4a3.

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

Вот окончательный результат.

2. Рекламное объявление с настраиваемым фоновым изображением.

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

Сначала добавьте обычный раздел со структурой строк из двух столбцов. В левом столбце добавьте новый модуль аннотации.

Обновите текст заголовка и удалите последнее предложение имитационного содержания, чтобы сократить объем текста. Затем обновите свое изображение изображением книги (или изображением вашего продукта). Также подойдет значок книги или чего-то еще.

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

СОВЕТ: Вы также можете добавить URL-адрес ссылки на модуль в этот модуль, чтобы сделать весь модуль интерактивным, поскольку он может служить в качестве продвижения.

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

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

Цвет фона градиента слева: rgba (255,255,255,0,8)
Цвет фона градиента справа: rgba (255,255,255,0)
Направление градиента: 90 градусов
Стартовая позиция: 40%
Конечная позиция: 70%
Поместите градиент над фоновым изображением: ДА

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

Image Box Shadow: см. Снимок экрана
Шрифт заголовка: Noto Serif
Размер текста заголовка: 26 пикселей
Шрифт: Noto Sans
Размер основного текста: 16 пикселей
Ширина изображения: 150 пикселей
Ширина содержимого (рабочий стол): 60%
Ширина содержимого: (смартфон): 80%
Пользовательские отступы: 2vw снизу, 2vw слева, 2vw справа

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

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Положение прямоугольной тени по вертикали: 50 пикселей
Цвет тени: #ffffff

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

margin-left: 0;

А теперь посмотрите на результат!

СОВЕТ: Не забывайте о доступных параметрах наведения. Попробуйте придать изображению книги рамку при наведении курсора, чтобы вещи ожили!

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

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

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

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

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

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

Цвет фонового градиента слева: # fa7f28
Цвет фона градиента справа: rgba (255,255,255,0)
Тип градиента: радиальный
Стартовая позиция: 60%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА

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

Ориентация текста: по центру
Шрифт заголовка: Oswald
Стиль шрифта заголовка: TT
Интервал между заглавными буквами: 1 пиксель
Шрифт тела: Робот
Толщина основного шрифта: Light
Размер основного текста: 16 пикселей
Ширина (планшет): 80%
Выравнивание модуля: по центру
Пользовательское заполнение (рабочий стол): 20% сверху, 25% снизу, 20% слева, 20% справа
Пользовательское заполнение (смартфон): 20% сверху, 25% снизу, 10% слева, 10% справа

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

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

Затем обновите настройки строки, чтобы у нее была настраиваемая ширина 80% и ширина желоба 1.

Чтобы завершить дизайн, вы можете добавить фоновое изображение и градиент в свой раздел следующим образом:

Добавить фоновое изображение
Цвет фона градиента слева: rgba (2,0,76,0,51)
Цвет фона градиента справа: rgba (2,0,76,0,84)
Поместите градиент над фоновым изображением: ДА

Вот и все! Ознакомьтесь с окончательным дизайном!

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

Дополнительный совет: превращение всего модуля Blurb в круг с помощью настраиваемого CSS

Если вы хотели превратить весь модуль в круг (вместо использования фонового градиента), замените градиент обычным цветом фона и добавьте этот настраиваемый CSS на вкладке Advanced в настройках модуля blurb:

В поле "Главный элемент":

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

В поле Blurb Content:

margin: auto;

Этот настраиваемый CSS переопределяет отступы, установленные в настройках модуля рекламного сообщения, поэтому вам может потребоваться удалить этот фрагмент, если вы хотите вернуть контроль над этими настройками. Кроме того, этот CSS использует гибкость для центрирования содержимого рекламного объявления внутри круга. Это пригодится.

Если применить ко всем трем модулям, это будет выглядеть примерно так.

4. Вставка в рамке с границами и тенями.

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

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

Добавьте изображение к аннотации. Затем придайте рекламному изображению рамку и тень блока, обновив настройки дизайна следующим образом:

Ширина верхней границы изображения: 8 пикселей
Цвет верхней границы изображения: # 2f3854
Ширина левой границы изображения: 8 пикселей
Цвет левой границы изображения: # 2f3854

Image Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -20 пикселей
Вертикальное положение тени блока: -30 пикселей
Цвет тени: # f89da9

Затем обновите шрифт заголовка и основного текста, а также интервал следующим образом:

Шрифт заголовка: Yeseva One
Шрифт: Montserrat
Пользовательское поле: 50 пикселей снизу
Пользовательские отступы: 2vw снизу

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

Ширина правой границы: 15 пикселей
Цвет правой границы: # 2f3854
Ширина нижней границы: 15 пикселей
Цвет нижней границы: # 2f3854

Image Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 20 пикселей
Положение прямоугольной тени по вертикали: 35 пикселей
Цвет тени: #dddddd

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

Вот окончательный результат.

5. Стилизация размытых изображений в виде изогнутого списка.

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

Во-первых, добавьте новый обычный раздел со структурой из двух столбцов и строк.

Прежде чем добавлять какие-либо модули рекламных объявлений, задайте для вашей строки произвольную ширину и ширину желоба, обновив настройки строки следующим образом:

Настраиваемая ширина: 700 пикселей
Ширина желоба: 2

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

Цвет значка: # 96a6bd
Размер шрифта значка (рабочий стол): 400 пикселей
Размер шрифта значка (смартфон): 200 пикселей

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

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

Цвет фона: # bb7860
Цвет значка: #ffffff
Расположение изображения / значка: слева
Использовать размер шрифта значка: ДА
Размер шрифта значка: 30 пикселей
Шрифт заголовка: Raleway
Цвет текста заголовка: #ffffff
Размер текста заголовка: 20 пикселей
Высота строки заголовка: 1,5 м
Специальная маржа: минимум 5%
Пользовательское заполнение: 3% сверху, 10% слева, 2% справа

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

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

Цвет фона: # 393e56
Пользовательское поле (на рабочем столе): 10% слева, -10% справа
Пользовательское поле (планшет): 0% слева, 0% справа
Закругленные углы: 50 пикселей вверху справа, 50 пикселей внизу слева.

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

Затем сохраните настройки рекламного сообщения и щелкните правой кнопкой мыши первый (верхний) модуль, который вы создали, и вставьте закругленные углы в стиль модуля.

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

Для третьей аннотации в столбце обновите следующее:

Цвет фона: # 96a6bd
Пользовательское поле (на рабочем столе): 20% слева, -20% справа
Пользовательское поле (планшет): 0% слева, 0% справа
Закругленные углы: 50 пикселей вверху справа, 50 пикселей внизу справа.

Для четвертого анонса обновите следующее:

Цвет фона: # 393e56
Пользовательское поле (на рабочем столе): 10% слева, -10% справа
Пользовательское поле (планшет): 0% слева, 0% справа
Закругленные углы: 50 пикселей вверху слева, 50 пикселей внизу справа.

Для пятой рекламы просто скопируйте закругленные углы в четвертой аннотации и вставьте их.

Вот и все! Давайте посмотрим на окончательный дизайн.

Больше вдохновения в стиле Blurb

Если вас интересует более интересный дизайн модулей рекламных объявлений, воспользуйтесь ссылками ниже:

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

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

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

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