Customize Text

In this article, we’ll explore all the options for creating and adding Text in the OptiSigns Designer App.

• Adding Text
• Editing Text
• Additional Element Options
  • Fonts
  • Colors
  • Text Styling
  • Link
  • Settings
  • Effects
  • Animate
  • Position
  • Lock & Copy Style

Adding text elements to a design is a simple matter, but with Designer, there are tons of options to make your words really pop.

For more on the basic elements of Designer, see our Getting Started with Designer guide.

Adding Text

The Text option allows you to insert text into the design.

Choosing Text from the Top Menu will mirror your choice on the Side Menu, and open it up for more options:

Clicking Add a text box or one of the Predefined text options will add a text box to the Designer View:

Editing Text

Double-clicking or selecting the text allows you to enter text directly.

Lastly, single clicking the text's element box, then holding down the mouse button and dragging allows you to reposition the text.

When selected, the Text itself has a full set of options:

• Duplicate - Creates an exact duplicate of the selected text
• Delete - Removes the selected text from the design
• More
  • Copy - Copies the selected text to be Pasted later
  • Copy Style -
  • Paste - Pastes element from clipboard into text
  • Duplicate - Creates an exact duplicate of the selected text
  • Add Component -
  • Delete - Removes the selected text from the design
  • Layer - Options to change the selected text layer
    • Bring Forward - Brings selected text up one layer
    • Bring to Front - Brings selected text to the top layer
    • Bring Backward - Brings selected text down one layer
    • Bring to Back - Brings selected text to the bottom layer
  • Align Elements - Options to change the selected text alignment
    • Left
    • Center
    • Right
    • Top
    • Middle
    • Bottom
  • Link - Add a URL to the selected text.
  • Animate - Add an animation to the selected text.

Additional Element Options

Clicking the text alters the Top Menu:

The Top Menu has additional options:

Fonts

Clicking the Font option (by Default, this will show the font as Roboto) will open the Fonts section on the Side Menu.

Designer has hundreds of font options, with Google Fonts having selectable font weights. Clicking any will select it and provide options for how it should be displayed:

The Font size can be changed by clicking the ‘-’ or ‘+’ options, or clicking the font size number.

Clicking the font size number allows you to choose from a number of preset font sizes, or enter a custom sizing.

Colors

Selecting the Colors option opens the Colors section on the Side Menu.

Here, choose between preset colors, colors already used in this design, or through the Color Picker option:

Color Picker

1. Color Selector
2. Currently Selected Color / Color Drop Tool
3. Color Slider
4. Opacity/Transparency Slider
5. Color Code Input
6. Code Switcher - Switch between hexademical, RGB, and HSLA color codes
7. Previous Colors Used

The Color Drop Tool lets you choose any color easily.

Text Styling

Selecting Bold, Italic, Underline, or Strikethrough will apply those qualities to the selected text. These effects can be stacked on top of each other and used in any combination.

Text Case

Selecting Text Case will open up a sub-menu:

Here you can choose between different letting casings for display:

• UPPERCASE - Allows typing exclusively in uppercase.
• lowercase - Allows typing exclusively in lowercase.
• Sentence case - Automatically formats text to sentence case.
• Title Case - Automatically formats text to title case.

Alignment

Selecting the Alignment option will open up another sub-menu:

Here, choose between Left, Center, Right, or Justified alignment.

Spacing

Selecting the Spacing option will open up yet another sub-menu:

Here you can customize the amount of spacing between your letters and your lines.

Link

Selecting the Link option lets you turn text into an interactive element, mostly used for kiosks. It will open the Link Options section on the Side Menu:

Clicking Add Link will prompt you to enter a URL or select an asset:

Once a link or asset has been chosen, more options will appear in the Link Options section:

Expanding the Scale section will provide this option for your asset:

Here, choose how the image will be scaled. There are three options:

• Fit (default) - Fits the image to the screen.
• Stretch - Stretches the image to fill the entire screen.
• Zoom - Zooms in on the image to fill up the entire screen. Not recommended for small images on large displays, as this will create blurriness.

Expanding the Settings section will provide these options for your link:

• Duration (seconds) - When the link is clicked or tapped, how long the link or asset will display before returning to the main design. This starts from the last touch on the screen or time the link was clicked.
• Preload - When checked, the website will load when the design does. This reduces the amount of time it takes for the website to pop up when the link is clicked. However, having numerous links needing to load may cause lag.

Expanding the Close & Nav Bar Styler section will provide these options for your link:

This section refers to the button that will appear on your screens when it is pushed to them. Clicking or tapping this button will return you back to the original design.

• Icon Position - Shows where this icon will appear. Defaults to Bottom Center, but can be placed anywhere along the top or bottom, or turned off entirely.
• Icon Style - Allows you to set the styling of the icon. Choose from Label, Solid, Round, or Default (see above)
• Icon Size - Allows you to change the icon’s size. Choose from Small, Medium, Large, or Default (see above)
• Icon Color - Change the hexadecimal HTML color of the icon to better fit your design.
• Background Color - Change the hexadecimal HTML color of the icon background to better fit your design.
• Opacity - Slider allows you to change how opaque or transparent the icon background is.
• Show Navigation Bar - When checked, adds small navigation arrows to the icon. Allows you to navigate quickly through multiple links. Looks like this:

Settings

Selecting the Settings button will open the Data Mapping section on the Side Menu:

Clicking Make Data Mapping allows you to make the selected text dynamic, mapped to one of your existing DataSources. See our article on Dynamic DataSources with OptiSync for more information.

Effects

Selecting the Effects option allows you to change a number of different aspects of your text. It will open the Effects section on the Side Menu:

Here, you have numerous options. We’ll go over each of them in turn.

Expanding the Color section allows you to add color to the text. 

This is functionally the same as the Colors option in the Text Top Menu. Select from preset colors, colors used in this design, or through the color picker.

Expanding the Background section allows you to set a specific background color for the Text to sit on. 

This can be selected from preset colors, colors already assigned to the design, or made through the color picker:

Expanding the Opacity section allows you to vary the opacity of the selected area - background and text together.

This can be adjusted via slider. Shown below is half opacity:

Expanding the Outline section allows you add an outline to the text.

You can select a color from a dropdown or use hexadecimal HTML, and use the slider to change its thickness:

Expanding the Shadow section allows you to create a show across your text box. By default, all the sliders will be white.

Applying a color will create a shadow:

Changing the sliders allows you to change the blur and offset the shadow along the X or Y axis.

With no background, the shadow applies only to the text itself:

Expanding the Gradient section will present several gradient options for your text. Clicking any of these Gradient options will apply it to your text.

Expanding the Texture section will present several texture options for your text. Clicking any of these texture options will apply them to your text.

Animate

Clicking the Animate button will open the Animate section of the Side Menu:

For more information on Designer’s Animation capabilities, see our Animation article.

Position

Selecting the Position button will open the Position section of the Side Menu.

• Bring to Front - Brings selected text to the top layer
• Bring Forward - Brings selected text up one layer
• Send to Back - Brings selected text to the bottom layer
• Send Backward - Brings selected text down one layer
• Align to Page - Options to change the selected text alignment
  • Left
  • Center
  • Right
  • Top
  • Middle
  • Bottom
• Space Evenly - Aligns the text within the larger text box
  • Vertically
  • Horizontally
• Flip - Flips the selected text
  • Horizontal
  • Vertical
• Position - Allows specific placement of text element in the design
• Resize - Allows precise resizing of the selected text element

Lock & Copy Style

Clicking the Lock button will lock the selected text element in place, preventing any changes from being made to it.

This is useful when dealing with many elements after getting the text exactly where you want it.

The Copy Style button allows you to quickly apply the style of the selected text element to another.

This is useful for quickly formatting numerous text elements.

That’s all!

OptiSigns is the leader in digital signage software. If you have any additional questions, concerns or any feedback about OptiSigns, feel free to reach out to our support team at support@optisigns.com.