🥳 Celebrate Our Launch With a $200 LIFETIME Discount OFF The Premium Plan Use: BIRTHDAY2024

This offer expires 9/30/2024, at 11:59 PM EST

BizStackPro all-in-one digital marketing platform dashboard.
How to Use Custom CSS Selector in the Site Builder – BizStackPro Help

How to Use Custom CSS Selector in the Site Builder

Use CSS Selector IDs to create smooth on-page anchors, scroll-to-section buttons, and cross-page navigation across funnels and websites.

Helping Visitors Navigate Long Pages More Efficiently

Long-form pages often contain pricing sections, FAQs, booking forms, and calls to action that visitors may struggle to locate quickly without clear navigation shortcuts.

Custom CSS Selector IDs in BizStackPro allow businesses to create anchor links, smooth scroll actions, jump navigation, and cross-page section linking throughout funnels and websites.

Reusing selector IDs or incorrectly linking anchor targets can create broken navigation behavior, inconsistent scrolling, and a confusing user experience across large pages.

This guide explains how to locate CSS Selector IDs, create same-page and cross-page anchors, configure scroll actions, and improve navigation flow inside the BizStackPro Site Builder.

Before creating anchor links and scroll actions, it helps to understand how CSS Selector IDs are assigned and used throughout the BizStackPro builder.

Overview

A CSS Selector ID is a unique ID assigned to a section or element in the builder. Once you have that ID, you can create anchor links and scroll actions that jump users directly to the right part of the page—great for long pages, pricing sections, FAQs, or “Book Now” areas.

Good to know: CSS IDs should be unique. If two elements share the same selector, scroll behavior and styling can become unpredictable.

Anchor or Scroll Within the Same Page

To scroll to a specific section on the same funnel or website page, copy the target element’s CSS Selector ID and use it in a link or button action.

  1. Open the builder for the page you want to edit.
  2. Select the target section/row/element you want to scroll to.
  3. In the right panel, open the Advanced tab.
  4. Copy the CSS Selector ID (example below).

Example selector

#section-FV_N4o-g-I

Tip: If you’re using a button action like Scroll to Element, paste the selector exactly as shown. If you’re using a direct anchor link, it typically looks like #section-FV_N4o-g-I.

Anchor to a Section on a Different Page

To jump to a section on another funnel/website page (or even a subdomain), append the selector to the end of the destination URL.

Format

https://www.example.com/page#section-FV_N4o-g-I
  • Works across websites, funnels, main domains, and subdomains.
  • When clicked, users load the page and automatically scroll to the target section.
  • For best results, ensure the section exists and the selector is unique.

Example use: Add “See Pricing” in your header that links directly to your pricing block lower on the page.

Common Use Cases

  • Table of Contents: Jump between sections on long pages.
  • Pricing navigation: “See Pricing” buttons that scroll to pricing tables.
  • FAQ jump links: Link to a specific FAQ block.
  • Book a Call buttons: Jump directly to your calendar embed.
  • Terms & policies: Jump to specific legal sections.
  • Multiple CTAs: Route multiple buttons to a single form section.

Add smoother navigation to your pages

CSS Selector IDs help users move through long pages faster—without hunting around or bouncing.

Frequently Asked Questions

What is a CSS Selector ID and why is it useful?

It’s a unique identifier assigned to an element. You can use it for anchors, scroll effects, and precise targeting for behavior or styling.

How do I find the CSS Selector ID for an element?

Select the section/element in the builder, open Advanced in the right panel, then copy the CSS Selector ID.

Can I reuse a CSS Selector ID for multiple elements?

No. IDs must be unique, or scrolling/styling behavior may conflict.

How do I anchor to a section on a different website or funnel page?

Use the full destination URL and append the selector, like /page#section-12345.

Do I include the # symbol?

Yes. Keep the leading # when using anchors (same-page or cross-page).

Build faster experiences with anchor navigation

Jump links and scroll-to-section buttons keep visitors moving forward—especially on long-form sales pages, help guides, and funnel steps.

✅ View Plans & Features

Less scrolling. Less friction.

Disclaimer: This site is NOT endorsed by Google, Facebook or YouTube in ANY WAY. All trademarks & Logo / branding are the property of their respective owners. Please Note: This site was created in BizStackPro by Ken George II (An Affiliate of BizStackPro) and may contain affiliate links.

All About BizStackpro


Copyrights 2024 | AllAboutBizStackPro.Com | Pricing | About | Features | All Rights Reserved.