Как настроить якорные ссылки в elementor
В данной статье разберем, как добавить и настроить якорные ссылки с помощью плагина wordpress elementor.
Что такое якорные ссылки?
Якорные ссылки – это ссылки, которые направляют на определенное место на страницы. Позволяют быстро перемещаться с одной секции на другую, минуя листание всего содержания. Используются, как правило на страницах с большим объемом информации или для создания навигации.
Как добавить и настроить якоря в Elementor
Перейдите в сам редактор далее найдите виджет «Якорь меню» и переместите его в нужную вам область на странице.
К примеру я добавил перед заголовком «Каталог»
Далее укажите id якоря меню, обязательно без решетки на латинице, в моем случае «katalog»
На следующем этапе вам необходимо в админке wordpress создать меню с произвольными ссылками и указать id якоря с решеткой в начале. Перейдите в консоль далее «Внешний вид» ⇒ «Меню» создайте новое или добавьте в существующее (на ваше усмотрение). Смотрите пример на скриншоте ниже.
На последнем этапе перейдите в редактор elementor, перетащите виджет с меню в шапку или в другую область и укажите название. Поздравляю меню и якорные ссылки настроены.
Видео, как добавить и настроить якорные ссылки в elementor pro
Якорь меню — виджет Elementor
При создании Landing Page или одностраничника, посадочной страницы, документации или сайта с длинным содержимом, нам необходимо как то передвигаться по сайту, а точнее по его контенту. Для этого придуманы специальные закладки контента, а в веб строительстве такие закладки называются «Якорь» и «Якорная ссылка». При нажатии на такую ссылку, мы переходим в определенную часть страницы. Если это страница текущая, то мы перейдем к участку текста мгновенно.
Для общего развития изучения html, якорь это просто уникальное имя для определенного блока. Обычно в качестве этого имени (якоря) используют id блока или элемента. Вот например даже параграф может быть якорем.
Как видите все просто. А вот, чтобы перейти к данному якорю, нам необходимо создать ссылку с адресом страницы и просто дописать к адресу название якоря т.е id и символ решетку. Для выше указанного примера это будет так
www.moy-sait.ru/kak-sozdat-sait#yakor-saita
Якоря используют на многих сайтах где нужна навигация по контенту. Если вы создали длинный текст с разными разделами, то в начале статьи вы можете разместить ссылки на нужные части контента. Так же вы создали лендин и тоже нужно создать ссылки для передвижения по контенту.
На изображении выше показан виджет, когда мы его расположили на страницу конструктора. У виджета нет настроек, кроме поля для ввода названия якоря.
Многие задаются вопросом, а зачем его использовать когда можно задать определенной колонке или секции id и его использовать? А ответ просто. Представьте страницу из 10 разделов. В каждый блок вы добавили id. Вернулись к сайту через неделю и уже не помните где поменять id блока и необходимо просматривать каждый блок или виджет в отдельности.
А вот с указанным виджетом все просто. Мы просто возвращаемся в конструктор и видим серую область с иконкой якоря и понимаем, что это якорь. Кликаем по нему и сразу при необходимости можем поменять id. Т.е все просто, быстро и визуально. И естественно при просмотре самого сайта мы виджет не увидим и это прекрасно.
Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки
Сегодня я обнаружил, что ищу, как открыть всплывающее окно, созданное с помощью Elementor, используя якорную ссылку, и подумал, что поделюсь этим трюком со всеми, кто заинтересован.
Всплывающее окно, которое я создал для этой цели
Сначала создайте свое всплывающее окно. Пусть будет что угодно. Для этого конкретного клиента веб-разработки я настраивал модальное окно с контактной формой.
Опубликуйте или обновите созданное вами всплывающее окно. После публикации конструктор страниц спросит вас, при каких условиях, триггерах и дополнительных правилах вы хотите разрешить отображение всплывающего окна.
Даже если вы планируете запускать всплывающее окно только на определенных определенных страницах, выбор включения всплывающего окна для всего сайта – самый простой способ.
Затем перейдите к глобальным настройкам всплывающих окон, щелкнув значок шестеренки в левом нижнем углу страницы. Откроется окно настроек.
Откройте вкладку Advanced.
Настройте следующие параметры по своему усмотрению. Я включил опцию «Отключить прокрутку страницы», а также опцию «Избегать множественных всплывающих окон».
Пример: добавьте кнопку – или любой виджет с элементом ссылки – и пусть ссылка будет #contact открываться во всплывающем окне при нажатии кнопки.
Отличная работа! Теперь вы можете ссылаться из любого места на любой странице вашего веб-сайта, и откроется модальное / всплывающее окно.
Что такое якорь меню в элементор
Блог о Веб-разработке на WordPress, Elementor и Elementor Pro: Документация. Уроки. Видео
Блог о Веб-разработке на WordPress, Elementor и Elementor Pro: Документация. Уроки. Видео
СОЗДАЕМ ЯКОРЬ В ТЕКСТЕ
Ваш шедевр готов!
Равным образом укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Равным образом начало повседневной работы по формированию позиции способствует подготовки и реализации существенных финансовых и административных условий. Равным образом реализация намеченных плановых заданий способствует подготовки и реализации дальнейших направлений развития.
Товарищи! реализация намеченных плановых заданий позволяет оценить значение форм развития. Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание новых предложений. Значимость этих проблем настолько очевидна, что новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Идейные соображения высшего порядка, а также сложившаяся структура организации позволяет выполнять важные задания по разработке форм развития. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. С другой стороны дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.
Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции требуют определения и уточнения существенных финансовых и административных условий. Таким образом постоянный количественный рост и сфера нашей активности требуют определения и уточнения существенных финансовых и административных условий. Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации модели развития. С другой стороны укрепление и развитие структуры влечет за собой процесс внедрения и модернизации новых предложений. Разнообразный и богатый опыт начало повседневной работы по формированию позиции в значительной степени обуславливает создание дальнейших направлений развития.
Не следует, однако забывать, что новая модель организационной деятельности в значительной степени обуславливает создание дальнейших направлений развития. Идейные соображения высшего порядка, а также сложившаяся структура организации требуют определения и уточнения модели развития. С другой стороны консультация с широким активом представляет собой интересный эксперимент проверки направлений прогрессивного развития. Повседневная практика показывает, что рамки и место обучения кадров влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Равным образом рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Не следует, однако забывать, что консультация с широким активом требуют определения и уточнения новых предложений.
Повседневная практика показывает, что рамки и место обучения кадров представляет собой интересный эксперимент проверки форм развития. Разнообразный и богатый опыт рамки и место обучения кадров позволяет выполнять важные задания по разработке направлений прогрессивного развития. Не следует, однако забывать, что сложившаяся структура организации позволяет выполнять важные задания по разработке систем массового участия. Значимость этих проблем настолько очевидна, что сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий.
Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий требуют от нас анализа модели развития. Задача организации, в особенности же начало повседневной работы по формированию позиции требуют от нас анализа соответствующий условий активизации. Равным образом консультация с широким активом играет важную роль в формировании модели развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании направлений прогрессивного развития. Не следует, однако забывать, что укрепление и развитие структуры требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
Таким образом рамки и место обучения кадров влечет за собой процесс внедрения и модернизации систем массового участия. Разнообразный и богатый опыт рамки и место обучения кадров требуют определения и уточнения направлений прогрессивного развития. Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения позиций, занимаемых участниками в отношении поставленных задач. Не следует, однако забывать, что консультация с широким активом играет важную роль в формировании новых предложений.
Задача организации, в особенности же новая модель организационной деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. С другой стороны консультация с широким активом играет важную роль в формировании модели развития.
Задача организации, в особенности же дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке форм развития. С другой стороны рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения направлений прогрессивного развития.
Идейные соображения высшего порядка, а также консультация с широким активом играет важную роль в формировании соответствующий условий активизации. Задача организации, в особенности же рамки и место обучения кадров способствует подготовки и реализации модели развития.
Якорные ссылки в Elementor и Elementor Pro. Создаем якорь-меню
Создаем якорь-меню
Давайте разберемся в том, что же такое якорные ссылки в Elementor и Elementor Pro, а по-простому якоря?
Изначально html-страница открывается с самого начала, и все содержимое загружается сверху вниз. Если страница содержит большое количество заголовков, пунктов и подпунктов, то для удобства перехода между ними и придумали якорные ссылки (якоря), по которым Вы очень быстро можете найти интересный абзац или раздел. Очень часто переходы по якорям используются в лендингах, в которых каждый блок соответствует своему пункту меню. Абсолютные и относительные ссылки не очень для этого подходят.
По своей сути, якорь — это своего рода закладка в на странице, к которой можно сделать переход.
Якорная ссылка представляет из себя обычную ссылку с уникальным атрибутом «name». Текст между тегами якорной ссылки необязателен, так как нам необходимо лишь указание определенного места для перехода.
Немного кода для понимания:
Помимо удобства в навигации для больших статей, якоря повышают общее ранжирование текста страницы для поисковиков.
Разберемся, как правильно использовать якорные ссылки в Elementor.
Для наглядности придумаем задачу, которую нужно реализовать средствами Elementor.
Дано: 3 секции с длинным текстом.
Задача: сделать переход к каждой секции на странице средствами Elementor.
Для решения данной задачи будем использовать якоря, привязанные к пунктам меню.
1) В первую очередь, создадим якоря перед каждой секцией Elementor на странице редактора (аналогия закладок в книгах). К этим якорям в дальнейшем будет осуществляться переход из меню навигации.
Для этих целей воспользуемся общим виджетом Elementor «Якорь меню».
Добавим по виджету перед каждой из секций на нашей странице.
Далее заходим в настройки виджета и вводим ID якоря меню в соответствующее поле.
ID якоря меню вводится без знака #(решетки) и должно быть уникальным, т. е не должно повторяться более одного раза на одной и той же странице, а также должно содержать только латинские буквы и цифры.
Для примера, ID для якорей будут такими:
2) Далее создадим меню навигации, по клику на пункт которого будет осуществляться переход к секциям с текстом по якорям. Как сделать меню Elementor мы рассмотрели в данной статье.
Создаем меню в WordPress
3) Теперь нам необходимо добавить пункты меню в созданное меню навигации. Обычно пункты добавляют из списка элементов меню слева, где автоматически появляются все созданные нами страницы, записи и рубрики. По клику на эти пункты у нас открывается новая страница сайта, ссылкой на которую пункт меню и является. Но как быть, если нам нужно осуществить переход от одного блока к другому в пределах одной страницы? Для этого в WordPress есть, так называемые, произвольные ссылки.
4) Выбираем в списке элементов меню раздел «Произвольные ссылки».
5) Создаем 3 произвольные ссылки (про числу секций)
В поле «URL» вводим название якоря, только со знаком #
В поле «Текст ссылки» вводим произвольное название пункта навигации.
Обязательно нажимаем кнопку «Добавить в меню».
6) Сохраняем меню.
7) Далее добавим виджет «Меню навигации» на страницу редактора Elementor. Выбираем в настройках нужное меню, в нашем случае anchor-nav.
8) Наслаждаемся результатом. Теперь, по клику на пункт меню мы будем переходить к соответствующей секции страницы.
Пример Якорного меню Elementor.
Привязываем якорь к кнопке
Для того, чтобы привязать якорную ссылку к кнопке, необходимо в настройках виджета кнопки в поле «Ссылка» после знака решетки # добавить название якоря. Мы подразумеваем, что виджет «Якорное меню» вы уже добавили.
Таким простым способ вы добавите переход по якорной ссылке по клику на кнопку.
Вот для примера, кнопка с переходом по якорной ссылке в начало этой статьи.
Переход по якорю к блоку на другой странице.
Бывают случаи, когда необходимо сделать не просто переход на другую страницу сайта, а перенаправить посетителей к определенному разделу, который располагается на другой странице сайта. Якорные ссылки в этом случае очень удобны.
Давайте добавим такую якорную ссылку.
Создадим вторую страницу и добавим переход по якорной ссылке к последней секции первой страницы, созданной для описания работы якорей в начале данной статьи. Перейдем в редактор Elementor и добавим на новую страницу виджет заголовка, который мы будем использовать как ссылку для перехода на вторую секцию первой страницы, созданной ранее.
Добавим якорную ссылку.
Если мы добавим ссылку на первую страницу, то мы не получим нужного нам результата — по клику нас будет перенаправлять в начало первой странице, а не к ее разделу.
Чтобы перейти к нужному блоку на другой странице, к url-ссылке странице необходимо добавить имя якоря следующего формата:
То есть, к ссылке на страницу, к блоку которой нужно осуществить переход, добавляется якорь этого блока, перед именем которого нужно обязательно поставить / и знак решетки #
Перейдите на страницу с примером и кликните по заголовку на ней. Вы перейдете к Секции 2 на другой странице. Если посмотреть в инспекторе кода адрес ссылки, мы увидим следующее:
Пример перехода к якорю на другой странице.
Якорь в тексте.
Создаем якорь в текстовом виджете
Напомним еще раз, что якорная ссылка представляет из себя обычную ссылку с уникальным атрибутом «name». Следовательно, в нужное нам место в тексте необходимо добавить тег ссылки с атрибутом «name». Как это сделать в текстовом виджете? Ведь если поставить тег прямо в текст, то он отобразиться на странице как есть.
Добавим несколько блоков с текстовыми виджетами на страницу. Сгенерировать произвольный текст можно на сайте fishtext.ru. Мы добавим 10 абзацев, чтобы текст был большим.
Например, нам нужно сделать переход по якорю к 5 абзацу на странице. Добавим якорную ссылку с уникальным именем перед 5 абзацем прямо в текст.
Теперь посмотрим, как ссылка будет выглядеть при просмотре страницы.
Мы увидим, что теги ссылки появились в тексте как есть, а нам нужно, чтобы они встроились на страницу как html-код.
Для того, чтобы ссылка интегрировалась в html-код страницы, в текстовом редакторе виджета нужно выйти из визуального редактора и зайти на вкладку «Текст»:
Теперь все теги, которые вы будете прописывать, будут встраиваться в код страницы.
Добавим нашу якорную ссылку в текстовый редактор по-новому:
Далее добавим переход к пятому абзацу по клику на кнопку. Заметим, что якорную ссылку можно привязать к любому виджету, который содержит поле «Ссылка».
Разместим кнопку в начале статьи и пропишем в поле «Ссылка» имя нашего якоря с обязательным знаком «#» перед ним.
Вот и все. По клику по кнопке мы перейдем к пятому абзацу по якорной ссылке.
