Row / Column

Description and Code

Column shortcodes can be used in addition to other shortcodes when you wish content to be located in a specific column and wish to control that. Row shortcode is used to wrap the column shortcodes and align them correctly. It's highly recommended to always wrap the column shortcode in the row shortcode. Keep in mind that you can put other things into the columns, including other shortcodes. Here's an example of the row and column shortcode in code view:

[row_component class="" id=""][col_6_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_6_component][/row_component]

As the theme uses the Bootstrap 12 Columns Grid system, you can combine the column shortcodes to always result the system, for example you can combine 6-6, 3-3-3-3, 8-4 etc. In the example below, we combine the 8 and 4 column shortcode. Please note, how we use the number in the column shortcode - for example col_8_component and col_4_component. With other grids just replace those numbers with required one.

[row_component class="" id=""][col_8_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_8_component][col_4_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_4_component][/row_component]

Parameters

• background_color
  • defines the column background color
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• background_color_2
  • defines the column background color 2 for Linear or Radial Gradient style
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• background_color_fill
  • defines the background color fill style
  • Possible values - flat, linear, radial

• background_color_linear
  • defines the background color orientation of Linear Style
  • Possible values - vertical or horizontal

• background_image
  • defines the path for the image that you want to show as background
  • Possible values - string - like http://example.com/wp-content/uploads/image.jpg

• background_repeat
  • defines the background image repeat
  • Possible values - no-repeat, repeat, repeat-x, repeat-y

• background_position
  • defines the position of the background image
  • Possible values - left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom

• background_attachment
  • defines if the background image scrolls
  • Possible values - scroll or fixed

• background_attachment_parallax
  • defines if the background will have Parallax effect
  • Possible values - yes or no

• full_width
  • defines if the column will have full width, disables horizontal padding
  • Possible values - yes or no

• padding
  • defines the inner padding of the column
  • Possible values - number - with unit like 10px, 2rem etc.

• class
  • custom class for CSS of component
  • Possible values - string - like custom-element-class

• id
  • custom ID for CSS of component
  • Possible values - string - like custom-element-id

Basic Examples

8-4 Column - 66,7% - 33%

6-6 Column - 50% - 50%

4-4-4 Column - 33% - 33% - 33%

Customized Examples

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.

× Column with shortcodes and linear background color

Magazine 2

Demo Awesome

App 2

Demo Awesome

Business 5

Demo Awesome

Business 6

Demo Awesome

Previous Next

Morbi sollicitudin sagittis sem, nec consequat lectus. Etiam in velit sed metus interdum varius a at eros. Duis pellentesque, metus rutrum finibus congue, massa lacus scelerisque odio, id tempus elit mi vel lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.