Как использовать Якорные Ссылки для быстрой навигации по странице. Wordpress + Elementor
HTML-код
- Опубликовано: 6 дек 2017
- Якорные ссылки это удобный способ навигации по веб-странице. В конструкторе страниц #Elementor для #WordPress, якорные ссылки можно сделать двумя способами: с помощью виджета Якорь меню или задав ID для секции. В этом видео я покажу, как именно это сделать.
Всё об Elementor:
Обзор Elementor - • Elementor - первый обз...
Обзор Elementor PRO - • Elementor Pro - обзор ...
Скачать Elementor бесплатно - digitalalex.ru/r/elementor-free/
Купить Elementor PRO - digitalalex.ru/r/elementor/
#️⃣ Присоединяйся:
Канал - digitalalex.ru/r/youtube/
Сайт - digitalalex.ru/
Telegram - digitalalex.ru/r/telegram/
Вконтакте - digitalalex.ru/r/vk/
Я.Дзен - digitalalex.ru/r/zen/
Rutube - digitalalex.ru/r/rutube/ 
Наука
Нравятся видео про Elementor? Поддержите выпуск новых! wplovers.pw/donate/
Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово!
Поддержать WPlovers wplovers.pw/donate/
Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана.
Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма.
Спасибо! wplovers.pw/donate/
Я крааайне редко оставляю отзывы, но... Спасибо за вашу работу! какой раз уже достаточно долго ищу информацию, а нахожу на вашем канале! мучилась с якорями на другую страницу, оказывается ларчик просто открывался, я уже не надеялась)) ваши видео всегда очень емкие и затрагивают несколько вопросов одной темы, четко и без воды. Так держать!
Золотой человек. 2 минуты видео и минус 2 часа геморроя. Спасибо!
Большое спасибо за твой канал. Решил открыть свой бизнес, и конечно средств на развития немного. А как известно нет рекламы в интернете, значит нет у тебя рекламы. Искал кому отдать свои кровные. Но либо сумма не позволяла, либо профаны попадались. Решил найти решение моей проблемы в ютюбе, и наткнулся на твой канал. Рассказал все доступно и качественно (спасибо), но быстро ( что понятно). Пришлось ставить на паузу и сидеть кумекать понемногу. В итоге я с помощью твоего канала разобрался и создал самостоятельно создать свой сайт. На данный момент продолжаю разработку сайта при помощи WPlovers.
Информация до сих пор актуальна. Благодарю за краткий и понятный ролик с полезной информацией!
Огромное спасибо, Алекс! Вы всегда даете четкие и понятные инструкции даже для тех, кто только познает Элементор и ничего не понимает в коде 🙂
Александр. Видео просто🔥. Искала эту информацию уже полгода. Благодарю вас за понятное видео. Вы супер. Успехов вам.
Подробно, и понятно! Автору респект!!!
Спасибо, Александр. Столкнулся с этой проблемой и у Вас нашел, как всегда, исчерпывающий ответ! СПАСИБО!
Александр ,вы молодец ,очень полезные уроки ,спасибо большое !
Привет. А как к кнопке ссылку прикрутит, чтобы была перебрасывала к определенному внутреннему блоку на странице?
Всё ясно, чётко и по делу. Спасибо за помощь!
Спасибо за понятные и наглядные видео!:)
Самый лучший ютуб канал в России по wordpress!
Спасибо большое за вашу помощь!!!
Александр, вы лучший! 👍
Спасибо огромное! Ультраполезная инфа быстро и без воды!
P.S. Плагин Elementor - топ)
Спасибо, очередное Ваше видео оказалось для меня полезным
Огромное спасибо!
Просто великолепный канал
Вы замечательный!
Спасибо большое! У вас очень классные уроки!
Дуже дякую за корисну інформацію!
Спасибо ! Все проще чем казалось изначально.
Пожалуйста. Так и есть, всё просто.
Благодарю, просто, понятно, доступно.
вот спасибо то большое! два дня не мог разобраться с этим вопросом!
Спасибо! Доходчивое видео. Все получилось в теме DIVI.
Круто, что так =)
2021- всё по прежнему полезно!
Настраиваю рекламу лендинга в яндекс директ, нужно добавить быстрые ссылки, в этом видео все нашел, как всегда супер!
Роман, на самом деле, быстрые ссылки можно было просто указать от балды, даже не делая якорей.
вашсайт.ру/#1 По крайней мере, недавно это прокатывало.
WPLovers - о Wordpress понятно и с любовью спасибо, буду знать)
Пожалуйста =)
а как сделать что бы на странице в елементор нажать на кнопку или слово и оно переехало на другую секцию где то в конце страницы к примеру?
В настройках каждого блока в elementore во вкладке "содержимое" есть поле "ссылка". Вот туда через CSS ID и потом пишешь с этим атрибутом ссылку через #
@@user-vb3nf6oq4r Покажите как
Во истину ответили, Александр ..!
Дякую!)
Красава. Все четко и понятно.
Спасибо за подробности))
Спасибо большое, очень полезно!
Отлично! Благодарю!
Спасибо большое!
Спасибо, мил человек!
На высоте как всегда спасибо !
Спасибо брат. Очень помог!
Cпасибо, очень помогли!
Спасибо, урок пригодился)
Вот реально помог! Спасибо!
Спасибо, отличное видео
А можно сделать якорную ссылку с названия сайт? Например, как в вашем примете с названия "Тестовый сайт". Или это возможно только добавляя пункты меню?
Спасибо огромное
Спасибо!
Подскажите, настроек Astra нет, какой плагин нужно установить? Через поиск по "astra" выходит куча, какой выбрать, подскажите, пожалуйста.
СПАСИБО! за CSS ID
Пожалуйста =) Он правда уже давно были ну да ладно.
Помог, спасибо!
Спасибо. Все получилось через айди, мне не надо было меню создавать, к конкретной кнопке привязал, всё передвигает куда надо.
Подскажите пожалуйста как в Лендинге сделать тоже самое, но не в меню, а на кнопке. То есть к кнопке прикрутить ссылку на какую то часть этой же страницы
Спасибо
Здравствуйте, Александр! Видео конечно давнее, но может ответите. Интересует такой вопрос - если сделать "липкое" меню, то при перемещении к блокам с якорями меню все время "наезжает" на блок. Как это исправить? Заранее спасибо.
Спасибо!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Спасибо большое! видео очень поучительное, только долго не мог найти "настройки страницы" в "бургере такого нет" но я нашел в низу "настройки" где просмотр изменений открывает основные настройки а там уже можно выбрать в "макете страницы" холст Elementor, наверно другая версия элементора
Да, с тех пор кое-что изменилось.
спасибо !
Подскажите, что нужно сделать, чтобы убрать эффект задержки при нажатии на кнопку. Т.е. нажимаешь на кнопку, происходит небольшая задержка (скорее, очень-очень-очень медленное начало движения), а потом уже перемещение к нужному блоку. Не могу найти ответ
Можно ли сделать отступ на якоре от верхнего края? А то липкое меню мешается..
санек, приветствую!
сделай обзор на применение таблиц в конструкторе, желательно без привлечения сторонних плагинов.
...если получится конечно))
Приветствую, Семён! Кстати да, надо бы сделать. Но вот без плагина или без CSS вряд ли получится. С другой стороны, в теме чаще всего уже заложены стили таблиц. Пробовал в той же Astra + Elementor вставлять таблицу через текстовый редактор, всё пучком.
Александр пожалуйста помогите!!!
Я привязал якорные ссылки меню как по видео. Они работают только на главной странице. Если переходить с других страниц сайта они не работают. Что можно сделать?
Добрый день! А как сделать ссылку на блок из якорного меню, если в блоки просто русский текст?
Подскажите, пожалуйста, где искать работу на выполнение сайтов? Хочется применить Ваш опыт.
Виталий, сейчас уже в основном по рекомендации. А так, много знакомлюсь, болтаю о своей деятельности, вступаю в разные ассоциации и провожу живые мероприятия. В общем, у меня рулит так называемый нетворкинг. Контекстную рекламу на наши услуги давать - пустая трата денег и является позитивным избеганием столкновения с клиентом.
В интернете, на фрилансе, если у вас нет имени, то на денежные заказы не рассчитывайте. В сети царит демпинг и высочайшая конкуренция по цене, а не по качеству. Я и сейчас беру проекты из сети для поддержания штанов, но действительно интересные и денежные проекты были именно из реала.
лучший
Отлично
Александр, подскажите. В многостраничном сайте, при переходе на внутреннюю страницу, как мне сделать так, чтобы была возможность возвращаться на главную, используя якорные ссылки. допустим у меня 5 якорных ссылок на главной и 2 внутренние страницы. когда я нахожусь на внутренней странице, то вернуться на главную через якорные ссылки не получается. а очень нужно) заранее спасибо, надеюсь я понятно объяснил.
Нужно ставить ссылку на главную с якорем. Плавный скроллинг работать не будет, но ссылка будет работать.
Огромное спасибо, Александр. Все работает, даже скроллинг. Один нюанс, у стиля виджета NavMenu есть 3 формы (обычный, при наведении и активный) Так вот, после того, как я прописал полный адрес в меню wordpress, все иконки на главной странице стали в статусе активный, и к сожалению ни работает эффект, когда при наведении менялся цвет и т.д. Вы сталкивались с этим?
Добрый день, столкнулся с необходимостью поставить якоря в виджете "Вкладки", на каждую вкладку отдельно. Задача что бы при нажатии на картинку ( которая находится на этой же странице) автоматически перекидывало на открытую вкладку. В текстовом редакторе каждой вкладки есть возможность установить якорь. Установил. На картинке поставил произвольную ссылку на якорь. Не работает. Поможете разобраться почему?
Добрый день. В хидере вордпресса размещена картинка из трех секций. Хочу прописать якорные ссылки. Левая секция отправляет пользователя на страницу сайта. Вторая - на главную страницу, третья - на ролик в ютубе. Не могу стравиться и прошу помощи
Здравствуйте Александр!
Пробовал установить якорные ссылки по уроку, все способами, но нужного результата нет. Наверное нужно поставить плагин Astra или Atra Pro?
Здравствуйте, Ринат! Абсолютно нет. Должно работать с любой темой.
Удивительно. Пробовал всё сначало дважды и дву способами, как у Вас, не получилось. Ладно, попробую завтра на свежую голову. Отпишусь, как получится.
Успехов! =)
Благодарю!
Цель достигнута, уважаемый учитель!) Всё здорово работает!
Как быть, если многостраничный сайт, в меню ссылки и на якоря, и на другие страницы. Находясь на другой странице, якорные ссылки в меню не работают.
Здравствуйте. Получается также можно сделать содержание для каждой страницы?
Можно, но есть готовые решения в том же Elementor ruclips.net/video/kSo65h7ebfI/видео.html
С установкой якорей разобрался, спасибо! А как сделать, чтобы прокрутка плавная до якоря была? У меня просто перескакивает.
Если внутри страницы то плавная, если с другой, то скрипт срабатывать не будет.
@@DigitalAlex Вопрос был о том, как сделать чтобы прокрутка была плавной? Это в каком то отдельном скрипте самой темы искать??????
Здравствуйте, ваш метод перехода по ссылке к якорю работает только для текущей странице, как сделать чтобы ссылка видела slass id с других страниц?
А как сделать переброску на якорь при нажатии определенную кнопку на сайте? Подскажите плиз.
Поставить на эту ссылку, ссылку с якорем. Если мне память не изменяет, я это показывал.
Здравствуйте. Столкнулся с такой ситуацией, что при установке якоря на субменю, якорная ссылка ставится мимо блока, так как пока сайт летит вниз к ссылке, субменю сворачивается , и на эти 100px условно идет смещение якоря. Возможно как то исправить ситуацию?
Подскажите, как сделать чтобы страница например Контакты не индексировались в гугле, у меня получается каждая страница имеет свой адрес, и когда щелкаешь контакты оно открывает новую страницу, но мне не нужен этот адрес, у меня должен быть только якорь.
Александр, видео классные! Очень помогают. Но вот столкнулась с проблемой, не знаю как сделать перечень услуг в колонке справа, чтобы кликать на какую-то из них, а краткая информация выводилась в колонке слева ??? Подскажите пожалуйста, очень классный необходим инфоблок! ..
Например как здесь блок лечения rikota.com.ua/
Да, штука интересная, но встроенными в Elementor средствами пока что сделать не получится.
Спасибо за ответ!
Здравствуйте, Александр! У меня опять дилетантский вопрос, авансом прошу прощения. При настройке сайта с Elementor и темой из астра- мои keywords не видят анализаторы сайтов- пытался прописывать с All In One SEO Pack и Yoast SEO, также пробовал добавить произвольное поле. Остались варианты- только руками, через код. Буду счастлив- за Вашу помощь! Спасибо за труды!
Кир, не увидят потому что заточены только под анализ фраз в стандартном редакторе WordPress. Возможно, с популяризацией конструкторов добавят в свой функционал. Согласен, удобно, когда в чек-листе иконки зеленеют, но нужно идти на компромиссы. На индексацию страниц это никак не повлияет, поисковики увидят всё. Просто упоминайте несколько раз необходимые ключевые фразы, заполняйте заголовок, метаописание и всё будет хорошо.
Не извиняйтесь, пишите всегда. Так вы помогаете раскрутке канала.
Спасибо, буду стараться настраивать seo без помощи плагинов. Спасибо!
Кир, не нужно отказываться от SEO плагинов. Они нужны, чтобы заполнять заголовок, описание страницы и генерировать XML карту сайта. Просто не берите во внимание подсчёт и всё..
Я Вас понял! Спс! Спасибо за отзывчивость- очень приятно, что можно вот просто у Вас спросить, что то- и Вы ответите!
Для этого канал и существует.
Якорную ссылку вставляю в текстовые ссылки SmartSlider3 (из слайдера у меня логотип) в всё работает! И нужная страница открывается и "заякоренная" секция поднимается. Являюсь счастливым обладателем Проф троицы Astra+Elementor+SmartSlider3.
Конечно, Алимжан. Если всё правильно сделать, будет работать.
Однако счастье оказалось не долгим, -- якорь не открывает спойлер, как, например, это делает спойлер и аккордеон Shortcodes Ultimate.
Видео понравилось, но вот я не смог разобраться с настройкой плавной прокрутки страницы. Если нет видео, может стоит запилить на эту тему?
Плавная прокрутка подключается либо скриптами, либо плагином ru.wordpress.org/plugins/jquery-smooth-scroll/ Ещё, если переходить по якорной ссылке с другой страницы, то плавной прокрутки не будет.
Что если у меня нету заголовка раздела? Что вписывать?
Брат поскажи пожалуйста если мне нужно чтобы кликнуть и попасть другой меню скажем обо мне и конкретную пост другого меню, мне не интересно делать все на одном меню, хочется из одного страницы попасть другую и конкретний пост, такое можно? За ране спамибо
Артур, не совсем понял твою задачу, но попробую объяснить из того, что понял. Есть настройки меню ruclips.net/video/9q4Eh2U9O-Y/видео.html и в него ты можешь добавить ссылку на любую запись или страницу. Просто создай меню, выбери слева нужную запись и добавь куда нужно.
если я нахожусь на другой страницы и когда перехожу по якорной ссылки она не переходит, а просто в строке к ссылки добавляется название якоря. Как сделать, чтобы переходила?
Саш, оба способа попробовал, но столкнулся с проблемой - в ПК версии страницы все якоря смещены очень сильно,таким образом когда я выбираю один блок, у меня экран докручивается до предыдущего блока. Причем на разных устройствах на разное количество пикселей. Каюсь, что грешил отрицательными отступами, но разве якоря не для того нужны, чтобы доводили до нужного места? В чем вообще косяк я понять не могу?))
А ленивую загрузку изображений не используешь?
Теперь бы еще с аккордеоном разобраться. 4 блока нужно и под каждым блоком по 4-6 дополнительных аккордеона с текстом раскрыть закрыть. Как это сделать?
Создать шаблоны с вложенными аккордеонами и потом вставить шорткод в родительский аккордеон. Шорткоды в Pro или дополнением Anywhere Elementor.
Хочу оставить на своем сайте в( разделе разработка сайта )ссылку на твой ютюб канал как на это смотришь ?
Нормально смотрю. Главное не выдавай мои ролики за свои.
А вот только что проверил. Если это не landing page и мы на странице Контакты, то перейти уже мы не сможем. Если мы прописали id photo а в меню прописали #photo мы перейдем только на той странице где мы и добавляли этот id например на главной. А с другой страницы или с записей уже не могу перейти. ( Хотя уже исправил поставил в меню Доменное-имя/#photo и перебрасывает нормально. )
Ну вот. Я тоже хотел сказать, что полный путь нужно в меню указать и тогда будет везде работать.
Подскажите как сделать ссылки на блоки в элементор для рекламы
Не совсем понял какие блоки и какой рекламы?
Привет. После нажатия на ссылку с якорем, секция, на которую должно линкануть, оказывается снизу, а не сверху. Не подскажешь в чем может быть проблема?
Такая же проблема, но только в мобильной версии или в версии планшета. как решили?
@@alpinegoldprod вопрос по-прежнему не решен, но есть версия, что проблема в теме, на которой сайт работает. С меню в хедере у меня все как надо, но ссылки в футере работают неправильно. Т.е судя по всему именно из-за расположения ссылок якорь себя так ведёт. Хотя и не факт, не проверял
Добрый день. подскажите как в элементор сделать ананонс с другой страницы, в ручном режиме не очень хорошо получается. есть ли какой плагин?
Здравствуйте. Не совсем понимаю задачу. Анонс страницы или записи нужно вывести?
есть страница на которой будет 10-20 анонсов на другие страницы xn--43-6kcan6a8awu5k.xn--p1acf/?page_id=20
далее если заинтересовала ссылка, то переходят на другую страницу гарантия43.рус/?page_id=78
В Elementor Pro виджетом Записи, в бесплатном только со сторонним дополнением wordpress.org/plugins/essential-addons-for-elementor-lite/ Там есть виджет Post Grig, Post Type нужно выбрать Page и настроить под себя.
спасибо. буду разбираться. какие еще есть полезные особенности для бизнеса в элементор про. так получилось, что начал делать сайт для себя сам и разбираться в сайтостроении, так проще и эффективнее. сложно передать те знания, которые нужно разместить на странице стороннему человеку. сейчас еще пара тройка производителей пиломатериалов просят меня накидать им сайт. хотелось бы попробовать на этом зарабатывать. есть обзор элементор про для бизнеса?
На столько специфического обзора нет и думаю, что он невозможен. Тут скорее не Elementor нужно копать, а то как делать правильную подачу определённой информации. Elementor это мольберт, по которому вы пишете картины. Понимаете метафору?
Изучайте копирайтинг, графический дизайн, типографику, html, CSS. Тогда будет получаться делать сайты хоть тапком.
А если я хочу якоря поставить не на меню, а на фотографии на странице. Как тогда быть???
Делаю лэндинг, учусь только. Не пойму как сделать ссылку для кнопки, без создания меню.
Как делаете лендинг? Если в конструкторе Elementor, то в виджете Кнопка, есть поле для вставки ссылки.
Добрый день. Столкнулся с ошибкой:
Секции присвоен id, к id ведет ссылка на заголовке
При нажатии на заголовок страница откручивается не к якорю, а к середине, всегда к одному месту
При этом, если прокрутить всю страницу с начала до конца, якорь начинает работать корректно
сам только что с этим столкнулся, получилось решить?
А как бы сделать чтобы меню не проматывалось вниз при прокрутке а всегда оставалось на виду?
Вот как? ruclips.net/video/HQO4qrHzhP0/видео.html
Как перескочить по якорю на другую страницу?
Спасибо. Но не пойму почему мне так повезло, что меню у меня встает не в горизонтальную строчку, а в столбик. Все галочки также как у вас, а результата нет. В чем проблема?
Возможно конфликт с темой. Какая у вас?
WPLovers - о Wordpress понятно и с любовью twenty seventeen/twentythirteen 1.5
Три часа мучаюсь с logo. Какого размера нужно загрузить logo.png и logo@2x.png, чтоб Астра не плодила png нарезочки других размеров, которые в ДВА раза тяжелее.
И ещё 200 лет будешь биться, потому что WordPress всегда нарезает несколько размеров изображений и Astra ни при чём. Размеры прописываются в настройках медиафайлов. При загрузке он сохраняет оригинал и нарезает все указанные в этих настройках размеры.
Расточительство? Да! Но так устроен WordPress.
рекомендую посмотреть видео про оптимизацию изображений ruclips.net/video/lVZ-cbGgbfc/видео.html
ставим wp-smush+safe svg грузим векторные лого, кропатся будет только favicon, в прочем он и использует только растр. чтобы на темах отображалось векторное лого нужно использовать custom css в настройке темы, типа class: .logo { widht: Xpx; height: Xpx; }
upd. favicon всегда размером не более 512х512px ну, а smush поджимает весь растр)
Кстати да, я тулил в лого SVG, но он не встал без задания размеров. Нужно Astra'навтам написать про это. SVG всё-таки тренд, который вытесняет остальные форматы.
Спасибо. Теперь видимо вопросов достаточно набралось для отправки АстрАнавтам ))
таки это логично ведь, вектор маштабится без потерь. потому чтобы он был под фомат нужно задать его))
Привет,у меня проблема,как сделать якорь на кнопку не в меню?
Привет. А в чём разница то?
Добрый день, это не работает если меню имеет подменю.
я думала, что только у меня так
Огромное спасибо! а почему у меня нет меню навигации?
Оксана, виджет меню доступен в платной версии Elementor Pro ruclips.net/video/T8iabnf_wJE/видео.html Хотя есть и альтернатива (корявенькая правда) и о ней я говорил в этом видео ruclips.net/video/HQO4qrHzhP0/видео.html
еще раз огромное спасибо. годы мучений решились одним вашим каналом.
Даже так =) Ну, хорошо.
Как сделать что бы бургер меню закрывалось после перехода по якорю?
Это капец - даже не знаю как правильно вопрос задать! СПАСИТЕ! Молю!
Кароч!!!!! - создал шаблон в Elementor... Странице естественно присвоилась такая-то ссылка. Вопрос - как сделать так - что бы эта страница, стала не абра-кадабра, а стала - мойдомен.ру/ТОЧТОНАДО