Button Module

Buttons make it easy for your visitors to find the information they need and is also an effective way to encourage them to visit specific pages on your website. It is possible to find the Button Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.


Edit the Button Module

To open the editing menu, double-click on top of the button you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.

 

1. Content

1.1. Button Text

In this box you should type the text you wish the button to display.

 

1.2. Width

Instead of having the button's size dependent on its content, it is possible to define a fixed width for the button. The percentage is related to the width of the column where the button is included; this means a button width of 25% occupies exactly a quarter of its column.


1.3. Float Button & Button Placement 

With these options you are able to place a button in your preferred location - right, center or left.

 

1.4. Clickthrough URL

In this section it is possible to define the behavior of the button - linking it to an internal page, an external page, an email or a file. It is also possible to input a phone number which triggers a device's default call application and dials the number. In order to do so, select "External" and type in "tel:" followed by the phone number. If you want to use the phone number you have entered in Global Data, input the following: tel:[phone].

 

If you're linking your button to a file download, keep in mind that only the following formats are supported:


1.4.1. SET "NOFOLLOW" PROPERTY

In this section it is possible to set a "nofollow" property to that specific link. This is a particularly relevant setting if you do not want search engines to consider that hyperlink and, therefore, when this setting is enabled, your link will not affect the target's ranking in the search engine index. 


1.5. Title Tag

The Title Tag tells people and search engines what that page is about. It should contain relevant keywords given that this element is part of what makes people want to visit your site when it shows up in search results.


1.6. Icon

It is possible to add a small icon to your button. Simply choose your preferred icon from the list and select it to add it to your button; to remove the icon, simply select it again until it is no longer highlighted. 


2. Styling

2.1. Text

When styling the button's text you can define the font color, size, height, family, weight and alignment.

 

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. Settings

3.1. Tracking

With the editor it is possible to track your visitors behavior regarding that specific button. Attribute a custom tracking name to the button in the field and you will be able to track its action and statistics on the Home dashboard of the editor, under Custom Actions. Read more about Visitor Statistics here!

 

4. Button Global Styling

Instead of individually styling each Button module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Button menu. Read more about Buttons Global Styling here!

 

Anything we’ve not covered?

Contact Us