Wait! Are you leaving?

Try Gutenix subscription for Free !

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

How to create responsive post carousel in Gutenberg using ZeGuten block

ABOUT THE AUTHOR

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

How to upload SVG icons in WordPress
Prew post
  • May 07, 2020
  • 3 min read
  • 189

How to create responsive post carousel in Gutenberg using ZeGuten block

Not every user check websites exceptionally from desktop devices. Often it happens that we have only mobiles or tablets close at hand. That is why all websites should look amazing both on each type of device. Fortunately, if you have installed ZeGuten plugin, all your blocks can be attuned accordingly to the screen resolution. 

To add responsive posts carousel you should only add a carousel block to your page. You can create the carousel with any type of content inside. But in our case, we will create a WordPress post slider carousel. Let’s begin creating an amazing block that will impress every website reader.

Add WordPress post slider carousel

Find the page where you want to add the responsive posts carousel and open it in Gutenberg editor. To add block click on the + button and in the search field enter the name of the needed block. In our case, we should type the carousel and click on the block to paste it to your working field.

add carousel

The Carousel block comes with 3 items and 2 slides to show by default. To add more items and change the number of slides, you should click on the block and go to the General Settings in the right sidebar Moreover, in this section, you can also attune some more values and settings according to your needs.

variety of functions

To set the number of slides to show on the different devices we should click on tablets and mobile icons. We will choose 3 for desktop, 2 for tablet, and 1 for mobile.

vary number of slides

You can attune every item separately. For this purpose find the Item 1 Content, Item 2 Content, Item 3 Content tabs. Here you can add subtitle, title, and descriptions texts for header and middle parts of your items and change the buttons settings.

add image

When you have finished editing all content of your items, go to the Style Settings tab to stylize the block according to the website design. Here you can change the color, typography, paddings, etc for 3 different parts of your items. 

Notice that above each radius, padding, indent, height, size, margin, and width fields there are desktop, tablet, and mobile icons. Remember that you can set the values for each of these screen types separately to achieve a great view of your page.

style settings

Then you can change the arrows and dots settings in the Carousel Arrows and Carousel Dots tabs. 

Here you can also change the settings for different types of devices.

add arrows

To publish your carousel click on the Publish button and review the result.

the result

If you turn on the Mobile view you will see how different our carousel looks on different devices.

responsiveness

So we have achieved the result to build responsive posts carousel. Hope, our tutorial was useful for you and wish you good luck in creating your own WordPress post slider carousel.

2
Appreciate
Let’s compare two blocks default columns and ZeGuten Section block
Next post
How to upload SVG icons in WordPress
Prew post
Let’s compare two blocks default columns and ZeGuten Section block
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.