Popup – slide-in layout pack Documentation
Getting Started
Customizations
Support
Any questions? Send an email to info@markhendriksen.com
Read this first
- 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.
Step 2
Now we are going to upload your popup into the Dvi Library.
1) Go to Divi > Divi Library.
2) Click on the import/export options.
3) Go to the import tab
4) Navigate to your unzipped folder and open the folder with the popup you want to use. Inside this folder you will find a json file and an image. You only need to upload the Json file the image is just for reference.
Step 3
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.
Import the popup
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.
Step 4
Now you only need to add a trigger for the popup. You can choose between 3 triggers
Button trigger
You can trigger the popups – slide-in with any button module or text link.
1) Open the page on your website where you want to add this trigger.
2) Open any button module or add a new button module.
3) In the link field place this #open
4) Then switch to the advanced tab and add this class button_trigger to your button module (see second image)
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.
