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!!
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!
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!
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
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?
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.
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.
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.
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.
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!
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
This is a great solution! But do you know how you could also change the background colour when you have a sticky header that starts off transparent and then gets an opacity when you scroll down like your other video? I had that set up with the CSS, but not sure how or if you could set it to change from a black to a white background depending on the header theme? If any of that makes sense...
Hi Rino. This is a very good question. Your idea is fantastic but for those projects where the colors of a sticky menu change when the scrolling starts, it is necessary that the menu color and/or the background color could also change with dinamic colors. Please post how you would do that. i'm becaming a better developer with your help. 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
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
Hi there, thank you for this! Given this method is from 4 years ago, is it still your recommended method for Elementor Pro or could you point me in a better direction? Many thanks.
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!
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 :)
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.
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!
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!
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.
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
Is it possible with this dynamic color feature to say.. have the site visitor change the color scheme of the entire site with a button press within the site? And to have it toggle through color schemes and eventually come back to the original one? I'm thinking of websites that do this, like Google fonts.
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.
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 ...
How does this affect page speed as opposed to using two different headers? Is it faster? Slower? Currently I'm using two different headers with different display conditions. If I were to implement this, it will require a DB call for the dynamic fields. Have you noticed a difference in page load time? Has it negatively affected page speed at all or has there been a positive impact? The tutorial is great, but these are my concerns around implementation. Also, I'm assuming this can be accomplished using another tool other than ACF like Jet Engine by crocoblock or Toolset.
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.
Have you ever try to created a menu with one word that be different to the rest. I know someone who made it with DiVi but i dont know how to do it with elementor
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...?)
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.
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!!!
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.
Does that work for sections? I mean if I need to scroll the header, then if the section is dark the header nav should be white and if the section is white the header nav should be dark
Hello , I have favor to ask from you, i.e. in my elementor Nav Menu that I created, all of the button colors change except for the HOME button when I hit on the preview button, the animation part of it works fine, it's just that the color does not change as per the parameters that's been set, could you please help me sort this issue, thanks.
Hello, please I need your help. I have a website I designed it's homepage using Elementor Pro. It has a sidebar with Advert Banners. It also has a top banner at the header. These advert banners are not Adsense but normal advert pictures that will be placed there and changed from time to time. I don't want my client to go into the template and change the banner image, cos he may spoil the layout of the template. How do I make it possible for him to change the images dynamically from the dashboard?
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?
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
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?
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?
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
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.
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
Hey Rino. I was just wondering how you went about creating your contact button in your header navigation? Is it actually part of your nav menu, or is it just a button with a custom link?
Hi, great videos! Any chance you can help me with an issue: I want to make social icons change the colour automatically from background to background (that is, page to page). My icons are white, but many pages I have are white background so I cannot see the icons. Is there anything to make them automatically adjust to the background?Automatically switch to black when I scroll down for example?
Hi! How about using ONE true/false field within the ACF and incorporating conditional usage of elements thanks to Dynamic Conditions plugin? It will look nasty in the Elementor editor because two logos and two menu versions have to be in place, but should work great on a live website.
Hmm, alright. Are you talking about conditional logic? If so, I would love to learn about that. I hope it's not too complicated. Do you have a link with explanation? Nevertheless, I will put this on my to do list to research it.
@@rinodeboer I was thinking about using this plugin: wordpress.org/plugins/dynamicconditions/ (there is a vid from WPTuts in the plugin's description showing its functionality). Basically it allows to show or hide an Elementor element if a certain condition is met. You could put both black and white menus and logos in the header and show only an appropriate one, depending on the trigger configuration. It seems to be a more straight forward solution to your problem, especially if a design change has to be made. One logo change in the header would affect all pages and posts.
Hey Rino, thank you for the video, great idea 👌. I wonder if it's possible to use dynamic color to make a switch to dark colors(dark theme) based on time of day? like iPhone?
Great tutorial!!. That's the right way for use dynamic content. But... what about if you use a SVG version of your logo instead of use PNG. Can yo change the SVG color dynamically?
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!!
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
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!
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 🙏🏻
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
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!
2:20 wow that website is so beautiful! 😍
Haha, yeah! I love it too, hahah
@Lyle Oakley Man... That is a crime, isn't?
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?
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
Could we make a header dynamic color for each section in one page ?
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!
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.
Wow. This is wonderful. Great for posts with different categories without creating a new post template. In short, brilliant. Thanks so much.
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!
This is awesome! Got recommended to view your channel by the Elementor Community of FB. Not disappointed :)
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!
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.
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!
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!
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
Really nice! Didn't even know that that's the way to put AFC at normal pages. Love this one! Thnx Rino!
2:02 How did he get the logo in the middle of the menu? Did he have to make two separate menus, one for each side?
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! :)
I always enjoy watching your videos, please keep up the great work!
This is a great solution! But do you know how you could also change the background colour when you have a sticky header that starts off transparent and then gets an opacity when you scroll down like your other video? I had that set up with the CSS, but not sure how or if you could set it to change from a black to a white background depending on the header theme? If any of that makes sense...
Hi Rino. This is a very good question. Your idea is fantastic but for those projects where the colors of a sticky menu change when the scrolling starts, it is necessary that the menu color and/or the background color could also change with dinamic colors. Please post how you would do that. i'm becaming a better developer with your help. 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
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
Enjoying this channel - very clear & great tips (sometimes a bit fast but that's better than too slow!)
Great to hear!
Thanks, Rino! What an excellent yet simple tutorial.
Hi there, thank you for this! Given this method is from 4 years ago, is it still your recommended method for Elementor Pro or could you point me in a better direction? Many thanks.
You deserve a million subscribers, my man! 👍🏻
That’s the biggest compliment I’ve heard this month. Thank you 🙏🏻
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!
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 :)
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.
I can’t believe I haven’t used the ACF before and what a great way to utilize!
I like the way u teach
Plz make video on contact form 7 "how to insert mobile number"
Thank u SO much RIno For the such beautiful content u have made for us!
My pleasure!
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 a great tutorial!! I look forward to seeing more!
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!
Very cool... thank you for your sharing...
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 like your implementation of the new dynamic color feature.
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
Hi, LWP sir Rino, is your Elementor is in Pro version for this tutorial? thank you
Is it possible with this dynamic color feature to say.. have the site visitor change the color scheme of the entire site with a button press within the site? And to have it toggle through color schemes and eventually come back to the original one? I'm thinking of websites that do this, like Google fonts.
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
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.
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 ...
How does this affect page speed as opposed to using two different headers? Is it faster? Slower? Currently I'm using two different headers with different display conditions. If I were to implement this, it will require a DB call for the dynamic fields. Have you noticed a difference in page load time? Has it negatively affected page speed at all or has there been a positive impact? The tutorial is great, but these are my concerns around implementation. Also, I'm assuming this can be accomplished using another tool other than ACF like Jet Engine by crocoblock or Toolset.
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?
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.
Have you ever try to created a menu with one word that be different to the rest. I know someone who made it with DiVi but i dont know how to do it with elementor
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...?)
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.
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!!!
Good stuff! can you use this for scrolling in the same page?
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?
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.
Does that work for sections? I mean if I need to scroll the header, then if the section is dark the header nav should be white and if the section is white the header nav should be dark
Hello
Can u put all sourse to make these tips with you?
I don't understand 😥. In wich page did you edit the logo and color for the header?
Hello , I have favor to ask from you, i.e. in my elementor Nav Menu that I created, all of the button colors change except for the HOME button when I hit on the preview button, the animation part of it works fine, it's just that the color does not change as per the parameters that's been set, could you please help me sort this issue, thanks.
Check the active color in the style tab.
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?
Hello, please I need your help.
I have a website I designed it's homepage using Elementor Pro.
It has a sidebar with Advert Banners. It also has a top banner at the header.
These advert banners are not Adsense but normal advert pictures that will be placed there and changed from time to time.
I don't want my client to go into the template and change the banner image, cos he may spoil the layout of the template.
How do I make it possible for him to change the images dynamically from the dashboard?
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?
is there a way that when you change the color, the logo also changes?
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
great tutorial! This is also possible now with the new Kadence theme without creating a header and footer in Elementor.
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?
is it possible to use it while changing slides (i.e. some slides dark, some white), instead of on different pages? thanks
How to combine that with a sticky transparent header that gets opac on scroll? Are those compatible?
Wow, thats amazing! But how it is possible to change the background color by scrolling down ? Thank you so much!
Really awesome!
I have been looking for various ways for this, but it seems now my problem is solved.
Hey, what plugin do you use for white-labelling your dashboard ??
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?
Thanks ! How does it works with Crocoblocks instead of ACF ?
If this can work with sticky header? when a page is dark o light background?
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
Very nice implementation. Thanks for the tip. Will definitely use it
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.
2:20 i would like to see how to make the same Header in the Website that you showed! Pleaseeeeee would you make a tutorial for that?
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
Hey Rino. I was just wondering how you went about creating your contact button in your header navigation? Is it actually part of your nav menu, or is it just a button with a custom link?
He! It’s just a button with a link. Keeping things simple 👌🏼
Do you think it's possible to create with the same method a Dark/Light theme switcher?
How to use this on product archive page? Because it is not giving that option
I Have just found this Amazing channel ...Great content Brother ...Keep up the Good work
Lots of Love
Hi, great videos!
Any chance you can help me with an issue: I want to make social icons change the colour automatically from background to background (that is, page to page). My icons are white, but many pages I have are white background so I cannot see the icons. Is there anything to make them automatically adjust to the background?Automatically switch to black when I scroll down for example?
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!
Hi! How about using ONE true/false field within the ACF and incorporating conditional usage of elements thanks to Dynamic Conditions plugin? It will look nasty in the Elementor editor because two logos and two menu versions have to be in place, but should work great on a live website.
Hmm, alright. Are you talking about conditional logic? If so, I would love to learn about that. I hope it's not too complicated. Do you have a link with explanation? Nevertheless, I will put this on my to do list to research it.
@@rinodeboer I was thinking about using this plugin: wordpress.org/plugins/dynamicconditions/ (there is a vid from WPTuts in the plugin's description showing its functionality). Basically it allows to show or hide an Elementor element if a certain condition is met. You could put both black and white menus and logos in the header and show only an appropriate one, depending on the trigger configuration. It seems to be a more straight forward solution to your problem, especially if a design change has to be made. One logo change in the header would affect all pages and posts.
Sounds very promising. Will look into this soon.
Hey Rino, thank you for the video, great idea 👌. I wonder if it's possible to use dynamic color to make a switch to dark colors(dark theme) based on time of day? like iPhone?
I'm using Elementor Pro plus Jet Plugins but I didn't find any simple solution.
Hi Rino, can I use it for desktop/mobile?
Very cool tips you present here!
Great tutorial!!. That's the right way for use dynamic content. But... what about if you use a SVG version of your logo instead of use PNG. Can yo change the SVG color dynamically?
Thank you! I am not sure if that’s possible. But can easily be tested!
I did the same solution by writing some jQuery codes, it was a fantastic experience to solve the problem.