Как создать лендинг с помощью Divi Builder

Редактор WordPress отлично подходит для многих вещей, но создание целевых страниц не является одним из тех вещей. Поэтому, если вы хотите построить великолепную высоко конвертирующую целевую страницу в WordPress, вам понадобится другой инструмент. Вот почему я собираюсь показать вам, как создать лендинг с помощью Divi Builder в этом обзоре.

Ниже приводится пошаговое руководство по переходу с чистого холста на конечную целевую страницу с 25 + скриншотами. Все, что вам понадобится, это плагин Divi Builder (или тема Divi), а также ваш выбор темы WordPress.

Готовы ли вы создать лендинг с помощью Divi Builder? Поехали!

Вот что вы будете строить в этом руководстве

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

Пример страницы рассматриваемый в обзоре.

Как создать лендинг с помощью Divi Builder

Вы всегда можете стать более креативными с разными цветами, стилями или другими элементами. Но это просто быстрый и грязный набросок на то, как вы можете создать страницу запуска продукта с Divi Builder менее чем через час. Вот еще пример сайта полностью создан на диви https://kvadro-shop.ru

Почему вы должны создавать лендинг с помощью Divi Builder?

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

Помимо этого, Divi Builder разрабатывается компанией под названием Elegant Themes, которая построила огромное сообщество полезных пользователей Divi. Это означает, что вы можете найти множество аккуратных расширений и стороннюю помощь, если вы когда-нибудь столкнулись с проблемой.

Он также имеет следующие преимущества:

  • Потому что это плагин (плюс есть также и тема), он работает со всеми темами WordPress.
  • Он включает в себя множество «модулей», которые позволяют добавлять полезные блоки контента, такие как списки функций, формы и т.д.
  • Все конструкции, создаваемые Divi Builder, являются отзывчивыми. То есть, они хорошо смотрятся на мобильных телефонах и планшетах.

Хорошо, давайте погрузимся и построим что-нибудь!

Шаг 0: установите Divi Builder и выберите тему

Divi Builder — эксклюзивный плагин, поэтому, если вы еще этого не сделали, вам нужно будет приобрести плагин в Elegant Themes, чтобы продолжить это руководство. Для этого вам необходимо приобрести все членство в Elegant Themes за 89 долларов. 

 Вы также можете использовать тему Divi и по-прежнему следовать этому руководству, если хотите.

Как создать лендинг с помощью Divi Builder

Однако я не буду делать этого для этого руководства. Вместо этого я собираюсь использовать бесплатную версию Диви (на русском). В архиве есть как плагин, так и тема и в качестве бонуса некоторые полезные макеты.

Опять же, вы можете использовать любую тему, которую вы предпочитаете.

 

Шаг 1. Создайте новую страницу с шаблоном полной ширины и запустите Divi Builder

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

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

Если ваша тема не предлагает шаблон полной ширины, вам может потребоваться выбрать тему, которая немного более современна!

Шаблон полной ширины по-прежнему использует вашу обычную область заголовка WordPress.

Как создать лендинг с помощью Divi Builder

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

Чтобы запустить Divi Builder, нажмите кнопку «Divi Builder»:

Как создать лендинг с помощью Divi Builder

Divi Builder позволяет создавать страницы двумя способами:

  • Backend Builder— вы создаете свои страницы с абстрактными блоками, представляющими фрагменты контента
  • Визуальный строитель— вы создаете свои страницы в том же представлении, что ваши посетители будут видеть ваши страницы

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

Чтобы запустить визуальный строитель, щелкните параметр «Использовать визуальный Builder»:

Как создать лендинг с помощью Divi Builder

Затем вы окажетесь в визуальном интерфейсе:

Как создать лендинг с помощью Divi Builder

Divi использует цвета для разделения различных типов контента на вашей странице. Эти цвета помогут при создании страницы, так что вот краткое руководство к тому, что означают разные цвета в Divi Builder:

  • Синий— обозначает разделы, самый большой контент-держатель.
  • Зеленый— обозначает строки. Строки идут внутри разделов. Вы можете иметь несколько строк в одном разделе.
  • Черный— обозначает модули. Модули представляют собой отдельные фрагменты контента, которые входят в ряды. Вы можете иметь несколько модулей внутри каждой строки.

Суммируя это, от самого большого элемента до самого маленького, он идет:

Секция → Ряд → Модуль

Шаг 2. Создайте основную структуру целевой страницы.

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

В качестве примера можно привести эскиз.

Как создать лендинг с помощью Divi Builder

Он демонстрирует базовую страницу запуска продукта с четырьмя различными разделами:

  • Основной заголовок
  • Раздел «Список функций»
  • О разделе
  • Раздел выбора электронной почты

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

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

Быстрый просмотр интерфейса Divi Builder

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

Чтобы добавить новый раздел, строку или модуль, вы просто нажимаете кнопку «круглый плюс» для связанного элемента (помните цветное кодирование, о котором я говорил раньше! ):

Как создать лендинг с помощью Divi Builder

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

Когда вы нажимаете кнопку «Вставить модуль», вы сможете выбрать конкретный тип модуля из всплывающего окна:

Как создать лендинг с помощью Divi Builder

Затем, как только вы вставляете модуль, вы можете настроить этот модуль, используя другое всплывающее окно:

Как создать лендинг с помощью Divi Builder

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

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

Как создать лендинг с помощью Divi Builder

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

Хорошо — это должно дать вам базовое понимание интерфейса — теперь давайте создадим лендинг с помощью Divi Builder!

Создание заголовка

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

Как создать лендинг с помощью Divi Builder

Теперь добавьте модуль Image в правый столбец и вставьте соответствующее изображение:

Как создать лендинг с помощью Divi Builder

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

Как создать лендинг с помощью Divi Builder

Затем перейдите в Design → Spacing, чтобы изменить положение заголовка, чтобы он выглядел немного лучше:

Как создать лендинг с помощью Divi Builder

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

Как создать лендинг с помощью Divi Builder

Давайте объединим все, добавив модуль Button под нашим подзаголовком. Вы можете поиграть с выравниванием и стилей кнопки на вкладке «Дизайн»:

Как создать лендинг с помощью Divi Builder

И вот мы видим! У нас есть готовый заголовок.

Создание раздела «Список функций»

Далее, давайте создадим раздел списка функций. Для этого добавьте полностью новый раздел, щелкнув синий значок «плюс».

Затем добавьте новую строку из трех столбцов в раздел:

Как создать лендинг с помощью Divi Builder

Простым способом добавления списка функций является использование модуля Blurb. Чтобы настроить модуль Blurb, чтобы он выглядел как пример ниже, не используйте поле Title. Вместо этого используйте область содержимого, чтобы добавить заголовок в качестве подтекста как обычного текста, и сосредоточьте все на нем: h3

Как создать лендинг с помощью Divi Builder

Затем на той же вкладке прокрутите вниз до изображения и значка. Установите флажок «Использовать значок» и выберите значок. Вы также можете выбрать свой собственный образ, если вы предпочитаете такой подход:

Как создать лендинг с помощью Divi Builder

Повторите этот процесс для остальных функций, и у вас должно получиться что-то похожее на это:

Как создать лендинг с помощью Divi Builder

И это завершает наш раздел списка функций!

Создание раздела «О программе»

Чтобы построить раздел «About», мы можем использовать почти тот же подход, что и для раздела заголовка.

Только на этот раз, давайте использовать несколько смещенный двух колоночный дизайн:

Как создать лендинг с помощью Divi Builder

В левом столбце вы можете добавить модуль изображения с личным фото или другим релевантным:

Как создать лендинг с помощью Divi Builder

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

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

Как создать лендинг с помощью Divi Builder

Вот и все!

Создание раздела для отправки по электронной почте

Угадай, что! Divi Builder включает встроенный модуль для ввода электронной почты. Это делает этот раздел довольно простым. Модули, подобные этой, являются одной из причин, почему так легко создать страницу запуска продукта с помощью Divi Builder.

Чтобы использовать его, создайте новый раздел с одно колоночным макетом:

Как создать лендинг с помощью Divi Builder

Затем добавьте модуль Email Optin. Вы можете использовать поля Title и Content, чтобы добавить текст в левую часть вашей электронной почты optin. И вы также можете изменить цвет фона и подключиться к своей службе маркетинга по электронной почте из этого же интерфейса:

Как создать лендинг с помощью Divi Builder

Вот и все!

Итог

Вы только что узнали, как создать лендинг с помощью Divi Builder.

Теперь строите свою страницу!

 

Оставить комментарий