Skip to content

Instantly share code, notes, and snippets.

@shishirraven
Created August 10, 2024 03:37
Show Gist options
  • Save shishirraven/b555a661448c8f4c35dc5eb61fd4d553 to your computer and use it in GitHub Desktop.
Save shishirraven/b555a661448c8f4c35dc5eb61fd4d553 to your computer and use it in GitHub Desktop.
Plugin Hero Section
<!-- wp:group {"align":"full","style":{"color":{"gradient":"linear-gradient(135deg,rgb(90,0,175) 0%,rgb(182,99,99) 100%)"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|20","right":"var:preset|spacing|20"},"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"constrained","contentSize":"1000px"}} -->
<div class="wp-block-group alignfull has-base-2-color has-text-color has-background has-link-color" style="background:linear-gradient(135deg,rgb(90,0,175) 0%,rgb(182,99,99) 100%);margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--20)"><!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false} -->
<div class="wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:image {"id":3339,"width":"128px","sizeSlug":"full","linkDestination":"none","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
<figure class="wp-block-image size-full is-resized"><img src="https://iamshishir.com/wp-content/uploads/2024/08/Woo-Commerce-1-1.gif" alt="" class="wp-image-3339" style="width:128px"/></figure>
<!-- /wp:image -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:post-title {"style":{"typography":{"fontSize":"1.8rem","fontStyle":"normal","fontWeight":"800"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2"} /-->
<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#faebff"}}},"color":{"text":"#faebff"}}} -->
<p class="has-text-color has-link-color" style="color:#faebff">Categorize your Products by brand and showcase your best products by brands.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Testing with Wordpress 6.6.1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"5px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size"><strong>$10</strong> </p>
<!-- /wp:paragraph -->
<!-- wp:group {"style":{"spacing":{"blockGap":"3px"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group has-small-font-size"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"#edbeff"}}},"color":{"text":"#edbeff"},"typography":{"lineHeight":"1.1"}}} -->
<p class="has-text-color has-link-color" style="color:#edbeff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;line-height:1.1">Per</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"#edbeff"}}},"color":{"text":"#edbeff"},"typography":{"lineHeight":"1.1"}}} -->
<p class="has-text-color has-link-color" style="color:#edbeff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;line-height:1.1">Year</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:html -->
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16ZM17.4773 1.23626L30.7637 14.5227C30.0704 7.5083 24.4917 1.92965 17.4773 1.23626ZM30.7637 17.4773C30.0704 24.4917 24.4917 30.0704 17.4773 30.7637L30.7637 17.4773ZM14.8417 30.7918L1.20818 17.1583C1.7696 24.4286 7.57138 30.2304 14.8417 30.7918ZM1.20818 14.8417C1.7696 7.57138 7.57138 1.7696 14.8417 1.20818L1.20818 14.8417ZM22.7494 14.1011C22.5128 13.9373 22.1911 14.0047 22.0302 14.2457C21.0933 15.6818 19.1058 15.759 19.0017 15.759H18.9544C16.5033 15.759 15.5663 17.8891 15.5285 17.9758C15.4149 18.2457 15.538 18.5541 15.7935 18.6698C15.8597 18.6987 15.9354 18.718 16.0017 18.718C16.2004 18.718 16.3897 18.6023 16.4749 18.3999L16.4761 18.3973C16.5089 18.3261 17.159 16.9138 18.7841 16.8192V19.5469C18.7178 20.1349 18.4434 20.5975 17.9607 20.9445C17.4591 21.3011 16.7872 21.4843 15.9638 21.4843C14.9796 21.4843 14.1752 21.1373 13.5789 20.4529C12.9732 19.7686 12.6704 18.7951 12.6704 17.5421L12.6799 14.5349C12.7272 13.4264 13.0206 12.5493 13.5789 11.9228C14.1846 11.2385 14.9796 10.8915 15.9638 10.8915C16.7872 10.8915 17.4591 11.0746 17.9607 11.4312C18.4623 11.7879 18.7462 12.2794 18.7935 12.9156V12.983C18.7935 13.3493 19.0869 13.6481 19.4465 13.6481C19.8062 13.6481 20.0995 13.3493 20.0995 12.983V12.9156C20.0049 11.9614 19.579 11.2096 18.8125 10.6409C18.0459 10.0722 17.09 9.79269 15.9354 9.79269C14.5632 9.79269 13.4559 10.2553 12.6136 11.171C11.8186 12.0288 11.4022 13.1565 11.3549 14.5445C11.3549 14.5927 11.3526 14.6408 11.3502 14.689L11.3502 14.6891C11.3478 14.7373 11.3455 14.7855 11.3455 14.8337L11.3549 17.5421H11.3455C11.3455 19.0746 11.7713 20.2987 12.6136 21.2144C13.4559 22.13 14.5632 22.5927 15.9354 22.5927C17.09 22.5927 18.0459 22.3132 18.8125 21.7445C19.5128 21.224 19.9292 20.5397 20.0712 19.6915L20.0995 16.665C20.9608 16.4529 22.1343 15.971 22.8725 14.8337C23.0617 14.5927 22.9955 14.265 22.7494 14.1011ZM16.1455 30.4499L1.69554 16L16.1455 1.55009L30.5954 16L16.1455 30.4499Z" fill="white"></path> </svg>
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","style":{"color":{"background":"#ffc800"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"border":{"radius":"100px"},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}},"typography":{"fontSize":"1.2rem"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:1.2rem"><a class="wp-block-button__link has-contrast-color has-text-color has-background has-link-color wp-element-button" style="border-radius:100px;background-color:#ffc800;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)"><strong>Buy Now</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":""} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns {"hasShadow":false,"shadowDepth":"shadow-sm","shadowColor":"#C6C6C6"} -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%","hasShadow":false,"hasGradient":false,"shadowDepth":"shadow-sm","shadowColor":"#C6C6C6","shadowGradient":"linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)","shadowGradientSpread":10} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:image {"id":3385,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded","style":{"border":{"radius":"20px"},"shadow":"var:preset|shadow|sharp"},"hasShadow":false,"hasGradient":false,"shadowDepth":"shadow-sm","shadowColor":"#C6C6C6","shadowGradient":"linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)","shadowGradientSpread":10} -->
<figure class="wp-block-image size-full has-custom-border is-style-rounded"><img src="https://iamshishir.com/wp-content/uploads/2024/08/selection_interface_brands.jpg" alt="" class="wp-image-3385" style="border-radius:20px;box-shadow:var(--wp--preset--shadow--sharp)"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3384,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded","style":{"border":{"radius":"20px"},"shadow":"var:preset|shadow|sharp"}} -->
<figure class="wp-block-image size-full has-custom-border is-style-rounded"><img src="https://iamshishir.com/wp-content/uploads/2024/08/display_on_product.jpg" alt="" class="wp-image-3384" style="border-radius:20px;box-shadow:var(--wp--preset--shadow--sharp)"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:image {"id":3383,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded","style":{"border":{"radius":"20px"},"shadow":"var:preset|shadow|sharp"}} -->
<figure class="wp-block-image size-full has-custom-border is-style-rounded"><img src="https://iamshishir.com/wp-content/uploads/2024/08/www.canva_.com_design_DAGNXGg91Mw_0kjCP0T0kyErF6gQYsXy9w_view_utm_contentDAGNXGg91Mwutm_campaigndesignshareutm_mediumlinkutm_sourceeditor-2.png" alt="" class="wp-image-3383" style="border-radius:20px;box-shadow:var(--wp--preset--shadow--sharp)"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":3391,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded","style":{"border":{"radius":"20px"},"shadow":"var:preset|shadow|sharp"}} -->
<figure class="wp-block-image size-large has-custom-border is-style-rounded"><img src="https://iamshishir.com/wp-content/uploads/2024/08/screenshot_of_brands_admin_interface-1024x567.jpg" alt="" class="wp-image-3391" style="border-radius:20px;box-shadow:var(--wp--preset--shadow--sharp)"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment