Image Accordion on WordPress with Elementor
- Intro
- How to Use Image Accordion Widget in Elementor
- Review of the 10 Best Elementor Themes
- Conclusion
Intro
Today, we will talk about Image Accordion, an essential add-on for Elementor. I bet you are already familiar with Elementor as being the most convenient, fast, and advanced website builder. More than 900,000 users enjoy an easy way to design WordPress websites. You can create beautiful sites with no programming or design skills. You don’t have to wait for the results - you will be able to design on the frontend with real-time edits.
Image Accordion allows you to display images in a beautiful accordion effect. From the tutorial below you’ll learn how to create eye-catching content and attractive Image Accordion widgets. You will master your skills on how to style the container, the image, and caption text, as well as how to control the animation speed and other features.
Enjoy learning and be ready to create some really stunning effects!
How to Use the Image Accordion Widget in Elementor
Ok, I will be showing you how you can create an Image Accordion with the help of Elementor page builder. To complete this task, you will need a JetTabs plugin. You can get this plugin absolutely free inside Monstroid2 WordPress themes.
So, let’s get started:
- Search for the Image Accordion in the elements panel on the left, and drag-and-drop it onto the center section. The default module layout shows the items (your images). Opening an item will reveal that you can get not only the image, but the title and description, and the button text.
- Go through all the items and fill them up with images so this accordion looks more attractive. Now, you are getting your Image Accordion, a basic style preset, which can be totally changed in the Style tab.
- Navigate to the Settings section. The first one that you 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 your Image, add the Title (which will be visible on hover), add a Description, define the text for the Button, and choose the Link Options.
- In the Settings tab, you can choose Orientation which can be either vertical or horizontal. Then, you should choose the size of the Active Item so you can make it larger or smaller. Next, you see Animation duration and choose the type of Easing which means simply how the speed will change from the end of animation to the start of the animation. It’s pretty simple; you can play around with that and see the results as you make changes.
- Go to the Style tab. Here you will see the Height adjustment. Please note, it is for the height of the entire container. Then, you can change the Background Type, Border Type, and Border Radius - again, not for the images but for the entire module. You can enter a setting around 10, and you should be able to see the rounded corners there.
- The item block shows the Item Gutter setting, Background Type, Border Radius, and Box Shadow, and these settings are for the individual item in this case. So, you can play around with the settings, choose different colors, and see how the result changes.
- Next, you will be able to add specific settings for the Title, Description, and Button blocks, such as Color, Typography, Padding, Margins, and Alignment.
- The last tab is Content Order and Alignment, where you can easily change the order of the content elements such as Title, Description, and Button.
After following the steps above you will be able to create truly breathtaking Image Accordion widgets. Hopefully, it was helpful!
Elementor Page Builder has become almost irreplaceable when it comes to building a website. You may get it either as a separate plugin or integrated into the website template. Or, you may choose ONE and access to a full range of web products with no limits. This is a subscription service which has recently launched by TM developers. Supplied with 8,500+ items it gives you an opportunity to use various elements for your projects.
The cost of the service is $19 per month. It is less than if you purchase a separate template. Besides, you may save even more on the subscription. In case you are a regular MonsterPost reader, use promo code BecomeThe1 and get a 5% discount.
Review of the 10 Best Elementor Themes
Recently, Elementor has gained huge popularity among developers and users due to its excellent functionality and usability.
TemplateMonster has presented their best Elementor themes for dedicated Elementor fans.
Here you go!
Edem
This is a sophisticated solution for the beauty salon industry. The theme is full of beauty, relaxation, and inspiration. A stylish and fresh design is 100% adaptive to all types of devices. The multilingual feature opens the possibility to attract foreign clients and communicate with them through the website. The theme is very easy to install and set up. Flexible settings allow you to change the site in different manners depending on your desire and business requirements.
BuildWall
BuildWall is a construction company multipurpose WordPress theme. This is a great option for all types of construction businesses. Six beautiful skins with various designs and elements are available. No coding skills are needed; you will be able to customize each and every element on your own. The included plugins make the customization process easy and effective. The WooCommerce package makes it possible to create an online store on the basis of your website. The theme allows you to present your services, introduce the staff, and much more.
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.
CityLog
CityLog is a construction individual entrepreneur WordPress theme. The theme is adaptive to any mobile devices so the website can be browsed readily from any gadget and any size screen. Live Customizer is included with the theme. This is very convenient and easy-to-use to set up your website information. CityLog is SEO-friendly so you will get more traffic to your site for sure. Install this stylish and fully customizable theme to boost your business to the next level.
Primrose
Primrose is a multi-purpose WordPress theme powered by Elementor. It is fast and functional - full of the tools, elements, and homepages you need to occupy yourself with the design process. As a special bonus, you are getting 15 high-quality images to fit various occasions. You get unlimited layouts, fonts, icons, and colors - everything can be edited to fit your business needs. The drag-and-drop interface makes the customization process as simple as possible. Primrose is 100% responsive and optimized for every mobile device.
Jardinier
Jardinier is a beautiful example of a landscaping services WordPress theme. Increase your sales with incredible functionality and an efficient user interface. This attractive theme allows you to showcase your services, arrange appointments, run a blog, sell with WooCommerce, and show off testimonials. It’s no problem if you have a lack of coding experience; it is not needed to successfully customize the theme. You will be amazed by the endless editing possibilities and stylish design. This theme is made to impress. Check it out right now!
Jack Baker
Jack Baker is an elegant writer responsive WordPress theme. Now you can create a stylish interface with a great choice of widgets and Elementor modules. Discover a wide range of plugins to make your website more functional and effective. More user-friendly, no coding, flexible and easy-to-use tools, and builders will facilitate the process of customization. Time is money! Don’t miss your chance to promote yourself as a stylish new author using our Jack Baker WordPress theme.
BeClinic
BeClinic is a multipurpose medical topic WordPress theme powered by Elementor. It belongs to the category of the Business & Services WordPress themes. It is another example of a theme which is extremely easy to use and customize. It comes with an elegant and ultra-responsive design and cross-browser compatibility. Your visitors can fully interact with all elements of the site and you can be sure that everything will run smoothly and effectively. Limitless functionality is offered to empower your website.
Invenio
This is an awesome example of a classy financial advisor WordPress theme. If you are looking for a great consulting website, you have just found it. The theme includes a nice collection of eye-catching pages for all different topics. Invenio offers ready-made home page designs along with the ability to fully customize any element. In addition, you can use the drag-and-drop editor to customize the site to your liking. The theme can be used for any purpose. It is ideal for landing pages, business sites, and any other corporate projects.
Presentor
Create your own Presentor presentation website with this WordPress theme powered by Elementor. It is packed with a variety of tools and plugins to set up your layout and content. With Live Customizer you can easily adjust the various blocks, objects, and elements. Do you want to launch an e-commerce site? No problem! The WooCommerce plugin comes with the theme so you can operate an online store. The theme is optimized for search engine structure that will help your site obtain a top position in the search results.
Conclusion
Now you can see why Elementor itself and Elementor WordPress themes are so popular. It is all about convenience and simplicity. It provides the ability to make awesome effects with one click without any knowledge of complex programming languages. Whether you have a business or personal website, you will be able to turn it into a stunning and effective web resource. Save your money and energy, and build a unique website with Elementor!
Top 10 Elementor Themes
| Template Name | Theme Provider | Template Category | Price |
| Edem - Sophisticated Beauty Salon WordPress Theme | ZEMEZ | Salon | $75 |
| Construction Company Templates | ZEMEZjet | Construction Company Templates | $69 |
| EasyJet - Multipurpose WordPress Theme | ZEMEZ | Construction Company Templates | $75 |
| Citylog - Construction Responsive WordPress Theme | ZEMEZ | Construction Company Templates | $75 |
| Primrose - Multipurpose WordPress Theme | ZEMEZ | Photographer Portfolio Templates | $75 |
| Jardinier - Landscaping Services WordPress Theme | ZEMEZ | Landscape Design Templates | $75 |
| Jack Baker - Writer Responsive WordPress Theme | ZEMEZ | Publishing Company Templates | $75 |
| BeClinic - Multipurpose Medical WordPress Theme | ZEMEZjet | Psychologist Templates | $75 |
| Invenio - Classy Financial Advisor WordPress Theme | ZEMEZ | Financial Advisor Templates | $75 |
| Presentor - Business WordPress Theme | ZEMEZ | Consulting Templates | $75 |
Read Also
How to Set Elementor Template to Your WordPress Theme
How to Set Up Blog Post Lists with Elementor Page Builder
How To Add A Background Video To Your Pages With Elementor
Elementor From A to Z: Sheer Selection Of “How To” Tutorials
Don’t miss out these all-time favourites
- The best hosting for a WordPress website. Tap our link to get the best price on the market with 82% off. If HostPapa didn’t impress you check out other alternatives.
- Monthly SEO service and On-Page SEO - to increase your website organic traffic.
- Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
- ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
A freelance copywriter, who has a great interest in writing, content-related stuff, traveling, and photography. She is always mastering her writing skills to synthesize the essence of any business ideology in an easy-to-use nugget of words to get people to feel, think, or respond. Instagram.
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.