Особенности плагина Divi - модуль Gravity Divi

Gravity Forms - один из самых популярных плагинов форм для WordPress. Он совместим с Divi с использованием шорткодов, но не в полной мере использует возможности модулей Divi. К счастью, доступен сторонний плагин под названием Gravity Divi Module, который добавляет Gravity Forms в Divi Builder.

Gravity Divi Module - это сторонний плагин от CodeCraters, который полностью интегрирует Gravity Forms, ваши макеты Divi и Extra. Это позволяет вам стилизовать ваши формы с помощью настроек модуля Divi. В этом выделении плагина мы рассмотрим, что он может делать. В качестве примеров я использую шаблоны, предоставленные Gravity Forms, и изображения с Unsplash.com.

Дополнительные сведения о Gravity Forms см. В статьях Elegant Themes:

• Gravity Forms - подробный обзор Personal Edition
• Как стилизовать формы гравитации, чтобы они выглядели как Divi (+ бонусные образы!)

Установка и настройка модуля Gravity Divi

Во-первых, для использования этого плагина необходимо установить Gravity Forms. После установки Gravity Forms загрузите и активируйте плагин Gravity Divi Module. Как только плагин будет активирован, он добавит в Divi Builder новый модуль под названием Gravity Divi. Никакой настройки не требуется.

Параметр «Содержимое» позволяет вам выбрать форму, отобразить заголовок формы, показать описание, включить AJAX, выбрать цвет текста и настроить фон.

Настройки дизайна включают корректировки текста для заголовка формы, описания, элементов и самого текста. Также включены интервалы для полей и отступов, а также стиль кнопок. Эти настройки дают вам больше контроля, чем использование шорткода Gravity Forms в текстовом модуле. Дополнительные настройки включают указатель вкладок, где вы можете указать начальную вкладку для полей формы.

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

Внесение корректировок

Это расширенная контактная форма с использованием стиля по умолчанию. Он соответствует стилю Divi. Внести корректировки очень просто.

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

В этом примере я отключил заголовок формы.

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

Модуль Gravity Divi в примерах макетов Divi

Самым большим преимуществом Gravity Module является Divi Builder с его настройками модуля, что означает, что настройки модуля, к которым вы привыкли, доступны для Gravity Forms. Вот несколько примеров макетов Divi.

Расширенная контактная форма в макете персонального модуля

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

Я поместил строку модуля в тот же раздел, что и модули Person, чтобы фоновое изображение распространялось на модуль Gravity. Форма вписывается в дизайн страницы, а не выглядит так, как будто я только что прикрепил форму внизу страницы.

Макет регистрации

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

Модуль Gravity размещается внутри макета 2/3, 1/3 с текстовым модулем.

Я включил заголовок формы и AJAX, чтобы многостраничная форма не перезагружала страницу, когда пользователь нажимает «Далее». Шрифт заголовка формы установлен на 30%. Он хорошо вписывается в стиль макета. Никаких других изменений не потребовалось.

Приглашение на свадьбу

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

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

Форма заказа пиццы

В этом примере используется шаблон формы «Создать пиццу» из Gravity Forms.

В этом макете используется макет 1/3, 2/3 с модулем Gravity и несколькими модулями изображений. Я добавил фон в раздел и наложение в строке с отступом, чтобы все уместилось в разработанном пространстве.

Я установил текст на Light, изменил шрифты на Arimo и настроил размер шрифта для каждого элемента формы отдельно.

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

Дополнительная тема с расширенной контактной формой в макете персонального модуля

Gravity Module также совместим с Extra. Вот первый пример (расширенная контактная форма в макете персонального модуля) с Extra. Для страницы в Extra я использую шаблон страницы с полной шириной страницы. Выглядит так же, как страница Divi.

Единственное изменение, которое я внес, - это стиль кнопок. Синяя кнопка также не смешалась, а белый текст отлично смотрится на синем фоне.

Лицензия и поддержка

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

Модуль Gravity Divi можно приобрести в магазине разработчика.

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

Модуль Gravity Divi предоставляет отличный способ интегрировать ваши Gravity Forms в ваши макеты Divi. Он добавляет больше возможностей, чем просто использование шорткодов Gravity Forms. Все преимущества Gravity Forms усиливаются за счет Divi Builder и настроек модуля, который включает в себя настройки фона, такие как изображение, наложения и градиенты, настройки шрифта и кнопок, отступы и т. Д.

Если вы заинтересованы в использовании Gravity Forms с Divi Builder, модуль Gravity Divi может быть тем решением, которое вам нужно.

Теперь твоя очередь. Вы использовали Gravity Divi Module? Дайте нам знать, что вы думаете, в комментариях ниже.

Лучшее изображение через Bloomicon / shutterstock.com