The7 Popup

This widget is supposed to be used inside of a Loop Item (fig. 1.1) template in case you’d like to display post/product content in a popup (fig. 1.2).

Fig. 1.1. Popup Widget.

Fig. 1.1. Popup Widget.

Fig. 1.2. Post Content Inside of Popup.

Fig. 1.2. Post Content Inside of Popup.

How to use

First of all, you need to create the Popup post preview under Templates -> Popups -> Add new (fig. 2.1):

Fig. 2.1. Creating Popup.

Fig. 2.1. Creating Popup.

Use Elementor dynamic content in order to design the popup.

Then, edit Loop Item template and add The7 Popup widget there (fig. 1.1). Select the previously created popup in its Content settings (fig. 2.2):

Fig. 2.1. Select Popup.

Fig. 2.2. Select Popup.

For example, you’d like to open the popup on post title click. Select Heading widget -> Advanced tab -> CSS ID and choose “Post ID” (fig. 2.3):

Fig. 2.3. Configuring Widget ID.

Fig. 2.3. Configuring Widget ID.

Click on the “Post ID” again and add the Before “popup-post-id-” prefix (fig. 2.4):

Fig. 2.4. Adding Widget ID Prefix.

Fig. 2.4. Adding Widget ID Prefix.

That’s all! Save the changes. The7 scripts will do the rest. View your posts/products grid and try opening the post preview.