I found a much better way to use Elementor's dynamic color feature

guys elements or has just launched a new feature called dynamic caller which means that the color picker is now also a dynamic field so they uploaded a new video on their YouTube channel so the official Elementor YouTube channel to promote that new feature and in that video they're giving you an example of how you could use that feature so this is the video so they say for example with a blog post you can have a completely different background and a header and the button colors on every blog post or every page right so for example you click to the next blog post and all the colors change so that means that your client can now change the colors of the website after the website is done well I don't know about you but I do not really trust my clients with changing colors and that is just because that's not their job their job is not to change the colors of the design you deliver a design and they fill in the content so when I saw this video on their channel I was like alright well great but I'm not really gonna use this channel and then I was laying in my bed and and I was like wait a second is there not a better way to use this feature and then I got an idea which is actually a much more practical way to use this new dynamic color feature and I think I'm the first one on YouTube to actually show you this I'm pretty proud of it to be honest so let's just dive in and I'll show you what I mean so here is a much more realistic scenario you design a website for your client with an awesome transparent header because this is now a huge trend in web design and we want to have a few websites in our portfolio that have a transparent header like I've done for this client project or I've also done for this project which you already saw on the channel so this is a transparent header so what you do is you export your design of the homepage you send it to your client your client thinks that is absolutely awesome and the client says yes start working on the website looks absolutely awesome so you start going in into Elementor into WordPress and you start building this thing you watch the tutorial here and there and then you have the home page but then you realize that the website needs to be filled with content and then the client will send you some pictures if they even have good pictures and then two things can happen one the pictures do not work with your design because with this design for example this is a dark color for the text and if you go to another page if you use a dark color for the text over here that's not gonna work because the background already is too dark so in this situation you need to create a header for the right version and you need to create a header for the black version and what's also a realistic scenario is that your client does not have a picture for every website so for example on this website this is a business page that doesn't need to be that fancy or for example a privacy policy page so now you have a problem but you've already built your header template in Elementor Pro so what are you gonna do well you only have one option and that is to create a different header template so you create 100 template that is for the white version and one for the black version but then you have to go into the conditions and link the header to the different pages and this is a solution and this is how I did it in the past but it's really messy because then if you make a change in one header you also always have to make the change in the other header which is not very practical and also in the future if somebody else adds a new page to the website and you've not linked a header to that new page then that page doesn't have an or it has a default header which can be the wrong one so this is a mess and this is how it was before so I have the solution and that is to use dynamic colors for your header template so you only have to use one header template and you can set up the color on the page edit and then if you save it that new header will appear and devil beaches one template for the whole website so let me show you what I mean so I'm here on one of my clients websites and as you can see this is a transparent header and now if I change to the about page for example you can see that the color of the menu will automatically change and even the logo because this is the dark version of the logo and on the home page it's the white version of the logo and this is all done within this one template so what I've done is I have linked the color of the menu items to a CF color pickers and what I've also done for the image I've used a custom image which is actually a dynamic field so then the only thing that they have to do is go over here select the right color and select the right logo and with some websites you don't even have to have this logo fields like I've done on this website because this logo looks good on a dark background but also on a white background so there's also a default color which is the dark one and only when they need a white version they can change it over here so that means for this website that this is the default one and then if the page has an image taken just change this value to white and then save it and then the menu will change okay so the plug-in that you need for this is called a CF a lot of people already notice if you don't know what a CF is it's called advanced custom fields and with advanced custom field you can add an extra field to all of your pages or to all of your blog posts which you can load in on the front end so what you want to do is go to plugins click on add new and then just type it in here ACF and make sure that you have the green version installed which is this one it has 1 million active installs is a very famous plugin so then you have this tab over here so go to custom fields and go to field groups and on this website I haven't set that up so we're gonna do that together so I'm gonna click on add new I'm gonna give it a name which is header color or maybe a better name is menu color okay and now we need to create one field for that actual color picker so I'm gonna add one field I'm gonna name this color picker field name that should be okay and then the field type should be a color picker because then you can select a color so it's over here in jQuery color picker so let's say on my website that the default color should be white and then if we have a page so for example the privacy policy for me then we need to put in the value so the menu will change because this is not visible right now so the only thing that I need to know is the color of the dark menu some from my website I'm gonna pick this color so just copy the hex code then go over here and give yourself a little bit of instruction so for example default is ffffff which is white change it to 4 dark menu required no and the default value will be white so we're gonna set a default value at White's so then if we forget to change this then it will always be white because for most of my website is white but if your website on most pages it's a dark menu you should use setting default to the dark version okay so that's it and now we need to tell ACF where we want this field to display so I'm gonna select post type and then post type is equal to page so then this field will always display in all of my pages and there's one last thing that I want to change and that is to position I don't want to put that high otherwise it's gonna display at the bottom and then there's more chance that I will forget it okay so let's just click on publish for now and then if we go to all of our pages and now go to the Edit Page and then if we scroll down we're gonna see that we have this new color Baker field and from here we can select a color or we can just copy our own instructions like this because we're here on the privacy policy page which needed that darker version so could you face the caller over here okay like this so now this page has the dynamic caller but now we need to go into the header template and tell alimentar that we need to use this new field as the input for the menu items so that's what we're gonna do so go to templates go to team builder my header is called Heather version two because version 1 was for another tutorial so here you can see my menu and then we need to go into the nav menu then go to stell and now we're gonna use this field because we want to use the dynamic color fields okay so click on here then ACF ACF color picker fields click on this one and then select the fields that we have just created ok so now that that is OK we also don't need to forget our social media icons so I'm gonna click on the social media icons go-to style and the secondary color that's the color of the actual icon we're gonna use the dynamic fields also in here so we're gonna just select the same dynamic field very easy you don't have to make two fields just the same fields click on update and now we're going to refresh the privacy policy page and we're going to go to the home page you see if the home page is still white and it is now we're gonna go to the privacy policy page and refresh this and now you can see that we have the darker menu it works very nice but now we have one more problem and that is the logo because the logo is an image and that's not as simple as just use the color picker fields so that's the last thing that I want to show you so how you do that is by going back to ACF so you're here in your custom field inside of the menu color you make a new field for your logo so logo switcher something like that and then the field should be an image so here you can select an image now for the instructions I would say do not change this if the logo should not be white for most websites that the dark right because the default logo for my website is gonna be white for most websites it's it's the dark version okay this is all good we're still on the page here okay so let's click on update and now if we go back to the privacy page to just the edits inside of WordPress we scroll down we can see that we have a new field right here so now we need to go back to our header templates which have opened here and we also need to make the logo dynamic so go to your dynamic tags well first of all refresh this page because we have new data from the backend ok click on your logo again click on dynamic fields scroll down a CF image fields that is now available so select the field the logo switcher that we've just created but now we want the default logo to be white and only when we pick the darker version we want to display the darker version so we need to click on it again and then we need to select a fallback image and the fallback image in this example will be the default image so that's the trick that I found so now we're gonna select my white logo again a Moe's website Applebee the dark one so that will be the fallback so when we've not changed a logo we want to have the white version okay we're gonna click on update now we're gonna go back to the home page and see if it still works T see if we can still see the white logo which is now a dynamic logo yes that works ok go to the privacy page refresh and this should still be the white version because we've not changed this on the page ok so here now we can select another logo so if you click on add image over here now you can select your darker logo ok so I've set up the darker logo click on update now go back to your privacy policy page and now we feel like click on refresh you're gonna see that we have the darker logo the darker menu and all within one template inside of Elementor the last thing that you need to do is check mobile responsive mode because the hamburger icon for your nav menu also needs to be dynamic of course if you go to style over here don't go to the tech scholar but you need to go to toggle button and the toggle button needs to be dynamic too so ACF color key color picker and the logo is still good so that's perfect now go to mobile and also see if that works alright click on update now I'm gonna check it on my mobile phone to see if it works okay my homepage looks good and now let's check the privacy policy page and that also looks good but the only thing that I forgot it's a change the layout for mobile version on my privacy policy page but that has nothing to do with the header template so this also works perfectly fine I hope you enjoyed this video I think this is a much better way of using the new dynamic caller feature because I've already used it on to client websites so if that's not practical then I don't know what is okay let me know if you have any other ideas for new videos and then I want to thank you and I will see you in the next video [Music] [Applause] [Music]

Channel: LivingWithPixels

Views: 69,542

Keywords: wordpress header, wordpress transparent header, transparent header, elementor transparent header, elementor header, elementor header menu, elementor pro header, elementor pro menu, elementor menu, elementor pro transparant header, elementor transparent menu, elementor transparent, elementor dynamic color, dynamic color, elementor dynamic colours, elementor dynamic colour, elementor header dynamic, header black white, header dark light, elementor dynamic colors

Id: b5_-LzAtN5A

Length: 14min 16sec (856 seconds)

Published: Thu Apr 30 2020