Превращение столбцов в тарифные планы с Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет тарифных планов столбца БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

Интервал

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

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

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки, перейдите на вкладку «Дополнительно» и измените настройки размера соответствующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 80% (компьютер и планшет), 90% (телефон)
• Макс.ширина: 1400 пикселей (рабочий стол), 90% (планшет), 100% (телефон)

Столбец 1 Настройки

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

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

Примените следующий градиентный фон к столбцу 1:

• Цвет 1: # f7f7f7
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 31%
• Конечная позиция: 31%

Граница

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

Коробка Тень

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

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

Масштаб преобразования по умолчанию

Как вы можете заметить в превью этого поста, столбцы немного изменены. Перейдите к настройкам преобразования и убедитесь, что параметр масштабирования преобразования остается «100%» в состоянии по умолчанию.

• Внизу: 100%
• Правильно: 100%

Масштаб преобразования при наведении

Измените значения масштаба преобразования при наведении курсора.

• Внизу: 120%
• Правильно: 120%

Преобразование по умолчанию Перевести

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

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

Hover Transform Перевести

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

• Внизу: 0 пикселей
• Справа: 0 пикселей

Преобразование по умолчанию Поворот

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

• Слева: 352 градуса (рабочий стол), 0 градусов (планшет и телефон)

При наведении курсора Преобразовать Повернуть

Верните значение «0 градусов» при наведении курсора.

• Слева: 0 градусов

Переполнения

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Индекс Z по умолчанию

Затем измените z-индекс столбца для разных размеров экрана. Это поможет нам держать укладку в порядке.

• Индекс Z: 9 (настольный компьютер), 11 (планшет и телефон)

Индекс наведения Z

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

• Индекс Z: 11

Переходы

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

• Продолжительность перехода: 500 мс

Столбец 2 Настройки

Переходим ко второй колонке! Идите вперед и откройте настройки столбца.

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

Примените следующие настройки градиентного фона:

• Цвет 1: # fff200
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 31%
• Конечная позиция: 31%

Граница

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

Коробка Тень

Наряду с тонкой тенью коробки.

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

Масштаб преобразования по умолчанию

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

• Внизу: 112% (компьютер), 100% (планшет и телефон)
• Справа: 112% (компьютер), 100% (планшет и телефон)

Масштаб преобразования при наведении

Измените значения масштаба преобразования при наведении курсора.

• Внизу: 120%
• Правильно: 120%

Переполнения

Затем измените горизонтальные и вертикальные переливы.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Индекс Z по умолчанию

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

• Индекс Z: 10

Индекс наведения Z

Измените индекс z при наведении курсора.

• Индекс Z: 12

Переходы

И увеличьте продолжительность перехода в настройках переходов.

• Продолжительность перехода: 500 мс

Столбец 3 Настройки

Переходим к третьему и последнему столбцу! Откройте настройки столбца.

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

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

• Цвет 1: # f7f7f7
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 31%
• Конечная позиция: 31%

Граница

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

Коробка Тень

Наряду с тонкой тенью коробки.

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

Масштаб преобразования по умолчанию

Пора преобразовать колонну! Убедитесь, что значения масштаба преобразования по умолчанию остаются «100%».

• Внизу: 100%
• Правильно: 100%

Масштаб преобразования при наведении

Измените эти значения при наведении курсора.

• Внизу: 120%
• Правильно: 120%

Преобразование по умолчанию Перевести

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

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

Hover Transform Перевести

Верните значения к «0px» при наведении курсора.

• Внизу: 0 пикселей
• Справа: 0 пикселей

Преобразование по умолчанию Поворот

Продолжите, повернув столбец в состояние по умолчанию.

• Слева: 8 градусов (рабочий стол), 0 градусов (планшет и телефон)

При наведении курсора Преобразовать Повернуть

Измените значение поворота левого преобразования обратно на 0 пикселей при наведении курсора.

• Слева: 0 градусов

Переполнения

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Индекс Z по умолчанию

Затем перейдите к настройкам видимости и убедитесь, что индекс z по умолчанию равен 9.

• Индекс Z: 9

Индекс наведения Z

Измените индекс z при наведении курсора.

• Индекс Z: 11

Переходы

И увеличьте продолжительность перехода в настройках переходов.

• Продолжительность перехода: 500 мс

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

Добавить заголовок

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

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

Далее выберите значок.

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

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

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

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

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

• Шрифт заголовка: Poppins
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 27 пикселей

Интервал

И также добавьте немного верхнего поля.

• Верхнее поле: 80 пикселей

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

Видимость

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

• Показать разделитель: Да

Линия

Перейдите на вкладку дизайна и измените цвет разделителя на черный.

• Цвет линии: # 000000

Размеры

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

• Вес разделителя: 6 пикселей
• Ширина: 14%
• Выравнивание модуля: по центру
• Высота: 0 пикселей

Интервал

Наконец, добавьте верхний край.

• Верхнее поле: 50 пикселей

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

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

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

Настройки текста

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Выравнивание текста: по центру
• Цвет текста: # 4f4f4f
• Высота текстовой строки: 2.3em

Интервал

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

• Верхнее поле: 50 пикселей
• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей

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

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

Прямо под предыдущим текстовым модулем нам понадобится еще один текстовый модуль. Введите контент по вашему выбору.

Настройки текста

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: толстый
• Выравнивание текста: по центру
• Цвет текста: # 000000
• Размер текста: 47 пикселей
• Высота текстовой строки: 1em

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 80 пикселей

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

Добавить копию

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

Выравнивание

Перейдите на вкладку дизайна и измените выравнивание кнопки по центру.

• Расположение кнопок: по центру

Настройки кнопок

Также стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 17 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: -40 пикселей
• Верхний отступ: 23 пикселя
• Нижний отступ: 23 пикселя
• Отступ слева: 70 пикселей
• Отступ справа: 70 пикселей

Коробка Тень

В довершение всего мы добавим кнопочному модулю тонкую тень прямоугольника.

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

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

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

Изменение значков и заголовков рекламных объявлений

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

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

Вместе с содержимым текстового модуля.

Кнопка смены №2

И последнее, но не менее важное: откройте кнопку в столбце 2 и измените настройки кнопки. Как только вы завершите этот шаг, все готово!

• Цвет текста кнопки: #FFFFFF
• Цвет фона кнопки: # 8300E9

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

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

Рабочий стол

Мобильный

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

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

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