Shape Widgets
Nimbus808 Shape Widgets let you add colored panels, badges, and geometric accents to your designs. Use them to organize content, highlight announcements, or create backgrounds for text and images.
This guide covers the available shapes, sizing and positioning, backgrounds, borders, layers, and animation.
Understanding the Available Shapes
| Shape | Uses and Settings |
|---|---|
| Square | Create squares, rectangular panels, and banners. Use Corner Radius to round the corners. |
| Circle | Create circular badges or oval accents by adjusting the dimensions and aspect ratio lock. |
| Triangle | Add geometric accents. Use Rotation Angle to change the direction of the triangle points. |
| Star | Highlight promotions, announcements, or featured content. |
| Polygon | Create a shape with an adjustable Number of Sides. The default is six sides. |
1. Add a Shape to Your Design
Open a design from the Designs dashboard, or use Add Design to create one.
Select Shapes from the Design Editor’s left toolbar.
Drag Square, Circle, Triangle, Star, or Polygon onto the canvas.
Select the shape to display its Properties panel.
Enter a descriptive Widget Name and press enter to make the shape easier to identify in the Layers panel. For example, name a rectangular shape “Announcement Background.”
2. Set the Size and Position
Use the Transform controls to set the shape’s dimensions and location:
W and H control width and height.
X and Y control horizontal and vertical position.
The aspect ratio lock keeps the width and height proportional when resizing. Unlock it to adjust them independently.
You can also drag the shape on the canvas and resize it with its selection handles. Use the alignment buttons to place it against a canvas edge or center it horizontally or vertically.
Shape Specific Settings
Square includes Corner Radius, expressed as a percentage. Increase it to round the corners of a square or rectangular panel.
Polygon includes Number of Sides. Change this value to customize the polygon’s outline. New polygons start with six sides.
Use Rotation Angle to change a Triangle’s orientation or rotate a Star. Unlock the aspect ratio to stretch a shape, such as turning a Circle into an oval.
3. Customize the Background
Enable Background to fill the shape, then select Solid Color, Gradient, or Image. Turn Background off if you just want an outline with no fill.
Solid Color
Select Solid Color, then go into Shape Color and pick your fill color. Use consistent colors to match your brand or identify related content.
Gradient
Select Gradient to blend multiple colors. Pick your two colors (Color 1 and Color 2), then adjust the Gradient Angle to change the blend direction. The editor has 0°, 90°, 180°, and 270° presets as well as a Radial option.
Use Add Color to include further colors. Drag the color entries to re-order them. Use Remove to get rid of any extra entries (the first two colors cannot be removed).
Image
Select Image, then click the image selector under Select Background Image to choose an image. Enter descriptive Alt Text in the field provided.
After you select the image and its added to the canvas, turn Clipping Mask Mode ON to fit the visible image within the shapes. Adjust the shape’s size and position as needed.
4. Adjust the Border and Appearance
Turn Show Border on to display an outline. Set Border Width in pixels and choose a Border Color.
Stroke Linejoin controls how border segments meet at corners:
Bevel creates a flat corner.
Miter extends the edges to form a sharp corner.
Round creates a rounded join.
Corner Radius changes the Square’s corner shape. Stroke Linejoin changes how the border meets at a corner. The visible effect depends on the shape and border width.
Under Appearance, adjust Opacity to control transparency. 100% is fully visible, while 0% is fully transparent. Use Rotation Angle to rotate the shape.
5. Work with Shapes and Layers
Use the Layers panel to select a shape by name. The visibility control hides or shows the layer, and the lock control helps prevent accidental changes.
Use the toolbar’s Copy and Paste controls to reuse a selected shape. Undo and Redo help you reverse or restore edits. To remove a selected shape, use Delete.
When multiple items are selected, Group keeps them together for editing. Use Ungroup to separate a group into individual items.
6. Animate a Shape
Select a shape and click Animate to open the Animation Timeline. Shape widgets provide four animation tracks:
Track, Position, Rotation, Scale, Opacity, Background Color, Border Color, and Border Width.
Square and Circle support all seven tracks. Triangle, Star, and Polygon support Position, Rotation, Scale, and Opacity.
A keyframe records a property at a specific time. Nimbus808 uses keyframes to animate changes between those values. For example, two Position keyframes can move a shape across the canvas. See the Animation Tool Guide for more information.
7. Review and Publish
Check the shape’s placement, background, border, opacity, and layer order. Preview any animation, then click Publish changes when the design is ready.
Shape Widgets also include an Interaction setting for linking to another design. Interaction options are covered in the separate Interactive Widgets guide.
Conclusion
Use Shape Widgets to organize content, highlight messages, and create consistent layouts. Combine them with text and images to build clear, readable designs.
Contact us if you have questions or need assistance with Nimbus808. Our team is here to help.
