Как создать горизонтальные таблицы цен с Divi

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

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

Sneak Peek

Начиная

Для этого урока вам понадобится только Divi. И мы будем использовать Visual Builder. Поскольку мы будем создавать таблицы с нуля, вам нужно будет создать новую страницу, развернуть визуальный конструктор и затем выбрать опцию «Создать макет с нуля».

После этого все готово. Давай сделаем это!

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

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

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

Ширина: 1200 пикселей
Выравнивание сечения: по центру
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

Цвет фона: # 00cbc9
Цвет фона столбца 2: # 00cbc9
Цвет фона столбца 3: #eeeeee
Цвет фона столбца 4: #eeeeee

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

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

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

Заполнение столбцов модулями контента

Название продукта

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

<h2>Starter</h2>

Это будет место для названия вашего плана или продукта, который вы представляете. В этом примере это будет своего рода «стартовый» план.

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

Стиль шрифта заголовка 2: TT
Цвет текста заголовка 2: #ffffff
Размер текста заголовка 2: 38 пикселей
Пользовательское заполнение (рабочий стол): 90% сверху, 90% снизу, 10% слева
Индивидуальная набивка (планшет): 30% сверху, 30% снизу

Добавить размытие для заголовков категорий функций

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

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

Цвет значка: # 00cbc9
Расположение изображения / значка: слева
Размер текста заголовка: 16 пикселей
Пользовательские отступы: 2vw снизу
Ширина границы нижнего ряда: 4 пикселя
Цвет нижней границы: #cccccc

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

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

Добавление текстовых модулей для списка описаний функций

Затем добавьте текстовый модуль под рекламным объявлением во втором столбце. Затем добавьте следующий HTML-код таблицы в поле содержимого:

• описание функции находится здесь.
• описание функции находится здесь.
• описание функции находится здесь.
• описание функции находится здесь.

Тип стиля неупорядоченного списка: Квадрат
Отступ неупорядоченного элемента списка: 4 пикселя
Пользовательские отступы: 20 пикселей сверху, 20 пикселей снизу, 5% слева, 5% справа

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

Добавление цены и кнопки в последний столбец

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

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

Затем избавьтесь от цвета фона, добавив полностью прозрачный цветовой код.

Цвет фона: rgba (255,255,255,0)

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

Цвет фона заголовка таблицы: rgba (255,255,255,0)
Валюта и периодичность Цвет текста: #ffffff
Валюта и частота. Размер текста: 30 пикселей.
Цвет текста цены: #ffffff
Ширина границы: 0 пикселей
Специальная маржа (планшет): -100% справа
Специальная маржа (смартфон): 0% справа
Пользовательские отступы: 0 пикселей сверху, 10 пикселей снизу, 0 пикселей слева, 0 пикселей справа

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

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

Теперь я знаю, о чем вы сейчас думаете. Что делать с этой линией границы под текстом цены? Что ж, для этого есть небольшой фрагмент пользовательского CSS. Перейдите на вкладку Advanced и добавьте следующий CSS в поле ввода Pricing Top:

Ценовая верхняя часть:

border: none;

Вот как вы успешно составили таблицу цен только для текста с ценами и символа валюты!

Для кнопки добавьте модуль кнопки под модулем таблиц цен и обновите следующее:

Расположение кнопок: по центру
Цвет текста: светлый
Специальная маржа (планшет): -100% справа
Специальная маржа (смартфон): 0% справа

Настраиваемая маржа будет соответствовать марже, которую мы добавили в модуль таблиц цен, чтобы получить модуль полной ширины на планшете. Так как пятиколоночный макет на планшете помещает пятый столбец слева от двухколоночного макета, перетягивание модуля на -100% вправо приведет к тому, что модуль будет на всю ширину строки.

Добавление дизайна стрелки и адаптивного интервала между столбцами

Добавление стрелки путем наложения градиентов

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

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

Градиентный фон столбца 1 Цвет слева: rgba (255,255,255,0)
Градиентный фон столбца 1 Правый цвет: #eeeeee (он должен соответствовать цвету фона столбца 2)
Направление градиента: -245 градусов
Стартовая позиция: 75%
Конечная позиция: 0%

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

Градиентный фон столбца 1 Цвет слева: #eeeeee
Столбец 1 Градиентный фон Правый цвет: rgba (255,255,255,0)
Направление градиента: 245 градусов
Стартовая позиция: 25%
Конечная позиция: 0%

Обратите внимание, что значения одинаково противоположны друг другу. Например, порядок цветов изменился, 245 градусов изменились с отрицательного на положительный, а 75% теперь составляет 25% (разница). Таким образом, стороны стрелки будут идеально симметричными.

Размещение строк и столбцов

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

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу, 0 пикселей слева, 0 пикселей справа
Пользовательский отступ 2: 5% сверху, 5% снизу, 2% слева, 2% справа
Пользовательские отступы 3: 5% сверху, 5% снизу, 2% слева, 2% справа
Пользовательские отступы 4: 5% сверху, 5% снизу, 2% слева, 2% справа
Custom 5 Padding: 10% верх, 10% низ

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

Дублирование таблицы для новых таблиц и цветовых схем

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

Затем откройте настройки строки, наведите указатель мыши на цвет фона и нажмите «Найти и заменить».

В разделе «Внутри» выберите «Этот раздел».
В разделе «Заменить ширину» добавьте цвет: # f84f51.
Затем установите флажок «Заменить все значения, найденные в разделе (а не только цвет фона)».

Затем нажмите «Заменить» и наблюдайте за волшебством. Это быстрый и простой способ заменить все экземпляры предыдущего цвета новым цветом.

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

Теперь у вас есть новая таблица с новой цветовой схемой.

Повторите этот процесс еще раз, чтобы добавить еще одну таблицу с цветом: # bdc958.

Изготовление избранного стола

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

Для этого перейдите в настройки раздела для второго раздела (среднего) и обновите следующее:

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 80 пикселей

Чтобы заменить серый цвет фона, перейдите в настройки строки и найдите цвет фона столбца 2 (#eeeeee). Щелкните его правой кнопкой мыши и выберите «найти и заменить». Обновление следующее:

В разделе «Внутри» выберите «Этот раздел».
В разделе «Заменить ширину» добавьте цвет: #ffffff.
Затем установите флажок «Заменить все значения, найденные в разделе (а не только цвет фона)».
Затем нажмите «Заменить».

Использование поиска и замены для тестирования шрифтов

Если вы хотите использовать другой шрифт во всей таблице, вы можете легко протестировать другие, используя функцию «Найти и заменить». Я намеренно оставил шрифт по умолчанию для всех модулей, чтобы сделать этот процесс более плавным. Чтобы изменить шрифт для всей страницы таблиц, все, что вам нужно сделать, это открыть настройки текстового модуля в первом столбце любого раздела таблицы (на самом деле это может быть любой модуль, использующий шрифт по умолчанию на вашей странице). Затем щелкните правой кнопкой мыши используемый шрифт заголовка 2 и выберите «Найти и заменить». Затем обновите следующее:

Под «Внутри» сохраните «Эту страницу».
В разделе «Заменить ширину» выберите шрифт (я использую Roboto Condensed).
Затем установите флажок «Заменить все значения, найденные в разделе» (или вы не смогли установить его, чтобы заменить все шрифты h2).
Затем нажмите «Заменить».

Теперь все шрифты изменены на всей странице.

Вот и все! Теперь горизонтальные таблицы цен завершены.

Проверим результат.

Пятиколоночная регулировка на планшете и смартфоне тоже прекрасно работает.

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

Пятиколоночная структура Divi вместе с мощными конструктивными функциями, доступными в Visual Builder, позволяют создавать красивые горизонтальные таблицы цен. А настройка цветов и шрифтов с помощью функции «Найти и заменить» - это отличная экономия времени, еще более улучшающая процесс проектирования. Я надеюсь, что вы найдете этот урок информативным и вдохновляющим.

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

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