[box type="custom-boxed-item" align="center" text_align="textcenter"]
[fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header]
Need anything in a popup window? This shortcode is what you need. Use almost anything as a trigger and add text, images, forms, videos etc inside the popup. Even trigger on page load. Check it out.
[icon icon="fas fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"]
[/box]
[section_break type="blank" margin_bottom="30" /]
[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Triggers"]
[fancy_header bold="1" type="style1"]Lightbox[/fancy_header]
[lightbox width="600"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="tiny"]Open[/button]
[button color="style-dark" size="tiny"]With[/button]
[button color="style-prime" size="tiny"]Any[/button]
[button color="style-green" size="tiny"]Button[/button]
[button color="style-red" size="tiny"]Style[/button]
[fancy_header bold="1" type="style1" margin_top="50"]Open with icons[/fancy_header]
[icon icon="fas fa-sign-in" font_size="17" color="style-light" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fas fa-envelope" font_size="17" color="style-dark" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fas fa-external-link" font_size="17" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fas fa-map-marker" font_size="17" color="style-green" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fas fa-map-marker" font_size="17" color="style-red" boxed="1" description="Open" animation="fadeIn"]
[fancy_header bold="1" type="style1" margin_top="50"]Open with images[/fancy_header]
[image src="2014/06/3740308199_0341325acb_o.jpg" link="#" frame="style2" align="right" width="600"alt="alt_tag"]
[/lightbox_trigger]
[lightbox_content]
[fancy_header size="large" text_align="textleft" margin_top="15" margin_bottom="35" bold="1"]Add any content in this FancyBox[/fancy_header]
[image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"]
[h5]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h5]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
[/lightbox_content]
[/lightbox]
[section_break type="blank" margin_top="40" margin_bottom="20" /]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[lightbox]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
...
[/lightbox_content]
[/lightbox]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="Options"]
[fancy_header bold="1" type="style1"]With fixed size[/fancy_header]
[lightbox width="450"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[fancy_header size="large" text_align="textleft" margin_top="15" margin_bottom="35" bold="1"]Add any content in this FancyBox[/fancy_header]
[h5]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h5]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
[/lightbox_content]
[/lightbox]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[lightbox width="450"]
[lightbox_trigger]
[button color="style-light" icon="fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
...
[/lightbox_content]
[/lightbox]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50" margin_top="50"]With elastic animation[/fancy_header]
[lightbox width="400" open_effect="elastic" close_effect="elastic"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[fancy_header size="large" text_align="textleft" margin_top="15" margin_bottom="35" bold="1"]Add any content in this FancyBox[/fancy_header]
[h5]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h5]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
[/lightbox_content]
[/lightbox]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[lightbox width="500" open_effect="elastic" close_effect="elastic"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
...
[/lightbox_content]
[/lightbox]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="Example content"]
[fancy_header bold="1" type="style1"]With a map[/fancy_header]
[lightbox width="850"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Map[/button]
[/lightbox_trigger]
[lightbox_content]
[div class="flexible-frame"]
[/div]
[/lightbox_content]
[/lightbox]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[lightbox]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[div class="flexible-frame"]
<iframe src=" ... " width="360" height="360" style="border:0"></iframe>
[/div]
[/row]
[/lightbox_content]
[/lightbox]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Quform plugin popup[/fancy_header]
[quform_popup id="8" name="Footer form" width="500px"][button color="style-light" icon="fas fa-external-link" size="med"]Contact form[/button][/quform_popup]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[quform_popup id="8" name="Footer form"][button color="style-light" icon="fas fa-external-link" size="med"]Contact form[/button][/quform_popup]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]With a form and map[/fancy_header]
[lightbox width="850"]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Contact form[/button]
[/lightbox_trigger]
[lightbox_content]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"][fancy_header tag="h3" margin_bottom="20" bold="1" type="style1 prime-line animate-line"]Contact us[/fancy_header][quform id="8" name="Footer form"][/col]
[col width="50"]
[fancy_header tag="h3" margin_bottom="20" bold="1" type="style1 prime-line animate-line"]Address[/fancy_header]
145-157 St. John Street,
London,
England,
EC1V 4PW
[section_break type="line" /]
[div class="flexible-frame"]
[/div][/col]
[/row]
[/lightbox_content]
[/lightbox]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[lightbox]
[lightbox_trigger]
[button color="style-light" icon="fas fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"][fancy_header margin_bottom="20" bold="1" type="style1 prime-line animate-line"]Contact us[/fancy_header][quform id="8" name="Footer form"][/col]
[col width="50"]
145-157 St. John Street<br/>
London<br/>
England<br/>
EC1V 4PW<br/>
[section_break type="line" /]
[fancy_header margin_bottom="20" bold="1" type="style1 prime-line animate-line"]Address[/fancy_header]
[div class="flexible-frame"]
<iframe src="..." width="360" height="360" style="border:0"></iframe>
[/div][/col]
[/row]
[/lightbox_content]
[/lightbox]
[/accordion_toggle]
[/accordion]
[/tab]
[/tabs]
