How can we help?

In our Responsive system, the focus on your content will be a row of content going all the way across a page. Within a row, it is possible to segment it into columns. The old way of doing that with Tables does not work with Responsive architecture, so this article will show you how to work with elements called Divs for your columns. Currently, you can do this in any Content module, here is how:

First, click Website > Website Editor and go to the page on which you want to work. Once you're there:

1. Either edit an existing Content module on a page by clicking the Edit button on the module toolbar:

Or, create a new Content module by clicking +Add Content at the top of the editor and click on Add Body Content:

Select the Content module at the top of the list and click on the blue Add button on the far right. You will go to the Edit view for the new Content module.

2. In the Content Editor buttons across the top, click on the Templates button:

3. In the list that comes up, you can choose how many Div columns there are and what their width ratios are on the page, for example, 1-1-1 will be three equal columns, and 1-2-1 will be three columns with the middle one twice as wide as the others. Here are the current templates for Divs you can choose from:

4. If you choose, for example, 1-1-1, you would see three boxes running the width of the editor, and you can add content in each box, as in this example:

Those boxes will stretch or shrink to fit whatever screen you are viewing, in the responsive style.

5. You can also embed a div Template inside another div. So in the example above, if we want to have two images side by side in the middle div, we click in there for an insertion point, then we can use the Templates button, select 1-1, and add our images, like this:

You can use embedded divs this way for layouts of just about any type, feel free to be creative!

Please Note: One thing to remember about divs on smaller screens is that they will stack on top of each other. This is something tables do not do, which is why, for a truly mobile-friendly site, you do not want to use tables.

So from left to right, you want your most important content to be on the left, because each div will stack under the one to the left of it, so in the case above, you would see something like this on a smaller screen if they had to stack: