How to create this in elementor

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

mader

Well-known member
Babiato Lover
Trusted Seller
Trusted Uploader
Sep 18, 2019
507
389
63
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...
Screenshot_2.png
 
Last edited:

Medw1311

Purple People Eater
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
7,215
9,428
120
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.
 
  • Like
Reactions: Loki

Rockyp

Well-known member
Trusted Uploader
Sep 19, 2020
5,447
3,458
120
maybe he's trying to get css box shadow
try box shadow in style options
 
  • Like
Reactions: mader

Indiweb

Active member
Babiato Lover
Trusted Seller
Oct 13, 2018
489
240
43
Heart
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...
Screenshot_2.png
dfd122.png
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....
 
  • Love
Reactions: mader

Medw1311

Purple People Eater
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
7,215
9,428
120
Is it basically something like this you need @mader ?

Capture.JPG
 
Last edited:
  • Like
Reactions: Indiweb

mader

Well-known member
Babiato Lover
Trusted Seller
Trusted Uploader
Sep 18, 2019
507
389
63
Is it basically something like this you need @mader ?

View attachment 60594
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.
 
  • Like
Reactions: Rocky

Medw1311

Purple People Eater
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
7,215
9,428
120
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.
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.
 

mader

Well-known member
Babiato Lover
Trusted Seller
Trusted Uploader
Sep 18, 2019
507
389
63
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.
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!
 

Similar threads

Forum statistics

Threads
52,047
Messages
665,706
Members
134,871
Latest member
tarequlislamtuhin