The Popup Block - Otter Blocks Library

The Popup block is a notice that appears suddenly on the screen, over another window or display.

To  add this componentscroll down into the blocks library and select the Popup block.

The  popup can contain anything. In order to edit the content that will be displayed, click on the block and add one of the blocks from the list:

📝Note: The settings of the added block are specific, you have to check their options.

The customizations available for this block are divided into six panels:

  • Settings
    • Open Trigger - depending on the desired effect, pick one of the following triggers: 
      • On Load - appears when the page is loaded.
        • Wait Time - choose how much time to wait before showing the popup.
          • if it's left empty, it will open instantly.
      • On Anchor Click - first, you have to create an anchor on the page. The popup opens when the anchor is clicked.
        • Anchor - use an anchor on the page to open the popup.
      • On Scroll - appears when the page is scrolled.
        • Scroll Distance - adjust the distance of the scroll when the popup would appear.

        • On Exit - appears when the user exits the page.

    • Show Close Button - enable / disable the ❌ button.
    • Close on Click Outside - the popup will close if the user clicks outside the box.
    • 💳 ( pro ) Close on Anchor Click - the popup will close if the user clicks on the anchor provided.
    • 💳 ( pro ) Dismiss for Recurring Visitors ( not available for the On Anchor Click trigger) - if a visitor has entered many times on the website, you can set the popup to not be displayed in a certain period.

  • Style - this menu is responsible for the appearance of the popup. 
    • Minimum Width - establishes the width of the popup window.
    • Background - choose the color of the background.
    • Overlay - select the color that appears while the popup is opened.
    • Overlay Opacity - decide how transparent the color of the overlay should be.

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

📝 Note: The Animations can be applied only to the block that you have added inside the Popup, not directly to the popup.

  • Advanced 
    • Additional CSS class(es) - add additional CSS classes to create a specific appearance for the block.

🗂 Useful Resources

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.