Blog Widget

The Blog Widget can be placed anywhere on your site and can use any of our five highly customizable design layouts. You can combine the variations of the blog widget to create appealing magazine or news pages. You can create custom archives using the handy navigation feature.

DEMO


Title : The title appears above the blog posts.


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.


Post Format Icons

Select icons for the Standard, Aside, Gallery, Link, Image, Quote, Status, Video, Audio & Chat.

Icon Color : Choose the icon color.

Icon Size : Choose the icon size.

Background Color : Choose the icon background color. This is an optional field.

Background Corners : Choose the icon background shape. Defaults to Sharp.

Show Icon : Choose to show icons always or only on hover.


Design

Layout : This is the most important field.

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

Image width : Uncheck this to disable fullwidth images.

Image fullwidth for small screens : Checking this will automatically make the images fullwidth on small screens. This applies when you have images to the left or right of your content. In smaller screens the image will move above the content.

Show Format Icon : Checking this will disable format icons for the widget.

Post Height : Uncheck to disable equal height for all posts.

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

Show Content : This displays the content that you have entered in your post’s Editor. If checked, the excerpt will automatically be disabled.

Show Excerpt : This displays the post’s excerpt.

Excerpt as a link : Convert the excerpt into a link.

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.

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.

Byline after excerpt : This appears below the excerpt.

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

Columns : This defines the maximum columns for your posts. The widget is responsive, so will automatically adjust for smaller screens.


Styling

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

Image Expands on hover : This will expand your image on hover.

Image Overlay Color : The color that appears over the image on hover.

Image Overlay Opacity : Choose a number between 0 and 1. 0 is Transparent & 1 is Opaque.

Text distance from the left : Creates a gap to the left of the post. Applies only to the ‘No Image’ layout.

Gap between posts ? : Should there a margin between posts.

Gap Below Posts : This is the gap between posts.

Content Background Color : This sets the background color for the title, bylines, excerpts and button section.

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 Color : Choose the byline color.

Byline Links Color : Choose the byline color for links. ex: the author link & category links.

Byline Highlight Color : This color applies to link in the byline links & title on mouse hover.

Make links in Byline bold : This makes all links in byline bold. It is useful to emphasise category, author links.

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.


Navigation

Use navigation? : Enable Navigation

Type : Choose between the default navigation and Ajax.

ID : This is needed only if ajax is selected. Should be unique on the page. Must begin with alphabets[A-Za-z]. Should not contain spaces. Does not appear on the front-end.

Links : Choose between next/previous buttons and pagination.

Older Posts Text : Text for link to older posts.

Older Posts Icon : Icon accompanying text for older posts.

Newer Posts Text : Text for link to newer posts.

Newer Posts Icon : Icon accompanying text for newer posts.

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

Navigation Alignment : You can align the button to the left, center or right.

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.