How to Create an Image Slider with Gutenberg and PublishPress Blocks

The Advanced Slider block in PublishPress Blocks lets you create image sliders (carousels) to present them on posts, pages, or even custom post types on your WordPress site.

After finishing this tutorial, you will be able to insert an image slider in the Gutenberg editor, and configure all its settings.

Let's start!


Step #1. Install the Plugin


Step #2. Create a Post

  • Click Posts > Add New.
  • Enter a proper title.
  • Click the ā€˜+ā€™ symbol or type / to search for the slider block.
  • Select Images slider
200922 Advg Slider 001
200922 Advg Slider 001

You will be prompted to add images, to start using the block.

  • Click Add images.
  • Select 4-5 images from your Media Library or upload them.
  • Give the images a proper alt text.
  • Click Select.
200922 Advg Slider 002
200922 Advg Slider 002

Step #3. The Slider Settings

The settings on the right column apply to each one of the images within the slider. 

  • Write a proper title and description for the first image.
  • Click Action on click > Open custom link on the right column.
  • Enter the link to where you want to redirect the users when clicking on it.
200922 Advg Slider 003
200922 Advg Slider 003

Repeat the process of adding custom text and a link to each one of the images. You can make use of the thumbnail navigation at the bottom to select, rearrange, or delete the image.

200922 Advg Slider 004
200922 Advg Slider 004
  • Change Hover color, Title color, and Text color to your liking.
  • Leave the default Text Alignment values.
  • Click Publish twice.
200922 Advg Slider 005
200922 Advg Slider 005

You will see the slider on your published post. It has an arrow-navigation on both sides and it also has dot-like navigation.

200922 Advg Slider 006
200922 Advg Slider 006

Step #4. The Slider Global Settings

  • Click PublishPress Blocks > Configuration > Default Blocks Config.
  • Click the cogwheel beside the Images slider block.
200922 Advg Slider 007
200922 Advg Slider 007

These are the default configuration options for the image slider, that is, you can set your preferences once, and all the image sliders you create from that moment on will inherit these settings by default.

200922 Advg Slider 008
200922 Advg Slider 008

You can play a little bit with these options and proceed to create a new carousel to test them. 

As you can see, creating an image slider is a straight and simple process with the PublishPress Blocks plugin for WordPress. 

Thanks for reading! If you liked this feature, you find enjoy other PublishPress Blocks features including the contact form block, table of contents, accordion block, testimonials display and count up block.

2 Comments

  1. How do you hide the slider in a mobile application?

    Right now I’m using a special app to use a different page for mobile home. But I wanted a cleaner approach.

Leave a Reply

Your email address will not be published. Required fields are marked *