Scroll to Elements or Sections in Websites or Funnels

There are three ways that you can anchor/scroll to elements or sections in a page within website or funnels. You can use this by hyperlinking text elements, using a button or using the navigation menu. This article will cover all three methods.

In This Article:

• Finding Your CSS Selector ID
• Method 1- Hyperlinking the Text Element within the Builder
• Method 2- Using a Button Element in the Builder
  • Button Option 1 - Website URL
  • Button Option 2 - Scroll to Element
• Method 3- Using the Navigation Menu Element in the Builder
• Common Use Cases

Finding Your CSS Selector ID

In order to scroll to a specific section using any of the three methods, you will need to use the CSS selector ID.

1. Open the page with the section you want to scroll to in the builder. Select the section you want to scroll to in the builder so that it is outlined in green.

   

2. From the right hand options menu, select the Advanced tab. Scroll down (if necessary) to the bottom until you see the header CSS Selector.

   

3. Use the copy icon next to the CSS selector box in gray to copy the CSS selector. The icon looks like two pieces of paper overlapping each other.

   

Method 1- Hyperlinking the Text Element within the Builder

1. Highlight the text you want to hyperlink that when clicked will take your visitor to the section.

2. Click the Link icon in the toolbar, it will look like a horizontal line in between two parentheses.

   

3. Enter your link which will differ if the section is on the same page or on a different page.
   1. If the section is on the same page as the text where you are adding the hyperlink, you can just paste the section CSS selector ID into the URL field and hit save.

   2. If the section is on a different page as the text where you are adding the hyperlink, you will want to add the full page URL, then add the section ID. For example, you would enter https://fgfunnels.com/demo#section-Gd2Pxm74j This method will also work for subdomains.

      

4. Hit save and your text should now be hyperlinked. You can save and preview the page to test the link.

Method 2- Using the Button Element in the Builder

There are 2 primary ways to link a specific section of a page to a button within the funnel/ website builder (circled in red). 

Option 1: "Website URL" 

This is ideal for linking across different funnel & website pages. This is achieved by inputting the page URL with the #CSS SELECTOR ID appended at the end.  For example: https://fgfunnels.com/demo#section-Gd2Pxm74j. (This will also work for subdomains).

Option 2: "Scroll to Element"

Ideal for linking sections within the same funnel page. You can select "Scroll to element" option in the Button Actions and select the section within the page you wish to anchor/ scroll too.

Button Option 1 - Website URL

1. Click on the button you wish to link a section to. In this example, we will be linking a button to a section on another page. Once you have clicked on the button in the builder, a orange outline will appear around the button.

2. Click on the dropdown menu under Button Actions from the right hand options panel to select the button action. Select Website URL from the dropdown.

   

   

3. Add the website URL and CSS selector with no spaces in the input field. For example, you would add https://www.url.com/pagepath#cssSelector.

   

4. If you would like the button to open the page in a new tab, turn the toggle on. Then save and publish your page to reflect the changes.

Button Option 2 - Scroll to Element

1. Click on the button you wish to link a section to. In this example, we will be linking a button to a section on another page. Once you have clicked on the button in the builder, a orange outline will appear around the button.

   

2. Click on the dropdown menu under Button Actions from the right hand options panel to select the button action. Select Scroll to Element from the dropdown.

   

   
   

   

3. Click on the Scroll to Element dropdown. This will open a dropdown menu of all sections, rows, columns and elements on the page.

   

4. Scroll through the list to find the element you want to select. When you hover over an element in the list, the page will bring you to that section and outline it. When you have found the section you want to scroll to, click on it to select it. The name will now show in the area under Scroll to Element.

   

   

   
   

How to Label Your Sections

You may choose to label your sections to be more easily findable within the scroll to element list. This is easy to do.

1. Select the section or element you would like to label so that the section/element is outlined and the right hand settings panel shows the settings for that element.

2. At the top, under Element Name, enter the new name for your section/element.

   

3. Now this section will appear in the list with the name you just entered.

Method 3- Using the Navigation Menu Element in the Builder

1. Select the navigation menu and click the pencil icon to edit the menu item that you want to link to the specific section.

   

2. Use the "go-to website URL" option.

   

3. Delete what is already in the box and add in your new link. For navigation menus, we recommend using the URL + CSS selector meaning that you will include the full URL of the page, followed by the CSS selector with no spaces.
   1. Example: https://www.url.com/pagepath#cssSelector
   2. This will also work for subdomains.
4. Select if you would like the link to open in a new tab.
5. Click Submit to save the link.
6. Save and publish the page.

Common Use Cases

Some common use cases to use anchor/ scroll to elements are:

• Linking "Table of Contents" items to their corresponding sections
• Linking "Terms of Service" for quick access to important sections
• Linking sections of your "scripts" for staff when handling prospects
• Linking your "Navigation Menu" to the pricing table that is located in a specific section of your funnel/website
• A "Book a Call" button that links to a booking widget in another funnel or website section
• Specific video located in a section of a funnel/website
• Linking people to your offer stack to see an overview of the offer in a specific section
• Multiple buttons to one section of your website/funnel like an opt-in form