This widget is used to create a segmented area into which you can place other widgets. For example, if you wanted to arrange 3 images in a row, you would first add a layout widget with 3 columns, then add an image widget to each column. There are separate settings to control the style of the layout as a whole and each individual column.
When you drop other widgets (like an image or banner) on the page, they come already “wrapped” in a layout and column. If you delete a widget, you’ll need to also delete the layout and column associated with it.
LAYOUT
Name — The widget name is only used internally and doesn’t appear on the storefront. It is used in the Layers nav to help you identify how widgets are arranged on the page.
Columns — A layout widget can be segmented from 1 to 6 columns.
Column layout — This allows you to size each column relative to adjacent columns.
Margin — Margin is the amount of space (in pixels) outside the border of the layout.
Padding — Padding is the amount of space (in pixels) inside the border of the layout.
LAYOUT BACKGROUND
Background — Specify a solid colour or image background for the entire layout.
Image Fit — Fill will resize the image to “fill” the entire area of the layout. Fit will resize the image so that the entire image “fits” within the layout without being cut off.
Image opacity — Adjust the opacity of your background image. This can create a “translucent” effect.
Image align — Specify how the background image should horizontally and vertically align within the layout.
LAYOUT BORDER
Border style — Select between a solid, dashed, or dotted line border.
Border color — Select a border color.
Border thickness — Set the border thickness in pixels.