Articles on: The editor

Button

The editor has two button elements: Button, a text element styled as a button, and Image button, a button made from your own images. You add both from the Add panel on the left side of the editor. Button is in the Elements category and Image button is in the Specials category.



Adding a button


A Button is a text element styled as a button. It lands on the canvas with the text "Button" on a teal background, ready for you to change.


  1. Click Add in the left panel.
  2. In the Elements category, drag Button onto the canvas.
  3. Double-click the button on the canvas to edit its text.
  4. With the button selected, open the Element tab on the right and click the wrench icon (Settings) to style it.


The settings for a Button in the Element tab include:


  • Typography: the font settings of the button text.
  • Background: the button's fill colour.
  • Border and Rounding: the outline and the rounded corners.
  • Padding: the space between the text and the edge of the button.
  • Hover: the colours the button shows while a visitor's mouse is over it.


Changing a button's hover colours


By default, a Button changes colour while a visitor's mouse is over it: a new Button gets a grey background and black text on hover. To change these colours:


  1. Select the button on the canvas.
  2. In the Element tab on the right, click the wrench icon (Settings) and go to the Hover block.
  3. Set the Text, Background and Border colours.


Adding an image button


An Image button is a button that shows your own image instead of text. You can choose a second image that replaces the first while a visitor's mouse is over the button.


  1. Click Add in the left panel.
  2. In the Specials category, drag Image button onto the canvas.
  3. In the Element tab on the right, click the wrench icon (Settings). Under Images, click Image and choose the image to show by default.
  4. Optionally, click Hover image and choose the image to show while the visitor's mouse is over the button.


If you don't choose a hover image, the default image stays visible on hover.


Choosing the default image resizes the image button to that image's proportions. The hover image is fitted into the same space, so use two images with the same dimensions.


Linking a button


Most elements in the editor, such as images, text and shapes, can link somewhere, so you don't need a button to make something clickable. To give a Button or Image button a link, select it, then in the Element tab on the right click the link icon (Links).


Frequently asked questions


Why does my button turn grey when I hover over it?


A new Button has default hover colours: a grey background and black text. To change them, select the button, click the wrench icon (Settings) in the Element tab on the right, and set the Text, Background and Border colours in the Hover block.


Do I need a button to make something clickable?


No. Most elements, such as images, text and shapes, can have a link. Videos, audio, embeds, charts and forms can't. Select the element, then in the Element tab on the right click the link icon (Links). Use a Button when you want a clickable shape with text in it.


Can I use different images for an image button in the mobile layout?


Not for the same image button. When an image button is on both the desktop and the mobile layout, you choose its Image and Hover image in the desktop layout, and the mobile layout shows the same images.

Updated on: 29/10/2026