modal – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Sun, 23 Feb 2025 10:34:43 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Element: Video Player https://xtratheme.com/docs/page-builder/element-video-player/ https://xtratheme.com/docs/page-builder/element-video-player/#respond Mon, 17 Jun 2024 14:40:38 +0000 https://xtratheme.com/docs/?p=1669

Video Tutorial

Description and Screenshot

Step 1

Video player as popup on click or as inline iframe on click on same posiiton.

Video_player 2
  • Video URL – Youtube or vimeo video URL
  • Image Placeholder – Image placeholder instead default video image
  • Inline Video? – Inline iframe instead of video popup
  • Title – Title after overlay icon (optional)
  • Sub Title – Sub title under title (optional)
  • Icon – Change default icon and choose your favorite icon from icon library
  • Icon position – Icon position on video image over 5 position are available
  • Icon size – Icon predefiend sizes, also you can change icon size from icon StyleKit
  • Ripple Icon FX? – Ripple animation FX for icon only
  • Styling – Styling of container, title, icon background, color, size, border, etc.
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-video-player/feed/ 0
Element: Popup Modal Box https://xtratheme.com/docs/page-builder/element-popup-modal-box/ https://xtratheme.com/docs/page-builder/element-popup-modal-box/#respond Mon, 17 Jun 2024 08:49:40 +0000 https://xtratheme.com/docs/?p=1555

Video Tutorial

Description and Screenshot

Step 1

Show popup modal box on page loads or by click on custom button or link, Popup can contains any element inside itself and its fully customizable.

Popup_modal_box
  • Unique ID – This is important field and you need to put specific ID e.g. my_popup_1
  • Visibility mode? – If you want to show popup on page loads you can set this option
  • Extra class – Extra class for who need to add custom CSS for this element
  • Scrollbar? – If you have long text or contnet in popup, then you can limit height of popup
  • Overlay background – Overally background color behind popup modal box
  • Popup Styling – Popup content area styling background, color, size, etc.
  • Close icon Styling – Popup close icon styling color, background, border radius, etc.
]]>
https://xtratheme.com/docs/page-builder/element-popup-modal-box/feed/ 0
Show Popup Modal Box with Click on Button https://xtratheme.com/docs/how-to/show-popup-modal-box-with-click-on-button/ https://xtratheme.com/docs/how-to/show-popup-modal-box-with-click-on-button/#respond Wed, 12 Jun 2024 09:54:04 +0000 https://xtratheme.com/docs/?p=2463

Description and Steps

Step 1
Step01

Create a new page

This is an example tutorial and you can do it on any pages, Create a new page from Dashboard > Pages > Add New like below shot:

Popup1
Step02

Add a button element to page

Now go to the Frontend Editor and add button element then set unique button URL with hash like below, #my_popup_1

Popup2
Step03

Add Popup element to page

Now add Popup Modal Box element and set same unique ID for it without hash

Popup3
Step04

Open popup and add your custom elements

Click on the Popup hashtag in the page to open popup modal box, then you can add any elements inside it, like below

Popup4
Tips

You may want to know …

  • How to load popup on all pages? – Create a new custom page and name it for example popup, then add popup element and inside it add other elements. Then publish page. Now go to Theme Options > Header > Header and add custom page element and choose your popup page, Now all pages have your popup content and you can call it with hashtag link.
]]>
https://xtratheme.com/docs/how-to/show-popup-modal-box-with-click-on-button/feed/ 0