Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

Or sign up with email below...

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 2: Design Your Website

How To Add Your Default Colors To Elementor And Astra

Matthew Averkamp

Tutorial Action Plan

Action Plan

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.

Video Summary

  • 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)

(I added the color codes to Elementor and Astra)

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2. The small commission we receive from your purchase helps us keep our tutorials completely free.
Your Progress

Your Achievements

You have earned 0 badges

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commissions we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not associated with SiteGround or Elementor in any way.