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.
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!
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.
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!
