How do I Create a Column Based Layout with Images?

Note: You must be an Administrator or Content Administrator in order to edit content on the website.

Here’s what we will be creating:

 

  • Though I’m starting out with a blank content editor, you don’t have to. This guide can be completed with any amount of content already in place. What is important is: your cursor must be at the start of a new line.

 

  • Start off by clicking the ‘Table’ icon (see item 1) and selecting “Table Wizard” (see item 2).

 

  • Add one row and one column to create a 3×3 grid (see items 3 and 4).

 

  • Click on the upper left corner square and then click the ‘+’ to the right of “Row Span” twice (see item 5).

 

  • Click on the top middle square (see item 6).
  • Click the ‘+’ next to “Column Span” (see item 7).

 

  • Click the middle square (see item 8).
  • Click the ‘+’ next to “Column Span” (see item 9).

 

  • Switch tabs to “Table Properties” (see item 10).

 

  • Set Width to ‘900px’ (see item 11). Don’t forget the ‘px’.
  • Set Cell Padding to ’10’ (see item 12).
  • Switch tabs to “Cell Properties” (see item 13).

 

  • Click “Select All” (see item 14).
  • Set Content Alignment to Top Left (see item 15).

 

  • Select the left-most column.
  • Set Width to ‘100’ (see item 16).
  • Click the “Style Builder” icon (see item 17).

 

  • Select “Border” from the left-hand menu.
  • Set Right to: Solid Line, 1px, a color of your choice (see item 18).

 

  • Click the top-right row (see item 19).
  • Set Width to ‘800px’ (see item 20).
  • Set Content Alignment to bottom-left (see item 21).

 

  • Click the “Style Builder” icon (see item 22).

 

  • Select “Box” from the left-hand menu.
  • Set Padding Left to: 10px (see item 23).

 

  • Click the middle-right row (see item 24).
  • Set Height to ’40px’ (see item 25).
  • Set Width to ‘800px’ (see item 26).
  • Set Content Alignment to bottom-left (see item 27).

 

  • Click the “Style Builder” icon

 

  • Select “Box” from the left-hand menu.
  • Set Padding Left to ’10px’ (see item 29).

 

  • Click the middle-bottom square (see item 30).
  • Set Width to ‘600px’ (see item 31).
  • Click the “Style Builder” icon (see item 32).

 

  • Select “Box” from the left-hand menu.
  • Set Padding Left to ’10px’ (see item 33).

 

  • Click the bottom-right square (see item 34).
  • Set Width to ‘200px’ (see item 35).
  • Click the “Style Builder” icon (see item 36).

 

  • Select “Box” from the left-hand menu.
  • Set Padding Left to ’20px’ (see item 37).

 

  • We’re done with the table settings! Click Ok until you’re back at the content editor.
  • Tip: Before you enter all your content into any one cell of the table, type in a one word description of what the cell will hold (see item 38). This really helps remind me of the overall layout of the form. It also prevents errors where you can’t select a cell by clicking on it.

 

  • Enter the month and day into the left-most column (see item 39). I type them out on one line (don’t hit enter) and then set the text to ‘h2’. Then I click between ‘June’ and ’18th’ and click enter. After that, I center both lines of text.

 

 

  • Type in the title (see item 41).. I set the text to ‘h3’.

 

  • Add your content into the left-most cell below the title (see item 42).

 

  • Add some small snips of text in the remaining cell (see item 43). This could be contact info, dates, phone numbers, or anything you’d like.

 

  • We’re done! Click “Save” and behold your beautifully designed table.