WYSIWYG

The WYSIWYG (What You See Is What You Get) option adds a full-featured visual text editor to your custom widget. It’s the same rich editor used in the WordPress post and page editor.

Why would someone use it in a custom widget? #

Use this control when you need to give users complete formatting freedom. It’s perfect for content areas that require bold, italics, lists, links, embedded media, or custom HTML—all without touching code.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab. It appears as a configurable field labeled “WYSIWYG.”
• In the Elementor Editor: Once saved, it appears as a familiar WordPress editor panel within your widget’s settings, complete with the “Visual” and “Code” (Text) editing tabs and a formatting toolbar.

Available Settings #

Here are the configurable settings for the WYSIWYG control based on the provided screenshots:

Basic Settings #

• Label: The name of the control shown above the editor (e.g., “Main Content”, “Custom HTML”).
• Name: The unique machine-readable ID (like main_content) used to create the dynamic shortcode.
• Description: Optional text that appears below the editor to provide instructions.
• Default Value: The pre-formatted text or HTML that populates the editor when the widget is first used.

Advanced Settings #

• Show Label: Toggles the control’s label on or off.
• Label Block (Display Label): Makes the label take the full width of the panel.
• Responsive Control: Allows setting different formatted content for desktop, tablet, and mobile views.
• Dynamic Support: When enabled, the editor’s content can be populated dynamically from rich WordPress sources like post content or WYSIWYG custom fields.
• Frontend Available: When enabled, the final HTML output is passed to your widget’s frontend JavaScript.
• Separator: Adds a visual line to group this control in the panel.
• Conditions: Show or hide this editor based on other control values.
• Control Classes: Add custom CSS classes to the control’s wrapper in the editor panel.
• Selector: Defines the CSS selector where control styles will be applied. The {{WRAPPER}} variable ensures styles are scoped to your specific widget instance.

Generated Shortcode #

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

• What it represents: This shortcode is a placeholder for the complete, formatted HTML output from the editor, including paragraphs, lists, links, and embedded media.
• Where to use it: Primarily in the HTML Panel. You place the shortcode where you want the rich content to be injected (e.g., <div class="content-wrapper">{{custom_content}}</div>). It will output the raw HTML.

How to Use It: A Practical Example #

Let’s create a versatile “Content Box” widget for flexible page sections.

1. In Widget Builder’s Content tab, add a WYSIWYG control.
2. Set the Label to Box Content. The Name will auto-fill as box_content.
3. In your HTML panel, create a simple container: <div class="custom-box">{{box_content}}</div>.
4. Style the .custom-box class in your CSS panel with padding, background, etc.

Now, in Elementor, users can add your widget and use the familiar toolbar to write formatted text, add bullet points, insert images or videos from the media library, or even switch to the “Code” view to paste custom HTML snippets—all within your widget’s design framework.

Common Use Cases #

• Flexible Content Blocks: For areas where page builders need maximum control over text formatting and media.
• Tab or Accordion Content: Perfect for the rich text inside expandable sections.
• Modal Popup Content: To manage the styled text and media within a popup window.
• Dynamic Post/Page Content: Use with Dynamic Support to automatically pull and display the main content from any post or page.
• Custom HTML/Shortcode Injection: Users can switch to the “Code” (Text) tab to paste custom HTML, shortcodes from other plugins, or embed codes.

Helpful Tips #

• Choose Over Textarea: Use WYSIWYG instead of a Textarea when users need basic formatting (bold, links, lists). It creates a much better editing experience.
• Understand the Output: Unlike the Text control, this shortcode outputs full HTML. Ensure your widget’s CSS is designed to handle various HTML elements (like <p>, <ul>, <img>) that users might add.
• Leverage Dynamic Tags: This control works seamlessly with Elementor’s Dynamic Tags. You can set a default manual text but allow an editor to instantly replace it with the current page’s content dynamically.
• Test with Media: If your widget’s front-end design has specific width constraints, test what happens when users insert full-width images or videos to ensure it displays correctly.