Создание страницы из макета

Последние изменения: 05.04.2022

Здравствуйте, друзья!

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

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

В открывшемся окне выберите наиболее подходящий для вашей ниши макет.

0b43e901c7eef19ca08fe0d00476dd32.png

Макет можно выбрать из бесплатных шаблонов:

e0b5bdb9c9aaf7465cc5f5a0cf4a1eb9.png

Или подобрать более профессиональный дизайн из «Магазина целевых страниц»:

d809ea0efc6532d0d47a84c8dfb252e1.png

2) Кликните по макету и посмотрите на него. Если макет вам подходит, то нажмите на кнопку «Выбрать этот макет и начать редактирование»:

b1335044701979af9b426fe4c95ab8ea.png

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

3) После этого данный макет откроется в визуальном редакторе LPgenerator. Функциональные панели редактора выглядят следующим образом:

0377e4c77c882cb4675944c99a4f2de4.png

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

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

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

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

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

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

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

4b2e75f226484b0467f9a95c33ce8485.png
d3babc57d771f4ce6082558cc762ea30.png

Теперь разберем подробнее работу с каждым элементом.

Текст.

1) Дважды кликните по текстовому элементу:

df95b24136d458cc6482308051c1faab.png


2) После этого откроется текстовый редактор. Его инструментарий не сильно отличается от стандартных редакторов текста.

Обратите внимание: по умолчанию фон редактора белый и соответственно белый шрифт на нем незаметен. В этом случае сразу нажмите на инструмент «Цвет фона редактора» — это черный квадратик. Чтобы переключить на белый фон снова нажмите на квадратик.

a6b4e982335d8b619367fcfe2fe84416.png

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

813ed2737946f8d726e56b55366c20c5.png

4) Если стандартных шрифтов вам не хватило, то дополнительные шрифты можно загрузить с помощью инструмента:

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

472547ecdb71d3c7e69e15b0ac8c6e8e.png
5a741f7e8aa669abb8f444193a465dae.png

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

Изображение.

Замена фонового изображения.

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

e989e0aa8884cf29afb9fd18c5cf82ba.png

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

785b9c31a37883d54a3b73e7bc9c0ae7.png

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

8c650926cdccbc75e003d730e7b69215.png

Далее в простых свойствах справа установите внешний или внутренний фон страницы.

Замена обычных изображений.

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

0ab3b4ed4ec79a24ef24db7c62fa2428.png

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

Добавление нового изображения.

Для того, чтобы добавить свое изображение на лендинг, нажмите инструмент «Изображения» и с помощью галереи выберите и разместите на странице нужное изображение:

0ea00d7956e33fbf91c7d4d6bc10e2c8.png

Для изменения размеров изображения, потяните за его правый нижний угол:

4cc6b7e9c06283caed67035805d431b7.png



Форма.

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

  • Лид-форма нужна для получения контактных данных (грубо говоря лида) посетителя.

  • Заголовок формы служит призывом к действию (действие — отправка этого лида).

  • Кнопка формы создается не вручную, а сразу с полями и поэтому кнопка и поля формы связаны.

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

  • Прочитать множество полезной информации по оптимизации лид-форм можно в нашем блоге.

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

a102b834db7fffd8c93b5d67ff17b003.png

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

eba15cdc6946860db158678433a39582.png

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

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

952557b824189552ee31d2b250874b99.png

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

8cf553f2848184905c02f88baad086eb.png

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

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


Всплывающая форма.

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

b3ea963f23debb7f9180c72d6dc8ec3d.png


Кнопки.

1) Для того, чтобы отредактировать внешний вид кнопки кликните по ней один раз и в свойствах справа настройте цвет, скругление и прочее оформление:

91d05a5d61f4890895a773fbb4f1efe5.png

2) Дважды кликните по кнопке и отредактируйте ее название.

Для того, чтобы при нажатии на кнопку происходило перенаправление, впишите ссылку в поле «Ссылка»:

718e3b613b29c1841bb1e35d3f3d4611.png

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

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

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

Страница создана и можно приступать ко второму шагу руководства.

 

Помогла ли вам статья?