Как создать временную шкалу с модулем Blurb Divi

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

Результат

Внешний вид временной шкалы достигается с помощью двух элементов дизайна; линия, пересекающая все три модуля Blurb и числа. Настольная версия выглядит так:

А мобильная версия выглядит так:

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

Как создать временную шкалу с модулем Blurb Divi

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

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

Цвет фона раздела

Начните с добавления нового стандартного раздела и использования rgba (0,0,0,0.12) в качестве цвета фона.

Заполнение раздела

Перейдите на вкладку «Дизайн» и используйте верхний отступ 300 пикселей.

Добавить трехколоночную строку (временная шкала)

Фоны столбцов

Создав раздел, добавьте к нему строку из трех столбцов. На вкладке «Содержимое» этой строки используйте «# e09900» в качестве цвета фона столбца 1, «# 0c71c3» в качестве цвета фона столбца 2 и «# 8300e9» в качестве цвета фона столбца 3.

Размеры

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

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

Пользовательские поля и отступы

Затем добавьте в строку следующие поля Custom Padding и Custom Margin:

• Верхний отступ: 1 пиксель
• Нижний отступ: 0 пикселей
• Нижнее поле: -200 пикселей

И добавьте 3px к верхнему и нижнему отступу каждого столбца.

Отключить на планшете и телефоне

Наконец, отключите строку на планшете и телефоне.

Добавить еще одну строку из трех столбцов (модули Blurb)

Столбец градиентный фон

После того, как вы создали первую строку из трех столбцов, вы можете продолжить и создать вторую строку прямо под ней (они имеют один и тот же раздел). Каждому из столбцов нужен градиентный фон с одинаковыми настройками, но с другим первым цветом:

• Первый цвет: # e09900 (столбец 1), # 0c71c3 (столбец 2), # 8300e9 (столбец 3)
• Второй цвет: rgba (255, 255, 255, 0)
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 73%
• Конечная позиция: 92%

Сделать строку полной шириной

Затем перейдите на вкладку «Дизайн» и включите параметр «Сделать эту строку полной шириной».

Пользовательское заполнение строк

Откройте подкатегорию интервалов и используйте для строки следующие поля Custom Padding и Custom Margin:

• Верхний отступ: 0 пикселей
• Отступ справа: 60 ​​пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 60 ​​пикселей
• Верхнее поле: -100 пикселей

Также добавьте 5 пикселей к верхнему отступу каждого столбца.

Модуль Blurb

Завершив настройку строки, вы можете добавить модуль Blurb в первый столбец только что созданной строки. В подкатегории «Изображение и значок» на вкладке содержимого включите параметр «Использовать значок» и выберите нужный значок.

Прокрутите ту же вкладку вниз и используйте "# f4f4f4" в качестве цвета фона.

Перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Изображение и значок»:

• Цвет значка: # e09900
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 50 пикселей

Убедитесь, что в подкатегории «Текст» включена левая ориентация текста.

Параметры для подкатегории «Текст заголовка» следующие:

• Шрифт заголовка: Crete Round
• Выравнивание текста заголовка: по левому краю
• Размер шрифта заголовка: 32 пикселя
• Высота строки заголовка: 1em

Затем откройте подкатегорию Body Text и используйте следующие настройки:

• Выравнивание основного текста: по левому краю
• Размер шрифта основного текста: 12 пикселей
• Высота линии корпуса: 1,7 эм

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

• Использовать границу: Да
• Цвет границы: # 000000
• Ширина границы: 2 пикселя
• Стиль границы: пунктирная

Затем откройте подкатегорию «Размер» и используйте «279 пикселей» для ширины содержимого и «100%» для ширины.

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

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

После того, как вы добавили и изменили модуль Blurb, добавьте текстовый модуль прямо под ним. Для текстового модуля также потребуется градиентный фон:

• Первый цвет: # e09900
• Второй цвет: rgba (255, 255, 255, 0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 20%
• Конечная позиция: 24%

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

• Размер шрифта текста: 21 пикс.
• Цвет текста: #FFFFFF
• Высота текстовой строки: 1,7 мкм
• Ориентация текста: по центру

Откройте подкатегорию «Размер», используйте ширину «48%» и выберите правильное выравнивание модуля.

Наконец, используйте верхнее поле «-100 пикселей» и добавьте «50 пикселей» к верхнему и нижнему отступу.

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

После заполнения первого столбца вы можете клонировать оба модуля и разместить их в двух других столбцах. Единственное, что вам нужно будет изменить, это значок рекламного объявления, цвет рекламного сообщения и первый цвет градиента текстового модуля на «# 0c71c3» для второго столбца и «# 8300e9» для последнего столбца.

Отключить на планшете и телефоне

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

Клонировать трехколоночную строку (планшет и телефон)

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

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

Для ряда на планшете и телефоне потребуется следующий градиентный фон:

• Первый цвет: rgba (0,0,0,0.7)
• Второй цвет: rgba (255, 255, 255, 0)
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 1%
• Конечная позиция: 0%

Заполнение строк

Удалите все пользовательские отступы и поля, которые использовались в настольной версии, и добавьте «100 пикселей» к верхнему отступу.

Отключить на рабочем столе

Наконец, вместо отключения строки на телефоне и планшете отключите ее на рабочем столе.

Результат

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

И такой результат на планшете и телефоне:

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!