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

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

Данное руководство ориентировано на вновь зарегистрированных пользователей платформы 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
    Евгения

    И еще вопрос, можно ли добавлять новые секции не в конце лэндинга, а в середину?

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

    Здравствуйте, Евгения!

    Уточните, пожалуйста, каким именно способом вы настроили прозрачность лид-формы? Если вы указали свойство opacity для всей страницы через расширенные CSS-свойства, вам нужно убрать это свойство, и изображения перестанут быть прозрачными.

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

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

    Подробнее возможности перемещения секций описаны в статье по ссылке ниже:
    https://lpgenerator.zendesk.com/hc/ru/articles/201845753-%D0%9F%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B5%D0%BA%D1%86%D0%B8%D0%B9

    Для более подробных и точных рекомендаций обратитесь, пожалуйста, в нашу службу технической поддержки support@lpgenerator.ru.

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

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

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

    как сделать блок полупрозрачным?

  • Avatar
    Дмитрий

    В расширенных свойствах блока в поле "Чистый CSS" впишите
    opacity : 0.5;

  • Avatar
    Шакир

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

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

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

    Чтобы этого не происходило, располагайте все элементы страницы в границах внутреннего фона страницы, тогда она будет отображаться одинаково центровано на любых мониторах: http://awesomescreenshot.com/0052o0to88
    Увеличить ширину страницы, если нужно, можно в меню справа.

    Также чтобы убрать горизонтальный скроллинг, можно указать галочку "Без горизонтальной прокрутки": http://awesomescreenshot.com/06a2o0tzc2

    Если Вы хотите, чтобы с мобильных устройств сайт также корректно отображался, то сделайте перенаправление по этому руководству:
    http://lpgenerator.ru/blog/2014/04/18/obnovlenie-lpgenerator-avtomaticheskij-redirekt-na-mobilnuyu-versiyu-lendinga/

  • Avatar
    Шакир

    Но ведь чтобы сделать перенаправление на мобильную версию, нужно создать такой же сайт только мобильный, верно? А можно ли сделать перенаправление на мобильный сайт и не создавать его? Что бы веб сайт который я создал переконвертировался в мобильный?

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

    К сожалению, нет. Наша платформа пока еще не поддерживает адаптивный дизайн, поэтому нужно будет создавать мобильную версию страницы на основе специально разработанных мобильных шаблонов. При создании страницы просто выберите тип страницы - мобильный: http://awesomescreenshot.com/07231jwq68

  • Avatar
    Шакир

    Спасибо

  • Avatar
    Тимур

    Здравствуйте! как можно перетащить одновременно много элементов? нашел ответ на этот вопрос, но все равно не смог перетащить...пожалуйста напишите что делать пошагово

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

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

    Чтобы перетащить несколько элементов следует создать новый "блок", обвести его рамкой нужные вам элементы, отметить в правой части редактора галочкой опцию "Перетаскивать элементы внутри блока" — после этого можно перетащить блок вместе с элементами как обычный объект.
    Вы можете ориентироваться на скриншот по ссылке: http://joxi.ru/OBCtUxjKTJCfNa_uVKU

    Если возникнут затруднения или дополнительные вопросы — обращайтесь в нашу службу поддержки по адресу support@lpgenerator.ru

  • Avatar
    Вася Погребняк

    Здравствуйте, я сделал фоновую изображение страницы, заливку фона блоков, а в шапке фоновое изображение не отображается - отображается фоновая заливка на всю ширину страницы... Как исправить???

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

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

    Уточните, пожалуйста, о какой странице идёт речь? По вашему описанию затруднительно представить ситуацию и дать эффективный совет по решению.

    Например, если вы использовали некое изображение как фон для страницы, но при этом создали секцию, и указали для неё собственный фон - тогда фон секции "перекроет" фон страницы. Это значит, что нужно удалить фоновое изображение для секции, и использовать элемент «блок» с точно заданной шириной.

    То же самое касается элемента «Блок» - если вы отметили галочкой свойство «На всю ширину» - тогда фон этого блока будет «перекрывать» фон страницы.

    Самым эффективным способом решения вопроса будет связаться с службой поддержки любым удобным способом, например, по почте support@lpgenerator.ru

  • Avatar
    Вася Погребняк

    Максим! Опишу подробнее... Я секцию не выделял, в правом меню у меня: внутренний фон - цвет задан, изображение нет. Вся страница - центральная часть "все секции" залиты цветом, по бокам фоновая картинка, а шапка и подвал залиты цветом и в центре и по бокам! Выделяю шапку, с права - вкладка фон есть, вкладки внутренний фон нет. Что делать?

  • Avatar
    Вася Погребняк

    Дополню... в правом меню внутренний фон стоит изображение, цвет - нет.

  • Avatar
    Вася Погребняк

    И еще! Как общий фон разбить на несколько изображений?

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

    Василий, вышлите, пожалуйста, ссылку на редактор страницы - это очень поможет в решении вопроса. Ссылка должна быть такого вида:
    http://lpgenerator.ru/var/476127/

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

    Возможно, удобнее будет перенести обсуждение в Skype? Мы на связи по будням, с 11-00 до 19-00 МСК, ник lpgenerator.

  • Avatar
    Вася Погребняк

    http://lpgenerator.ru/var/469922/# к сожалению у меня нет Skype, можно по е-мейл списаться?

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

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

    Да, конечно, у нас есть e-mail - support@lpgenerator.ru - пишите на этот адрес возникающие вопросы, и мы обязательно на них ответим.

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

    Чтобы "шапка" была голубого цвета, а фон страницы был тем изображением, которое вы выбрали - используйте инструмент "Блок", задайте ему нужный цвет или фоновую картинку, укажите ширину 960 пикселей и установите z-index меньше, чем у надписей и кнопок, чтобы блок был ниже, чем остальные элементы.

    Для примера мы изменили таким образом верхнюю часть вашей страницы:
    1) http://joxi.ru/eRbmU4wyTJDJAvNwkA8 - до изменения
    2) http://joxi.ru/yhbmU_3JTJA4CClerAw - после изменения

  • Avatar
    Оксана

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

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

    Здравствуйте, Оксана!

    В первую очередь обращу ваше внимание - для корректной работы страниц необходимо использовать для мобильных устройств тип страницы "мобильный". Ширина мобильных страниц - 320 пикселей. Для обычной (web) страницы рекомендуемая ширина - 960 пикселей.

    Обычно используется перенаправление посетителей с обычного сайта на мобильную версию, если посетитель с мобильного устройства. Подробное описание - по ссылке:
    http://lpgenerator.ru/blog/2014/04/18/obnovlenie-lpgenerator-avtomaticheskij-redirekt-na-mobilnuyu-versiyu-lendinga/

    Для более подробной консультации и изучения вашего случая нужен адрес страницы и ваш регистрационный e-mail - лучше всего, если вы сообщите эти данные на наш адрес support@lpgenerator.ru

  • Avatar
    Оксана

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

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

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

    Что касается отображения страницы: это малореально, так как большинство мобильных телефонов имеют разрешение 320х640 или 480х840 пикселей, где меньшее число - это ширина. И если у вас страница шириной в 960 пикселей, сделанная в нашем редакторе, она не сможет вместиться на экран телефона без искажений (уменьшения масштаба), причём масштаб уменьшается до состояния нечитаемости текста. Именно чтобы избежать подобной ситуации, используется мобильный редирект.

  • Avatar
    Дмитрий

    У меня исчез пункт "включить направляющие" И сетка не включается почему-то. Пробовал разные браузеры. Мак.

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

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

    Инструмент "направляющие" отключён и пока недоступен - вместо него используются три положения выравнивания элементов (по центру, слева, справа).

    Инструмент "Сетка" действует и виден как подложка страницы при перетаскивании элементов - но только если вы не установили фоновую картинку для страницы. То есть если у вас фоном для секции или страницы установлено изображение - сетка будет не видна.

    Всё это касается работы в браузере Google chrome - в Safari некоторые инструменты могут работать некорректно, поэтому не рекомендуем его использовать для работы с лендингом.

    Если возникнут какие-либо дополнительные вопросы - пишите нам на support@lpgenerator.ru - будем рады помочь!