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.1. Button Text
In this box you should type the text you wish the button to display.
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.
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.
When styling the button's text you can define the font color, size, height, family, weight and alignment.
With this option you can choose a solid color as the background for the button.
Here you can define the border color, width, style and radius of the button.
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.
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!