V4 Elements Post Title, Image, Excerpt and Content Estimated reading: 6 minutes 3 views Four small widgets that show the parts of a post: its Title, its Image, its Excerpt and its Content. Place them in any order to design your own blog post layout. No code needed. WIDGETS Post Title, Post Image, Post Excerpt, Post Content GROUP Blog Widgets PLAN Free A QUICK LOOK What You Will Build A post layout with a big rounded picture, a bold title and a short orange summary. All of it comes from the post itself, so you never type the words again. The three widgets together BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: These widgets show the data of the post they are placed on. Give your post a featured image and an excerpt (the short summary box in the post editor), or those widgets will have nothing to show. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widgets Good news: the four widgets are already on. If you ever need to turn them on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Blog Widgets, find Post Title (1), Post Excerpt (2), Post Image (3) and Post Content (4), and switch them on. Click Save Settings. The four widgets under Blog Widgets (click to zoom) STEP 2 Add Them to Your Page Open a post in the Elementor Editor and drop the widgets in. Click the + button at the top left to open the Elements panel. Type the name in the search box, for example Post Title. Pick the one with the orange badge. Drag it onto your page. Do the same for Post Image and Post Excerpt. Tip: A column (Flexbox) with a gap between the widgets keeps them tidy. Note: As soon as you drop a widget, it shows the real title, picture or excerpt of the post. STEP 3 Post Image Shows the featured image of the post. Select it and open Image Settings. Choose how the picture fills its box in Object Fit. The default is Cover. Choose the shape in Aspect Ratio. The default is 16:9. Choose the Image Size. The default is Large. Optional: open Link Settings to make the picture a link, or Caption Settings to show a caption. Object Fit, Aspect Ratio and Image Size (1) (click to zoom) Tip: In the Style tab, give the image rounded corners, like 20, for a soft look. STEP 4 Post Title Shows the title of the post. Select it and open Title Settings. Choose the HTML Tag. The default is H2. Use H1 for the main title of a post page. Use Limit By and Limit to keep long titles short. The default is a limit of 2 lines. Optional: add a Link, for example to open the post. HTML Tag and Limit By (1), Limit (2) and Link (3) (click to zoom) Tip: Change the font size, weight and color in the Style tab. STEP 5 Post Excerpt Shows the short summary of the post. Select it and open Excerpt Settings. Choose the HTML Tag. The default is p. Use Limit By and Limit to set the length. The default is Line Clamp (CSS) with a limit of 3 lines. HTML Tag and Limit By (1) and Limit (2) (click to zoom) Note: The text of the excerpt comes from the Excerpt box of your post. If it is empty, WordPress creates one from the start of your content. STEP 6 Post Content Shows the full text of the post, the same words you wrote in the post editor. It has no settings of its own. You style it in the Style tab. Note: Use Post Content in a layout that is not made of the post itself, like a post template. If you drop it inside the very post it shows, the post tries to show itself. Tip: In the Style tab, set the font size, the color and the line height to make long text easy to read. RESULT Final Result Post Image, Post Title and Post Excerpt in one column. The image has a corner radius of 20, the title is 40px and bold, and the excerpt is orange. The finished post header SETTINGS Options Post Image: Object Fit Default: CoverHow the picture fills its box. Post Image: Aspect Ratio Default: 16:9The shape of the picture. Post Image: Image Size Default: LargeWhich size of the picture is used. Post Image: Link, Caption Optional link and caption (Link Settings and Caption Settings). Post Title: HTML Tag Default: H2The heading level. Post Title: Limit By, Limit Default: Line Clamp, 2Keeps long titles short. Post Title: Link Optional link. Post Excerpt: HTML Tag Default: pThe tag of the text. Post Excerpt: Limit By, Limit Default: Line Clamp, 3How long the excerpt is. Post Content No settings. Style it in the Style tab. GOOD TO KNOW More Details Always up to date If you change the post, the widgets change with it. Good with Loop Grid The same ideas are used inside a Loop Grid card. See the Loop Grid page. The page title tag Use only one H1 on a page. Keep Post Title on H2 if your theme already has an H1. HELP Troubleshooting I do not see the widgets in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and switch them on under Blog Widgets. Click Save Settings, then reload the editor. Search for the name and pick the one with the orange badge. The Post Image is empty or shows a placeholder Your post has no featured image. Set one in the post editor. The Post Excerpt is empty or short Write an excerpt in the post editor. Or raise the Limit in the widget. My title is cut off Raise the Limit in Title Settings. Post Content repeats the page Do not place Post Content inside the post it shows. Use it in a separate layout, like a post template. You Did It Your post layout now builds itself from each post. If you face any problem, please contact our support team. We are happy to help.
