Blog Widget Tutorial

Intro

Elementor Blog Widget in Premium Addons is one of the most powerful widgets for Elementor to display your posts or any custom post type. Filter posts by category, authors, tags, or any taxonomy you want. Elementor Blog widget supports custom post types, filters, pagination, carousel for posts. With Premium Blog widget for Elementor, you can select between five neat skins to show your posts.

Click here to check Premium Blog Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Blog Widget

Key Features – Elementor Blog

• General
• Query
• Featured Image
• Display Options
• Post Options
• Advanced Settings
• Carousel
• Pagination

1. General

You can select the general settings to create Elementor blog page to display your posts. Also, you can select the skin, layout and number of posts per page.

• Skin: Select the posts skin from various skins style: Classic, Modern, Cards, On Side and Banner.
• Content Offset: Set the offset of the content. Available only for Modern Skin.

• Grid: Enable it to show the posts beside each other, otherwise posts will show underneath each other as a list.

• Layout: Select the grid layout style even or masonry.
  • Even: Show posts beside each other but the height isn’t the same.
  • Masonry: An adaptable grid that adjusts the height and width depending on the posts used.
• Equal Height: Enable this option to make all posts the same height.
• Number of Columns: Select how many columns per row.
• Posts Per Page: Select how many posts to show per page.

2. Query

Query settings for Elementor Blog widget, you can from here select the source of the posts, you can select custom posts type. Also, you can filter by categories, tag, author and select specific posts. Generally, this option to select the posts to display on the Elementor blog page or Elementor section.

• Source: Select the source of the posts, you can select a custom post type.
• Categories Filter Rule: Show the posts that match specific categories or exclude them.
• Tags Filter Rule: Show the posts that match specific tags or exclude them.
• Filter By Author Rule: Show the posts that match specific authors or exclude them.
• Filter By Post Rule: Select posts to show or exclude them.
• Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
• Offset: Exclude a number of initial posts from being display.
• Exclude Current Post: Remove the current post from the query.
• Order By: You can choose to order the blog posts by the following attributes:
  • None
  • ID
  • Author
  • Title
  • Name
  • Date
  • Last Modified
  • Random
  • Number of Comment
• Order: Additionally, you can show the posts in descending or ascending order.
• Empty Query Text: Add a message to be shown when the query result is empty.

3. Featured Image

Featured Image settings are applied to post’s thumbnail (featured image). You can combine several different hover effects with color effects. You can view several of the effects in action on the demo page.

• Show Featured Image: Show or hide the featured image for the posts.
• Image Size: Set the featured image sizes.
• Hover Effect: Set a hover effect for the featured image:
  • None
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale
  • Blur
  • Bright
  • Sepia
  • Translate
• Height: Select the height of the featured images.
• Thumbnail Fit: Select between cover, fill and contain.
• Shape Divider: Graphic shapes that separate between post blog featured image and post blog content.

4. Display Options

• Title HTML Tag: Select the HTML tag used for the post title. Choose from H1 to H6.
• Show Author Image: Show/hide author image in cards skin.
• Author Image Position: Set image position vertically.
• Rows Spacing: Adjust the spacing between the rows in pixels, % or em.
• Columns Spacing: Adjust the spacing between the columns in pixels.
• Alignment: Optionally align the text of the blog posts to the left, right, or center.
• Scroll After Pagination/Filter: Enable this option to scroll to top offset of the widget after click pagination or filter tabs.

5. Post Options

The post options adjust the way the post content and the meta-information (such as the author and the publishing date) is presented:

• Show Post Content: Enable to show the post’s content.
• Get Content From: Select from where to display the post content, Post Excerpt or Post Content.
• Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
• Excerpt Type:
  • Dots: 3 Dots (ellipsis) will be displayed after the text.
  • Link: If you select Link, a link to the full post will be added after the text, and you can also change the link text. Also, select the width of the button.

Meta Information

• Enable or disable the following:
  • Author Meta
  • Date Meta
  • Categories Meta
  • Comments Meta
  • Tags Meta

6. Advanced settings

Filters

• Load More Posts On Scroll: Enable load more posts when user reaches the end of the page.
• Filter Tabs: Enable to add filter tabs.
• Get Tabs From: Get tabs filter from Categories or Tags. Please make sure to select the categories/tags you need to show from the Query tab.
• First Tab Label: Enter the first tab text.
• Alignment: Optionally align the filter tabs to the left, right, or center.
• Change Post Html Tag To Article: Set post container HTML tag to <article> instead of <div> for better SEO compatibility.
• Links in New Tab: Open post, author, category links in the new tab.

7. Carousel

With the Carousel, users can navigate through the list of posts by clicking the navigation arrows, or you can enable autoplay which will rotate the posts automatically.

• Enable Carousel: Enable or disable the post carousel.
• Auto Play: Enable or disable autoplay.
  • Autoplay Speed: set the autoplay speed for the carousel in ms.
• Slides To Scroll: Set how many slides to show in one scroll.
• Center Mode: Enables a centered view for one of the slides with partial next/previous slides. 
• Slides’ Spacing: set a spacing value in pixels [when Center Mode is enabled], so you can set how much partial view from the next/previous slides should appear.
• Navigation Dots: Enable the navigation dots for the carousel.
• Navigation Arrows: Enable the navigation arrows for the carousel.
• Arrows Position: Set the arrows’ position in pixels or em.

8. Pagination

• Pagination: Pagination is the process of dividing the posts into discrete pages.
• Posts Per Page: Choose the number of posts you want to display per page.
• Enable Pagination Next/Prev Strings: Enable Next and Previous buttons.
• Previous Page String: Change Previous button string.
• Next Page String: Change Next button string.
• Alignment: Optionally align the pagination to the left, right, or center.

Styles – Elementor Blog Widget

In the Style tab, you will be able to customize your Blog widget the way you want, to make it match and fit your needs.

• Filter
• Image
• Title
• Categories
• Metadata
• Content Box
• Button
• Tags
• Box
• Pagination
• Carousel Dots
• Carousel Arrows

1. Filter

• Typography: Adjust font settings and style it.
• Color: Select a text color for normal and active mode.
• Background Color: Select buttons color for normal and active mode.
• Border Type: Set a border type for filter buttons. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Box Shadow: Set a shadow for the filter and adjust its settings.
• Margin: Creates a space around the filter buttons in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the filter buttons in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

2. Image

• Plus Sign Color: Set a color for the plus sign when hovering on the images.
• Icon Color: Select a color for the cross-hair icon used with the hover effects.
• CSS Filters: You can also customize the images further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue.
• Hover CSS Filters: You can also customize the images further by selecting one of the available on hover filters: Blur, Brightness, Contrast, Saturation and Hue.

Shape Divider

• Color: Pick a color for shape divider.
• Height: Set shape divider height in px, em or percentage.

3. Title

• Typography: Adjust font settings and style it.
• Color: Select the color of the post title.
• Hover Color: Select the color of the post title when the user hovers over it.
• Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

4. Categories

Available only with On Side and Banner skins

• Typography: Adjust font settings.
• Categories: Style categories labels.
  • Color: Pick a color for category text.
  • Hover Color: Set a color for category text on hover state.
  • Background Color: Pick a color for category label background.
  • Hover Background Color: Set a color for category label background on hover state.
  • Border Type: Set a border type for category label.
  • Width: Set border width for category label.
  • Color: Pick a color for category label border.
  • Border Radius: Set the border radius for category label border.
• Margin: Creates a space around the categories labels in Elementor Blog Widget. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the categories labels in Elementor Blog Widget. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

5. Metadata

The Meta settings are the same as for the title:

• Typography: Adjust font settings.
• Metadata Color: Select the color of the post metadata.
• Link Hover Color: Select the color of the post metadata when the user hovers over the links.
• Separator Color: Set the separator color between the metadata.

6. Content Box

• Typography: Adjust font settings.
• Text Color: Select the text color for the content.
• Text Margin: Creates a space around the contect box in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Background Color: Select a background color and its opacity.
• Box Shadow: Add a box shadow around the post content.
• Margin: Creates a space around the content box in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the content box in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

7. Button

• Typography: Adjust font settings as per your needs.
• Spacing: Set the space between the button and the content.
• Color: Select the color of the read more text.
• Background Color: Select the background color of the read more text.
• Hover Color: Select the color of the text when the user hovers over the link.
• Background Color: Select the background color of the text when the user hovers over the link.
• Border Type: Set a border type for button. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Margin: Creates a space around the button in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the filter button in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

8. Tags

• Typography: Adjust font settings as per your needs.
• Color: Select the color of the tags.
• Hover Color: Select the color of the tags when the user hovers over the links.

9. Box

• Background Color: Select the post box background color.
• Border Type: Set a border type for the box. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Advanced Border Radius: Apply custom radius values for Elementor Blog widget box. Get the radius value from here.
• Border Radius: Insert border radius values.
• Spacing: Creates a space around the box in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the box in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

10. Pagination

• Typography: Adjust font settings as per your needs.
• Color: Select the color of the numbers in normal, hover and active statues.
• Background Color: Select the background color of the numbers in normal, hover and active statues.
• Border Type: Set a border type for the pagination box. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Advanced Border Radius: Apply custom radius values for Elementor Blog widget pagination. Get the radius value from here.
• Border Radius: Insert border radius values.
• Spacing: Creates a space around the pagination box in Elementor Blog Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the pagination box in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).
• Overlay Color: Overlay color when switching from one page to another.
• Spinner Color: Select the spinner color.
• Fill Color: Select the fill color for the spinner

11. Carousel Arrows

• Color: Select the color of the arrows.
• Size: Set the arrow size in Pixel (px), Em (em), or Percentage (%).
• Background Color: Select the arrow background color.
• Border Radius: Set the border radius for the arrow.
• Padding: Creates space around the arrow in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

12. Carousel Arrows

• Color: Select the color of the arrows.
• Size: Set the arrow size in Pixel (px), Em (em), or Percentage (%).
• Background Color: Select the arrow background color.
• Border Radius: Set the border radius for the arrow.
• Padding: Creates space around the arrow in Elementor Blog Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).