Загрузите БЕСПЛАТНЫЙ раздел временной шкалы, созданный с помощью параметров преобразования Divi

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Загрузите макет раздела временной шкалы БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Начнем воссоздавать!

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

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

Интервал

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

• Верхняя обивка: 12vw
• Нижняя обивка: 0vw

Добавить строку №1

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Видимость

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

Добавить модуль изображения

Загрузить иллюстрацию

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

Размеры

Чтобы убедиться, что все по-прежнему реагирует на все размеры экрана, мы собираемся включить опцию «Force Fullwidth» в настройках размера модуля изображения.

• Принудительная полная ширина: Да

Добавить строку №2

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину экрана.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхнее заполнение: 0px (рабочий стол), 15vw (планшет и телефон)
• Нижний отступ: 0px (рабочий стол), 15vw (планшет и телефон)

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

Добавить содержимое

Пора начинать добавлять модули! Добавьте модуль Blurb в столбец 1. Введите контент по вашему выбору.

Выбрать значок

Продолжите, выбрав значок по вашему выбору.

Градиентный фон

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

• Цвет 1: # a5c4ff
• Цвет 2: #ffffff
• Стартовая позиция: 40%
• Конечная позиция: 40%

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

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

• Цвет значка: #ffffff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 5vw (рабочий стол), 17vw (планшет), 18vw (телефон)

Настройки текста заголовка

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

• Шрифт заголовка: Didact Gothic
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 1.1vw (рабочий стол), 2.7vw (планшет), 4vw (телефон)
• Высота строки заголовка: 2,8 м

Настройки основного текста

Сделайте то же самое с настройками основного текста.

• Шрифт основного текста: Open Sans
• Выравнивание основного текста: по центру
• Размер основного текста: 0,7 миллиметра (рабочий стол), 1,5 миллиметра (планшет), 2,1 миллиметра (телефон)
• Высота линии тела: 2em

Интервал

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

• Левое поле: 3vw
• Правое поле: 3vw
• Нижнее поле: 5vw (планшет), 7vw (телефон)
• Верхняя подкладка: 2vw (рабочий стол), 6vw (планшет и телефон)
• Нижняя прокладка: 2vw (рабочий стол), 6vw (планшет и телефон)
• Левое заполнение: 3vw (рабочий стол), 9vw (планшет и телефон)
• Правая прокладка: 3vw (рабочий стол), 9vw (планшет и телефон)

Граница

Перейдите к настройкам границы и добавьте «20 пикселей» к каждому из углов.

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.1)

Клонировать модуль Blurb три раза и размещать дубликаты в оставшихся столбцах

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

Изменить градиентный фон дубликата №1

Откройте первый дубликат (модуль Blurb в столбце 2) и измените первый цвет градиентного фона.

• Цвет 1: # ffa5ae

Изменить градиентный фон дубликата №2

Сделайте то же самое для модуля Blurb из столбца 3.

• Цвет 1: # f7e3a0

Изменить градиентный фон дубликата №3

И также измените градиентный фон последнего модуля Blurb Module.

• Цвет 1: # caa5ff

Добавить настройки преобразования в модули Blurb

Добавить Transform Translate в Blurb Module # 1

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

• Внизу: 2vw (рабочий стол), 0vw (планшет и телефон)
• Справа: -106vw (рабочий стол), 0vw (планшет и телефон)

Добавить Transform Translate в модуль Blurb # 2

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

• Снизу: 16.6vw (снизу), 0vw (планшет и телефон)
• Справа: -78vw (справа), 0vw (планшет и телефон)

Добавить Transform Translate в модуль Blurb # 3

Откройте модуль Blurb в следующем столбце 3 и используйте следующие значения transform translate:

• Внизу: 17vw (рабочий стол), 0vw (планшет и телефон)
• Справа: -46vw (рабочий стол), 0vw (планшет и телефон)

Добавить Transform Translate в Blurb Module # 4

Сделайте то же самое для последнего модуля Blurb Module, используя следующие значения:

• Внизу: -66vw (рабочий стол), 0vw (планшет и телефон)
• Справа: -24vw (рабочий стол), 0vw (планшет и телефон)

Добавить отрицательную нижнюю маржу в строку №2

Использование опции преобразования трансляции не удаляет пространство, которое изначально занято модулями Blurb в строке. Чтобы избавиться от этого пространства, мы можем добавить отрицательное нижнее поле к строке, и все готово!

• Нижнее поле: -15vw (рабочий стол), 0vw (планшет и телефон)

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

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

Рабочий стол

Мобильный

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

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