Content
Content
Content
[su_row]
  [su_column size="1/2"] <img src="http://placekitten.com/100/100" /> [/su_column]
  [su_column size="1/2"] <img src="http://placekitten.com/100/100" /> [/su_column]
[/su_row]

[su_row]
  [su_column size="1/3"] Content [/su_column]
  [su_column size="1/3"] Content [/su_column]
  [su_column size="1/3"] Content [/su_column]
[/su_row]

Table of contents

  1. Description
  2. Options
    1. [su_row] – columns container
    2. [su_column] – single column
  3. Custom formatting 
  4. Formatting of shortcodes
  5. Borders and background

Description

Content can be divided into columns with the help of two shortcodes - [su_row] and [su_column]. The first shortcode, [su_row], serves as a container for columns and is used for the creation of the line with columns. The second shortcode, [su_column], creates columns and should contain the necessary content.

Options

[su_row] – columns container

Option namePossible valuesDefault value
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

[su_column] – single column

Option namePossible valuesDefault value
size
Select column width. This width will be calculated depend page width
1/1 (Full width)
1/2 (One half)
1/3 (One third)
2/3 (Two third)
1/4 (One fourth)
3/4 (Three fourth)
1/5 (One fifth)
2/5 (Two fifth)
3/5 (Three fifth)
4/5 (Four fifth)
1/6 (One sixth)
5/6 (Five sixth)
1/2
center
Is this column centered on the page
yes or nono
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

Custom formatting 

If you use [su_row] and [su_column] shortcodes, it is recommended to use custom formatting mode. This mode can be enabled or disabled on plugin settings page. Follow the path: Dashboard - Shortcodes – Settings – Settings tab. By default this mode is enabled.

Custom formatting allows to avoid wrong formatting of shortcodes at processing of post content.

Formatting of shortcodes

If you notice excess gaps in columns or wrong alignment of them, then you should delete line breaks and extra whitespaces between shortcodes. This approach can be used also at enabled custom formatting mode. Example:

[su_row][su_column size="1/2"] Content [/su_column] [su_column size="1/2"] Content [/su_column][/su_row]

Borders and background

You can easily add borders and backgrounds to columns using custom CSS code. Follow instructions below to do that.

First, navigate to Dashboard – Shortcodes – Settings and paste the following CSS snippet into the Custom CSS code field:

.su-row.columns-with-border .su-column-inner {
  border: 2px solid #de3e35;
  padding: .5rem 1rem;
}
.su-row.columns-with-border .column-with-green-border .su-column-inner {
  border: 2px solid #5dde35;
}

.su-row.columns-with-background .su-column-inner {
  background: #de3e35;
  color: #fff;
  padding: .5rem 1rem;
}
.su-row.columns-with-background .column-with-green-background .su-column-inner {
  background: #5dde35;
}

Use the following custom CSS classes to add borders:

Column content
Column content
Column content
[su_row class="columns-with-border"]
  [su_column size="1/3"] Column content [/su_column]
  [su_column size="1/3"] Column content [/su_column]
  [su_column size="1/3" class="column-with-green-border"] Column content [/su_column]
[/su_row]

Use the following custom CSS classes to add backgrounds:

Column content
Column content
Column content
[su_row class="columns-with-background"]
  [su_column size="1/3"] Column content [/su_column]
  [su_column size="1/3"] Column content [/su_column]
  [su_column size="1/3" class="column-with-green-background"] Column content [/su_column]
[/su_row]