V4 Elements Posts Grid Estimated reading: 6 minutes 3 views Show your latest posts as neat cards. Each card has the picture, the title, a short text and a Read More link. Pick a grid or a list, choose how many columns, and you are done. No code needed. WIDGET Posts Grid LAYOUTS Grid and List PLAN Free A QUICK LOOK What You Will Build A grid of post cards. Point at a card and it lifts a little while its picture zooms in. Point at a card to see it lift BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: The cards show your posts. Give each post a featured image and a short excerpt, and the cards look their best. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Posts Grid is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Posts Grid under Dynamic Widgets and switch it on. Click Save Settings. The Posts Grid card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the grid in. Click the + button at the top left to open the Elements panel. Type Posts in the search box. Drag the Posts with the orange badge onto your page. It is the Posts Grid of this page. The Posts in the Elements panel (click to zoom) Tip: You can also find it in the AAE Post group of the Elements panel. Note: In the editor you see one sample card. This is only a preview. Your real posts show on your live page. STEP 3 Choose the Layout and the Content Open the Posts Settings section in the General tab. Choose the Layout: Grid or List. Set the Columns. The default is 3. Set Posts Per Page. The default is 6. Set the Excerpt Length (words). The default is 15. Switch Show Date, Show Excerpt and Read More Button on or off. Type your own words in Read More Text, for example Continue reading. Layout (1), Columns and Posts Per Page (2), Excerpt Length (3), the three switches (4), Read More Text (5) and Query (6) (click to zoom) Tip: In List mode, each post gets a full row, with the picture on the left. The Columns setting is not used. STEP 4 Choose Which Posts to Show Open the Query section. Choose the Post Type: Posts (default) or Pages. Choose Order By: Date (default), Title or Random. Choose the Order: Descending (default, newest first) or Ascending. Tip: Posts Per Page and Order together decide which posts show. With the defaults, you get your six newest posts. STEP 5 Make It Match Your Brand The card colors come from your site’s Global Colors. Set them once, and every card follows. Open Site Settings > Global Colors in Elementor. Primary is the color of the post titles. Accent is the color of the Read More link and of a title when you point at it. Text is the color of the excerpt. Tip: The pictures below use a dark slate Primary, an orange Accent #f05a35 and a soft gray Text. Note: The sample card you see in the editor does not change the cards on your live page. Use Global Colors for the look. STEP 6 See the Parts Open the Structure panel. The Posts has one Post Card inside. It is the sample card for the editor. The Posts (1) and its Post Card (2) (click to zoom) RESULT Final Result Grid Three columns, six posts per page. Layout: Grid, Columns: 3, Posts Per Page: 6 List Layout is List, Show Date is on and Read More Text is Continue reading. Layout: List SETTINGS Options Layout Default: GridGrid or List. Columns Default: 3How many cards in a row. Posts Per Page Default: 6How many posts to show. Excerpt Length (words) Default: 15How long the short text is. Show Date Default: OffShows the date above the title. Show Excerpt Default: OnShows the short text. Read More Button Default: OnShows the Read More link. Read More Text Default: Read MoreThe words of the link. Post Type Default: PostsPosts or Pages. Order By Default: DateDate, Title or Random. Order Default: DescendingDescending or Ascending. ID Optional CSS ID. GOOD TO KNOW More Details Cards are linked The picture, the title and the Read More link all open the post. Hover effect A card lifts a little and its picture zooms in when you point at it. Cards show as you scroll Each card fades in as it comes into view. Good for screen readers The Read More link also carries the post title, so each link makes sense on its own. HELP Troubleshooting I do not see the Posts in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Posts Grid. Click Save Settings, then reload the editor. Type Posts in the search box and pick the one with the orange badge. I only see one card in the editor That is the sample card. Open your page on the live site to see your real posts. The cards are empty or there are no cards Check that your site has published posts. Also check Post Type in Query. My cards have no picture Cards show the featured image of each post. Add a featured image to your posts. I see … at the end of the short text This shows when a post excerpt is longer than Excerpt Length (words). Raise the length, or write a shorter excerpt for that post. The colors are not what I want The card colors follow your Global Colors. Change Primary, Accent and Text in Site Settings > Global Colors. You Did It Your page now shows your latest posts as clean cards. If you face any problem, please contact our support team. We are happy to help.
