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 WordPress

Matthew Averkamp

Tutorial Action Plan

Action Plan

Step 1: Add Your Color Codes To Elementor And WordPress


Why This Step Is Important

Adding your most used colors to Elementor and WordPress 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 the Elementor Color Picker, and 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 WordPress)

FAQ


Elementor won't open, it shows a blank white page

Did you enable the “Switch Editor Loader Method” in the Elementor settings in your WordPress admin? We discuss this in our Elementor installation video.

In your WordPress admin, go to Elementor > Settings. Click the Advanced tab, and next to where it says “Switch Editor Loader Method”, choose Enable from the drop-down and click Save Changes.

If you’re still having issues, here are some more troubleshooting options you can try.

Elementor won't open, it shows a grey page that's endlessly loading

If you’re using SiteGround hosting, this can be caused by having “External Links Rewrite” enabled in your SSL settings in your SiteGround control panel. In our SSL tutorial we discuss this.

To fix this, in your SiteGround control panel, go to Websites > Site Tools > Security > HTTPS Enforce and turn off “External Links Rewrite”. In order for these changes to take effect you will need to clear the cache in various places.

First, in your SiteGround control panel, go to Speed > Caching and click the “Flush All” button. Next, log into your WordPress admin and in the sidebar go to SG Optimizer. Click the “Purge Cache” button on the right-hand side. Lastly, clear the cache in your web browser. The Elementor editor should work after you take these steps.

If you’re still having issues, here are some more troubleshooting options you can try.

Have a question?
Click here to submit your own

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
0

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.