The Style Editor includes a Call to Action (CTA) button. If you are a marketer, you’ll likely use this button a lot on your website.
1 Customising Button settings
- Go to the Style Editor page.
- At the top of the screen, verify the Default Styles button is selected (it should be green).
- Scroll down to the Button area.
- Hover the mouse pointer on the Button section and then click the Pencil button. The Button Settings panel displays.
- To make the changes active across the website, click the Publish button at the top of the Style Editor page.
Type a word or phrase into the text field. To create a button with Simplified Chinese, click the translate icon.
Choose the way button text sits in the component: align left, centre justified or align right.
Fit to Container
Check the box if you want the button's colour background colour to stretch the full width of the button component.
2 Customising Appearance
Click Appearance on the Settings panel. This opens a suite of tools to manage the appearance and behaviour of the CTA button.
Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see:
Click the plus (+) or minus (-) boxes to increase or decrease the font size. The maximum font size is 40 px. Increasing or decreasing font size changes the size of the button.
Select an English and Simplified Chinese font.
Open the Colour Picker and set the background colour. Choose one of your branding colours (if selected) or a colour from the palette.
Change the background colour when a mouse pointer hovers the button. Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette.
Put a border around the button. The maximum width is 10 px.
Choose a border style: solid, broken, or dotted.
Change the border colour. Click the box and the Colour Picker opens. Choose one of your branding colours (if selected) or a colour from the palette.
Add a rounded edge to border corners. Click the plus (+) or minus (-) boxes. The higher the number, the rounder the corner
3 Customising Spacing
Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.
4 Customising Advanced
For developers, add a Class Name to specify CSS rules. For more information, see: