Below you’ll find CSS snippets to achieve small tasks that might not be included in Page Builder settings. These snippets can be added to AppearanceCustom CSS if using SiteOrigin CSS, CustomizeAdditional CSS or your child theme style.css file.
Center all Page Builder Widget Titles
.panel-grid-cell .widget-title {
text-align: center;
}
If you’d like to restrict the above rule to a particular page, please, see Unique Page Styling with Custom CSS Body Classes.
Center Align Cell Content While Stretching the Cell Background
To stretch cell background images or colors, edit the row, open the Layout section, and set Cell Vertical Alignment to Stretch. The cell content will be top-aligned. To vertically center align the content within a cell:
– Edit the row and select the cell you’d like to center vertically.
– Note the Cell Styles panel that appears in the right column.
– Open the Attributes section and insert the following in the CSS Declarations field.
display: flex align-items: center
Target Full Width Rows
div.siteorigin-panels-stretch[data-stretch-type="full"] {
/* CSS properties here */
}
Target Full Width Stretched Rows
div.siteorigin-panels-stretch[data-stretch-type="full-stretched"] {
/* CSS properties here */
}