How to Make a Fullpage Scroller?

Fullpage scroller (or fullscreen vertical slider) is a creative trendy way to present your webpage to your website visitors. You can check some demos here:

DEMO 1 (fixed backgrounds, continuous scrolling)

DEMO 2 (parallax, continuous scrolling)

DEMO 3 (static scrolling)

TheGem Elementor

Enabling Fullpage Scroller

In Page Options – Onepager & Scrollers enable “Page as Fullpage Scroller” option:

Following settings for fullscreen vertical slider will appear:

1. Switch between different scroller types (using “Advanced” is recommended)
2. Disable/enable navigation dots
3. Select style for navigation dots
4. Continuous Scrolling: this option enables the endless scrolling, so the last slider of your fullscreen page scroller will continue with the first slide
5. Normal scroll on mobiles: in case you don’t wish to make you page as fullscreen page scroller on mobiles
6. Scrolling effect: choose between normal, fixed backgrounds or parallax scroll

Preparing Slides

After fullpage scroller is enabled and set in Page Options, click on “Edit with Elementor”. Elementor loads and you can start making slides.

Once done, save your page and check it on front end. You will see, that your page has been automatically transformed to fullpage vertical scroller.

Setting Slide’s Name

Slide’s name can be used in navigation dots as navigation labels:

In case you wish to show slide names in the dot navigation of your slider, you need to name your slides in section settings. Go to Layout tab of your slides section and open “TheGem Fullpage Slider” section. In “Slide Name” field you can now specify the name of your slide.

Linking Menu

To link your main menu with the slides you have created, use “Slide anchor” input field in “TheGem Fullpage Slider” section in Layout tab of the section:

After that just go to menu setting in WordPress admin and create menus with the anchors you have added to your slides:

TheGem WPBakery

Fullpage scroller (or fullscreen vertical slider) is a creative trendy way to present your webpage to your website visitors. You can check some demos here:

DEMO 1 (fixed backgrounds, continuous scrolling)

DEMO 2 (parallax, continuous scrolling)

DEMO 3 (static scrolling)

Enabling Fullpage Scroller

In Page Options – Onepager & Scrollers enable “Page as Fullpage Scroller” option:

Following settings for fullscreen vertical slider will appear:

1. Switch between different scroller types (using “Advanced” is recommended)
2. Disable/enable navigation dots
3. Select style for navigation dots
4. Continuous Scrolling: this option enables the endless scrolling, so the last slider of your fullscreen page scroller will continue with the first slide
5. Normal scroll on mobiles: in case you don’t wish to make you page as fullscreen page scroller on mobiles
6. Scrolling effect: choose between normal, fixed backgrounds or parallax scroll

Preparing Slides

Save/update your page and go to WPBakery Editor. Now you can start adding slides to your page:

1. Add Row element and click on “Edit row”

2. Make following settings:

• Row stretch: stretch row
• Enable full height row
• Activate checkbox “Row as a slide for vertical slider”

• Go to row’s “Design options” and add some background image as “cover” to your row

In this way you have added new slide to your page. Now you can start adding content to your slide in a usual way, using WPBakery Page Builder.

Changing Dots Style

To change the dots style of your fullscreen vertical slider, go to Page Options – One Page Options and use “Select style for navigation dots” select box to choose between different dots styles:

Enabling Scroll Effects

To enable scroll effects, go to Page Options – One Page Options and use “Scroll effect” select box to choose between different scroll effects. You can choose between normal scroll (default option), fixed background scroll as well as parallax scroll.

Setting Slide’s Name

Slide’s name can be used in navigation dots as navigation labels:

You can set slide’s name by going to row’s settings of the slide and using “Slide name” input to enter the name of the slide:

Linking Menu

To link your main menu with the slides you have created use “Slide anchor” input field in row’s settings of the slide and entering anchor’s name:

After that just go to menu setting in WordPress admin and create menus with the anchors you have added to your slides

General Recommendations

Fullpage scrollers are different to regular pages as one slide can be shown on absolutely different screen heights. It is important not to overload the slides with content as it might not fit on smaller display heights.

Here are some recommendations on how to create/edit fullpage scrollers:

1. Start with lower resolution

We recommend to start editing slides on smaller display heights like tablets in horizontal orientation. While editing the slide in page builder, switch to tablets and edit the screen resolution, reducing the height to 600 or 700 px.

Organize the primary content in the way everything fits and try to keep the content in this volume, not increasing it with additional secondary content elements.

2. Reduce paddings and margins

Try to reduce vertical paddings and margins of content elements thus making the content looking more compact and fitting the screen height

3. Hide secondary elements

All secondary content elements (which are not so important) can be hidden on smaller devices via responsive settings.

4. Adjust typography size

Adjust the font size of headings and body making it smaller on smaller screen resolutions

5. Add “hidden” sections

You can also create alternative sections optimized for smaller heights and hide this sections on desktop, making it visible only on tablets (and for the main section vice versa: hiding it on tablets and enabling it only for desktops). In this way you can add more content for desktop version and reduce the content for smaller heights