Overview
The Text element renders as a <p> (paragraph) tag and is used for body content throughout your pages. Text elements inherit their typography styles from Global Styles, ensuring consistent formatting across your site.
Click any Text element on the canvas to edit its content inline. Like headings, Text elements can contain inline children such as icons or PHP code elements when working in template mode.
For content that requires inline formatting (bold, italic, links), consider using the Rich Text element instead.
Use Text for simple paragraphs without inline formatting. Use Rich Text when you need bold, italic, links, or other formatting within the content.
Settings
Configure the Text element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Content | The paragraph text content. Click the text on canvas to edit inline. | "Enter your text here. Click to edit." |
| Typography | Font family, size, weight, color, and line-height via the Inspector Typography section. | Inherits from Global Styles |
| Alignment | Text alignment: left, center, right, or justify. | Left |
Typography Options
The Typography section in the Inspector provides these controls:
- Font Family – Select from theme fonts, system fonts, or custom fonts
- Font Size – From
text-xstotext-9xl - Font Weight – From thin (100) to black (900)
- Line Height – Controls spacing between lines (
leading-tighttoleading-loose) - Letter Spacing – Adjust tracking for design effect
- Text Color – Pick from theme colors or enter custom values
Examples
Standard Paragraph
A basic paragraph with default styling. Typography is inherited from Global Styles.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>Lead Paragraph with Larger Text
Use larger text for introductory paragraphs that need emphasis. Add the text-lg or text-xl class.
<p class="text-xl text-gray-600 leading-relaxed">
This is a lead paragraph that introduces the page content
with larger, more prominent text styling.
</p>Centered Text Block
Center-align text for testimonials, quotes, or hero sections.
<p class="text-center text-lg max-w-2xl mx-auto">
Our mission is to help businesses build beautiful websites
without writing code. Join thousands of happy customers today.
</p>Use responsive classes to adjust text size at different breakpoints. For example: text-base md:text-lg lg:text-xl makes text larger on bigger screens.