How to Use Text Widgets

The Text Widget allows you to add headings, announcements, labels and all sorts of other messages to your design. You can customise the font, color, spacing and alignment to create readable display content.

This guide covers the standard Text Widget in the Nimbus808 Design Editor. The Text menu also includes Rich Text, Ticker, and Time as separate widget options.

1. Add a Text Widget

Select Designs from the dashboard sidebar and open a design by clicking on Edit project.

Select Text from the editor sidebar.

Drag the Text option onto your canvas.

Select the widget to bring up its Properties panel.

To update existing text, simply select the text widget on the canvas or select its name in the Layers panel.

2. Enter Your Message

Go to the Text section in the Properties panel.

Type your message into the CONTENT field.

Press Enter to save the text.

Use WIDGET NAME to give the widget a descriptive name (ex: Lobby Heading). Press Enter to save the name. This will help you identify the widget in the Layers panel.

3. Choose the Font and Formatting

Use the controls below CONTENT to format your message.

Font: Select a font from the font list.

Font Size: Adjust the font size.

Color: Set the text color.

Bold, Italic and Underline: apply emphasis to your text.

Line Height: adjust the line spacing using a multiplier.

Letter Spacing: Adjust the horizontal space between characters in pixels.

Vertical Text: Enable the vertical text option when your layout requires it.

Shadow: Enable a shadow for the text.

4. Set the Text Size

Scale to Fit controls automatic text sizing within the widget. It’s enabled by default and when this is on the manual font size field is not available.

Use Scale to Fit if you want the text sizing to follow the available widget space. Turn it off if you want to enter a manual font size in pixels.

Check your message after you’ve altered its content or dimensions. Keep your headings short and leave plenty of space for any longer announcements.

5. Position and Align the Widget

Use the TRANSFORM section to adjust the widget dimensions and position.

W and H: Set the width and height of the widget.

X and Y: Set its horizontal and vertical position on the canvas.

The fields show their current units alongside each value. You can use the canvas alignment buttons to position the widget against an edge or to align it horizontally or vertically.

The Text Alignment section controls where the text is positioned within the widget. You can choose from nine options, including top left, center, and bottom right.

For example, center the widget horizontally on the canvas, then choose center under Text Alignment to center its message.

6. Adjust the Appearance

Use Appearance to alter the Opacity or Rotation Angle. 100% opacity will make the widget fully visible. Lower values will increase transparency.

Under Style, enable Background or Border when your layout needs a text panel or outline. Use a text color that remains easy to read against the background.

Select Animate to open the animation controls when your message needs movement or visual changes. Refer to the Nimbus Animation Tool Guide for keyframe instructions.

7. Check and Save Your Changes

Review the wording, spacing, and alignment on the canvas.

Check that the content fits within the widget and remains readable at the intended display size.

Wait until the editor shows Saved & up to date before leaving the design.

If you added animation, use Preview all animations to check the timing and movement.

Using the Rich Text Widget

The Rich Text Widget lets you format individual words or phrases within one text area. Use it for announcements that need emphasis, highlighted text, or special characters.

To add one simply select Text from the editor sidebar and drag Rich Text onto the canvas. Select the widget to bring up its editing controls.

Unlike the standard Text Widget, Rich Text lets you edit the message directly on the canvas.

While editing, select the words or characters you want to format. Use the floating toolbar to apply these options: Bold, Italic, Underline, Text color, Highlight color, Subscript, Superscript

Using the Ticker Widget

The Ticker Widget displays scrolling text. It’s ideal for use as an announcement or alert that scrolls across a section of your design.

Select Text from the editor sidebar and then drag Ticker onto the canvas. Position the widget where you’d like the scrolling message to appear.

Keep your ticker messages short and leave sufficient space for the viewers to be able to follow the text.

Use Display Mode to choose how the entries appear:

• Sequential: Displays the entries one at a time.
• Continuous: Combines the entries into a continuous scrolling message.

Use the SEPARATOR field to define the character between entries in Continuous mode. For example, a bullet separates announcements clearly.

Open the Animation section to adjust the ticker’s movement.

Direction provides four options:

• Scroll Left
• Scroll Right
• Scroll Up
• Scroll Down

Under Speed, choose Slow, Medium, Fast, or Custom.

Selecting Custom reveals Custom Duration (seconds). Enter the duration to control how long the scrolling animation takes.

Enable Pause on Hover if you want scrolling to pause when a pointer rests over the ticker.

Use the text controls to choose the font, color, bold, italic, underline, line height, and letter spacing.

Enable Scale to Fit for automatic sizing, or turn it off to specify a font size.

Check the full sequence of messages. Adjust the widget dimensions and scrolling speed until viewers have enough time to read each entry.

Using the Time Widget

The Time Widget shows live date and time. It’s useful on welcome screens, announcement boards and any other layout where you’d want a clock.

Select Text from the editor sidebar and then drag Time onto the canvas. Select the widget to bring up its settings.

Select Digital to display the date and time as text.

Configure these settings: Format, Show Date, Show Time, Use 24-Hour Time, Scale to Fit.

For a time-only display, turn Show Date off and leave Show Time on.

Use the font, color, spacing, and Text Alignment controls to match the clock to your design.

Select Analog to display a clock face with hands.

Customize these settings:

• Face Color: Sets the clock face color.
• Hour Hand: Sets the hour hand color.
• Minute Hand: Sets the minute hand color.
• Show Seconds: Shows or hides the second hand.
• Second Hand: Sets the second hand color.
• Smooth Second Hand: Enables smooth second-hand movement.

Resize and position the clock using TRANSFORM. Choose contrasting colors so viewers can distinguish the hands from the clock face.

Confirm that the clock shows the intended time and timezone. For Digital mode, check the date format and 12-hour or 24-hour presentation.

Conclusion

Text Widgets make it easy to add clear messages to Nimbus808 designs. Enter your content, adjust its formatting, and position it within your layout. Check readability and confirm that your changes have saved before leaving the editor.

Contact us if you have questions or need assistance with Nimbus808. Our team is here to help.