How to Create Elementor Widgets for Custom WordPress Designs

Designing a website with Elementor becomes much more powerful when you go beyond default features and start building your own custom elements. While Elementor already offers a wide range of widgets, there are times when you need something more specific to match your design vision or functionality requirements. This is where custom widgets come in, allowing you to create unique layouts and reusable components tailored to your website.
If you’re looking to Create Elementor Widgets, using a no-code approach with the right plugin can make the process simple and accessible, even for beginners. Instead of relying on complex development, you can build and customize widgets using a visual interface and basic HTML and CSS. This approach not only saves time but also gives you complete creative control over your website design.

Benefits of Creating Custom Widgets

When you Create Elementor Widgets in the Elementor Website Builder for WordPress, you unlock a new level of flexibility and efficiency in your website design process. Instead of relying only on pre-built elements, custom widgets allow you to design exactly what your website needs while maintaining consistency across pages. This approach not only improves workflow but also enhances the overall user experience.

• Saves Time with Reusable Elements: Once you build a custom widget, you can reuse it across multiple pages without starting from scratch. This makes it much faster to design new pages while keeping everything uniform.
• Full Design Control: Pre-built widgets can be limiting, but custom widgets give you complete control over layout, styling, and content structure. You can design elements exactly the way you want.
• Improves Website Consistency: Using the same custom widgets across your site ensures a consistent look and feel. This helps create a more professional and cohesive design.
• Reduces Plugin Dependency: Instead of installing multiple plugins for small features, you can build your own widgets. This keeps your website lightweight and better optimized.
• Easy Customization in Elementor: Custom widgets come with editable fields, allowing you to change text, images, and styles directly from Elementor without touching the code again.

Creating a Custom Widget with Unlimited Elements 

To Create Elementor Widgets without coding, using Unlimited Elements for Elementor gives you a simple and structured way to design custom elements using HTML, CSS, and a visual interface.

Step 1. Install Unlimited Elements Plugin

To begin and Create Elementor Widgets, first log in to your WordPress dashboard. On the left-hand side, locate the Plugins option and click on Add New. This will open the WordPress plugin library where you can search for new tools.

In the search bar located at the top-right corner, type “Unlimited Elements for Elementor.” Once the plugin appears in the search results, click the Install Now button. Wait for a few seconds while WordPress downloads and installs the plugin. After installation, the button will change to Activate, click it to enable the plugin on your website.

Once activated, you’ll see a new menu item called Unlimited Elements in your dashboard sidebar. Click on it to open the plugin’s dashboard, where you will manage and build your custom widgets.

Step 2: Navigate to the Widget Creator

From your WordPress dashboard, go to Unlimited Elements → Widgets in the left-hand sidebar. This section displays all available widgets, including pre-built and custom widgets.

At the top of the page, you will find options like Add Widget and Import Widgets. To create your own Custom Elementor Widget, click on the “Add Widget” button.

Make sure you are in the correct section before proceeding, as this is where all your custom widgets will be managed, edited, and stored. If you’ve previously created widgets, they will also appear in this list for easy access.

Step 3: Enter Widget Details

After clicking the “Add Widget” button, a setup prompt will appear where you need to define the basic details of your widget.

Start by entering the Widget Title, which is the name that will be visible inside the Elementor panel. Choose a clear and descriptive name so you can easily identify it later.

Next, enter the Widget Name, which acts as a unique identifier for your widget. This should be written in lowercase without spaces, using underscores instead (for example: custom_widget). This name is used internally, so it must be unique and properly formatted.

Once you’ve filled in both fields, click the “Add Widget” button to continue. This action will create the base structure of your widget and take you to the editor where you can start building its functionality and design.

Step 4: Access the Widget Editor

After submission, you’ll be redirected to the Widget Editor interface.

This is your main workspace where you can build the widget using different tabs such as:

• General
• Attributes
• HTML
• CSS
• JavaScript
• Assets

You can also use options like Test Widget and Preview Widget to see how your widget looks and functions in real time.

Step 5: Add HTML Structure in the Editor

To create your Elementor widget, start by building its structure using HTML. Inside the widget editor, click on the HTML tab.

This is where you define the layout of your widget. Think of it as the skeleton, everything you design later (CSS, fields, styling) will depend on this structure.

For example, let’s create a simple Call-to-Action (CTA) Widget that includes:

• A heading
• A short description
• A button

Example HTML Code (CTA Widget)

<div class="cta-widget">
  <h2 class="cta-title">Grow Your Business Today</h2>
  <p class="cta-description">
    Discover powerful tools and strategies to boost your online presence and increase sales.
  </p>
  <a href="#" class="cta-button">Get Started</a>
</div>

How This Works

• The outer <div> acts as the main container for your widget
• <h2> is used for the title
• <p> adds a description/message
• <a> acts as a button

Using classes like cta-widget, cta-title, and cta-button helps you easily style these elements later using CSS.

Preview and Adjust

As you add your HTML code, check the live preview panel to see how your widget looks. If something doesn’t appear correctly, you can instantly tweak the structure.

Make sure your HTML is clean and properly nested, as this will make the next steps, like styling and adding dynamic fields, much easier.

This step is crucial because it builds the foundation of your widget’s design and layout.

Step 6: Style Your Widget Using CSS

Once your HTML structure is ready, the next step in creating Elementor widgets is to style your design. Click on the CSS tab inside the widget editor.

This is where you enhance the visual appearance of your widget by applying custom styles using Elementor Custom CSS. You can control elements like colors, font sizes, spacing, alignment, borders, and hover effects.

Let’s continue with the CTA (Call-to-Action) Widget we created earlier.

Example CSS Styling

.cta-widget {
  text-align: center;
  padding: 40px 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.cta-title {
  font-size: 28px;
  margin-bottom: 15px;
  color: #000;
}

.cta-description {
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
}

.cta-button {
  display: inline-block;
  padding: 12px 25px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s ease;
}

.cta-button:hover {
  background-color: #333;
}

How This Works

• The .cta-widget class styles the main container (spacing, background, alignment)
• .cta-title controls the heading appearance
• .cta-description improves readability of text
• .cta-button styles the button, including a hover effect

By using the same class names from your HTML, you can precisely target and style each element.

Preview and Refine

As you apply your CSS, the live preview panel updates instantly, allowing you to see changes in real time. This helps you fine-tune spacing, colors, and layout until the widget matches your website’s design.

This step transforms your widget from a simple structure into a visually appealing component.

Step 7: Add Dynamic Fields (Attributes)

To make your widget customizable while creating Elementor widgets, switch to the "Attributes tab" tab inside the widget editor.

Dynamic fields allow users to edit the content of your widget directly from the Elementor panel, without touching any code.

Click on “Add Attributes” and choose the type of field you want to create. Common field types include:

• Text
• Textarea
• Image Selector
• Color Picker
• URL

Let’s continue with our CTA (Call-to-Action) Widget and make it dynamic.

Example Fields for CTA Widget

You can create the following fields:

1. Title Field
   • Type: Text
   • Name: title
   • Label: “CTA Title”
   • Default: Grow Your Business Today
2. Description Field
   • Type: Textarea
   • Name: description
   • Label: “CTA Description”
3. Button Text Field
   • Type: Text
   • Name: button_text
   • Label: “Button Text”
   • Default: Get Started
4. Button Link Field
   • Type: URL
   • Name: button_link
   • Label: “Button Link”

Why This Step is Important

By adding dynamic fields:

• You make your widget fully editable
• No need to change code every time
• It becomes reusable across multiple pages

Step 8. Connect Fields to HTML Code

After creating your fields, the next step is to connect them to your widget’s HTML structure.

Go to the HTML tab in the widget editor and replace any static content with dynamic placeholders using the field names you created earlier.

Updated HTML with Dynamic Fields

Now replace static content in your HTML with dynamic field variables:

<div class="cta-widget">
<h2 class="cta-title">{{title}}</h2>
<p class="cta-description">
{{description}}
</p>
<a href="{{button_link}}" class="cta-button">
{{button_text}}
</a>
</div>

How This Works

• {{title}} → pulls content from the Title field
• {{description}} → displays the description dynamically
• {{button_text}} → controls button label
• {{button_link}} → sets the button URL

Once added, these fields will appear in the Elementor sidebar whenever you use this widget.

Why This Step is Important

Without this step, your widget will only show fixed content. By connecting fields to HTML, your widget becomes a flexible and reusable component that updates dynamically based on user input.

Step 9: Configure Widget Settings

To properly organize and finalize your widget, go to the General tab inside the widget editor.

This section allows you to define how your widget will appear and be managed inside Elementor.

Key Settings to Configure

• Widget Name: This is the name displayed in the Elementor panel. Choose a clear and descriptive name so you can easily identify your widget while building pages.
• Widget Icon: Select an icon that visually represents your widget. This helps in quickly recognizing it among other widgets in the Elementor sidebar.
• Category: Assign your widget to a category. This helps organize your widgets and makes them easier to find when working in Elementor. You can place it in an existing category or create a custom one.

Why This Step is Important

Proper configuration ensures that:

• Your widget is easy to find inside Elementor
• Your workflow becomes faster and more organized
• Your widget looks professional, especially if you plan to reuse or share it

This step completes the setup of your widget and prepares it for use inside Elementor.

Step 10: Save and Test Your Widget

Once your design and settings are complete, click the “Update” button at the top of the widget editor to save your custom widget.

Before saving, review all components carefully:

• Check your HTML structure
• Verify your CSS styling
• Ensure all dynamic fields (Attributes) are properly connected

You can also click “Preview Widget” or “Test Widget” to see how your widget looks and behaves in real time.

Final Checks Before Saving

• Make sure there are no errors in your code
• Confirm that all field names match your HTML placeholders (e.g., {{title}})
• Test button links and layout responsiveness

Step 11: Use Your Widget in Elementor

Now that your widget is created and saved, you can use it on your website pages.

Go to Pages → Add New (or open an existing page), then click “Edit with Elementor” to start building Landing Pages with Elementor using your newly created widget.

Add Your Custom Widget

Elementor works as a powerful WordPress Page Builder, allowing you to design pages visually without coding.

• Look at the left panel
• Use the search bar to find your widget by its name
• Drag and drop the widget onto your page layout

Customize Your Widget

Once the widget is added to the page, you will see all the dynamic fields (Attributes) you created earlier in the sidebar.

You can now:

• Edit text content (title, description, button text)
• Add links or images
• Adjust settings based on your widget fields

All changes will be reflected instantly in the live preview, allowing you to design your page in real time.

Why This Step is Important

This is where your widget comes to life. It allows you to reuse your custom design across different pages while customizing the content each time, without modifying any code.

You have now successfully created and used a custom Elementor widget from scratch

Step 12. Test, Optimize, and Reuse

The final step to Create Elementor Widgets is testing and optimizing your widget. Use Elementor’s preview options to check how it looks on desktop, tablet, and mobile devices.

Try changing different field values to ensure everything works properly and the design remains consistent. If you notice any issues, go back to the widget editor and adjust your HTML or CSS.

Once everything looks perfect, you can reuse this widget across multiple pages, saving time and maintaining a consistent design throughout your website.

Wrapping Up

Building custom widgets is one of the most effective ways to enhance your website design and streamline your workflow in Elementor. Instead of depending entirely on pre-built elements, creating your own widgets allows you to design exactly what your project requires while maintaining consistency across pages. As you Create Elementor Widgets, you gain the ability to reuse elements, customize content easily, and improve overall efficiency without needing advanced coding skills. Using tools like Unlimited Elements makes the process straightforward, even for beginners, while still offering flexibility for more advanced users.

By following the right steps and testing your widgets properly, you can create powerful, reusable components that elevate your website’s design and functionality. Over time, this approach helps you build faster, work smarter, and deliver a more polished user experience.

FAQs

1. Can beginners create custom widgets in Elementor?
Yes, beginners can easily create custom widgets using no-code plugins like Unlimited Elements. These tools provide a visual interface where you can design widgets using simple HTML and CSS without advanced coding knowledge.

2. Do I need coding skills to build Elementor widgets?
No, coding skills are not mandatory if you use a plugin-based approach. However, having basic knowledge of HTML and CSS can help you design more customized and visually appealing widgets.

3. Which plugin is best for creating custom Elementor widgets?
Unlimited Elements is one of the most popular plugins for building custom widgets. It offers a user-friendly widget creator, dynamic fields, and live preview features.

4. Can I reuse custom widgets on multiple pages?
Yes, once you create a custom widget, you can use it across different pages on your website. This helps maintain consistency and saves time when designing new layouts.

5. Are custom widgets compatible with all Elementor themes?
Most custom widgets work well with Elementor-compatible themes. As long as your theme supports Elementor, your widgets should function properly without issues.