Logo

How to Create a Dynamic Post Slider Using Gutenberg Blocks

A dynamic post slider is a handy block that automatically takes content from a specific source and displays it to the visitors of your website or blog. We know all about the work you have to do to stay ahead of others. To make your content the very best both time and effort are needed. But even if you pour in the hours in creating your content, without an appealing presentation all your hard work can go to waste.  Presenting your updated content right at the forefront is also crucial to your website or blog.

That is why Gutenberg offers you one of the very best dynamic post sliders to automatically update your content. Long gone are the days of updating your post sliders every time you add new content to your website or blog. You can easily customize Gutenberg’s dynamic post slider to better suit your content. In this article, we will give a step by step guide on how to create a dynamic post slider using Gutenberg Post blocks.

Gutenberg Post Slider

Step One: How to add a Dynamic Post Slider

Creating a dynamic post slider using Gutenberg post blocks is as easy as pie. It is only a matter of click and add. Firstly you need to click on the “add block” icon on the upper left side of the page. Now you need to open your Gutenberg post blocks plugin that you have already installed. Here you will find the post blocks Gutenberg has to offer.

Clicking on the Post Slider #1 will add a dynamic post slider to your page. This post slider will have the default premade design. However, you can easily change the premade designs and tweak with settings to shape your dynamic post slider according to your website or content.

Step Two: How to Customize Your Dynamic Post Slider

Gutenberg Dynamic Post Slider Blocks
Dynamic Post Slider

Not only does Gutenberg’s Dynamic post slider come with exclusive premade designs but also with a wide range of options to better customize your post slider. You can easily customize your dynamic post slider according to your needs by tweaking with the options in the settings and the advanced section. A detailed guide is given below on the customizable options of Gutenberg’s dynamic post slider.

Premade Designs

The pressures of content creation more often than not eat up your time of customizing your post blocks. On the other hand, a mundane looking default design can drive your viewer away even when you have excellent content. That is why Gutenberg’s dynamic post slider comes with attractive premade designs.

Everything you need is already arranged. You can easily select your desirable pre-made design from the “Design” section of the block. These premade designs will save you time while offering a premium look to your post slider. Now you can add dynamic post sliders on the go.

General

You will find this widget under the settings section of the post slider. All general settings can be tweaked from here. This section gives you full control over your post slider. Tweaking with these options is easy as ever. Any widget or feature can be added from this section of the settings. For example, If you want to add a heading to your post slider, turning on the heading button will make a separate “heading” widget appear on the settings section. Similarly, you can easily remove widgets that are unnecessary for your content.

The number of posts can also be controlled from this section. Up to a total of 50 posts can be added in a single post slider. You can also change the height of your post slider from here. Each post slider can be aligned in three different ways. Autoplay and animation fade can also be activated from this section. Animation fade will create a smooth transition from one slide to another.

Query

Gutenberg’s dynamic post slider comes with its own query builder.  You can easily add many parameters with the use of this widget. There is no alternative to properly organizing your content for the convenience of the visitors of your blog or website. This is where Gutenberg’s dynamic post slider shines. You can use Gutenberg’s post slider both as a post and a page. This can easily be changed on the “post type” bar on the query section. You can also control the total number of posts. This widget lets you organize your content according to category or tag. You simply need to click on the respective buttons to change the parameter. To sort your content by a certain order you need to click on the “Order by” bar and select your method. Content from different posts can be added to your post slider using the “include post” bar. To do so you need to add the post id with a comma. Similarly, you can also exclude contents of different posts using the “exclude post” bar. You can change the number of offset posts by using the “offset post” bar at the end of the widget. This allows you to skip a number of posts before your dynamic post slider goes live.

Arrow

A dynamic post slider usually has an arrow on each side of the slider to manually navigate through the content of the slider. These arrows are crucial for both the look and the function of a dynamic post slider. You can easily customize your arrows as your content demands. Right at the top, you can choose from three different types of arrows on the “Arrow Style “ section. Each design will give your post slider a distinct look.

You even change the size, width, height, and vertical position of the arrows of your post slider. All of the options have their own boxes. Each measurement can be changed accurately by giving input in their respective boxes. The original arrows along with the hovering animation can be customized using the options beneath them. You can even change the color of arrows along with the background color.  The border and the box-shadow can also be changed according to your preferences from this section. These options are also available for the hovering animation.

Content Wrap

A content wrap summarizes and highlights the best parts of your dynamic post slider. A proper content wrap gives the visitors of your website an acute description of your post slider and promotes it. Gutenberg’s content wrap does this with excellence and gives you ample opportunity to customize. You can easily change the vertical and horizontal position of your content wrap. To do so you only need to click on one of the three position buttons of both the vertical and horizontal options.

The height and width of the content wrap can be changed by giving input on their respective boxes. You can change the options both in the normal and the hover mode. Each mode lets you change the background color and other options to better stylize your content. You can also change the inputs of border radius, box shadow, inner padding, and padding. Each option comes with their own set of boxes where you can give input to change the settings.

Image

Images are the soul and heart of a dynamic post slider. Proper images in the right format can engage the visitors of your website or blog like no other.  Similarly, a bland uninspiring presentation of your images can be unappealing to your visitors. That is why Gutenberg’s dynamic post slider comes with ample options for you to tweak with when it comes to images. You can even add hover animations to your images. For better customization, there are two modes with many options. In Normal mode, you can customize how your image will appear normally.

Where in the hover mode you can customize how your image appears when you put your cursor on it. To change from one mode to another you simply need to click on their respective buttons. You can easily change the grey scale in both modes using the gray scale meter right below the mode buttons. The radius of your images can also be changed from the radius option both in normal and the hover mode.

You simply need to insert your desired input into the “top”,” Right”, “Bottom” and “left” boxes to adjust the radius. A box shadow can also be added to your post slider with your desired color and size. Lastly, you can change the overlay type of the images by changing it on the “Overlay Type” box. You can have your pick out of the five overlay types.

Dot

Every post slider comes with dots that indicate the number of slides within that post slider. It also lets your visitors know which slide they are viewing. This function lets your visitor navigate through your dynamic post slider with precision. Without dots visitors easily become frustrated and confused. And confused, frustrated visitors more often than not leave your website or blog, never to return again. This is why many options are given to tweak within the dot widget in Gutenberg’s dynamic post slider. Firstly, you can adequately increase or decrease the space between the dots. You can do this by changing the input on the “space” box. 

The vertical and horizontal position of the dots can also be changed in the same way. Both active and inactive dots have their own options for you to tweak with. You can easily change the width and height of both by changing the input on their respective boxes. Even the background color and border can be customized to your preferences. Customizable options are also available for the box shadow and the border-radius. All you need to do is change the input on their respective boxes to customize them.

Read More

“Read more” is one of the most important parts of a dynamic post slider. It takes your visitors to a more elaborated piece of content from the one displayed in a single slide. This allows your visitors to navigate through your content more easily and comfortably. The “read more” section attributes much to the whole look of your dynamic post slider. Even here Gutenberg offers many options for you to tweak with.  Firstly the text in your post slider doesn’t necessarily have to be “read more”. You can change this text on the “read more” widget by typing in your desired text on the box at the top. There is usually an icon after the “read more” text. 

Gutenberg’s post slider offers you three stylish icons to add to your text. You can also omit the icon altogether if you feel like it. The size of the icon can be changed using the “icon size” bar.  You can change the color, background color, border, and border-radius of your “read more” text and the icon.  These can be changed both in the normal and the hovering state. For example, setting the color to black on the normal button will make the actual color of the text black.

On the other hand, setting the color to red on the hover button will turn the text red only when you put your cursor on it. Lastly, you can change the space between your “read me” text and other content on your post slider from all directions. To do so you only need to put your desired input on “spacing” boxes. You can change the spacing from all four directions. Similarly, the padding can also be changed.

Title

In the world of websites, a title is one of the most important things to be considered. A title not only serves as an introduction to your content but also plays an important part in SEO. A good title can go a long way with the visitors of your website. On the contrary, a poor title will not only drive away your visitors but also ruin your search engine optimization. Here at Gutenberg we understand this and offer you ample options to make your title excellent. For better results in SEO, you can aptly customize your title tags right at the top of the “title” widget. To do so you only need to change from one button to another. To change the position of your title you need to turn on or off the “below meta” button. As it suggests your title can be over or below the meta. You can also change the color of your title as well as the hovering color. To change the colors you only need to click on the respective boxes and choose from a wide spectrum of colors. In order to change the typography of your title, you have to click on the typography section. Here you will be able to change the font size, font type, font-weight, line height, letter spacing, and much more. Additionally, there are some decorations here for you to give your title some extra weight. Lastly, you can change the padding of your title from all directions.

Meta

A meta provides concise information about your post slider to the visitor of your website or blog. It is also visible to those who are searching for your content. Appropriate meta tags will simultaneously keep your content SEO friendly and easily accessible to your visitors. Gutenberg’s Meta widget has been created with such things in mind. It offers you many features to better customize your meta tags. Firstly, you can change the position of your meta from top to bottom and vice versa. You only need to click on the respective buttons to do that. Gutenberg offers you six distinct styles in which you can arrange your meta tags. You can easily choose the one you desire from the “style” bar. To separate your tags from one another you can use six different separators on the “separator” bar. On the “meta” bar you can add or omit your meta tags.  The typography of the text can be changed by clicking on the icon in the typography section. You can also change the color of the tags along with their hovering color. For these separate sections, colorful boxes indicating the chosen colors are present. The spacing, margin, padding also have their separate sections where you can tweak with the measurements. Lastly, a border and a background can also be added with your meta tags. You can choose the color of the background. In the case of the border, there are six different styles for you to choose from.

Category

Categorizing your dynamic post slider is crucial when comes to build a user-friendly website or blog. A lack of it can cause devastating confusion for the visitors of your website. Not only will this turn off your visitors but it will also ruin the reputation of your blog or website. Gutenberg’s  Category widget lets you categorize your post slider with precision and beauty. It offers you four different styles for the purpose of categorizing. You can change this on the “category style” bar at top of this widget. The typography can also be customized according to your preferences. All the usual options are available here for you to tweak with. You can change both the color of your text and the hovering color. Customization options for background color and the border is available for both the text and the hover animation. Border radius, spacing, and padding can also be changed according to your preferences. To do so you merely have to change the inputs on the four boxes of each.

Excerpt

An excerpt provides the visitors of your website or blog with a summary of your post slider. This helps your visitors understand what your post slider is about. Simultaneously, it promotes your content in an attractive way to lure in visitors. A well thought out excerpt can go a long way in generating much traffic for your website or blog. But much is dependent on the presentation of your excerpt along with the actual content. Gutenberg’s dynamic post slider gives you a lustrous presentation. You can either show the full excerpt or only part of it. To show the whole excerpt you only need to turn on the sliding button at the top of this widget. However, if you choose to show only a part of it, a bar will appear below the sliding button. From here you can control how much of your excerpt you want to show. You can also change the typography and color of the text. Both come with their usual options similar to the other widgets. Lastly, you can change the padding of your excerpt from all directions. To do this you have to put your desired input on the four directional boxes.

Step Three: How to finalize your dynamic post slider

After customizing your post slider to your heart’s content you would think all is done. But Gutenberg’s dynamic post slider comes with one extra step to polish everything to perfection. In the advanced section of this post block, you will find the necessary tools to make your dynamic post slider smoother. Firstly, you can easily control the z-index to better stack the elements.  You can do so by controlling the z-index bar. The margin and padding of the whole post slider can be controlled by changing the inputs on the four directional boxes of each. A background, border, and box shadow can also be added to the whole post slider. All these options are available under both the normal and the hover button. And of course, that means you can even add a hover animation with the background of your post slider. Adding custom CSS sheets to further customize your dynamic post slider is also possible. But you can trust us when we say that you won’t be needing it.  Lastly, additional CSS classes can be added from this section.

Final Remarks

The dynamic post slider of Gutenberg holds the future of WordPress inside it. This dynamic post slider is for you if you crave complete control along with stylistic beauty. Gutenberg’s post slider will give your website or blog a look of elegance while saving you time. Here everything is already prepared for your use. So why the delay? Grasp the future in your hand with the help of Gutenberg’s dynamic post slider and other post blocks. Get this amazing plugin now.

Written byAhmed Jubaer

Ahmed Jubaer is the Content Creator. An architect by profession, designer by nature, he is dedicated to helping readers navigate the online world of WordPress.

Leave a Reply

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