Buttons

Buttons can be added with the QT: Button widget but also with a shortcode. The default button shortcode can be used as follow:

[button href=”your-link-here”] Text [/button]

You can add different attributes to the shortcode to change the styling:

Style: Change the look of the button; use primary or outline
Example: [button style="primary"] Text [/button]

Icon: Add a FontAwesome icon to the button
Example: [button icon="fa-cog"] Text [/button]

Target: Link the button to a new window, or not. To link in the same use _self or new _blank window
Example: [button target="_self"] Text [/button]

Edges: Makes the edges of the buttons rounded
Example: [button edges="rounded"] Text [/button]

Fullwidth: Makes the button fullwidth
Example: [button fullwidth="true"] Text [/button]

Text Color: Change the text color:
Example: [button color="white"] Text [/button]

Background Color: Change the background color:
Example: [button background="red"] Text [/button]

Border Color: Change the border color, useful for the outline button:
Example: [button border_color="red"] Text [/button]

Custom Class: Add a custom class to the button
Example: [button custom_class="class-here"] Text [/button]

On the Font Awesome website you can see all available font classes you can use.

Was this page helpful?