# Tutorial: your first slider with Gutenslider

URL: https://gutenslider.org/gutenslider-tutorial-how-to-add-sliders-to-your-wordpress-website/
Published: 2019-06-11
Updated: 2026-10-07

> Add the slider block, choose images, pick fixed or changing content and a transition, and adjust the basic settings. The complete first walk-through.

This tutorial builds a first slider from start to finish: add the block, choose the images, decide how the content behaves and adjust the settings. It takes about ten minutes. (Updated for Gutenslider 7.0.)

### 1. Add the Gutenslider block

Open a page in the block editor. There are three ways to add the block:

- the blue `+` in the top bar, then search for “Gutenslider”,
- the small `+` that appears between blocks,
- or type `/gutenslider` in an empty paragraph and press Enter.

### 2. Choose the slides

The block opens the Media Library. Select several images at once by holding `⌘` (Mac) or `Ctrl` (Windows) while you click; the order you click them in becomes the slide order. Press **Select** and every image becomes a slide. Videos work the same way.

### 3. Fixed or changing content

You can leave the slides empty for a plain slideshow, or put blocks on them. Gutenslider has two modes for that:

- **Changing content** (default): each slide has its own blocks, for example a different headline on every photo.
- **Fixed content**: one set of blocks stays in place while the pictures change underneath, for example your site’s headline and a button.

See both side by side on the [examples page](https://gutenslider.org/examples/#content), and read more in [Fixed vs changing content](https://gutenslider.org/docs/content-modes/).

### 4. Pick a transition

**Slide** moves the slides sideways, **fade** blends one into the next. Fade suits fixed content, because only the background changes. Gutenslider Pro adds flip, cube, cards and coverflow; compare them on the [examples page](https://gutenslider.org/examples/#effects).

### 5. The basic settings

Select the slider (the List View helps when a slide is selected) and look at its sidebar:

- **Autoplay**: the slider moves on its own. Without it, visitors use the arrows, the dots, swipe or the arrow keys.
- **Arrows** and **dots**: on or off, per device.
- **Minimum height**: the slider never gets lower than this, and grows when the content needs more room.
- **Fullscreen background**: the slider fills the screen behind the content that follows.

Every setting is listed in the [settings reference](https://gutenslider.org/docs/settings/).

### 6. Selecting the right block

A slider is a block with blocks inside (the slides), which have blocks inside (your content). Clicking selects the innermost one. To get to the slider, open the **List View** (the icon with three lines in the top bar) or press the “Select parent” button at the left of the block toolbar.

### Next steps

- [Show captions from the Media Library](https://gutenslider.org/automatic-photo-captions/)
- [Link to a single slide](https://gutenslider.org/hash-navigation/)
- [Different settings for phones](https://gutenslider.org/docs/responsive/)