Columns Block

May 22, 2020 Multi User Multi Builder Elements, Multi Theme and Website Builder

Use Columns Block from Multi Elements to start designing a system of columns and personalize your website’s layout. It allows you to add many Column Blocks which you can further arrange and style.

Columns Block options:

  • Reverse column order in rows – you can change column order on mobile or on all devices.
  • Top margin – set the columns top margin. Use any CSS-compatible margin value.
  • Bottom margin – set the columns bottom margin. Use any CSS-compatible margin value.
  • Top padding – set the columns top padding. Use any CSS-compatible padding value.
  • Bottom padding – set the columns bottom padding. Use any CSS-compatible padding value.
  • Mobile breakpoint – set columns breakpoint on mobile. Use pixels.
  • Tablet breakpoint – set columns breakpoint on tablet. Use pixels.
  • Full width – set your columns to full page width. This option works with a wide, no-sidebar page layout.
  • Standard content width – set columns content to full width or fit it to standard page width. This option is available in full width columns mode.
  • Max. width – you can set a maximum columns width. Use any CSS-compatible max-width value. This option is available with Full width option off.
  • Vertical alignment – set your columns’ vertical alignment to top, center or bottom.
  • Equal column height – you can make your columns have equal height.
  • Column gap – set the width of the gap between the columns. 45 px is the default gap. To make the columns overlap, use a negative value.
  • Row gap – set the width of the gap between the column rows. 45 px is the default gap. To make the columns overlap, use a negative value.
  • Border – set your columns borders to horizontal, vertical, horizontal and vertical, all, vertical and top, vertical and bottom,  or none.
  • Border width – set columns border width in pixels.
  • Border style – set the columns border style to solid, dashed or dotted.
  • Border color – set columns border color.
  • Background color – set the columns background color.
  • Background hover color – set the columns background hover color.
  • Background image – set a background image to your columns. Choose an image from your WordPress Media Library or upload a file directly from your computer.
  • Parallax effect – you can add a parallax effect to your columns.
  • Background size – set the columns background size. Choose from auto, cover, contain, or add a custom value.
  • Custom background size – set a custom columns background size using any CSS-compatible background-size value.
  • Repeat background – you can choose to repeat the background image, to repeat just horizontally or just vertically, or not to repeat at all.
  • Background position – set your background position using one of the available position values.
  • Background gradient – you can set the background colors to gradient.
  • Background gradient color – set the background gradient color of your columns.
  • Background color position – set the columns background color position.
  • Background gradient color position – set the columns background gradient color position.
  • Background gradient type – set the background gradient type from linear and radial.
  • Background gradient angle – set the background gradient angle using 0-360 degrees. This option is available with the linear gradient type.
  • Background gradient position – set the background gradient position. This option is available with the radial gradient type.
  • Class – add a custom CSS class to your columns set.
  • ID – add a CSS ID to your columns.
  • Style – add an inline CSS style to your columns.

Column Block

Add any number of individual columns to your columns set using Column Block.

  • Size – set the size of the column, choosing from: half (1/2), one third (1/3), one fourth (1/4), one fifth (1/5), one sixth (1/6), two thirds (2/3), three fourths (3/4), or custom to use a percent value.
  • Custom size – set the column width in percents. This option is available after choosing custom in Size option above.
  • Size on mobile – set the column width on mobile, using percents. The breakpoint for mobile layout can be set in Columns block settings.
  • Side on tablet – set the column width on tablet, using percents. The breakpoint for tablet layout can be set in Columns block settings.
  • Minimum height – set the minimum column height. Use any CSS-compatible min-height value.
  • Content vertical align – set your column’s content vertical alignment to top, center or bottom.
  • Text hover color – set the default text hover color for text elements inside this column.
  • Background color – set the column background color.
  • Background hover color – set the column background hover color.
  • Background image – set the column background image. Choose an image from your WordPress Media Library or upload a file directly from your computer.
  • Parallax effect – you can add a parallax effect to your column.
  • Background size – set the size of the column background, choosing from auto, cover, contain, or custom.
  • Repeat background – you can choose to repeat the background image, to repeat just horizontally or just vertically, or not to repeat at all.
  • Background position – set the background position, using any CSS-compatible background-position value.
  • Background gradient – you can set the background colors to gradient.
  • Background gradient color – set the background gradient color of your column.
  • Background color position – set the column background color position.
  • Background gradient color position – set the column background gradient color position.
  • Background gradient type – set the background gradient type from linear and radial.
  • Background gradient angle – set the background gradient angle using 0-360 degrees. This option is available with the linear gradient type.
  • Background gradient position – set the background gradient position. This option is available with the radial gradient type.
  • Shadow hover color – set the shadow hover color.
  • Shadow hover blur – set the shadow hover blur.
  • Hover horizontal offset – set the shadow horizontal offset.
  • Hover vertical offset – set the shadow vertical offset.
  • Class –  add a custom CSS class to your column.
  • ID – add a CSS ID to your column.
  • Style – add an inline CSS style to your column.

You can add any type of Multi Builder or Gutenberg block to Column block.