Close Menu
  1. Slider



The Slider is a parent block that can hold two types of blocks as children, Hero and Background blocks.

Because the Background block can contain any other block, you can use this to place any block or combination of blocks inside of a carousel that you’d like. Be aware, all the normal downsides of placing content inside of a carousel apply here. Do not count on your users exploring your carousels, and do not put any mission-critical content inside of them.


When using Background blocks to put content inside of Sliders, try and keep them the same height to prevent any jarring content jumping when the user changes the slide.

Using a Slider at the top of the page

Utilizing a Slider filled with Hero blocks at the top of your page is a common UX pattern. Because of this, the Slider works the same way as a Hero when it’s the first block on a page, and respects the Seamless or Separate navigation settings in the customizer.

If the navigation handling is set to be Seamless, the masthead navigation’s Reverse Print value will automatically switch to that of the active slide. For example, if one every slide has reverse print enabled except for the last one, the navigation menu will be printed in white over top of every slide, but will switch to normal print when the last slide becomes active.

Adding a slide to your carousel.

Adding Slides

To add a slide to your Slider block, click on the ‘Add Slide’ button in the block editor. This will appear any time the Slider or any of its children are selected.


You can use the Slider to build things like quote carousels!