Add Drop shadow

BB Theme
1

Hi, I would like to know if it’s possible to add a drop shadow to individual columns, if so how do i do that? Is it also possible for me to add a custom header instead of the one that comes with Beaver Theme?

2

Hi Esther,

Thanks for getting in touch! Adding a drop shadow to a column would have to be done with CSS. You can create your custom CSS in a child theme or within the code area of the Beaver Builder theme customizer and then target it using a CSS class within the column settings. Hope that helps there.

Creating a custom header could certainly be done with code as well using a child theme depending on your technical knowledge. By default, Beaver Builder allows you to have it’s default header with several customizable options or no header page to page within the editor under page templates.

Best,
Billy

3

Hi Esther,

As Billy has suggested, a bit of custom css will enable you to add a drop shadow to your Beaver Builder columns.

Here’s how to do it:

  1. Go to the “Advanced” Tab in your Column Settings.
  2. Scroll right to the bottom to Custom CSS
  3. Type “col-shadow” into the Custom CSS box (without the quotes)
  4. Click Save
  5. Click Done and Publish Changes
  6. Go to your theme’s Custom CSS area
  7. Insert the following custom css:
.col-shadow{
	box-shadow:3px 3px 3px 3px #666666;
}
  1. Adjust the numbers as necessary.
  2. Save your Custom CSS settings.

Here are the settings represented by the numbers above:

box-shadow: Horizontal Shadow | Vertical Shadow | Blur | Spread | Shadow Color

Hope that helps.

Colin

4

Thank you i was about to ask the same ?

Here is how that come out on a test page i started
http://destindjservice.com/test-page/

Here is what i need to do if possible they want me to make a version of.
http://underthepalmswed.com/

Anyway to do a inside border shadow as well like this in the text area - and this menu style.??

Thanks

5

Edward,

Just add “inset” at the end. So on the above example it would look like this:

.col-shadow{
	box-shadow:3px 3px 3px 3px #666666 inset;
}

Have fun.

Colin

6

omg Colin, you’re the best…thank you

7

thank you, it worked

8

Glad I could help Ester:)

Have a great weekend!

Colin