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.

Layouts

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us