Home>Support>Anchor Links inside the page – Page Builder

Anchor Links inside the page – Page Builder

Dear team,
I am designing pages for different organizations. Each Page will have multiple sections. I would like to set the short codes of each section at the top so that user can click on them and automatically page scroll down to that section like Anchor Tag works with the ID.

Implementation :- I have Row for each section and internally they have cell.

For example :- Below Page has 6 links on the top Row Right Side Section. I want if user clicks on them , page should be scrolled down to corresponding section.
http://www.khushiyan.org/organisation-layout/

URL: http://www.khushiyan.org/organisation-layout/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 7 months ago Andrew Misplon Hi, I Work Here

    Hi Rohit

    Thanks for reaching out.

    We unfortunately don’t have anything like this built into Page Builder at the moment. You could still do this using regular anchor links. Here is more on doing that:

    https://en.support.wordpress.com/splitting-content/page-jumps/

    Let us know if you need any help implementing.

  2. 5 years, 7 months ago Rohit Gupta

    Dear Andrew , thanks for an update.
    I have tried Anchor tags but have a problem with mapping.
    I can give Anchor ID only in Widget Text Section and not Widget Title. I tried giving Anchor tag in Widget tile , but after Save it restores to the title only. Now with Anchor tag in Widget Text, when i click on its reference link in top section, it goes to text part which is bit confusing for the user to understand as Title works like section reference.

    If somehow, Anchor ID can be added in Widget title, then this functionality can be achieved.

  3. 5 years, 7 months ago Andrew Misplon Hi, I Work Here

    Unfortunately widget titles don’t parse HTML, that’s the problem with adding an ID there. If you inspect the page source you’ll see there are ID’s from Page Builder that you can make use of:

    Here are ID’s for your five headings:

    #pgc-632-1-0
    
    #pgc-632-2-0
    
    #pgc-632-3-0
    
    #pgc-632-4-0
    
    #pgc-632-6-0
    

    If you’d like to find out more about inspecting your page source using the browser developer tool, please see:

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More