Gutenslider Tutorial – How to add sliders to your WordPress website

With Gutenslider, it is very easy to add custom sliders to your wordpress website or blog. Unlike many other sliders, Gutenslider is fully integrated into the gutenberg editor backend. In this post, we will show you, how to integrate sliders very fast and simple. The tutorial covers the basics of how to add sliders (others call it carousels).

Adding the Gutenslider Block

There are (at least) three ways to add the Gutenslider block to your post or page. The image below, shows you the add buttons in your editor backend, that you can press or select to add Gutenslider.

Adding the gutenslider block

The ones at the left are the main inserting points, whilte the three icons at the bottom right, show the blocks you have used the most.

Adding Slides

In Gutenberg, you add Slides, by selecting images.

Like you are used to, with other wordpress media blocks, you can simple drag & drop images onto the gray area, press the Upload button or select Media from the Media Library. We will choose Media Library here.

The image shows, that we selected 5 files from our media library.

Tip:
When you press the Ctrl-button on Windows or the ⌘ command-button on mac while clicking the images, you can easily choose multiple images.

Press Select to insert the images as new slides into your Gutenslider.

General Slider Settings

Now that you have your slides setup, you can of course leave the slides without content, to just create an image slideshow. But you can also add content on top. In Gutenslider, there are two different modes you can choose for your content: Fixed Content or Changing Content.

On the right, on the block settings sidebar, you can choose between the two content modes Gutenslider provides.

Changing Content

Changing Content is the default setting, it will create a slider, where each slide can have different slide content like in the following slider example.

Slide 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Slide 2

Slide 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Fixed Content

One of Gutensliders uniqueness is the Fixed Content setting. It will create a slider, that has the content stay on top, while the background slides / fades (depending on your settings, see next section). The slider will then look like:

I am your fixed content

I am your fixed content

Selecting the animation mode

You can as well choose between two different animation modes. They will set the type of transitions, you see between the changing slides. The two examples above, show the default animation mode: Fade Animation.

The other mode you can choose is the Slide Animation mode. See yourself:

I slide and do not fade

I slide and do not fade

Customizing the slider

We will go through the different slider settings, you have (in the free version). See the image on the right, it shows exactly what you see, when selecting the gutenslider block. After a short block description, you see the General Slider Settings which you already know from the sections above.

Advanced Slider Settings

Here you can set the display options of your slider

  • Autoplay – select if your slider plays automatically. If disabled, users can navigate the slider by clicking the arrows, dots, or by dragging the slides.
  • Show Arrows – select if you want to show arrows or not
  • Show Dots – select if you want to show dots or not
  • Fullscreen Background Slider another special setting of Gutenslider. Will make the slider appear in the back of your content. You can create awesome pages with that, check out the example.
  • Minimum Slider Height – Gutenslider will adapt its height to the content you add. With this setting, you can set the minimum height of the slider. The height that the slider will never be lower than.

Changing Modes

On the left, the slides button, on thre right the preview button.

By pressing the eye button (right), you will go to preview mode. Changing the slides, i.e. adding slides, removing slides, changing order of slides, you can achive by clicking the slides button (left).

When you are in preview Mode, you cannot edit slide content, you have to press the edit button first, that will appear when you are in preview mode. Sounds complicated, but its easy. Go ahead and try it out.

Adding Content

Adding content is fast and intuitive. Remember, that in Fixed Content Mode you can only set one content, and in Changing Content Mode, you can set content for each slide. Just go ahead and press the + Button to add any blocks you like or start typing.

You can start creating your sliders now.