[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="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="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="fa-sign-in" font_size="17" color="style-light" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fa-envelope" font_size="17" color="style-dark" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fa-external-link" font_size="17" boxed="1" description="Open" animation="fadeIn"]
[icon icon="fa-map-marker" font_size="17" color="style-green" boxed="1" description="Open" animation="fadeIn"]
[icon icon="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="45"]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"]
[h3]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h3]
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="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="fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[fancy_header size="large" text_align="textleft" margin_top="15" margin_bottom="45"]Add any content in this FancyBox[/fancy_header]
[h3]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h3]
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="fa-external-link" size="med"]Open[/button]
[/lightbox_trigger]
[lightbox_content]
[fancy_header size="large" text_align="textleft" margin_top="15" margin_bottom="45"]Add any content in this FancyBox[/fancy_header]
[h3]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.[/h3]
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="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="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="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="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="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="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="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]
