Gutenslider adds a slider block to the block editor. You build slides from images, videos or colors and put any blocks on top of them. This page takes you from installing the plugin to a published slider.
Install the plugin
- In your dashboard go to Plugins → Add New Plugin and search for “Gutenslider”.
- Click Install Now, then Activate.
Or download the zip from the download section and upload it under Plugins → Add New Plugin → Upload Plugin. Gutenslider Pro is a separate zip you download from your Freemius account after buying; it replaces the free plugin. Gutenslider 7.0 needs WordPress 6.6 or newer and PHP 7.4 or newer.
Add a slider
Open a page or post in the block editor and add the Gutenslider block: click the + inserter and search for “slider”, or type /gutenslider in an empty paragraph and press Enter.
Already have a Gallery, Image or Cover block with the photos you want? Select it and choose Transform to → Gutenslider.
Choose slides
The new block asks for media. Pick several images or videos from the Media Library at once (hold ⌘ on a Mac or Ctrl on Windows while you click); each one becomes a slide. The order you select them in is the order of the slides. Or start with an empty slide and give it a color or gradient.
- Add a slide later: select the slider and use its toolbar to add slides from the Media Library or an empty one.
- Page through the slides: the arrows and dots in the editor work as on the page.
- Reorder slides: select a slide and use the move arrows in its toolbar, or drag it in the List View.
- Change a slide’s background: select the slide; its settings have image, video, color and gradient backgrounds, and an overlay.
Use images at least as wide as the slider is on large screens (1600 px or more for a full-width slider). WordPress creates smaller sizes, and Gutenslider hands the browser a srcset with the right sizes, so phones load a small file. WebP and AVIF uploads work like JPEGs.
Put content on the slides
Click into a slide and add blocks as you would anywhere else: a heading, a paragraph, buttons, columns. Choose the content mode first:
- Per slide (default): every slide has its own blocks.
- Same on all: one set of blocks stays in place while the backgrounds change underneath.
The content position matrix in the toolbar places the content on the slides: top, center or bottom; left, center or right.
Adjust the slider
Select the slider block (the List View is the quickest way) to see its settings in the sidebar: height, slides in view, effect, arrows, dots, autoplay and more. Settings that can differ per device have a desktop / tablet / mobile switch, which follows the editor’s preview device; see Responsive settings. Every option is explained in the settings reference.
The canvas shows the slider styled as the page does. To see it move, press Preview in the slider’s toolbar: it runs the real slider, with its effect and autoplay, inside the editor.
Publish and check
Save the page and open it. Swipe on a phone, try the arrow keys on a desktop. If the slider looks cut off, check its minimum height and the content padding for the smaller screens.