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

[tx_divider size=”24″]

Some example are :

1/2-1/2 Column

[tx_row] [tx_column size=”1/2″] 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.
[/tx_column] [tx_column size=”1/2″] 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..
[/tx_column] [/tx_row]

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]


[tx_divider size=”24″]

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

[tx_row] [tx_column size=”1/3″] 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.
[/tx_column] [tx_column size=”1/3″] 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.
[/tx_column] [tx_column size=”1/3″] 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..
[/tx_column] [/tx_row]

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]
[tx_divider size=”24″]

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

[tx_row] [tx_column size=”1/3″] 8
[tx_spacer size=”12″] [tx_heading style=”default” heading_text=”Heading One” tag=”h3″ size=”20″ margin=”18″ align=”left”]

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..
[/tx_column] [tx_column size=”1/3″] 7
[tx_spacer size=”12″] [tx_heading style=”default” heading_text=”Heading Two” tag=”h3″ size=”20″ margin=”18″ align=”left”]

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..
[/tx_column] [tx_column size=”1/3″] 2
[tx_spacer size=”12″] [tx_heading style=”default” heading_text=”Heading Three” tag=”h3″ size=”20″ margin=”18″ align=”left”]

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..
[/tx_column] [/tx_row] [tx_divider size=”32″]

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

[tx_row] [tx_column size=”1/4″] 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.
[/tx_column] [tx_column size=”1/4″] 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.
[/tx_column] [tx_column size=”1/4″] 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..
[/tx_column] [tx_column size=”1/4″] 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..
[/tx_column] [/tx_row]

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]
[tx_divider size=”24″]

2/3-1/3 Column

[tx_row] [tx_column size=”2/3″] 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.
[/tx_column] [tx_column size=”1/3″] 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.
[/tx_column] [/tx_row]

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]
[tx_divider size=”24″]

3/4-1/4 Column

[tx_row] [tx_column size=”3/4″] 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.
[/tx_column] [tx_column size=”1/4″] 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.
[/tx_column] [/tx_row]

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]
[tx_divider size=”24″]

8 Replies to “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

Leave a Reply to JJ Cancel reply

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