Layout: Variable Columns

Variable column layout


Category: Templates - Sections - Waterlogic Layout.
Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html


By default, the column widths are 50/50 in width but can be changed using the Bootstrap Column 1 and Bootstrap Column 2 settings. For documentation on changing column widths using Bootstrap classes see http://websitedocs.waterlogic.com/books/content-blocks/page/grid-layout 

Variable-Columns-layout.png

Variable-Columns-settings.png

Settings
Use as hero?
Use this variable column layout as a Hero section, this adds in-hero classes which adjust the look of the layout across mobile and desktop.
Bootstrap Column 1
Classes by bootstrap for the grid. Defaults to col- https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap Column 2 Classes by bootstrap for the grid. Defaults to col-12 https://getbootstrap.com/docs/4.0/layout/grid/
Data-UID Attribute Unique data attribute used for referencing the layout.
Show full width? Should the section show full width. Using Bootstrap container and container-fluid.
Show Gutters? Should the gutters show for this layout? Default to Yes.
Vertical Align? Should the content within this layout show vertically aligned. Default to Yes.
Background Colour The background colour of the layout. Default to White.
Add background to row? Add the background colour to the section or to the row, if added to the row then rounded corners are added to the section for a stylised effect 
Padding Top Padding top for the layout. Default to 45px.
Padding Bottom Padding bottom for the layout. Default to 45px
Margin Top Margin top for the layout. Default to 60px
Margin Bottom

Margin bottom for the layout. Default to 0px

Reverse Mobile Order Should this layout be reversed on mobile? Useful for alternating 50/50 content layouts.

 

 


Revision #3
Created Tue, Sep 29, 2020 1:05 PM by Nathanael McMillan
Updated Tue, Sep 29, 2020 2:09 PM by Carly Smith