Shape Widgets

The Shape widget is a design element that can be utilised to emphasise vital messages. Create buttons and banners, draw attention to awards, and emphasise sale prices. You can add an image, change the background colour and text colour, adjust the size, and add shadows. The widget can be placed anywhere for maximum flexibility.

Add the widget by:

1. In the panel on the left, click Widgets.
2. Click and drag the Shape widget to incorporate it into your site.

To learn how to add widgets to your website, visit Add Widgets.

Content Editor

To access the content editor:

1. Right-click the widget and select the Edit Content option.
2. Choose a shape.
3. Click Add Link to add a hyperlink to the shape.
4. Type the shape's title and description. Click the eye icon to hide the title and description.
5. Enter the shape's Alt text and Tooltip.

Design Editor

To access the design editor, follow these steps:

1. Right-click the widget and select Edit Design from the context menu.
2. Select a different layout for the shape by clicking Layout.
3. To position the widget on top of an image or another widget, select the Spacing tab and set the margins to a negative number (for example, -50px).
4. Enable the Floating toggle and choose a position for the widget to transform the icon into a floating widget. Enable the Show on this page only switch to display the floating button on the current page alone.

Ensure that the design settings you define are appropriate for each device. Per-device settings include spacing (of the entire widget and individual items), width, and more. For additional information, please visit Edit by Device.

Refer to Widget Design for information on design options that are not specific to this widget (such as layout, style, and spacing).

Examples

Create a Shape on the Header

To create a shape on the header, do the following:

1. Create a row consisting of two columns.
2. Choose an amorphous shape and add it to the column on the right.
3. Make the form the same size as the column.
4. Select the layout with the background image and replace it with the desired image in the Design Editor.

Use a Shape as a Button

To make a shape into a button, add a link and a hover effect:

1. Add a title and description to the circle shape.
2. Choose colours for the shape and the text.
3. Use a negative margin on the left side of the shape to position it in the corner of an image (spacing > margin > -50px left & top margin).

Highlight a Specific Plan or Service

To highlight a specific plan or service, use shapes:

1. Select the flag shape and enter a title and brief description.
2. Turn  off the Keep proportion. Maintain proportion so that you can only change the width.
3. Choose colours for the shape and the text.
4. Use a negative top margin (spacing > margin > -30px top margin) to position the shape so that it overlaps the top of a column.

Create a Scroll Button

To make a scroll button out of a shape:

1. Select the diamond shape and enter a title.
2. Turn the Keep proportion off. Maintain proportion so that you can only change the width.
3. Choose colours for the shape and the text.
4. Use a negative top margin (spacing > margin > -50px top margin) to position the shape on top of an image.