Casey Whitcher Profile
By
Casey Whitcher
Elementor Help Founder
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Creating Two Color Backgrounds In Elementor

Duo Color Background
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

The Problem With Background Colors

Often times, we find ourselves in a situation where we want contrasting colors in our background. 

Of course, we could use two columns and then adjust our image margins to move an element over the top of another one, but sometimes this can be problematic. 

There is a much simpler and cleaner solution that doesn’t work in every instance, but it works often enough and sometimes in places you didn’t expect. 

A Real World Example

For this sites home page hero section, I needed to have my non focused elements opacity set down until they are hovered over.   In this way, the background shows through.  

Initially, since I have a dark top and a white bottom, either the top got light, or the bottom got dark depending on the background color I chose. 

I’m certain there are likely better ways to do this, but I chose to use a split colored background to make sure my top faded into black, and my bottom faded into white. 

Let’s take a look at the menu in its entirety.

CSS

How To Reflect Titles, And Improve Your Elementor Skills!

Easily create a stylish mirror effect with your titles and text, anywhere by adding a simple custom CSS Class
CSS

How To Create That Thick Underline Effect?

This popular effect is easy to re-create exactly to your specifications. Create this class and quickly add it to any text on your website.
CSS

Create An Angled Scrolling Menu In Elementor?

An unusually seen effect that causes your menu to scroll diagonally when the user scrolls down the page.
Basic

How To Get Elementor Problems Solved. What’s Your Question?

If you're stuck on an Elementor problem and need help solving it, this is your spot! Submit a question and get an answer and possibly featured on the site!

Now, let’s take a look at the same section but with all but one of the columns removed.  You can see the background now, works well!

CSS

Create An Angled Scrolling Menu In Elementor?

An unusually seen effect that causes your menu to scroll diagonally when the user scrolls down the page.

How Do You Make A Two-Color Background In Elementor

Create a two Toned Gradient Background

This is an easy but really useful tip to add some splash to your design and accomplish some otherwise difficult scenarios. 

 

Gradient CSS Backgrounds in Elementor are Easy

You can always accomplish this with just basic CSS, but we will go over how to accomplish it in Elementor only!

Create a two Toned Gradient Background

This is an easy but really useful tip to add some splash to your design and accomplish some otherwise difficult scenarios. 

 

Gradient CSS Backgrounds in Elementor are Easy

This is actually just basic CSS that you can use anywhere, but we will go over how to accomplish it in elementor. 

So let’s say you want to make a two column layout with a background that goes to the edge, but you want the body of your content with a limited width? FÁCIL!

The first thing we are going to do, is select our outer most container section. 

We will go to the style tab and set our background to gradient. 

You will pick your two colors that you want. 

The big key here is to set your second color location to 0, that makes the gradient a solid line.

For the example above, my inner section has two columns each with padding of 20px around the edges..

Adding A Centered Image

Ok, so now we want to have an image centered, and we want to have a split background running behind it?

Not a problem.  For this example, I just simply stuck my image directly in the single-column within my background section.

Go ahead and right-click the image of the lady below and open the image in a new tab. 

model-clipped.png

Now For The Fun Part

The options are pretty much endless here.  We can set the angle anyway we want and we can position it anywhere we want. 

For this example,  I used a two column Inner section, with the text on the left, left justified, and vertically aligned to the bottom. 

For the right I set it to right Justified and vertically aligned to the top. 

Here is the downside.  Within Elementor, if you’re using the Elementor Styling, you can’t set different background properties to the mobile view, but we can control this if you use native css, that’s next.

We can also angle our backgrounds

With some simple adjustments, we can change the angle of the background to whatever we like to match our layout. 

We can also adjust the width of our text fields, with the advanced settings and then position.  

You can adjust the headings, and the text body to fit. 

You can also adjust everything to look good on mobile and tablet, all from the standard Elementor Settings.

Create Cool Backgrounds in Elementor

You can position the cut-off point of your background as far to the right or left and you like.

Position your contents at the top or bottom of each column as desired. 

We can also angle our backgrounds

With some simple adjustments, we can change the angle of the background to whatever we like to match our layout. 

We can also adjust the width of our text fields, with the advanced settings and then position.  

You can adjust the headings, and the text body to fit. 

You can also adjust everything to look good on mobile and tablet, all from the standard Elementor Settings.

Create Cool Backgrounds in Elementor

You can position the cut-off point of your background as far to the right or left and you like.

Position your contents at the top or bottom of each column as desired. 

Now For The Really Brave

If we just use some basic CSS we can take this quite a bit further. 

Elementor limits us to a two color gradient, but CSS does not have such a limitation. 

If we select our outer section, assign a class, let’s call it, monster-purple, why not.  

*The image looks like I’m pointing to the little dynamic barrel, you just have to type it in the field. 

Multi-Color Background CSS

Finally, we will add the CSS that will do the trick for our multi-colored background. 

.monster-purple{
background: linear-gradient(-70deg, #4185bd 30%, rgba(0,0,0,0) 30%), linear-gradient(-30deg, #782049 60%, #1e2963 60%);
}

My typical spot for this is going to be within the Global Site Settings > Custom CSS.

When we are done we get a pretty cool background for our final section. 

*Another note, you could have just applied this to the actual sections CSS with:
selector{
background: linear-gradient(-70deg, #4185bd 30%, rgba(0,0,0,0) 30%), linear-gradient(-30deg, #782049 60%, #1e2963 60%);
}
But that’s a bad habit to get into,  keep your CSS in one central location, and keep it labeled. 

Multi Colored Backgrounds with Limitless possibilities in Elementor

Final Thoughts

There are endless possibilities and situations where this method will really come in handy. 

Have you tried this out in your own designs? 

Do you have a suggestion for a better way to do this?

Please leave a comment below!

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Basic

14 Column Test

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets