<!-- wp:paragraph -->
<p>This is super fast and super light weight way to add some popups to your site. You can place anything inside popup. Also, it uses CSS browser technologies, so, you can combine it with different dynamic options and scripts</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/popupbutton {"id":"gsbp-dc8758a6-1172","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[10],"right":[20],"bottom":[10],"left":[20]},"unit":["px","px","px","px"],"locked":false}},"background":{"color":"#7000f4"},"typography":{"textShadow":{},"color":"#ffffff"}} -->
<div class="wp-block-greenshift-blocks-popupbutton gspb-buttonpopup gspb_id-gsbp-dc8758a6-1172"><div class="gspb-popupbutton-wrapper" style="text-align:left"><span class="gspbcsspopuptrigger gspb-tgl-trigger" data-popup="gspb_popupid-gsbp-dc8758a6-1172">Show popup</span></div><div class="gspbcsspopup" id="gspb_popupid-gsbp-dc8758a6-1172"><div class="gspbcsspopupinner" style="max-width:500px"><span class="gspbcpopupclose">×</span><!-- wp:paragraph {"placeholder":"Add content of popup"} -->
<p>I am simple content of popup. You can add anything to container of popup, including other blocks. For example, here is image and table</p>
<!-- /wp:paragraph -->
<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td>XL</td><td>L</td><td>XS</td><td>S</td></tr><tr><td>120-150</td><td>100-120</td><td>50-60</td><td>60-80</td></tr></tbody></table></figure>
<!-- /wp:table -->
<!-- wp:image {"id":698,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/plastic-1024x683.jpg" alt="" class="wp-image-698"/></figure>
<!-- /wp:image --></div></div></div>
<!-- /wp:greenshift-blocks/popupbutton -->
<!-- wp:paragraph -->
<p>Check how it works</p>
<!-- /wp:paragraph -->
<!-- wp:video {"id":711} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2022/05/popupbutton.mp4"></video></figure>
<!-- /wp:video -->
<!-- wp:paragraph -->
<p>Additionaly, there is block <a href="https://greenshiftwp.com/sliding-panels/" data-type="post" data-id="771">Slide Panel/Popup</a> which can be used to configure more options, for example, ability to set automatic trigger after period of time or Exit Intent.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>For example, try to close this page or click on button below</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/button {"id":"gsbp-88b5f8d0-e171","buttonContent":"Reveal Coupon","background":{"color":"#ffffff00"},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[12],"right":[20],"bottom":[12],"left":[20]},"unit":["px","px","px","px"],"locked":false}},"iconSpacing":{"margin":{"values":{"right":[15]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":5,"topRight":5,"bottomRight":5,"bottomLeft":5},"unit":"px","locked":true},"style":{"all":["dashed"]},"size":{"all":[1]},"color":{"all":["#00d587"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"typography":{"textShadow":{},"size":[20],"color":"#00d587"},"position":{"positionType":["relative"],"positions":{"values":{}}},"enableIcon":true,"iconRight":false,"iconBox_icon":{"icon":{"font":"rhicon rhi-tags","svg":"","image":""},"fill":"#00d587","fillhover":"","type":"font","iconSize":[25]},"slidingPanel":true,"slidePosition":"popup","width":[700],"closeintent":true,"buttonDisable":false} -->
<div id="gspb_button-id-gsbp-88b5f8d0-e171" class="gspb_button_wrapper gspb_button-id-gsbp-88b5f8d0-e171 wp-block-greenshift-blocks-button"><a class="gspb-buttonbox" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-icon"><svg class="" style="display:inline-block;vertical-align:middle" width="15" height="15" viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M1251.882 587.646l-408.236 408.236c-37.492 37.492-98.276 37.49-135.764 0l-0.72-0.72 476.838-475.398-521.206-519.764h97.442c26.51 0 50.509 10.745 67.882 28.118l423.764 423.764c37.49 37.49 37.49 98.274 0 135.764zM995.882 587.646l-408.236 408.236c-18.744 18.746-43.314 28.118-67.882 28.118s-49.138-9.372-67.882-28.118l-423.764-423.764c-17.373-17.373-28.118-41.372-28.118-67.882l-0-0v-408.236c0-53.020 42.98-96 96-96h408.236c0-0 0.001-0 0.001-0 26.509 0 50.509 10.745 67.881 28.118l423.764 423.764c37.49 37.49 37.49 98.274 0 135.764zM928 519.764l-423.764-423.764h-408.236v408.236l423.772 423.756 408.228-408.228zM288 192c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Reveal Coupon</span></span></span></a><div class="gspb_slidingPanel" data-hover="" data-closeintent="true"><div class="gspb_slidingPanel-wrap"><div class="gspb_slidingPanel-inner"><!-- wp:greenshift-blocks/row {"id":"gsbp-24f974e8-272f","gutterClassName":"gspb_row\u002d\u002dgutter-40","rowLayout":"2","displayStyles":false} -->
<div id="gspb_row-id-gsbp-24f974e8-272f" class="gspb_row gspb_row-id-gsbp-24f974e8-272f wp-block-greenshift-blocks-row gspb_row-id-gsbp-24f974e8-272f gspb_row--gutter-40"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-e8334736-ea0a","gutterclass":"gspb_row\u002d\u002dgutter-40","columnSize":"6","background":{"image":["https://greenshiftwp.com/wp-content/uploads/2022/05/314rate_Bored_Ape_with_sunglasses_a_full_grown_beard_a_backpack_086e5ae3-523e-46aa-8a70-11eb22d8c627.png"],"positionImage":[{"x":"0.48","y":"0.49"}],"size":["cover"]},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[0],"right":[0],"bottom":[0],"left":[0]},"unit":["px","px","px","px"],"locked":true}}} -->
<div id="gspb_col-id-gsbp-e8334736-ea0a" class="gspb_row__col--6 wp-block-greenshift-blocks-row-column gspb_col-id-gsbp-e8334736-ea0a"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:greenshift-blocks/row-column -->
<!-- wp:greenshift-blocks/row-column {"id":"gsbp-0c9ac584-9fc0","gutterclass":"gspb_row\u002d\u002dgutter-40","columnSize":"6"} -->
<div id="gspb_col-id-gsbp-0c9ac584-9fc0" class="gspb_row__col--6 wp-block-greenshift-blocks-row-column gspb_col-id-gsbp-0c9ac584-9fc0"><!-- wp:greenshift-blocks/heading {"id":"gsbp-28d61904-ffa7","headingTag":"div","headingContent":"30% of coupon","spacing":{"margin":{"values":{"bottom":[10]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"colorState":"Classic","size":[30],"line_height":[45],"customweight":"bold"},"animation":{"duration":700,"easing":"ease","type":""},"inlineflex":false,"enablehighlight":true,"highlightcolor":"#fff4d3"} -->
<div id="gspb_heading-id-gsbp-28d61904-ffa7" class="gspb_heading gspb_heading-id-gsbp-28d61904-ffa7 "><span class="gspb_heading_highlight gspb-inview-active">30% of coupon</span></div>
<!-- /wp:greenshift-blocks/heading -->
<!-- wp:greenshift-blocks/text {"id":"gsbp-2d09a7d1-944e","textContent":"If you are looking for a way to promote you business","spacing":{"margin":{"values":{"bottom":[40]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"size":[18],"customweight":"bold","line_height":[22]}} -->
<div id="gspb_text-id-gsbp-2d09a7d1-944e" class="gspb_text gspb_text-id-gsbp-2d09a7d1-944e ">If you are looking for a way to promote you business</div>
<!-- /wp:greenshift-blocks/text -->
<!-- wp:greenshift-blocks/text {"id":"gsbp-51798e41-bda4","textContent":"COUPON30","border":{"borderRadius":{"values":{},"unit":"px","locked":true},"style":{"all":["dashed"]},"size":{"all":[2]},"color":{"all":["#e2e2e2"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{"bottom":[20]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[10],"right":[15],"bottom":[10],"left":[15]},"unit":["px","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"customweight":"normal","size":[23]}} -->
<div id="gspb_text-id-gsbp-51798e41-bda4" class="gspb_text gspb_text-id-gsbp-51798e41-bda4 ">COUPON30</div>
<!-- /wp:greenshift-blocks/text -->
<!-- wp:greenshift-blocks/button {"id":"gsbp-380a8caf-a7c7","buttonContent":"Explore this collection","align":"flex-start","spacing":{"margin":{"values":{"bottom":[30]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"bottom":[15]},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{},"unit":"px"},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockWidth":{"customWidth":{"value":[100],"unit":["%","px","px","px"]},"widthType":"custom"},"typography":{"textShadow":{},"alignment":["center"],"size":[18],"customweight":"normal"},"enableIcon":false} -->
<div id="gspb_button-id-gsbp-380a8caf-a7c7" class="gspb_button_wrapper gspb_button-id-gsbp-380a8caf-a7c7 wp-block-greenshift-blocks-button"><a class="gspb-buttonbox" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Explore this collection</span></span></span></a></div>
<!-- /wp:greenshift-blocks/button -->
<!-- wp:greenshift-blocks/text {"id":"gsbp-ff6163c0-67b5","textContent":"No, I don't need to save money","border":{"borderRadius":{"values":{},"unit":"px","locked":true},"style":{"bottom":["none"]},"size":{"bottom":0},"color":{"bottom":null},"styleHover":{},"sizeHover":{},"colorHover":{}},"typography":{"alignment":["center"]},"responsive":{"customcss":"{GREENSHIFT}{cursor:pointer}"},"className":"gspb-custom-close"} -->
<div id="gspb_text-id-gsbp-ff6163c0-67b5" class="gspb_text gspb_text-id-gsbp-ff6163c0-67b5 gspb-custom-close">No, I don't need to save money</div>
<!-- /wp:greenshift-blocks/text --></div>
<!-- /wp:greenshift-blocks/row-column --> </div></div>
<!-- /wp:greenshift-blocks/row --></div><div class="gspb_slidingPanel-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></div></div></div></div>
<!-- /wp:greenshift-blocks/button -->Copy code
