Как сделать таблицу в lpgenerator
Небольшие функциональные обновления LPgenerator
Рады оповестить вас о серии обновлений, которыми нас порадовал IT-отдел! Эти обновления сделают работу с платформой еще более комфортной.
1. UTM-метки, содержащие в названии рекламной кампании кириллические символы, не будут кодироваться.
2. В редакторе появилась опция «Зафиксировать» (элемент невозможно сдвинуть с позиции движением компьютерной мыши):
3. Появилась опция «Пропорциональное изменение размера», позволяющая растягивать/уменьшать изображение, не нарушая пропорций:
4. Исправлена проблема с сортировкой лидов по варианту в CRM.
5. Добавлен инструмент «Таблица» в текстовом редакторе. По умолчанию границы будут толщиной в 1 пиксель черного цвета:
6. Теперь можно получить ссылку на изображение в фонах блоков, кнопок, секций в макетах из магазина готовых шаблонов:
7. В центре оптимизации конверсии ползунок «Веса» показов варианта синхронизирован с числовым значением:
8. Устранена проблема с добавлением доменных имен, содержащими букву «Ё».
9. Макеты лендингов, приобретенные в магазине готовых целевых страниц, теперь всегда доступны на странице добавления:
10. Появилась возможность получить информацию о том, с какой формы отправлен лид, если форм на целевой странице 2 или более. В качестве идентификатора будет использоваться название, которое устанавливается в списке элементов:
Внимание! Чтобы изменения вступили в силу на страницах, созданных до обновления, их нужно пересохранить.
Остались вопросы?
Руководитель отдела продаж Баженов Даниил:
sales@lpgenerator.ru
Руководитель отдела дизайна Дмитрий Белозеров:
belozerov.d@lpgenerator.ru
Руководитель отдела верстки Игорь Кизин:
verstka@lpgenerator.ru
Руководитель отдела технической поддержки Наталия Щукина:
support@lpgenerator.ru
Высоких Вам конверсий!
С уважением,
команда LPgenerator
Функционал HTML-редактора шаблонов LPgenerator: подробное руководство
Сегодняшний материал будет посвящен инструментам, с помощью которых создается html шаблон лэндинга в редакторе LPgenerator. В первую очередь эта статья ориентирована для новичков, но, возможно, и опытные пользователи нашей платформы найдут для себя полезные моменты.
Содержание
О HTML-редакторе
Обширный функционал редактора позволяет корректировать выбранные макеты, создавать «с нуля» одностраничники высокого уровня без специальных знаний в рекордно короткие сроки.
Вот несколько основных преимуществ:
Непосредственно о функционале и инструментах мы поговорим прямо сейчас.
Инструменты редактора
Базовые действия осуществляются с помощью стандартных элементов. Их можно найти в меню конструктора, внешне панель выглядит таким образом.
Начнем с 6-ти инструментов, расположенных справа, а затем порционно будем продолжать описывать каждый.
1 — сохраняет все нововведения на landing page.
2 — дает увидеть состояние макета в конкретный момент.
3 — отменяет последнее совершенное действие.
4 — возвращает изменения после отмены.
5 — служит для группировки разных элементов лендинга.
6 — предназначен для добавления элементов, применяемых в качестве фона для других элементов, объединенных в группу.
7 — с его помощью можно загружать нужные иллюстрации, ставить их как на фон, так и на первый план.
8 — очевидно, что предназначен для добавления текстового контента.
9 — добавляет элемент call-to-action.
Здесь на готовом одностраничнике, например, «Подобрать тур».
10 — кнопка предназначена для конструирования конверсионной формы. В этом же редакторе можно выбирать количество полей, изменять их порядок, добавлять нужные строчки. Есть любопытный сплит-тест на эту тему.
Все шаблоны одностраничных сайтов html с формой обратной связи в LPgenerator сделаны с тремя основными полями. Один из примеров ниже.
11 — таким способом легко вставляется на страницу любой код (например, ссылка на Twitter или ролик на YouTube).
12 — изменяет порядок слоев элементов, выдвигая на первый план нужный объект.
И следующие 6 инструментов.
13 — по аналогии с предыдущим, позволяет сместить объект под другие.
14 — позволяет дублировать выделенный элемент (исключение составляют группы разных предметов).
15 — здесь все понятно, выбранный элемент удаляется нажатием данной кнопки.
16 — предназначен для прописывания SEO-параметров: Title, Description, Keywords, тут же можно настроить блоки для поисковых роботов (noindex, nofollow).
17 — позволяет связать одностраничник html с системами веб-аналитики (Яндекс.Метрика, Google Analytics), настроить CSS, и другое.
18 — дает установить конкретные конверсионные действия, ожидаемые от пользователей (заполнить форму, оставить контакты, заказать расчет стоимости).
Виджеты
Панель выглядит таким образом.
«Таймер» — служит для добавления таймера отсчета.
Обычно такой ход применяется в акционных и бонусных предложениях, когда нужно подстегнуть читателя, создав у него ощущение дефицита. Работает отлично, что доказано, например, сплит-тестом компании Aweber.
Вот пример, как выглядит готовый лендинг пейдж шаблон html со счетчиком.
«Поп-ап» — позволяет добавить pop-up форму.
По этой теме можно вспомнить один из сплит-тестов, проведенный специалистами бренда De Hypotheker (консультанты по ипотечному кредитованию). Итак, они решили провести эксперимент, проверив, какое решение увеличит количество подписок.
Первая версия целевой страницы была со всплывающим окном, оно появлялось при перелистывании вниз.
Второй образец предлагался с приглашением подписки вверху страницы.
Победил первый вариант, где подписаться на рассылку приглашали в pop-up окне. Удивительно, но конверсия в подписки сайта увеличилась на целых 757%, немыслимая цифра.
Однако, вернемся к виджетам.
«Карта» позволяет добавить элемент Яндекс.Карты или Google Map, таким образом указав адрес офиса фирмы.
Так выглядит html продающая страница в окончательном варианте с картой.
«Слайдер» — позволяет сделать отзывы или фото в форме слайдера.
Опять же, пример готового варианта. Нажатием на стрелку открывается следующий отзыв.
«Галерея» позволяет сделать составные слайды, увеличение картинок в них происходит по клику.
И сразу лендинг пейдж шаблон html 5, где наглядно демонстрируется этот элемент.
«Видео» позволяет без труда добавлять ролики, настраивать их.
Снова образец готового сайта.
«Дополнительные шрифты» — виджет, благодаря которому можно загрузить новые шрифты с Google Fonts.
Google Fonts — это коллекция бесплатных шрифтов, которые многие веб-мастера используют на своих сайтах.
«Робокасса» значительно упрощает «жизнь» владельца ресурса, позволяя интегрировать платежную систему в шаблоны одностраничных сайтов html.
Вместо заключения
Сегодня мы подробно рассмотрели функционал редактора LPgenerator, с помощью которого можно создавать html шаблон landing page бесплатно. Попробуйте, и вы убедитесь в простоте и широких возможностях платформы.
Панель инструментов редактора LPgenerator
Данное руководство ориентировано на вновь зарегистрированных пользователей платформы LPgenerator и призвано им помочь в кратчайшие сроки освоиться в навигации по инструментам, доступным в основной панели редактора.
Все основные действия (добавление и удаление элементов, смена порядка элементов и т. п.) производится с помощью инструментов, размещенных в основном меню редактора. Внешне оно выглядит следующим образом:
Итак, первые 6 элементов в основной панели инструментов редактора (слева направо):
Для добавления дополнительной секции нажмите кнопку «Секция страницы» в «Основном меню» редактора. Высоту любой секции легко регулировать посредством направляющей, выделенной пунктиром по бокам целевой страницы.
Подробнее о работе с секциями Вы можете прочитать здесь.
Все элементы, «лежащие» на блоке, будут сохранять свои позиции при его перемещении, если поставить галочку “Перетаскивать элементы внутри блока” в его свойствах справа.
Следующая «шестерка» элементов:
Для того, чтобы добавить свои изображения на страницу, нажмите кнопку «Изображение» в «Основном меню» редактора. В появившемся окне выберите нужный файл на жестком диске и подтвердите загрузку. Изображения можно использовать в качестве фона вашей целевой страницы.
Для добавления текстового блока нажмите кнопку «Текст» в «Основном меню» редактора. Вставьте текст, форматируйте его инструментами, доступными в верхней панели редактора текста, и опубликуйте, нажав кнопку «Сохранить».
Подробнее о функционале текстового редактора читайте здесь.
9. Инструмент «Кнопка»— добавляет CTA-элемент (кнопку). Вставьте текст, направленный на призыв к действию (CTA), которое вы ожидаете от пользователя.
Введите URL-адрес страницы, на которую должен переадресовываться пользователь, в строку «Ссылка» и выберите, каким образом она будет открываться («В том же окне» или «В новом окне»). Подтвердите создание новой кнопки, нажав «Сохранить».
Внимание: не путать с кнопкой для формы!
10. Инструмент «Форма» – добавляет лид-форму на страницу.
Меняйте порядок полей формы, удаляйте или добавляйте их в зависимости от того, какую информацию о пользователе вы хотите получить.
11. Инструмент «Произвольный HTML»
Позволяет интегрировать дополнительные элементы (галереи, внешние формы, виджеты, плееры и т. п.) с применением сторонних кодов (например, JS). Вы можете вставить в свою страницу любой HTML-код, например, ссылку на Twitter или видеоролик с YouTube.
12. Инструмент «Слой вверх» – меняет порядок слоев, выдвигая выделенный элемент вперед относительно остальных блоков.
И последние 6 инструментов в панели редактора:
14. Инструмент «Копия» – копирует выделенный элемент (не срабатывает на группе элементов, объединенных в блок). Перед применением действия убедитесь, что был выбран нужный элемент.
15. Инструмент «Удалить» – удаляет выделенный элемент. Внимание: требуется подтверждение действия!
16. Инструмент «Мета-теги»
Позволяет прописать такие важные для SEO параметры как TITLE, Description, Keywords. Кроме того, здесь же можно настроить защиту от поисковых роботов (noindex, nofollow).
Также данный инструмент позволяет установить разметку Open Graph, необходимую при продвижении ваших целевых страниц в социальных сетях. Более подробно читайте в данном руководстве.
Заполните строчки, внеся соответствующую информацию. Сохраните изменения.
17. Инструмент «Скрипты» – позволяет интегрировать сторонние скрипты, коды аналитических систем (Яндекс.Метрика, Google Analytics), настроить стиль страницы (CSS) и т. п.
18. Инструмент «Цели конверсии» – позволяет установить нужные цели конверсии, например, заполнение лид-формы или переход по ссылкe.
С помощью кнопки в левом верхнем углу Вы можете увидеть какой вариант редактируете, а также добавить новый вариант страницы для сплит-теста.
Панель виджетов редактора LPGenerator
Слева в редакторе вам доступны виджеты.
Подробнее о том как добавить таймер, а также о его возможностях Вы можете прочитать здесь.
Подробнее о настройке читайте здесь.
Подробнее о виджете читайте здесь.
Подробнее о слайдере отзывов читайте здесь.
Подробнее о галерее Вы можете прочитать здесь.
Подробнее о виджете можно прочитать здесь.
О том, как пользоваться виджетом читайте здесь.
О том как работать c виджетом читайте здесь.
Элементы страницы
Все элементы страницы отображаются в панели слева. Чтобы развернуть панель нажмите на стрелочку слева:
Для того чтобы переименовать элемент дважды кликните по его названию, введите текст и нажмите на дискетку “Сохранить”.
Для выхода из редактора и перехода в тест-центр отредактированной страницы, личный кабинет или CRM воспользуйтесь кнопкой «Закрыть редактор» (справа) и кликните по нужному варианту:
Перед закрытием редактора не забывайте сохранять изменения!
Высоких вам конверсий!
Техническая поддержка LPgenerator