Header – Popup modal

Control the settings of the Modal Popup used to display additional content on all pages and posts, without sacrificing space. The Modal Box is hidden by default and can only be triggered using the Header Button displayed near the Main Menu. This button can also be used to open a new page or smooth scroll to a page section ID.

Header Button Settings

  • Enable Header Button – option to enable/disable showing the header button. The button will be displayed near the main navigation area to the right.
  • Button Text – option to set the button text.
  • Button Style – option to select the button design style.
  • Button Color Scheme – option to select the button color scheme. Primary and secondary colors can be set in Theme Options > Global Options > Color schemes.
  • Button Hover State – option to select the button design style for the hover state.
  • Button Action – option to control the button action on click.
  • Modal Heading – title text for the modal.
  • Modal Contents – modal description text area. HTML is allowed.
  • Modal Background Image – option to a background image for the modal window.
  • Social Icons – option to enable/disable displaying the social icons in the modal window.
  • Contact Form Plugin – option to enable/disable displaying a contact form in the modal window.
  • Contact Form 7 Title – select the Contact Form 7 from the dropdown. The list is automatically populated.
  • CSS Class – add a class to the wrapping HTML element for further CSS customization.

IMPORTANT! Changes to the phone, email and social links can be done in Theme Options > Business Info.

Scroll Section Settings

  • Scroll to Section ID – enter the section ID where you want the Header Button to scroll to.

New Page Link Settings

  • Button Link – enter the link of the page where you want the Header Button to redirect to.
  • Link Target – option to select between opening the link in the same or a new page.

Trigger the Popup Modal using any button

You can trigger the Popup Modal using any button. For example, open the Button element settings modal and check with the Button action option.

Learn more

Was this article helpful?

Yes No

Related Articles