База знаний
по возможностям платформы

Создание страницы с помощью “Конструктора секций”

Здравствуйте, уважаемые пользователи платформы!

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

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

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

Внимание: конструктор секций предназначен только для страниц типа "Веб". Для мобильных лендингов изображения и расположение элементов не подойдет по ширине 320px! 

Предлагаем к прочтению данное руководство, которое поможет вам научится работать с «Конструктором секций», а также освоиться в нашем редакторе LPgenerator.

1) В разделе «Страницы» нажмите кнопку «Добавить новую страницу».

2) Нажмите кнопку «Начните с пустого шаблона».

3) Далее внизу кликните «Сохранить и начать редактирование».

4) После этого перед вами откроется окно визуального редактора LPgenerator.

Основные принципы редактирования элементов:

— клик на элемент позволяет посмотреть его свойства справа и отредактировать их

— двойной клик по элементу позволяет отредактировать его (это касается текста, формы, кнопок, слайдеров и прочих виджетов, HTML кода)

— при наведении элемент подсвечивается красным

— размеры элементов можно изменить, потянув за их правую границу

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

Подробнее о каждом из инструментов редактора вы можете прочитать здесь:

5) На панели виджетов слева выберите «Конструктор секций».

6) После этого откроется окно «Конструктора секций». С его помощью мы можем выбирать секции для логического разделения лендинга. Варианты секций разбиты на разделы, которые расположены слева и идут в порядке структуры лендинга: Шапка (верх лендинга), Выгоды, Этапы работы, Галерея, Лид-форма, Отзывы, Футер (низ лендинга).

Выберите секцию для шапки страницы.

-Можно ли будет изменить текст, картинку и т.д.?

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

Итак, слева выберите пункт «Шапка» и кликните по понравившейся секции справа. Она автоматически добавится сверху лендинга.

В открывшемся окне вы можете задать фильтры секций из списка как по тематике Вашего лендинга:

Так и по цветовой гамме секций:

7) Если загруженная секция вам не подошла, то нажмите на кнопку «Отменить».

Или кликните на секцию, и нажмите «Удалить».

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

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

О каждом инструменте вы можете прочесть здесь:

9) Итак, приступайте к редактированию текста. Выделите текст и напишите свой. Укажите нужный размер, шрифт и прочее оформление текста.

Что делать, если нет подходящего шрифта? Если в списке шрифтов вы не нашли подходящий, то можете загрузить понравившийся шрифт из Google Fonts. О том, как это сделать, читайте здесь:

10) После окончания редактирования сохраните изменения и текст появится на странице.

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

11) Аналогичным образом измените оставшийся в секции текст (телефон, название компании и т.п).

 

12) Итак, после того, как вы отформатировали текст первой секции, можно приступать к редактированию остальных элементов. В первом экране лендинга зачастую может размещаться CTA элемент — кнопка или форма.

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

13) Нередко бывает, что на первой секции сразу встречается лид-форма.

Расскажем вкратце о ее задачах и свойствах:

  • Лид-форма нужна для получения контактных данных (грубо говоря лида) посетителя.
  • Заголовок формы служит призывом к действию (действие — отправка этого лида).
  • Кнопка формы создается не вручную, а сразу с полями и поэтому кнопка и поля формы связаны.
  • После того, как посетитель заполнил поля и отправил лид, эти данные автоматически попадают в раздел «Лиды» (CRM), а также отправляются в почтовом оповещении на вашу «Электронную почту для оповещения о лидах». Если изменений не производилось, этот адрес совпадает с регистрационным, посмотреть это можно в разделе «Учетная запись» .
  • Прочитать множество полезной информации по оптимизации лид-форм можно в нашем блоге.

14) Для того, чтобы отредактировать поля формы, дважды кликните по ним.

После этого откроется редактор форм.

Слева вы можете выбрать нужное поле для добавления.

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

В разделе «Настройки формы» можно выбрать результат действия (что увидит посетитель после отправки лида) и настройки передачи полей. В результате действия можно выбрать страницу благодарности.

Подробнее о том, как работать с редактором форм, читайте здесь:

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

Если вы хотите создать всплывающую форму, то воспользуйтесь руководством

15) Если нужно — отредактируйте внешний вид кнопки формы. Для этого выделите ее и задайте необходимые настройки в простых свойствах справа

16) При желании вы можете изменить фоновое изображение. Для этого выделите секцию и в разделе «Фон» установите изображение или очистите картинку и оставьте только цвет секции.

17) Если необходимо добавить свое изображение на лендинг, кликните по инструменту «Изображение» и выберите картинку из галереи.

Подробнее о работе с галереей читайте здесь:

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

На этом описание редактирования первой секции под названием «Шапка» завершено.

Для того, чтобы увидеть, что получилось, нажмите «Просмотр».

Выгоды, Этапы работы, Галерея, Лид-форма.

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

Отзывы.

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

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

Подробнее о настройках и возможностях данного виджета читайте здесь:

Футер.

В футере страницы зачастую размещают контакты и добавляют карту с месторасположением.

О том, как работать с картами, читайте здесь:

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

На этом мы закончим создание лендинга. Не забудьте сохранить его.

Сохранение и перенос собственных секций

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

Хотите копировать часть страницы на другой вариант или лендинг? Нет проблем — собственная галерея секций всегда под рукой!

Расскажем подробнее как это делается.

1) Откройте страницу в визуальном редакторе LPgenerator:

2) Выберите секцию страницы, которую хотите сохранить, и выделите ее, кликнув по области секции один раз. Выделенная секция будет подсвечена красным:

Примечание: если на вашей странице нет секций, то создать их можно используя инструмент «Секция страницы»:

или с помощью виджета «Конструктор секций».

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

Опуститесь в самый низ этой панели и нажмите «Сохранить в галерею»:

4) Задайте название макета. Рекомендуем назвать его так, чтобы вам в дальнейшем было удобно найти его в галерее:

Количество блоков, которое указано под полем «Название» — это информация о том, сколько элементов находится на секции.

Нажмите кнопку «Сохранить»:

Всплывающее сообщение будет свидетельствовать об успешном добавлении секции.
Нажмите “ОК”, если это требуется:

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

5) Готово. Макет секции сохранен в галерее. Для того, чтобы использовать его нажмите на иконку «Конструктор секций» на панели виджетов слева:

6) Перейдите в раздел «Мои секции» — в нем будет доступна ваша добавленная секция. Кликните по названию, если захотите использовать ее на странице:

7) По умолчанию секция из галереи добавится на страницу после всех имеющихся на странице секций. Если страница пустая, то новая секция будет располагаться в самом верху, так как будет являться единственной.

Секции можно менять местами. Подробнее об этом читайте здесь:

8) Для того, чтобы удалить макет секции нажмите на крестик справа от названия:

 

Итак, вы научились работать с основными элементами.

Более подробное описание прочих возможностей редактора читайте здесь:

Страница создана и можно приступать к ее публикации в интернете — переходите к следующему шагу.

По возникшим вопросоам пишите нам по адресу: support@lpgenerator.ru

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk