Knowledge Base
/
JetPopup: How to create a dynamic popup with the Options Page from JetEngine
Back to contents

JetPopup: How to create a dynamic popup with the Options Page from JetEngine

useful information

This tutorial explains how to build and customize a dynamic popup using JetPoup and JetEngine functionality.

JetEngine plugin provides the Options Pages option, which allows creating varied custom options pages with certain meta fields. Then, you can display the data from the custom fields on the pages with dynamic content. Create the options page and pull the information from its meta fields when you build a dynamic popup with JetPopup plugin.

Creating an options page

1 Step — Setting an options page

First of all, you need to create the options page with particular meta fields in the JetEngine > Options Pages section in the WP Dashboard. Learn how to do that from the detailed tutorial.

create an options page

2 Step — Filling the options page with the content

Now you can see the created options page on the WP panel. Open it and fill in the fields with corresponding content.

fill in the options page

Building a dynamic popup

1 Step — Creating a popup

Let’s create a popup. Open the JetPopup section in the WP Dashboard and build a custom popup or choose one of the popup templates presented in the JetPopup presets library.

2 Step — Customizing the popup in Elementor

Proceed to customize the popup in Elementor editor. You can use any of the dynamic widgets for showcasing the content from the meta fields of the options page.
In the widget’s content settings specify the Source: Options and select the certain custom field in the Option line below. Moreover, you can style the widget’s appearance in the Style block.

dynamic field widget
NOTE!
In case you want to display the numerical content from the Date meta field, you should enable the Filter field output option and select the Callback: Format date in the Content settings block.
filter field output

3 Step — Setting the popup’s general settings

Also, you need to set general settings of the popup and where it will be shown in the JetPopup Settings block.

jetpopup settings

4 Step — The popup in action on the frontend

After that, save the changes and view the popup in action on the

dynamic popup on the frontend

Now you know how to create a catchy and handy popup with dynamic options just in a few minutes using JetEngine functionality.