How to use buttons from Styleguide

Hi there,

you would need to copy and paste them into the page.
Or if you have GB Pro, you can save them into your Local Patterns, and simply add the pattern where you need it.

Hi David,

How do I copy-paste the buttons?

I think I deleted the Style guide page that came with the theme.

Create a draft page on your site, switch the editor to code view ( in 3 dot menu in toolbar ) then paste in this code:

<!-- wp:generateblocks/grid {"uniqueId":"eaa50217","columns":4,"horizontalGap":20,"verticalGap":30,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"357af6cc","isGrid":true,"gridId":"eaa50217","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"30cd867a","alignmentTablet":"center","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"80d5be1e","hasUrl":true,"backgroundColor":"var(\u002d\u002dbase-2)","textColor":"var(\u002d\u002daccent)","backgroundColorHover":"var(\u002d\u002dcontrast-2)","textColorHover":"var(\u002d\u002dbase-2)","fontFamily":"Barlow","fontFamilyFallback":"sans-serif","googleFontVariants":"100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic","fontWeight":"700","fontSize":16,"textTransform":"uppercase","paddingTop":"14","paddingRight":"26","paddingBottom":"14","paddingLeft":"26"} -->
<a class="gb-button gb-button-80d5be1e gb-button-text" href="#">Button 1</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"eb3db856","isGrid":true,"gridId":"eaa50217","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"c9577039","alignmentTablet":"center","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"07a8118f","hasUrl":true,"backgroundColor":"var(\u002d\u002dcontrast-2)","textColor":"var(\u002d\u002dbase-2)","backgroundColorHover":"var(\u002d\u002daccent)","textColorHover":"","borderColor":"var(\u002d\u002dbase-2)","borderColorHover":"","fontFamily":"Barlow","fontFamilyFallback":"sans-serif","googleFontVariants":"100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic","fontWeight":"500","fontSize":18,"textTransform":"uppercase","paddingTop":"15","paddingRight":"30","paddingBottom":"15","paddingLeft":"30","borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1"} -->
<a class="gb-button gb-button-07a8118f gb-button-text" href="#">Button 2</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"9564bf71","isGrid":true,"gridId":"eaa50217","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"bb416593","alignmentTablet":"center","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"0a50eb00","hasUrl":true,"backgroundColor":"var(\u002d\u002daccent)","textColor":"var(\u002d\u002dbase-2)","backgroundColorHover":"var(\u002d\u002dcontrast-2)","textColorHover":"","borderColor":"var(\u002d\u002dbase-2)","borderColorHover":"","fontFamily":"Barlow","fontFamilyFallback":"sans-serif","googleFontVariants":"100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic","fontWeight":"700","textTransform":"uppercase","letterSpacing":0.08,"paddingTop":"20","paddingRight":"44","paddingBottom":"20","paddingLeft":"44","borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1"} -->
<a class="gb-button gb-button-0a50eb00 gb-button-text" href="#">Button 3</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"ab1d2a40","isGrid":true,"gridId":"eaa50217","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"b7dea8b4","alignmentTablet":"center","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"7333ff15","hasUrl":true,"backgroundColor":"var(\u002d\u002dcontrast-3)","textColor":"var(\u002d\u002dbase-2)","backgroundColorHover":"var(\u002d\u002daccent)","textColorHover":"","borderColor":"","borderColorHover":"","fontFamily":"Barlow","fontFamilyFallback":"sans-serif","googleFontVariants":"100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic","fontWeight":"700","textTransform":"uppercase","paddingTop":"14","paddingRight":"32","paddingBottom":"14","paddingLeft":"32","borderRadiusTopRight":"9999","borderRadiusBottomRight":"9999","borderRadiusBottomLeft":"9999","borderRadiusTopLeft":"9999"} -->
<a class="gb-button gb-button-7333ff15 gb-button-text" href="#">Button 4</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Then switch back to the visual editor.

Thank you so much David. It worked.

Glad to hear that