Shortcodes Ultimate

[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]

Content

[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

Description
Options
1. [su_row] – columns container
2. [su_column] – single column
Custom formatting
Formatting of shortcodes
Borders and background
Last column is lower than the others

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 name	Possible values	Default 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 name	Possible values	Default 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 no	no
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.

This option can be helpful if you're facing issues with layout.

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

[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

[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]

Last column is lower than the others

This problem may occur because of how WordPress parses shortcodes and paragraphs. If you see this issue, try removing line breaks between the row and the column shortcodes. See the example below.

Before:

[su_row]
[su_column]
COLUMN CONTENT
[/su_column]
[su_column]
COLUMN CONTENT
[/su_column]
[/su_row]

After:

[su_row][su_column]
COLUMN CONTENT
[/su_column][su_column]
COLUMN CONTENT
[/su_column][/su_row]

Helpful?

🤝 Thank you!

Columns