Add Popup Banner on Top of Page Header

Word Count: 101
  • Post category:Clare Wood (22)
  • Post last modified:2022-07-03

Introduction

This is a hello popup on top of the page header and is triggered by events set in the Elementor Popup Settings.

Setup

  • Go to Templates > Popups > Add New
  • Setting > Layout Tab
    • Set the width, height, position, animation, etc…
  • Style > Popup
    • Set background type, color, border, etc…
  • Style > Close Button
    • Set the button size, poistion and color, etc…
  • Triggers – set the events that trigger the popup.

Content Design

  • The content has this simple structure:
    • Section
      • Column
        • Heading – contains the popup message.
        • HTML – position the page <body> below the popup banner.

HTML

<style>
    body { 
        margin-top: 64px; /* height of popup bar  */
    }
</style>
Tags: ,