Text Element
The Text element displays rich text content in your popup. Use it for paragraphs, descriptions, bullet points, and any body copy.
Overview
| Property | Value |
|---|---|
| Element Type | text |
| Can Contain Children | No |
| Supports Rich Text | Yes |
Use Cases
- Popup descriptions and body text
- Feature lists and bullet points
- Terms and conditions
- Product descriptions
- Instructions and help text
Content Settings
Text Content
Enter your text in the content editor. Supports:
- Plain text
- Line breaks
- Basic HTML tags (
<b>,<i>,<u>,<a>,<br>)
This is <b>bold</b> and this is <i>italic</i>.
Text Alignment
Control horizontal 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 width |
Device-Specific Alignment
You can set different alignment for desktop, tablet, and mobile using the device toggle.
Typography Settings
Font Family
Choose from:
- System fonts (Arial, Helvetica, Georgia, etc.)
- Google Fonts (500+ fonts available)
Font Size
Set the text size in pixels. Typical values:
- Small text: 12-14px
- Body text: 16-18px
- Large text: 20-24px
Font Weight
Control text boldness:
| Weight | Description |
|---|---|
| 300 | Light |
| 400 | Regular |
| 500 | Medium |
| 600 | Semi-bold |
| 700 | Bold |
| 800 | Extra-bold |
Line Height
Set spacing between lines. Values:
1— Tight (no extra space)1.5— Normal (comfortable reading)2— Loose (spacious)
Letter Spacing
Adjust space between characters:
- Negative values: Tighter spacing
0: Default spacing- Positive values: Looser spacing
Text Color
Set the text color using:
- Color picker
- Hex value (e.g.,
#333333) - RGB value (e.g.,
rgb(51, 51, 51))
Spacing Settings
Margin
Space outside the element:
| Property | Description |
|---|---|
| Top | Space above |
| Right | Space to the right |
| Bottom | Space below |
| Left | Space to the left |
Padding
Space inside the element (between border and content):
| Property | Description |
|---|---|
| Top | Inner top space |
| Right | Inner right space |
| Bottom | Inner bottom space |
| Left | Inner left space |
Advanced Settings
HTML ID
Set a custom ID for CSS targeting:
#my-text-id {
text-decoration: underline;
}
CSS Classes
Add custom CSS classes:
my-custom-class another-class
Device Visibility
Control visibility per device:
| Option | Description |
|---|---|
| Hide on Desktop | Don't show on desktop |
| Hide on Tablet | Don't show on tablet |
| Hide on Mobile | Don't show on mobile |
Examples
Basic Paragraph
Thank you for subscribing! Check your inbox for a confirmation email.
Styled Description
Settings:
- Font: Inter
- Size: 16px
- Weight: 400
- Color: #64748b
- Line Height: 1.6
Mobile-Optimized Text
Desktop settings:
- Font size: 18px
- Line height: 1.6
Mobile override:
- Font size: 16px
- Line height: 1.5
Best Practices
- Keep it readable — Use adequate font size (16px+) and line height (1.5+)
- Contrast matters — Ensure text color contrasts with background
- Be concise — Popup text should be scannable
- Test on mobile — Verify readability on small screens
- Use hierarchy — Combine with Heading elements for structure