• 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"

How to create this in elementor

mader

Well-known member
Babiato Lover
Trusted Seller
Trusted Uploader
Sep 18, 2019
600
468
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:
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
maybe he's trying to get css box shadow
try box shadow in style options
 
  • Like
Reactions: mader
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
Is it basically something like this you need @mader ?

Capture.JPG
 
Last edited:
  • Like
Reactions: Indiweb
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
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.
 
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!
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock