Hey,
I’m trying to build a subpage with Page Builder which will suite my theme. It is a full-width theme with a content div of 1170px in the middle.
Now I’m trying to add a 3 cell row, where the middle cell has a fixed width of 1170px and will be centered in the middle of the page, so it will fit the theme (header and footer). I managed to influence the cells with custom css by adding a row-class (cell-width-theme) and the following code
.cell-width-theme #pgc-47-1-0, .cell-width-theme #pgc-47-1-2 {
width: auto;
margin: 0;
}
.cell-width-theme #pgc-47-1-1 {
width: 1170px;
margin: 0;
}
Sadly I’m missing a few more arguments as it didn’t turn out the way it should be. Moreover everything should be responsive so the middle row “gets flexible” while surfing with a mobile.
I’m using WordPress 4.3 and Page Builder 2.2. As I’m using a local environment I can’t provide a link.
Any suggestions? Thank you very much.
Hi Gnebo
Thanks for reaching out.
If you can, try avoid using ID’s in your CSS. Row classes are the way to go, by not using ID’s you’ll be able to re-use your CSS on other pages.
Try the following:
/* Page Builder Styles */ @media (min-width: 960px) { .custom-width .panel-grid-cell:nth-of-type(2) { width: 1170px !important; } }The above goes in your Custom CSS plugin or child theme style.css file.
Next, edit the row these cells are in, click Attributes top right and insert as your Row Class:
960 is the point I’ve decided to drop everything back to normal. Adjust that break point as required.
Hey Andrew,
thanks for getting back to me.
I tried your suggestions but it didn’t really worked out. What happend is, that the middle cell has 1170px width now but the left/first one still occupies 33% of the page and the last/right one got pushed down into another row (under the other two cells). So the middle cell still is not centered. Hope the description of the issue is understandable.
For your information how the page is setup (and maybe that’s the issue): I use a full-width page template provided with my theme and changed the container with custom css just for this page with:
body.page-id-47 .site-content .container { width:100%; }Maybe I should add, that the left and right cells are empty, so I can fit my theme with content in the middle (1170px width) and use different rows under each other for different backrounds (like the front-page of the Vantage theme)
Have you considered just adjusting the middle cell’s width manually until it matches up with the 1170 element you’re looking to match?
If you want to set everything manually then we’d need to set all three cells:
/* Page Builder Styles */@media (min-width: 960px) { .custom-width .panel-grid-cell:nth-of-type(1) { width: 1170px !important; } .custom-width .panel-grid-cell:nth-of-type(2) { width: 1170px !important; } .custom-width .panel-grid-cell:nth-of-type(3) { width: 1170px !important; } }Now you can manually adjust the width of the first and last cell.
The issue is that you don’t know how wide the screen will be because you don’t have a known width for the site container so I’m not sure how this would work with a pixel width in the middle. You might need to take a moment and re-look at the situation.
Obviously made a bit harder ’cause I can’t check this out logged in :)
I think it really doesn’t work out the way I was thinking. Even if I would manage to fit all three cells, how would I add additional 3 cells in the middle cell for example to put in additional widgets.
So what might be the correct way to us PageBuilder to build a subpage which looks like the front page of the Vantage theme? I think the way might be to have a full width site with different full width sections and the content container with a width of 1170px in the middle. But how do I set this up (e.g. different sections) with PageBuilder on a subpage? I didn’t find any option for that. So how dows the php file template has to look like so this might be possible?
You can add cells inside cells with the Layout Builder widget.
If your content container is percentage based then we ideally need to stick with percentage based containers inside that.
Vantage isn’t really full width. All of the content areas are constrained to 1080px max-width. Only the menu and footer backgrounds are full width.
Not quite following your last point. Page Builder will populate the available content area. Not following your different sections question….
Within Page Builder, if you click Prebuilt then Layouts Directory you can try out of a few of our layouts there.
Here is the default Vantage home page layout: Private Snippet. Once downloaded you can import it from Prebuilt > Import/Export.
The Vantage slider (Meta Slider) is inserted before the content container and isn’t using Page Builder. However, you could do the same thing with Edit Row > Layout > Row Layout > Full Width Stretched.
Alright. Thanks for getting back so quick.
I did try the Layout Builder widget and the same happend as with the other cells, they stacked up vertically.
but it makes sence what you’re saying and zooming out of the Vantage them I saw that the middle row doesn’t fill up the entire screen.
Going that way is the best thing I can get I guess. It’s just that I use the Zerif Pro theme, which section backgrounds fill the entire screen, no matter what zoom. But there isn’t any option to use the front page layout within the subpages.
Anyways, thank you so much for your effort.
Ok with you now :)
Page Builder should automatically be functioning in Zerif’s content container. Is that not the case?
Then, if you’d like to add a full width background behind your content, just use:
Edit Row > Layout > Row Layout > Full Width (not stretched).
It does work in the container, but I didn’t know how to add a full width section which will break the 1170px container.
But using the Layout works the way I wanted it – great. That was too easy. Sorry for bugging you with that.
Thank you
No problem at all. I’m not sure you’ll be able to add a full width section like the home page of the theme, but, Page Builder via row settings can make the row background full width (Full Width) OR it can make the entire row, including contents full width (Full Width Stretched).
All the best :)