Popup – slide-in layout pack Documentation
Getting Started
Customizations
Support
Any questions? Send an email to info@markhendriksen.com
Read this first
- Place the popups – slide-ins at the bottom of your page. If you are using the theme builder method (recommended) than place the popup – slide-in below your footer.
- Some popup – slide-ins have 2 sections so you need to place both of them.
- By default the popups slide-ins are visible in the visual builder. This is great for building the popups – slide-ins but when you want to work on other elements of your website they are in the way. Follow this step to disable the slide-ins in the visual builder.
- Be carefull when deleting modules and rows. Each popup – slide-in comes with 2 code modules if you delete those the slide-in will stop working. You are not be able to see the code modules in the visual builder.
So when deleting modules I recommend do this from the wireframe view or from the layers tab. Otherwise you might accidentaly delete them.
Images
The images are replace due to licensing.
Installing popups – slide-ins
Step 1
Download and unzip the ‘popup-layout-pack.zip’ file to your computer.
In this folder you will find all the popups. Each folder contains a Json file and an image of the popup. The image is just for reference and does not need to be uploaded.
Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload the popup you want to use.
How to add a popup – slide-in in the Theme Builder (Recommended)
Go to Divi > Theme Builder
If you are using a custom global footer then open the Global Footer.
If you are not using a custom footer then click on Add Global Footer and then Build Global Footer > Build From Scratch.
Note: when you enable the global footer than your current default footer will be replaced. This means you need to recreate your new footer here.
1) Click on wireframe view (easier to add and drag the popups – slide-ins in position)
2) Click on the blue + to add a new section
3) Switch to Add from library
4) You can choose popups – slide-ins for a quick search of all the popups – slide-ins.
5) Choose the popup – slide-in you want. Some have 2 sections so you need to import them both.
Note: Place the popup – slide-in at the bottom of your page. So your footer sits above. Some popups – slide-ins have 2 sections.
Note: by default the popups – slide-ins are visible in the visual builder. This is great for building the popups – slide-ins but when you want to work on other elements of your website they are in the way. Follow this step to disable the popups slide-ins in the visual builder.
How to add a popup – slide-in on a single page
You can add any popup – slide-in to any of your website pages.
Go to a page of your website and enalbe the visual builder.
1) Click on wireframe view (easier to add and drag the popup – slide-ins in position)
2) Click on the blue + to add a new section
3) Switch to Add from library
4) You can choose popup – slide-ins for a quick search of all the popups – slide-ins.
5) Choose the popup – slide-in you want. Some have 2 sections so you need to import them both.
Note: Place the popup – slide-in at the bottom of your page. Some have 2 sections.
Note: by default the popups – slide-ins are visible in the visual builder. This is great for building the popups – slide-ins but when you want to work on other elements of your website they are in the way. Follow this step to disable the slide-ins in the visual builder.
Button trigger
You can trigger the popups – slide-in with any module or link.
You need to add the class buttom_trigger
Below an example for a button module.
In the link field place this #open
Then switch to the advanced tab and place the class button_trigger
Scroll trigger
Add the following code module (Scroll Trigger) to your popup – slide-in.
You need to upload this first in your Divi library. You can find this file in your download folder popup-layout-pack > Triggers > Scroll trigger.json
1) Click on wireframe view
2) Click on the Grey + to add a new module
3) Switch to Add from library
4) You can choose code for a quick search of all the code modules.
5) Choose the Scroll trigger module
6) Place this code module just below the other 2 code modules (CSS and jQuery).
Add scroll trigger point
Open your page and add this class scroll-trigger-waypoint to any section, row or module.
When your visitor will scroll down and reach this section, row or module the popup – slide-in will trigger.
Exit-intent
Add the following code module (Exit-intent trigger) to your popup – slide-in.
You need to upload this first in your Divi library. You can find this file in your download folder popup-layout-pack > Triggers > Exit-intent.json
1) Click on wireframe view
2) Click on the Grey + to add a new module
3) Switch to Add from library
4) You can choose code for a quick search of all the code modules.
5) Choose the Exit-intent trigger module
6) Place this code module just below the other 2 code modules (CSS and jQuery).
Enable / disable the popups – slide-ins in the visual builder
For slide-in 6, 7 and 8 the code is allready disabled and to hide those slide-ins from the visual builder you need to enable the code.
Scroll bar color
And scroll down until you see this.
