This column will become the template for the page loop item, any elements inside with WordPress page data feeds will be populated accordingly. This column will become the template for the post loop item, any elements inside with WordPress post data feeds will be populated accordingly. This option is used to set the type variable for the loop: Post When a project has its CMS option set to WordPress an additional set of controls will be available in the sidebar inspector that enable the setup of WordPress content loops.
The segmented column controls found within the sidebar inspector can be adjusted quickly by simply mousing over the digit section found between the left and right arrows and swiping left or right on your magic mouse (x1 finger) or trackpad (x2 fingers).
These controls also let you force all elements within a column to stretch to the full height of the parent column, this can be useful when you want card Brics to be evenly sized in height. The column alignment controls let you quickly and easily align a column to the top, middle or bottom of the parent row. You can find out more about column ordering and how it works in Bootstrap 4 here. If you then apply a custom order to what was the second column, but is now the first and set its order position to 2, you will see that it now moves to the end of the columns and sits behind the column with the custom order of 1. This is because although the column is set to be positioned first, the other column(s) within the parent row do not have a custom order setting, so they are displayed before those with custom values. So if you have 2 columns and set the first column to order 1 it will move behind the second column rather than stay in the same 1st position. When a column has its order value customised, it will always be displayed after all columns that do not have a custom order applied. The column order controls let you set the order of a column within the parent row, by default columns are ordered from left to right in the order that they physically exist (within the DOM tree).
This is because it may appear that the settings have no effect, if they are not set up correctly. The column order controls can be a little confusing when using them for the first time. When you change the offset of a column, it will also push or pull the columns to the right of it and in some cases (if there is not enough available horizontal space) move them to a new line. For example, if you have 2 columns set to inherit, each column will take up 50% of the available space. If a column has its size set to inherit ∞ on all breakpoints, it will no longer be fixed and will instead automatically set its size based on the number of columns within the parent row, to create an even coverage of the available space. For example, if a column has a width of 6, it will occupy half of 12, meaning it will take up 50% of the screen space. A column can have a fixed size from 1 to 12, when a column has a fixed size, it will only occupy enough space to fill the correct percentage of space allowed when this space is divided into 12 columns. The layout grid within Blocs is broken up into 12 columns that are evenly sized to fill the available main site container space.
The easiest way to resize a column is to select it on the design canvas and simply drag the resize handle located on the right side of the column selection marker. The easiest way to select a column is using the layer tree.Ĭolumns have various width settings that can be applied using the canvas controls or via the sidebar inspector controls.
Selecting a columnīecause the content that is nested within a column may occupy the entire space of a column, it can be tricky to select them directly via the design canvas. When the last column within a row is deleted, another empty one is automatically added. A columns parent row cannot exist without containing at least one column, this means it’s impossible to delete the last column within a row.