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

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

“Якорь” (anchor)

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

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

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

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

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

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

Якорь

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

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

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

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

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

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

Ссылка якорь

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

Тип ссылки

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

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

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

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

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

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

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

Комментарии

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

    Здравствуйте, Андрей! Пожалуйста, укажите ссылку на страницу в редакторе на какой Вы делаете якорь. какая это кнопка и куда она должна прокручивать страницу?

    1. Бесплатный тестовый период предоставляется на 14 дней сразу после регистрации аккаунта.
    2. Да, когда вы перейдете на платный тариф, баннера внизу страниц больше не будет.
  • Avatar
    Андрей

    Я думал вы по логину определите мою страницу :)
    http://testlpgenerator.ru/audit_saita/ Первая кнопка упорно мотает в конец страницы, а я хотел, чтобы она отмотала к первому заголовку только.

  • Avatar
    Дмитрий

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

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

    Андрей, так происходит потому, что на странице установлен скрипт, который скроллит при нажатии на эту кнопку к лид-форме:
    http://awesomescreenshot.com/0c53a8oxb1
    Удалите его из скриптов, если хотите использовать якорь.

  • Avatar
    Андрей

    Получилось! Скрипт даже смог подправить под себя :) Все-таки плавная перемотка симпатичней, чем мгновенная перемотка.

    Хочу выразить огромную благодарность за оперативные ответы и за то, что ответ был получен не смотря на то, что рабочее время давно прошло и сейчас на часах 21.36. У многих даже платная техподдержка так оперативно не работает.
    Еще раз спасибо!

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

    Андрей, Дмитрий! Благодарим за Ваши теплые отзывы! Мы всегда рады помочь нашим пользователям.

  • Avatar
    Евгений Сидорин

    Большое спасибо!
    Все четко и понятно!

  • Avatar
    Алексей

    Добрый день. Возникли проблемы с простановкой якоря. Страница http://lpgenerator.ru/var/513422/#
    Ссылка на якорь - кнопка в самом низу страницы: "Оставить заявку". В качестве самого якоря - форма (имя, email, телефон, комментарии) голубого цвета (находится перед картой).
    Посмотрите, пожалуйста, в чём может проблема: кнопка никак не реагирует на нажатие.. страница не скроллится и остаётся неподвижной.
    спасибо

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

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

    1. Если вы хотите создать плавную прокрутку от одного элемента к другому, необходимо соблюдать несколько важных правил, одно из которых - каждый скрипт прокрутки должен быть размещён между тэгами <script>...</script>. У вас же в разделе "скрипты" были указаны в одном скрипте сразу несколько прокруток.

    2. Для кнопки "Оставить заявку" с идентификатором #block-new93 вы создали скрипт, в котором указали прокрутку к элементу с номером #block-new102
      скриншот - http://joxi.ru/_V4QVP3JTJBofQwdl2s

    При этом сам элемент с номером #block-new102 вы удалили, и прописали в кнопке "Оставить заявку" новый идентификатор #block-new145. В итоге для одной кнопки заданы два действия, причём скрипт указывает на несуществующий элемент.

    Мы исправили скрипт прокрутки - теперь нажатие на кнопку "Оставить заявку" ведёт на подложку формы, элемент #block-new145.

    Если заходите отказаться от плавного скролла - обязательно удалите скрипты.

  • Avatar
    Сергей Bizon

    Здравствуйте, у меня такой, может глупый, вопрос: а возможно ли привязать к кнопке переход по ссылке на другую страницу и одновременно якорь, ведущий к определенному участку на этой новой странице? К примеру нужно чтоб по клику на пункте меню со страницы" х", открылась страница" y", и на этой странице сразу бы якорь переносил на блок "z".

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

    Здравствуйте, Сергей! Можно. Для этого добавляете кнопку, затем вставляете в ее настройки ссылку на вторую страницу и в конце через / указываете якорь элемента. Ссылка будет иметь вид: http://domain.ru/#block-new11

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

    Здравствуйте, Сергей!

    Да, конечно, создать ссылку с якорем, ведущую с одной страницы на другую можно. Для этого просто используйте в поле "ссылка" адрес такого вида:
    http://domain2.ru#block-new11 - где domain2.ru - имя вашего домена, а #block-new11 - это идентификатор нужного вам блока.

  • Avatar
    Сергей Bizon

    Лина и Максим, большое спасибо)

  • Avatar
    Иван

    Как изменить цвет подчёркивания ссылки на якорь?

  • Avatar
    Константин Руденок

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

    Цвет шрифта ссылки совпадает с цветом подчеркивания. Если Вы хотите изменить стандартный синий цвет на какой-либо еще, то достаточно создать новый стиль css и вставить его в редакторе страницы с помощью инструмента скрипты (положение такого скрипта - Внутри тега Head).

    Например, чтобы установить цвет ссылки красным, можно воспользоваться следующим скриптом:

    <style>
    a{
    color: red;
    }
    </style>
    

    Если помимо этого, Вы хотите убрать подчеркивание ссылки, то добавьте к указанному скрипту строку - text-decoration: none;

  • Avatar
    Андрей Шишмарев

    Шикарный инструмент!!))

  • Avatar
    Сергей

    Здравствуйте! Сайт с библиотекой http://pastebin.com/fxP6kU2J заблокирован. Скажите, пожалуйста, где ее еще скачать можно?

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

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

  • Avatar
    Сергей

    Я хотел бы настроить плавный переход к якорю

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

    Для плавного перехода используйте следующее руководство из нашего блога, код скрипта можно скопировать прямо из руководства:
    http://lpgenerator.ru/blog/2014/07/04/plavnaya-prokrutka-plavnyj-skroll-celevoj-stranicy/

  • Avatar
    Сергей

    Лина, спасибо!

  • Avatar
    Кискин Георгий Константинович

    можно ли изменить название якоря block-new67 на чтото более вразумительное типа video? или adress? или как вставить свой якорь со своим названием?

  • Avatar
    Константин Руденок

    Здравствуйте, Георгий!

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

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

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

  • Avatar
    Сергей Воробьёв

    Здравствуйте!
    Если Я хочу добавить быстрые ссылки в объявления в директе, но ссылки с якорем на конкретные блоки лендинга и прикрепить к ним UTM-метку, то адрес я указываю например мойсайт.ру/#block-new132 верно?

    И в итоге адрес с UTM-меткой будет выглядеть:
    http://мойсайт.ру/?utm_source=yandex&utm_medium=cpc&utm_campaign=cid|{campaign_id}|{source_type}&utm_content=gid|{gbid}|aid|{ad_id}|{phrase_id}_{retargeting_id}&utm_term={keyword}&pm_source={source}&pm_block={position_type}&pm_position={position}#block-new132

    Правильно?

    Изменено: Сергей Воробьёв
  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

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

  • Avatar
    Сергей Воробьёв

    Максим Гуйван, спасибо за оперативность! )

  • Avatar
    роман колесниченко

    Здравствуйте! Подскажите А как библиотеку jQuery подключить?)

  • Avatar
    Сергей Мызин

    Здравствуйте, Роман.

    Вы можете подключать библиотеки через инструмент "Скрипты", в редакторе вашей страницы, указав название добавленного скрипта (название может быть любым) и нужное положение (обычно "Перед тегом

  • Avatar
    Сергей Мызин

    Здравствуйте, Роман.

    Вы можете подключать библиотеки через инструмент "Скрипты", в редакторе вашей страницы, указав название добавленного скрипта (название может быть любым) и нужное положение (обычно "Перед тегом /BODY"): http://i.imgur.com/iQqvRj4.jpg

    Изменено: Сергей Мызин