tagDiv Composer Review: A Great Page Builder to Create A Dynamic Website

If you have ever noticed the trend today, some popular WordPress themes come with a built-in page builder plugin. Jupiter X with Elementor and Newspaper with tagDiv Composer. In this article, we will cover tagDiv Composer.

One crucial thing to note. The tagDiv Composer page builder is only available on the themes developed by tagDiv: Newspaper and Newsmag. It is available as one of the required plugins on those themes. Newspaper (the current version is Newspaper X) and Newsmag themselves are WordPress themes aimed at dynamic websites (blog, news portal, and so on). tagDiv Composer is provided to help you to design the homepage of your website, create the supporting pages (about page, contact, team page and so on).

Interface and Ease of Use

Right after installing Newspaper theme or Newsmag, you will be asked to install tagDiv Composer. Well, this plugin is technically already installed as you install the theme, but not activated yet. tagDiV Composer itself only works on pages, unlike Elementor which also works on posts.

To start using tagDiv Composer, you can create a new page on your WordPress dashboard (Pages -> Add New) and click the TAGDIV COMPOSER button above the WordPress editor. You will be taken to the tagDiv Composer editor after clicking the button.

The interface of the tagDiv Composer editor consists of two parts. The left panel to host the design elements as well as to make the settings and the right panel (the canvas area) where you can design your page. Just like other page builder plugins, tagDiv Composer also comes with drag-and-drop functionality. You can simply drag the design element from the left panel to the canvas area on the right side. To add a new element, you can click the ADD ELEMENT button on the top side.

To make the settings to the element you have just added, you can hover your mouse over the element and click the Element button. The left panel will turn into the editing mode after you click the Element button.

You will see the different setting options according to the element you are going to edit. tagDiv Composer allows you to edit your page live. What you are currently seeing on the canvas area is what you will see once the page is published. By default, the preview is applied to the desktop device. You can preview your page on other types of devices by clicking the icons on the left panel.

You can also hide the left panel to see the real look of your page before you publish it. You can do so by clicking the arrow button on the bottom-left corner of the left panel.

The interface, as well as the user experience of the tagDiv Composer, are actually good enough. However, there are parts we don’t too impressed with. For instance, you have to manually enter the numbers to set the margins, paddings, column gaps and other parameters that use numbers. In some page builders, you can do so using a dropdown menu.

Another minor is when you use an element that involves images. You have to also enter the numbers manually to set the image size (height and width). Plus, the image thumbnail is too small and nearly invisible.

Score: 4 out of 5 stars (4 / 5)

Design Elements

Before going further on this section, please note once again that tagDiv Composer is built specifically for Newspaper and Newsmag themes, which are designed for dynamic websites. tagDiv Composer is mainly built to help you to design the layout of your dynamic website.

In tagDiv Composers, a design element is called a shortcode.

To ease your job in designing the homepage of your dynamic website, tagDiv Composers offers shortcodes called Big Grid(s). There are 12 different Big Grid styles offered by tagDiv Composer. A Big Grid itself hosts the content from your website (posts), which is displayed in stylized columns. You can filter the content on a Big Grid from the Filter tab on the left panel.

Another useful widget that you can use to design the layout of your homepage is Block(s). Same as Big Grid(s), a Block also hosts the content from your website (posts in this case), but with a different style. While a Big Grid is great to display content like featured articles, Block is ideal to display articles from certain categories. You can filter content on a Block by category or tag. tagDiv Composer offers 25 different Block styles. Here is one of the examples.

Of course, there are also other shortcodes you can use to create other pages on your website. For instance, there is a Team Member widget that will be very handy to create the team page. Or Pricing Table to create a “pricing” page. Here are the shortcodes offered by tagDiv Composer, other than Big Grid(s) and Block(s).

Header Main ManuNews TickerCall to Action
Header Category ListPinterestClient
Header LogoPopular CategoryColumn Content
Header Live SearchRaw HTMLColumn Title
Header LoginRecent CommentsFancy Text with Image
Header DateSearch FormHero
Header WeatherSeparatorIcon
Mobile MenuSingle ImageIcon Box
Mobile Horizontal MenuSlideInline Single Image
Mobile Live SearchText with TitleInline Text
Ad BoxTitleList
Author BoxVideo PlaylistMenu Product
Authors BoxWeatherNumbered Counter
Categories/Tags ListWidget SidebarPricing Table
Column TextNewsletterProgress Bar
ExchangeRevolution SliderSocial Icons
Homepage PostSocial CounterTeam Member
Image BoxPosts LoopTestimonial
InstagramPosts Loop 2Text with Image
List MenuButtonTitle over Image

Score: 4.5 out of 5 stars (4.5 / 5)

Other Features

  • Templates

There are two ways to create a new page with tagDiv Composer. While you can create a new page from scratch, there are also pre-made templates you can choose to save you time in creating a page. To load the templates, you can click the Load Templates button on the left panel of the tagDiv Composer. The template library popup will appear once you click the button.

The templates are very well-organized in the template library. If you have no idea about the homepage layout, you can go to the Homepages tab to import one of the available homepage templates. On the Pages tab, you will find templates of contact pages, about pages, landing pages, and so on.

  • Header Manager

Both Newspaper Theme and Newsmag Theme allow you to change the header via the Theme Panel. If none of the headers suit you, you can also create a new one from the Header Manager which you can access via tagDiv Composer (Header Manager is only available on Newspaper). This feature allows you to create and design the header as your liking. tagDiv Composer itself offers 40 different headers you can choose from. Before applying a header, you can also customize it until it meets your needs and taste.

Score: 4.5 out of 5 stars (4.5 / 5)

Technical Support

tagDiv, the team that develops tagDiv Composer, Newspaper Theme and Newsmag Theme uses a forum to help users fix their problems. tagDiv itself created two different forums for the Newspaper Theme users and Newsmag Theme users. You can register to a forum according to the theme you use to get some help from fellow users. No worries, the support team is also present on the forum and actively answering the topics. If you need direct help, you can find the email address of the tagDiv team on this page.

Overall, tagDiv has great technical support.

Score: 4.5 out of 5 stars (4.5 / 5)

Pricing

Both Newspaper Theme and Newsmag Theme are exclusively available on Themeforest. You need to spend $59 for Newspaper and $49 for Newsmag. Those prices are lifetime prices. You don’t need to spend a monthly or yearly budget to extend the license. A single theme license can only be used for a single website. In Themeforest, you can upgrade the item you bought freely if a newer version is available.

If the tagDiv team releases a new version of either Newspaper Theme or Newsmag (which typically also brings new features to tagDiv Composer), you can update your theme to a newer version fo free.

The Verdict

Want to build a dynamic website with WordPress? If yes, tagDiv Composer is a great page builder to assist you. It’s available exclusively on Newspaper Theme and Newsmag Theme, which are developed by tagDiv. You can use tagDiv Composer to design the layout of the homepage of your dynamic website. Also, you can use it to create supporting pages on your websites such as about page, contact page, team page, landing page and so on. tagDiv Composer comes with a visual interface. Everything and drag and drop.

Overal Score: 4.5 out of 5 stars (4.5 / 5)

UPDATE

The current version of tagDiv Composer comes with WooCommerce shortcodes that you can use to build an e-commerce website.

How to Create A Pie Chart in WordPress with JetElements

A message or data that is conveyed via a visual medium tends to have a better engagement. It’s a common thing to see data conveyed via a visual form such as a pie chart. In WordPress, you can create a beautiful pie chart with JetElements.

What is JetEements?

It’s an Elementor add-on. Elementor itself is a page builder plugin for WordPress that you can use to create a beautiful webpage without having to deal with CSS code. Elementor is a freemium plugin. You can use the free version to create a pie chart like we want to show in this article. However, you need to spend $17 to buy the JetElements add-on since it is a paid add-on. In addition to creating a beautiful pie chart, you can also use JetElements to create other beautiful content such as timeline (be it horizontal or vertical), progress bar, Instagram gallery, and so on.

How to create a pie chart with JetElements

Before getting started, make sure you have installed Elementor and JetElements on your WordPress site.

Once Elementor and JetElements are installed, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button.

You will be taken to the Elementor editor. The first thing you need to do here is adding a new section. Click the plus button to do so. You can select any structure. We use the single-column structure in this example.

Add the Pie Chart widget by dragging it from the left panel.

As you can see, you will instantly have a pie chart. By default, your pie chart consists of three datasets. To add a new dataset, you can simply click the ADD ITEM button. To edit the content of each dataset, simply click the dataset you want to edit the content of. You can edit the label, color, and value.

To change the chart title as well as the position, you can go to the next section beneath the ADD ITEM button.

Customizing your pie chart

The Pie Chart widget of JetElements comes with lots of setting options. Once you are done with the datasets, you can start customizing the look of your pie chart. You can play around with the left panel to customize your pie chart. Here are some common settings you might want to make.

  • Set the chart size

To set the chart size, you can open the Settings option under the Content tab. You can set the chart size on the Chart Height option.

Beneath the Chart Height option, you can set the cutout height. It is the percentage of the chart that is cut out of the middle. You can have a doughnut chart by setting the cutout percentage to a bigger number.

  • Set the border width

Border width is the separator between the datasets. The larger the border width, the smaller your datasets will be. To set the border width, you can switch to the Style tab. Set the border width on the Border Width option. You can also set the border color by clicking the color selector.

  • Set the legend position

Legend is the additional description about your pie chart. In legend, you can set what color represents a dataset. To set the legend, you can switch back to the Content tab. Legend is displayed by default. You can hide it by sliding the button on the Display option. To set the position, you can simply select one from the dropdown menu.

To set the box width on the legend, you can switch to the Style tab and open the Legend option. Box width can be set on the Box With option.

You can play around with the left panel to customize your pie chart. Once you are done, you can click the PUBLISH button on the bottom side to publish your page. Or, you can also save your page as a template. To save your page as a template, click the arrow icon next to the PUBLISH button and select Save as Template.

How to add your pie chart on a blog post

You might want to add the pie chart you have just created to a blog post or a regular page in WordPress. To do so, you need to save the pie chart as a template instead of publishing it.

Before being able to add your pie chart to a blog post, you need to install the Elementor Blocks for Gutenberg plugin. This plugin allows you to use an Elementor template as a Gutenberg block. Once the plugin is installed, create a new blog post (Posts -> Add New). Add a new block by clicking the plus button and select Elementor Library.

Select a template you want to add (pie chart in this case).

Pie Chart Example

How to Add Breadcrumbs in Elementor

Many believe that breadcrumbs have a good impact on search engine optimization. That is why many website owners want to add breadcrumbs to their websites. In Elementor, you can add breadcrumbs to your website using the Breadcrumbs widget.

In dynamic websites such as blogs or news portals, breadcrumbs are commonly added to the single posts. In Elementor itself, you can add breadcrumbs to any part of your website. Be it pages, single post templates to archive pages. In this post, we will show you how to add breadcrumbs to the single post template.

Install Yoast

The Breadcrumbs widget is not available in Elementor by default. To get this widget, you need to install the Yoast plugin first. Go to the Plugins -> Add New to install the plugin. Once installed and activated, go to SEO -> Search Appearance.

In the Search Appearance page, go to the Breadcrumbs tab and enable breadcrumbs by sliding the button.

Don’t forget to click the Save Changes button on the bottom side to apply the change. Before clicking the button, you can also make the settings to set how your breadcrumbs will look like. You can set things like the separator, taxonomy to show and so on.

Adding Breadcrumbs

We already have a single post template created with Elementor and want to use it as an example. You can visit this post to learn how to create a custom single post template in WordPress with Elementor. To edit an existing single post template, you can go to Templates -> Theme Builder.

Find your single post template on the Single tab. Hover your mouse over it and click Edit.

You will be directed to the Elementor editor. Drag the Breadcrumbs widget to the part where you want to add it.

Once the Breadcrumbs widget is added, you can go to the left panel to customize it. The first setting you want to make probably is the alignment.

To set more advanced customization, you can go to the Style tab. You can click the pencil icon on the Typography section to set the font style and font size. While to set the font color you can click the color selector on the Text Color section.

Publish your page (or update if you edit an existing template) to apply the breadcrumbs.

How to Create Circle Progress Bars in WordPress with JetElements

People tend to love visual content rather than text. If you want to display certain data on your website, displaying them in the circle bar is a great idea. Most web developers use jQuery to display data in circle bars. Programming knowledge is required if you want to create a circle bar with jQuery. If your website is built with WordPress, you can effortlessly create a circle bar without coding with JetElements.

JetElements is an Elementor add-on that provides unique widgets. One of which is Circle Progress, which allows you to display data in a visual form. More specifically circle bar. You can use this widget to display data or pieces of information such as website uptime, work hours, work progress, and so on.

A brief intro about Elementor

If you come to this page via a search engine and haven’t heard about Elementor before, it is a freemium page builder plugin for WordPress. You can use Elementor to create a beautiful web page without coding. You can even create a WordPress theme without coding as well. To enrich the experience of the users, Elementor supports add-on. JetElements is one of the Elementor add-ons.

How to use JetElements to create circle progress bars in WordPress

As mentioned above, JetElements has a widget called Circle Progress. You can use this widget to add circle progress bars on a webpage without coding. JetElements itself is a paid add-on (only $17). You can use the free version of Elementor to crate circle progress bars with JetElements.

Assuming you have installed Elementor and JetElements, create a new page (Pages -> Add New) and edit with Elementor by clicking the Edit with Elementor button.

You will be taken to the Elementor editor. Before getting started to create the circle bar, set the page layout by clicking the gear icon on the bottom side of the left panel. Select the layout on the Page Layout option.

Add a new section by clicking the plus button on the editor area. There are 12 structure options you can choose from. Select according to the number of columns you want to have. We use the three-column structure in this example since we want to create three circle bars on three different columns.

Add the Circle Progress widget by dragging it from the left panel to one of the columns in the editor area.

Boom! You will instantly have a circular bar. The first thing you want to do next is set the percentage number. Simply set the number on the Current Percent section.

To add the title, you open the Content option. In addition to title, you can also set the percent position, label position, as well as other setting options as you can see in the screenshot below.

To set the circle size, stroke width, background stroke width, and stroke color you can open the Settings option. There is also an option to set the animation duration here.

For more customization settings, you can switch to the Style tab on the left panel. Here, you can set things like circle fill color, progress line endings, typography and so on. You can play around to explore more setting options.

On the Advanced tab, you can make the settings of the column that holds your bar. Such as the column background, the margins, border, and so on.

Play around with the left panel until you get satisfied with the result. Repeat the steps above on other columns. If you want to add other widgets to your page, simply drag one from the left panel. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your page.

How to Create A Vertical Timeline in WordPress with JetElements

There are lots of ways to display information on the web. If you want to display information like your career journey, a company achievement, or organization history, creating a timeline might is a great idea as it can make your information looks more attractive. If you have a WordPress-based website, creating a timeline is not a big deal. You can do so using JetElements.

What is that?

JetElements is an Elementor add-on that has unique widgets. You can use this add-on to create both a vertical and horizontal timeline. In this post, we will show you how to create a vertical timeline with JetElements.

If you come to this page from search engine and haven’t heard about Elementor before, it is a page builder plugin for WordPress. It has a drag-and-drop visual interface, allowing you to create a beautiful webpage without coding. You can explore this website to learn more about Elementor. Elementor itself is a freemium plugin. To create a timeline like we are going to demonstrate below, you can use the free version. But, you need to buy the JetElements add-on, which costs only $17.

In this post, we will create a timeline of the album journey of Coldplay, from 2000 to 2015. You can click the button below (the orange one) to see the example.

Getting started

To get started, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button.

Set the page layout by clicking the gear icon on the bottom-left corner of the left panel. In this example, we choose Elementor Full Width. This layout removes the WordPress sidebar (if you have one) and retains only the header and the footer.

Once done setting the page layout, click the plus button on the Elementor editor to add a new section. There are 12 section structure options you can choose from. We use the single-column structure in this example.

Drag the Vertical Timeline widget from the left panel to the editor.

By default, the Vertical Timeline widget brings you four cards. A card itself is the content area where you can write your content (description and meta). Each card also already includes a point icon and you can also add an image. To add an image on a card, slide the Show Image button and upload your preferred image.

Add the description of your card on the Description field, the time on the Meta field and the title on the Title field. To change the icon, you can go to the Point section.

Repeat the steps above on the other cards. If you need more cards, you can click the ADD ITEM button.

Setting the animation effect and the gap between cards

By default, your timeline has no animation effect. If you want to apply the animation effect, you can go to the Layout section and slide the Animate Cards button. From here, you can also set the gap between cards. Simply change the value of Horizontal Space to set the horizontal gap and the Vertical Space to set the vertical gap between cards.

Customizing the timeline

Once you are done adding the content on each card, you can customize your timeline appearance. To do so, you can go to the Style tab. There are lots of setting options you can set here. Click each option to see what settings you can set.

Here are the common settings you might want to make:

  • Change the card background

To change the card background, you can select the Cards option and go to the Background section. Click the color selector and select your preferred color. You can also set the box shadow by clicking Box Shadow.

  • Change the font size, style, and color

If you want to change the font color of your timeline content, you can click one of these options: Description, Title, and Meta. These options have a typography controller that allows you to change the font size, font style, and font color. You can click the pencil icon to use the typography controller. To change the text color, you can simply click the color selector.

There are many other setting options offered by the Vertical Timeline widget of JetElemens. You can play around with the left panel to explore more setting options. Once get satisfied with the result, you can click the PUBLISH button on the bottom side of the left panel to publish your page.

How to Display Last Updated Date in Elementor

If you write an article on your WordPress site — a how-to article in particular — you need to regularly edit it in order to make it keep relevant. The problem is, your readers will never know the last updated date of your article unless you display the date. This article will show you how to display the last updated date of an article in Elementor.

In WordPress itself, there are several ways to display the last updated date of an article, depending on the theme you use. In most cases, you can display the last updated date by adding a new function on the functions.php file of your theme. If you use Newspaper theme by tagDiv, you can display the last update date via the tagDiv Composer.

When creating a single post template with Elementor, you can use the Post Info widget to display the post meta (date, author, and so on). By default, there are four pieces of information displayed by this widget: Author, Date, Time and Comments. You can edit one of those items — or add a new one — to display the last edited date.

Note: The Post Info widget is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

First off, drag the Post Info widget to an area of your page where you want to display the last edited date. Next, go to the left panel to make the settings. Select one of the items (or add a new one) and change its type to Custom.

Click the Dynamic link on the Custom option and select Post Date.

Click the wrench icon on the Post Date field and change the type to Post Modified. Set the date format by clicking the dropdown menu on the Format option.

To add a text before or after the date, you can click the Advanced option.

Final words

Not only displaying the last updated date of an article is important to let your readers know that the article they are reading is updated. It’s also important for an SEO purpose. Search engines tend to love webpages that are regularly updated because this means that the articles are more relevant to the readers.

How to Create Custom Footer in WordPress with Elementor

Not all WordPress themes have an option to customize the footer. If this is the case, programming skill (PHP) is required if you want to customize the footer of the theme use you.

If you use a WordPress theme that offers a page builder such as Newspaper theme by tagDiv, you have more freedom to customize the footer without coding. You will be able to add elements like an email subscription form, social media icons, links, website logo, and so on. There is a solution if you want to customize the footer of your theme, yet have no programming skill: using Elementor.

Elementor is a page builder that comes with a Theme Builder feature. You can use this feature to create a new, customized footer to replace the footer of your theme.

How the Theme Builder feature of Elementor works

The way the Theme Builder feature of Elementor works is pretty simple. Once you created a new footer and published it, it will replace the footer of the theme you are currently using. Your new footer can be applied to the entire website or specific pages only.

How to create a custom footer with the Theme Builder of Elementor

Elementor is a page builder that comes with a visual interface. To create a footer (or webpage), you just need to drag the widgets you want to the editor and make the settings according to your needs. Elementor itself offers more than 90 widgets. Technically, you can use all of these widgets when creating a footer. However, you definitely don’t need them all. In this example, we will demonstrate how to create a custom footer with the following elements.

  • Email subscription form.
  • Social media icons.
  • Links

Please note that Theme Builder is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

Getting Started

Assuming you have installed Elementor Pro on your WordPress site, go to Templates -> Theme Builder.

On the Theme Builder screen, go to the Footer tab on the left panel and click the Add New button to create a new footer template.

Elementor offers several footer templates you can choose from. Choose the one you like and click the Insert button to load it to the editor. Or, if you want to create the footer from scratch, you can simply close the template library to open the editor. In this example, we create a footer from scratch.

To create a footer that hosts an email subscription form, social media icons, and links, you need an Elementor section with three columns. So, click the plus button on the Elementor editor to add a new section and select the three-column structure option.

  • Adding the email subscription form

To add the email subscription form, drag the Form widget to one of the columns on the editor.

Go to the left panel to make the settings. Commonly, an email subscription form contains only an email field so you can remove the unnecessary fields (name and message). You can integrate your email subscription form with MailChimp, MailerLite, and GetResponse. Visit this post to read the detailed instructions on how to integrate your Elementor with an email marketing tool.

  • Adding social media icons

To add social media icons, drag the Social Icons widget to one of the columns on the editor.

Go to the left panel to make the settings. You can add a new social media icon or remove the existing one. To customize the icon, you can go to the Style tab.

  • Adding the links

There are several widgets that you can use to add links from your website. In this example, we use Icon List. So, drag the Icon List widget to the remaining column on the editor.

Again, go to the left panel to customize the Icon List widget. To add a link, click the item you want to add the link to and paste the link you want. If you want to remove the icon, hover your mouse over the icon and click the trash icon.

Again, you can go to the Style tab to customize the links. You can set things like link text color, typography, and so on.

  • Change the footer background

If you add a new section in Elementor, it has the white color by default. If you want to have different footer color, activate the section of the footer by clicking it on the Navigator and click the Style tab on the left panel. Change the background on the Background section.

Applying the new footer

There are so many setting options offered by Elementor for each widget, which is impossible to cover them all here. You can play around with the left panel until you get satisfied with the result. Once you are done, click the PUBLISH button on the bottom side of the left panel.

On the next step, you will be asked to specify the display condition. By default, your footer will be applied to the entire section of your website. So, if you want your new footer to be applied to the entire website, you can simply click the SAVE & CLOSE button.

Conversely, if you want your new footer to be applied to certain pages only, click the ADD CONDITION button to set the display condition. Speficy the pages you want your footer to be applied to. Click the SAVE & CLOSE button once you are done specifying the display condition.

Potential errors

You might encounter a technical error when creating a footer with Elementor. The most common error is the editor doesn’t show up. If you encounter this problem, try to use a different WordPress theme. Read this post to learn more about this problem.

22 Best Premium Add-ons for Elementor

By default, Elementor offers 30 widgets (or 90+ if you use the pro version) that you can use to build your website. Widgets like Form, Nav Menu, Posts, and Social Icons are already provided by Elementor. If the default widgets are not enough for you, you can install Elementor add-ons to get extra widgets. There are many WordPress developers that develop premium Elementor add-ons to enhance your experience in using Elementor.

What is an Elementor add-on?

An Elementor add-on is a set of widgets developed by a third-party developer. Some add-ons offer unique widgets that are not offered by Elementor yet, while some offer the widgets that are already offered by Elementor but come with different setting options. Some premium Elementor add-ons (such as JetElements) also come with premade templates. In addition to widgets, some add-ons also add extra setting options and functionalities to Elementor.

We have compiled the best premium Elementor add-ons. Here is the list.

Best General Premium Elementor Add-ons

1. Essential Addons

It’s safe enough to say Essential Addons is the most popular Elementor add-on. According to the stat on WordPress.org, the add-on has over one million active installations. Essential Addons — as the name suggests — offers the essential Elementor widgets that you can use on your Elementor design. Be it a page or custom template. Some widgets have the similar functionalities as the native Elementor widgets, but they offer more advanced capabilities.

For instance, Essential Addons has a widget called Google Map, which is aimed at adding a map from Google Maps. Elementor, as you know, also has a widget with the same functionality called Google Maps. However, the native Google Maps widget can only be used to add a basic, single map. While the Google Map widget from Essential Addons allows you to add a map with multiple locations, a 360-degree virtual tour, and several other map times.

In addition to widgets, Essential Addons also offers some extra features to allow you achieve more with Elementor, including the ability to password-protect a page, show/hide an element (section, column, and widget), and add custom filter.

Here are the widgets offered by Essential Addons (Free and Pro).

Creative ButtonData TableContact Form 7
Info BoxPost BlockTypeform
Advanced TabsDynamic GalleryWPForms
ToggleAdvanced Data TableMailchimp
Sticky VideoPost CarouselFluent Forms
Team MemberCountdownLogin Register Form
Dual Color HeadingProgress BarGravity Form
Feature ListProtected ContentFormstack
Testimonial SliderInteractive CardsTwitter Feed
Event CalendarImage ScrollerLearnDash Course List
TestimonialFancy TextTwitter Feed Carousel
TooltipInteractive PromoInstagram Feed
OffcanvasImage ComparisonFacebook Feed
Static ProductOne Page NavigationBetterDocs Category Grid
Simple MenuInteractive CircleBetterDocs Category Box
Flip BoxFilterable GalleryBetterDocs Search Form
Advanced AccordionCounterProduct Grid
Advanced MenuFlip CarouselWoo Checkout
Team Member CarouselImage HotspotsWoo Product Collections
Advanced SearchImage AccordionWoo Cart
Post GridLightbox & ModalWoo Product Slider
Content TickerLogo CarouselWoo Product Compare
Smart Post ListDividerWoo Product Carousel
Post TimelineCall to ActionWoo Product Gallery
Advanced Google MapPricing Table
Content TimelinePrice Menu

2. Exclusive Addons

Exclusive Addons is a trusted Elementor add-on that powers up your ability to create top-notch designs for your WordPress site.

The freemium plugin is highly rated and has a lot of positive reviews from its users. Their free version has a lot more than basics. It comes with 40+ functional elements & extensions, essential to building a workable website. That includes Widgets, Extensions, Templates, Blocks, and a custom Icon Library. Yes, Exclusive Addons is among the few Elementor add-ons that have their own custom icon library. That’s a lot you can get from a free version of a plugin.

Meanwhile, the pro version opens the door for you to the world of 50+ premium widgets & extensions, along with premium templates and premium updates. Switching to the Exclusive Addons Pro, you will be able to build websites with the most advanced features.

Exclusive Addons is a lightweight and super-fast plugin that will help to speed up your page loading speed. The incredible customizable option gives you full control over the elements and their styles you use in your web design.

In the design area, the plugin comes with 23+ pre-built templates and over 800 readymade blocks to provide versatile design ideas to create sophisticated websites.

It is a WYSIWYG (What You See Is What You Get) editor. With the Live Preview and Inline Editing feature, You can see the real-time preview as you make the changes.
Overall, if you are looking for an all-in-one solution to build websites with Elementor, you can easily go with the Exclusive Addons.

Here are the widgets & Extensions offered by Exclusive Addons (pro and free)

Post CarouselWoo CartAuthor Box
News Ticker ProBreadcrumbWoo Category
Comparison TableWoo Mini CartCookie Consent
Demo PreviewerAnimated ShapeIcon Box
Image HotspotMailchimpOff-Canvas
SliderSource CodeNavigation Menu
Lottie AnimationMega MenuImage Carousel
Content SwitcherImage MaskTestimonial Carousel
Glassmorphism EffectHeader FooterCross-Site Copy Paste
StickySite TaglinePage Title
Woo ProductGravity FormGravity Form
Modal PopupAccordionAnimated Text
Call To ActionPost GridCOVID-19
Filterable GalleryGoogle MapImage Magnifier
Logo CarouselPricing MenuProgress Bar
TestimonialList GroupGoogle Review
Filterable PostSection ParallaxAnd many more

3. JetElements

JetElements, one of the premium Elementor add-ons developed by Crocoblock

JetElements is a premium Elementor add-on developed by Crocoblock. It can be a perfect addition to your Elementor Pro, especially if you use Instagram to promote your services or products. JetElements offers a widget called Instagram which allows you to add your Instagram feed to your WordPress site. You can display your Instagram feed whether on the homepage, sidebar, about page or anywhere on your website. JetElements is also a great add-on to build a company website as it comes with the Team Member widget, allowing you to display your team members in a unique style.

There are 44 widgets offered by JetElements in total:

Bar ChartDropbarTable
Interactive Animated BoxPostsVideo Player
Section ParallaxImage LayoutPrice List
ProductsBannerTeam Member
Top ProductsImage ComparisonVertical Timeline
Best SellersAdvanced CarouselCountdown Timer
Sale ProductsSliderCircle Progress
Featured ProductsPortfolioAnimated Text
Recent ProductsPricing TableAnimated Box
Download ButtonServicesPie Chart
WeatherHeadlineProgress Bar
Contact Form 7Advanced MapScroll Navigation
ButtonAudio PlayerInline SVG
InstagramHorizontal TimelineLogo Showcase
Subscribe FormTestimonials

As you can see on the list above. Some of the widgets offered by JetElements are basically already available on Elementor, but they offer different setting options. For instance, the Posts widget of JetElements allows you to display the latest posts into a carousel mode, which is great if you are working on a dynamic website such as an online magazine or blog. The same setting option is not available on the native Posts widget of Elementor. In addition to the widgets on the list above, JetElements also offers premade templates as well as other features such as integration with MailChimp and the capability to disable the unused widgets.

4. Happy Addons

Happy Addons is available in two versions: free and paid. The free version of Happy Addons can be downloaded from the official plugin directory of WordPress while the premium version can be downloaded from its official website. The free version of Happy Addons offers about 30 extra widgets to your Elementor. Widgets like Twitter Feed, Bar Chart, News Ticker, Dual Button, and Team Member are available in the free version of Happy Addons.

In addition to more widgets like Pricing Table, Instagram Feed, Logo Carousel, and Line Chart, the premium version of Happy Addons also offers more advanced features such as presets, cross-domain copy-paste, live copy, image masking, and so on. Happy Addons is developed by weDevs, a WordPress developer that develops popular plugins like Dokan, WP Project Manager, and WP User Frontend.

Here are the widgets offered by Happy Addons (pro and free).

CardBar ChartSource Code
Info BoxFeature ListPromo Box
Icon BoxPricing TableHot Spot
Skill BarsFlip BoxPrice Menu
ReviewAdvanced HeadingBusiness Hour
Image CompareHover BoxLine Chart
Gradient HeadingTeam CarouselPie & Doughnut Chart
Team MemberScrolling ImagePolar Area Chart
Dual ButtonAdvanced TabRadar Chart
Number WidgetAdvanced AccordionContact Form 7
Justified GridTestimonial CarouselNinja Form
TestimonialLogo CarouselweForms
Step FlowAnimated TextCaldera Forms
Fun FactorTimelineWPForms
CalendlyInstagram FeedGravity Forms
News TickerAdvanced TogglePost List
Social IconList GroupPost Tab
Twitter FeedCountdown

5. Droit Addons

Droit Addons for Elementor is developed by DroitThemes. This add-on comes with 43+ widgets and 140+ present, including widgets to create a custom single post template: Post Content and Post Meta. Anyone can easily design a custom website with the free version of Droit Elementor Addons with zero coding knowledge.

Here are the widgets offered by Droit Addons for Elementor (free and pro):

AccordionTableAdvance Testimonial
Blog ListTeam MemberTestimonial Pro
BlogTestimonialAnimated Images
CardTimelineBreadcrumbs
Contact FormTwitter FeedButton Widget
CountdownBannerCall To Action
FaqAnimated TextFAQ Pro
Icon BoxNews TickerFun Fact
Image CarouselAlertImage Comparison
Info BoxTitleSubscribe
Process BoxAccordion ProTeam
PricingAdvances PricingVideo Popup Widget
Share ButtonsPricing ProTab

6. Master Addons

Master Addons a freemium plugin for Elementor editor, has covered the maximum elements and extensions that you need. A total of 55+ widgets are available inside the package. Master Addons will enhance the beauty of your Elementor page editor panel. You will see different content, media, call to action, buttons, forms elements. There is an option to assign a dynamic header and footer inside your entire website or some specific page. Another innovative free extension is Custom CSS. Sometimes it’s required to implement some CSS code for better UI. Just use your mind and design any element, section, column on your needs.

Here are the widgets and features offered by Master Addons (Fee and Pro).

Animated HeadlinesBusiness HoursContact Form
Call to ActionTable of ContentsParticles
Dual HeadingImage HotspotAnimated Gradient BG
Advanced AccordionImage GalleryReading Progress Bar
TabsPricing TableBackground Slider
TooltipImage ComparisonCustom CSS
Progress BarRestrict ContentCustom JS
Progress BarsCurrent TimePositioning
Team MemberDomain SearchContainer Extras
Team CarouselDynamic TableMega Menu
Creative ButtonNav MenuEntrance Animation
ChangelogsSearchTransforms
InfoboxBlockquoteRellax
FlipboxInstagram FeedReveal
Creative LinksCounter UpHeader,Footer,Comment Form
Image Hover EffectsCounter UpDisplay Conditions
Blog GridToggle ContentDynamic Tags
News TickerGallery SliderFloating Effects
TimelineGradient HeadlineWrapper Link

On the other hand, contact form customizer will assist you to design typography, padding, button, color, width, height without coding. Creating a dynamic page is easier with display conditions now. You can easily showcase different content by browser, user, time value. There are different types of content locker available. Select how you want to lock your content by age, password, captcha, popup. After all, Master Addons will improve your webpage quality. You have to drag and drop the perfect elements properly and design sections with extensions.

7. Raven

Raven is an Elementor add-on developed by Artbees. This add-on is built exclusively for the Jupiter X theme, a WordPress theme developed by Artbees. This add-on comes with 26 widgets, including widgets to create a custom single post template: Post Content and Post Meta. Here are the widgets offered by Raven.

Navigation MenuDividerPosts Carousel
Post ContentFlex SpacerPost Comments
Post MetaFormProducts
Site LogoHeadingSearch Form
AlertIconShopping Cart
ButtonImageTabs
CategoriesPhoto AlbumVideo
CountdownPhoto RollerBreadcrumbs
CounterPosts

8. PowerPack

PowerPack, a premium Elementor add-on that gives you 60 extra widgets

PowerPack is created by a team named IdeaBox. This team consists of passionate designers, developers, and marketers. With PowerPack, you can create a unique website without coding.

Compared to the two first add-ons above, PowerPack is a bit more expensive. But, the widgets and the features offered by PowerPack deserve a bit more expensive price indeed. One of the features offered by PowerPack is White Label Branding which allows you to change the plugin branding and help you maintain your personal brand while building client websites. This feature is definitely great for website developers who often create websites for clients. You can use PowerPack to create any type of website. Be it a dynamic website, a static website or an e-commerce website.

There are over 60 widgets offered by PowerPak in total. Here is the list.

Tabbed GalleryVideo GalleryInstagram Feed
TwitterCard SliderBusiness Hours
Scroll ImageTimelineContent Toggle
TestimonialsAdvanced TabsRecipe
Advanced AccordionOff-Canvas ContentDual Heading
BreadcrumbsShowcase WidgetInfo List
Content TickerAdvanced MenuLink Effects
Flip BoxPopup BoxPage Navigation
Image AccordionWoo ProductsPromo Box
Magazine SliderWoo Cart

PowerPack is particularly a great option if you are looking for an Elementor add-on that offers a one-time purchase model. There is a one-time purchase option offered by PowerPack.

9. Ultimate Addons

There is a frequently-mentioned WordPress theme when discussing Elementor: Astra. Ultimate Addons is developed by the same company as Astra Theme. So, if you use Astra Theme, this add-on is the perfect complement. Same as PowerPack, Ultimate Addons also has a more expensive price compared to the two first add-ons above. This add-on is also a great option if you are a website developer and often create websites for your clients as it comes with White Label, a feature that allows you to rebrand the Ultimate Addons on your client websites and flaunt it as your own.

Here are the widgets offered by Ultimate Addons.

User Registration FormMulti ButtonsPrice List
Retina ImageOff-CanvasTable
Team MemberModal PopupTimeline
Business ReviewsMarketing ButtonWoo Products
VideoInfo BoxWoo Categories
HotspotsImage GalleryWoo Add To Cart
Advanced HeadingWPForms StylerCountdown Timer
Content ToggleBefore After SliderBusiness Hours
Dual Color HeadingPostsGravity Form Styler
Fancy HeadingPrice Box

Ultimate Addons also has excellent documentation. You can learn how to use each widget by reading the documentation of its documentation.

10. Unlimited Elements

Another one of the most popular premium Elementor add-ons. Unlimited Elements is a bit different from other Elementor add-ons above. This add-on is released as a freemium add-on, meaning that the free version is available in case you want to figure out if this add-on suits your needs or not. Overall, the widgets offered by Unlimited Elements are not much different from other add-ons above. Here is the list of the widgets offered by Unlimited Elements.

Team MembersContent AccordionsFood Menus
Audio PlayersBullets ListsTimelines
iHoverIcon Hover EffectsTimer Countdowns
Bar CountersVideo Teaser PopupsPosts Accordions
Post CarouselsBannersInstagram Widgets
Content BoxesTestimonial and ReviewsCarousels
Event WidgetsPrice TablesImage Hover Effects
Block QuotesVideo GalleriesButtons
Icon BoxesFlip BoxesContent Tabs
Link Hover EffectsOpening Hours

11. The Plus Addons

The Plus Addons is developed by POSIMYTH Team. This Elementor add-on consists of over 60 widgets to complement the native widgets of Elementor to allow you to create a unique, beautiful website without coding. In addition to widgets, this add-on also comes with premade templates to allow you to create a beautiful webpage in minutes. Performance is one of the things highlighted by this add-on. A webpage created with The Plus Addons can be loaded in less than 0.5 seconds. At least that is what The Plus Addon said. This plugin adopts Unique Caching architecture that makes individual JS & CSS files per page. The result is faster load speed.

Here are the widgets offered by the Plus Addon.

Animated TextTime LineSwither
Image CascadingAdvertisement BannerAccordion
Before AfterScroll NavigationTabs Tours
Smooth ScrollAdvanced TypographyAdvance Text Block
Circle MenuMorphing SectionsPie Cart
OffcanvasAnimated Service BoxesInstagram Feed
Creative ImagesAnimated SeparatorsProtected Content
FlipboxBodymovin AnimationsNavigation Menu
Carousel RemoteParallax BackgroundProgress Bar
HotspotSegment Background

The Plus Addon also has excellent documentation. You can view the demo of each widget.

12. Element Pack

Another premium Elementor add-on you can consider to enrich your experience in building a website with Elementor is Element Pack. This add-on itself is released as a freemium add-on. The free version of this add-on is available on the plugin repository of WordPress. Element Pack comes with 79 core widgets, backed by several other widgets. White Label feature is also available in case you need this feature. There are also over 100 premade templates offered by Element Pack. This add-on is bundled with Rooten Theme. Here are the widgets offered by Element Pack.

Crypto CardTwitter Slider
Protected ContentSimple Contact FormCookie Consent
Help DeskAdvanced HeadingDropbar
ChartsAdvanced GalleryDevice Slider
360-degree Product ViewerAdvanced ButtonImage Magnifier
Crypto TableAnimated HeadingInstagram
Advanced Icon boxBusiness HoursImage Compare
IframeCall OutNewsticker
TransformCarouselNavbar
User RegisterCircle Menu

If you use MailChimp, you can also integrate it with Element Pack. This add-on also has excellent documentation. You can see the demo of each widget before using one.

13. Stratum

Stratum Elementor Extras were developed by MotoPress – a great and highly rated team of WordPress developers. The Stratum collection of 20+ advanced addons is new for the market and still now is still gaining its momentum, thus going through constant updates and improvements.

Stratum was initially released as a 100% free solution. Today, the free addon offers a premium version with exclusive advanced functionality for relatively low pricing. The main difference between Stratum and similar products is that this particular addon offers all widgets for FREE, yet leaves a few advanced options in the premium version.

In the list of offered widgets, you will see the most popular elements that you can only use in Elementor Pro or other paid third-party addons. The widgets provide an advanced design toolchain and support the Elementor template library integration.

Take a look at the all free Stratum widgets:

Advanced SliderImage Hotspot
Advanced PostsTestimonial Carousel
Masonry GalleryAdvanced Google Map
InstagramBanner
Price MenuCircle Progress Bar
Price ListCounter
Price TableFlip Box
Advanced AccordionImage Accordion
Advanced Tabs

14. Mighty Addons

To make the page building more dynamic, interactive, and smooth with Elementor, Mighty Addons has a huge role to play. It extends the functionality of Elementor by providing more number of elements and widgets. Its integration with Pixabay liberates users to have access to millions of free stock images. With a bunch of customization options, you will be able to create a webpage on WordPress which stands out.

With over 30+ widgets and extensions, you’ll be able to add multi-layered shadows to the elements, add interactive particles background to the different sections of your webpage, add multi-location via Google map & open-street map, etc. in no time.

Mighty Addons comes with the following outstanding widgets:

TestimonialOpen StreetWhatsApp Chat
TeamGoogle MapsExtensions
Progress BarTwo-Step LoginPixabay
CounterWeatherCross-Site Copy Paste
Button GroupAdvance HeadingMA Custom CSS
AccordionPayPal ButtonWrapper Link
AfterInsta GalleryParticles
Gradient HeadingPrice ListUnsplash
Flip BoxClick To CallCross-Site Copy Paste Style
Opening HoursHotspotDisplay Conditions
Contact Form 7Open TableAdvance Shadow
MailchimpContent ToggleAdvance Gradient

You can get Mighty Addons without hurting your pocket. You can use the basic version for completely FREE, and the pricing plan for the pro version starts from $15 for a single website. So, what are you waiting for?

15. ElementsKit

ElementsKit for Elementor is an all-in-one freemium plugin with a number of useful widgets and unique features. It is also known as one of the most popular all-in-one addons in the WordPress directory with over 700,000k+ active users, which offers 75+ free and premium widgets, 45+ Pre-designed Header-Footer templates, 35+ ready pages, 500+ ready blocks or sections, and the numbers are increasing rapidly.

Besides these, ElementsKit has many amazing features that give you a competitive edge while designing your website. The features include: Megamenu builder, Header and footer builder, Cross-domain copy-paste, Ready templates, blocks, landing pages, Parallax Effect, Social Feeds, Advanced table, along with a number of remarkable WooCommerce widgets too.

Even the free version of ElementsKit comes with tons of widgets, extensions, and services that will surprise you. There are 42 free widgets and extensions, free templates, and section blocks, with regular updates.

Here is the widgets list offered by ElementsKit (Free and Pro):

HeadingIcon BoxImage Box
ButtonAccordionImage Accordion
Countdown TimerClient LogoImage Comparison
FAQFun FactLottie
TestimonialPricing TableTeam
Social IconsProgress BarPie Chart
TabVideoBusiness Hours
Drop CapsSocial ShareDual Button
TablePressCall to ActionBack to Top
Advanced Accordion (PRO)Advanced Tab (PRO)Hotspot (PRO)
Motion Tex (PRO)Gallery (PRO)Chart (PRO)
Table (PRO)Timeline (PRO)Creative Button (PRO)
Advanced Table (PRO)Google Map (PRO)Unfold (PRO)
Image Swap (PRO)Popup Modal (PRO)Video Gallery (PRO)
Breadcrumb (PRO)

Apart from all the wonderful widgets, features, and modules, ElementsKit for Elementor is fully compatible with any theme and plugin. It also has a 24/7 support center that will assist you anywhere, anytime!

On the whole, ElementsKit has one of the largest numbers of Elementor widgets available in the community. It is also super compatible with beginners and non-developers to create a visually stunning website all by themselves.

Best Elementor Add-on for Dynamic Content

1. JetEngine

Elementor Pro has the ability to allow you to add dynamic content to your Elementor designs (pages or templates). However, the dynamic content types you can add are limited to the default dynamic content types of WordPress such as featured image, page title, site title, author profile, post meta, and so on. With JetEngine, you can create custom content types and then add them to your Elementor designs. The custom content types you can create with JetEngine include:

  • Custom post types
  • Custom fields
  • Custom taxonomies
  • Custom forms
  • Listing items
  • Dynamic calendar
  • Dynamic gallery
  • Dynamic map
  • And several other custom content types

JetEngine is a great add-on to create a complex, dynamic website such as a real estate listing page, bike rental site, or other site types that require booking functionality or listing style. It has some modules, including the Forms module, that you can use to create a wide range of forms including a user registration form, booking form, front-end post submission form, and so on.

Best Elementor Add-ons for WooCommerce

1. JetWooBuilder

If you use Elementor to build an e-commerce WordPress site with WooCommerce, JetWooBuilder is a great add-on to customize every single part of your WooCommerce. You can use this add-on especially if you use the free version of Elementor as the pro version already has a feature to customize WooCommerce (read Elementor Free vs Elementor Pro).

JetWooBuilder allows you to create a custom single product page, custom product category page, custom shop page, and so on. There are about 35 widgets you can use to create custom parts of WooCommerce.

Product Categories GridSingle Related ProductsThumbnail (Archive Category)
Product ListSingle Reviews FormStock Status
Product GridSingle Sale BadgeSale Badge (Archive)
Taxonomy TilesProducts Result CountRating (Archive)
Single Add to ChartProducts PaginationPrice (Archive)
Single AttributesPage TitleExcerpt (Archive)
Single ContentProducts OrderingCategories (Archive)
Single ExcerptProducts NoticesAdd to Cart (Archive)
Single ImagesProducts NavigationSingle Upsells
Single MetaProducts LoopSingle Title
Single PriceProducts DescriptionSingle Tabs
Single RatingTitle (Archive Category)

2. JetProductGallery

As the name suggests, this add-on allows you to create a gallery of your products. This add-on is great if you have products in which each product has multiple images. For instance, if you have a t-shirt product, the images might show the t-shirt from the front angle, back angle, and so on. JetProductGallery allows you to create a gallery in several styles. From slider, grid, to classic gallery.

3. JetCompare&Wishlist

Popular e-commerce sites like Zalora and Walmart have a feature to add a product to the wishlist. In addition, some big e-commerce sites like allow you to compare a certain product with other similar products. JetCompare&Wishlist is an Elementor add-on that allows you to add those features to your WooWoomerce site. You can add a comparison feature to allow your customers to compare products by certain parameters such as price, rating, and other parameters based on metadata of each product.

JetCompare&Wishlist adds the following widgets to your Elementor:

  • Wishlist
  • Wishlist Count Button
  • Wishlist Button
  • Compare
  • Compare Count Button
  • Compare Button

4. JetSmartFilters

JetSmartFilters is an Elementor add-on that allows you to add an advanced filtering feature to your e-commerce site or other Elementor-powered WordPress sites in general. For an e-commerce site, you can use this add-on to add an advanced filtering feature to allow your customers to filter products by parameters like price, rating, brand, color, or other parameters based on the information on your products. The filter types you can apply are:

  • Sorting filter
  • Rating filter
  • Visual filter
  • Range filter
  • Select filter
  • Checkboxes filter

5. ShopEngine

ShopEngine for Elementor is not just a one-stop solution for WooCommerce freemium template builder. Rather, it is freedom of web design that allows you to express your story with state of art ready-to-use layouts. In just a few months ShopEngine has won thousands of hearts all around the world!

With this most complete WooCommerce solution you will get a full package of 62+ Fully Customizable Widgets, 12+ Useful Modules, 15+ pre-designed templates, and many more with helpful community support and the numbers are increasing rapidly.

Now only that it also comes with some remarkable features like quick checkout, backorder, pre-order, badges, wishlist, add to cart, product comparison, sales notification, quick view, cross-sell and upsell pop-ups along with many others. You will also be surprised to know that all the pre-built templates have multiple options to get your online shop up and running in just a few mins.

In fact, the ShopEngine Free version also comes with a wholesome WooCommerce package with 40+ widgets, 4+ modules, and 5+ templates, which is sufficient to create an online store.

Here is the widgets list offered by ShopEngine (Free and Pro):

Additional InformationAdd to CartBreadcrumbs
Product CategoriesProduct DescriptionProduct Excerpt
Product ImageProduct MetaProduct Price
Product ReviewProduct ShareProduct SKU
Product TabsProduct TitleRating
Related ProductUpsellArchive Description
Archive ProductsArchive TitleArchive Result Court
Archive Vide ModeCross-sellCart Total
Empty Cart MessageReturn to ShopCheckout Form – Coupon
Checkout Form – AdditionalCheckout Form – BillingCheckout Form – Login
Checkout Form – ShippingCheckout PaymentOrder Review
Checkout Shipping MethodsAdvanced SearchDeal Products
Flash Sale ProductsProduct Category ListRecently Viewed Products
Order by FilterProduct Per page FilterGeneral

Best Elementor Add-on to Create an Advanced Menu

1. JetMenu

Elementor Pro has a Nav Menu widget that you can use to add a navigation menu to your custom header. You can only use it to create a simple menu. To create an advanced menu like a mega menu or an off-canvas menu, you need to install an add-on. JetMenu is an add-on that is designed specifically to allow you to create an advanced menu on your Elementor-powered site, especially a mega menu. Be it a horizontal or vertical mega menu. In addition, you can also use JetMenu to create an off-canvas menu. There are 3 widgets offered by JetMenu:

  • Mega Menu
  • Vertical Mega Menu
  • Hamburger Menu

How to Create a Custom Header in WordPress with Elementor

Header is one of the crucial elements every website should have. A header commonly contains a menu, allowing your visitors to easily jump to the important pages on your website. Another element usually found on a website header is the logo.

Most WordPress themes, be it free or paid, allow you to customize the header by adding your site logo or navigation menu. Some WordPress themes, including Newspaper theme by tagDiv, allows you to add additional elements like the search bar and social media icons. Is it possible to create a custom header in WordPress to replace the header of the active theme? Of course, you can create a custom header to replace the default header of the theme currently active on your WordPress site.

If you have a programming skill (PHP in this case), creating a custom header for a WordPress theme is not a big deal. If you have no programming skills, Elementor allows you to create a custom header without writing any single line of code. You can create the header via a drag-and-drop visual editor.

Note: Theme Builder is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

How to create a custom header in WordPress with Elementor

The pro version of Elementor comes with a feature called Theme Builder. This feature allows you to create a WordPress theme without coding. The theme elements you can create with the Elementor’s Theme Builder are:

  • Header
  • Footer
  • Single post template
  • Archive page template
  • 404 page template

In this post, we will show you how to create a custom header for your WordPress theme with Elementor. Once published, this custom header will replace the header of your current theme.

Before getting started, make sure that you have installed Elementor Pro on your WordPress site.

First off, go to Templates -> Theme Builder.

On the Theme Builder scren, go to the Header tab and click the Add New button to create a new header.

Elementor allows you to create a header from a template. Select one of the available templates on the appearing template library window and click the Insert button to load it to the Elementor editor.

Alternatively, you can also create the header from scratch. If you prefer to create the header from scratch, you can simply close the template library to open the Elementor editor.

Technically, you can add any Elementor widget — which you can explore on the left panel — to your header. But, not all widgets are really necessary when it comes to creating the website header. In this post, we will show you how to add the common elements of a header: Site logo, navigation menu, and search bar. In this case, you will need a new section with three columns. Click the plus icon on the Elementor editor and select the three-column structure.

Set the width of each column by dragging the separator to the left or right direction. Take a look at the screencast below.

  • Add the site logo

To add the site logo, drag the Site Logo widget from the left panel to one of the columns on the Elementor editor.

The Site Logo widget will load your site logo. If you haven’t specified your site logo, you can go to Appearance -> Customize to add your logo.

You can customize your logo via the left panel. You can set things like alignment, link, width, and so on. Just play around with the left panel until you get satisfied with the result.

  • Add the navigation menu

To add the navigation menu, drag the Nav Menu widget to one of the columns on the Elementor editor.

The Nav Menu widget will load the main menu of your website. If you haven’t created any menu on your website, you can go to Appearance -> Menus to create one. If you have more than one menus on your website, you can specify the one you want to display from the dropdown menu on the Menu option on the left panel.

Again, you can play around with the left panel to customize your menu. You can set the layout (horizontal, vertical, dropdown), align, animation effect and, so on.

  • Add the search bar

To add the search bar, you can drag the Search Form widget to the remaining column.

Once the form is added, you can go to the left panel to customize it.

Customize the header

By default, your header will have a white background. You can change this color to tailor it with the color of your theme. To do so, activate the section by clicking it on the Navigator.

Go to the Style tab on the left panel and select your preferred color by clicking color selector on the Color option on the Background section.

If you want to have a sticky header, you can go to the Advanced tab. On the Sticky option under the Motion Effects section set the sticky location. By default, the sticky effect will be applied to all device types (desktop, tablet, and smartphone). If you want to disable the sticky effect on a certain device type, simply remove the device from the field.

Publish your custom header

Until here, you have successfully created your custom header. There are many other setting options you can set to, and it’s impossible to cover them all on this post. Just play around with the left panel until you get really satisfied with the result. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your header template.

On the next step, you will be asked to set the display condition. Click the ADD CONDITION button.

By default, your header template will be applied to the entire website. So, if you want your header template to be applied to the entire website, you can simply click the SAVE & CLOSE button.

Or, if you want your header template to be applied to a specific page, you can specify the page by clicking the dropdown menu. Select the page on the other dropdown menu that appears afterward. Click the SAVE & CLOSE button once you are done specifying the page.

How to Export and Import Elementor Templates

There are two ways to create a web page in Elementor. First, you can create a page from scratch. Alternatively, you can create a page from a template. The second option allows you to create a beautiful web page in minutes. It is also a great option if you have no idea about the concept of the page you will create. Elementor itself offers tens of premade templates you can choose from the template library. Or, you can also use a template from third-party creators.

While you can use an Elementor template created by third-party creators or the ones from the Elementor team, you can also share the templates you have created. Elementor allows you to store your templates into an external file in the JSON format. You can either export a page template or block template.

How to create and export an Elementor template

To start creating an Elementor template, create a new page/post and edit it with Elementor by clicking the Edit with Elementor button above the WordPress editor.

You will be taken to the Elementor editor. Please create your template. Once you are done, click the tiny arrow icon next to the PUBLISH button on the bottom side of the left panel and select Save as Template.

A pop-up will appear, asking you to enter your template name. Simply enter your preferred name and click the SAVE button.

On the next step, find the template you have just created. Once found, click the three-dot button on the right-most side and select Export.

Your template will be exported to the local storage of your computer. If you don’t change the default download location of your web browser, you can find it on the Downloads folder on your computer.

Alternatively, you can also export your template from the Elementor template manager. To do, go to Templates -> Saved Templates.

Hover your mouse over the template you want to export and click Export.

How to import an Elementor template

As mentioned earlier above, you can export your Elementor templates into a JSON file.

To import a JSON file of Elementor template, go to Templates -> Saved Templates.

Click the Import Templates button, followed by Choose File and select the JSON file you want to import. Click the Import Now button to start the import.

Once your template is imported, it will be available on the Saved Templates tab of the Elementor template manager. To use it, simply hover your mouse and click Edit with Elementor.

Alternatively, you also import your template by clicking the folder icon on the Elementor editor.

Click the arrow icon on the template library header to select a JSON file from your computer.

Final words

Not only you can import an Elementor template individually per file. You can also import multiple templates at once. To import multiple templates, you can create a ZIP file of the template files you want to import. You can use the same method we have covered above to import a set of Elementor templates from a ZIP file.

JetElements Review: A Great Elementor Add-on with Cool Widgets

When creating a website with Elementor, you are not limited by the widgets offered by Elementor only. Elementor has an open enough ecosystem which allows third-party developers to develop additional widgets. A set of widgets developed by third-party developers is called an add-on. JetElements is one of those Elementor add-ons.

JetElements offers 40+ unique widgets. Some widgets — such as Posts and Button — are already available on the Elementor Pro, but JetEements offers different styles and setting options. For instance, the Posts widget of JetElements comes with an option to display the posts into a carousel, which is great if you want to display your featured articles on your homepage.

Widgets offered by JetElements

JetElements is a great solution if you want to create a unique website with WordPress+Elementor. You can combine the native widgets of Elementor and the widgets of JetElements. As mentioned earlier, some JetElements widgets are basically already available on Elementor. But, JetElements is trying to offer something different by offering different styles and setting options.

As mentioned above, the Posts widget of JetElements allows you to display the posts into a carousel mode. The same setting option is not available on the Posts widget of Elementor.

There are also different settings of the Button widget of both JetElements and Elementor. The Button widget of JetElements allows you to add a different text when you hover your mouse over the button. The same option is not available on the Button widget of Elementor.

Here is the list of the widgets offered by JetElements.

Advanced CarouselHorizontal TimelineSubscribe
Advanced MapImage ComparisonTable
Animated BoxImages LayoutTeam Member
Animated TextInline SVGTestimonials
Audio PlayerInstagramVertical Timeline
BannerPie ChartVideo Player
Bar ChartPortfolioWeather
Logo ShowcasePostsWooCommerce Recent Products
ButtonPrice ListWooCommerce Featured Products
Circle ProgressPricing TableWooCommerce Sale Products
Countdown TimerProgress barWooCommerce Best Sellers
Download ButtonScroll NavigationWooCommerce Top Rated Products
DropbarServicesWooCommerce Product
HeadlineSliderLottie Files

As you can see on the list above, some widgets are basically already available on Elementor, be it the pro version or the free version. Some are not available. Widgets like Instagram (which allows you to add your Instagram feed to WordPress), Team Member, and Circle Progress are not available on Elementor.

Let’s cover the unique JetElements unique widgets that are not available on Elementor.

Instagram

We bet that this is the widget will be loved by social media addicts. This widget allows you to add your Instagram feed to your WordPress site. You can display whether your own feed or feed based on certain tag. You need to integrate your Instagram account with JetElements in order before being able to add your feed (will be covered later).

Team Member

If you have an agency website, you might also want to create a team page that lets your visitors know the people on your agency. Or, you might also want to show your team members on the about page. Today, the common practice found on the about page or the team page of a website is that you show the photos of your team members with brief info about their job position. In most cases, you can also find the social media accounts of each member beneath the photo.

You can basically create an about page with the concept like described above with the Image and Social Icons widgets of Elementor. But with the Team Member widget of JetElements, everything gets even easier. You can even apply a flip effect on each photo, with a variety of pieces of information you can add on the hover.

Circle Progress

The Circle Progress widget is useful if you want to create a portfolio page. You can use it to show your expertise level on a certain field. You can also use it on a web page that is aimed at displaying the progress of something. Elementor already has a similar widget, with the progress is displayed horizontally via a bar. Circle Progress offers you more options to prevent a monotonous.

What else offered by JetElements

In addition to the elements we have covered above, there are several other things offered by JetElements.

Flexibility

If you use the pro version of Elementor, you have about 90 widgets (design elements). Plus the widgets from JetElements, you will have about 124 widgets. Although the widgets have been put together into different categories (you have 7 different categories if you Elementor Pro and JetElements), you might be bothered to see all those elements.

If you want to work with JetElements only, you can close all categories but JetElements. This will make your interface looks simpler and you can work more comfortably and focused. Also, JetElements allows you to temporarily disable the widgets you are not going to use. This is pretty cool because we bet that you don’t need all of the widgets offered by JetElements.

Integrations

JetElements also supports integration to allow you to integrate your website with the popular services you use. Unfortunately, the services supported by JetElements are limited enough. There are only three services you can integrate with JetElements: Google Maps, MailChimp, and Instagram. This is acceptable since JetElements itself is an add-on.

To integrate JetElements with the services mentioned above — as well as disabling the unnecessary widgets — you can go JetPlugins -> JetElements Settings on your WordPress dashboard.

Premade templates and blocks

In Elementor, you can create a web page whether from scratch or from a template. Elementor already provides a lot of templates to save you time in creating a web page. With JetElements, you will have more templates you can choose from. To find the templates from JetElements, you can scroll down on the templates library. You can find them on the bottom side of the Elementor templates library. The templates from JetElements have a JetElements label.

In addition to templates, JetElements also offers a bunch of premade blocks. You can find them by going to the Blocks tab on the templates library. You can use the dropdown menu to find the Blocks from JetElements. All block categories with the “Jet” prefix are coming from JetElements.

JetElements gives you an option to disable the templates and blocks in case you don’t need the.

JetElements Support

Technical support is a crucial thing to consider before you use a tool or service. It allows you to easily get help when in trouble. The team of JetElements offers several ways on how you can get help. From ticket, Twitter DM, WhatsApp, live chat, and Facebook Messenger. If you want a quick response, you can use live chat or WhatsApp on the office hours.

You can also read the documentation page or watch the tutorial videos offered by the JetElements team. Visit this page to get the technical help about the JetElements usage.

The Verdict

JetElements is an Elementor add-on developed by Crocoblock. This add-on offers great widgets to allow you to create beautiful pages with unique elements. There are 34 widgets/design elements offered by JetElements in total, costing $17 (one-time purchase).

One of the things we love about JetElements is the ability to disable the unnecessary widgets temporarily. This is great because it can make your Elementor editor keep simple with fewer distractions so you can keep focused when working. JetElements itself is just one of the add-ons developed by Crocoblock. It comes with more common widgets. There are some add-ons for more specific purposes. We will cover them on the next reviews.

How to Add Your Instagram Feed to WordPress with Elementor

There are lots of ways to add your Instagram feed to your WordPress site. If you have no coding skill, the easiest way to add your Instagram feed to WordPress is by using a plugin. But what plugin? Great question because there are a bunch of plugins that you can use. In this article, we will show you how to add an Instagram feed on a WordPress site using Elementor and Jet Elements.

In case you didn’t know, Elementor is a visual page builder for WordPress that you can use to create a beautiful web page without coding. You can even use Elementor to create a WordPress theme, also without coding.

Elementor is a WordPress plugin that supports add-ons. In Elementor, add-ons are a set of widgets (design elements) developed by third parties. Jet Elements is one of the Elementor add-ons.

Elementor is a freemium plugin. Find the differences between Elementor Free vs Elementor Pro.

How to add an Instagram feed to WordPress using Elementor and Jet Elements

First off, you need to install Elementor on your WordPress. Installing Elementor is extremely easy, just like installing other plugins in WordPress. Go to Plugins -> Add New.

Type “elementor” on the search field and click the Install Now button to install it to your WordPress.

Activate the plugin immediately once installed.

Once Elementor is installed, you can install the Jet Elements add-on. Jet Elements itself is a paid add-on. You can get it on its official website or Template Monster (only $17).

Installing Jet Elements is no different to installing regular WordPress plugins. You can go to Plugins -> Add New. However, since Jet Elements is not available on the plugin repository of WordPress, you can’t find it via the search field. Instead, you can click the Upload Plugin button followed by the Choose File button. Click the Install Now button to install it on your WordPress site.

Activate Jet Elements immediately once installed.

Integrate Jet Elements with your Instagram account

Before being able to add your Instagram feed to WordPress using Jet Elements, you need to integrate Jet Elements with your Instagram account first. To do so, you need an Instagram Access Token. Visit this page for detailed instructions on how to get an Instagram Access Token

Once you got the Instagram Access Token, go to Elementor -> Jet Elements Settings.

On the Jet Elements Settings page, click the Integrations tab and paste your Instagram Access Token to the field on the Access Token section.

Start adding your Instagram feed

Once done integrating Jet Elements with your Instagram account, you can start adding your Instagram feed to your WordPress site. Jet Elements allows you to add your Instagram feed (your account feed) or feed based on a certain hashtag. You can add the Instagram feed using the Instagram widget.

You can add your Instagram feed on any part on your website, as long as the part is created with Elementor. Be it on the homepage, header, footer, sidebar, or a page. In this example, we will demonstrate how to add an Instagram feed on a page.

Create a new page by going to Pages -> Add New. Edit this page with Elementor by clicking the Edit with Elementor button.

Set your page layout by clicking the gear icon on the bottom side of the left panel. Click the dropdown menu on Page Layout to set a page layout. We select Elementor Fill Width in this example.

Click the plus button on the Elementor canvas/editor to add a new section. You can select any structure according to the concept of the page you want to create. You can also create a page from a template by clicking the folder icon.

Drag the Instagram widget from the left panel to the Elementor editor.

Under the Content tab on the left panel, select My Photos from the dropdown menu on What to display. Or, if you want to display Instagram feed based on a hashtag, simply enter your preferred hashtag (without ‘#’ symbol).

Until here, you have successfully added your Instagram feed. To change the feed layout, you can go to the Layout Settings under the Content tab. There are so many setting options available on the left panel, which are not enough to be covered here. You can play around with the left panel until you get satisfied with the result. Once done, click the PUBLISH button to publish your page. Here is the example of the Instagram feed we created.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.