How to create this in elementor

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Jan 15, 2021

• #1

Hi guys, I am trying to create similar block as in the attached screenshot in Elementor.
I am trying to achieve 3 columns with a different background and a shadow around it, but I can not find a way how to control the section width so it is does not stretch to the full screen width,
Not sure how to explain it, please check the screenshot any ideas are welcome

I need just the box with 3 columns, not the content inside...

 

Last edited: Jan 15, 2021

Indiweb

Well-known member

Babiato Lover

Trusted Seller

Oct 13, 2018

683

305

63

Heart

• Jan 15, 2021

• #2

Screenshot is missing???///

 

• 

Reactions: mader

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Jan 15, 2021

• #3

Indiweb said:

Screenshot is missing???///

Click to expand...

Yeah, the usual "forgot to attach" issue Post edited , thanks!

 

• 

Reactions: Indiweb

Indiweb

Well-known member

Babiato Lover

Trusted Seller

Oct 13, 2018

683

305

63

Heart

• Jan 15, 2021

• #4

ok... i try on elementor.... and tell u with procedure...

 

• 

Reactions: mader

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,385

120

• Jan 15, 2021

• #5

Create a new section with 3 columns, set the section to a fixed width then use negative top margin to bring it up into the blue section.

 

• 

Reactions: Loki

Rockyp

Well-known member

Trusted Uploader

Sep 19, 2020

5,658

3,754

120

• Jan 15, 2021

• #6

maybe he's trying to get css box shadow
try box shadow in style options

 

• 

Reactions: mader

Indiweb

Well-known member

Babiato Lover

Trusted Seller

Oct 13, 2018

683

305

63

Heart

• Jan 15, 2021

• #7

mader said:

Hi guys, I am trying to create similar block as in the attached screenshot in Elementor.
I am trying to achieve 3 columns with a different background and a shadow around it, but I can not find a way how to control the section width so it is does not stretch to the full screen width,
Not sure how to explain it, please check the screenshot any ideas are welcome

I need just the box with 3 columns, not the content inside...

Click to expand...

go to edit section and set left right padding .... and move above set top margin......
for box shadow... go to style option and select Border and then inside border select Box shadow....

 

• 

Reactions: mader

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,385

120

• Jan 15, 2021

• #8

Is it basically something like this you need @mader ?

 

Last edited by a moderator: Jan 15, 2021

• 

Reactions: Indiweb

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Jan 15, 2021

• #9

medw1311 said:

Is it basically something like this you need @mader ?

View attachment 60594

Click to expand...

Yes exactly but to be able to add 3 "columns" inside I know how to set box shadow and add the columns, but can not make the "section" with smaller width. I know I can set the width of the columns so they give the box effect, but then the css shadow is added to each column, which adds shadow between columns. Thanks all for the answers, I will check out all in half an hour, just got some offline work.

 

• 

Reactions: Rocky

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,385

120

• Jan 15, 2021

• #10

mader said:

Yes exactly but to be able to add 3 "columns" inside I know how to set box shadow and add the columns, but can not make the "section" with smaller width. I know I can set the width of the columns so they give the box effect, but then the css shadow is added to each column, which adds shadow between columns. Thanks all for the answers, I will check out all in half an hour, just got some offline work.

Click to expand...

The red "section" has 3 columns inside it. But it is actually set up like this...
Section
-Single Column
--Inner Section
---3 Columns

You apply the background colour & box shadow to the Single Column. You also need to set a z-index of 1 to this single column.

Then to set the width you apply that to the Inner Section.

 

• 
• 

Reactions: Krishu, mader and Indiweb

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Jan 15, 2021

• #11

medw1311 said:

The red "section" has 3 columns inside it. But it is actually set up like this...
Section
-Single Column
--Inner Section
---3 Columns

You apply the background colour & box shadow to the Single Column. You also need to set a z-index of 1 to this single column.

Then to set the width you apply that to the Inner Section.

Click to expand...

I feel so stupid I did not came with this ingenious idea! Thanks a lot @medw1311 !!!
Thanks also to @Indiweb and @Rockyp !
You guys rock!

 

• 

Reactions: Krishu, Rocky and MrSam_1