Text Tab
The Text Tab provides a rich text editor for formatting the text content of an Element. This tab allows you to style text with various formatting options, colors, fonts, and alignment settings.
The Text Tab is available for elements that display configurable text content, such as labels, buttons, and informational text.
Rich Text Editor
The Text Tab features a full WYSIWYG (What You See Is What You Get) editor with a formatting toolbar. Changes made in the editor are immediately reflected in the element preview.
Formatting Toolbar
Inline Formatting
| Tool | Description |
|---|---|
| Bold | Makes selected text bold |
| Italic | Makes selected text italic |
| Underline | Underlines selected text |
| Strikethrough | Adds strikethrough to text |
Font Size
Select from predefined font sizes to change the size of selected text. Larger sizes are useful for headings, while smaller sizes work for secondary information.
Color Picker
Click the color picker icon to change text color:
- A color palette appears
- Select a color or enter a specific value
- The selected text updates to the new color
- Supports full RGBA colors with transparency
Font Family
Choose from available font families:
- Arial
- Georgia
- Impact
- Tahoma
- Times New Roman
- Verdana
List Formatting
Available for elements that support lists:
- Unordered List - Bullet points
- Ordered List - Numbered items
Text Alignment
| Option | Description |
|---|---|
| Left | Align text to the left |
| Center | Center text horizontally |
| Right | Align text to the right |
| Justify | Stretch text to fill the line |
History
| Tool | Description |
|---|---|
| Undo | Revert the last change |
| Redo | Reapply an undone change |
Elements with Text Tab
The following elements support the Text Tab:
| Element Type | Full Toolbar | Notes |
|---|---|---|
| Info | Yes | Full formatting including lists |
| Text Input | Yes | Formats the label/question text |
| Text Area | Yes | Formats the label/question text |
| Button | Limited | No list options |
| Link | Limited | No list options |
| Card Link | Limited | No list options |
| Selection Group | Yes | Formats option labels |
| Multiple Selection Group | Yes | Formats option labels |
| Yes/No/Unknown | Yes | Formats question text |
| Numeric Input | Yes | Formats the label |
| Phone Number | Yes | Formats the label |
| Checkbox | Yes | Formats the label |
| Date | Yes | Formats the label |
| GPS | Yes | Formats the label |
| Signature | Yes | Formats the label |
| Camera | Yes | Formats the label |
| User Element | Yes | Formats display text |
| Slider | Yes | Formats the label |
| Rating | Yes | Formats the label |
| Increment/Decrement | Yes | Formats the label |
| Yes | Formats the label | |
| Dropdown | Yes | Formats the label |
| Filter Grid | Yes | Formats headers |
| Drill Down Grid | Yes | Formats headers |
Background Theme Toggle
At the top of the Text Tab, there's a "Switch background" button. This toggles the editor background between light and dark modes, making it easier to format text that will appear on different backgrounds.
- Light mode - White background for dark text editing
- Dark mode - Dark background for light text editing
The editor automatically detects if your text contains light colors and switches to dark mode for better visibility.
Tips for Text Formatting
Keep it readable: Use high-contrast color combinations. Dark text on light backgrounds or light text on dark backgrounds.
Consistent fonts: Stick to one or two font families throughout your application for a professional look.
Hierarchy with size: Use larger fonts for headings and important labels, smaller fonts for secondary text.
Don't overdo it: Avoid using too many colors or formatting styles in a single element.
Test on mobile: Formatted text may appear differently on smaller screens. Test your text at various sizes.
Use the preview: Watch the element preview as you format to see exactly how it will appear.
Missing Text Tab?
If you don't see the Text Tab for an element, it means that element type doesn't have configurable text content. Elements like Image have no text to format.
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Color Tab - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/element-section/color-tab/index Dimensions Tab - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/element-section/dimensions-tab/index General Tab - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/element-section/general-tab/index