Standard Page Styles

All text should be written with the WYSIWYG editor disabled. It's enabled by default so start by clicking the button to hide the editor:

A full width large font section can be added:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tempor nisi. Nunc non ipsum vitae nunc rhoncus tincidunt. Cras dictum risus in ornare aliquet.

To do so, simply add the content in a div with the classes span-100 (for 100% width) and large for setting the font to larger thinner type:

Individual sections should be separated with a <hr> tag - this not only provides spacing but also clears any floats:

Adding a class of border to the <hr> tag will make it display as a visible page divider:


You can split text into columns of 50% width:

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.

To do so, simply add the content in 2 separate divs, with the classes span-50 (for 50% width) and left for setting the float position:

You can also split text into columns of 33% width, 25% width and 20% width:

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

To do so, simply add the content in the relevant number of separate divs (3 for 33%, 4 for 25%, 5 for 20%), with the classes span-33 (for 33% width), span-25 (for 25% width), and span-20 (for 20% width) and left for setting the float position:

You can add a "pull-out" quote:

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

“A pull out quote can go in a space like this rather nicely I think.”

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.Cras ut arcu a dolor imperdiet fermentum vel nec orci. Donec sodales aliquam ligula, at ultrices sem sollicitudin ac. Vivamus sit amet accumsan urna, non ultrices neque. Curabitur in feugiat urna. Proin pharetra odio sed ornare tempor. Aliquam arcu nulla, sodales accumsan justo vitae, molestie tristique massa. In eget ligula ut est eleifend auctor nec quis nulla.

This is done by adding the quote in a div with a class of quote :

You can add images within your divs using the standard Magento procedure:

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

Nulla porta, magna et mattis mollis, diam felis commodo urna, quis ultrices massa neque a orci. Fusce hendrerit quam nulla, in pellentesque nulla varius et. Morbi eu cursus est. Duis suscipit id metus sit amet dictum. Donec eu ullamcorper massa, rhoncus laoreet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sem lectus, ornare eu tortor et, euismod vulputate enim. Vivamus aliquam nisl at pharetra porttitor. Nulla facilisi. Vestibulum eu nisi sit amet mi commodo dignissim ac a justo.

To do so, simply place your text cursor in the location you want the image to appear, and click the Insert Image button, browse to your image, select it and upload. Once uploaded, double-click the image in Magento's Media Storage window to insert it into the page:

Your code should then look like the following:

You can also add a table (which will expand to fit it's container):

Name ID Favorite Color
Jim 00001 Blue
Sue 00002 Red
Barb 00003 Green

The html for that is as follows: