Как оформить красивую таблицу цен в Divi

Таблицы цен часто являются основным призывом к действию на странице. Вот почему так важно правильно их стилизовать. С Divi вы можете делать много поворотов и создавать таблицы цен в точности так, как вы их себе представляете. Чтобы дать вам пищу для размышлений, мы создали потрясающую таблицу цен, которую вы можете использовать для любого веб-сайта, над которым вы работаете. Мы поможем вам создать результат от А до Я, используя только встроенные параметры Divi.

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

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

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

Рабочий стол

Мобильный

Загрузите изображения БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Как оформить красивую таблицу цен в Divi

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

Начнем творить!

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

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

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

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

Интервал

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

• Нижнее поле: 50 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Левое поле: 50 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Правое поле: 50 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Размеры

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

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

Интервал

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

• Верхний отступ: 94 пикселя
• Нижний отступ: 177 пикселей
• Отступ слева: 150 пикселей (рабочий стол), 30 пикселей (планшет и телефон)
• Отступ справа: 150 пикселей (рабочий стол), 30 пикселей (планшет и телефон)
• Колонки 1, 2 и 3, отступ слева: 10 пикселей
• Столбцы 1, 2 и 3, отступ справа: 10 пикселей

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

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

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

Фоновый цвет

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

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

Фоновая картинка

Перейдите на вкладку фонового изображения и загрузите файл divi-beautiful-pricing-table-background-pattern-1.png , который вы можете найти в папке загрузки, которая была опубликована в начале этого сообщения.

• Размер фонового изображения: обложка
• Расположение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

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

Затем измените параметры текста.

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: #ffffff
• Размер текста: 80 пикселей
• Расстояние между буквами текста: -3 пикселя
• Высота текстовой строки: 1em

Интервал

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

• Верхняя маржа: 5vw (ПК), 0vw (планшет и телефон)
• Верхний отступ: 20 пикселей
• Нижний отступ: 200 пикселей

Граница

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

Коробка Тень

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

• Вертикальное положение тени блока: -20 пикселей
• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (0,0,0,0.15)

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

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

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

Выравнивание кнопок

Затем перейдите к настройкам выравнивания и измените выравнивание по центру.

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #ffffff
• Цвет 1: # 6932ff
• Цвет 2: # 30acf4
• Направление градиента: 100 градусов

• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: -2 пикселя
• Плотность шрифта: Ультра полужирный

Интервал

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

• Верхнее поле: -54 пикселей
• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Коробка Тень

И последнее, но не менее важное: добавьте легкую тень блока.

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

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

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

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

Фоновый цвет

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

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

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

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

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: rgba (0,0,0,0.05)
• Размер текста: 120 пикселей
• Высота текстовой строки: 1em

Интервал

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

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

Граница

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

Коробка Тень

И последнее, но не менее важное: дайте модулю тень блока.

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

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

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

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

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

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

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: # 000000
• Размер текста: 50 пикселей
• Высота текстовой строки: 1em

Интервал

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

• Верхнее поле: -180 пикселей
• Нижнее поле: 180 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей

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

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

Изменить содержимое модулей в столбце

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

Изменить таблицу цен в столбце 2

Изменить фоновое изображение текстового модуля №1

Мы также выделяем среднюю таблицу цен. Откройте первый текстовый модуль в столбце 2 и измените фоновое изображение на файл divi-beautiful-pricing-table-background-pattern-2.png , который вы можете найти в папке загрузки.

Удалить верхнее поле текстового модуля №1

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

Изменить фон градиента кнопки

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

• Цвет 1: # fb32ff
• Цвет 2: # ff304f
• Направление градиента: 100 градусов

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

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

Рабочий стол

Мобильный

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

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