button gutenberg block

Getwid Blocks: Button Gutenberg Block

Home > Blog > Getwid Gutenberg Blocks > Getwid Blocks: Button Gutenberg Block

How to add a custom Gutenberg button or a button group to your WordPress site? The Button Gutenberg block by Getwid allows you to do both. With its help, you can add one button or a group of buttons along with any content in Gutenberg. Buttons come in several modern styles letting you create rich visual experiences.

Why Getwid?

For a 100% free WordPress plugin, Getwid makes a contribution of 40+ extra Gutenberg blocks to your current blocks collection. Each element is powered by advanced content & styling features – easy to master by beginners and interesting for pro developers.

But the main highlight of Getwid is the ability of each block to automatically adjust the styling to your active WordPress theme. This means it will output one button or even a button group in style with your overall design, and you don’t need to work around it too much. You might be interested in more examples of how it works in the default WordPress Twenty Nineteen theme.
Getwid WordPress Business Plugin

Button Requiremenents

To make your button group efficient on your WordPress site, they have to correspond to certain requirements:

  1. Your text message should urge to one action;
  2. All buttons should be visible. Namely, they need to contrast the background and have a proper size to the neighboring content blocks.
  3. Choose efficient colors. Such colors as orange and green may work better than red colors associated with negative actions.
  4. The button placement should correspond to current UX & IU standards.
  5. The text message inside a button must be short (no longer than 5 words)

Purpose of the Button Group Gutenberg Block

button featured

The block will accelerate and simplify the process of adding buttons in Gutenberg. It implies:

  • Call-to-action button groups in marketing areas
  • Read more buttons
  • Buttons accompanying services/projects.

Features of the Button Group Gutenberg Block

There are not a lot of settings for buttons, so you’ll be really quick in setting them up:

  • Add any number of buttons (the block adds two by default) and set the spacing between them.
  • Designate alignment, direction, and button width for different viewports.

button group settings

  • Select a style for buttons (default, outlined, or squared). You can change the button style inline in Gutenberg as well.

button styles

  • Set background and text colors.
  • Edit button text and links inline.

Here are a few examples where buttons are places inside Sections for different purposes:

  • Pricing tables:

button pricing

  • Read more buttons:

button gutenberg block

  • Into sections:

intro section button group

Design Tips

  • If you design advanced content elements and want to add buttons, use the Section block by Getwid.
  • To keep design consistency, try to stick to the following common design practice for button usage: use only one button style and not more than two button colors.

Download Gutenberg Blocks + Fee Starter Theme

If you want to get a professional design built with Getwid blocks and Gutenberg, you’ll enjoy the Getwid Base theme with tons of preinstalled content blocks for projects of different types and scales.

It’s a free theme with a stylish and lightweight flat design, thought-out typography, and, of course, good-looking buttons!

Check out Getwid Demo

Download Getwid Gutenberg Blocks Free

Install Getwid Base Starter Theme for Gutenberg

Getwid Video Tutorials

Was this article helpful?

Yes No

You have already left your review.

Leave a Reply

Your email address will not be published. Required fields are marked *