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

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

Получите эксклюзивную целевую страницу продажи программного обеспечения в Черную пятницу

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

Заявите о сделке, пока она не исчезла!

Использование Как создавать динамические таблицы цен с Divi

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

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

В этом сообщении о сценарии использования мы покажем вам, как создавать динамические таблицы цен с помощью Divi и бесплатного плагина Advanced Custom Fields. Создание динамических таблиц цен отлично, если у вас есть клиент, который часто меняет цены на подписку, и вы хотите разрешить им изменять их самостоятельно, не обращаясь к Divi. Это поможет вам убедиться, что они ничего не испортят на самой странице, при этом у вас будет возможность изменять цену, описание и уровень членства для определенного пакета.

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

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

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

Установите плагин Advanced Custom Fields

Первое, что вам нужно сделать, это установить плагин Advanced Custom Fields на свой веб-сайт WordPress, выбрав Плагины> Добавить новый> Поиск плагина и его установка .

Создать новую группу полей

После того, как вы активировали плагин, вы можете приступить к работе. Добавьте новую группу полей.

Имя + Местоположение

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

Добавить поле уровня участия

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

• Ярлык поля: уровень членства 1
• Имя поля: members_level_1
• Тип поля: Выбрать
• Варианты: добавление контента по выбору

Добавить поле описания членства

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

• Ярлык поля: Описание членства 1
• Имя поля: members_description_1
• Тип поля: текст

Добавить поле цены

Последнее поле, которое вам понадобится, - это поле цены.

• Метка поля: Цена 1
• Название поля: price_1
• Тип поля: текст

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

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

Изменить количество всех полей в группе

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

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

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

Добавить динамический контент на страницу

Вернитесь на бэкэнд этой страницы и добавьте динамический контент в каждую из таблиц цен.

Добавить новую строку под таблицей цен на странице

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

Продолжите, включив Visual Builder и добавив новую строку прямо здесь:

Размеры

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

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

Интервал

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

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

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

Подключить поле заголовка к динамическому контенту уровня членства 1

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

Подключить поле содержимого к описанию членства 1 Динамическое содержимое

Аналогичным образом подключите поле содержимого к описанию членства 1.

Фоновый цвет

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

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

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

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

• Фоновое изображение: software-sale-13.png

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

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

• Ориентация текста: влево

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

Чтобы соответствовать стилю дизайна целевой страницы, внесите некоторые изменения в настройки текста заголовка.

• Шрифт заголовка: Rubik
• Толщина шрифта заголовка: легкий
• Цвет текста заголовка: # 4258ff
• Размер текста заголовка: 40 пикселей
• Высота строки заголовка: 1,3 мкм

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

То же самое и с настройками основного текста.

• Шрифт: Рубик
• Плотность шрифта: средний
• Цвет основного текста: rgba (0,0,0,0.34)
• Размер основного текста: 15 пикселей
• Высота линии корпуса: 1,8 м

Интервал

Затем добавьте верхнюю обивку.

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

Граница

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

Коробка Тень

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

• Положение прямоугольной тени по вертикали: 50 пикселей
• Сила размытия тени коробки: 100 пикселей
• Цвет тени: rgba (66,88,255,0.2)

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

Подключите Content Box к динамическому контенту Price 1

Идите вперед и добавьте текстовый модуль прямо под модулем призыва к действию в столбце 1. Свяжите поле содержимого этого модуля с динамическим содержимым Price 1.

Фоновый цвет

Продолжите, изменив цвет фона этого модуля.

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

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

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

• Шрифт текста: Рубик
• Толщина шрифта текста: легкий
• Цвет текста: # 4258ff
• Размер текста: 70 пикселей
• Высота текстовой строки: 1em

Интервал

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

• Нижний отступ: 60 пикселей
• Отступ слева: 40 пикселей

Граница

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

Коробка Тень

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

• Положение прямоугольной тени по вертикали: 80 пикселей
• Сила размытия тени коробки: 100 пикселей
• Цвет тени: rgba (66,88,255,0.2)

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

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

Изменить интервал

Откройте настройки модуля кнопок и добавьте настраиваемое поле.

• Верхнее поле: 30 пикселей
• Нижняя граница: 50 пикселей

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

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

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

Модуль CTA

Подключить поле заголовка к динамическому контенту уровня членства 2

Нам нужно будет изменить дубликаты, начиная с модуля CTA во втором столбце. Подключите поле заголовка к динамическому контенту уровня членства 2.

Подключить поле содержимого к описанию членства 2 Динамическое содержимое

Сделайте то же самое с полем содержимого.

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

Затем добавьте градиентный фон к модулю.

• Цвет 1: # 6959ff
• Цвет 2: # c1bfff
• Направление градиента: 15 градусов
• Стартовая позиция: 22%
• Конечное положение: 95%

Изменить цвет текста заголовка

Также измените цвет текста заголовка.

• Цвет текста заголовка: #ffffff

Изменить цвет основного текста

То же самое и с цветом основного текста.

• Цвет основного текста: #ffffff

Изменить интервал

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

• Верхнее поле: -50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 100 пикселей

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

Подключите Content Box к динамическому контенту Price 2

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

Изменить цвет фона

Затем измените цвет фона этого модуля.

• Цвет фона: # 6959ff

Изменить цвет текста

И измените цвет текста на белый.

• Цвет текста: #ffffff

Изменить интервал

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

• Нижний отступ: 120 пикселей
• Отступ слева: 40 пикселей

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

Модуль CTA

Подключить поле заголовка к динамическому контенту уровня членства 3

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

Подключить поле содержимого к описанию членства 3 Динамическое содержимое

То же самое и с окном содержимого.

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

Затем добавьте к модулю градиентный фон.

• Цвет 1: # c87cff
• Цвет 2: # ffbcf8
• Направление градиента: 18 градусов
• Стартовая позиция: 22%
• Конечное положение: 95%

Изменить цвет текста заголовка

Измените цвет текста заголовка на белый.

• Цвет текста заголовка: #ffffff

Изменить цвет основного текста

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

• Цвет основного текста: #ffffff

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

Подключите Content Box к динамическому контенту Price 3

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

Изменить цвет фона

Затем добавьте другой цвет фона.

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

Изменить цвет текста

И последнее, но не менее важное: измените цвет текста на белый, и все готово! Теперь у вас на странице три полностью динамических таблицы цен!

• Цвет текста: #ffffff

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

Этот вариант использования является частью нашего предложения «Черная пятница», в рамках которого мы делимся 6 БЕСПЛАТНЫМИ целевыми страницами ограниченного выпуска с клиентами и пожизненными участниками «Черной пятницы». Присоединяясь к нашему уполномоченному сообществу в эти дни и став его участником, вы получите:

• СКИДКА 25% НА ВСЕ
• Все 6 целевых страниц бесплатно
• Доступ к нашим потрясающим темам и плагинам
• Бонусные призы

Воспользуйтесь возможностью и станьте участником уже сегодня!