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: 55 комментариев

    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. Интересно а как сделать что бы в мобильной версии после клика по якорной ссылке закрывалось бургер меню.

  10. Доброго времени, подскажите как убрать плавный скролл к якорю? Хочу сделать моментальное перемещение к якорю, без прокруток. Для обычных тем без элементор решения есть, а для элементор нашел только файл perfect-scrollbar.js думаю может в нем нужно по-изменять значения? Или есть иные способы? Cпасибо.

  11. Добрый день!

    Столкнулся с тем, что кнопки меню на которые назначил якорные места отобрадаются только с ПК. Когда захожу с телефона, то кнопок просто нет.
    Я новичек и не могу понять, как отобразить на телефоне. Помогите, пожалуйста.

    Спасибо заранее!

    1. День добрый. В данному виджету не относится. Если у вас какая то тема, то нужно смотреть настройки темы по отображению меню. Если виджет меню, то соответствующий виджет.

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

  12. Я благодарю Вас за Ваш блог. Много полезного нахожу для себя. Уже получилось то, о чем спрашивала Вас сегодня.

  13. А как быть с плавающем меню? Неужели все делают статическое в 2021 году?
    Дело в том, что даже если якорь ставишь выше заголовка, то плавающее меню перекрывает заголовок при переходе по ссылке. А если смещаешь по padding или margin, то образуется пустое не нужное поле внутри контейнера. А если убираешь выше в предыдущий блок, то на разных устройствах выглядит все криво.
    Посоветуйте решение!

    1. Нужны примеры. Не совсем понял суть проблемы. Сам виджет он невидим и не мешает отображению. Виджет Якорь это одно, а плавающее меню это другое.

  14. Здравствуйте, что делать если в меню при нажатии на якорь (многостраничный сайт) который есть на этой странице работает, а если нажать на другой то не переходит?

        1. К сожалению я не понял происходящего на видео. 🙁 Пришлите адрес сайта, напишите на какие пункты нажать и где. А вообще у вас тема наверняка платная и должна быть поддержка по данной теме от разработчика.

  15. Добрый день!

    Я установила на сайт меню WP и в элементор якоря, но при первом нажатии на ссылку в меню или кнопку на странице, перепрыгивает не на то место где якорь стоит. Так может происходить и при повторном нажатии, а вот на третий или четвертый раз перескакивает куда нужно. Как это исправить?
    https://meditatsiya-proscheniya.ru/

  16. Добрый день, если я нахожусь на другой страницы и когда перехожу по якорной ссылки она не переходит, а просто в строке к ссылки добавляется название якоря. Как сделать, чтобы переходила? Якорные ссылки работают только на главном экране-это занятия и мой блог. Добавлял якоря с помощью elementor

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

  17. Здравсвтуйте, пожалуйста помогите разобраться с проблемой, как сделать так, чтобы меню в мобильной версии сворачивалось при клике по ссылке , а не оставалось открытым, 2 дня уже бьюсь, вот сайт https://ukutuzova.ru/

    1. День добрый. Если только через JS. В вашем случае как то так

      jQuery('.elementor-item-anchor').on('click', function() {
      jQuery('.elementor-menu-toggle').trigger('click');
      });

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

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

Реклама

Готовые сайты за 3000 рублей. Купить готовый сайт с конструктором это реально. А создать сайт можно дешево, быстро и просто. Купить сайт на web5x.ru

Конструктор сайтов Elementor Pro вы можете отдельно купить от 49$
Купить Elementor Pro

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