How to Create Gutenberg Post Slider in WordPress - WPXPO
up to 35% off
Days :
Hours :
Mins :
Seconds
Logo
Back To Blog

How to Create Gutenberg Post Slider in WordPress

Gutenberg Post Slider

A WordPress post slider is a handy block that dynamically takes content from a specific source and displays it to the visitors of your website or blog. Now with the latest update of WordPress, you can add Gutenberg Post Slider with a free Plugin. So how to add Gutenburg Post Slider in WordPress?

To add WordPress Slider using Gutenberg blocks you need to follow these four simple steps: 

1. Install and Activate the PostX Plugin.

2. Create a new page or start editing the existing page where you want to show the post slider.

3. Add post slider Gutenberg block.

4. Click on Publish or Update the page.

That’s all!

Gutenberg Post Slider

Easiest Way to Create Gutenberg post slider in WordPress

Not all WordPress users are expert developers. Now, the Gutenberg update has made it more difficult for new beginners. Don’t worry if you are a beginner I am going to show you the easiest way to add a WordPress post slider step by step.

Step – 1: Install and Activate the PostX Plugin

First of all, log in to your WordPress site. Go to the plugin section and click on the “Add New” button. Type PostX on the search bar and click on “Install”. Then click on the active and the plugin will be ready for use.

Install PostX
Install PostX

Step – 2: Create or Edit the existing page to add a slider

You can add a WordPress image slider to a new page or an existing page as well. For example, let’s at the WordPress Gutenberg image slider to a new page. Go to the page section and click on add new. 

Add New Page
Add New Page

Step – 3: Add the post slider block

Click on the plus icon from the blocks editor. Then choose the post slider block. The ready-made post slider will be added to the page.

Add Post Slider Block
Add Post Slider Block

Step 4: Publish or Update the page

Now, the slider is added to the page. Click on “publish” for the new page and click on “update” for an existing page. The image slider will be visible on the page.

Publish Post Slider Page
Publish Post Slider Page

How to Customize WordPress post slider with Gutenberg Block

As you already know that PostX offers a ready-made dynamic slider for WordPress. But you will be happier to know that the free version of this plugin also provides customization options.

Premade Designs

The pressures of content creation more often than not eat up your time 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

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.

Final Remarks

The dynamic post slider of PostX holds the future of WordPress inside it. It 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 PostX’s dynamic post slider and other post blocks. Get this amazing plugin now.

Like this article? Spread the word

Written byOmith Hasan

I am a professional blogger since 2016. I love to explore and write about different types of WordPress themes and plugins. When not writing, I try to learn and implement new SEO strategies.

Leave a Reply

Get Discount