Platform Editor Pricing Docs Sign In Get Started

Chapter 4: Text Elements

Text elements are fundamental to video templates, conveying messages, titles, captions, and more. This chapter covers everything you need to know about working with text in FX Express.

Adding Text

To add a text element:

  1. Click Text in the element palette (or drag it to the canvas)
  2. A text box appears with placeholder text
  3. Double-click to edit the text content

Editing Text Content

Inline Editing

Double-click any text element to enter edit mode:

  • Type your text directly
  • Use standard text editing shortcuts (copy, paste, select all)
  • Click outside or press Escape to exit edit mode

Properties Panel

You can also edit text in the Properties panel:

  1. Select the text element
  2. Find the “Content” field under TEXT
  3. Enter or modify your text

This method is useful for longer text or when you want to see all properties at once.

Text Properties

The Properties panel shows all text settings:

Content

The actual text displayed. Supports:

  • Plain text
  • Variables using {variableName} syntax
  • Line breaks

Font Size

Set the text size in pixels. Common sizes:

  • Headings: 24-48px
  • Body text: 14-18px
  • Small text: 10-12px

Color

Click the color swatch to open the color picker:

  • Select from preset colors
  • Enter a hex code
  • Use the color gradient picker
  • Adjust opacity

Align

Text alignment within the element box:

  • Left: Text aligns to the left edge
  • Center: Text centers horizontally
  • Right: Text aligns to the right edge

Weight

Font weight (boldness):

  • Normal: Regular weight (400)
  • Bold: Bold weight (700)
  • Additional weights may be available depending on the font

Style

Font style:

  • Normal: Regular upright text
  • Italic: Slanted text

Font Family

The typeface used for the text:

  • Default: Inter, system-ui, sans-serif
  • Custom fonts available through themes
  • Web-safe fallbacks ensure consistent display

Heading Level

Semantic heading level for accessibility and themes:

  • Body: Regular paragraph text
  • H1: Primary heading
  • H2: Secondary heading
  • H3: Tertiary heading
  • And so on…

Heading levels can automatically apply theme styling.

Using Variables in Text

FX Express supports dynamic text using variables:

Variable Syntax

Hello {name}!
Your order #{orderNumber} is ready.

Variables are enclosed in curly braces { and }.

How Variables Work

  1. Define variables in your template
  2. When rendering, variables are replaced with actual values
  3. Each video instance can have different variable values

Common Use Cases

  • Personalized greetings: Hello {firstName}!
  • Dynamic data: Your balance: ${amount}
  • Dates: Created on {date}
  • Conditional content combined with Optional scenes

See Chapter 13: Variables for more details.

Text Overflow

When text content exceeds the element bounds, FX Express handles overflow:

Overflow Options

  • Visible: Text extends beyond the element (default)
  • Hidden: Text is clipped at element bounds
  • Scroll: Adds scrolling (for interactive contexts)

Best Practices for Overflow

  • Size text elements to fit expected content
  • Use smaller fonts for variable-length content
  • Test with longest expected text values

Text Animation

Text elements can be animated using the timeline:

Entry Animations

Control how text appears:

  • Fade in
  • Slide in from direction
  • Type writer effect
  • Character-by-character reveal

Exit Animations

Control how text disappears:

  • Fade out
  • Slide out
  • Dissolve

Keyframe Animation

For advanced control:

  • Animate position, size, opacity over time
  • Create custom motion paths
  • Sync with audio or other elements

See Chapter 10: Timeline Editor for animation details.

Text Formatting Tips

Readability

  • Ensure sufficient contrast between text and background
  • Use appropriate font sizes (not too small)
  • Limit line length for easier reading
  • Add adequate line spacing

Hierarchy

  • Use heading levels to establish importance
  • Vary font sizes to create visual hierarchy
  • Use weight (bold) sparingly for emphasis

Consistency

  • Stick to 2-3 fonts maximum
  • Use consistent sizing throughout
  • Apply themes for automatic consistency

Accessibility

  • Use semantic heading levels
  • Ensure color contrast meets WCAG guidelines
  • Don’t rely solely on color to convey meaning

Styling Text with Themes

Themes can automatically style text based on heading level:

  1. Set the Heading Level property
  2. Apply a theme to your template
  3. Text automatically uses theme colors, fonts, and sizes

This ensures consistency across your entire video.

See Chapter 11: Themes and Styling for details.

Text Element Examples

Title Slide

Element: Text
Content: Welcome to Our Company
Heading Level: H1
Font Size: 48px
Align: Center
Weight: Bold

Body Text

Element: Text
Content: Lorem ipsum dolor sit amet...
Heading Level: Body
Font Size: 16px
Align: Left
Weight: Normal

Personalized Greeting

Element: Text
Content: Hello {firstName}, welcome back!
Heading Level: H2
Font Size: 32px

Caption/Subtitle

Element: Text
Content: {caption}
Heading Level: Body
Font Size: 14px
Opacity: 80%

Troubleshooting

Text Not Showing

  • Check if the element is positioned off-canvas
  • Verify the In Time hasn’t passed the current playhead
  • Ensure opacity is greater than 0
  • Check text color against background (contrast)

Font Not Rendering

  • The font may not be available
  • Check font family fallbacks
  • Use web-safe fonts for maximum compatibility

Variables Not Replacing

  • Verify the syntax: {variableName} (no spaces)
  • Ensure the variable is defined
  • Check for typos in variable names

Text Looks Different in Preview

  • Browser font rendering varies
  • Final output uses specified fonts
  • Test in the actual player for accuracy

← Previous: Adding and Editing Elements | Next: Image Elements →