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.comUpdated   97 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

<!-- 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

<!-- 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

Item added to cart.
0 items - $0
The Blog of Matt G.