Text

The Text option is a fundamental control that allows you to add a simple, single-line text input field to your custom widget. It is the primary way to let users (or you, when editing a page) enter and edit textual content.

Why would someone use it in a custom widget? #

You use a Text control anytime your widget needs editable text. This is perfect for headlines, labels, button text, quotes, or any other short-to-medium length content that you want to be easily changeable directly from the Elementor editor, without touching the code.

Where This Option Appears #

• In Widget Builder: You add and configure this control in the Content tab of the Widget Builder interface. You’ll find it in the list of available controls.
• In the Elementor Editor: Once your widget is saved, this control appears as a standard text input field within your widget’s settings panel in the live Elementor editor. Its location matches the section where you placed it in the Widget Builder.

Available Settings #

Basic Settings #

• Label: This is the name of the control that appears above the text field in the Elementor editor (e.g., “Heading Text” or “Button Label”).
• Name: A unique machine-readable ID for this control (automatically generated from the label, like text or heading). You use this name to create the dynamic shortcode.
• Description: Optional helper text that appears below the input field to guide the user.
• Placeholder: Example text that appears faintly inside the empty field as a hint (e.g., “Enter your title here”).
• Default Value: The text that will pre-populate the field when the widget is first added to a page.

Advanced Settings #

• Label Block (Display Label): When enabled, makes the control’s label take up the full width of the panel on its own line.
• Responsive Control: When enabled, allows the field’s value to be set differently for desktop, tablet, and mobile views.
• Dynamic Support (Enable dynamic content support): A powerful feature. When enabled, this text field can be populated dynamically from WordPress sources like post titles, custom fields, site data, etc., using Elementor’s Dynamic Tags feature.
• Frontend Available (Make control value available in frontend JavaScript): When enabled, the value entered into this text field is passed to your widget’s frontend JavaScript, allowing you to use it in your interactive logic.
• Separator: Adds a visual dividing line (None, Top, Bottom, Both) above or below this control in the panel to group related settings.
• Conditions: Allows you to show or hide this text field based on the value of other controls in your widget (e.g., only show a “Subtitle” text field if a “Show Subtitle” switcher is turned on).
• Control Classes: Lets you add custom CSS classes to the wrapper <div> of this control in the editor panel, allowing for advanced custom styling of the settings area itself.

Generated Shortcode #

When you add a Text control with the Name my_heading, Widget Builder generates a dynamic shortcode: {{my_heading}}.

• What it represents: This shortcode is a placeholder that will be automatically replaced with the actual text a user types into the field in the Elementor editor.
• Where to use it:
  • HTML Panel: Place it inside your HTML tags (e.g., <h2>{{my_heading}}</h2>).
  • CSS Panel: You can use it with CSS custom properties (e.g., content: var(--my-heading);) if supported by your logic.
  • JS Panel: If “Frontend Available” is enabled, you can access the value via JavaScript using the control’s name.

How to Use It: A Practical Example #

Let’s create a simple customizable “Call to Action” heading.

1. In Widget Builder’s Content tab, add a Text control.
2. Set the Label to Main Heading and the Name will auto-fill as main_heading.
3. Add a Placeholder: Your compelling headline here.
4. Set a Default Value: Welcome to Our Site.
5. In your HTML panel, write: <h1 class="cta-title">{{main_heading}}</h1>.
6. In your CSS panel, style the .cta-title class.

Now, in the Elementor editor, users can drag in your widget and directly type over “Welcome to Our Site” to change the headline without any code.

Common Use Cases #

• Headings & Titles: For H1, H2, H3 tags that need to change per page.
• Button & Link Text: To make “Learn More,” “Submit,” or “Download” labels editable.
• Labels & Captions: For editable image captions, statistic labels, or author names.
• Dynamic Data Display: Pair with Dynamic Support to pull text from posts, custom fields, or ACF fields.

Helpful Tips #

• Use Clear Labels: A label like “Customer Testimonial Quote” is more helpful than just “Text.”
• Leverage Defaults: Smart default values speed up page building and act as a guide for users.
• Explore Conditions: Use the Conditions setting to create cleaner, less cluttered interfaces by hiding text fields that aren’t always needed.
• Enable Dynamic Support Proactively: It’s often good practice to enable this if the text could ever come from a dynamic source, as it adds no overhead but future-proofs your widget.