Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Elementor Different Background Colors

I’ve broke my head trying to solve my problem but unfortunately I still didn’t find the correct solution.

All I want is to have the white background to the left of the Column#1 and the grey background to the right of the Column#2.

But I can’t find the needed attribute in the Column options (and I’m not sure if there are any.

I’ve attached the hand draw of what I want to do.

Thanks guys, you’re the best.enter image description here

Tags:

2

Answers


  1. 0

    you can achieve this pretty easily by using a pseudo-element for the grey background. On your body set a white background.

    body {
    background: #fff;
    }
    main {
    position: relative;
    height: 250px;
    }
    main::after {
    content: '';
    background: grey;
    position: absolute;
    width: 35%;
    height: 100%;
    right: 0;
    top: 0;
    }
    main .container {
    z-index: 1;
    position: relative;
    }
    <body>
    <header>
    
    </header>
    <main>
      <div class="container">
        <div class="column1">
        
        </div>
        <div class="column2">
        
        </div>
      </div>
    </main>
    <footer>
    
    </footer>
</body>
    Login or Signup to reply.
  2. 0

    Follow these steps:

    1. Set the background of the section as Gradient.
    2. Select White as 1st color
    3. Select Gray as your 2nd color
    4. Set Gradient type = Linear
    5. Set Angel to 90
    6. Now Adjust the Location as per your liking (15+ recommended)
    7. Click the link below to see the result I have got.

    You will see something like this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search