How To Add A Colour Picker To Your Elementor Website Page No Plugins
How To Add A Colour Picker To Your Elementor Website Page No Plugins
Hi guys, in this Tutorial, I’m going to show you how you can add a Colour Picker to your Elementor website. It’s extremely easy to do, so don’t forget to hit that like and subscribe button, and let’s get into the Tutorial.
Adding a Section and HTML Widget in Elementor
Okay guys, to add a Colour Picker to your Elementor page, the first thing you need to do is add a new section. You do that by clicking on the plus key, and we’re going to select one section. Then what we need to do is go into the Elementor menu and look for the HTML widget. You can scroll down the page like I am, or you can type HTML into the search widgets box.
Inserting HTML Code for the Colour Picker
Once you’ve found it, drag and drop it onto your page. Now you’re gonna have to head over to my website, which you can find the link for in the description below, and you’re going to need to copy this HTML code. Once you’ve copied it, go back to your website and paste it into the HTML code box. As you can see, the Colour Picker has been added to our Elementor page.
Adjusting the Colour Picker Size
What I’ll do first is show you how to edit it, and then I’ll show you it in action, so the first thing we can change is its width, and as you can see in our HTML code on the left-hand-side, it says 150 PX. If we change this to 550, you’ll see that our Colour Picker increases in width.
If we decrease that number, it will obviously get smaller, and the next line down of our code on the left-hand-side is our height, and like changing the width, all we need to do is increase the number here, currently set at 50 here, and if I change that to 150, you can see it becomes bigger.
Modifying Border and Border Radius
The next line down is the Border radius, and I wouldn’t bother changing this. Below that is our border itself, and if we don’t want a border on our Colour Picker, we can delete this line. Under that is our border colour, and if we change that from white to Red, we can see that the Box around our Colour Picker will change.
Using the Colour Picker Tool
Now what I’m going to do is change it back to White, and I’m going to show you our Colour Picker, and all we have to do to use it is click on the Colour Picker itself, and like you would expect, we can choose which colour we want to select.
We can slide the gradient bar across at the bottom here, and if we do, we can see we can get a full range of colours. Once we’ve decided which colour we want to select, we can see at the bottom we’ve got our RGB colours. We can also use the dropper on the left-hand-side, and this will Target a colour within a few pixels.
Switching Between RGB and Hex Colour Display
If we don’t want to display our colours in RGB and we want to see hex reference, we can click on the button again, and it will give us our reference, and if we click outside our Colour Picker, you’ll see the colour that we selected displayed on our page.
Customizing Text Size and Style
Now if we want to change the size of this text, all we need to do is go back over to the left-hand-side, and we can select font size, and like before, all we need to do is increase this number, and once we select a new colour, we can see that our font has grown on our page, and if we want to make this smaller, then all we need to do is make the number lower. Underneath that, we can change the style of our font, and under that, we can change its alignment.
Changing Text Colour
If we want to change the colour of our text, all we need to do is go up to where it says colour and change it from white to whichever colour you want, so what I’m going to do now is preview our page, and I’m going to show you it in action once our page loads.
Previewing the Colour Picker in Action
All we need to do is select on our Colour Picker, choose our colour, and once we have, we can click off of our Colour Picker palette, and we can see that our colour is displayed under the Colour Picker.
Final Notes and Elementor Pro Information
If you have found this Tutorial useful so far, please do hit that like and subscribe button. You don’t need Elementor Pro to be able to use HTML widgets, but if you do want to sign up to Elementor Pro, there is a link in the description below. It is an affiliate link. It doesn’t cost you any more to use, but it does give me a very small percentage of Elementor’s profits if you choose to sign up. That’s it for this Tutorial. If you have any questions, feel free to drop them in the comments box below.
Thanks for watching and I’ll see you in the next one
