Elementor Widgets Complete Guide 480322971715823
Elementor Widgets Complete Guide

Elementor Widgets Complete Guide

Elementor offers a line of widgets that help users take their design customization to the next level. These advanced tools are made to help you fine-tune your design elements and adjust features, so you can get the most out of your pages. Whether your priority is aesthetics, functionality, or both, these widgets will surely come in handy.

If you are new to Elementor or you simply want to expand your knowledge on how you can take advantage of these widgets, you came to the right place. This article will provide you a comprehensive guide to Elementor’s wonderful widgets. Read on and learn.

Introduction to Elementor’s Widgets

Elementor has 28 widgets that fall into a number of categories in the panel. Each of them has a set of custom controls or input fields. They come with a render option, which generates the output as seen in the front-end and editor.

Aside from these components, the page builder also displays all widgets of WordPress in a separate group in the panel. But for now, we will focus on that of Elementor and how they are organized for the users.

Here’s your guide to these widgets, their uses, and categories.

Basic Widgets

This category includes the basic widgets that come with the Elementor package

  • Inner Section – This Elementor widget is formerly known as Column widget.  It is what you need if you want to make inner columns within a section.
  • Heading – The heading widget is used to create unique and attractive headlines for your page.
  • Image – This element helps you manipulate the way your images look like. This widget lets you control the photo’s size and opacity, among others.
  • Text Editor – This works as a WYSIWYG text editor, which is pretty much like the normal WordPress editor.
  • Video – This element is very useful in pages where you want to feature a YouTube or Vimeo video.
  • Button – With this widget, you can adjust the button design to achieve the desired result.
  • Divider – This tool creates a line that divides different sections or elements in the page you are building. This is especially useful in organizing the look and feel of your page.
  • Space – Similar to the Divider widget, Space widget lets you add space between elements.  This tool helps avoid overcrowding of elements in your page, giving your visitors’ eyes an area to rest. 
  • Google Maps – This widget is what you need when you have to embed maps of the location of your business, be it a physical store, a clinic, or an office.
  • Icon – This widget gives you access to over 600 icons that you can place on your page.


This is the category where general widgets of Elementor fall under. 

  • Image Box – This is a widget that lets you add a box containing an image, headline, and text.
  • Icon Box – Icon box works similarly with Image Box, only it is for icons.
  • Image Gallery – This feature lets you showcase multiple images in an aligned grid.
  • Image Carousel – This is used to display featured images in a rotating or sliding fashion.
  • Icon List – This widget lets you create a bullet list of your chosen icon and text..


  • Counter – This feature is used for displaying statistics and numerical data in an increasing manner.
  • Progress Bar – The Progress Bar widget lets you add a bar that shows escalating levels.
  • Testimonials – This feature lets you add customer testimonials showing social proof to help build your image through your page. 
  • Tabs – Creating vertical or horizontal tabs for your page content is made possible by this widget.
  • Accordion – This feature is designed to create content that is collapsible.


  • Toogle – The Elementor Toggle widget works like Accordion, but it is mainly used for Frequently Asked Questions (FAQ) pages.
  • Social Icons – This element lets you add icons that lead users to your social media pages (Facebook, Instagram, Twitter).
  • Alert – This widget makes an alert box with vibrant color to instantly catch the attention of the visitor.
  • Audio – Audio bits from Soundcloud can be added into your page by using this widget.
  • Shortcode – This tool allows you to insert shortcodes from other plugins into the page you are building.
  • HTML – The HTML widget is used when inserting codes in the page.


  • Menu AnchorThis widget lets you add a menu anchor in the desired area of the page.
  • SidebarThe Elementor Sidebar widget lets you add sidebars.



This group is composed of advanced widgets that come with the Elementor Pro package.

  • Posts – This widget lets you display a list of any post types. These include custom post types in different layouts and ways.
  • PortfolioThe purpose of this widget is to display posts, pages, and custom post types. You can fashion the portfolio in an eye-catching, filterable grid.
  • SlidesWith this widget, you can easily create simple slides for display on your page.
  • FormThis tool is designed for easy creation of contact form so that your visitors can get in touch with you.
  • LoginThe Login widget allows you to create a customized login page. While you can use the default WordPress login page, this option lets you create your own unique page that is customized according to your style preferences and branding. 
  • Nav MenuThis feature helps you design your WordPress menus in any way you want. 
  • Animated Headline – Headlines should be attractive and interesting. With the Animated Headline widget, you can create great-looking headlines that either rotate or include animations.
  • Price ListThis one is used to make and design menus and catalogs with prices.
  • Price TableThis widget is designed for the creation of advanced price tables displaying the products or service that you offer.
  • Flip Box – A Flip box is an animated box that flips to another side when a user hovers over it. This widget lets you create these boxes to add interest in your page and to display key contents in a different way.
  • Call to Action – With the right combination of animations and CSS effects, a Call To Action can effectively command the user. This widget allows you to create attention-grabbing boxes. 
  • Media CarouselThis is the widget for you if you want to create a slider of images or videos on your page. The widget has three skins namely carousel (rotating carousel skin), slideshow (slider skin with one primary slides and little image thumbnails), and coverflow (slider skin with one central slide upfront and two slides behind it)
  • Testimonial CarouselThis tool works to display carousel slides containing testimonials from your customers. It comes in a variety of designs to suit your web design aesthetics.
  • CountdownAnother widget in Elementor’s Pro version, Countdown lets you add countdowns to your page minus the need for a third party plugin. You can choose from two options namely: Due Date and Evergreen Timer.
  • Share Buttons – This widget lets you add share buttons to your WordPress page or post. It gives you the chance to manipulate these buttons in terms of style and design.
  • BlockquoteThe blockquote widget is what you need if you want to add quotes into your page. This tool lets you easily embed style quotes for aesthetic purposes and added information. The best thing about this widget is it lets you can set them as “Click to Tweet” quotes, so that your visitor can share them on their Twitter account in just a click. 
  • Reviews – This Elementor widget works to display the reviews of your users through a sliding carousel. 
  • Facebook ButtonThis one lets you add a Facebook Like button on your webpage, giving your visitors an easier option to give your page or a certain post one like.
  • Facebook EmbedFacebook Embed widget lets you enrich your page with social media relevance by embedding Facebook posts, comments, or videos.
  • Template – This widget allows you to insert a custom global template into the page you are building. All you need to do is choose your saved templates for easier application of styles that suit your website.
  • Facebook CommentsThe Facebook Comments widget is the one you can apply at the end of a post so that your audience can easily comment through their Facebook accounts.


Theme category is comprised of theme widgets. This group also comes with the Elementor Pro package.

  • Post Title – One of the available Single Post Template widgets, the Post Title widget lets you use several options in displaying the title of your current post.
  • Post ExcerptAnother Single Post Template, this one lets you dynamically display an excerpt for a post.
  • Post ContentThis theme element allows you to showcase a post’s content in a dynamic manner.
  • Feature ImageSimilar to the function of the Post Title, Post Excerpt, and Post Content widgets, this one lets you dynamically display a post’s featured image. 
  • Author Box – Another theme widget that lets you display a post’s author box.


  • Post Comments – This is the key to dynamically displaying the user comments of a certain post.
  • Post Navigation – This one has similar functions to Post Comments widget, only it is for navigation links to other posts. 
  • Post Info – This single post widget of Elementor lets you dynamically highlight the meta data of the current post. This includes important information such as date, time, name of author, and the comments. 
  • Site Logo – This is another dynamic widget that allows users to display Site Logo assigned in the WordPress Customizer. While the logo can only be replaced or removed in the customizer, this widget lets you alter the look and feel of the logo.
  • Site Title – This widget lets you change some of the features of the title to suit your styling prefernces and the overall theme of your brand or the website. 
  • Page TitleThe Page Title widget lets you change a few design aspects such as typography, text color, shadow, and also has a blend mode for multiple layer effects. 
  • Search Form – This widget is the one that you need if you need to place a search bar in any part of your website. 
  • Breadcrumbs – Elementor’s Breadcrumbs widget works with Yoast SEO plugin. It lets you adjust aspects such as alignment, HTML tag, typography, text color and link color.  
  • Sitemap – This tool helps you make an HTML sitemap that is organized and accessible. This aspect is important to help your visitors and the search engines an easier way to explore through the pages of your website. 


This group is composed of the widgets used for WooCommerce, which is also part of the Elementor Pro package.

  • Breadcrumbs – The WooCommerce Breadcrumbs widget allows you to control the colors and layout of your breadcrumbs as well other style aspects like text and link colors, alignment, and fonts.
  • Product Title – The WooCommerce Product Title widget gives you control over the style and layout of your Product Title in the template. 
  • Product Images – With this widget, you can set the image or gallery you want to showcase for WooCommerce Productrs in the Single template. 
  • Add to Cart – This WooCommerce widget lets you add an Add to Cart button and alter the style and layout of the button. 
  • Product Rating – This enables you to adjust the position and style of the Product Rating within the Single Product template. You can choose a star color and size, among many other style features. 
  • Product Stock – This widget lest you display and make style adjustments to the Product Style info on the WooCommerce Single template. 
  • Product Data Tabs – This one lets you adjust the appearance of the Data Tabs. You can choose from a variety of colors for your text, background, and border. You can also adjust the headings and  panel.
  • Short Description – The Short Description widget gives you dominion over the style and layout elements of your WooCommerce Single template’s Short Description. You can easily choose and apply an appropriate alignment, typography, and text color. 
  • Product Data Tabs – This lets you control the colors, panels, and headings of your Product Data Tabs.  
  • Additional Information – This Elementor Pro widget lest you add Additional Information to your product display.   
  • Product Related – This is the widget for you if you want to insert and control the style for Related Products in your WooCommerce Single template. It lets you control the content, style, image, title, heading, rating, price, as well as other options such as buttons, view cart, box, and sale flash.
  • Upsell Products – This option lets you set the style for Upsell Products in your WooCommerce Single template. Use this widget to adjust the content, style, 
  • Products – The WooCommerce Products allows you to display products on your page and set their style and content. It lets you adjust columns, rows, paginations, and more. 
  • Add To Cart – This Elementor widget is designed to indert an Add to Cart button as well as to customize the style and layout in the WooCommerce Single template. 
  • WooCommerce Pages – It lets you display WooCommerce Page including Cart Page, Order Tracking Form, Single Product Page, My Account Page, and Checkout Page in any part of your website. 
  • Product Categories – This widget allows you to set a grid of WooCommerce Product Categories on your pages. You have total control of the layout, style, image, title, and count.

These are Elementor’s wonderful array of widgets. While their number can be quite overwhelming for beginners, as you get the hang of page-building through Elementor, these widgets will prove to be beyond useful. Give them a try and see for yourself. 

    --- Code rewritten by Kenoma for OCD issues--
  • Demo
  • Download

Kenoma Versoza

Kenoma is the project lead for WpBuilt and back when it was still ElementorResources. He was responsible for all SEO strategy and implementation and contributed a significant number of pages on the site.

Leave a Reply

phone - WPBuilt.co

Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template