How to Create a Slider from Blog Posts in WordPress – WP Pagebuilders

In WordPress, you can display blog posts on your website in a wide range of ways, including a slider. In this post, we will show you how to create a slider from blog posts on your WordPress site using Prime Slider.

There are a bunch of slider plugins out there, but they mostly only allow you to create a slider from images. Some slider plugins might allow you to add elements like text or button, but it’s exceedingly rare to find a plugin that is capable of turning blog posts into a slider. One of the plugins that have such an ability is Prime Slider. In case you use Newspaper theme, you don’t need to install any extra plugin. tagDiv Composer (the default page builder of Newspaper), has a shortcode — the Slide shortcode — to create a slider from blog posts. Or, if you use Divi, you can use the Post Slider module to achieve the same thing. If you don’t use Newspaper or Divi then Prime Slider is a great option.

A brief intro about Prime Slider

Prime Slider is a slider plugin developed by BdThemes. Unlike other popular slider plugins like Slider Revolution, Master Slider, and Smart Slider 3, Prime Slider is developed exclusively for Elementor. So technically, Prime Slider is an Elementor add-on. Prime Slider is released as a freemium plugin. You can use the free version to create a slider from blog posts. Once installed and activated, Prime Slider (free version) will add the following widgets to Elementor:

• Blog
• Dragon
• Flogia
• General
• Isolate
• Multiscroll
• Pagepiling
• WooCommerce

The widgets that you can use to turn blog posts into a slider are Blog and Flogia.

How to create a slider from blog posts using Prime Slider

As mentioned, Prime Slider is technically an Elementor add-on. So, to use it, you need to have Elementor installed and activated on your WordPress. You can use Elementor Free to use Prime Slider. Never used Elementor yet before? You can read this guide to learn how to use Elementor.

Before getting started, make sure you have installed and activated both Elementor and Prime Slider on your WordPress.

First, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. Clicking this button will take you to the Elementor editor.

Before adding any widget, you can set the page layout first. To do so, click the gear icon on the bottom-left corner on the Elementor settings panel (panel on the left side). You can set the layout from the Page Layout option under the General Settings block.

As we mentioned, there are two Prime Slider widgets that you can use to turn blog posts into a slider: the Blog widget and the Flogia widget. In this example, we will use the Blog widget. Once done setting the page layout, add a new section and add the Blog widget from the left panel to the canvas area. You can find the Blog widget on the PRIME SLIDER widgets block.

As you can see, the widget will automatically turn your blog posts into a slider. You can then go to the settings panel to customize the slider. First, you might want to change the skin of the slider. To do so, simply select the skin you like from the Skin option under the Layout settings block under the Content tab. There are four skin you can choose from.

From this settings block, you can also set the aspect ratio of the slider as well as disabling/enabling the elements of the slider like site logo, site menu, post title, post excerpt, social media icons, and so on.

By default, your slider consists of three slides (posts). The post on each slide is taken from the latest blog posts on your site, from all categories. If you want it, you can set Prime Slider to display blog posts from specific categories to the slider. You can also set the number of slides. To do so, open the Query block and set the Source to Manual Selection then select the categories you want (you can select multiple categories). To set the number of slides, simply change the number on the Limit option.

To set the animation behavior, you can open the Animation block. From this block, you can enable/disable the autoplay, pause on hover, logo animation, and so on.

Styling up the slider

Once done making the basic settings on the Content tab, you can switch to the Style tab to style up the slider. There are three styling option blocks you can open:

• Header

If you enable the logo, menu, and offcanvas elements, you can open this block to set the typography and color of those elements. Otherwise, you can ignore this block.

• Sliders

You can open this block to style up the post title, post excerpt, and read more button. Simply click the tab of each element to open the styling options. You can set things like the typography (font size, font family, font style, and so on), and text color.

• Navigation

You can open this block to style up the slider navigation (arrows and dots). You can set things like the color of the arrows/dots, border radius, and border radius.

You can play around on the Style tab to style up the slider. Once you are done, you can click the PUBLISH button to publish your page.

If you want to create a full-width slider, you can make the setting on the section that host the slider. You can set the layout to Full Width and set the Columns Gap to No Gap. Read this post to learn more.