Shapes Widget
Add decorative lines, arrows, highlights, frames, and callouts to page layouts.
Use the Shapes widget for visual accents that help point, frame, underline, or decorate page content without uploading custom artwork.
Add a Shapes widget
Open the widget picker
In the page editor, open Widgets.
Drag Shapes
Drag Shapes into the row or column where the accent should appear.
Choose a shape
Click the empty widget or open Shapes Settings, then choose from lines, arrows, highlights, frames, callouts, decorative marks, and geometry.
Shape settings
The settings dialog includes:
- Shape: choose a preset, set the main color, adjust width and height, change stroke width, and align the shape inside the widget area.
- Style: use fill or stroke mode when supported, lock the aspect ratio, flip the shape horizontally or vertically, and choose solid, dashed, or dotted lines.
- Effects: add a link, then set hover color and transition.
Use the toolbar for alignment, links, animation, position, copy, and delete actions. The Position controls can rotate, scale, skew, fade, offset, or bring a shape forward when an accent needs to overlap nearby content.
Linking shapes
Linked shapes behave like visual buttons on the published page. Add a link only when the shape clearly communicates an action, and use a destination that makes sense for the surrounding section.
For video callouts, choose Video in the link selector to open a library video or supported external video in a lightbox. For profile callouts, choose Team to link directly to an active team member profile.
Tips
- Use arrows and hand-drawn highlights sparingly so the page still feels clean.
- Keep decorative shapes lower contrast than primary buttons unless the shape is the intended call to action.
- Review shapes on mobile in Responsive Design when they use overlap, rotation, or large custom sizing.
Related guides
Related Help Docs
Was this helpful?