I found a much better way to use Elementor's dynamic color feature
ฝัง
- เผยแพร่เมื่อ 29 เม.ย. 2020
- 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: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ 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. - แนวปฏิบัติและการใช้ชีวิต
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'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!!
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 🙏🏻
Your excitement about this new feature is very contagious. The video is very useful. Thank you very much! - From an Elementor newbie.
Wow. This is wonderful. Great for posts with different categories without creating a new post template. In short, brilliant. Thanks so much.
One of the best tutorials for something very useful. Well done!!
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 nice! Didn't even know that that's the way to put AFC at normal pages. Love this one! Thnx Rino!
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!
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!
This is awesome! Got recommended to view your channel by the Elementor Community of FB. Not disappointed :)
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
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 :)
i love his easy explanation about the topic ...stay blessed
This a great tutorial!! I look forward to seeing more!
Thanks, Rino! What an excellent yet simple tutorial.
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!
I always enjoy watching your videos, please keep up the great work!
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!
Really awesome!
I have been looking for various ways for this, but it seems now my problem is solved.
I Have just found this Amazing channel ...Great content Brother ...Keep up the Good work
Lots of Love
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 !
This was smart, Rino! :)
Very nice implementation. Thanks for the tip. Will definitely use it
What a great feature… thank you for taking the time to show us.. 👍
I am very happy to have met you, and I have learned but continue to learn elementor
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
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?
I like your implementation of the new dynamic color feature.
Enjoying this channel - very clear & great tips (sometimes a bit fast but that's better than too slow!)
Great to hear!
Thank u SO much RIno For the such beautiful content u have made for us!
My pleasure!
Congrats! Awesome video!
Thank you so much for giving us this is very amazing video :)
fantastic, I just asked you this exact question on another of your video comment. Great Job !!!
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.
Thanks! Very helpful video!
Frikking genius Reno :-) I will use this too from now on. Thank you sooooo so much.
Very cool tips you present here!
Awesome as always.
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.
Awesome tutorial as always :)
I can’t believe I haven’t used the ACF before and what a great way to utilize!
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
Well done! Your feed is very useful.
Amazing work! Thanks very handy! 👏
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 ...
Very cool... thank you for your sharing...
This is bad ass. Thanks man!
Good stuff mate!
Great stuff!! Thanks!
Nice one. Thanks!
You deserve a million subscribers, my man! 👍🏻
That’s the biggest compliment I’ve heard this month. Thank you 🙏🏻
Thank you so much.
great tutorial! This is also possible now with the new Kadence theme without creating a header and footer in Elementor.
excellent tutorial.
I like the way u teach
Plz make video on contact form 7 "how to insert mobile number"
Thank you for this. It rocks
2:20 wow that website is so beautiful! 😍
Haha, yeah! I love it too, hahah
@Lyle Oakley Man... That is a crime, isn't?
Great tutorial, thank you.
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.
Great idea!
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
best tip i've ever seen ... i'm impressed
Thank you!! Do you know if it is possible to set in this way: a slider of images, transparent navbar with white text for some images, dark for others?
FABULOUS TUTORIAL!!!!
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!!!
Freaking genius you are!!! And I don’t even know how it works but it’s a fantastic idea!!
Just Brilliant 👍
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!
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!
I did the same solution by writing some jQuery codes, it was a fantastic experience to solve the problem.
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!
Knap gevonden!!
Groetjes van een zuiderbuur.
Excellent!
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 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.
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
really big job :) thx
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.
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!
Thank You!!
Excellent!!
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.
This is amazingggg
Awesome Frank!
No problem David!
your a genius!!! thanks for share
How to combine that with a sticky transparent header that gets opac on scroll? Are those compatible?
Brilliant
Could we make a header dynamic color for each section in one page ?
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.
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?
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?
AWESOME & GENIUS
Bruh! You are Awesome
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.
I ran into an issue with that, with using a transparent background fading in into a solid background by using custom css - Is there a way to make that dynamic too?
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
bro i am a big fan of you. yur teaching method is so nice. bro i want to request you to make a playlist which will be uploaded serially that will help us who are new to word press very much. would you plz do so?