Как сделать таблицу в lpgenerator

Небольшие функциональные обновления LPgenerator

8

Рады оповестить вас о серии обновлений, которыми нас порадовал IT-отдел! Эти обновления сделают работу с платформой еще более комфортной.

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

2. В редакторе появилась опция «Зафиксировать» (элемент невозможно сдвинуть с позиции движением компьютерной мыши):

3

3. Появилась опция «Пропорциональное изменение размера», позволяющая растягивать/уменьшать изображение, не нарушая пропорций:

4

4. Исправлена проблема с сортировкой лидов по варианту в CRM.

5. Добавлен инструмент «Таблица» в текстовом редакторе. По умолчанию границы будут толщиной в 1 пиксель черного цвета:

2

6. Теперь можно получить ссылку на изображение в фонах блоков, кнопок, секций в макетах из магазина готовых шаблонов:

5

7. В центре оптимизации конверсии ползунок «Веса» показов варианта синхронизирован с числовым значением:

9

8. Устранена проблема с добавлением доменных имен, содержащими букву «Ё».

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

7

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

6

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

Остались вопросы?

Руководитель отдела продаж Баженов Даниил:
sales@lpgenerator.ru

Руководитель отдела дизайна Дмитрий Белозеров:
belozerov.d@lpgenerator.ru

Руководитель отдела верстки Игорь Кизин:
verstka@lpgenerator.ru

Руководитель отдела технической поддержки Наталия Щукина:
support@lpgenerator.ru

Высоких Вам конверсий!

С уважением,
команда LPgenerator

Источник

Функционал HTML-редактора шаблонов LPgenerator: подробное руководство

image03

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

Содержание

О HTML-редакторе

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

Вот несколько основных преимуществ:

Непосредственно о функционале и инструментах мы поговорим прямо сейчас.

Инструменты редактора

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

image20

Начнем с 6-ти инструментов, расположенных справа, а затем порционно будем продолжать описывать каждый.

image19

1 — сохраняет все нововведения на landing page.

2 — дает увидеть состояние макета в конкретный момент.

3 — отменяет последнее совершенное действие.

4 — возвращает изменения после отмены.

5 — служит для группировки разных элементов лендинга.

6 — предназначен для добавления элементов, применяемых в качестве фона для других элементов, объединенных в группу.

image17

7 — с его помощью можно загружать нужные иллюстрации, ставить их как на фон, так и на первый план.

8 — очевидно, что предназначен для добавления текстового контента.

9 — добавляет элемент call-to-action.

Здесь на готовом одностраничнике, например, «Подобрать тур».

image06

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

Все шаблоны одностраничных сайтов html с формой обратной связи в LPgenerator сделаны с тремя основными полями. Один из примеров ниже.

image21

11 — таким способом легко вставляется на страницу любой код (например, ссылка на Twitter или ролик на YouTube).

12 — изменяет порядок слоев элементов, выдвигая на первый план нужный объект.

И следующие 6 инструментов.

image24

13 — по аналогии с предыдущим, позволяет сместить объект под другие.

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

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

16 — предназначен для прописывания SEO-параметров: Title, Description, Keywords, тут же можно настроить блоки для поисковых роботов (noindex, nofollow).

image01

17 — позволяет связать одностраничник html с системами веб-аналитики (Яндекс.Метрика, Google Analytics), настроить CSS, и другое.

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

Виджеты

Панель выглядит таким образом.

image09

«Таймер» — служит для добавления таймера отсчета.

image22

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

Вот пример, как выглядит готовый лендинг пейдж шаблон html со счетчиком.

image04

«Поп-ап» — позволяет добавить pop-up форму.

image08

По этой теме можно вспомнить один из сплит-тестов, проведенный специалистами бренда De Hypotheker (консультанты по ипотечному кредитованию). Итак, они решили провести эксперимент, проверив, какое решение увеличит количество подписок.

Первая версия целевой страницы была со всплывающим окном, оно появлялось при перелистывании вниз.

image00

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

image12

Победил первый вариант, где подписаться на рассылку приглашали в pop-up окне. Удивительно, но конверсия в подписки сайта увеличилась на целых 757%, немыслимая цифра.

Однако, вернемся к виджетам.

«Карта» позволяет добавить элемент Яндекс.Карты или Google Map, таким образом указав адрес офиса фирмы.

image18

Так выглядит html продающая страница в окончательном варианте с картой.

image05

«Слайдер» — позволяет сделать отзывы или фото в форме слайдера.

image07

Опять же, пример готового варианта. Нажатием на стрелку открывается следующий отзыв.

image10

«Галерея» позволяет сделать составные слайды, увеличение картинок в них происходит по клику.

image02

И сразу лендинг пейдж шаблон html 5, где наглядно демонстрируется этот элемент.

image13

image15

«Видео» позволяет без труда добавлять ролики, настраивать их.

image23

Снова образец готового сайта.

image14

«Дополнительные шрифты» — виджет, благодаря которому можно загрузить новые шрифты с Google Fonts.

Google Fonts — это коллекция бесплатных шрифтов, которые многие веб-мастера используют на своих сайтах.

image16

«Робокасса» значительно упрощает «жизнь» владельца ресурса, позволяя интегрировать платежную систему в шаблоны одностраничных сайтов html.

image11

Вместо заключения

Сегодня мы подробно рассмотрели функционал редактора LPgenerator, с помощью которого можно создавать html шаблон landing page бесплатно. Попробуйте, и вы убедитесь в простоте и широких возможностях платформы.

Источник

Панель инструментов редактора LPgenerator

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

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

image18

Итак, первые 6 элементов в основной панели инструментов редактора (слева направо):

image07

image29

Для добавления дополнительной секции нажмите кнопку «Секция страницы» в «Основном меню» редактора. Высоту любой секции легко регулировать посредством направляющей, выделенной пунктиром по бокам целевой страницы.

Подробнее о работе с секциями Вы можете прочитать здесь.

image35

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

image25

Следующая «шестерка» элементов:

image31

image28

image32

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

image11

Для добавления текстового блока нажмите кнопку «Текст» в «Основном меню» редактора. Вставьте текст, форматируйте его инструментами, доступными в верхней панели редактора текста, и опубликуйте, нажав кнопку «Сохранить».

Подробнее о функционале текстового редактора читайте здесь.

9. Инструмент «Кнопка»— добавляет CTA-элемент (кнопку). Вставьте текст, направленный на призыв к действию (CTA), которое вы ожидаете от пользователя.

image00

Введите URL-адрес страницы, на которую должен переадресовываться пользователь, в строку «Ссылка» и выберите, каким образом она будет открываться («В том же окне» или «В новом окне»). Подтвердите создание новой кнопки, нажав «Сохранить».

image03

Внимание: не путать с кнопкой для формы!

10. Инструмент «Форма» – добавляет лид-форму на страницу.

image04

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

image01

11. Инструмент «Произвольный HTML»

image38

Позволяет интегрировать дополнительные элементы (галереи, внешние формы, виджеты, плееры и т. п.) с применением сторонних кодов (например, JS). Вы можете вставить в свою страницу любой HTML-код, например, ссылку на Twitter или видеоролик с YouTube.

12. Инструмент «Слой вверх» – меняет порядок слоев, выдвигая выделенный элемент вперед относительно остальных блоков.

И последние 6 инструментов в панели редактора:

image10

14. Инструмент «Копия» – копирует выделенный элемент (не срабатывает на группе элементов, объединенных в блок). Перед применением действия убедитесь, что был выбран нужный элемент.

15. Инструмент «Удалить» – удаляет выделенный элемент. Внимание: требуется подтверждение действия!

image12

16. Инструмент «Мета-теги»

image08

Позволяет прописать такие важные для SEO параметры как TITLE, Description, Keywords. Кроме того, здесь же можно настроить защиту от поисковых роботов (noindex, nofollow).

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

Заполните строчки, внеся соответствующую информацию. Сохраните изменения.

image37

17. Инструмент «Скрипты» – позволяет интегрировать сторонние скрипты, коды аналитических систем (Яндекс.Метрика, Google Analytics), настроить стиль страницы (CSS) и т. п.

image21

image17

18. Инструмент «Цели конверсии» – позволяет установить нужные цели конверсии, например, заполнение лид-формы или переход по ссылкe.

image14

image02

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

image09

Панель виджетов редактора LPGenerator

Слева в редакторе вам доступны виджеты.

image10

image30

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

image26

image24

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

image36

image27

Подробнее о виджете читайте здесь.

image22

image16

Подробнее о слайдере отзывов читайте здесь.

image19

image33

Подробнее о галерее Вы можете прочитать здесь.

image13

image20

Подробнее о виджете можно прочитать здесь.

image01

image17

image08

image09

О том, как пользоваться виджетом читайте здесь.

image19

О том как работать c виджетом читайте здесь.

image21

Элементы страницы

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

image20

image23

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

image34

Для выхода из редактора и перехода в тест-центр отредактированной страницы, личный кабинет или CRM воспользуйтесь кнопкой «Закрыть редактор» (справа) и кликните по нужному варианту:

image15

Перед закрытием редактора не забывайте сохранять изменения!

Высоких вам конверсий!

Техническая поддержка LPgenerator

Источник