Web5X Блог

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

Web5X Блог

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

Поиск по блогу

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

Обновлено: 28.03.2018
55 комментариев

При создании 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 вы можете посмотреть на странице Виджеты
Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

55 комментариев

  • Просто реально, огромнеейшее Вам спасибо!!!! Столько бился, Вы, вообще молодец!!!

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

    • A

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

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

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

    • A

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

  • Добрый день!

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

  • Спасибо!

  • Как подсветить активную якорную ссылку?

  • Как сделать что показывал на каком ЯКОРЬ МЕНЮ находится сейчас

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

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

  • Автор, вы большой молодец! Всем отвечаете! Успехов вам!

  • Спасибо за информацию. Очень помогла.

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

  • а можно ли якорь привязать не к меню, а к кнопке ?

    • A

      Да, конечно можно. Просто в ссылке кнопки указываете ссылку на якорь.

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

  • Добрый день!

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

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

    • A

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

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

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

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

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

    • A

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

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

    • A

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

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

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

    • A

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

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

    • A

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

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

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

      .

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

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

    • A

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

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

  • То есть закладка — напоминала, я правильно поняла?

    • A

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

Добавить комментарий для Админ (Отменить ответ)