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

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

Данное руководство ориентировано на вновь зарегистрированных пользователей платформы 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 воспользуйтесь кнопкой «Закрыть редактор» (справа) и кликните по нужному варианту:

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

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

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

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

Комментарии

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

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

  • Avatar
    Пользователь kit.barinov

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

    1. Могу ли я нарисовать свои кнопки на фоновом изображении, а поверх них поставить прозрачные ссылки? Или я могу в качестве кнопки загрузить PNG с альфа-каналом?

    2. Как сделать, чтобы изображение было кликабельным и увеличивалось?

    3. Как прикрутить разные версии фонового изображения для разных разрешений? Или чтобы оно хотя бы растягивалось, как на этом прекрасном образце http://apelsinextreme.ru/ (http://apelsinextreme.ru/)

     

     

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

    Здравствуйте! 1. Кнопки можно создать только с помощью инструмента "Кнопка", а вот фон Вы можете загрузить любой. Ссылку нужно будет вставить в поле "Ссылка" в настройках кнопки.

    1. Для этого добавьте на страницу галерею изображений, увеличивающихся по клику. Руководство есть здесь: 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

    2. Изображения, к сожалению, не имеют свойств "растягиваться". Если хотите, чтобы оно заполняло всю страницу, берите изображение из расчета наибольшего разрешения и добавляйте его как фон для секции. В указанном примере использовано изображение размером 1920x620 рх.

  • Avatar
    Пользователь kit.barinov

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

    Перестала отображаться кнопка в лид-форме и вся страница отображается у левой границы браузера.

     

    http://lpgenerator.ru/var/190861/ (http://lpgenerator.ru/var/190861/)

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

    Здравствуйте! При добавлении скриптов будьте, пожалуйста, внимательны. Вы ошиблись в закрывающем теге . Сейчас все исправлено.

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

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

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

    Здравствуйте! Для этого перейдите в "Источник" в текстовом редакторе и вручную пропишите размер шрифта: http://awesomescreenshot.com/0101t6qs0d

  • Avatar
    Павел Лоскутов

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

    Подскажите, пожалуйста, есть ли возможность, выделив несколько элементов, дублировать их все вместе?

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

    Но, возможно, есть какой-то инструмент, который я не заметил?

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

    Здравствуйте, Павел! К сожалению, дублировать сразу несколько элементов невозможно. Как вариант, можно копировать страницу, а затем в копии внести необходимые изменения, не переделывая всю страницу заново.

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

    можно ли к тексту добавить тень?

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

    Здравствуйте! Это можно сделать в текстовом редакторе, перейдя в "Источник".

  • Avatar
    Иван Сандин

    Хочу на странице сделать фото товара с описанием и под описанием поставить кнопку "далее", что бы при нажатие на кнопку высвечивалось окно с формой заявки (введите имя телефон и кнопка отправить). Форму сделать понятно как, кнопку добавить тоже. Но как сделать, что бы эта форма появлялась только при нажатие кнопки??? Наподобие кнопки заказать звонок в страницах БМ. 

  • Avatar
    Иван Сандин

    И можно ли сделать кнопку объемной???

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

    Здравствуйте, Иван! Руководство по настройке всплывающей формы есть здесь: https://lpgenerator.zendesk.com/entries/22231063-%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D1%83%D1%8E-%D1%84%D0%BE%D1%80%D0%BC%D1%83-PopUp-%D1%84%D0%BE%D1%80%D0%BC%D1%83-

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

  • Avatar
    Пользователь lianka.90

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

  • Avatar
    Иван Сандин

    Хочу сделать увеличивающиеся фото, но не могу перейти по ссылке, которую вы указывали: 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
    после перехода открывается чистая страница, есть ли другой вариант посмотреть как сделать фото на странице, при клике на которые они бы увеличивались.???

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

    Доброй ночи!

    У меня (пользователь and_zayats@mail.ru) опубликовано 10 страниц и у всех появилась одна и та же проблема: при заполнении формы в нижней части страницы вылезает не страница благодарности, а некая ошибка, причем данные о лиде передаются в личный кабинет. Ниже прилагаю скриншоты некоторых из моих страниц.

    Артем при заполнении и отправке нижней формы заявки на лендингах :
    http://b.liis.su/3/
    http://b.liis.su/
    http://b.liis.su/smart_1/
    http://b.liis.su/2/

    http://joxi.ru/jmuTUtg5CbA6TkZmGmc
    http://joxi.ru/n2uTUtg5CbA7TkhrQ_k
    http://joxi.ru/sGuTUtg5CbBpTaGx9DI
    http://joxi.ru/wWuTUtg5CbC4TZn4Rfw

    Перенаправляет на станицу(см фото)
    http://joxi.ru/omyTUtg5CbBuTcoQfWY

    Скажите, пожалуйста, как это исправить?

    P.S. Все страницы сделаны по одному шаблону и там 3 формы: 1-Заказ звонка, 2-основная форма справа и 3-нижняя форма - та, с которой проблема. Все 3 формы ведут на единственную страницу благодарности a.liis.su/spasibo, но проблемы возникают только с нижней формой.

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

    Здравствуйте! Подскажите, как добавить видео, залитое на ютубе, на страницу лэндинга?

  • Avatar
    Владимир

    Похоже служба Поддержки умерла в январе 2014. :(

  • Avatar
    Дмитрий

    Здравствуйте, Владимир!

    За январь 2014 года нами было обработано более 10 000 запросов пользователей. Уточните, пожалуйста, что конкретно Вы имели ввиду.

  • Avatar
    Владимир

    Я имел ввиду предыдущий комментарий от Пользователь surprizavr_zaharov (2 месяца назад) оставленный без ответа.
    И похоже таких безответных комментариев много раскинуто по FAQ.
    У вас отличный сервис, но вы оставляете без ответа вопросы и новым пользователям кажется, что у вас всё заглохло.
    Чем больше вы публично будете отвечать, тем меньше вам будут отправлять по email вопросы. Вы старайтесь свои советы из своего же блога соблюдать. :) Не отвечайте на этот коммент.

  • Avatar
    Дмитрий

    Благодарим за замечание. Однако, если Вы обратите внимание, с середины декабря мы начали отвечать практически на все вопросы в сообществе. Следуя Вашей терминологии, это не смерть, а перерождение :)

  • Avatar
    Алексей

    Подскажите. а есть возможность делать фон или цвет блока полупрозрачным? менять прозрачность. видел на шаблоне такой текстовый блок, но как его найти или сделать помимо шаблона не смог. очень важный момент для меня вот ссылка http://testlpgenerator.ru/test_1183/

  • Avatar
    Максим Гуйван

    Здравствуйте, Алексей!

    Вы можете задать полупрозрачность блоку через расширенные CSS-свойства. Для этого выделите блок, в правой части редактора страницы переключитесь на вкладку "Расширенные" - и в поле для ввода свойств, прямо под предупреждением о необходимости быть осторожным с CSS-свойствами, вводите следующее:
    opacity:0.5
    На скриншоте отмечено, где именно нужно вводить свойства: http://prntscr.com/31af23
    Значение параметра opacity должно быть между 0 и 1.

  • Avatar
    Пользователь yury.shemchuk

    Каким образом можно установить размер шрифта, не имеющийся в выпадающем поле редактора, например — 45?

  • Avatar
    Максим Гуйван

    Здравствуйте, Юрий!

    Чтобы задать нестандартный размер шрифта, вы можете воспользоваться режимом "Источник" в инструменте "текст".
    Введите нужный вам текст в редакторе, задайте наиболее подходящий под вашу задачу размер, например 48, затем нажмите кнопку "Источник" - и в исходном коде замените цифры "48" на нужные вам размеры. Затем сохраните текстовый блок и страницу.
    Эта операция проиллюстрирована на скриншоте по ссылке http://prntscr.com/331zfw

  • Avatar
    Евгения

    Здравствуйте, не получилось поменять шрифт с помощью Вашей инструкции на google/fonts
    Я внесла скрипт <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    Добавила в Источник текстового блока: font-family: 'Lobster', cursive;
    Но шрифт немного видоизменился, так и не приняв нужного мне вида. Стал похож на ComicSans

  • Avatar
    Евгения

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

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

    Здравствуйте! Группу элементов можно перемещать внутри блока. Создайте блок, растяните его до нужного размера, в меню справа внизу установите галочку "Перемещать элементы внутри блока". Тогда потянув за край блока, Вы сможете вместе с ним переместить все элементы, находящиеся на нем.

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

    Здравствуйте, Евгения! Увидеть изменения шрифта можно при просмотре страницы. Пришлите нам ссылку на страницу в редакторе на адрес support@lpgenerator.ru, мы проверим настройки.

    Блок можно сделать прозрачным. Для того, чтобы задать свойство прозрачности для объекта, выделите его кликом, перейдите во вкладку свойств "Расширенные" (настройки пристыкованы к правой части экрана) и в поле CSS вставьте строку: opacity: 0.5;