Website Modal Examples

Examples and instructions for using the modal features on the website for content and video popups.

Modals

Create hash links that start with #modal-[pid], #modal-lg-[pid], and #modal-xl-[pid] where [pid] is a modal (custom post type) post id.

#modal-1324, #modal-1342, #modal-8038, #modal-8031
#modal-lg-1324, #modal-lg-1342, #modal-lg-8038, #modal-lg-8031
#modal-xl-1324, #modal-xl-1342, #modal-xl-8038, #modal-xl-8031

Clean modals

Create hash links that start with #modalc-[pid], #modalc-lg-[pid], and #modalc-xl-[pid] where [pid] is a modal (custom post type) post id. *Notice the slight modification on the link. #modal to #modalc (c for clean).

#modalc-1324, #modalc-1342, #modalc-8038, #modalc-8031
#modalc-lg-1324, #modalc-lg-1342, #modalc-lg-8038, #modalc-lg-8031
#modalc-xl-1324, #modalc-xl-1342, #modalc-xl-8038, #modalc-xl-8031

Takeover

Create hash links that start with #takeover-[pid], where [pid] is a modal (custom post type) post id

#takeover-1324, #takeover-1342

* Takeover background color when editing a modal post, at the bottom of the page there is a takeover background color selection option. This allows you to set a background color (for the entire takeover) that is used whenever the modal is called as a takeover modal

Videos

Open on click by using hash links like #youtube-[vid] and #vimeo-[vid] as the href value.

Youtube modal (#youtube-5HDtEu7Xoks)
Vimeo modal (#vimeo-347119375)

Open on page load by adding the #youtubel-[vid] or #vimeo.-[vid] to external links. **Notice the slight modification on the link. #youtube to #youtubel and #vimeo to #vimeol (l for load)

https://www.elevatedemand.com/#youtubel-5HDtEu7Xoks
**Notice the slight modification on the link. #youtube to #youtubel (l for load) https://www.elevatedemand.com/#vimeo.-347119375
**Notice the slight modification on the link. #vimeo to #vimeol (l for load)

Auto Popups

Popup load delay 5sec

Popup exit (after 5sec)

Popup scroll 20%

Discover the Power of a Conversion-Driven Website

Unleash your website's potential with our conversion-focused WordPress template.

  • Tailored to match your brand identity.
  • Seamless & engaging user experiences.
  • A/B testing to iterate and refine your website.
  • Responsive design for better user experience.
  • And much more...

Request a Demo

Name(Required)
Website Traffic(Required)
Monthly website traffic?
Website Adversising(Required)
Do you run ads for your site?
This field is for validation purposes and should be left unchanged.