Create up to 4 columns in the pages. The screen will give you option of selecting a row with 2,3 and 4 column but you can further edit to create row with other combinations like row with “3/4 and 1/4”, “2/3 and 1/3”, etc. You can insert images, texts or other shortcodes inside columns.

screen-column

Some example are :

1/2-1/2 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna..

The code will look like:

[tx_row]
[tx_column size="1/2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[/tx_row]


1/3-1/3-1/3 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna..

The code will look like :

[tx_row]
[tx_column size="1/3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[/tx_row]

1/3-1/3-1/3 Column with combination of images and heading

8

Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.

Know More..

7

Heading Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.

Know More..

2

Heading Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna..

Know More..

The code will look like :

Get the "Text" version here

1/4-1/4-1/4-1/4 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna..

The code will look like :

[tx_row]
[tx_column size="1/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[/tx_row]

2/3-1/3 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.

The code will look like :

[tx_row]
[tx_column size="2/3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[/tx_row]

3/4-1/4 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in eros vel ligula pulvinar vehicula a non ipsum. Morbi finibus, erat vitae condimentum tempus, velit tellus dignissim sem, sed pellentesque nulla nisl aliquam magna.

The code will look like :

[tx_row]
[tx_column size="3/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[tx_column size="1/4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/tx_column]
[/tx_row]

10 thoughts on “Columns

  1. For some reason, this code does not work for my page anymore.

    Is there another way to create two columns?

    Best regards,
    Jennifer Ting

    1. Could you post your URL? make sure you have the plugin “TemplatesNext Tollkit” is installed and active

  2. May I know how to insert pictures in the columns? I tried to do it myself using according to the px in the page but it is not responsive when using a medium size tablet like ipad, mobile and pc is still acceptable. Does this function support image?

  3. I’m trying to do a 3 column split with a wide centre column but
    [tx_column size="1/4"]Content[/tx_column]
    [tx_column size="2/4"]Content[/tx_column]
    [tx_column size="1/4"]Content[/tx_column]
    Doesn’t work is there another why around it?

    1. try

      [tx_column size="1/4"]Content[/tx_column]
      [tx_column size="1/2"]Content[/tx_column]
      [tx_column size="1/4"]Content[/tx_column]

  4. Hi there,

    For the 1/3-1/3-1/3 Column with combination of images and heading example, how do we make the central image the same height as the outer images?
    I’m trying to make a 1/4-1/4-1/4-1/4 image and heading combination, but I’m not sure of the best way to change the height of the central images. Please advise 🙂

    Thanks.

    1. You will have to manually adjust the image with visual reference, since outer columns have less margin making the columns slightly wider, the height will have to belittle less

  5. Hi, can we add background color in each column background?

    so for 3 column, each have different background color (which have #hexcode value)

    TQ so much

    1. You can try fancy blocks inside columns.

      Also you can try installing plugin “Page Builder by SiteOrigin”, next version of templates next toolkit will have extensive integration with page builder.

      TemplatesNext Toolkit page builder integration

Leave a Reply

Your email address will not be published. Required fields are marked *