Update : I had written this blog post a very long time back when DIVI did not have options for adding borders to rows. Now DIVI has the UI option to add row borders in their design tab . Go To Row Settings – Design – Borders and choose the type of border styles, color, width with a click of a mouse. You no longer need CSS to add this. I am keeping this post in case anyone still wants to use CSS to control the borders or is using a very old version of DIVI. Sometimes CSS gives you a lot more power and design options, if you know it well.
Original Post:
Lets add a border to a row in Divi. For this example I have added custom css to the row module. This will style the row container that holds its columns and modules. I’ve added a simple border and some custom padding to add a nice box around the contents of the row. This tip was a CSS tip by Elegant Themes that I had read.
Row Settings -> Custom CSS –> Main Element
border: 3px solid #74c403;
padding: 20px;
This tip was featured on Elegant Themes blog.
Elegant Themes Tips
2 Comments
I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.
well where do we put the damn CSS code
Hi Miles, Go to any Row – Click on the settings. This will bring up the row module settings. Click on the Advanced Tab. Under that you will find a box called Main Element. Copy the css code over there and it should work.