Working with Column Templates

Sometimes you just want to shake things up a bit so, rather than just have a standard content of text and images why not use some templates to give the layout a little boost!


Adding a Template

  1. To add a template to your content, put the blinking cursor in the paragraph where you want the template to be displayed. Now click the template icon.Adding a template
  2. You will now see the Content Templates pop-up
    templates
  3. Scroll through and choose the template you wish to use. The most commonly used template is Two equal columns.
  4. The template will now be embedded into your page and will display as seen below.
    Two Column Content
  5. You can add text to the left and an image to the right or visa versa.

TOP TIP

It is best to highlight and overwrite content instead of deleting. When working in the WYSIWYG Editor you are still able to accidentally delete the code which you can't see.

two columns


Align your text to the middle of the image (vertically)

To further improve the layout, you can middle align your image to the text. To do this, you will have to enter the SOURCE code view by clicking SOURCE (top left of the Editor).

  • You will need to locate this part within your template.
<div class="grid-x grid-margin-x">
  • add align-middle just after grid-x so it looks like the following;
<div class="grid-x grid-margin-x align-middle">
  • Click SOURCE (top left of the Editor) 
  • Your text will now align vertically centred to your image.