Elementor widgets are essential building blocks for website design using the Elementor page builder.
In this article, we’ll explore All Elementor widgets and their functions, both free and premium, and how to use them.
Whether you’re a beginner or an experienced professional web designer, or a web design agency, this guide will help you unleash the full potential of Elementor widgets for your website design needs.
If you want to learn more about WordPress page builders, check out our articles on the best WordPress page builders.
Tip: This is a long list, you press ctrl or cmd + F to find a particular widget.
Elementor’s Free Widgets
Here are Elementor’s free widgets.
1. Flexbox Container Widget(Free)
The Flexbox Container widget is a free Elementor widget that utilizes the power of Flexbox CSS to create flexible and responsive layouts.
It allows web designers to easily align and distribute content within a container, adjust spacing and sizing, and create custom layouts that adapt to different screen sizes.
With the Flexbox Container widget, designing complex layouts with Elementor becomes a breeze.
2. Heading Widget(Free)
The Heading Widget is an Elementor widget that allows you to add text headings to your website design. With this widget, you can customize the font, color, size, and style of your headings and set the heading’s HTML tag to H1-H6 for SEO optimization.
Whether you want to create eye-catching headlines, subheadings, or section titles, the Heading Widget makes it easy to add visually appealing text to your Elementor design.
3. Image Widget(Free)
The Image Widget is a free Elementor widget that allows you to add images to your website design. With this widget, you can upload images from your computer or choose from the Elementor library and customize the image size, alignment, and style.
You can also add image captions and configure the image’s link and hover effects. Whether you want to showcase your products, services, or portfolio, the Image Widget makes it easy to add stunning visuals to your Elementor design.
4. Text Editor Widget(Free)
The Text Editor Widget is an Elementor widget that allows you to add body text to your website design. With this widget, you can customize the font, color, size, and style of your text and format it using basic HTML tags.
You can also add links, bullet points, and numbered lists to your text, and even insert images and videos. Whether you want to add blog posts, product descriptions, or any other type of textual content to your Elementor design, the Text Editor Widget makes it easy to create visually appealing and engaging text.
5. Video Widget(Free)
The Video Widget is a free Elementor widget that allows you to embed videos on your website design. With this widget, you can add videos from popular platforms such as YouTube and Vimeo and customize the video player’s size, alignment, and other settings.
You can also add a poster image that displays before the video plays and configure the video’s autoplay and loop settings. Whether you want to showcase product demos, testimonials, or any other type of video content, the Video Widget makes it easy to add engaging multimedia to your Elementor design.
6. Button Widget(Free)
The Button Widget is an essential Elementor widget that allows you to add clickable buttons to your website design. With this widget, you can customize the button’s text, font, color, size, and style, and configure its link, target, and alignment.
You can also add hover and active effects to the button and choose from various button shapes and styles. Whether you want to add a call-to-action button, a download button, or any other type of clickable element to your Elementor design, the Button Widget makes it easy to create visually appealing and engaging buttons.
7. Divider Widget(Free)
The Divider Widget is a versatile Elementor widget that allows you to add horizontal dividers to your website design. With this widget, you can customize the divider’s color, size, width, and alignment, and choose from various divider styles such as solid, dashed, and dotted lines.
You can also add space before and after the divider and adjust its opacity and blend mode. Whether you want to separate sections of your design or add visual interest and hierarchy to your content, the Divider Widget is an essential tool for creating stunning Elementor designs.
8. Spacer Widget(Free)
The Spacer Widget is a free Elementor widget that allows you to add space and padding between elements on your web page. With this widget, you can adjust the height and width of the spacer.
You can also style the spacer with a background color or image and use it to create custom shapes. The Spacer Widget is a powerful tool for creating whitespace and adding visual interest to your Elementor design, allowing you to create a more balanced and dynamic layout.
9. Google Maps Widget(Free)
The Google Maps Widget is a free Elementor widget that allows you to embed Google Maps on your website. With this widget, you can add a map to your website by simply entering the address or coordinates and customizing the map’s style, zoom level, and size.
The Google Maps Widget is a valuable tool for businesses or websites that need to display their location or provide directions to their customers.
10. Icon Widget(Free)
The Icon Widget is a free Elementor widget that allows you to add FontAwesome icons to your website. The widget allows you to choose from a variety of pre-designed icons from the icon library or upload your custom icons in SVG format.
You can customize the icon’s size, color, background, and alignment. The Icon Widget is a powerful tool for adding visual interest and enhancing the user experience of your Elementor design, allowing you to create eye-catching and informative icons for your website.
11. Image Box Widget(Free)
The Image Box Widget allows you to create visually appealing image boxes on your website. With this widget, you can combine images with headlines and text to showcase your content engagingly. Customize the image, add a compelling headline, and provide relevant text to convey your message effectively.
12. Icon Box Widget(Free)
The Icon Box Widget in Elementor lets you easily add icons, along with a headline and description, to your web pages. These icons are sourced from the popular Font Awesome Icons library, providing a wide variety of options to choose from.
13. Star Rating(Free)
The Star Rating Widget enables you to showcase star ratings within your website content. With this widget, you can easily assign and display star ratings to indicate the quality, popularity, or user reviews of a product, service, or any other content element.
14. Image Carousel Widget(Free)
The Image Carousel Widget allows you to incorporate captivating image galleries into your web pages. With this widget, you can create visually appealing carousels that display a series of images, allowing visitors to browse through them interactively.
15. Basic Gallery widget(Free)
The Basic Gallery Widget simplifies the process of adding and styling stunning image galleries on your web pages. With this widget, you can effortlessly create visually appealing galleries that showcase your images in an organized and aesthetically pleasing manner.
16. Icon List Widget(Free)
The Icon List Widget makes it easy to add visually appealing lists with icons for each item. With this widget, you can easily manage and customize lists, adding icons and links to make each item stand out. Whether you want to showcase key features, services, or benefits, the Icon List Widget allows you to create organized and visually engaging lists.
17. Counter(Free)
The Counter Widget in Elementor empowers you to incorporate animated numbered counters into your web pages. With this widget, you can showcase and highlight important numerical data or statistics in an engaging and visually appealing manner.
Whether you want to display the number of satisfied clients, completed projects, or years of experience, the Counter Widget provides a dynamic way to capture attention and convey information.
18. Progress Bar Widget(Free)
The Progress Bar Widget in Elementor enables you to incorporate fully styled and animated progress bars into your web pages. With this widget, you can visually represent the progress or completion status of a task, project, or skill set.
19. Testimonial Widget(Free)
The Testimonial Widget in Elementor simplifies the process of adding and styling testimonials on your web pages. With this widget, you can easily enter the text of the testimonial, upload the author’s image, and include their name, job title, and even a link if desired.
20. Tabs Widget(Free)
The Tabs Widget in Elementor provides a convenient way to organize and display content within tabs, both horizontally and vertically. With this widget, you can divide your content into different sections or categories, making it easier for visitors to navigate and access specific information.
21. Accordion Widget(Free)
The Accordion Widget in Elementor is a useful tool for displaying text content in a condensed and space-saving manner. By using accordions, you can present an abundance of information while maintaining a clean and organized layout.
Visitors can easily scan the item titles and choose to expand specific items that interest them, making it perfect for FAQs or displaying lengthy content.
22. Toggle Widget(Free)
The Toggle Widget in Elementor provides a flexible solution for displaying collapsible content on your web pages. Unlike the Accordion Widget, which initially expands the first item and allows only one item to be expanded at a time, the Toggle Widget starts with all items collapsed and allows multiple items to be expanded simultaneously.
This allows visitors to toggle between different sections of content based on their interests.
23. Social Icons Widget(Free)
The Social Icons Widget allows you to add social media icons and links to your website. With this widget, you can easily showcase your various social media profiles by adding icon links.
Whether you want to direct visitors to your Facebook, Twitter, Instagram, or other social media accounts, the Social Icons Widget allows you to customize the icons and link them to your respective profiles.
24. Alert(Free)
The Alert Widget in Elementor empowers you to create eye-catching and attention-grabbing alert boxes on your web pages. With this widget, you can highlight important messages, announcements, warnings, or any other content that requires immediate attention from your visitors.
25. SoundCloud Widget(Free)
The SoundCloud Widget in Elementor allows you to seamlessly embed audio clips from SoundCloud directly onto your web pages. Whether you want to share music tracks, podcasts, or any other audio content, this widget makes it easy to integrate SoundCloud elements into your website.
Simply copy and paste the SoundCloud URL into the widget content, and your audio clip will be displayed for visitors to listen to and enjoy.
26. Shortcode Widget(Free)
The Shortcode Widget in Elementor offers a convenient way to incorporate shortcodes into your web pages. With this widget, you can easily visualize how the shortcode will appear on your page in real-time, without the need to switch to preview mode.
The Shortcode Widget automatically renders the shortcode, allowing you to see the exact output without any additional steps.
27. HTML Widget(Free)
The HTML Widget in Elementor gives you the freedom to embed custom HTML, CSS, and JavaScript code directly into your web pages.
This widget provides a flexible solution for integrating external scripts, custom styling, and dynamic functionality into your Elementor designs.
28. Menu Anchor Widget(Free)
The Menu Anchor Widget in Elementor enables you to create smooth scrolling navigation within a single page. By utilizing this widget, you can easily set anchor points on different sections of your page and link them to menu items or other clickable elements. When a visitor clicks on a menu item or a specific link, the page will smoothly scroll to the corresponding anchor point.
This feature is particularly beneficial for one-page websites where all the content is displayed on a single page.
29. Sidebar Widget(Free)
The Sidebar Widget in Elementor provides the flexibility to incorporate your theme’s sidebars directly into your page designs. This widget allows you to easily display the dynamic content from your theme’s sidebars within the Elementor editor.
By adding the Sidebar widget to your page, you can include elements such as recent posts, categories, search bars, and other widgets that are typically found in your theme’s sidebars.
30. Read More Widget(Free)
The Read More Widget in Elementor offers enhanced control over the preview text displayed for blog posts on archive pages. By utilizing the native WordPress <!–more–> tag or adding the Read More widget to your Elementor-designed posts, you can set the cutoff point for blog post previews.
This allows you to determine the excerpt or introductory content that is shown on standard WordPress archive pages, providing a more concise and enticing summary for your readers
31. Text Path Widget(Free)
The Text Path Widget in Elementor offers a unique and creative way to display text by attaching it to various shapes. With this widget, you can choose from a selection of pre-defined shapes or even upload your own custom SVG shape.
By attaching your text to these shapes, you can create visually appealing designs and make your text follow a specific path or pattern.
Elementor’s Pro Widgets
Here are Elementor’s Pro Widgets.
1. Posts Widget(Pro)
The Posts Widget is an Elementor pro widget that allows you to display your blog posts or custom post types on your website design. This widget allows you to choose which posts to display based on criteria such as categories, tags, or authors and customize the layout, style, and content of the posts.
You can display the posts in a grid, list, or carousel layout and choose which elements to display, such as the featured image, title, date, or excerpt. The Posts Widget is a powerful tool for creating dynamic and engaging blog and archive pages in your Elementor design.
2. Portfolio Widget(Pro)
The Portfolio Widget is an Elementor pro widget that allows you to showcase your posts, pages, and custom post types in a visually captivating and filterable grid. With this widget, you can add a stunning portfolio section to your website design, displaying your work or projects in an elegant, professional way.
With its built-in filtering options, you can make it easy for visitors to sort and view specific categories or tags, making for a more user-friendly experience.
The Portfolio Widget is a vital tool for freelancers, designers, and other creatives who want to showcase their work and attract potential clients to their websites.
3. Gallery Widget(Pro)
The Gallery Widget allows you to add beautiful and responsive image galleries to your website design. With this widget, you can create stunning photo galleries, product galleries, or portfolio galleries in just a few clicks.
You can also add animation duration, hover animations, blend mode, and captions to your images to make them more interactive and engaging. The Gallery Widget is for anyone looking to add dynamic and eye-catching image galleries to their Elementor design.
4. Form Widget(Pro)
The Form Widget is an Elementor pro widget that allows you to create custom forms for your website, such as contact forms, registration forms, or survey forms, without needing any coding skills. You can choose from various form field types, such as text fields, email fields, checkboxes, dropdowns, and more, and customize their design, labels, and validation rules to match your branding and requirements.
With its intuitive drag-and-drop interface and advanced features, you can easily add form submissions to your email, CRM, or database, set up automated notifications and confirmations, and protect your forms from spam and bots.
The Form Widget is a tool for anyone looking to create dynamic and functional forms for their website and streamline their communication with their audience.
5. Login Widget(Pro)
The Login Widget is an Elementor pro widget that allows you to customize the login page of your WordPress website, creating a unique and branded experience for your users.
With the Login Widget, you can easily add a login form anywhere on your website, such as the header, footer, sidebar, or dedicated login page, and customize its design, fields, and buttons to match your website’s style and user experience.
You can also add custom messages, links, and redirect URLs for different user roles or scenarios, such as a forgotten password, registration, or logout. The Login Widget is a great tool for anyone looking to enhance the security and usability of their website and provide a seamless login experience for their users.
6. Slides Widget(Pro)
The Slides Widget is an Elementor pro widget that allows you to create beautiful, responsive sliders for your website, showcasing your images or other content dynamically and interactively.
With the Slides Widget, you can easily add a slider to any section of your website, such as the homepage, landing page, or product page, and customize its layout, style, and animation to fit your brand and message.
You can also add custom content, links, and calls to action to each slide and control the navigation, pagination, and autoplay settings to optimize the user experience.
7. Nav Menu Widget(Pro)
The Nav Menu Widget is an Elementor pro widget that enables you to display any WordPress menu in a customizable and stylish way.
With the Nav Menu Widget, you can easily add a menu to any section of your website, such as the header, footer, or sidebar, and style it to match your website’s design and branding.
You can customize various aspects of the menu, such as the font, color, size, alignment, and spacing, and add animations or effects to enhance the user experience.
8. Animated Headline Widget(Pro)
The Animated Headline Widget is an Elementor pro widget that allows you to create captivating and dynamic headlines for your website.
With this widget, you can easily add headlines that rotate, change color, or include animated highlights to draw the visitor’s attention and make your website more engaging.
The Animated Headline Widget is highly customizable, and you can adjust various aspects of the headline, such as the font, size, alignment, animation type, speed, and duration.
9. Price List Widget(Pro)
The Price List Widget is a powerful tool that allows you to create beautifully designed catalogs and menus with pricing information for your products or services.
With this widget, you can add all the necessary details for each item, such as its title, description, image, link, and price.
You can customize the styling of your price list to match your website’s overall design.
10. Price Table Widget
The Price Table Widget is a powerful tool for creating visually appealing and informative price tables for your products or services.
With this widget, you can add a variety of content, including the title, subtitle, and heading tag.
You can also add a currency symbol and set the exact pricing of your product or service, including cents. The currency format can be customized to suit your needs.
Additionally, the widget allows you to display sale pricing with a strikethrough and new sale price.
Finally, you can set the period for which the price is valid.
11. Flip Box Widget(Pro)
The Flip Box Widget is an Elementor pro widget that allows you to create animated boxes that flip to the other side when visitors hover over them.
This widget offers various customization options, including title and description, image, icon, and shape, to help you create engaging and visually appealing content.
With the Flip Box Widget, you can easily add interactive elements to your web pages and capture your visitors’ attention.
12. Call to Action Widget(Pro)
The Call to Action Widget is a powerful Elementor tool that helps you create stunning, interactive boxes that encourage users to take action.
With this widget, you can add an eye-catching image, persuasive text, and a prominent button that links to your desired page or site.
The widget utilizes CSS effects and animations to create a visually appealing user experience with dynamic interactions that activate when the user hovers over the box.
13. Media Carousel Widget(Pro)
The Media Carousel Widget is an Elementor pro widget that enables you to create an eye-catching slider of both images and videos.
This widget comes with options to customize the look and feel of your media sliders, such as skin, slides, effect, height, thumbnails, and the transition duration.
With the Media Carousel Widget, you can easily create a professional-looking slider that engagingly showcases your content.
14. Testimonial Carousel Widget(Pro)
The Testimonial Carousel widget is an excellent tool for showcasing customer testimonials in a beautiful sliding carousel format.
With various design options available, you can fully customize the widget to match your website’s theme.
You can add customer testimonials with text and images, along with their name and title, creating a more personal touch.
The widget’s flexibility allows you to choose from different skins, effects, and transitions, making it a versatile choice for any website.
15. Reviews Widget(Pro)
The Reviews widget is a powerful tool that allows you to display a sliding carousel of user reviews on your website.
With this widget, you can easily customize your reviews to match your brand and style.
You can upload or choose the reviewer’s image, enter the reviewer’s name and job title, and assign a numerical rating from 0.0 to 5.0.
You can also choose the type of icon to use, either FontAwesome or Unicode and link the review to a URL.
The widget allows you to enter the text of the review and display it in an attractive, user-friendly format that is sure to impress your visitors.
16. Table of Contents Widget(Pro)
The Table of Contents Widget provides an efficient way to organize and navigate through the content on your page.
This widget automatically generates a table of contents based on the hierarchy of your headings (H1 to H6). You have full control over the inclusion and exclusion of specific headings in the table of contents, allowing you to tailor it to your specific needs.
17. Countdown Widget(Pro)
The Countdown Widget empowers you to incorporate countdowns on your web pages. Whether you’re building anticipation for a product launch, promoting an event, or creating a sense of urgency for limited-time offers, this widget is a powerful tool.
18. Share Buttons Widget(Pro)
With the Share Buttons Widget in Elementor Pro, you can effortlessly enhance the social sharing capabilities of your WordPress pages or posts.
This widget allows you to incorporate attractive and customizable share buttons that enable visitors to easily share your content across various social media platforms.
19. Blockquote Widget(Pro)
The Blockquote Widget allows you to effortlessly embed stylish and visually appealing quotes within your web pages. You can customize the design and formatting of the blockquote to match your website’s aesthetics.
Additionally, you have the option to enable Click To Tweet functionality, which allows users to easily share the blockquote on Twitter with just a click.
20. Lottie Widget(Pro)
With the Lottie Widget in Elementor Pro, you can effortlessly incorporate eye-catching animated elements into your web pages. Lottie widgets utilize .json files to render dynamic and captivating animations.
You have the flexibility to upload your own .json files or reference external ones, giving you access to a vast library of pre-designed animations. Additionally, you can customize the animations to suit your specific needs by adjusting settings and properties.
21. Facebook-Button Widget(Pro)
With the Facebook Like Button Widget in Elementor Pro, you can integrate Facebook’s Like Button into your website. This widget enables your visitors to express their appreciation for your pages or posts by simply clicking the Like button.
By incorporating the Facebook Like Button, you can encourage social engagement and increase the visibility of your content on the popular social media platform.
22. Facebook Comments Widget(Pro)
The Facebook Comments Widget in Elementor Pro allows you to integrate Facebook comments
By adding the Facebook Comments widget to the end of your posts, you enable your readers to leave comments using their Facebook accounts. This seamless integration encourages user interaction and provides a familiar platform for discussion.
23. Facebook Embed Widget(Pro)
With the Facebook Embed Widget in Elementor Pro, you can integrate Facebook content into your website. Whether it’s a captivating post, an engaging video, or insightful comments, you can effortlessly embed them onto your page.
Enhance your website’s content by bringing the dynamic world of Facebook directly to your visitors.
24. Facebook Page Widget(Pro)
The Facebook Page Feed Widget in Elementor Pro allows you to effortlessly integrate your Facebook Page’s feed directly onto your website. Keep your audience in the loop with your latest posts, updates, and events, seamlessly displayed on your site.
25. Hotspot Widget(Pro)
With the Hotspot Widget, you can enhance your images by adding interactive hotspots that showcase important details or provide additional information. These hotspots can be linked to text, images, videos, or custom content, allowing your visitors to engage with your images in a more interactive and immersive way.
Whether you want to highlight product features, provide visual guides, or create interactive maps, the Hotspot Widget empowers you to deliver a more engaging and informative user experience.
26. PayPal Button Widget(Pro)
With the Paypal Button Widget, you can easily integrate payment functionality into your website. Whether you’re selling products, running a fundraiser, or offering subscription-based services, this widget makes it effortless to collect payments from your customers.
Simply customize the button with your desired text, price, and currency, and link it to your PayPal account. This enables a smooth and secure transaction process, allowing you to monetize your offerings and provide a convenient payment solution for your audience.
27. Code Highlight Widget(Pro)
Elementor’s Code Highlight Widget is a valuable tool for showcasing code examples on your website. With its syntax highlighting feature, your code snippets become more readable and visually appealing.
Whether you’re sharing programming code, HTML markup, or CSS styles, the Code Highlight widget ensures that your code is presented in a clean and organized manner. Users can easily copy the code with a single click, making it convenient for them to implement it in their own projects.
28. Video Playlist Widget(Pro)
The Video Playlist Widget in Elementor allows you to curate and display captivating video content for your website visitors. Whether you’re a content creator, a vlogger, or a business looking to showcase your video portfolio, this widget is a valuable asset.
With the ability to create and customize video playlists, you can organize and present your videos in a seamless and engaging manner.
29. Template Widget(Pro)
The Template Widget in Elementor Pro allows you to incorporate custom global templates into your web pages. To select a template, from the Content > Template tab, choose a template you have saved in your Templates library, and insert it into your page.
This powerful feature enhances your workflow by enabling you to reuse and apply consistent design elements across multiple pages.
Conclusion: Elementor Widgets and Their Functions
Elementor provides a range of widgets that can help you create a functional and visually appealing website. While the free version of Elementor offers a variety of widgets, the pro version takes designing to a higher level.
Check out our honest review on the Elementor page builder.
With pro widgets such as the Animated Headline, Media Carousel, and Testimonial Carousel, you can create stunning designs that capture the attention of your website visitors.
So, if you want to take your website design to the next level and create a memorable experience for your visitors, consider upgrading to Elementor Pro and unlocking the full potential of these powerful widgets.
Build Your fully functional Professional Website without writing a single line of code with Elementor Pro
Find out the cost of the Elementor Pro
