Get started with Elfsight Popup 1.1.0

Installation

1. Install Elfsight Popup WordPress Plugin elfsight-popup-cc.zip to your website. Don't know how? Please learn here.

2. Go to Popup page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

Use Popup as a WordPress Shortcode



1. Create a new widget

You can use Elfsight Popup as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Popup shortcode:

[elfsight_popup id="1"]

Use Popup as a Gutenberg Block

You can use Elfsight Popup as a block for Gutenberg editor. Just add it to your page during page building and select one of the available Popup widgets from the list.

Use Popup as a WordPress Widget

To use Elfsight Popup as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Popup WordPress widget to any widget section. Next, select one of available Popup widgets from the list.

Use Popup as a Visual Composer Element

You can use Elfsight Popup as a Visual Composer element. Just add it to your page during page building and select one of the available Popup widgets from the list.

Options

Option Default Value Description
Blocks
Blocks - Build your popup with the blocks you need.
Title: Title Sample Title Enter the title
Title: Color rgb(17, 17, 17) Choose the title font color
Title: Font Size 24 Set the title font size in pixels.
Title: Font Weight Regular Select bold or regular font.
Text: Text - Enter the text.
Text: Color rgb(17, 17, 17) Choose the text font color.
Text: Font Size 17 Set the text font size in pixels.
Banner: Image - Upload banner image.
Banner: Position right Select the banner position as related to the rest of the popup content. You can choose top, right, left or bottom.
Image: File - Upload your image.
Image: Scale 100 Adjust image size.
Video: YouTube / Vimeo URL - Paste your video's YouTube or Vimeo URL.
Video: Autoplay ON Set autoplay option to ON to have the video play automatically once the popup is open.
Coupon: Code COUPON CODE Enter the discount coupon code.
Coupon: "Click to Copy" text CLICK TO COPY Enter or edit your custom Click to Copy message.
Coupon: "COPIED" text COPIED! Enter or edit your custom COPIED message.
Coupon: Color rgb(17, 17, 17) Set the coupon block color.
Coupon: Font Size 16 Set the font size in pixels.
Button: Click Action Redirect to URL Select an action performed by clicking the button. You can either redirect the user to a specific URL or close the popup.
Button: URL - Set the URL to redirect the users to.
Button: Text Button Text Enter button text.
Button: Style Filled Choose your button's style - Filled or Outline.
Button: Color rgb(17, 17, 17) Set the button color.
Button: Font Size 16 Set the button font size in pixels.
Link: Click Action Redirect to URL Select an action performed by clicking the link. You can either redirect the user to a specific URL or close the popup.
Link: URL - Set the URL to redirect the users to.
Link: Text Sample Text Enter the link text.
Link: Color rgb(17, 17, 17) Set the link color.
Link: Font Size 17 Set the font size in pixels.
Separator: Color rgba(17, 17, 17, .2) Set the separator color.
Separator: Margin 0 Set the margin for the separator. This will define the spacing between the separator and previous/next block.
Spacing: Size 16 Set spacing in pixels.
iFrame: URL - Set the iframe URL.
iFrame: Width 100% Set the iframe width in pixels or percents. Set 100% to make it take up the entire width of the popup.
iFrame: Height 300 Set the iframe height in pixels.
HTML Code: Code - Enter your custom HTML code.
Form: Fields - Use fields to build your form.
Form: Button Text Submit Enter the form submit button text.
Form: Action After Submit Close the Popup Select an action performed after the form is submitted. You can either redirect the user to a specific URL or close the popup.
Form: Action After Submit: URL - Set the URL to redirect the users to.
Form: Button Style Filled Choose your button's style - Filled or Outline.
Form: Font Size 16 Set the font size in pixels. This will be applied both to the fields and the submit button.
Form: Button Color rgb(17, 17, 17) Set submit button color.
Form: Fields Color rgb(255, 255, 255) Set the fields color.
Layout
Layout Modal Select the popup layout.
Width 500 Set the popup width in pixels.
Blocks Alignment Center Align the popup blocks on left, right or in the center.
Popup Corners Square Select popup corners type - Square or Rounded.
Popup Background Color rgb(255, 255, 255) Set the popup background color.
Popup Background Image - Upload a background image for your popup.
Popup Background Image Overlay Color - Set the background image overlay color.
Display Overlay ON Activate/Deactivate popup overlay.
Close popup on overlay click ON Set this option to ON to close the popup on overlay click.
Overlay Background Color rgba(17, 17, 17, 0.7) Set the overlay color.
Overlay Background Image - Upload the overlay image.
Overlay Background Image Overlay Color - Set the image overlay color.
Display Close Button ON Set this option to ON to show a close button on your popup.
Close Button Color rgba(17, 17, 17, 0.7) Set the close button color.
Display
Triggers: On Page Load ON Open popup once the page is loaded.
Triggers: Time on Page OFF Open popup after a user spends a specific amount of time (in seconds) on the page.
Triggers: Time on Page Duration 30 Set the time interval in seconds to open popup.
Triggers: On Scroll OFF Open popup after a user has scrolled over a specific percentage of the page.
Triggers: Scroll Position 50 Set the percentage.
Triggers: On Scroll to Element OFF Open popup after a user has scrolled over a specific element on your page.
Triggers: HTML Element ID - Enter the element's id.
Triggers: On Click OFF Open popup when a user clicks on the specific element on your page.
Triggers: On Exit Intent OFF Open popup when a user intends to close the page.
Frequency Show every time Choose display frequency for your popup.
Select pages to display All Pages Set the pages on which your popup will be displayed.
Don't display widget on these pages - List the pages where you don't want to display the widget.
Display widget only on these pages - List all the pages that will display the widget.
Devices Desktop, Tablet, Mobile Choose the type of device to display your popup on.

Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center