{"id":105210,"date":"2023-03-17T15:43:40","date_gmt":"2023-03-17T10:13:40","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=105210"},"modified":"2023-03-17T15:43:40","modified_gmt":"2023-03-17T10:13:40","slug":"link-to-a-specific-section-in-elementor-horizontal-page-scroll","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/link-to-a-specific-section-in-elementor-horizontal-page-scroll\/","title":{"rendered":"How to Link to a Specific Section in Elementor Horizontal Page Scroll?"},"content":{"rendered":"\n

Do you want to link to a specific section of a horizontal scrolling section? So you can send users directly to that section.<\/p>\n\n\n\n

As websites continue to evolve, designers strive to create unique and user-friendly interfaces that offer seamless navigation for visitors. Horizontal page scrolling stands out as an engaging way to display content on a website, especially for portfolios, product showcases, or feature pages. However, it can be challenging to direct visitors to a specific section of a horizontal scrolling webpage using a hyperlink.<\/p>\n\n\n\n

This task might seem complex, but the Horizontal Scroll widget from The Plus Addons for Elementor, allows you to easily link to a specific section of your template.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To do this, add the widget on the page and your Elementor template in the Content<\/strong> tab.<\/p>\n\n\n\n

Now you have to add an id to the section you want to link to in your Elementor template. <\/p>\n\n\n\n

There are two ways you can do that.<\/p>\n\n\n\n

One way is to add the id within the template, select the section and, go to Advanced<\/strong> > CSS ID<\/strong>, add your id.<\/p>\n\n\n\n

\"horizontal<\/figure>\n\n\n\n

The second option is to select the Horizontal Scroll widget, and go to Extra Options<\/strong> tab > Section ID<\/strong>.<\/p>\n\n\n\n

From here, you can assign an id to each section of the horizontal scroll. You have to use a pipe separator (|<\/strong>) without any space to add the id for each section.<\/p>\n\n\n\n

Example: slide1|slide2<\/p>\n\n\n\n

\"horizontal<\/figure>\n\n\n\n

Once you\u2019ve added the id to your section, go to Extra Options<\/strong> tab > URL Parameter<\/strong> and turn on the toggle.<\/p>\n\n\n\n

\"horizontal<\/figure>\n\n\n\n

This will allow you to add anchor links in the URL.<\/p>\n\n\n\n

Now to link to that specific section use the id with #<\/strong>.<\/p>\n\n\n\n

Let\u2019s use a button widget to link. Add the ID with #<\/strong> in the Link field.<\/p>\n\n\n\n

\"button<\/figure>\n\n\n\n
\n

Note: If you link it from a different page within the same domain, make sure to add the page path before the #id. Like <\/em>\/service\/#slide2<\/em><\/strong>.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Now if someone clicks on the button, it will take them directly to that specific section.<\/p>\n\n\n\n

Also, check How to Add Progress Bar in Elementor Horizontal Page Scroll<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105220,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105210","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-horizontal-scroll","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=105210"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105210\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105220"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105210"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}