Work with buttons, images, and shapes

Buttons add interactivity and open a URL that you supply. Images and shapes add color and interest to your site. Uploaded images are available from the gallery for reuse.

Each section has a grid to help you position components such as buttons, text blocks, and tables. The grid becomes visible when you drag a component on a section or reposition it.

Attention: Images must be encoded with an image MIME type such as image/png.

To work with buttons, images and shapes: open a page by clicking it in the Site pane and click Edit.

The following describe how to:

Add a button

To add a button:

  1. Hover on the page to reveal the section buttons.
  2. Click Add Component to open the menu.
  3. Select Button.
  4. Drag the button to the appropriate location.
  5. Click the button to open the component toolbar.
  6. Click the edit icon.
  7. Add the link URL and configure whether the link should open in a new tab.
  8. Click the Button text to change the label.

Add an image

To add an image:

  1. Hover on the page to reveal the section buttons.
  2. Click Add Component to open the menu.
  3. Select Image.
  4. Drag the image to the drop zone or click the drop zone to browse for the image.
  5. Click the image to open the component toolbar.
  6. Click the edit icon.
  7. Upload an image or select from the gallery of previously uploaded images.
  8. Enter Alt text for screen readers.

After you upload an image, it is available in the gallery.

Add a shape

To add a shape:

  1. Hover on the page to reveal the section buttons.
  2. Click Add Component to open the menu.
  3. Select Shape.
  4. Re-size if necessary and drag the shape to the appropriate location.
  5. Click the shape to open the component toolbar.
  6. Click the edit icon.
  7. Select the shape and color.
  8. Toggle the Stretch button to completely fill the component or have space on each side.

Move a component forward or back

Moving a component forward or back changes its z-index. To move a component forward or back:

  1. Select a component to open the component toolbar.
  2. Click the move forward or back icon:
    Move forward or back

Delete a button, image, or shape

To delete a component:

  1. Select the component to open the component toolbar.
  2. Click the trash can icon.

The following describe how to work with: