How to pop-up page content using Kriesi Enfold Theme

After reading these posts:

https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/

https://kriesi.at/support/topic/inline-content-in-magnific-popup/

These solutions were difficult.

The issue with Enfold Framework is that only certain AVIA LAYOUT BUILDER – LAYOUT ELEMENTS allow for a custom Developer ID.

If you read the above support topics you would note that the issue with each of these layout elements (Colour Section, Grid Row, Tab Section ) is that they are all full width and interfere with the sidebar position. Not good if you are adding an inline popup link and AVIA requires that the popup content is inside a full width ‘Colour Section’.

I should note that you can add a custom ID to a CODEBLOCK, However, this didn’t work either, as paragraphs were stripped from the HTML and replaced with quotation marks “” , losing any paragraph styling.

AVIA LAYOUT BUILDER would be more flexible if we had the ability to add theme support for custom ID on layout elements, the same way you currently add theme support for  Custom CSS Class –  add_theme_support(‘avia_template_builder_custom_css’);

Anyway, I thought I would share my quick SHORTCODE solution with the community.

Enfolds out of the box already supports lightbox modal windows for videos and images.
This solution allows you to display large amounts of formatted text like; terms and conditions, privacy statements, warranty etc. in a lightbox modal window.

Let’s get started.

Magnific Popup is installed natively with Enfold Theme, so we don’t need to load any other assets.

STEP 1

Create an Enfold Child Theme and activate it –  https://kriesi.at/documentation/enfold/child-theme/
In your enfold-child theme functions.php file, add the following code:

STEP 2

In enfold-child theme style.css file add the following css:

.mfp_popup_content {
	position: relative;
	background: #ffffff;
	padding: 40px;
	width: auto;
	max-width: 600px;
	margin: 100px auto;
	overflow: auto;
  }

This CSS class is all you need to style the basic popup window.

STEP 3 – POP-UP CONTENT

First, create a new PAGE or POST with the content you want to display in your pop-up and publish.
Take note of the post ID, which can be found in the URL address bar at the top of the browser
http://domainname.com/wp-adminpost.php?post=

STEP 4 – SHORTCODE

On your page where you want to pop-up the content, add the following SHORTCODE:

Basic Shortcode Requirements

post_slug_id=””
Enter the ID of the post that you want as content in your popup window.
Example: post_slug_id=”5″

popup_id=””
Enter a custom identifier for the popup. For multiple popups on one page, use a different identifier for each popup_id. Don’t use spaces in the ID name. You can use underscore _ and dash – in place of spaces.
Example: popup_id=”popup_1″

link_text=””
Enter the text ( spaces are allowed ) that will be the active link for the popup.
Example: link_text=”open me”

EXAMPLE:
Some custom content here with an inline link to open me in a popup window.

Additional Shortcode Options

custom_class=””
Add your own custom CSS class to style the pop-up window. Rounded Corners, Colour Border, Coloured Background etc. etc.

popup_delay=””
This uses a cookie to set the start time of a browser session on first-page load. The pop-up content will automatically display without a mouse click, after the designated time in seconds.

Example: popup_delay=”5″

button=”true”
Adding this option to the shortcode will automatically change the output of the link to a button.
The AVIA  Button HTML and CSS styles have been hardcoded in the shortcode. You can change the global styling of the pop-up button by adding the appropriate Avia classes and html wrapping elements to the shortcode return sprintf () output code in the function.php file.

button_class=””
Add your own Custom CSS Class to style the pop-up link.

image_link=””
To pop-up content using an active link on an image.  Add the URL to the image using image_link=“” within the shortcode. To hide the default link_text=”Click Me”,  make sure that text_link=“” is include but empty.

Shortcode Explanation

The code does 3 things:

1. Adds a jQuery script to the footer that enables Magnific popup for elements with a class .inline_popup

2. Creates the active link where the SHORTCODE is inserted

3. Creates a hidden div in the footer that contains the content from the post_slug_id

Check out the DEMO

Kriesi Enfold pop-up content shortcode demo