Skip to content

Instantly share code, notes, and snippets.

@wpsoul
wpsoul / gist:c4314e6f306108aaf2d8afb71822d412
Created April 14, 2024 13:46
Greenshift template for Content Egg
<!-- wp:greenshift-blocks/repeater {"id":"gsbp-cad9514","itemSpacing":{"margin":{"values":{},"locked":false},"padding":{"values":{"top":["15px"],"right":["15px"],"bottom":["15px"],"left":["15px"]},"locked":true}},"shadow":{"hoffsetHover":0,"voffsetHover":5,"blurHover":20,"spreadHover":0,"colorHover":"#1f202017","positionHover":"","presetHover":"2"},"border":{"borderRadius":{"values":{"topLeft":["5px"],"topRight":["5px"],"bottomRight":["5px"],"bottomLeft":["5px"]},"locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#e8ecee"]},"styleHover":{},"sizeHover":{},"colorHover":{},"custom":{},"customEnabled":{}},"columnGrid":[3,3,2,1],"repeaterType":"ce","extra_filters":{"modules":""},"flexbox":{"type":"flexbox","flexDirection":["column"],"justifyContent":["space-between"]}} -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-012e47f","type":"inner","localId":"gsbp-012e47f","localStyles":{"spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{},"locked":false}},"position":{"positio
@wpsoul
wpsoul / gist:0398141f0718340d45bcdf99d199c38e
Created February 29, 2024 00:06
Woocommerce grid with second image on hover for Greenshift Wordpress
<!-- wp:greenshift-blocks/querygrid {"id":"gsbp-172c291","inlineCssStyles":null,"itemSpacing":{"margin":{"values":[],"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":["10px",null,null,0],"right":[null,null,null,0],"bottom":[null,null,null,0],"left":[null,null,null,0]},"unit":["px","px","px","px"],"locked":false},"overflow":["hidden"]},"border":{"borderRadius":{"values":{"topLeft":6,"topRight":6,"bottomRight":6,"bottomLeft":6},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1,null,null,1]},"color":{"all":["#7d7d7d2b",null,null,"#ffffff00"]},"styleHover":[],"sizeHover":[],"colorHover":[]},"data_source":"cpt","cat":[],"tag":[],"post_type":"product","tax_name":"","ids":[],"enable_pagination":"1","columnGrid":[4,3,2,2],"flexbox":{"type":"flexbox","flexDirection":["column"],"justifyContent":["flex-start"]}} -->
<!-- wp:greenshift-blocks/dynamicgallery {"id":"gsbp-224504c","dynamicGClasses":[{"value":"hoveredproductimage","type":"local","label":"hoveredproductimage","locale
@wpsoul
wpsoul / gist:43709e59bdd9bbd4b10721962e802848
Created February 8, 2024 15:27
slider of containers in Greenshift
<!-- wp:greenshift-blocks/swiper {"id":"gsbp-5d98ea4","tabs":3,"slidesPerView":[2.2,null,null,null],"loop":true,"overflow":true,"centered":true} -->
<div class="wp-block-greenshift-blocks-swiper gs-swiper gspb_slider-id-gsbp-5d98ea4" style="position:relative"><div class="gs-swiper-init" data-slidesperview="2.2" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="400" data-loop="true" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="true" data-autoplay="false" data-autodelay="4000" data-effect="" data-coverflowshadow="false"><div class="swiper"><div class="swiper-wrapper"><!-- wp:greenshift-blocks/swipe {"id":"gsbp-bbf2bdd"} -->
<div class="swiper-slide"><div class="wp-block-greenshift-blocks-swipe swiper-slide-inner gspb_sliderinner-id-gsbp-bbf2bdd"><div class="slider-content-zone"><!-- wp:greenshift-blocks/container {"id":"gsbp-5c3425f","flexbox":{"type":"flexbox","f
@wpsoul
wpsoul / gist:69c3f2286d0de0010fe597d8cfcc6128
Created January 6, 2024 19:16
Pin scroll with circle reveal in Greenshift Wordpress
<!-- wp:greenshift-blocks/container {"id":"gsbp-d90ec87","inlineCssStyles":".gspb_container-id-gsbp-d90ec87{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-d90ec87.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}#gspb_container-id-gsbp-d90ec87.gspb_container{min-height:150vh;}","blockWidth":{"customWidth":{"value":[]},"customHeight":{"value":[]},"heightType":"custom","minHeight":["150vh"]},"align":"full"} -->
<div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-d90ec87" id="gspb_container-id-gsbp-d90ec87"><!-- wp:greenshift-blocks/container {"id":"gsbp-89c2d01","inlineCssStyles":".gspb_container-id-gsbp-89c2d01{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-89c2d01.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}body.gspb-bodyfront #gspb_container-id-gsbp-89c2d01.gspb_container{position:sticky;top:0px;align-self:start;}#gspb_container-id-gsbp-8
<!-- wp:greenshift-blocks/row {"id":"gsbp-e50ca35d-ad33","inlineCssStyles":null,"align":"full","rowLayout":"2","brp_rowLayout":["30","30",null],"displayStyles":false,"background":{"image":["https://recart.wpsoul.com/wp-content/uploads/2022/06/bg.webp"],"size":["cover"],"positionImage":[{"x":"0.47","y":"0.44"}]},"spacing":{"margin":{"values":{"bottom":[50]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[60]},"unit":["px","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-e50ca35d-ad33" id="gspb_row-id-gsbp-e50ca35d-ad33"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-77de5091-2614","inlineCssStyles":null,"columnSize":"6","brp_columnSize":["12","12",null]} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_row__col--md-12 gspb_row__col--sm-12 gspb_col-id-gsbp-77de5091-2614" id="gspb_col-id-gsbp-77de5091-2614"><!-- wp:greenshift-blocks/iconlist {"id":"gsbp-3834941
@wpsoul
wpsoul / gist:c1ff0789fd5e7bbf688b79d112d8c540
Created December 1, 2023 02:35
Animated border in Wordpress Greenshift
<!-- wp:greenshift-blocks/container {"id":"gsbp-47d38c5b-f3dd","inlineCssStyles":"#gspb_container-id-gsbp-47d38c5b-f3dd.gspb_container{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-47d38c5b-f3dd.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}#gspb_container-id-gsbp-47d38c5b-f3dd.gspb_container{padding-top:4px;padding-right:4px;padding-bottom:4px;padding-left:4px;overflow:hidden;}","spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{"top":["4px"],"right":["4px"],"bottom":["4px"],"left":["4px"]},"locked":true},"overflow":["hidden"]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-47d38c5b-f3dd" id="gspb_container-id-gsbp-47d38c5b-f3dd"><!-- wp:greenshift-blocks/container {"id":"gsbp-fd128d36-3f19","inlineCssStyles":"#gspb_container-id-gsbp-fd128d36-3f19.gspb_container{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-fd128d36-3f19.gspb_container \u003e p:last-of-type{
@wpsoul
wpsoul / gist:2bd48e812978f536d64ba564197dcac5
Last active November 28, 2023 13:50
Logo transition with greenshift wordpress
<!-- wp:greenshift-blocks/row {"id":"gsbp-cbde7011-2e82","inlineCssStyles":null,"align":"full","displayStyles":false,"background":{"color":""},"isVariation":""} -->
<div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-cbde7011-2e82" id="gspb_row-id-gsbp-cbde7011-2e82"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-f249cbae-784e","inlineCssStyles":null} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--12 gspb_col-id-gsbp-f249cbae-784e" id="gspb_col-id-gsbp-f249cbae-784e"><!-- wp:greenshift-blocks/container {"id":"gsbp-ee1f8bfc-5cec","inlineCssStyles":null,"flexbox":{"type":"flexbox","flexDirection":["row"],"columngap":["15px"],"rowgap":["15px"],"justifyContent":["space-between"]},"isVariation":"flexbox"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-ee1f8bfc-5cec" id="gspb_container-id-gsbp-ee1f8bfc-5cec"><!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-8b5232ac-6f9e","inlineCssStyles":null,
@wpsoul
wpsoul / gist:9592093bb56e98396a015a1e1846f282
Created November 25, 2023 00:33
Sticked panel section in Greenshift Wordpress
<!-- wp:greenshift-blocks/container {"id":"gsbp-6ef084ec-4689","inlineCssStyles":"#gspb_container-id-gsbp-6ef084ec-4689.gspb_container{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-6ef084ec-4689.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}#gspb_container-id-gsbp-6ef084ec-4689.gspb_container{display:flex;flex-direction:column;row-gap:200px;}body.gspb-bodyfront #gspb_container-id-gsbp-6ef084ec-4689.gspb_container{position:relative;}body.gspb-bodyfront #gspb_container-id-gsbp-6ef084ec-4689.gspb_container{min-height:2400px;}@media (max-width: 575.98px){body.gspb-bodyfront #gspb_container-id-gsbp-6ef084ec-4689.gspb_container{min-height:3400px;}}","flexbox":{"type":"flexbox","flexDirection":["column"],"rowgap":["200px"]},"position":{"positionType":["relative","","",""],"positions":{"values":{}}},"blockWidth":{"customWidth":{"value":[]},"customHeight":{"value":[]},"heightType":"custom","minHeight":["2400px",null,null,"3400px"]}} -->
<div class="wp-
@wpsoul
wpsoul / gist:c005cc71046f7a80e8a4b1f86418a799
Created November 22, 2023 03:22
Color change on scroll with different custom reverse colors (Greenshift WordPress)
<!-- wp:greenshift-blocks/row {"id":"gsbp-9a008358-cd5c","inlineCssStyles":"#gspb_row-id-gsbp-9a008358-cd5c{justify-content: space-between;margin-top: 0px;margin-bottom: 0px;display: flex;flex-wrap: wrap;}#gspb_row-id-gsbp-9a008358-cd5c \u003e .gspb_row__content {display: flex;justify-content: space-between;margin: 0 auto;width: 100%;flex-wrap: wrap;}.gspb_row{position:relative;}div[id^=gspb_col-id]{padding:15px min(3vw, 20px);box-sizing:border-box;position:relative;}body.gspb-bodyfront #gspb_row-id-gsbp-9a008358-cd5c \u003e .gspb_row__content{max-width:var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px);}#gspb_row-id-gsbp-9a008358-cd5c{margin-top:200px;padding-top:250px;padding-bottom:250px;}body .bgchange{background-color:#000000;}body .bgchange{color:#ffffff;}body .bgchange{transition:all 1s cubic-bezier(0.165,0.84,0.44,1);}body .bgchange.active .colortext{color:#0e6cb1;}","dynamicGClasses":[{"value":"bgchange","type":"local","label":"bgchange","localed":false,"css":"body .b
<!-- wp:greenshift-blocks/container {"id":"gsbp-3606c12f-ac49","inlineCssStyles":null,"flexbox":{"type":"grid","gridcolumns":[3,2,2,1],"columngap":[30],"rowgap":[30]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-3606c12f-ac49" id="gspb_container-id-gsbp-3606c12f-ac49"><!-- wp:greenshift-blocks/container {"id":"gsbp-90c60fdf-9873","inlineCssStyles":null,"rowspan":[],"columnspan":[],"flexbox":{},"animation":{"duration":700,"easing":"ease"},"background":{"color":"#f7f8fa"},"overlay":{"color":"#7000f4","circleclip":"left center","hoverEditor":"yes","circleclipsize":300,"image":[null],"size":["cover"],"repeat":["no-repeat"],"overlayState":"Gradient","gradient":"linear-gradient(to top right,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary) 0%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary) 100%)","hoverShiftX":"","hoverOverflow":"yes","hoverShiftY":"","hoverRotate":"","hoverScale":""},"border":{"borderRadius":{"values":{