How convoluted. Wish Elementor could make it more simple so that all content can be kept together rather than here there and everywhere. Thanks for the tutorial WPTuts. You've been ace.
Taking your case as an example, would you be able to edit the image and text directly from the accordion, or must you always go into the template to make changes? The reason I ask is if you want to customize the widget sections within the template do you always have to change the original template or create a new one? Shouldn't a template be a framework that you can then edit through the accordion without having to create a new template?
Why did you make a template and not edited it directly? Is it because it's loading faster like that or is it because it's not possible to get to the same level of design without the template? Anyway, I love the tips, thank you.
So, Accordion is already a Basic widget with a limited number of functions. If you are looking for an Advanced Accordion widget, you better install additional addons, like Stratum by MotoPress. This is a free addon with extra Accordion options allowing you to 1) change the accordion type, 2) change interactivity 3) access to more flexible styling options. So in comparison with the basic accordion widget, this one definitely wins. Hopefully, my recommendation is helpful!
Hi! thanks for the video! I just want to know what happens with the SEO when we do this in that way. My understanding is that the page will not display to Google the text of the shortcode unless you turn on the index for elementor library (with Yoast Seo plugin). But.. basically I don't know if the content of the shortcode is going to be easy to track for Google.
This seems to be the million dollar question everyone is answering and most presenters avoid... I understand it can be done with a little java script but no real solution for those who can't code...
@@gardinio That may be so, but I am fairly certain that the PRO version is is 99% cheaper than the cost of hiring a developer to build what I needed. So in my case, I would not consider the PRO version expensiv, I would consider it a bargain.
@@chrismeyers2575 In most cases it's true, a tool that solves exactly your problem is the best option. But, also looks like you are paying to much for a developer. Let me know if you need a cheap solution on PHP, asp.Net c# ;)
That was great. I'm new with wordpress and elementor and this video was very helpfull. I was wondering if there's any way to combine the accordion with the image slider?
Have you been able to put Anywhere Elementor Pro modules into the shortcode then have them display properly on the page. When I tried todo it it only showed the elementor content and slipped the AEP modules. However I think I used a section template rather than a page so much that need to try that.
Is it possible to add a Button inside this advanced Accordions widget? and when I click the button it shows a popup that is created within Elementor ?? I need this kind of functionality in a website I'm currently working on and I cant fiugre it out. Such a shame that Elementor is still not offering nested widgets option! Would make this whole thing much easier
Paul is this STILL the only way to add formatted content inside the accordion? You would think they would have options for drag and drop functionality now.
@@WPTuts Thank you. Also kind of confusing now that the Library is now Templates - I think. Anyway, this accordion could be SO MUCH MORE creative if we were able to place widget inside of a widget. Thanks Paul.
They've updated things a little and the Library is no longer part of the features. It has been replaced with the Templates section. You can find all the relevant information covered in this guide in there. :0)
Thanks for this. I'm trying to integrate portfolio pages using shortcodes and although this works great for the first accordion entry, the shortcode doesn't work for subsequent entries. Have you tested this using multiple shortcodes in the accordion - or is just something in my setup?
I've not tested it in the accordion widget lately, but works perfectly in the tabs widget. So, I can't see why there would be a problem. Would be worth testing on a different site just to check that it isn't a conflict with a theme / plugin.
@@WPTuts Thanks. I'll give it a try with a new page (I had some weird accordion behavior on a different page and fixed it by building from scratch again) and - if that fails - try another site or go for tabs.
@@WPTuts Strange - I've tried with the Tabs widget and get the same (lack of) behaviour. This is with a different them (switched to Hello to see if that made a difference, updated Ocean WP then switched back to it) and no change. Oh well.
Is there a way to set all accordions to be closed upon opening the page? I had this problem before, so I stopped using it for the project. It seemed like the top bar was open already on load-- I'll give it a second look now. Thanks for the great video, much appreciated.
I tried the code and it worked perfectly- no drop down on pg load. Somehow it stopped working, I've tried to reset it with no luck. I used code snippet plug in, placed name in accordian element--> advanced--> CSS Classes. Nothing yet... any ideas? Thank you :)
When I do this and paste the shortcode into my accordion element on the page I am creating it does not let me change the text or the image that I used for creating my template (i.e. that element that shows up via the shortcode). I must be doing something wrong?? I do not think the solution would be to have a different template and shortcode for each accordion with image and text in it?
Great idea! Thanks for the tip, Paul! It would be totally great to be able to show blog posts in there.. but they have no shortcodes, any thoughts on how to achieve that?
HBwebdesign how about using the post widget to pull either single posts (you could use an offset if you wanted to only use 1 post per accordion tab) and then just shortcode the page in using the same technique from this video? That should work..
Well great video. And Ocean WP also have shortcode feature so you can do same thing with that theme without Elementor Pro but yes Pro version is very best:D
With this is there any way to create an Accordion like the Asana one (asana.com/ Process Management) with title, description on the left and an image or animation on the right. I am looking for something like this on elementor but I can't find anything (even premium plugins)
On new versions of Elementor, it will be in 'Templates' rather than ' My Library' and then adding a new one will just be naming, and I saved mine as a 'Section' and it worked great. Hope this helps!
Hands down best video ive seen yet.
I was struggling to add links and buttons into the accordions and this pretty much solved it. Thanks.
I can't find a library section in my Elementor (I have Elementor Pro) - has the name been changed in the meantime?
How convoluted. Wish Elementor could make it more simple so that all content can be kept together rather than here there and everywhere. Thanks for the tutorial WPTuts. You've been ace.
I've been working for hours trying to achieve this but I couldn't. You have saved my life!
THANK YOU SO MUCH!!!! This is exactly what I was looking to do and I was thinking it couldn't be done.
I see... i can use the same principle for more complicated design. Its worth trying! Thanks a lot for the brief yet useful tutorial!!
Taking your case as an example, would you be able to edit the image and text directly from the accordion, or must you always go into the template to make changes? The reason I ask is if you want to customize the widget sections within the template do you always have to change the original template or create a new one? Shouldn't a template be a framework that you can then edit through the accordion without having to create a new template?
I’m using elementor pro but I can’t see a library option. The first one under the settings is custom fonts. Any idea why is that? Thank you 🙏
You made my day....................thank you so much
Super cool, you saved me a hell of a lot of time!!!! Thank you so much for that advice
I have faced the same issue on my eCommerce website. I have solved it by ElementsReady Elementor Addons. I think it can solve your issue as well.
Yep, even after 6 years the video is still valid.
Why did you make a template and not edited it directly? Is it because it's loading faster like that or is it because it's not possible to get to the same level of design without the template? Anyway, I love the tips, thank you.
aside from manually coding, is there a way to create an accordion with custom post type as its content?
So, Accordion is already a Basic widget with a limited number of functions. If you are looking for an Advanced Accordion widget, you better install additional addons, like Stratum by MotoPress. This is a free addon with extra Accordion options allowing you to 1) change the accordion type, 2) change interactivity 3) access to more flexible styling options. So in comparison with the basic accordion widget, this one definitely wins. Hopefully, my recommendation is helpful!
thank you!
Hi! thanks for the video! I just want to know what happens with the SEO when we do this in that way. My understanding is that the page will not display to Google the text of the shortcode unless you turn on the index for elementor library (with Yoast Seo plugin). But.. basically I don't know if the content of the shortcode is going to be easy to track for Google.
that is exact thing I need right now! THANK YOU!
How to use link to open one of the accordion? If i want user to click a url and open 2nd accordion tab.
This seems to be the million dollar question everyone is answering and most presenters avoid... I understand it can be done with a little java script but no real solution for those who can't code...
Can the shortcode be used to display dynamic content?
this doesnt work for me. i will select two templates, one for each accordion section, but they both open up the same template... Any help at all?
Thanks for this. You just saved me hiring a developer.
But didn't save you from an expensive PRO version annual fee...
@@gardinio That may be so, but I am fairly certain that the PRO version is is 99% cheaper than the cost of hiring a developer to build what I needed. So in my case, I would not consider the PRO version expensiv, I would consider it a bargain.
@@chrismeyers2575 In most cases it's true, a tool that solves exactly your problem is the best option. But, also looks like you are paying to much for a developer. Let me know if you need a cheap solution on PHP, asp.Net c# ;)
Exactly what I needed, thanks!
Thank you for the tip. How do we keep the accordion as closed by default?
I don't believe you can with the stock Elementor accordion.
Wow! Thanks for the tip, it was just what I needed! Simple and functional. If I could give 100 more likes
Great video and geat simple example how powerful Elementor can be using templates.
I want to put in this accordion an relation field (ACF). Is it possible?
Excellent. very creative and new idea. Thanks Paul
Muzaffar Siddiqui glad you found it useful 👍
Can I have a picture or video instead of the plus sign? So when I click on the video or picture the square shows up just like in the video?
Amazing thanks for saving me a few hours of frustration!
Thanks man....it solved my problem....!!
Awesome, glad to hear it helped. 😁👍
Can you have different icons for each section?
Thanks my Friend!!!!!
That was great. I'm new with wordpress and elementor and this video was very helpfull. I was wondering if there's any way to combine the accordion with the image slider?
That's a cool tip. Thanks for making the video. I'm working on a website right now that I think I could use this for
Awesome Tutorial
Thank you! But why is it so complicated?? Why it is just no possible to add directly elements in?
This just saved my life! Thank you!
Have you been able to put Anywhere Elementor Pro modules into the shortcode then have them display properly on the page. When I tried todo it it only showed the elementor content and slipped the AEP modules. However I think I used a section template rather than a page so much that need to try that.
This tut save me a website!
Love it 🤘😁
Is it possible to add a Button inside this advanced Accordions widget? and when I click the button it shows a popup that is created within Elementor ?? I need this kind of functionality in a website I'm currently working on and I cant fiugre it out. Such a shame that Elementor is still not offering nested widgets option! Would make this whole thing much easier
and to make the icons on the right side and text on left?
Paul is this STILL the only way to add formatted content inside the accordion? You would think they would have options for drag and drop functionality now.
I'm 99% sure ir still is the case. I'm not in front of the PC at the moment to confirm with 100% certainty.
@@WPTuts Thank you. Also kind of confusing now that the Library is now Templates - I think. Anyway, this accordion could be SO MUCH MORE creative if we were able to place widget inside of a widget. Thanks Paul.
Because my Title font size is 41px - my icon is huge - how can I reduce the size of the Accordion icon only?
my elementor doesnt have the my library tab... what can i do?
They've updated things a little and the Library is no longer part of the features. It has been replaced with the Templates section. You can find all the relevant information covered in this guide in there. :0)
@@WPTuts thank you so much for your help
@@kly0808 not a problem :0)
This works on my site with free Elementor and free version of Ocean Wp.
Thanks for this. I'm trying to integrate portfolio pages using shortcodes and although this works great for the first accordion entry, the shortcode doesn't work for subsequent entries. Have you tested this using multiple shortcodes in the accordion - or is just something in my setup?
I've not tested it in the accordion widget lately, but works perfectly in the tabs widget. So, I can't see why there would be a problem. Would be worth testing on a different site just to check that it isn't a conflict with a theme / plugin.
@@WPTuts Thanks. I'll give it a try with a new page (I had some weird accordion behavior on a different page and fixed it by building from scratch again) and - if that fails - try another site or go for tabs.
@@WPTuts Strange - I've tried with the Tabs widget and get the same (lack of) behaviour. This is with a different them (switched to Hello to see if that made a difference, updated Ocean WP then switched back to it) and no change. Oh well.
Amazing!
Is there a way to set all accordions to be closed upon opening the page?
I had this problem before, so I stopped using it for the project.
It seemed like the top bar was open already on load-- I'll give it a second look now.
Thanks for the great video, much appreciated.
add to code snippets plugin
function elementor_accordion_title() { ?>
jQuery(document).ready(function() {
jQuery( '.elementor-accordion-title' ).removeClass( 'active' );
jQuery( '.elementor-accordion-content' ).css( 'display', 'none' );
});
Wow, thanks for the response. I will give it a try- couldn't do it without you, have a great weekend!
Thank you, where should I add the code?
Download "code snippets plugin"
I tried the code and it worked perfectly- no drop down on pg load. Somehow it stopped working, I've tried to reset it with no luck. I used code snippet plug in, placed name in accordian element--> advanced--> CSS Classes. Nothing yet... any ideas? Thank you :)
thank you for saving me alot of time!
Super Cool Thank You
Great video/ideia to manipulate Elementor. Note: "Elementor > My LIbrary" has been removed from Elementor.
i just noticed it been removed, any idea how to do this tutorial now?
thanks
Excelente, me sirvió de mucho, gracias.
Thaaanksss!!!
When I do this and paste the shortcode into my accordion element on the page I am creating it does not let me change the text or the image that I used for creating my template (i.e. that element that shows up via the shortcode). I must be doing something wrong?? I do not think the solution would be to have a different template and shortcode for each accordion with image and text in it?
Yes - I think it does... which sucks. I'm trying to find an answer so that those elements are editable from the page you're dropping them on.
Great idea! Thanks for the tip, Paul! It would be totally great to be able to show blog posts in there.. but they have no shortcodes, any thoughts on how to achieve that?
HBwebdesign how about using the post widget to pull either single posts (you could use an offset if you wanted to only use 1 post per accordion tab) and then just shortcode the page in using the same technique from this video?
That should work..
Sounds good, gonna give that a try! Thanks for the quick reply
HBwebdesign no problem. Let me know if it works out 👍
Not even sure why I wanted this, but it works :) and now I see some possibilities. Thank you, Paul!
HBwebdesign awesome, good to hear it works. Opens up some creative possibilities 🤘
Soooooooo great 🙂
THX
THANKYOU!!!
Awesome Content.
How i can creat sub topics in a accordion?
❤️❤️❤️❤️❤️ Thank you!
My pleasure 👍
Well great video. And Ocean WP also have shortcode feature so you can do same thing with that theme without Elementor Pro but yes Pro version is very best:D
Thank you!
With this is there any way to create an Accordion like the Asana one (asana.com/ Process Management) with title, description on the left and an image or animation on the right. I am looking for something like this on elementor but I can't find anything (even premium plugins)
NICE! yet Elementor should bring maximum design functionality to accordions with no short codes
life saver
perfect
Tidy!
I love you
nice!
amz.!!
I have attempted to do this but cant find "my library" on my site I do have elementor pro ?
On new versions of Elementor, it will be in 'Templates' rather than ' My Library' and then adding a new one will just be naming, and I saved mine as a 'Section' and it worked great. Hope this helps!