Row above header

Hello to everybody.
Is it possible to have a row above header in front page?


You can add the row using pagebuilder, its worked :slight_smile:

Hello Awan. Thank you for your answer. Sorry for my ignorance, but i tried to add a row in pagebuilder but i can’t see an option to put that row above the theme slider in my frontpage.
Maybe it’s me that didn’t explain well. I want to add a row above the theme slider. Is it possible doing that? If so, can you be more specific please?

Yes, its documented as well in here

Great! Thank you very much.

Hello @awan

The link takes us to the documentation page. I’m using Site origin page builder, and I want to add a row just above the slider and below the menu bar.

I’d appreciate if you could help me with this.



You can’t add a row above the header slider. You have to disable the default header slider (you can manage it in the customiser) then use Page builder widget instead.

You can use Siteorigin Slider to replace the default header slider then feel free to add a row in above the Siteorigin slider widget :slight_smile:

Hi @awan ,

Thanks for the reply. I did it and it looks fantastic. Have a look at this

However, I want the row width to be fixed and on full screen. When I use the top bottom padding to increase the width it leave a bottom margin quite a lot and I don’t want that.

I don’t know if I’m clear enough but could you solve that please.


I just checked the site and looks like you already make the row full width :slight_smile:

And for the bottom margin issue, I noticed that you add a custom css code for several rows. Please check your code and remove the unused element id from your css code (see below):

#pg-220-0, #pg-220-1, #pg-220-2, #pg-220-3, #pg-220-4 {
    margin-bottom: 8px;

Hi @awan

I copied the code from site origin forum. How would I know the exact element ID?


Hi @awan

I use the following CSS to reduce the extra gapping between the two columns in a row in mobile devices. It’s working fine.

@media (max-width: 780px) {
#pgc-220-0-0, #pgc-220-0-1 {
margin-bottom: 8 !important;

And for the row padding to be absolute 0 I’m using the below CSS code:

.widget_siteorigin-panels-builder .panel-grid{
padding-bottom: 0px !important;
However, this code is affecting all the rows in homepage and I only want this code to take effect in the first row only. How should I go about it?

I’d appreciate if you could help me fix this issue.


Can you find this code below in your custom CSS code area?

If yes, please adjust the margin-bottom value from 8px to 0px

Hope this can remove the gap space between the rows: Screenshot_157