EL Elementor

How to Customize Text Widgets on Elementor

beginner 7 min read Updated 2026-03-24
Quick Answer

Add the Text Editor widget from Elementor's Basic section, edit content in the WYSIWYG editor, then customize typography, colors, alignment, and drop caps in Content and Style tabs. Use responsive settings for optimal display across devices. Advanced options include columns, shadows, and shortcodes.

Try Elementor Pro → Partner
Try Elementor Full Elementor Review

Prerequisites

  • WordPress site with Elementor installed
  • Basic familiarity with WordPress dashboard
  • Page or post ready for editing
  • Understanding of HTML basics

Step-by-Step Instructions

1

Access Elementor Editor

Open your page or post in the WordPress dashboard and click Edit with Elementor to enter the editor. From the left panel under Basic widgets, search for and drag the Text Editor widget onto the canvas.[1][3]
2

Edit Text Content

Select the widget and go to the Content tab. In the Text Editor section, type or paste text into the WYSIWYG editor powered by TinyMCE. Double-click text on the canvas for inline editing, use the toolbar for bold, italic, lists, or links, and expand the toolbar for tables or shortcodes. Drag the bottom-right corner to resize.[1][2][3]
Support WordPress shortcodes and images directly in the editor.
3

Enable Drop Cap

In the Content tab, toggle Drop Cap to On to style the first letter independently. This unlocks Drop Cap options in the Style tab. Default is Off
Use Drop Caps for stylistic headings in articles or quotes.
4

Set Columns and Alignment

Still in Content tab, set Columns to 1-5 (default: 1) to split text. Adjust Columns Gap (Default, Narrow, Extended, Wide, Wider) when columns >1. Choose Alignment: Left, Center, Right, or Justified, with responsive controls for Desktop, Tablet, Mobile.[1][2]
5

Access Style Tab

Switch to the Style tab in the left panel to customize visual appearance including colors, typography, and shadows.[1][3]
Style tab changes apply globally to the widget's text.
6

Customize Text Color

In Style > Main Text, click the color swatch to pick via picker, enter hex like #000000, or select global colors. Default inherits theme color.[1][3]
Use global colors for consistent site-wide theming.
7

Configure Typography

Click the pencil icon in Typography: Set Font Family (e.g. Roboto), Size (e.g. 16px), Weight (400 Normal), Transform (None/Uppercase), Style (Normal/Italic), Decoration (Underline), Line Height (1.5em), Letter Spacing (0px). Use global presets.[1][2][3]
Match typography to your site's global styles for harmony.
8

Add Text Shadow

Enable Text Shadow, then set color, blur, spread, and position (horizontal/vertical offset). Default: Off.[1]
9

Style Drop Cap

If enabled, expand Drop Cap section: Choose View (Default, Stacked, Framed), set Primary Color, Secondary Color (for backgrounds), Size (e.g. 3em), spacing, border radius, and typography.[1][3]
Framed view adds rounded corners for modern designs.
10

Preview and Save

Preview changes on different devices using responsive toggles. Click Update to save. Test on frontend for final rendering.[3]
Always check mobile view as alignments may shift.

Common Issues & Troubleshooting

Text formatting not applying or lost on save

Clear browser cache, regenerate CSS in Elementor > Tools > Regenerate CSS & Data, ensure no conflicting theme CSS overrides.

Drop Cap styling not visible

Confirm Drop Cap is toggled On in Content tab first; Style options only appear after enabling.

Columns not splitting text properly

Set Columns >1 and adjust Gap; ensure widget width supports multiple columns without overflow.

Typography changes not reflecting on frontend

Sync global fonts via Elementor > Customizer > Typography; clear all caches (site, CDN, browser).

Shortcodes not rendering in editor

Enable shortcode support in theme functions.php or use a shortcode plugin; preview on frontend.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.
AI Features

Affiliate link. We may earn a commission at no extra cost to you.

Visit Elementor View Elementor Pricing