По многочисленным просьбам наших пользователей, разработчики LPgenerator реализовали новую долгожданную функцию - “якорь” (anchor), которые позволят “переносить” посетителя в нужную часть страницы (например к определенному текстовому блоку, видео, изображению, лид-форме и т. д.). Наиболее востребована функция “якорь” для целевых страниц с большим числом прокруток, т. к. они значительно упростят навигацию по ней и повысят юзабилити.
Как настроить “якорь” (anchor) на целевых страницах?
Чтобы установить “якорь” на какой либо блок страницы нужно:
1. Кликнуть в редакторе по блоку, на который будет ссылаться “якорь” один раз (это может быть совершенно любой элемент - лид-форма, текстовый блок, кнопка, изображение и т. п.).
2. В свойствах данного элемента войти в раздел “Расширенные” и скопировать ID якоря в соответствующем разделе:
3. Создайте объект, который будет отвечать за функцию ссылки на “якорь”. Это может быть кнопка, изображение, фрагмент текста.
Если вы создали в качестве ссылки на якорь кнопку, то вставьте ID якоря, который вы скопировали, вместо ссылки в ее настройках:
Если изображение, то в меню “Свойства” вставьте ID вместо URL в пункте “Ссылка”:
Если в качестве ссылки на якорь вы устанавливаете текст, то кликните 2 раза по текстовому редактору, выделите нужный фрагмент текста и нажмите инструмент “Ссылка”:
и в появившемся окне вставьте ID якоря в качестве URL:
4. Сохраните изменения:
Вот и все - “якори” настроены!
С помощью инструмента якорь можно создать статичное меню, которое будет при прокрутке страницы всегда находиться сверху.
Прокрутку к определенному элементу с помощью якоря можно сделать плавной.
Если у вас есть какие-то пожелания или предложения по улучшению функционала редактора LPgenerator, пишите нам на support@lpgenerator.ru
Спасибо, очень круто!
А как сделать плавный переход к якорю?
Здравствуйте, Андрей! К сожалению, плавный переход к якорю настроить нельзя.
Можно воспользоваться другим скриптом скролла:
<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 секунда)
Спасибо огромное! Вы мне очень помогли!!!
Ах, да. Служба поддержки у Вас просто замечательная!
Вчера оставил запрос, думал что ответите как-нибудь через неделю ( как у всех это бывает ) или вообще не ответите...
Сегодня просыпаюсь, открываю почту и что я вижу?
А вижу я то, что ответ пришел не то, что сегодня, он пришел еще вчера, причем через 20 минут после моего запроса... Потрясающий сервис!!! Спасибо Вам!
Добрый день! скажите, а куда вставлять скрипт который вы написали, опишите подробнее пожалуйста.
Спасибо
Здравствуйте, Илья!
Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом <Body>. Также обратите внимание, что для его работы нужно подключение библиотеки jQuery, Подключить ее можно, добавив скрипт отсюда http://pastebin.com/fxP6kU2J Если же библиотека уже подключена на Вашей странице, повторно добавлять ее не нужно.
Также обращаем внимание, что в скрипте есть тонкости, в зависимости от того, какие элементы инициируют скролл. Если что то не получится, напишите нам на support@lpgenerator.ru
Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом Боди: http://awesomescreenshot.com/04126u5i1c
А где я могу увидеть идентификатор кнопки? (можно скрин?) И еще вопрос: как делать что бы эти кнопки были статичны и приклеены к браузеру, а не к началу странице? (что бы пользователь листал и кнопки за ним бежали?) Спасибо.
Здравствуйте, Дмитрий!
Идентификатор кнопки был показан на картинке выше: 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-
Доброго времени суток! Инструмент работает отлично, очень радует простота его внедрения. Но у меня так и не получается настроить плавное перемещение по страничке как например реализовано это здесь http://lpgenerator.ru/store/preview/227/
Выше говориться о том что реализовать плавный переход вообще нет возможности, потом тут же приводиться скрипт который якобы решает эту задачу и так же вскользь упоминается о некой библиотеки.
Можно услышать подробную пошаговую инструкцию как добиться эффекта из моего примера.
Я попытался сделать как описывает Лина Малькова, но ничего не получилось. Перемещение происходит мгновенно, как прыжок, без анимации.
Александр, здравствуйте! Напишите нам на support@lpgenerator.ru, в письме укажите суть проблемы и страницу, на которой не получается реализовать переход. Посмотрим скрипты, подскажем, что неправильно сделали.
У меня ссылка по кнопке не работает, не переносит в нужное место... Что не так?
1. Скопировал ID якорь секции
2. Создал кнопку, прописал ссылку, название
Кнопка не работает
Здравствуйте! В качестве якоря используйте любой другой элемент, кроме секции. На ID секции якорь срабатывать не будет.
Спасибо!
Добрый вечер.
"Скрипт плавного скролла нужно вставить на страницу через инструмент "Скрипты" перед тегом . Также обратите внимание, что для его работы нужно подключение библиотеки jQuery, Подключить ее можно, добавив скрипт отсюда http://pastebin.com/fxP6kU2J Если же библиотека уже подключена на Вашей странице, повторно добавлять ее не нужно."
Подскажите как подключить библиотеку? Нужно тоже вставлять её в скрипты перед тегом Body? А потом добавлять скрипт по скроллу?
Ещё вопрос. Как убрать линию, которая подчеркивает текст (текст является ссылкой)?
СПасибо.
Здравствуйте!
1) Сперва нужно добавить скрипт библиотеки. Выбрать положение скрипта: "После тега BODY". После этого добавлять скрипт для скролла.
2) Для этого нужно прописать CSS для ссылок. Если не получится самостоятельно, напишите нам по адресу support@lpgenerator.ru с указанием страницы, на которой нужно убрать подчеркивание для ссылок.
В просмотре не показывает переход по внутренним ссылкам. Это нормально?
Здравствуйте, Екатерина! Пожалуйста, уточните: при настройке якоря на просмотре не происходит переход к якорю? Укажите ссылку на страницу в редакторе, а также на какие элементы настроен якорь, чтобы мы могли проверить.
Рекомендуем открывать просмотр страницы в новой вкладке браузера (правой кнопкой мыши по кнопке"Просмотр" в редакторе и выбрать "Открыть в новой вкладке").
http://lpgenerator.ru/var/360126/
Кнопки в меню настроены на переход на блоки сайта. Сделала все по инструкциям но мало того, что ссылки не работают, так еще и меню "съезжает" влево (с этим тоже помогите, пожалуйста).
Вы указали в качестве якорей id секций, что неверно. Укажите любой другой элемент, например, Id блока или текста, тогда якорь будет работать.
Проблема с блоком статичного меню устранена: http://awesomescreenshot.com/0092rgjt56 Вам не нужно было указывать дополнительные галочки в меню справа для этого блока.
Спасибо, Лина. Есть еще вопрос. Как сделать так, чтобы еще плюс один элемент кривых линий (волны) двигались вместе с верхним блоком меню?
К сожалению, готового решения для этого нет, поскольку блок с волной у Вас добавлен через инструмент HTML. Вы можете обратиться в отдел верстки по адресу verstka@lpgenerator.ru по этому вопросу.
Альтернативный вариант: установить изображение с волной для одного блока с прозрачным фоном и следующими параметрами:
http://awesomescreenshot.com/0982rh9sf8
Далее добавить еще один блок сверху и залить его фон нужным цветом:
http://awesomescreenshot.com/0ea2rha1b7
А затем прописать id обоих блоков в скрипте для статичного меню:
http://awesomescreenshot.com/0f82rhabd0
как сделать так чтобы я мог указать свой якорь как ссылку в объявлении в директе?
Здравствуйте, Александр!
Указывайте якорь в самом конце объявления, то есть #block-new15 в самом конце вашей ссылки, например:
moy-landing.ru/?ch=ya#block-new15 -
где #block-new15 - это идентификатор вашего "якоря".
Спасибо
Все сделал как описано, якорь на текст, текст на якорь - ничего не работает
Здравствуйте, Дмитрий!
Уточните, пожалуйста, адрес страницы, на которой вы настраиваете «якорь» - по описанию, которое вы предоставили, сложно догадаться, как именно вы настроили переходы по лендингу.
Также вам может быть полезен скрипт "плавный скролл" - для прокрутки страницы:
http://lpgenerator.ru/blog/2014/07/04/plavnaya-prokrutka-plavnyj-skroll-celevoj-stranicy/
Ещё один вариант решения - свяжитесь со службой поддержки любым доступным вам способом, например по почте support@lpgenerator.ru - и укажите подробности, как вы настраиваете «якорь».
Добрый день! Страница эта http://lpgenerator.ru/var/408522/preview/. Якорь сделал на слово "продукция" в самом верху с ссылкой на "Типы профильных систем"
Здравствуйте, Дмитрий!
Есть несколько замечаний:
1. Рамки текстовых блоков, с помощью которых сделано меню на вашей странице, перекрывают друг друга. В результате невозможно нажать по определённому пункту "меню" - http://joxi.ru/7JrkU4wyTJDZAqa0sm4 - это главная причина проблемы.
Мы бы рекомендовали использовать кнопки в качестве элемента для запуска прокрутки. Такую кнопку мы настроили вместо пункта "главная" на вашей странице. Эта кнопка ведёт к тексту над таймером. Фон кнопки - светло-серый, шрифт - чёрный, ориентируйтесь на скриншот: http://joxi.ru/ZJ3kU4wyTJCiCCBy0E8
Если вы всё же хотите использовать не кнопки, а текст, тогда уменьшите размеры текстовых блоков, чтобы они не перекрывали друг друга. Затем двойным щелчком откройте редактор этой надписи, и далее настраивайте по инструкции.
Например, на вашей странице мы исправили ссылку "контакты" - теперь она срабатывает корректно и прокручивает к соответствующему разделу.
Добрый день, у меня почему-то кнопка игнорирует указанные якоря и упорно отматывает в самый конец страницы. Не подскажите, что я могу делать не так?
И раз уж я здесь, еще два вопроса: 2) нет ли у вас бесплатного какого-нибудь периода в 14 дней или месяц, в течении которых я мог бы проверить все имеющиеся возможности?
3) Пропадет ли после оплаты надпись внизу страницы: "Этот лендинг пейдж создан на технологии Lpgenerator"?