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

Возможности редактора целевых страниц

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

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

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

Если элементы панели смещены и/или некликабельны: убедитесь, что масштабирование браузера установлено на значении 100%. Уменьшить значение можно в настройках браузера или нажав сочетание клавиш Ctrl + - (минус/дефис).

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

инструменты

1. Инструмент «Сохранить» – позволяет сохранить изменения, внесенные на странице.
2. Инструмент «Просмотр» – позволяет просмотреть актуальное состояние оформления страницы.
3. Инструмент «Отменить» – отменяет последнее внесенное изменение.
4. Инструмент «Повторить» – возвращает состояние страницы после отмены изменений.
5. Инструмент «Секция страницы» - позволяет добавить секцию страницы. Секции применяются для логической группировки элементов целевой страницы (по высоте).

Секция страницы

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

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

6. Инструмент «Блок» — позволяет добавлять блоки. Блоки применяются в качестве фона для группы элементов.

Блок

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

Блок

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

инструменты

7. Инструмент «Изображение» — позволяет выбирать изображения, доступные в галерее, и загружать собственные.

Инструмент «Изображение»

галерея

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

8. Инструмент «Текст» — добавляет текстовый блок на страницу. Легко заполняйте целевую страницу необходимой информацией.

Инструмент «Текст»

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

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

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

Инструмент «Кнопка»

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

Инструмент «Кнопка»

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

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

Инструмент «Форма»

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

Инструмент «Форма»

11. Инструмент «HTML»

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

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

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

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

инструменты

13. Инструмент «Слой вниз» — меняет порядок слоев, смещая элемент под другие блоки.

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

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

Инструмент «Удалить»

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

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

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

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

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

Мета-теги

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

Инструмент «Скрипты»

Инструмент «Скрипты»

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

Инструмент «Цели конверсии»

Инструмент «Цели конверсии»

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

сплит-тест

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

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

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

1. Виджет “Таймер” — позволяет добавить на страницу таймер обратного отсчета.

 Виджет “Таймер”

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

 Виджет “Таймер”

2. Виджет “Попап” — добавляет на страницу всплывающую форму.

Виджет “Попап”

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

Виджет “Попап”

3. Виджет “Карта” — позволяет добавить Яндекс.Карту и Google Map на страницу.

Виджет “Карта”

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

Виджет “Карта”

4. Виджет “Слайдер” — с помощью него можно добавить слайдер отзывов с фото и текстом.

Виджет “Слайдер”

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

Виджет “Слайдер”

5. Виджет “Галерея” — дает возможность создать составные слайды, увеличение по клику и настроить собственный стиль.

Виджет “Галерея”

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

Виджет “Галерея”

6. Виджет “Видео” — служит для добавления видеороликов на страницу и их настроек.

Видео

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

Редактор видео

7. Виджет “Дополнительные шрифты” — позволяет загрузить шрифты с Google Fonts.

Шрифты

Подробное руководство здесь.

Редактор шрифтов

8. Виджет “Робокасса” — с его помощью можно интегрировать платежную систему.

Робокасса

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

9. Виджет “Конструктор секций” — поможет всего в несколько кликов создать полноценный лендинг.

Конструктор секций

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

 Секций конструктор

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

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

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

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

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

переименовать элемент

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

Закрыть редактор

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

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

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

Комментарии

  • Avatar
    Пользователь daha7070

    В тестовом режиме мета-теги недоступны?

  • Avatar
    Лина Малькова

    Здравствуйте!

    В тестовом режиме доступен весь функционал платформы.

  • Avatar
    Дмитрий

    Есть ли возможность в одном блоке загрузить несколько маленьких изображений, чтобы кликом открывался увеличенный вариант каждого?

  • Avatar
    Пользователь tom169

    Как использовать градиент в качестве фона ?

  • Avatar
    Лина Малькова

    Здравствуйте!

    Пользователь zherebchenko (https://lpgenerator.zendesk.com/users/427661101), это можно реализовать с помощью галереи миниатюр, увеличивающихся по клику. Руководство есть здесь: https://lpgenerator.zendesk.com/entries/23275911-%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-%D1%81-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-%D0%B8%D0%B7-%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80%D1%8B-%D0%BF%D0%BE-%D0%BA%D0%BB%D0%B8%D0%BA%D1%83

    Пользователь tom169 (https://lpgenerator.zendesk.com/agent/#/users/427834051), это возможно, если Вы загрузите градиент как изображение и в меню справа настроите параметр "Размножение".

  • Avatar
    Алла Житомирская

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

  • Avatar
    Лина Малькова

    Здравствуйте! Да, выделите секцию, кликнув по ней один раз, и удалите с помощью инструмента "Удалить" в меню редактора.

  • Avatar
    Сергей Сидоренко

    Добавьте меня в скаипе я хочу с вами там пообщаться что бы показать что у меня на экране

     

    slava.is.sergei.sidorenko-это мой скаип

  • Avatar
    Сергей Сидоренко

    Техническая подержка!!! Добавьте меня в скаипе я хочу с вами там пообщаться что бы показать что у меня на экране

     

    slava.is.sergei.sidorenko-это мой скаип

  • Avatar
    Лина Малькова

    Здравствуйте, Сергей! Онлайн-поддержка посредством Skype доступна с 12 по 15 часов по Москве в будние дни. Учетная запись lpgenerator.

  • Avatar
    Пользователь g_davidoff

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

    Кнопка предлагает написать url. А мне не нужно никуда переходить, мне надо что б данные с формы пришли на ящик.

    Киньте ссылку из раздела помощи, пож-та. Спасибо!

  • Avatar
    Пользователь g_davidoff

    ааа, он автоматом приходит. Ок. вопрос снят

  • Avatar
    Пользователь polozuyk

    Добрый день! А как сделать обратный отсчет на странице? Спасибо!

  • Avatar
    Лина Малькова

    Здравствуйте!

    Руководство по добавлению счетчика обратного отсчета есть здесь: https://lpgenerator.zendesk.com/entries/21990331-%D0%A1%D1%87%D0%B5%D1%82%D1%87%D0%B8%D0%BA-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BE%D1%82%D1%81%D1%87%D0%B5%D1%82%D0%B0-%D1%82%D0%B0%D0%B9%D0%BC%D0%B5%D1%80-%D0%BD%D0%B0-%D1%86%D0%B5%D0%BB%D0%B5%D0%B2%D1%8B%D1%85-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0%D1%85

    Код нужно будет вставить в редакторе в "Произвольный HTML".

  • Avatar
    Пользователь lpv1988

    Здравствуйте !а как свой шрифт можно добавить ?

  • Avatar
    Лина Малькова

    Здравствуйте!

    Шрифты нужно подключать как стили через скрипты внутри тега .

    Пример реализации есть тут: http://www.xiper.net/collect/html-and-css-tricks/typographics/font-face-non-standart-fonts-on-css.html

    Своими силами можно сделать следующее:

    1. Через Google WebFonts: http://www.google.com/webfonts

    Выбираем нужный шрифт. Нажимаем QuickUse.

    Получаем ссылку вида: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:

    Добавляем ее через "Скрипты" в .

    Для текста в исходнике указываем свойство font-family:Gabriela;

    ===

    1. Через http://webfont.ru

    Выбираем нужный шрифт. Нажимаем кнопку "Получить шрифт"

    Получаем ссылку вида: @im * port "http://webfonts.ru/import/alexander.css";

    Добавляем ее через "Скрипты" в заключив строчку в теги .

    Например:

    @im * port "http://webfonts.ru/import/alexander.css";

    Для текста в исходнике указываем свойство font-family: alexander;

  • Avatar
    Гузель

    Создала страницу , а как её сохранить на комп отдельным файлом? 

  • Avatar
    Лина Малькова

    Здравствуйте, Гузель! Откройте страницу через "Просмотр" в отдельной вкладке и далее из меню браузера выберите "Сохранить как".

  • Avatar
    Анна

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

     Мне нужно, чтобы данные с формы пришли на ящик.

     

  • Avatar
    Лина Малькова

    Здравствуйте!

    Данные с лид формы отправляются на e-mail автоматически в оповещении о вновь поступившем лиде, а также поступают в Ваш CRM-центр на вкладке "Лиды". Сейчас у Вас настроена отправка оповещений на тот адрес, на который зарегистрирован аккаунт.

    Если Вам необходимо чтобы оповещения приходили на другой ящик, то измените адрес в поле "Электронная почта для оповещения о лидах" и подтвердите e-mail, перейдя по ссылке в письме, отправленном на основной почтовый ящик.

  • Avatar
    Анна

    проверила, все нормально, привязано все к действующей почте, но форма не отправляется, как узнать в чем проблема?

    посмотрите, пожалуйста.. www.avtokresla116.ru

  • Avatar
    Лина Малькова

    Скорее всего дело в том, что кнопка не связана с лид-формой. 

    Нужно дублировать форму с помощью инструмента "Дублировать", а старую удалить, либо создать лид-форму заново с помощью инструмента "Форма" в редакторе, кнопка связанная с формой создается при этом автоматически, она имеет вид: http://awesomescreenshot.com/06d1hp5710 (без полей для ссылок и т.п.) 
    Внешний вид формы и ее кнопки можно настроить в меню справа.

    Также, если Вы не настраивали мэппинг полей формы, удалите галочку в меню справа напротив "Передать поля формы".

  • Avatar
    Анна

    Заменила форму! Все получилось. Спасибо!

  • Avatar
    Пользователь lpv1988

    Здравствуйте !!! Я снова с шрифтами ... вроде все сделал но ни чего не вышло!Что не так сделал ? 

  • Avatar
    Лина Малькова

    Здравствуйте! На данный момент на странице http://lpgenerator.ru/var/148412/ (http://lpgenerator.ru/var/148412/) нет ни одного скрипта. Добавьте скрипт шрифта, как Вы уже делали. Потом в текстовом редакторе нажмите "Источник" и укажите нужный шрифт: http://awesomescreenshot.com/09d1nrrv5d

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

  • Avatar
    Александр

    Здавствуйте! можно ли изменять прозрачность отдельного блока?

  • Avatar
    Лина Малькова

    Здравствуйте, Александр! Прозрачность блока или изображения можно настроить на вкладке "Расширенные" в меню справа. Выделите нужный блок одним кликом и впишите в меню справа параметр opacity: 0.5;  

    Значение параметра может быть от 0 до 1.

  • Avatar
    Андрей Заяц

    Добрый день. У меня вопрос по шрифтам. Мне необходимо использовать шрифт calibri во всех разделах сайта (в том числе и на кнопках). Через Google WebFonts и WebFont.ru добавить не получилось, там нет такого шрифта. Возможно, я что-то неправильно сделал. Помогите, пожалуйста, разобраться.

    Сайт, о котором идет речь опубликован http://testlpgenerator.ru/ops-kopiya/ (http://testlpgenerator.ru/ops-kopiya/)

    Ссылка на редактирование http://lpgenerator.ru/var/151641/ (http://lpgenerator.ru/var/151641/)

    Заранее благодарен.

  • Avatar
    Лина Малькова

    Здравствуйте, Андрей! К сожалению, на этих ресурсах нет бесплатной версии данного шрифта. Если Вы найдете бесплатную версию в интернете, то подключить ее можно аналогичным способом.

  • Avatar
    Пользователь alex

    Добрый день! Подскажите, каким образом можно выделять несколько объектов одновременно?

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

    зажимание кнопки Ctrl и выделение нужных элементов не работает

    пример скриншота прикреплен к письму

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