Show & Hide Buttons in Loop Grid with ACF Trick - Advanced Custom Field - Elementor Pro Wordpress
HTML-код
- Опубликовано: 9 окт 2023
- Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
This is how to Show & Hide Buttons in Loop Grid with ACF Trick - Advanced Custom Field - Elementor Pro Wordpress
CSS Code:
.No {display: none;}
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your RUclips Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk 
Хобби
The power of dynamic content... AND ACF... AND Elementor!
I can honestly say I've never noticed a dynamic icon next to the CSS fields in Elementor and I definitely didn't know selector options created in ACF could be used as CSS classes in that way.
Another game changing moment, Imran. Thank you!
Very nice and clever way to do that 👏
that's freaking genius. I used js but this is better. Thanks!
You're welcome!
Thank you.
Clever idea mate! Thanks
Genius
Got it. I will work with it 😁
Smart
Smart :)
How can you do a LOOP with 13 columns? I'm trying to do a calendar which shows up an icon for each month if it has been clicked on the backend single post. Thank you.
That would need some planning.
I can only discuss more as part of a 1-2-1 - scroll down to see: learn.websquadron.co.uk/
Hi! I have some download buttons while using ACF for each Artist. Each button allows the user to download different things. The thing is that there some Artists that don't have material to download on one of the buttons so I would like to display:none those buttons that have nothing to download. I follow your steps but when I reach to Classes CSS and try to choose the ACF i need it doesn't appears. Iam using an ACF URL Field. It may be a problem because I am using ACF free version?
Should still work with ACF.
What was the field type for the field that you try to pull into Class? It needs to be a text field.
This is very nice. Alternatively, you could accomplish this by adding CSS to the button that says "If the the Href is empty, display none". That would allow for one less thing the client needs to click on.
Have you got that code because I found that you need JS as well
@@websquadron I did it with ACF and social icons widget (not buttons), but I assume you could do it with this (might need to modify the selector) `selector:not([href]) {
display:none;}`
I just did this recently and yes that code works:
.elementor-button:not([href]) {
display: none;
}
Interesting take. Think I would rather use the dynamic conditions plugin and set the condition to if the URL field is empty don't show the button. That way the empty button code wouldn't be outputted to the template, rather than it just being hidden with CSS
This is what I do. Cool to see an approach that doesn’t use an additional plugin though
Is it possible to hide an empty field with CSS in a similar way to in the video? I agree though, using some functionality from a plugin to hide a field that is empty before redering is definitely better. Which plugin is best for doing this?
Can this be done in Bricks page builder?
Yes as it's just using ACF.
@@websquadron Can it be done with JetEngine?
and let's say we have a text field? Do you have solution?