How To Use Full Screen Scrolling Sections

Last Update: April 10, 2025

Full Screen scrolling sections offers you a way to combine multiple full height containers into full screen scrolling sections with side navigation. With this tool, you can set up a beautiful one page scrolling website or you can simply add them into any page/post as part of your page content.

See an example below of full screen scrolling sections from the Avada Adventure website. Note the navigational dots along the right hand side. Please continue reading below to know more about this awesome feature.

Full Screen Scrolling Section Example

Full Screen Scrolling sections, also known as 100% Height Scrolling Sections can be activated via the individual Container Settings of the included containers. You will need at least 2 consecutive containers that are both Full Height and have Enable 100% Height Scroll enabled for this feature to work.

When Enable 100% Height Scroll is activated, the containers will display an orange color for the element controls. Please follow the steps below to set up full screen scrolling sections.

Fullscreen Scrolling Secions > Container Options

How To Set Up Full Screen Scrolling Sections

Step 1 – On the General tab of the first included Container, set the ‘Height’ option to Full Height. An ‘Enable 100% Height Scroll’ option will appear below this, and you then set this to,Yes.

Step 2 – Add your container content. A full height background image is a good start.

Step 3 – Follow steps 1-3 for the other containers that you will include in the scrolling section group. Remember to save your changes.

Note: You can set up more than one Full Screen Scrolling section within a page/post. It just requires 2+ consecutive containers to form a group that will scroll.

Full Screen Scrolling sections, also known as 100% Height Scrolling Sections can be activated via the individual Container Settings. You will need at least 2 consecutive containers that are Full Height and have Enable 100% Height Scroll enabled for this feature to work. Please follow the steps below to set up your full screen scrolling sections.

How To Customize Full Screen Scrolling Sections

Navigate to Avada > Options > Avada Builder Elements > Container. Here you can set your preferred default options and behavior for 100% containers. This includes the styling of the navigation areas, the animation chosen for the transition between scrolling sections (here you can choose from Fade, Slide, Stack. Zoom, Slide Zoom In, ans Slide Zoom Out),

  • Container 100% Height Navigation Background Color – Controls the background colors of the navigation area and name box when using 100% height containers.

  • Container 100% Height Navigation Element Color – Controls the color of the navigation circles and text name when using 100% height containers.

  • Container 100% Height Animation – Select the animation of the scrolling transition on 100% height scrolling sections. Here you can choose from Fade, Slide, Stack. Zoom, Slide Zoom In, and Slide Zoom Out.

  • Container 100% Height Scroll Sensitivity – Controls the sensitivity of the scrolling transition on 100% height scrolling sections. In milliseconds.

  • Container 100% Height Scroll Speed – Controls the speed of the scrolling transition on 100% height scrolling sections. In milliseconds.

  • Container 100% Height Dots Navigation – Enable / Disable the dots navigation for 100% height containers. Disabling dots navigation may be useful if using custom navigation.

  • Container 100% Height On Mobile – Turn on to enable the 100% height containers on mobile. Please note, this feature only works when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop, but will need disabled on mobile.

Fullscreen Scrolling Secions > Global Options
Copy to Clipboard

Anchor Scrolling With 100% Height Scrolling Sections

Anchor Scrolling is possible with Full Screen or 100% Height scrolling sections. Please click the button below for the detailed documentation on how to set up Anchor Scrolling.

Things To Keep In Mind When Using Full Screen Scrolling Sections

Full Screen Scrolling sections have their own challenges, and below is a list of some important things to keep in mind:

  • All content of the scrolling section must fit into the 100% viewport height. Otherwise, if the content is too large, it will be cut off.

  • Mobile Devices are shorter in height so the ‘Container 100% Height On Mobile’ option, found in Options > Avada Builder Elements > Container section, is disabled by default. The ‘Container 100% Height On Mobile’ feature only works when your containers have minimal content. In many cases, 100% height containers work well on desktop, but will need to be disabled on mobile.

  • Container Visibility settings – this option will be hidden when the ‘100% Height’ option is set to Yes.

In this article