Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

Якорь меню — виджет Elementor

При создании Landing Page или одностраничника, посадочной страницы, документации или сайта с длинным содержимом, нам необходимо как то передвигаться по сайту, а точнее по его контенту. Для этого придуманы специальные закладки контента, а в веб строительстве такие закладки называются "Якорь" и "Якорная ссылка". При нажатии на такую ссылку, мы переходим в определенную часть страницы.  Если это страница текущая, то мы перейдем к участку текста мгновенно.

Для общего развития изучения html, якорь это просто уникальное имя для определенного блока. Обычно в качестве этого имени (якоря) используют id блока  или элемента.  Вот например даже параграф может быть якорем.

<p id="yakor-saita">Про якорь сайта</p>

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

www.moy-sait.ru/kak-sozdat-sait#yakor-saita

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

А как быть с якорями при создании сайта в конструкторе ?  А в конструкторе сайта это еще проще, ведь для этого придуман виджет, который называется "Якорь меню". Это не визуальный виджет для сайта, но для режима редактирования он вполне визуален.

якорь меню в конструкторе сайта

На изображении выше показан виджет, когда мы его расположили на страницу конструктора. У виджета нет настроек, кроме поля для ввода названия якоря.настройки якоря в виджете elementor конструктор сайта

Многие задаются вопросом, а зачем его использовать когда можно задать определенной колонке или секции id и его использовать? А ответ просто. Представьте страницу из 10 разделов. В каждый блок вы добавили id. Вернулись к сайту через неделю и уже не помните где поменять id блока и необходимо просматривать каждый блок или виджет в отдельности.

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

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты

Якорь меню — виджет Elementor: 21 комментарий

    1. Да, виджет как бы закладка. Если сделать без его, то работать будет, но при большой странице типа лендинг, вам будет сложно запомнить где нужный id. А так все просто, посмотрели на виджет и узнали.

  1. Здравствуйте. Подскажите пожалуйста, почему елементор не отображает в адресной строке сам якорь и как сделать чтоб отображал? То есть, при при нажатии на якорь в обычном html коде в адресной строке отображается site.com/#link, а при создании на елементоре его нет, только домен. Спасибо

    1. Здравствуйте. Дело в том, что для плавной навигации при нажатии на якорь используется js код , которые не меняет ничего в адресной строке, так как это никому не нужно.

      1. Увы, но нужно.. Дело в том, что заказчику не нравится что при нажатии в браузере кнопки «назад» (и на телефоне тоже) человек уходит с сайта. То что тут проблема в js я понял методом тыка. Нашел функцию в frontend.min.js (поиск по a[href*=»#»]) при удалении которой все отображается в адресной строке, но при этом перестали работать табы и слайдеры. Ладно, буд разбираться дальше.. Спасибо за ответ

  2. Забыл добавить, навигация сделана через меню вордпресса, а не просто html-кодом

  3. Доброго дня)
    Такой вопрос: сайт состоит из трех страниц, одна из них — с якорными ссылками. При переходе по ссылке меню на якорь цвет ссылки на активной странице становится активным и перестает реагировать на наведение, т.е. нормальные кнопки белые и меняют цвет на оранжевый при наведении, а вот эти постоянно оранжевые.

    1. Здравствуйте. От данного виджета это не зависит. Такое поведение закладывается в стилях сайта. А именно в вашем случаи в jet-menu. И именно у них (у разарботчика плагина) необходимо запросить поддержки. Но вообще, у вас же ссылка с якорем это почти ссылка на основную страницу т.е она является текущей и поэтому подсвечивается в активном состоянии.

      Как решение, вам нужно придумать стили, например такие

      .jet-menu-title:hover { color: #E2781C;}
      .jet-menu-title { color: #fff;}

      .

  4. А если нужно, чтобы при нажатии на кнопку Позвонить совершался звонок? Все работает только если прописать якорную ссылку в виджете «кнопка» в графе текст (вкладка содержание). Но тогда смещается сама кнопка. То есть Слово Позвонить работает, но находится за пределом кнопки, которая остается пустой рядышком. Как это исправить?

    1. А зачем прописывать якорную ссылку в виджете кнопка? У кнопки есь поле для ввода обычной ссылке втч и в формате tel для звонков. И не понятно, причем тут виджет «Якорь меню» и ваша кнопка?

  5. Добрый вечер. Подскажите как называется область на странице вверху где пишется путь страниц, например Главная-первая страница- третья страница; что бы перейти на главную не надо нажимать два раза назад, а просто на Главную страницу жмеш и переходиш? Когда отображается весь путь.

  6. У меня вопрос по поводу действия после нажатия кнопки. К кнопке я прикрепляю ID блока на этой же странице (это лендинг). После нажатия перемещение происходит не сразу, а через какое-то время, причем, т.е. какая-то задержка происходит (или медленное-медленное очень медленное движение) а потом все идет нормально, перебрасывает на нужный блок. Можно ли эту задержку как-то убрать?

    1. По умолчанию нет никаких задержек. Это простое действие, с самы простым js скриптом. Необходимо смотреть на сайт, возможно задержка происходит по каким то процессам (ошибкам) на сайте.

  7. Здравствуйте. После нажатия на ссылку якорь оказывается снизу страницы, а не сверху, в чем может быть проблема, подскажите?

    1. Здравствуйте. Проблема в неправильном якоре. Скорей всего вы задали якорю id который есть у вас на сайте.

  8. Подскажите каким образом лучше сделать навигацию одностраничного сайта? Через обычные якоря HTML5/CSS3 или через JS jQuery? Насколько я понимаю разница лишь в том что в JS можно поставить анимацию плавного перехода?

  9. Интересно а как сделать что бы в мобильной версии после клика по якорной ссылке закрывалось бургер меню.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности