Buttons

The Button Modules can be styled locally or globally. The advantage of global styling is that it automatically styles all the button modules on your website at the same time, creating a consistent theme on your website and saving your time. It is possible to find Buttons Global Styling under the Module Design section of the Global Styling tab of the editor. 

 

Button vs Button 2+3

All button modules have the same functionalities but in order to allow different stylings of buttons, it is possible to define Global Styling properties for each button module individually. When you have styled Button 1 in Global Styling, Button 3 will inherit those styling properties. Button 3 will keep inheriting those properties until you style it individually in Global Styling.

Button 2 doesn't inherit any styling from the other button modules. Read more about these modules here!

 

1. Content

Under the Content section you can define the button placement - align it to the right, center or left. It is also possible to define the button's width in percentage of the width of the column where its inserted; this will be a fixed width, instead of a width dependent on the button's content. 

 

2. Styling

2.1. Text

In terms of text, it is possible to define the font color, size, line height, font family, font weight, uppercase and alignment options.

 

2.2. Background

With this option you can choose a solid color as the background for the button.

 

2.3. Border

Here you can define the border color, width, style and radius of the button.

 

2.4. Spacing

When styling the spacing you can define the margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element.


2.5. ICON STYLE

When styling the icon it is possible to define its size, color and spacing, both in terms of margin and padding.

 

3. Apply Global Styling

As soon as you save your Global Styling, all the Button Modules will inherit that design. However, if later you choose to style a button locally, it will overwrite the global styling but only for that specific Button Module. Click here to read more about the Button Module local styling!

 

Anything we’ve not covered?

Contact Us