Ohio University

Web CMS: Simple Box

When you hover over the SimpleBox icon in the CKeditor, you'll see a message that says "Add Simple Box" but it's not very clear what that can do for you. The tool itself can be quite complicated to use, but let's go through a quick demonstration that will line up three images in an even grid. Be sure to follow these steps exactly to see the correct result. You can also follow along the video tutorial on YouTube.

  • First, click on the simple box icon.
  • Set the Insert # of boxes to "2"
  • Set the Insert # of Columns per box to "2"
  • Click "Ok"
  • Select the word "Title" and delete it
  • Select the first "Content..." And delete it
  • Your cursor will now be in front of the second "content" box, so choose the "insert media" icon in the toolbar
  • Select your first image
  • Set the image size so that all your images are the same size and/or to match your design size
  • Choose "align image left"
  • Click "embed"
  • Now move your cursor to the next "Content" box and select the word content and delete it
  • Your cursor is now on the 3rd content area
  • Choose Media and your next image
  • Choose the size
  • And then choose "Center" under "Align"
  • Click "embed"
  • Scroll down and choose the last "content" area in that column and delete it
  • This will bring up the "Title" for the second column
  • Choose the title text and delete it
  • Choose the first content area and delete it
  • Your cursor is now on the second content area
  • Choose Media and find your third image
  • Set the size
  • Under Align, choose "left" again
  • Click "embed"
  • Choose and delete the last two content areas

Your changes won't be obvious in the CKEditor, but you can choose "preview" to see how our changes will look once published. When you're happy with your changes, choose your save option.

Return to training