How to use DJ-Popup
How to use DJ-Popup?
Below is a short instructional video showing how to easily turn our section into a DJ-Popup.
Status
If the section is correctly configured as a DJ-Popup. The section will be marked as a DJ-Popup which makes it easier to identify the popups created on the subpage
![dj-popup section view](/templates/yootheme/cache/d5/obraz-d516a296.png)
If the system detects that a section is marked as DJ-Popup but no trigger has been declared, the section will be marked as invalid
![dj-popup no trigger declared view](/templates/yootheme/cache/5a/obraz%201-5a9305df.png)
Configuration
Content
-
Enabled - Use this checkbox to specify whether the section is to be converted as a DJ-Popup
-
Heading - With the value of this text field you can specify what title will be displayed in your popup
-
Close icon - Use this field to set your own closing icon for the DJ-Popup
-
Save text - Content of the button responsible for the save action
-
Save link - Link assigned to the button responsible for the save action
-
Cancel text - Content of the button responsible for the DJ-Popup closing action
Settings
-
Heading
- Header style - You can specify the header size in h1-h6
-
Repeat
- Repeat popup - always/first time only/after x time
- Repeat after x time in format DD:HH:MM
-
Direction
- Popup open direction - choose the direction from the list
- Position margin - set the position margin value
-
Popup
- Overlay color - You can use it to specify the background colour of the popup overlay
- Animation - Type of animation to display the DJ-Popup
- Fullscreen - DJ-Popup mode built into UIKit
- Width - Width of DJ-Popup ( % )
- Height - Height of DJ-Popup ( % )
- Padding - Padding to be placed on top of the main DJ-Popup container
- Left - Distance from left side of screen ( % )
- Right - Distance from right side of screen ( % )
- Top - Distance from top side of screen ( % )
- Bottom - Distance from bottom side of screen ( % )
-
Footer
- Save button style - The style of the button responsible for the save action
- Cancel button style - Style of button responsible for DJ-Popup closing action
Triggers
DJ-Popup allows us to create a trigger. You can use them to determine at which point the popup will be displayed. The popup will only be displayed once when any trigger is called.
On Page Load
Automatically display a popup when a visitor opens your site.
Available parameters:
- Delay - A value specified in milliseconds after which the trigger will be called
On Scroll
Automatically display a popup when user scrolls % of page.
Available parameters:
- Distance - Value specified as a percentage. When the page is scrolled to the specified distance, the trigger will be called
Scroll to
Automatically display a popup when user scrolls page to the element
Available parameters:
- Link - You can use this attribute to assign a trigger to a link anchor
- Selector - CSS selector assigned to the trigger
On hover
Show a popup when user hovers on specific parts of the page.
Available parameters:
- Link - You can use this attribute to assign a trigger to a link anchor
- Selector - CSS selector assigned to the trigger
- Repeating - If you check this option, the trigger will be called each time the user fulfils its condition
On Click
Automatically display a popup when user scrolls page to the element
Available parameters:
- Link - You can use this attribute to assign a trigger to a link anchor
- Selector - CSS selector assigned to the trigger
- Repeating - If you check this option, the trigger will be called each time the user fulfils its condition