Style Existing Widget

The Style Widget feature lets you take an existing Elementor widget and generate custom CSS styling for it using AI. Instead of building a page from scratch, you can enhance widgets you already have.

How It Works

1. Paste your widget HTML — Copy the HTML output of any Elementor widget and paste it into TypenDrop
2. Select a style theme — Choose from available preset styles to guide the AI's design direction
3. Specify the widget type (optional) — The AI can auto-detect, but you can specify for better results
4. Generate CSS — The AI analyzes your widget HTML and creates matching CSS
5. Copy the CSS — Apply the generated CSS to your WordPress site

Accessing the Feature

1. Click your user avatar in the top-right corner of the dashboard
2. Select Style Existing Widget
3. The styling modal opens where you can paste your HTML

Supported Widget Types

The AI can detect and style these widget types:

• Forms — Contact forms, sign-up forms, newsletter forms
• Buttons — CTA buttons, navigation buttons
• Accordions — FAQ sections, collapsible content
• Tabs — Tabbed content sections
• Testimonials — Customer review displays
• Pricing Tables — Plan comparison tables
• Icon Lists — Feature lists with icons

You can also leave the widget type unspecified and let the AI auto-detect it from the HTML.

Getting Your Widget HTML

To get the HTML of an existing Elementor widget:

1. Open your page in Elementor
2. Preview the page in your browser
3. Right-click on the widget you want to style
4. Select Inspect (or press F12)
5. Find the widget's HTML in the Elements panel
6. Right-click the widget element and select Copy > Outer HTML
7. Paste this HTML into TypenDrop's Style Widget tool

Applying the Generated CSS

After the AI generates your CSS:

1. Copy the CSS to your clipboard
2. In WordPress, go to Appearance > Customize > Additional CSS
3. Paste the CSS
4. Click Publish to apply

Alternatively, you can add the CSS to your theme's style.css file or use a CSS plugin.

Availability

Style Existing Widget requires a Pro or Max plan.

View plans and pricing