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

Якорь - перемещение на нужную часть лендинга

“Якорь” (anchor)

Источник изображения

По многочисленным просьбам наших пользователей, разработчики LPgenerator реализовали новую долгожданную функцию - “якорь” (anchor), которые позволят “переносить” посетителя в нужную часть страницы (например к определенному текстовому блоку, видео, изображению, лид-форме и т. д.). Наиболее востребована функция “якорь” для целевых страниц с большим числом прокруток, т. к. они значительно упростят навигацию по ней и повысят юзабилити.

Как настроить “якорь” (anchor) на целевых страницах?

Чтобы установить “якорь” на какой либо блок страницы нужно:

1. Кликнуть в редакторе по блоку, на который будет ссылаться “якорь” один раз (это может быть совершенно любой элемент - лид-форма, текстовый блок, кнопка, изображение и т. п.).

2. В свойствах данного элемента войти в раздел “Расширенные” и скопировать ID якоря в соответствующем разделе:

Якорь

3. Создайте объект, который будет отвечать за функцию ссылки на “якорь”. Это может быть кнопка, изображение, фрагмент текста.

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

Кнопка с якорем

Если изображение, то в меню “Свойства” вставьте ID вместо URL в пункте “Ссылка”:

Изображение с якорем

Если в качестве ссылки на якорь вы устанавливаете текст, то кликните 2 раза по текстовому редактору, выделите нужный фрагмент текста и нажмите инструмент “Ссылка”:

Ссылка якорь

и в появившемся окне вставьте ID якоря в качестве URL:

Тип ссылки

4. Сохраните изменения:

Сохранить изменения

Вот и все - “якори” настроены!

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

Прокрутку к определенному элементу с помощью якоря можно сделать плавной.

Если у вас есть какие-то пожелания или предложения по улучшению функционала редактора LPgenerator, пишите нам на support@lpgenerator.ru

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

Комментарии

  • Avatar
    Андрей

    Спасибо, очень круто!

    А как сделать плавный переход к якорю?

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

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

    Можно воспользоваться другим скриптом скролла:

     
    <script>
    jq_181('#block-new66 a').click(function(e){
    e.preventDefault();
    jq_181('body, html').animate({ scrollTop: jq_181('#block-new67').offset().top }, 1000);
    });
    </script>

    где #block-new66 a - идентификатор кнопки 
    #block-new67 - элемент, к которому скроллим 
    1000 время анимации скролла в миллисекундах (1000 мс = 1 секунда)

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

    Спасибо огромное! Вы мне очень помогли!!!

    Ах, да. Служба поддержки у Вас просто замечательная!
    Вчера оставил запрос, думал что ответите как-нибудь через неделю ( как у всех это бывает ) или вообще не ответите...

    Сегодня просыпаюсь, открываю почту и что я вижу?

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

  • Avatar
    Илья Орлов

    Добрый день! скажите, а куда вставлять скрипт который вы написали, опишите подробнее пожалуйста.
    Спасибо

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

    Здравствуйте, Илья!

    Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом <Body>. Также обратите внимание, что для его работы нужно подключение библиотеки jQuery, Подключить ее можно, добавив скрипт отсюда http://pastebin.com/fxP6kU2J Если же библиотека уже подключена на Вашей странице, повторно добавлять ее не нужно.
    Также обращаем внимание, что в скрипте есть тонкости, в зависимости от того, какие элементы инициируют скролл. Если что то не получится, напишите нам на support@lpgenerator.ru

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

    Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом Боди: http://awesomescreenshot.com/04126u5i1c

  • Avatar
    Дмитрий Башаркин

    А где я могу увидеть идентификатор кнопки? (можно скрин?) И еще вопрос: как делать что бы эти кнопки были статичны и приклеены к браузеру, а не к началу странице? (что бы пользователь листал и кнопки за ним бежали?) Спасибо.

  • Avatar
    Борис Колосов

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

    Идентификатор кнопки был показан на картинке выше: http://media.lpgenerator.ru/uploads/2012/11/16/1.png
    Вот более подробный скриншот: http://awesomescreenshot.com/0fd2ch16a1

    Для того, чтобы кнопки "бежали за клиентом", лучше всего создать статичное меню по нашему руководству: https://lpgenerator.zendesk.com/hc/ru/articles/201661433-%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-

  • Avatar
    Александр Трауш

    Доброго времени суток! Инструмент работает отлично, очень радует простота его внедрения. Но у меня так и не получается настроить плавное перемещение по страничке как например реализовано это здесь http://lpgenerator.ru/store/preview/227/
    Выше говориться о том что реализовать плавный переход вообще нет возможности, потом тут же приводиться скрипт который якобы решает эту задачу и так же вскользь упоминается о некой библиотеки.
    Можно услышать подробную пошаговую инструкцию как добиться эффекта из моего примера.
    Я попытался сделать как описывает Лина Малькова, но ничего не получилось. Перемещение происходит мгновенно, как прыжок, без анимации.

  • Avatar
    Дмитрий

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

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

    У меня ссылка по кнопке не работает, не переносит в нужное место... Что не так?
    1. Скопировал ID якорь секции
    2. Создал кнопку, прописал ссылку, название
    Кнопка не работает

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

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

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

    Спасибо!

  • Avatar
    Денис Шлойда

    Добрый вечер.
    "Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом . Также обратите внимание, что для его работы нужно подключение библиотеки jQuery, Подключить ее можно, добавив скрипт отсюда http://pastebin.com/fxP6kU2J Если же библиотека уже подключена на Вашей странице, повторно добавлять ее не нужно."

    Подскажите как подключить библиотеку? Нужно тоже вставлять её в скрипты перед тегом Body? А потом добавлять скрипт по скроллу?

  • Avatar
    Денис Шлойда

    Ещё вопрос. Как убрать линию, которая подчеркивает текст (текст является ссылкой)?
    СПасибо.

  • Avatar
    Алена Балакина

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

    1) Сперва нужно добавить скрипт библиотеки. Выбрать положение скрипта: "После тега BODY". После этого добавлять скрипт для скролла.

    2) Для этого нужно прописать CSS для ссылок. Если не получится самостоятельно, напишите нам по адресу support@lpgenerator.ru с указанием страницы, на которой нужно убрать подчеркивание для ссылок.

  • Avatar
    Екатерина

    В просмотре не показывает переход по внутренним ссылкам. Это нормально?

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

    Здравствуйте, Екатерина! Пожалуйста, уточните: при настройке якоря на просмотре не происходит переход к якорю? Укажите ссылку на страницу в редакторе, а также на какие элементы настроен якорь, чтобы мы могли проверить.
    Рекомендуем открывать просмотр страницы в новой вкладке браузера (правой кнопкой мыши по кнопке"Просмотр" в редакторе и выбрать "Открыть в новой вкладке").

  • Avatar
    Екатерина

    http://lpgenerator.ru/var/360126/
    Кнопки в меню настроены на переход на блоки сайта. Сделала все по инструкциям но мало того, что ссылки не работают, так еще и меню "съезжает" влево (с этим тоже помогите, пожалуйста).

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

    Вы указали в качестве якорей id секций, что неверно. Укажите любой другой элемент, например, Id блока или текста, тогда якорь будет работать.
    Проблема с блоком статичного меню устранена: http://awesomescreenshot.com/0092rgjt56 Вам не нужно было указывать дополнительные галочки в меню справа для этого блока.

  • Avatar
    Екатерина

    Спасибо, Лина. Есть еще вопрос. Как сделать так, чтобы еще плюс один элемент кривых линий (волны) двигались вместе с верхним блоком меню?

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

    К сожалению, готового решения для этого нет, поскольку блок с волной у Вас добавлен через инструмент HTML. Вы можете обратиться в отдел верстки по адресу verstka@lpgenerator.ru по этому вопросу.

    Альтернативный вариант: установить изображение с волной для одного блока с прозрачным фоном и следующими параметрами:
    http://awesomescreenshot.com/0982rh9sf8
    Далее добавить еще один блок сверху и залить его фон нужным цветом:
    http://awesomescreenshot.com/0ea2rha1b7
    А затем прописать id обоих блоков в скрипте для статичного меню:
    http://awesomescreenshot.com/0f82rhabd0

  • Avatar
    Александр

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

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

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

    Указывайте якорь в самом конце объявления, то есть #block-new15 в самом конце вашей ссылки, например:

    moy-landing.ru/?ch=ya#block-new15 -

    где #block-new15 - это идентификатор вашего "якоря".

  • Avatar
    Александр

    Спасибо

  • Avatar
    Дмитрий

    Все сделал как описано, якорь на текст, текст на якорь - ничего не работает

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

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

    Уточните, пожалуйста, адрес страницы, на которой вы настраиваете «якорь» - по описанию, которое вы предоставили, сложно догадаться, как именно вы настроили переходы по лендингу.

    Также вам может быть полезен скрипт "плавный скролл" - для прокрутки страницы:
    http://lpgenerator.ru/blog/2014/07/04/plavnaya-prokrutka-plavnyj-skroll-celevoj-stranicy/

    Ещё один вариант решения - свяжитесь со службой поддержки любым доступным вам способом, например по почте support@lpgenerator.ru - и укажите подробности, как вы настраиваете «якорь».

  • Avatar
    Дмитрий

    Добрый день! Страница эта http://lpgenerator.ru/var/408522/preview/. Якорь сделал на слово "продукция" в самом верху с ссылкой на "Типы профильных систем"

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

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

    Есть несколько замечаний:
    1. Рамки текстовых блоков, с помощью которых сделано меню на вашей странице, перекрывают друг друга. В результате невозможно нажать по определённому пункту "меню" - http://joxi.ru/7JrkU4wyTJDZAqa0sm4 - это главная причина проблемы.

    1. Мы бы рекомендовали использовать кнопки в качестве элемента для запуска прокрутки. Такую кнопку мы настроили вместо пункта "главная" на вашей странице. Эта кнопка ведёт к тексту над таймером. Фон кнопки - светло-серый, шрифт - чёрный, ориентируйтесь на скриншот: http://joxi.ru/ZJ3kU4wyTJCiCCBy0E8

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

  • Avatar
    Андрей

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

    И раз уж я здесь, еще два вопроса: 2) нет ли у вас бесплатного какого-нибудь периода в 14 дней или месяц, в течении которых я мог бы проверить все имеющиеся возможности?
    3) Пропадет ли после оплаты надпись внизу страницы: "Этот лендинг пейдж создан на технологии Lpgenerator"?

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