Hi!
Maybe the answer to my question is very easy, but I need some help – I’m just a starter (sorry for such a basic beginning).
The guy who worked on the website previously created a nice page with the PageBuilder (here is the link http://metderegio.nl/regionale-verankering/). Looks like this :
When I try to add a new row, the whole beautiful creation disappear. The same happens when I try to change the order of rows. Impossible to change/add without breaking the layout. It looks like this after any change :
the LayoutBuilder widget looks like this :
I need to add some text to this and to move the blocks, but I can’t because it will impact the layout builder.
What can I do to safe this beautiful layout and to be able to make changes?
Many-many thanks in advance!!!
Hi Angelina,
Okay, so the issue here is that the designer used the tempory layout builder generated IDs. These IDs are regenerated every time the content changes and are only intended to be used by SiteOrigin Page Builder which is why you’re having such a hard time. :(
Is it possible for the designer to change over the IDs to use row and widget classes or is that not possible? If it’s not, you’ll need to manually change things over. It’s a tad complicated so please be aware of that.
Firstly, please back up your page. To do this, please open the page and click the Layouts button in the Page Builder toolbar. Click Import/Export and export the layout.
Now, please open the layout builder and open the first row by clicking the wrench icon. Head over to the row styles sidebar and open the Attribute settings group. Set the row class as lb-row_1 and then do the same for the rest of the rows but increase the number by 1.
Once you’re done, please head over to the widget styles sidebar of the layout builder and open the Attribute settings group. Set the row class to lb-container and then save the page.
Please navigate to WP AdminAppearanceCustom CSS. Add the following CSS:
.lb-container .panel-grid { margin-bottom: 0 !important; text-align: center; } .lb-container img { margin-left: auto; margin-right: auto; } .lb-container .panel-grid-cell { padding-bottom: 20px; padding-top: 20px; } .lb-container .widget_text { min-height: 225px; } .lb-row_1 .panel-grid-cell:first-of-type { background: #c1ef77 none repeat scroll 0 0; } .lb-row_1 .panel-grid-cell:last-of-type { background: #F0BA63 none repeat scroll 0 0; } .lb-row_2 .panel-grid-cell:first-of-type { background: #6CBDC3 none repeat scroll 0 0; } .lb-row_2 .panel-grid-cell:last-of-type { background: #81AD40 none repeat scroll 0 0; } .lb-row_3 { background: #F0BA63 none repeat scroll 0 0; }For future reference, you can do this without CSS by adding a layout builder to the columns inside of the layout builder and directly applied the styling via widget styles.