So far I’ve been helped in a great way and I’m very happy with your support. And I’m starting to believe that I really can create beautiful pages with Beaver Builder.
There’s something I can’t seem to fix and I hope you can help me with this. Take a look on this page:
You’ll need to be logged in to be able to see it. This page has been created with Beaver Builder. And it looks almost like every other page of this theme. There’s only one difference.
Somehow, the main content area and the sidebar have a border around them. I don’t know how it got there. But it should be there, because that’s how the theme looks. But if I wanted to remove that, I don’t see where I could do that. But that really isn’t my question. Although I’d be happy if you can answer that one.
My question is about the spacing between the main content area and the sidebar. Where did it go and how do I get it back? If you compare it with the homepage of the website, you’ll see the spacing I’m looking for. How can I create that space?
Great to hear you’ve enjoyed our support and we’re happy to help! So on the page you mention, both items you mention can be accomplished using the column settings actually. The column settings can be accessed via the little book icon for each column set. In this case, you would hover over the heading module and click the little book icon. In here, you can see that there is a border applied - you can remove that here if you like by setting to none. By going into the advanced tab and adding right margin, you can space the columns apart a bit. I did this for you, but feel free to adjust! Same goes for the other column set. Hope that helps!
Thanks for the information. I saw what you did and it’s exactly what I’m looking for. Another thing learned about your amazing plugin!
I just got one more question about this. The theme I’m using has a border for every sidebar widget. I’d like to replicate that so this page has a similar look like the rest of the site. But if I add an element to the sidebar, it becomes part of the column so that I can’t give it an own border.
I tried adding another right sidebar row. I didn’t use the main content area of it, just the sidebar to add extra elements. And that looks good. The problem is that as soon as the content area exceeds the first sidebar in height, the sidebar of the second row also lowers together with the content area of the second row.
So my question is…
How do I give each element or a set of elements in the sidebar an own border instead of applying a border to whole sidebar?
I hope this isn’t too big of a challenge for you or the Beaver Builder plugin. And I’m looking forward to your reply!
The reason why that page has a different layout than the rest is because it’s not using the default layout of your theme. The sidebar on the homepage is from the theme while the sidebar on the page in question is from BB so they will have different styling. I believe what you want to achieve is to have different sidebar on a certain page. You can try this plugin to achieve that. If you still want to use BB to achieve that, it would require a bit of CSS knowledge so I’d really suggest try that plugin first.
I believe this is the last issue I’m going to bother you with. Thanks to the way you’ve help me solve my previous issues, I learned a lot. And I’m confident that I’ll be able to make exactly what I want using Beaver Builder for building my pages and Design Palette Pro for customizations to the theme.
The plugin you recommended is very convenient for having different sidebars on different pages. Thank you for your recommendation. What I’m looking for is not having different sidebars on different pages, but creating my own sidebar with Beaver Builder. The reason for this is that Beaver Builder allows me to do more with the sidebar area. The test page isn’t a real design. It’s my learning environment. And this is the last thing I’d like to learn before I can start my real design.
Is there a way you can help me create a sidebar with Beaver Builder like I did on that page, but with borders for individual elements or a group of elements so that it has the same look as the rest of the website? For example, on that page, the upper heading, image and button should be grouped together with a border and the bottom heading should have an own border. If that requires a bit of CSS I think I’m up for it. You’ve already learned me a lot!
No problem at all. If you really like to do your sidebars with BB, the only way I can think of is by applying a top, left and right borders on the top most module, left and right borders on the middle modules and a bottom, left and right borders on the most bottom module. Make sure there is no margin in between the modules. This gives the illusion that they belong to 1 group with 1 border.
That makes perfect sense. Your explanation is very clear!
I’m not experienced with writing code, so this will be a tryout for me. But what I can come up with is something like this:
{
border-style: solid;
border-color: #eeeee8;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
Is this correct?
To apply a border on the entire sidebar for this page, I think this is targeted:
So to finish my code I’ve got just two more questions.
Where do I find what to target with my code? For example, I’d like to target the top most module which is a heading with the css code for the border. And I’m using Firebug to try and find this out. Could you explain that to me for just the top most module? After that, I’ll be able to find it myself for the other modules.
And after I know what to target and I’ve written the css for it, where do I place that code? I don’t want to mess up my stylesheet or any other theme files. So what would be the best place to put this code?
Yep, those look good, at least for the top part. What I would suggest is place a class on the module itself where you want that placed and just target that directly. You can add a class of top-module for the top most module and then you can just target .top-module { CSS-here; } and same with the rest of the modules.
I clicked the little wrench for the options, clicked on advanced and scrolled down to CSS selectors and filled in sidebar-top-module. The tooltip says that it has to start with a letter, so I left out the dot at the beginning. Is that correct?
Final question. What is the best place to put this code? In what file, plugin, or whatever should I put this code without messing up the original stylesheet too much?
If you can help me with that, this support question will be resolved and I’ll be one happy customer!
That looks perfect. Yes, you don’t have to include the dot. Also, make sure to put selector on the Class, not ID(if you want to read more about classes and IDs check this). I believe there is a place for custom CSS on your theme. You can place them there.
