- Intro
- How to Add Tabs and Accordions on WordPress with Elementor
- Review of the 10 Best Elementor Themes
- Conclusion
Intro
No one would deny the increased popularity of website builders today. After all, they allow people with no coding experience to easily create their own unique website.
Elementor is a rather new and very effective plugin for your website building needs. Once you are finished with the layout structure, you can start adding widgets. Widgets are the building blocks of your design. They can be easily added with drag-and-drop from the left-hand panel to the desired section and column. Today we will talk about how to add Tabs and Accordions to your WordPress website. Elementor gives us a bunch of options to edit each widget. After adding a widget, you can change its content, style, indentation, and alignment.
Make yourself comfortable. Here we go!
If you are a web designer, you may usually need an extended library of web elements to run smoothly. Fortunately, we have a great offer you will not be able to pass by. This is a brand new subscription service called ONE. It will cost you much less than if you purchase several templates separately. A wide range of products in the number of 8,500 costs $19/month and is not limited for use.
Inside the package, you’ll find premium plugins, top WordPress themes, eCommerce templates, multiple graphics, presentation templates, etc. If you are a MonsterPost reader, you also have a chance to save 5% on a subscription. All you have to do is just apply promo code BecomeThe1 and proceed to checkout.
How to Add Tabs and Accordions on WordPress with Elementor
Ok, it is high time to check how to add Tabs and Accordions to your WordPress website with the help of Elementor page builder. Besides Elementor, you will need the JetTabs plugin. As an option, you can get it inside the Monstroid2 WordPress theme absolutely free.
To cope with this task, you will need one widget for Tabs, and another widget for Accordions.
Let’s start with Tabs. The Tabs widget allows you to divide your content into tabs.
- Search for the Tabs widget. The Tabs and Accordions widgets can be located inside the JetTabs plugin. Drag-and-drop it onto the center section.
- The content section shows the list of items. Every single item defines what you have inside your tab. In order to display some information inside a tab, you will need to add a template and then assign this template to a tab. *WordPress dashboard allows you to choose Elementor > My templates > then create a template that you want to display inside of your tab.
- The first setting you can see is ‘Active’. If you toggle this option to Yes, this means that this particular item will be opened right away. Then, you can add an Image to be displayed right next to the Title. Also, you can change a Label to the one you want to see there. These settings can be adjusted for every single Tab.
- Go to the Settings tab. Here you can choose an Animation effect. Tabs Event allows you to choose the ‘Hover’ option so you can navigate through your tabs just by hovering over them. Auto Switch makes your tabs change automatically. Also, you can set up Auto Switch Delay there.
- Navigate to the Style tab > General section to choose the position of your Tabs (top, left, right).
- The Tabs Control section allows you to set up Tabs Alignment, Background Type, etc.
- The Tabs Control Items section allows you to set up an Image, Icon, or Label (it depends on what you have chosen). You can adjust Image Width, Icon Position, add Image Margin. State Styles helps you choose the state; either Normal, Hover, or Active.
- You can change the look and adjust settings for the container in the Tabs Content section.
As for Accordions, you need to search for a classic widget Accordion. The Accordion widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. The settings look slightly different but the process is similar.
- Create templates and assign them to Toggles. You can choose two Icons - one of them is used when your Toggle is closed, and the other one when your Toggle is opened and active.
- If you set the Active option to Yes, this means that this particular toggle will be opened right away.
- The label setting allows you to change your label.
- An activated Collapsible option means that a user will not be able to open more than one toggle at a time.
- The Style tab offers similar settings as we discussed above.
Review of the 10 Best Elementor Themes
To save time, I have collected the 10 best Elementor Themes designed by TemplateMonster. Check them out and choose the best one to boost your business.
JohnnyGo
This is a great example of an all-in-one theme for all types of businesses. Are you curious about what is inside? Here you go: you will get 15+ amazing demos, a WooCommerce module to sell online, 24 custom pages, 5 stunning blog layouts, and much more. Do not bother to learn coding and design; every detail is customizable with just a few clicks. Invest in your future with JohnnyGo, the theme with incredible functionality and an efficient UI.
Imagity
Looking for a top-notch business website? You are at the right place. Enjoy a great variety of free Elementor widgets included. With Elementor, creating a website is easy and creative. Don’t worry if you do not have any programming skills. Nowadays they are not necessary to create a modern website. Enjoy 100% responsive design and rich functionality. In case any issues appear, you are always welcome to contact 24/7 support.
Monstroid2
You will definitely be impressed with Monstroid2, the multipurpose Elementor WordPress theme. Extend your customization opportunities with the world’s most popular Elementor page builder. Be assured you will get lifetime updates and round-the-clock support. Dreaming about an online store? Not a problem with the WooCommerce module implemented into the theme. Check out a live demo to evaluate all the features and benefits.
EasyJet
EasyJet is a multi-functional WordPress theme powered by Elementor. Now you have the opportunity to enjoy real-time editing without having any programming skills. Nine home page layouts to fit any industry are included. This theme also comes with JetElements add-on for Elementor. This provides you with additional content blocks to express your creativity and produce interesting content with a variety of boxes, animated text, sliders, etc.
ExperAuto
ExperAuto is an auto repair services fully responsive WordPress theme. With this theme, it will be easy to set up different layouts with multiple pages and adjust the elements to make your website look really unique and professional. You will have numerous customization options to create a web resource that fits your branding needs. Additionally, its satisfied clients are happy with the 24/7 friendly and reliable customer support and detailed technical documentation. The ExperAuto is your one-stop solution for all your auto service website needs.
Quidin
Quidin is a fully responsive WordPress theme ideal for charities. If you want your charity project to have a professional and good-looking website, you should definitely try this theme powered by Elementor. Its user-friendly design is easily customizable. The most important feature of this theme is Elementor page builder. With this plugin, you can express your creativity and make your own page layouts if the ones included do not work for you. You can easily launch a blog about your charity activities with just a few clicks.
KiddiCare
KiddiCare is a pediatric clinic WordPress theme. The theme is extremely easy to use, so there are no programming skills required. The drag-and-drop interface simplifies the process of editing the images and elements of the website. The 100% responsive design ensures good quality of the website on any device. The KiddiCare theme offers a fairly wide range of features. The color scheme and background are customizable, Google Fonts are supported, and there are a number of built-in widgets and plugins.
Aromacafe
Aromacafe is a coffee shop Elementor WordPress theme to create an elegant top-notch coffee website. Here you have a lot of freedom with customization if you decide to adapt it specifically to your needs. Blogs, restaurants, and personal portfolio are just a few ideas for this WordPress theme. In addition, the theme is optimized for SEO and mobile platforms, which will help you to increase traffic to your site. Aromacafe is a worthy theme to try because of its simplicity, easy customization, and nice appearance.
Forceair
Forceair is an example of a fast, simple, and user-friendly air conditioner services WordPress theme. It is a great option for starting your air conditioner business with a fully-functional and effective website. A Booked Appointment plugin makes it possible for customers to make an appointment right on your website. With the theme, all the interactions with your clients can be easily realized in a blog form. The Forceair theme offers many useful support options and simple design tools. Beginners and advanced developers alike can successfully enjoy the ease of use and its flexibility.
Pixate
Pixate is a great example of a movie studio WordPress theme. Its 100% responsive design allows your visitors to browse the website on any gadget with any screen size. Every detail of the theme can be customized to your liking. The theme is good for all types of web studios. Do not miss the special giveaways which go along with the theme - free images, Jet Elements, and Booked Appointment plugins are included. Enjoy a huge variety of well-designed models and elements for your convenient website customization.
Conclusion
Elementor is one of the most interesting and efficient free plugins for website building. The widgets, which are included in Elementor, provide pretty basic functionality but they still cover the customization needs of most people. Choose the best Elementor theme for your project and enjoy playing with its amazing widgets. I hope my tutorial was useful for you, and now you are able to add Tabs and Accordions to your web resource. Create your stunning new content with just a few clicks!
Top 10 Elementor Themes
| Template Name | Theme Provider | Template Category | Price |
| JohnnyGo - Multipurpose Home Services WordPress Theme | ZEMEZjet | Home Remodeling Templates | $75 |
| Imagity - Creative Minimal Elementor WordPress Theme | RockThemes | Design & Photography | $75 |
| Monstroid2 - Multipurpose Modular Elementor WordPress Theme | ZEMEZjet | Construction Company Templates | $75 |
| EasyJet - Multipurpose WordPress Theme | ZEMEZ | Construction Company Templates | $75 |
| EXPER auto - Auto Repair Services Fully Responsive WordPress Theme | ZEMEZ | Car Repair Templates | $75 |
| Quidin - Charity Fully Responsive WordPress Theme | ZEMEZ | Charity Templates | $75 |
| KiddiCare - Pediatric Clinic WordPress Theme | ZEMEZ | Pediatrician Templates | $75 |
| Aromacafe - Coffee Shop Elementor WordPress Theme | ZEMEZ | Coffee Shop Templates | $75 |
| Forceair - Air Conditioner Services WordPress Theme | ZEMEZ | Home Remodeling Templates | $75 |
| Pixate - Movie Studio WordPress Theme | ZEMEZ | Video Lab Templates | $75 |
Read Also
Elementor From A to Z: Sheer Selection Of “How To” Tutorials
How To Create Animated Text With Elementor Builder
How To Create And Shape Up Your Portfolio With Elementor Builder
How To Add A Background Video To Your Pages With Elementor