Design creatively crafted blog posts with this widget and make your posts more appealing to your readers. 

Video Instruction #

Using Blog #

You can use the blog tool on your web page easily to display different blog posts in creative and eye catchy way. 

Step 1 #

From the menu bar on the left-hand side, select Blog. Drag and drop the widget on the area you want it to be. 

Step 2 #

In the next stage, you will see the three different sections named Content, Style, and Advanced

Blog widget edit section on Elementor page builder

Step 3 #

From the Content section, you can edit the layout of the posts on your page.  Here you have the option to customize the layout of the blog, image size, number of columns. You can also specify the items you want to keep visible on the blog posts. The available options are category, tags, show image, show date, open in a new window, and more. 

Blog widget layout settings tab

Step 4 #

By using the Query section, you can pick the source of the posts, how many posts will be visible per page, order of the page, order sequence, enable/disable sticky posts with ease. 

Blog query settings tab

Step 5 #

In the Style section of the page, you can design and customize the following sections
: Title, Thumbnail, Content, Category, Author and Date. 

Blog widget's Style edit section highlighted

Title: From the Title section you can change the color of the text, add offset and padding options to the title to make it visually different. You can also tweak the hover effect to bring a different touch to the post title. 

Blog widget title settings tab

Thumbnail: The Thumbnail can be easily customized with this tool as it gives you the flexibility to edit the width, height, offset, padding and border of the thumbnail you are using on your posts. 

Blog widget thumbnail settings tab

Content: From the Content section, you can customize the color, offset settings, and padding of the content that is visible with the blog. 

Blog widget content style settings tab

Category: In the Category section, you can easily change the color of the category, add background color to the category to make it stand out visually. You can also add offset, padding, and border-radius into the category of your blog. 

Blog widget's category style settings tab

Author: In the Author section, you can easily change the color of the author’s name, add background color, and more. You can also add offset, padding, and border radius in the author’s name to make the design unique. 

Blog widgets author style settings tab

Date: From the Date section, you can easily change the color of the date, add background color, and more. You can also add offset, padding and border radius in the date to make the design different. 

Blog widgets date settings tab

Step 6: #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Blog widgets advance settings tab

You will also get the chance to edit and customize the following options: 

  • Motion Effects
  • Background
  • Border
  • Positioning
  • Responsive
  • Attributes
  • Custom CSS

Motion Effects #

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your widget look different. 

Blog widgets motion effects settings tab

Background #

If you want to customize the background with specific color, gradient, or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type, and more.

Blog widgets background settings tab

Border #

If you want to add any line, box, dots, and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Blog widgets background settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section, you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings. 

Blog widgets positioning settings tab

Responsive #

You can check the responsiveness of the widget if you toggle through the available options. However, the change of the widget will be only visible on the live page or preview, not in the Elementor.

Blog widgets responsive settings tab

Attributes #

With Attributes, you can add custom HTML attributes to any element. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Powered by BetterDocs