I found a much better way to use Elementor's dynamic color feature
HTML-код
- Опубликовано: 24 авг 2024
- I'm pretty proud to show you this guys. It's a new way to use the dynamic color feature inside of Elementor to create a multi color menu / header within the same template. No more messing around with conditions per page. Just 1 template for the whole website with a default color and an adjustable color. I hope you like the video!
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
Using ACF it's simple to use a Check Box of colors where the choices might be:
#ffffff : White
#000000 : Black
#ff0000 : Red
You can also turn on "Other" to set custom color. It works great and thanks for the video! Keep up the great work!
I agree. I thought so.
that will aslo prefent the client from forgeting the #
ty
I'm soooo glad that I'm not the only person on earth who get's excited whenever elementor shows a new feature. I love this video! You're doing an amazing job with this channel. Thank you so much!!
Rino, that is an awesome use for this new Elementor functionality. I used your video on transparent headers and will be updating that website to use your suggestions. Great job!
I really couldn't imagine a valid reason for having dynamic colours in Elementor - but now I do! Good idea and excellent tutorial.
I had the exact same thing before I got this insight. Awesome to hear!
Excellent solution! Thank you, Rino! Edit: I've just watched it a couple more times and I had missed how you worked out the trick! How could I miss it, you were so happy with it. Thank you for sharing such a plum with us!
Great tutorial as usual! If your logo is an svg-file you can add it as an "inline SVG" in elementor (instead of image) and then set its color with dynamic colors directly
Rino, you are by far the best tutor and master of all things Elementor - please keep these helpful videos coming!
I will! Thanks a ton 🙏🏻
Very nice and clever use of dynamic Colors anc ACF. Here is a challenge for you. Design a sticky transparent header with the menu background changing color when you scroll. This will be useful to keep the header readable.
That’s an awesome idea. Thanks 🙏🏻
@@rinodeboer Heb je hier toevallig een oplossing voor gevonden? Ben hard op zoek!
Your excitement about this new feature is very contagious. The video is very useful. Thank you very much! - From an Elementor newbie.
One of the best tutorials for something very useful. Well done!!
i love his easy explanation about the topic ...stay blessed
Wow. This is wonderful. Great for posts with different categories without creating a new post template. In short, brilliant. Thanks so much.
Thank you very much! It will save me me soo much time now that almost every client wants a transparent header. Elementor should pay you man!
Rino, thank you!! I've been missing one little detail with ACF and you just connected the dots for me. I love your work and I REALLY love your videos!I'll definitely be adding this trick in my blueprint stack.
Awesome, thank you!
Thanks for the tutorial. Would it be possible to use this sort of set-up where the colour of the logo and text changes as you scroll down the page to respond to different background colours?
Very cool... thank you for your sharing...
Really nice! Didn't even know that that's the way to put AFC at normal pages. Love this one! Thnx Rino!
This was smart, Rino! :)
I like the way u teach
Plz make video on contact form 7 "how to insert mobile number"
2:20 wow that website is so beautiful! 😍
Haha, yeah! I love it too, hahah
@Lyle Oakley Man... That is a crime, isn't?
Amazing Idea!!! I taught also in using it with the categorie of a post. So that every post page has color matching accent with the category it belongs to
I did the same solution by writing some jQuery codes, it was a fantastic experience to solve the problem.
I can’t believe I haven’t used the ACF before and what a great way to utilize!
Thanks, Rino! What an excellent yet simple tutorial.
I like you excitement in this video haha, you can tell you’re super happy about finding this out. Thanks for sharing the neat little trick with us!
Really awesome!
I have been looking for various ways for this, but it seems now my problem is solved.
Thank u SO much RIno For the such beautiful content u have made for us!
My pleasure!
I am very happy to have met you, and I have learned but continue to learn elementor
Thanks for this video, I got a question... what about yif you also want to make the header sticky and the background of the sticky header is the same as the menu color header.
I always enjoy watching your videos, please keep up the great work!
This is awesome! Got recommended to view your channel by the Elementor Community of FB. Not disappointed :)
This is a game changer. Thank you so much for this tutorial!! Would also love to see one for off canvas menus as they’re also becoming quite popular. Again, great job!
Enjoying this channel - very clear & great tips (sometimes a bit fast but that's better than too slow!)
Great to hear!
I have an upgrade to your idea. Instead of adding a color picker field, add a True False field, change the label names to Dark mode and Light mode and add a value (the color hex) to each one of them. In elementor use this field in the dynamic color picker.
This a great tutorial!! I look forward to seeing more!
I like your implementation of the new dynamic color feature.
Dude, you are a genius. Now you only have to figure it out how to use de Price List widget dynamics capabilities with Woocommerce products. I don´t know what the Elementor team es waiting for!!!
Very nice implementation. Thanks for the tip. Will definitely use it
Brilliant
This is so clever. I'm binge watching your videos at the moment, I sincerly thank you for all your quality and instructionnal content. Hats off !
What a great feature… thank you for taking the time to show us.. 👍
You deserve a million subscribers, my man! 👍🏻
That’s the biggest compliment I’ve heard this month. Thank you 🙏🏻
Could we make a header dynamic color for each section in one page ?
This is really a cool method to dynamically changing logos and all on different pages. But I've one question, is it possible to change text color of a button on same page based on section's background color. (For ex. - if section has white background - Button will be black and vice versa.
Hey Rino! This is wonderfull, I am currently working on a website for which I have three different headers and this idea is perfect! I appreciate all your work and educational content :)
The only problem with your solution: the client is still choosing any color they want. Instead of using a color picker field, use a select field and pre-define the color options. You can even use the elememtor global variables instead of hex codes, so that changing the global colors in theme styles also changes the menu colors at the same time.
In fact, you can define a color scheme for each page: create a variable called 'dark' or light' or 'blue' or whatever color and assign this to the page. Then your elements can reference it and inherit the color scheme. Changing the scheme for the page is as easy as changing one word.
I Have just found this Amazing channel ...Great content Brother ...Keep up the Good work
Lots of Love
Regarding your logo, you could use a SVG file ( inline SVG) instead of an image file, here you have the option to change the color of the logo and on the background, so it must be possible to use the same color variable you have set up and yes you are not the only one who breaks the skull with these small tasks but who fills so much, really cool idea ...
Great idea. I think if I ever use this method though, instead of a colour picker I'd create a drop-down with a pre-defined list of colours to choose from.
great tutorial! This is also possible now with the new Kadence theme without creating a header and footer in Elementor.
Thank you so much.
Thanks! Very helpful video!
What a quick answer. Thank you very much. I just read polylang, but I can't get out of it without help. So I would really appreciate it if there would be a video of that. regards , Jos
Hey Rino, I’m loving your videos. Could you tell me how you add a logo to the admin sidebar? I think it’s a really nice touch for clients. Also, could I suggest a video for you to create? I think it would be great to know what your base setup is for a new site, i.e. what theme and plugins you start with before each build.
Very cool tips you present here!
Congrats! Awesome video!
Awesome tutorial as always :)
Nice one. Thanks!
Awesome as always.
fantastic, I just asked you this exact question on another of your video comment. Great Job !!!
excellent tutorial.
This is as excellent as all of your tutorials, Rino but when, Oh when, are you going to launch your elementor pro container course?
In a few days the pre sale will start!
I will upload a separate video about it!
best tip i've ever seen ... i'm impressed
You can make the logo an svg with that uses outlines and has a fill colour of #000000 then you can change the colour of the logo within elementor aswel
can you create another tutorial if the header is sticky and the default background was transparent and then change color to black when the header scrolled.
Well done! Your feed is very useful.
Amazing work! Thanks very handy! 👏
Great idea!
Really awesome. Looking forward to more Elementor tips. What about custom post types loops and single templates?
Thank you! You can tell ACF on what kind of pages you want the option to appear. So that means that you can also do this for blogposts or any other CPT. Hope this answered your question!
@@rinodeboer I meant creating an Archive page for a CPT with elementary and design how this CPT should be shown. Or another example, how to show a list of CPT by a current category... Do you know what I mean?
Thank you so much for giving us this is very amazing video :)
Good stuff mate!
Great tutorial, thank you.
Hi
How to create that custom fields for pages and posts?
I try set pages and posts but where I got to select custom field appear 2 options pages and posts
If I use posts not work on pages
How to create custom shaped (Bus design) transparent background POPUP in Wordpress?
Can't you just create a select field and pre-define what the hex code is on the back end so that the end-user doesn't have to make the change to the different hex codes and prevents user error?
Client's first request - change the hover colour too please!
Great stuff!! Thanks!
This is bad ass. Thanks man!
Hi, can you show me how to make a popup with elementor pro that will check a data on a simple database and sending back the data into another popup.
For example the popup is for checking a barcode number with a search button, When the search button is clicked, the data will be searched in a database.
if data is found, another popup will appear showing the entire data.
If data is not found, another popup will appear instructing the user to register the data.
I am confused about which combination of Elementor and plugin to do?
please enlighten me.
Freaking genius you are!!! And I don’t even know how it works but it’s a fantastic idea!!
Hey Rino, Thanks for the tutorial. Can you make a tutorial on how you start a WordPress website? Are you using a blank theme as a starting point or prebuild theme that you modify to fit your needs? Thanks!
Frikking genius Reno :-) I will use this too from now on. Thank you sooooo so much.
Hello brother I learned so much from you and I really appreciate it. Can you make video for toggle buttons also like how to add css for toggle button? Thanks!
Thank You!!
Hello congratulations for the video.
I tried using your technique on my site. I added a custom field to the taxonomies. My intention was to create colored boxes with the name of the taxonomy. the background, however, is not colored with the dynamic field.
hello can you make a tutorial on how to change the drop-down menu button for phone i mean when you press on the drop down button then there is a background how can i change the color of the bacground
in elementor
would it not be better to just use acf to make a checkbox/toggle switch for dark mode and then automatically change the colour and logo for them?
How can I do to have a white logo and when downloading it is black, like changing all the div to another color along with the letters?
That's very smart and creative. I have a follow up question to this video. What would you do if your client had an image carousel with images of different colors? Is there a way for the dynamic menu color to change color for dark and light images as as they rotate? I can't see how that would be possible, perhaps you know a way... Thank you!
Hi, thank you much for this tuto, please help , I would like to know how I can do to have active icon, for example I created a mobile menu, I inserted a link but when I give click to open the page opens, but the color of the page icon active does not change, what code and id I must use to have this function? i use elementor, thanks for your help
Can you make client Portal in wordpress. Each clients have their own dashboard. Admin can upload documents for each clients and clients can check from their respective dashboard
Awesome Frank!
No problem David!
Thank you very much Rino, This was very informative and I applaud you for finding this and doing a tutorial for us all :) Keep up the great work!
I have one question when you design in Adobe XD, you use shape dividers, are these elements or dividers an elementor XD pack, or are they custom built by yourself?
Thanks so much! I'm not really sure what you mean with the divider. What part of what video are you talking about?
LivingWithPixels not the divider specifically but more just your designs, do you design based around what elementor is capable of? Or do you design based on what you think works for the client then see if it is possible in elementor? Because there are some design elements in your XD spec that are very interesting :)
Very good question. I know from a visual perspective that almost anything is possible within Elementor. So I would say I first put a lot of time into learning Elementor so that I know what it is capable of. But in the design process I will always start with the client's goal in mind ofcourse, because I'm working for a client. Then in the design process I will come up with different solutions and if I then realise that it can't be build in Elementor I change my design (but this has never happened before). But also sometimes it will happen that I use Elementor's widget as a starting point because for some elements you don't have to reinvent the wheel. I know this is not straight and clear answer, but I hope it gave you some clarity about how I work.
LivingWithPixels that is a very good answer, thank you. Do you use any other plugins for elementor with your clients? Like jet elements, elementor extras, happy add ons? Also it would be nice to see a video on how you make your client sites fast to load and secure :) I know there are thousands of videos out there, but you work for clients so it would be good to see from your perspective what you’re answers are when it comes to load times and security.
@@MosaShoots I would like to see that too, "how to make your client sites fast to load and secure.
Hello, is there anyway to change the color by scrolling inside a page? For example the menu is transparent with white text, which is fine at the top of the page, where all the backgrounds are dark but as you scroll down the text seems to vanish on the white background.
If this can work with sticky header? when a page is dark o light background?
Not really related to the topic, but I noticed you have the whole webside predesigned somewhere, you send it to the client and if they aprove, you move on? Can you share how you do that?
Thanks!
Just Brilliant 👍
How to combine that with a sticky transparent header that gets opac on scroll? Are those compatible?
Is er een manier om de kleur van de tekst in je header te veranderen wanneer je naar beneden scrollt? Bovenaan wil ik de tekst zwart hebben, maar wanneer je naar beneden scrollt wordt de header ook een donkere doorzichtige kleur, waardoor de zwarte tekst weer moeilijk leesbaar wordt. Dus de tekst zou ik dan graag willen transitionen naar wit. Is dit mogelijk (met custom css of iets dergelijks...?)
Knap gevonden!!
Groetjes van een zuiderbuur.