Advanced Buttons

Advanced Buttons

Buttons are an integral part of any website. It is one of the most simple UI elements but a very important one. A website is incomplete without it. The main purpose of this advanced buttons block is to make more advanced buttons that capture the attention of your visitors.

Pro tip
Always label the buttons with the actions they are required to perform. For eg: If you want your visitors to buy a product, the button should say “Buy This Product” and not a generic label “Click Here”. Also, size your buttons properly to improve conversions. They should not be too big or too small.

How to use the Advanced Buttons Block of The Plus Addons For Gutenberg

The Advanced Button block comes with various creative styles to create awesome buttons. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Advanced Button into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Advanced Button after “/” sign, eg.“/Advanced Button”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Advanced Buttons

Button Type

Select the Button type of the button you want to display. You can select between CTA Button and Download Button.

Style

Select any one style of the button you want to display.

Button Text

Add your button text here.

Link

Add the link of your button here.

Layout

Alignment

Adjust the alignment of the button here.

2. Style

The Style tab is used for customizing the appearance of all the Advanced Button block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Advanced Button Style

Set the Outer Border Height/Width, Padding, Typography, Text Color, Background Type, Border Type, Border Radius, and Box Shadow effects here.

Download Text Style

Set the Padding, Top Offset, Right Offset, Typography, Text Color, Background Type, Border Type, Border Radius, and Box Shadow effects here.

Box Content

Set the Background Type, Border Type, Border Radius, and Box Shadow effects here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.