Step 1: Add Your Color Codes To Elementor And Astra
Why This Step Is Important
Adding your most used colors to Elementor and Astra is going to save you a ton of time as you design your website. This way you won’t have to remember the exact color codes for your color scheme and you can make sure you’re using consistent colors throughout your website’s design.
To help you know which colors to add, we created a special template called LP-SETTINGS-colors (found in your Elementor Library)! This template lists all of the color codes for your particular color scheme.
Watch Our Video Tutorial For This Step
This video will walk you through how to add the correct color codes for your particular color scheme to Elementor’s Default Colors, Elementor’s Color Picker, and Astra via the WordPress Customizer.
- Log into your WordPress dashboard (0:09)
- Go to Templates > Saved Templates (0:13)
- Search for “settings”, find the “LP-SETTINGS-colors” template, and click “Edit with Elementor” (0:18)
- Add our recommended colors to the Elementor Color Picker (1:02)
- Open the preview page for easier copy/pasting (1:27)
- Change all unused colors to #ffffff (2:42)
- Click “Apply” to save changes (3:05)
- Go to the WordPress customizer (3:42)
- Why we need to adjust the customizer colors (4:10)
- Go to Global > Base Colors and change the four colors (4:33)
- Go to Global > Buttons and change the four colors (5:45)
- Click “Publish” to save changes (6:33)
Was This Step Helpful?
Design Your Website
Help keep our tutorials completely free forever by sharing our course with your friends.