Ответы
ВLanding Page - Секции
Здравствуйте. В этом видео я расскажу вам о секциях. Секции это основной строительный элемент каждого лендинг пейдж. Добавляя другие элементы, мы можем их добавить только на секцию. Если мы попробуем добавить его за пределы секции, он не будет добавлен на лендинг пейдж. С помощью секций можно разделять логические блоки на лендинг пейдж. Добавлять секции можно из левой панели редактора наверх либо вниз уже существующей секции. Добавляя секцию, нам будет предложено выбрать одну, две, три или четыре колонны. Эти колонны имеют значение при редактировании в мобильном виде. Об этом мы расскажем в следующем видео.
Изменить размер секции можно перетягиванием специального курсора или с помощью расширенных опций. Установим длину секции на 1500 пикселей. Для того, чтобы изменить длину вашего лендинг пейджа вы можете растягивать длину каждой секции либо добавлять дополнительные секции. Секции идеально подходят для того, чтобы добавить фон на лендинг пейдж. Выделяем секцию, выделяем опции виджета, выбираем раздел «Фон», включаем его. Здесь мы можем задать цвет фона, включить градиент либо загрузить собственное изображение. Также здесь есть опция - растянуть до максимальной ширины, на весь экран либо на рекомендованную ширину для установления элементов.
ВLanding Page - Установка Лендинг-пейджа
Здравствуйте. В этом видео я расскажу вам об установках лендинг пейджа. Зайти в раздел «Редактирование установок лендинг пейджа» можно в правом верхнем углу редактора под иконкой шестеренки. Итак, здесь мы видим несколько разделов установок лендинг пейджа. Первый раздел, который мы видим в установках, это «SEO». Здесь вы можете ввести титул вашей страницы, ключевые слова, а также добавить описание. В разделе «Статистика» можно ввести код Google Analytics либо Яндекс.Метрики. В «Ремаркетинге» также добавляется код ремаркетинга Google. Закладка «Facebok» отвечает за отображение страницы-закладки в Facebok. Здесь вы можете ввести заголовок, который будет виден в социальной сети, а также описание страницы. В разделе «Другое» вы можете выбрать язык вашего лендинг пейджа. Он может отличаться от языка, в котором показывается ваш редактор. Именно в этом языке будут отображаться специальные сообщения для посетителей вашей страницы. Здесь же вы можете загрузить иконку страницы - Favikon. Фавикон - это миниатюра страницы, которая видна в закладке в самом верху. Раздел «Политика конфиденциальности» позволяет вам спрятать политику конфиденциальности, поставить собственную ссылку или текст. В «Пользовательских стилях» вы можете добавить код CSS на лендинг пейдж и страницу благодарности. Пользовательский javascript позволяет вам добавить в специальные поля собственный код, который может добавить специальные визуальные эффекты на вашу страницу. В разделе «Чат» вы также можете добавить код javascript онлайн-консультанта на ваш лендинг-пейдж. В следующих видео-инструкциях вы узнаете более подробную информацию об отдельных элементах редактора.
ВLanding Page - Опции виджета
Здравствуйте. В этом видео я расскажу вам о расширенных установках каждого элемента. Расширенные установки включаются при выделении определенного элемента, находятся они под соответствующей иконкой «Опции виджета». Как вы можете увидеть расширенные опции для каждого из элементов - разные. Сейчас мы выбираем виджет «Кнопка». Как вы видите, его установки отличаются от установок виджета «Текст». То же самое происходит с виджетом «Ячейка». Установки текста предполагают под собой ID-элемента (который будет вам полезен при создании кнопки якоря), класс (который также используется при прописывании JAVA-скрипта). Здесь вы можете обозначить видимость данного элемента в разных видах - компьютерном, планшетном и смартфонном. Далее вы можете изменить размер текста и его положение, а также тень.
При выделении виджета «Кнопка» мы переходим к собственным установкам кнопки. Здесь нам доступны кроме прочего цвет, границы и округление углов. Выбирая виджет «Ячейка» мы также можем изменить границы, округление углов, тень этого элемента и выбрать его ID. Сейчас я выбираю виджет «Ячейка», чтобы показать вам, как изменить его размер и позицию в расширенных установках. Мы видим, как изменяется размер самой ячейки, также можно изменить ее положение. Изменять виджеты можно также перетаскиванием с помощью левой кнопки мыши, также перетаскиванием благодаря специальному курсору. При редактировании кнопки вы также можете выбрать ее шаблон и вставить ссылку, на которую будет переводить данная кнопка. При редактировании текста у вас будет возможность выбрать шрифт, размер текста и его цвет.
ВLanding Page - Основы редактирования
Здравствуйте. В этом видео я расскажу вам об основах работы в редакторе lendingi.ru. Итак, мы находимся в редакторе, в одном из выбранных в нашей галлерее шаблонов. В левой стороне мы видим панель с виджетами. Каждый из этих виджетов можно добавить на лендинг пейдж функцией перетаскивания. В верхней части редактора представлена дополнительная панель с вспомогательными опциями. С правой стороны находятся расширенные опции, которые доступны после выделения какого-либо элемента. Также слои, список всех элементов, доступных на лендинг-пейдже и установки самого лендинг-пейджа. В левом верхнем углу находится кнопка выхода из редактора, которая вернет нас к панели управления лендинг пейджем. Далее по порядку есть кнопка, которая возвращает последнюю сохраненную версию, кнопка отмены действия либо кнопка повтора последнего совершенного действия. Кнопка «Изменить слои», которая помогает изменить положение пересекающихся между собой элементов, кнопка дублирования, которая также доступна под правой кнопкой мыши при выделении элемента. Если на лендинг пейдже находится кнопка «Купить» либо форма лидогенерации, вам также будет доступна кнопка благодарности, на которую попадает пользователь после совершения желаемого действия. Ее также необходимо редактировать. В верхней панели также доступны опции предпросмотра, которые покажут, как лендинг пейдж будет выглядеть опубликованным. Обращаю ваше внимание, что не все элементы активны в опции предпросмотра. Такие элементы, как «Видео» и «Кнопки» не показываются и не нажимаются в опции предпросмотра. Кнопка «Сохранить» позволяет сохранить лендинг-пейдж и все сделанные на нем изменения в любой стадии без публикации данного лендинг пейджа. Кнопка «Опубликовать» сохраняет последние изменения на лендинг пейдже, а также делает их доступными онлайн. Ваш лендинг пейдж будет опубликован под случайно выбранным адресом. Изменить домен вы можете следующим шагом.
Также при редактировании каждого лендинг пейджа у вас есть возможность добавить. Это может быть вид для планшета или для страницы-закладки на Facebook, или для смартфона и мобильного телефона. Обращаю ваше внимание, что при добавлении вида планшета или мобильного телефона вам нужно самостоятельно отредактировать элементы, находящиеся в нем. Все изменения или перемещения элементов должны быть в рамках одной секции. В редакторе также доступен центр помощи, где вы можете обратиться к нашей базе знаний, почитать и посмотреть инструкции, написать о проблеме в нашу техническую поддержку, посмотреть обучающий материал и дополнительные горячие клавиши. Для того чтобы узнать, как работать с другими элементами в редакторе зайдите в нашу базу знаний и обратитесь к следующим инструкциям.
ВLanding Page - Ячейки
Здравствуйте. Это видео расскажет вам о том, как эффективно работать с ячейками на лендинг пейдж. Ячейки это элементы, которые позволяют поделить лендинг пейдж на визуальные части. Благодаря эффективному использованию, с помощью ячеек можно выделить отдельные группы элементов, что позволяет увеличить конверсию на лендинге.
Добавляются ячейки на лендинг пейдж перетаскиванием и редактируются в правой панели редактора. Здесь вы можете выбрать цвет ячейки, загрузить собственное изображение, также обозначить границы, округление углов и тень. В разделе цвета вы также можете выбрать прозрачность ячейки, что позволит создавать подкладку, например, под текст, на цветном фоне. Сейчас я добавлю фон для секций, чтобы вы могли увидеть, как выглядит соответствующая ячейка. Сейчас мы скопируем этот бокс. На одном из них разместим форму, а на другом - текст. Изменять размер ячеек очень легко. Это можно делать, как на самой ячейке, так и с помощью расширенных опций.
Сюда мы добавляем текст, а в эту ячейку мы добавим форму. Такое размещение ячеек помогает сконцентрировать внимание пользователей на тексте и на ячейке. Для примера я покажу вам, как будут выглядеть данные текстовой формы без ячеек. Я выделяю ячейку, перехожу в расширенные установки и отключаю ее. Разница очевидна. После внесения необходимых изменений не забудьте сохранить и опубликовать ваш лендинг пейдж.
ВLanding Page - Текст
Редактировать и добавлять текст на ваш лендинг пейдж очень просто благодаря интуитивному редактору «Лендинги». Для начала необходимо перенести виджет текста из левой панели редактора на ваш лендинг пейдж, выделить его двойным кликом и вписать ваш текст. Для того чтобы включить опцию редактирования, достаточно кликнуть на виджет двойным кликом либо выделить его и включить редактирование с помощью специальной иконки. В этом случае появляется панель форматирования текста, где вы можете сделать текст жирным, курсивом, подчеркнутым, перечеркнутым, добавить специальную ссылку, выбрать размещение текста - его шрифт, размер и цвет. Для того, чтобы показать вам как работать с текстом, я скопирую наш виджет несколько раз, чтобы показать вам все возможные варианты редактирования. Итак, для того, чтобы отредактировать текст или его часть, нужно выделить необходимое слово или часть текста. В этом случае это будет курсив. Здесь мы также изменим цвет всего текста. Для этого я обозначила целый текст в виджете. Здесь также можно изменять шрифт. И как пример покажу вам также, как добавить ссылку для текста. Нажимаем кнопку «Редактирование», затем «Гиперссылка». Здесь вы можете указать ссылку отдельного элемента для создания кнопок-якорей на лендинг пейдже. В этом случае при нажатии на текст пользователь будет перенесен к нужному элементу или к нужной части текста лендинг пейджа. В данном случае я введу пример ссылки. Здесь же выбирается цвет ссылки. И публикуем лендинг пейдж для того чтобы сохранить сделанные изменения и также увидеть их на опубликованном лендинге.
Далее в расширенных установках элемента, в данном случае виджета «Текст», мы можем увидеть ID-элемента, если мы хотим, чтобы к этому элементу был перенесен пользователь, можем добавить класс элемента, видимость в определенных мобильных видах. Здесь вы можете выбрать высоту текста, а также размер между буквами и добавить тень текста. После внесения изменений на лендинг пейдж, не забудьте его сохранить и опубликовать.
ВLanding Page - Формы
Формы - очень важный элемент на лендинг пейдже. Они позволяют собирать лиды - контактные данные ваших потенциальных клиентов. Для того, чтобы добавить форму на лендинг пейдж, достаточно перетащить ее из левого меню в нашем редакторе. Далее кликнуть форму дважды, чтобы открыть ее редактирование. В разделе «Шаблоны» вы можете выбрать шаблон вашей формы. Доступны как вертикальная, так и горизонтальная формы. Обращаю ваше внимание, что максимальное количество полей в горизонтальной форме - два, плюс кнопка на форме лидогенерации. В случае выбора вертикальной формы, количество полей не ограничено. Однако помните о том, что слишком большое количество полей может оттолкнуть посетителей от вашей формы, что снизит конверсию. Мы выбираем один из шаблонов и переходим к разделу «Подгонка». В данном разделе вы можете отредактировать количество полей, их содержание, а также кнопку на форме. Я добавлю несколько базовых полей, например, такие как «Имя», оно у нас уже есть - это текст. Далее я добавляю телефон, e-mail и чек бокс. Для того чтобы перейти к редактированию отдельных полей, достаточно нажать на иконку шестеренки напротив каждого поля. Здесь вы можете назначить поле как обязательное, ввести временный текст, который будет отражаться в поле и убрать название самого поля, чтобы оно не отображалось в форме.
Кнопка выбора может служить, например, к принятию политики конфиденциальности фирмы. В данном случае вам необходимо будет написать соответствующий текст, и вы увидите при получении лида, обозначил ли пользователь данную опцию. После чего я изменю название самой кнопки. Далее мы переходим к разделу «Интеграция». Этот раздел отвечает за то, куда будут попадать ваши лиды. По умолчанию они отправляются на e-mail, по которому зарегистрирован ваш аккаунт в лендингах. Здесь же в опции «Отправить на e-mail» вы можете ввести дополнительный e-mail или изменить ваш существующий e-mail. Здесь вы можете выбрать вместо отправки на e-mail одну из существующих интеграций: с системами CRM или e-mail-рассылок. Возвращаясь к разделу «Вид» вы можете редактировать форму и дальше, настраивая ее по своему вкусу в базовых и продвинутых установках. Далее мы переходим к главным установкам формы. Здесь вы можете ввести название формы. Именно оно будет отображаться как название письма, с которым приходит лид. Здесь же вы можете добавить код конверсии Google. В разделе автоответчик можно добавить текст сообщения, e-mail отправителя и тему сообщения. Это сообщение будет автоматически отправляться пользователю, после того, как он заполнил форму. После внесения необходимых изменений не забудьте нажать кнопку «Сохранить и закрыть», а также сохранить сам лендинг пейдж.
ВLanding Page - Мобильные виды
В этом видео мы поговорим с вами о том, как настраивать мобильные виды. Мобильные виды - очень важный элемент каждого лендинг пейджа. В нашем редакторе при выборе готового шаблона мобильные виды уже настроены. Сегодня я покажу вам, как самостоятельно настроить мобильные виды для лендинг пейджа, если вы создаете его с пустого экрана. Итак, чтобы добавить мобильный вид достаточно нажать соответствующую кнопку вверху вашего редактора и выбрать соответствующий вид. Мы сегодня рассмотрим версию для мобильных телефонов.
В этом случае лендинг пейдж будет открываться во всех браузерах на экранах шириной меньше 700 пикселей. Под эту ширину попадают большинство современных смартфонов. Помогают редактированию лендинг пейджей в мобильных видах секции. Для этого стоит добавлять необходимое количество секций на лендинг пейдж вместо того, чтобы удлинять одну и ту же секцию. Итак, начнем мы, например, с добавлением лого на наш лендинг пейдж. Оно будет находиться в первой секции.
Для того чтобы добавить лого мы выбираем виджет «Изображение», выбираем нужное нам изображение. В данном случае лого прозрачное, поэтому нам необходимо задать фон данной секции. И уменьшим секцию в соответствии с размерами лого. Далее добавляем следующую секцию на границе с уже существующей. При выборе секций у нас существует выбор количества колонн данной секции. Колонны показывают, как именно будет разделяться данная секция в мобильном виде. Итак, если вы выберите две колонны, соответственно одна из них будет под другой в мобильном виде.
Для примера я сейчас выберу секцию с тремя колоннами. Изменим размер секции. Итак, в первую колонку мы добавляем текст, во второй будет ячейка и в третьей - кнопка. После добавления этих элементов мы можем посмотреть, как будет выглядеть эта секция в мобильном виде. Итак, в данном случае будет необходимо редактирование. Напоминаю вам, что редактирование мобильных видов может происходить только в рамках одной секции. Не рекомендуется переносить элементы из одной секции в другую. В данном случае я изменю размер первой секции, оставив ее для лога, и здесь необходимо будет слегка отредактировать элементы вручную. Итак, при выборе секций и колонн мы можем увидеть, что в мобильном виде эти секции располагаются в вертикальном виде, тогда как в обычном виде для компьютера, они располагаются горизонтально.
Для того чтобы максимально облегчить себе редактирование в мобильном виде стоит создавать простые лендинг пейджи и сохранять порядок секций. Для того, чтобы скрыть какой-то элемент в мобильном виде, стоит обозначить это на главном виде, выбрав элемент. Мы выберем элемент «Ячейка», перейдем к его расширенным установкам. И здесь у нас есть кнопка видимость. В данном случае мы отключаем видимость в смартфоне. При редактировании основной версии лендинг пейджа изменения также сохраняются также и в версии для смартфона. Приведем пример. В данном случае у нас был бокс не виден - джет-ячейка в мобильном виде. Мы делаем его обратно видимым и изменим, например, его цвет. Переходим в мобильный вид и здесь мы можем увидеть, что цвет, действительно, изменился. Если мы вносим изменения в мобильную версию, то данные изменения не будут отображаться в версии для компьютера. Исключения составляют изменения, которые совершаются за пределами секций или за пределами колонн. Например, вы переносите элементы из одной колонны в другую или из одной секции в другую. Могу вам здесь показать, что при изменении цвета в основном виде, цвет не меняется. Такие изменения, например, удобно применять при изменении текста.
В случае если на основной версии текст достаточно длинный, здесь вы можете его сохранить, чтобы он корректно отображался в мобильной версии. Итак, для создания мобильной версии лендинг пейджа рекомендуем вам хорошо продумать схему расположения элементов на лендинг пейдже, для начала создать компьютерную версию и после этого перейти к редактированию мобильной версии.