Gutenberg Buttons Block Tutorial

Introduction

Dive into the world of dynamic web design with Gutenberg Buttons Block by Premium Blocks, an essential tool for creating engaging and interactive websites. Whether you’re looking to guide your visitors to important pages or promote special offers, Gutenberg Buttons Block for WordPress sites integrated within the Gutenberg editor offers unparalleled ease of use and flexibility. You’ll have the power to adjust the space between buttons, align them perfectly within their container, and even set the group’s overall alignment. But that’s just the beginning, explore advanced styling options to tailor every aspect of your buttons’ appearance, from typography to margins and padding, ensuring they perfectly match your site’s aesthetic and engage your audience at every click.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Buttons Block?

Upon activating Premium Blocks, you can enhance your Gutenberg editor by inserting the Premium Buttons Block. You have multiple options for customization: select from an extensive icon droplist, choose an image from the Media Library, upload a new one, add an SVG file, or incorporate a Lottie animation. These features allow you to create a visually dynamic Gutenberg Buttons Block element.

General Settings

Gap Between Buttons: Control the space between individual buttons, with a slider to adjust the value.
Alignment: Choose the alignment of the buttons within their container (left, center, or right).
Group Alignment: Set the overall alignment of the button group either horizontally or vertically within its section or column.

Gutenberg Buttons block's gap between buttons, alignment, & group alignment. — Buttons Block for Gutenberg Editor

Gutenberg Buttons Blocks’ Style

Gutenberg Buttons Blocks’ Style provides advanced styling options to enhance the visual appeal of your button groups, including typography, margins, and padding, allowing for a cohesive and tailored appearance across your site.

Group Styles: This section is for applying styles to a group of buttons rather than individual buttons.
Typography: Adjust the font settings for the text on the buttons.
Margin: Control the space outside the borders of the button group, with the ability to set different values for top, right, bottom, and left.
Padding: Set the space inside the borders of the button group, also with individual values for each side.

Gutenberg Buttons Block Styling Controls such as typography, margin, or padding — Gutenberg Buttons Block Styling Controls

Single Button Layout

General Settings

Button Types: Choose from various button styles, such as Fill Color, Outline, Fill with Icon, Outline with Icon, Rounded Fill, Rounded Outline, Circled Fill, and Circled Outline.
Hover Effect: Select from different hover effects to enhance interactivity.
Button Size: Adjust the size of the button (e.g., Small, Medium, Large).
Width Settings: Set the button width to percentages like 25%, 50%, 75%, or 100%.
Icon: Toggle on to add an icon to your button and choose the desired icon.
URL: Add the destination URL for the button.
Open Link in New Tab: Toggle on if you want the link to open in a new tab.

Gutenberg Buttons block single button settings. — Gutenberg Buttonsblock – Single Button Settings

Style Settings

Typography: Customize the text typography, including font, size, and weight.
Text Color: Set the text color for both normal and hover states.
Background Type: Choose a solid color, gradient, or image background.
Box Shadow: Add shadow effects to give the button a 3D appearance.
Text Shadow: Apply shadow to the text for an enhanced look.
Border: Customize the border style, width, and color.
Border Radius: Adjust the border radius to make the button corners rounded.
Margin: Set the margin around the button.
Padding: Adjust the padding inside the button to control the spacing around the text.

Gutenberg Buttons Block single button's styling options. — Gutenberg Buttons Block – Single Button Styling Options.

Conclusion

In wrapping up, the Gutenberg Buttons Block exceeds being simply a functional feature it serves as a pipe to maintaining user engagement on your WordPress site. Furnished with intuitive design controls, spanning gap adjustments, alignment tweaks, to a range of styling possibilities, you’re well-equipped to generate buttons that truly captivate. Whether your goal is to steer traffic, spotlight promotional offers, or infuse your pages with a dynamic touch, this block guarantees your aims are achieved with refinement and operational smoothness.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Buttons Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Buttons Block?

General Settings

Gutenberg Buttons Blocks’ Style

Single Button Layout

General Settings

Style Settings

Conclusion

Need Further Help?

About Leap13

Help Center

Global Features

Join Our Newsletter