How to use post widget

Sarfraz
Sarfraz

We can simply create a page and give it a name like a blog and then edit that page with the Elementor and then take a hero block and then take a section and then drag and drop a post to that section. It will automatically load all the posts we have either created or given by the theme. To edit those posts, we will click on the pencil button and then design accordingly.
Note:- When we want to add the background color of the post area, we will select the box and the pencil icon will target all the posts. To get more options, we will use skin type classic. 

Under the class section, we will get Columns [To display no. of columns in one row], Posts Per Page[To display no. of posts on one page], Image Position[To display images top, left, bottom, right], enable Masonry layout[To display content more clearly, image size may be different], set Image Resolution[Keep full for better result when you zoom], Title display [To display title of the post], Excerpt Length [To display some of the contents and hide the rest, to display some of the contents, we will go to post>>copy the content you want to display>>paste under Excerpt input box if Excerpt input box not available, we will click on the screen option and tick Excerpt.
Meta Data [It will show what you select from dropdown such as date[when post was created], time, comment[commented or not] under Title Section], Read More[To display read more button] button, and more. The Automatic Align button “Yes” will keep the button at the bottom for a better appearance. 

We use Query to select the source of the post.  If you set it as a page, you will get all the page information you have created. You can also use Manual to select a post, or page manually as a post. For more details visit 

More Posts

Scroll to Top

Step 1:- Choose the section on which you want to add the shape divider
Step 2 :- Select the section >> Style >> Shape Divider
Step 3:- If the above one does not work, add a section wherever you want and give it any height, and then the background color and then shape the divider shape and the set color accordingly.

Step 1:- Take two columns of equal size
Step 2:- On the left section you can use widgets of headings, text, buttons, or anything of your choice
Step 3:- Design the left section the way you want.
Step 4:- Set a background image in the entire section, not the left section
Step 5:- Select the left section and give margin from the top and bottom
Step 6:- In the main section column gap should be no gap under the layout and the background overlay will have a gradient color, the first color should be your back
background-color so we will take white color, location 40% to show 40% white background, and the second color should be transparent and location 0
% and Angle should be 90 degrees and opacity 1
Step 7:- In the mobile screen, set margin 0 to the first column add the same image in the second column, and then change
the position of the column, target the main section > advanced > Responsive > reverse column(To bring first column to second number) and then hide this image on tablet and desktop

Step 1:- Elementor >> Settings >> Features Tab >> Page Transitions [should be default or active] >>Save Changes.

Step 2:- Go to the site settings by opening any page with Elementor from where we drag and drop widgets. So, site settings >> page transition >> page transition to style the “Preloader page” and then preloader to choose the types of preloader.

For more info visit Youtube

First we will target the section we want to go on clicking any text and give it a name under advance >> css id (give any name) and now go to the text section and under link pass #name and update

We will create any template we want and then copy the short-code of the template available at dashboard >> template >> popup >>copy the shortcode. Now to use it, we will go to any page or post where we want to add that template and then drap a drop “shortcode” widget and inside the section past the shortcode that we copied and update