Shape Widget

Overview

The Shapes widget is a design tool that can be used to highlight your important messages.  Create buttons and banners, call out awards, highlight sale prices - create a dynamic CTA. You can add an image, color background and text, control the size - even add a shadow.   The widget can be placed on any location for complete flexibility.

shapewidget1_en-us.jpg

How to add a Shape widget

  1. Drag & drop the Shape widget anywhere on your page. To learn more about adding widgets to your website, see Adding Widgets.
  2. Choose your shape from the content editor.
  3. To place the widget on top of or overlapping an image or another widget, use the spacing setting in the design editor.  In the example above there is a negative left margin (spacing > margin > -50px left & top margin).
  4. Using the content editor add a link and title and description which can be turned on or off.
  5. Using the design editor change the size, color, add a background image, change text style, add hover effects and more.  

 

Examples

Create a shape on the header

  1. Create a row with two columns.
  2. Choose an amorphic shape and add it to the right-side column.
  3. Make the shape as big as the column.
  4. In the design tab select the layout with the background image and replace the image with the one you want.  

shapewidget2_en-us.jpg

Use as a button by adding a link and hover effect

  1. Choose the circle shape and add a title and description.
  2. Select colors for the shape and texts.
  3. To position the shape on the corner of an image, use a negative margin on the left side of the shape (spacing > margin > -50px left & top  margin).

shapewidget3_en-us.jpg

Highlight a specific plan or service

  1. Choose the flag shape and add a title and/or short description.
  2. Toggle off “Keep proportion” so you can adjust only the width. 
  3. Select colors for the shape and texts.
  4. To position the shape so it overlaps the top of a column, use a negative top margin (spacing > margin > -30px top margin).

shapewidget4_en-us.jpg

 

Create a scroll button

  1. Choose the diamond shape and add a title.
  2. Toggle off “Keep proportion” so you can adjust only the width.
  3. Select colors for the shape and texts.
  4. To position the shape on top of an image, use a negative top margin (spacing > margin > -50px top margin).

shapewidget5_en-us.jpg

Considerations

Make sure the design settings you define are correct per device. As usual, settings such as spacing (of the whole widget and individual items), width and more are defined per device. You can read more about it in our Edit by Device article.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!