Recycle Layouts

Useful Custom Code Snippets for GeneratePress / GenerateBlocks (Updated 2024)

This feature is a great time-saver because you can create beautiful page layouts to display what you want easily.

By ♟ Maggew.com — Updated   378 Views
0jd 96a

Browse the catalog below and if you see something you like, just copy / paste the code to your clipboard and paste it into your Post / Page editor. You must have GeneratePress and GenerateBlocks installed.

  1. Highlight Code Snippet and CTRL + `C`
  2. In your WordPress post or page, just CTRL + V
  3. Use your Document Overview using SHIFT + ALT + O to easily drag / drop elements and make changes

Browse Collection

Latest Post in Cupertino Style
<!-- wp:generateblocks/container {"uniqueId":"edaa081d","outerContainer":"contained","containerWidth":980,"isDynamic":true,"blockVersion":4,"useInnerContainer":true,"spacing":{"marginTop":"50px"},"dynamicLinkType":"single-post"} -->
<!-- wp:generateblocks/headline {"uniqueId":"fc49ef0a","element":"p","blockVersion":3,"typography":{"fontSizeMobile":"24px"},"spacing":{"marginLeftMobile":"20px"},"className":"tdn"} -->
<p class="gb-headline gb-headline-fc49ef0a gb-headline-text tdn"><strong>Recently Updated</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"29cac279","columns":1,"query":{"post_type":"post","per_page":"4","orderby":"modified"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"1d247f59","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"81983f71","isGrid":true,"isQueryLoopItem":true,"gridId":"1d247f59","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"50%","widthMobile":"100%"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopLeftRadius":"20px"},"backgroundColorHover":"var(\u002d\u002dbase)","useDynamicData":true,"dynamicLinkType":"single-post","lock":{"remove":true,"move":true},"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","customSelector":".picard","translateY":-6}]} -->
<!-- wp:generateblocks/grid {"uniqueId":"6a74ba92","columns":2,"verticalAlignment":"center","horizontalAlignmentMobile":"center","isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"e1d29543","isGrid":true,"gridId":"6a74ba92","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"33.33%","widthMobile":"100%"},"dynamicLinkType":"single-post"} -->
<!-- wp:generateblocks/image {"uniqueId":"55b1140a","sizeSlug":"thumbnail","widthMobile":"100%","height":"128px","objectFit":"cover","objectFitMobile":"cover","blockVersion":2,"spacing":{"marginBottomMobile":"20px"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopLeftRadius":"20px","borderBottomLeftRadiusMobile":"0px","borderTopLeftRadiusMobile":"0px"},"useDynamicData":true,"dynamicContentType":"featured-image","useOpacity":true,"opacities":[{"state":"normal","target":"self","customSelector":"","opacity":0.75,"mixBlendMode":""}],"useFilter":true,"filters":[{"type":"grayscale","state":"normal","target":"self","grayscale":75}]} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"035c5dcf","isGrid":true,"gridId":"6a74ba92","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"66.66%","widthMobile":"100%"},"spacing":{"paddingTop":"0px","paddingRight":"20px","paddingBottom":"0px","paddingLeft":"20px","paddingBottomMobile":"20px"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopRightRadiusMobile":"0px","borderBottomRightRadiusMobile":"0px","borderBottomLeftRadiusMobile":"0px"},"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"2d443a6b","element":"h3","blockVersion":3,"typography":{"fontSize":"14px","fontWeight":"700","fontSizeMobile":"24px"},"spacing":{"marginTop":"5px","marginBottom":"10px","marginBottomMobile":"15px"},"linkColor":"var(\u002d\u002dcontrast)","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post","className":"tdn"} -->
<h3 class="gb-headline gb-headline-2d443a6b gb-headline-text tdn"></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"cfebd657","element":"p","blockVersion":3,"typography":{"fontSize":"14px"},"spacing":{"marginBottom":"0px"},"useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-cfebd657 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->
On mouse hover change background color and add transition animation
<!-- wp:generateblocks/grid {"uniqueId":"652a9f92","columns":5,"horizontalGap":20,"verticalGap":20,"verticalGapTablet":20,"isDynamic":true,"blockVersion":2,"className":"no-underline"} -->
<!-- wp:generateblocks/container {"uniqueId":"71446a75","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"scale":1.1,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"60e5df43","mediaId":285,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-60e5df43"><img class="gb-image gb-image-60e5df43" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-5.png" alt="" title="download (5)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"27c410e8","paddingTop":"25","paddingRight":"25","paddingBottom":"0","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"12863851","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-12863851 gb-headline-text">Diablo® IV: Ultimate Edition</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"36b2910b","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-36b2910b gb-headline-text">Pre-purchase now for Early Access to the Open Beta, and more.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"13a7110a","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-13a7110a gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"6e4f1bda","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"96c97b3f","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-96c97b3f gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"fa17dc0b","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"df8f7415","mediaId":287,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-df8f7415"><img class="gb-image gb-image-df8f7415" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-3.png" alt="" title="download (3)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"0422f885","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"bf2f2050","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-bf2f2050 gb-headline-text">World of Warcraft®: Dragonflight</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"9a5eaabb","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-9a5eaabb gb-headline-text">Massively Multiplayer RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"40e7eecd","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"8849d03d","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-8849d03d gb-headline-text">$49.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"06e6c157","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"ac2890d9","mediaId":288,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-ac2890d9"><img class="gb-image gb-image-ac2890d9" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-7.png" alt="" title="download (7)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"d936b96c","paddingTop":"25","paddingRight":"25","paddingBottom":"0","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"fae4b621","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-fae4b621 gb-headline-text">Overwatch® 2: Watchpoint Pack</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"9deffb83","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-9deffb83 gb-headline-text">Get the Premium Battle Pass, 2000 OW Coins and More!</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"98e51d20","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-98e51d20 gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8587b9eb","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"567a79c0","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-567a79c0 gb-headline-text">$39.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8e2dbb6e","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"e587ae8e","mediaId":289,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-e587ae8e"><img class="gb-image gb-image-e587ae8e" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-6.png" alt="" title="download (6)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"840011d1","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"8788e1d6","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-8788e1d6 gb-headline-text">March of the Lich King Tavern Pass</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"49653d7d","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-49653d7d gb-headline-text">Available through April 10, 2023</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a81fdb0b","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-a81fdb0b gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"354a295a","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"d6874f20","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-d6874f20 gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"58e52eb5","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"3d62e5d3","mediaId":291,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-3d62e5d3"><img class="gb-image gb-image-3d62e5d3" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-8.png" alt="" title="download (8)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"0923d944","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"df98eb0a","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-df98eb0a gb-headline-text">Call of Duty®: Modern Warfare® II - Vault Edition</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"8054477c","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-8054477c gb-headline-text">Play Warzone™ 2.0 for free now.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"46b35ed2","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-46b35ed2 gb-headline-text">Action Shooter</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"717e1fe8","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"e00219b2","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-e00219b2 gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Browse the catalog below and if you see something you like, just copy / paste the code to your clipboard and paste it into your Post / Page editor. You must have GeneratePress and GenerateBlocks installed.

  1. Highlight Code Snippet and CTRL + `C`
  2. In your WordPress post or page, just CTRL + V
  3. Use your Document Overview using SHIFT + ALT + O to easily drag / drop elements and make changes

Browse Collection

Latest Post in Cupertino Style
<!-- wp:generateblocks/container {"uniqueId":"edaa081d","outerContainer":"contained","containerWidth":980,"isDynamic":true,"blockVersion":4,"useInnerContainer":true,"spacing":{"marginTop":"50px"},"dynamicLinkType":"single-post"} -->
<!-- wp:generateblocks/headline {"uniqueId":"fc49ef0a","element":"p","blockVersion":3,"typography":{"fontSizeMobile":"24px"},"spacing":{"marginLeftMobile":"20px"},"className":"tdn"} -->
<p class="gb-headline gb-headline-fc49ef0a gb-headline-text tdn"><strong>Recently Updated</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"29cac279","columns":1,"query":{"post_type":"post","per_page":"4","orderby":"modified"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"1d247f59","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"81983f71","isGrid":true,"isQueryLoopItem":true,"gridId":"1d247f59","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"50%","widthMobile":"100%"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopLeftRadius":"20px"},"backgroundColorHover":"var(\u002d\u002dbase)","useDynamicData":true,"dynamicLinkType":"single-post","lock":{"remove":true,"move":true},"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","customSelector":".picard","translateY":-6}]} -->
<!-- wp:generateblocks/grid {"uniqueId":"6a74ba92","columns":2,"verticalAlignment":"center","horizontalAlignmentMobile":"center","isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"e1d29543","isGrid":true,"gridId":"6a74ba92","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"33.33%","widthMobile":"100%"},"dynamicLinkType":"single-post"} -->
<!-- wp:generateblocks/image {"uniqueId":"55b1140a","sizeSlug":"thumbnail","widthMobile":"100%","height":"128px","objectFit":"cover","objectFitMobile":"cover","blockVersion":2,"spacing":{"marginBottomMobile":"20px"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopLeftRadius":"20px","borderBottomLeftRadiusMobile":"0px","borderTopLeftRadiusMobile":"0px"},"useDynamicData":true,"dynamicContentType":"featured-image","useOpacity":true,"opacities":[{"state":"normal","target":"self","customSelector":"","opacity":0.75,"mixBlendMode":""}],"useFilter":true,"filters":[{"type":"grayscale","state":"normal","target":"self","grayscale":75}]} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"035c5dcf","isGrid":true,"gridId":"6a74ba92","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"sizing":{"width":"66.66%","widthMobile":"100%"},"spacing":{"paddingTop":"0px","paddingRight":"20px","paddingBottom":"0px","paddingLeft":"20px","paddingBottomMobile":"20px"},"borders":{"borderTopRightRadius":"20px","borderBottomRightRadius":"20px","borderBottomLeftRadius":"20px","borderTopRightRadiusMobile":"0px","borderBottomRightRadiusMobile":"0px","borderBottomLeftRadiusMobile":"0px"},"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"2d443a6b","element":"h3","blockVersion":3,"typography":{"fontSize":"14px","fontWeight":"700","fontSizeMobile":"24px"},"spacing":{"marginTop":"5px","marginBottom":"10px","marginBottomMobile":"15px"},"linkColor":"var(\u002d\u002dcontrast)","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post","className":"tdn"} -->
<h3 class="gb-headline gb-headline-2d443a6b gb-headline-text tdn"></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"cfebd657","element":"p","blockVersion":3,"typography":{"fontSize":"14px"},"spacing":{"marginBottom":"0px"},"useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-cfebd657 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->
On mouse hover change background color and add transition animation
<!-- wp:generateblocks/grid {"uniqueId":"652a9f92","columns":5,"horizontalGap":20,"verticalGap":20,"verticalGapTablet":20,"isDynamic":true,"blockVersion":2,"className":"no-underline"} -->
<!-- wp:generateblocks/container {"uniqueId":"71446a75","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"scale":1.1,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"60e5df43","mediaId":285,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-60e5df43"><img class="gb-image gb-image-60e5df43" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-5.png" alt="" title="download (5)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"27c410e8","paddingTop":"25","paddingRight":"25","paddingBottom":"0","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"12863851","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-12863851 gb-headline-text">Diablo® IV: Ultimate Edition</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"36b2910b","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-36b2910b gb-headline-text">Pre-purchase now for Early Access to the Open Beta, and more.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"13a7110a","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-13a7110a gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"6e4f1bda","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"96c97b3f","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-96c97b3f gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"fa17dc0b","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"df8f7415","mediaId":287,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-df8f7415"><img class="gb-image gb-image-df8f7415" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-3.png" alt="" title="download (3)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"0422f885","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"bf2f2050","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-bf2f2050 gb-headline-text">World of Warcraft®: Dragonflight</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"9a5eaabb","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-9a5eaabb gb-headline-text">Massively Multiplayer RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"40e7eecd","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"8849d03d","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-8849d03d gb-headline-text">$49.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"06e6c157","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"ac2890d9","mediaId":288,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-ac2890d9"><img class="gb-image gb-image-ac2890d9" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-7.png" alt="" title="download (7)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"d936b96c","paddingTop":"25","paddingRight":"25","paddingBottom":"0","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"fae4b621","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-fae4b621 gb-headline-text">Overwatch® 2: Watchpoint Pack</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"9deffb83","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-9deffb83 gb-headline-text">Get the Premium Battle Pass, 2000 OW Coins and More!</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"98e51d20","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-98e51d20 gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8587b9eb","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"567a79c0","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-567a79c0 gb-headline-text">$39.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8e2dbb6e","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"e587ae8e","mediaId":289,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-e587ae8e"><img class="gb-image gb-image-e587ae8e" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-6.png" alt="" title="download (6)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"840011d1","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"8788e1d6","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-8788e1d6 gb-headline-text">March of the Lich King Tavern Pass</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"49653d7d","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-49653d7d gb-headline-text">Available through April 10, 2023</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a81fdb0b","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-a81fdb0b gb-headline-text">Action RPG</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"354a295a","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"d6874f20","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-d6874f20 gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"58e52eb5","isGrid":true,"gridId":"652a9f92","width":20,"widthTablet":33.33,"widthMobile":50,"paddingSyncUnits":true,"borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","backgroundColor":"#23252b","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"customSelector","customSelector":".picard","timingFunction":"ease","property":"all","duration":0.35,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"customSelector","translateX":0,"translateY":-6,"customSelector":".picard"}],"backgroundColorHover":"#313339","textColorHover":"var(\u002d\u002dbase-3)","linkType":"wrapper","url":"https://wordpress.vondelphia.com/battle.net/product/example-product/"} -->
<!-- wp:generateblocks/image {"uniqueId":"3d62e5d3","mediaId":291,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-3d62e5d3"><img class="gb-image gb-image-3d62e5d3" src="https://wordpress.vondelphia.com/battle.net/wp-content/uploads/2023/01/download-8.png" alt="" title="download (8)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"0923d944","paddingTop":"25","paddingRight":"25","paddingLeft":"25","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2,"className":"picard"} -->
<!-- wp:generateblocks/headline {"uniqueId":"df98eb0a","element":"div","fontWeight":"700","fontSize":18} -->
<div class="gb-headline gb-headline-df98eb0a gb-headline-text">Call of Duty®: Modern Warfare® II - Vault Edition</div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"8054477c","element":"p","textColor":"#ffb400","fontWeight":"normal","fontSize":14,"marginTop":"5","marginBottom":"10"} -->
<p class="gb-headline gb-headline-8054477c gb-headline-text">Play Warzone™ 2.0 for free now.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"46b35ed2","element":"p","textColor":"","fontWeight":"normal","fontSize":12,"marginBottom":"0"} -->
<p class="gb-headline gb-headline-46b35ed2 gb-headline-text">Action Shooter</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"717e1fe8","textColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"e00219b2","element":"p","textColor":"","fontWeight":"700","fontSize":16,"marginBottom":"0","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true} -->
<p class="gb-headline gb-headline-e00219b2 gb-headline-text">$99.99</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

1 thought on “Useful Custom Code Snippets for GeneratePress / GenerateBlocks (Updated 2024)”

Leave a Comment

The Blog of Matt G. > Blog > Status Updates > Useful Custom Code Snippets for GeneratePress / GenerateBlocks (Updated 2024)
Home Start Here Send Money

I'm sure that as long as you are generous with your compliments,
and stingy with your complaints, you'll get what you desire.
~ Matt G.

Favorite Bible Verses & Quotes

The bible is one of the most powerful books on our planet for so many reasons. One of my absolute favorite things to do is extract wisdom and learn from all the lessons shared. The bible is so much more than a great read.

The Blog of Matt G. 🐘

Continue Shopping →
Item added to cart.
0 items - $0
Checkout