Scroll to elements or sections in websites or funnels

Scroll to elements or sections in websites or funnels

Modified on: Tue, 20 Sep, 2022 at 2:55 PM


 

There are 3 ways you can anchor/ scroll to elements or sections within website or funnel:


 

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


 

Quick Tips & How-to:

  • In order to anchor/ scroll within the same funnel/website, you will need to use the CSS selector ID (How to find your #CSS SELECTOR ID)
  • In order to anchor/ scroll to a section in another funnel/website page please use the page URL with the CSS selector ID appended at the end:
    Ex: https://www.URL.com/funnelpath#CSS SELECTOR

(This will also work for subdomains)

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
  • “Book a Call” button that links to a booking widget in another funnel or website
  • Specific Video located in a section of a funnel/ website
  • Multiple buttons to one section of your website/funnel like an optin form ect

Lets take a look at how you would find your #CSS SELECTOR ID

1. Head into the Builder 

Click on the section you would like to anchor/ scroll too. Make sure the section or element is highlighted (green in this case). 

Head into the Builder

2. Click on Advanced in the left menu

Scroll down to the bottom of the left menu until you see CSS selector.

Click on Advanced in the left menu

3. Click on CSS SELECTOR copy button

Copy text area titled: #section-6EZdwvZ3l by clicking on the button

Click on CSS SELECTOR copy button

Method 1: 

Hyperlinking the Text element within the builder

1. Drag highlighted text you wish to link your section too.

Drag highlighted text you wish to link your section too.

2. Click on the “link” button

Click on the "link" button

3. Paste “#section-6EZdwvZ3l” into input field

NOTE:

To Anchor to another funnel/website section within your system please use the full page URL with the CSS selector ID appended at the end:

 

Ex: https://www.URL.com/funnelpath#CSSSELECTORID

This will also work for subdomains

Paste "#section-6EZdwvZ3l" into input

4. Hit “Enter” to make sure changes are saved.

You will know once changes are saved as the highlight text will now be highlighted blue. Viola that’s it =)

Hit "Enter" to make sure changes are saved.

Method 2: 

Using a 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” 

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.  

Ex: https://www.URL.com/funnelpath#CSS SELECTOR 

(This will also work for subdomains)

Option 2: “Scroll to element”

Ideal for linking sections within the same funnel page. Please select “Scroll to element” option in the field below 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 too

In this example we will be linking a button to a section from another page within the system.

Please proceed to click on the button. A highlighted box (orange) will appear when the button is selected.

1. Click on the button you wish to link a section too

2. Click on the dropdown menu located at the bottom of the left side

Click on the dropdown menu located at the bottom of the left side menu

Click on the dropdown menu located at the bottom of the left side

3. Paste the URL plus CSS Selector in the input field

Next lets grab the page URL and append the CSS selector ID to the end.

Ex: https://www.URL.com/funnelpath#CSS SELECTOR

(This will also work for subdomains)

Paste the URL plus CSS Selector in the input field

4. Select the action you would like to happen when the button is clicked

If you would like your link to open in a new tab please toggle this on.

 

Make sure to hit “Save” in the top right hand corner and that’s it.

Select the action you would like to happen when the button is clicked

Button Option 2 – Scroll to element

1. Click on the button you wish to link a section too

A highlighted box (orange) will appear when the button is selected.

1. Click on the button you wish to link a section too

2. Click on the “Button Actions” dropdown menu located at the bottom left side

Click on drop down menu and select “Scroll to element” option

Click on the dropdown menu located at the bottom of the left side

3. Click on “Scroll to Element” dropdown

This will open a dropdown menu of all the section within that page

Click on "No Element"

4. Hover and click on the section you wish the button to be anchored too

When scrolling through the options in the dropdown menu you will notice a highlighted box appears around the element (blue in the case). Select the element you wish to anchor the button too.

Note: 

The titles in the dropdown menu are auto generated element names. If you would like to label your sections see Step 5 below.

Hover and click on the section you wish the button to be anchored too

5. BONUS – How to label your sections

Click on the section/ element you would like to Label.

This section will be highlighted when selected as show below

BONUS - How to label your sections

6. Scroll to the top of the left hand side menu

Enter the label you wish to call this section.

For our example we will use “New Lead From”. 

Scroll to the top of the left hand side menu

7. Proceed to the dropdown menu “scroll to element” option

Once the step above is complete, the newly labeled element name “New Lead From” will appear in the dropdown menu

Make sure to hit “Save” in the top right hand corner and that’s it.

Proceed to the dropdown menu "scroll to element" option

Method 3: 

Using the Navigation Menu element in the builder

Important Note:

Navigation menus are global elements, meaning they can be clicked on anywhere they are present. 

For this reason we recommend using the URL+CSS selector method to ensure that your links do not break.

 

1. Click on NAVIGATION MENU element

For this example we will anchor the “Book a Call” option to a booking widget section located in another funnel/ website.

 

Click on NAVIGATION MENU element

2. Click on the edit pencil next to “Book a Call” located in the left side menu area

Click on the edit pencil next to "Book a Call"
 

3. Click on “Go to website URL”

Paste your redirect URL+CSS Selector: 

 

Ex: https://www.URL.com/funnelpath#CSS SELECTOR

(This will also work for subdomains)

Click on "Go to website URL"

4. Open link in New Tab?

For this option if you would like to open the link in a new tab please toggle this feature on  (blue). 

Open link in New Tab?

5. Click on Submit

Make sure so hit “Save”, that’s it!

Your Navigation Menu will now open your booking widget in a new tab.

Click on Submit


 

Did you find it helpful? Yes No

 

UNLEASH THE POWER OF PERSUASION

Crafting a High Converting Sales Landing Page that Captivates and Converts

Online sales are the lifeblood of businesses, but few know how to turn casual browsers into enthusiastic buyers – the difference is a landing page that compels action! 

Get the science behind sales conversion with proven strategies behind sales conversion with proven strategies, psychological triggers, and actionable techniques.

Craft High Converting Sales Pages With Unleash The Power Of Persuasion EBook OP

Sign up for our Newsletter

Put an end to the 60-hour week as an entrepreneur.

We simplify your life by integrating all your essential tools into one seamless CRM.

Struggling with CRM integration?

Tell us more about your pain points, and let's find a solution together.

Want to Get the Most Out of Your Business Day?

Answer these 5 easy questions and let’s find the right solution for your business.

We help you adopt and seamlessly integrate CRM to cut your working hours by half.