Create an awesome and nifty blog list with this widget. The posts will look clean and easy to read with the help of this widget. 

Using Blog List #

You can creatively use the Blog List tool by using the following tools:

Step 1 #

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

Step 2 #

In the following section, you can work with the following sections: Content, Style, and Advanced

Step 3 #

From the Preset option, you can pick from the different preset styles, add images and customize the image according to your requirement. 

Blog Lists preset settings tab

You can customize all the other elements that are part of a blog list. such as excerpt, excerpt length, thumbnail, author name, date, read more options, opening in new tabs, and more. 

Blog Lists preset settings tab

Step 4 #

In the Query section, you can customize the source of the post, the number of pages per post, the order sequence, and more. 

Blog Lists query settings tab

Step 5 #

From the Style section, you can edit the following elements: General. Title. Content, Author, and Read more

General: In the General section, you can modify alignment, padding, margin, border type, and box shadow to make your blog list look creative. 

Blog Lists general style settings tab

Title: In the Title section, you can edit the typography to make your titles stand out. Add padding to ensure visual correctness and margin to keep the page eye soothing. 

Blog Lists title settings tab

Content: You can modify the typography of the contents of the blog list. Plus, add colors, padding and margin to make your blog list more vibrant. 

Blog Lists content settings tab

Author: In the Author section, you can modify the typography of the author name. Plus you can make it visually attractive by tweaking the padding, margin, and text color of the author name. 

Blog Lists author settings tab

Read more: Similar to the previous sections, you can edit the typography, padding, margin, and text color of the “read more” section in your blog list. 

Blog Lists read more 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 Lists advanced 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, motion, lightspeed, and more effects to make your widget look different. 

Blog Lists motion effects settings tab

Background  #

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

Blog Lists background settings tab

Border #

If you want to add any line, box, dots, and other design variation as the 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 Lists border 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 Lists 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 Lists 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