In some cases you may want to display a grid of posts but rather then linking to the posts you want to display the post content on the same page in a pop-up window. Luckily this is very easy in Total.
To create a grid with a pop-up window for the post content all you need to do is insert the Post Cards element and set the “Link Type” to “Modal Dialog“.
Notice there are 2 options”Modal Dialog” and “modal Popup”. The first option uses the newer modern HTML dialog window and the later uses the FancyBox lightbox script. Using the “Modal Dialog” option is more efficient and recommended.
Customizing the Modal Popup Window
By default the modal popup window will simply display the post content as added in the editor for that post. For more control you can go to Theme Panel > Dynamic Templates and create a new template (select the “part” type) which you can use for the modal window.
By creating a dynamic template for the modal window you can give each popup the same design and control it globally.
It is NOT recommended that you use a page builder (WPBakery, Elementor, other) for each post. This makes it impossible to control the design globally for all the popup windows. And if you need advanced data for each post and not just plain text content or featured media, we recommend you create some custom fields.
Once you’ve created your template part for the Modal Window you can assign it using the “Custom Modal Template” setting in the Post Cards element Link tab.
How the Modal Popup Works – A Note on Speed & SEO
By default the modal popup window works by inserting the post content into the page in a hidden container. This way when the user clicks to open the popup the modal will load instantly.
Because of this, if you have tons of posts on the page it can slow down page rendering time. It’s highly recommended to paginate the page to prevent hundreds of posts with modal popups from being displayed at a single time.
If SEO is a concern you may want to instead link to your posts directly instead of using modal windows. Modal popup windows can be nice for usability but in most cases are not recommended for SEO and accessibility reasons. Most of the time you should be linking directly to the post to display it’s content.
This isn’t something specific to the Total theme, but in general.