Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Responsive‌ ‌image‌ ‌carousel‌ ‌in‌ ‌Gutenberg‌ ‌using‌ ‌ZeGuten‌ ‌block‌


I work as a copywriter at Gutenix. Our company creates products based on the Gutenberg WordPress editor.

Let’s compare two blocks default columns and ZeGuten Section block
Prew post
  • May 19, 2020
  • 3 min read
  • 247

Responsive‌ ‌image‌ ‌carousel‌ ‌in‌ ‌Gutenberg‌ ‌using‌ ‌ZeGuten‌ ‌block‌

Responsiveness is an important feature for every website. Not everyone checks surfing the web exceptionally using desktop devices. Sometimes we have only tablets or mobiles close at hand. And that is why your website should be adaptive to any type of device screen. The websites that have mobile versions are more popular than websites that can be displayed only on desktops. That is why it’s important to apply a responsive image carousel on the websites.  

Fortunately, if you download the ZeGuten plugin, this problem will be solved. All ZeGuten blocks are responsive and include separate settings for different screen resolution.

From this tutorial, you will learn about how to create a responsive image slider in WordPress and allow users to overview your photos from any device they want. 

Bear in mind that using the ZeGuten carousel block you can create the carousel with any type of content inside whether it is text, media, or posts. But in our case, we are going to create an image carousel in Gutenberg editor. Let’s start creating an eye-catching element. 

Add image slider to WordPress

Open the page where your responsive image slider for WordPress will be placed and start editing it with the Gutenberg editor. 

When the editor has opened, click on the + button or type /carousel to add an image carousel in Gutenberg. Click on the appeared block to paste it to our working field.

responsive image carousel

By default ZeGuten carousel block provides you with 3 items in general, 2 slides to show, and 1 slide to scroll. If you need more items you can change their number by clicking on the block and finding the General Settings tab in the right sidebar. Furthermore, in this section, you can also enable or disable the arrow, dots, infinite loop, set autoplay, etc.

responsive image carousel

Attune the responsive image carousel

To start attuning our image slider according to different screen types click on the desktop, tablet, or mobile icons. We can set a different number of slides to show on the different devices. We will choose 3 for desktop, 2 for tablet, and 1 for mobile.

responsive image carousel

Then we are going to change the content of each item. For this purpose, we will use the properly Item 1 Content, Item 2 Content, Item 3 Content tabs. There is an ability to add subtitle, title, and description texts for the header. In the item footer, you can enable a button. 

As we are going to create a responsive image carousel WordPress we don’t need the text. So, delete the simple text and leave these fields empty. Then change the background type from background color to image background.

Repeat these actions with every item.

responsive image carousel

When you have finished editing all your items, cross to the Style Settings tab to start stylizing the carousel according to your tastes.

Notice that above such fields as radius, indent, padding, size, margin, height, and width there are desktop, tablet, and mobile icons. Remember that you have the ability to apply different values for various screen types to achieve a better view of your carousel.

Then if you enabled the dots and arrows you can attune them in the proper Carousel Arrows and Carousel Dots tabs. 

In these sections, you can also change the options for different screens separately.

When you have finished stylizing your image carousel in Gutenberg click on the Publish link. Then check the result.

responsive image carousel

Turn on the Mobile view to compare how differently our carousel looks on desktop and mobile devices.

GutenMag — True Gutenberg WordPress Theme for Magazines & Blogs
Next post
Let’s compare two blocks default columns and ZeGuten Section block
Prew post
GutenMag — True Gutenberg WordPress Theme for Magazines & Blogs
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.