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

There's currently a bug with Elementor that doesn't allow you to save column background colors to the color picker. So when using our LP-SETTINGS-colors template, you may have to copy and paste the color codes manually.

Complete The Following Tasks

Add your color scheme colors to the Elementor color picker using our LP-SETTINGS-colors template.
Adding your most-used colors to the Elementor color picker is going to make creating your website go much, much faster.
Open our LP-SETTINGS-colors template to find the color codes for your color scheme.
Delete the existing colors in the color picker by dragging them into the trash.
Add all of your color scheme colors by clicking Edit Column > Style > Color and then click the + sign to add that color.
If you're having issues adding colors to the color picker (colors are being added as black) you may need to copy and paste the 6-digit color code into the color code box and then click the + sign.
Add your color scheme colors to the WordPress Customizer.
In your WordPress admin, go to Appearance > Customize and then go to Global > Colors > Base Colors.
Copy and paste the colors shown in the LP-SETTINGS-colors template in the appropriate fields (Text Color, Theme Color, Link Color and Link Hover Color).
Next change the button colors by going to Global > Buttons and click the pencil icon next to Color. Copy and paste the colors shown in the LP-SETTINGS-colors template in the appropriate fields in the Normal tab and Hover tab.
Click Publish to save your changes (if necessary).
You Earned A Badge!

Watch Our Video Tutorial

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.

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.

How do I change the Elementor sidebar UI theme color?

To change the UI theme color, open the Elementor editor and click the hamburger menu at the top left. Go to Preferences and in the UI Theme drop-down you can choose either Light, Dark, or Auto Detect. The auto detect option will use your computer’s default settings.

Submit a question

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2.
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.