Blog Slider Widget [ PRO ]

The Blog Slider Widget lets you easily add eye catching post sliders anywhere on your website. This widget is typically used at the top of pages and goes great in conjunction with the Blog Widget.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.


Slides Setup

Blog Post Loop

Select Posts :

  • Click the Build post query button. This opens up the post query interface.
  • Under Post type make sure to select Posts.
  • If you want to display only a few posts click the Select Posts. Then just make a list of the posts you want.
  • If you want posts only from particular categories or tags, enter them in the Taxonomies field.
  • Define the number of posts to display in the Posts per page field. At the moment the widget does not support pagination. It’s a feature I may add in the future.
  • Modify the form further as you see fit. Then click the Save Query button.

Exclude current post : This field allows you to remove the current post from the query.

Exclude posts without a featured image : This setting will allow you to skip over posts that do not have a featured image set.

Image Size : Choose the image size. You can define the default sizes by navigating to Settings > Media.

Default Image : The image set here will be used as a fallback if the post does not have a featured image set. 

For bylines: use ||  %date% : The Date || %category% : List of Categories || %author% : Author name with link || %comments% : Number of Comments ||  to display custom fields

Byline above Title : This appears above the title.

Byline below Title : This appears below the title.

Title Tag : Choose the heading tag for the post title.

Show Excerpt : This displays the post’s excerpt.

Excerpt Length : Defines the maximum number of words for the excerpt. Leave blank if you do not want this feature.

After Excerpt : This appears if your excerpt is longer than the length you have entered above.

Read More Button : Check this if you want a button pointing back to your post.

Button text : Input the button text.

Text between Categories : This is the text between categories. By default it is set to , .

Responsive

This section is useful to control which elements appears for different screen sizes. The different options should be self explanatory.


Slider Settings

Adaptive Height : Changes the height of the slider with changes in the slider height.

Autoplay : Enables autoplay.

Autoplay Speed : The autoplay speed in milliseconds.

Pause Autoplay on Focus : Pauses autoplay on mouse hover.

Pause Autoplay on Hover : Pauses autoplay on slider focus.

Arrow Navigation : Enables arrow navigation.

Arrows only on hover : Displays arrow navigation only when mouse hovers over slider.

Previous Arrow : Icon for previous arrow.

Next Arrow : Icon for next arrow.

Dots Navigation : Enables dots navigation.

Pause Autoplay on Dots Hover : Pauses autoplay on dots hover.

Fade Transitions : Use fade effect while slides are changing.

Infinite Loop : Infinite loop sliding.


Blog Posts Styling

Design : Defines the layout of the content section on the slide.
Featured Image Overlay Color : The color that appears over the image. This is useful to give slides a slight darkening or lightening to create a contrast with the slide text.
Featured Image Overlay Opacity : Choose a number between 0 and 1. 0 is Transparent & 1 is Opaque. The higher the number, the less the effect of the Featured Image Overlay Color. Enter 1 if you do not want any background effect.
Content Background Color : The color that appears behind the content section. 
Content Overlay Opacity : Choose a number between 0 and 1. 0 is Transparent & 1 is Opaque. Enter 0 if you do not want any content background.

Text Align : This applies to title, bylines and excerpt.

Title Font Size : The titles font size. Enter the units.

Title Color : Choose the title color.

Excerpt Font Size : The excerpt font size. Enter the units.

Excerpt Color : Choose the excerpt color.

Byline Font Size : The byline font size. Enter the units.

Byline above title Color : Choose the byline above title color.

Make byline above title uppercase : Make the byline above title uppercase.

Links in byline above title bold : Add bold styling to links in the byline above title.

Byline above title Link Color : Choose the links color for byline above title. ex: the author link & category links.

Byline above title Link Hover Color : This color applies to link in the byline above title on mouse hover.

Byline below title Color : Choose the byline below title color.

Make byline below title uppercase : Make the byline below title uppercase.

Links in byline below  title bold : Add bold styling to links in the byline below title.

Byline below title Link Color : Choose the links color for byline below title. ex: the author link & category links.

Byline below title Link Hover Color :This color applies to link in the byline below title on mouse hover.

Button Theme : You can choose from Classic, Flat, Outline, 3D, Shadow and Modern.

Button Alignment : You can align the button to the left, center or right. You can also choose fullwidth to cover the width of the widget.

Button Size : Choose the size of the Button. Defaults to Standard.

Button Highlight Color : Typically used as button background.

Button Base Color : Typically used as text color.

Hover Effects : If checked will add an effect on mouse hover. The effect will vary depending on the chosen theme.

Click Effects : If checked will add an effect on mouse click. The effect will vary depending on the chosen theme.

Button Corners : Choose the shape of the Button. Defaults to Slightly curved.


Slider Styling

Icon Color : Arrow Navigation icon color.

Icon Size : Arrow Navigation icon size.

Icon Background : Arrow Navigation icon background.

Icon Border : Arrow Navigation icon border color.

Icon Border Width : Arrow Navigation icon border thickness.

Icon Padding : Distance around the arrow navigation icons. The background color will extend till here.

Icon Margin : Distance around the arrow navigation icons. Useful to create a gap between the slider and the slider edge.

Icon Border Shape : Choose between circle and square.

Dots Color : Color of the dots navigation.

Dots Size : Size of the dots navigation.

Dots Position : Choose to have the dots navigation below or at the bottom of the slider.