The Post Grid widget
The SK post grid widget is an element that allows you to display a grid of posts. What is different with our approach is that you can optionally open the posts in a popup window, without leaving the page, making it an ideal solution for one-pagers.
The widget offers three post layout styles, with more to come. The two styles are identical to elementor's grid and classic styles. We kept those identical in case you want to use these layouts to trigger the popups. Our addition is the cover layout, which outputs the blog posts as a grid of tiled covers.
You have complete flexibility on styling this layout, and achieve great-looking tiled grids for your posts.
Opening Posts in a Popup
Regardless of which of the available layouts you will choose, in the Content tab of the widget you will find a toggle control that -when active- will allow you to choose a popup template on which to load the content of your posts. First, we need to create this popup template.
1. Create the Popup template
It makes sense that we need to create a layout for the post Elements that will appear inside the Popup. Let's create a new Popup in the Popup editor.
2. Set the Dynamic content preview
To preview the popup content as a post, it will help a lot to go to the Popup Settings \ Preview Settings and choose to preview the dynamic content as post.
3. Add the dynamic Elements
Next, we need to choose the post elements and meta that will display in the layout. Let's drag in the layout the following widgets:
- Featured Image
- Post Title
- Post info
- Post Content
Let's drop inside the editor the first three widgets, title, meta and featured image.
Displaying the post content
You will notice that although you can drop the Featured Image, Post Title and Post Info widgets, Elementor does not make available the Post Content Widget for Popups.
To overcome this obstacle, we needed to introduce the SK - Modal Content widget, which will simply display the post content inside the popup.
4. Back to the Posts Grid
Now that we have created the layout for the popup and added the dynamic elements, let's go back to the post grid widget and select the popup we just created.
Now when you click on one of the posts, the content will open in the Popup. You can refine the popup animation, overlay and general style at the Popup template itself.