Browse: Home > Shortcodes > Design > Columns

Columns

Content

Description

Allows to design new layouts & brake content to columns.

Features
  • Flexible
  • Unlimited times per page

Usage

[one_half] Column #1 [/one_half]
[one_half] Column #2 [/one_half]
Usage notes
  • Use the m attribute for setting a custom margins between columns.

  • No need worry about right calculation of the columns width e.g. you need to have three columns: 25% + 25% + 50%. In this case you can use shortcodes:

    [one_fourth] A [/one_fourth]
[one_fourth] B [/one_fourth]
[two_fourth] C [/two_fourth]

    instead:

    [one_fourth] A [/one_fourth]
[one_fourth] B [/one_fourth]
[one_half] C [/one_half]

    However, both examples will works fine.

Examples

One Half
[one_half] Content goes here. [/one_half]
1/2

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/2

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Third
[one_third] Content goes here. [/one_third]
1/3

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/3

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/3

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fifth
[one_fifth] Content goes here. [/one_fifth]
1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Sixth
[one_sixth] Content goes here. [/one_sixth]
1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Two Third
[two_third] Content goes here. [/two_third]
2/3

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Third
[one_third] Content goes here. [/one_third]
1/3

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Three Fourth
[three_fourth] Content goes here. [/three_fourth]
3/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Half
[one_half] Content goes here. [/one_half]
1/2

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Half
[one_half] Content goes here. [/one_half]
1/2

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fourth
[one_fourth] Content goes here. [/one_fourth]
1/4

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

Two Fifth
[two_fifth] Content goes here. [/two_fifth]
2/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing.

Three Fifth
[three_fifth] Content goes here. [/three_fifth]
3/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Fifth
[one_fifth] Content goes here. [/one_fifth]
1/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem.

Four Fifth
[four_fifth] Content goes here. [/four_fifth]
4/5

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien.

One Sixth
[one_sixth] Content goes here. [/one_sixth]
1/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper.

Five Sixth
[five_sixth] Content goes here. [/five_sixth]
5/6

Integer fermentum venenatis libero. Integer luctus, mi ut pretium ullamcorper, nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna. Sed facilisis accumsan nisi. Ut mattis libero quis sapien, , nibh lorem volutpat odio, id facilisis diam metus non libero. Ut placerat tellus sed neque. Mauris sit amet mi. Vivamus commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit nunc ullamcorper blandit urna.

Attributes

m

Margin by right. (Default: 25), (Pixels)

m="10"