BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Full Height Section Slider Widget for Elementor Pro

Full screen sections that change one at a time.

Overview

What Full Height Section Slider does

Full Height Section Slider shows full screen slides that change one at a time with the mouse wheel, the keyboard, a swipe, dots or arrows. A slide holds a heading, text and a button over a background, or a saved template. On small screens, and for visitors who ask for reduced motion, the slides become a normal stacked page.

Demo

Live demo

The slider fills the whole screen, so there is no demo on this page.

Welcome

Tell your story one screen at a time

Every section fills the screen. Scroll, swipe or use the arrow keys to move to the next one.
Get Started

What we do

Design that keeps people reading

Give each idea its own screen: a bold heading, a short text and one clear button.
Our Services

How it works

Use your own templates as slides

A slide can also be a saved template, so anything you can build in the editor can fill the screen.
See Examples

Say hello

Ready when you are

After the last slide the page scrolls on, so your footer is never out of reach.
Contact Us
Features

What it can do

  • Each slide is a heading, text and button over a background, or a saved template.

  • Vertical or Horizontal direction with four effects: Slide, Fade, Scale and Cover.

  • Changes with the mouse wheel or trackpad, the keyboard, a touch swipe, dots and arrows.

  • Dots with labels, arrows, a counter, a progress bar and a scroll hint on the first slide.

  • Anchor names, so a link such as #pricing opens that slide.

  • Below a width you set, the slides stack and the page scrolls normally.

  • Visitors who ask for reduced motion always get the stacked page.

  • Sticky Header Height keeps the slider below a fixed site header.

Use cases

When to use it

One page site

Give each part of the story its own full screen slide and name the slides in the dots.

Product story

Use a background image, a short heading and one button per slide to walk through a product.

Landing page intro

Start a page with three or four slides, then let the page scroll on after the last one.

Setup

How to set it up

What you need: Nothing for slides with a heading, text and button. Template slides need a saved template (Templates > Saved Templates).

  1. Drag Full Height Section Slider onto the page.

  2. In Slides, edit each row: set Content, then type the Heading and Text or pick a Template.

  3. Set a Background Image or Background Color per slide and a Name in the Navigation.

  4. In Layout, choose Direction and Height, and set Sticky Header Height if your header stays at the top.

  5. Set Normal Page Below (px) to the width under which the slides should stack.

  6. In Transition, pick the Effect and Speed (ms).

  7. Switch Show Dots, Show Arrows, Show Counter and Show Progress Bar on or off, then style everything in the Style tab.

FAQ

Questions and answers

What happens on phones?

Below the width in Normal Page Below (px), 768 by default, the slides are stacked one below the other and the page scrolls normally.

Can I link to a slide?

Yes. Give the slide an Anchor Name such as pricing and link to #pricing.

Can visitors reach content after the slider?

Yes. With After the Last Slide set to Scroll on with the page, the page continues after the last slide.

Can a slide hold my own layout?

Yes. Set Content to Saved template and pick a template built with Elementor.

Bright Addons Pro

Get Full Height Section Slider with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.