How to create Boxed Images with text content

December 24, 2013|

This video provides an overview of how to create nice looking boxed images that contains a colour background and text content. For example, you can check out the screenshot below:

boxed-images

Or, you can visit the front page of the Encounters live demo website here: 

Boxed Images

Covered in Video 1:

  • Introduction to the Boxed image style.
  • Getting the HTML code snippet to get started.
  • Adding images and other elements
  • Adding boxed images to a page and to a widget

Image Thumbnail Sizes

To help you determine what size of thumbnails to create for your layout, whether you are using a 1,2, 3, 4, or more columns, these following dimensions can be used as a guide. Also remember that because this theme is responsive, if you created larger image thumbnails, they will auto resize down to fit the column area.

  • 1 column = 1170 pixels wide
  • 2 column = 570 pixels wide
  • 3 column = 370 pixels wide
  • 4 column = 270 pixels wide

Video 1

 

 

Covered in Video 2:

  • Introduction to the Boxed image style.
  • Getting the HTML code snippet to get started.
  • Adding images and other elements
  • Adding boxed images to a widget

 

Categories: Setup Tutorials for Encounters

Leave a Reply