Notes:

• These blog list layouts were created and meant to be displayed at full page width 1/1. If you reduce them in size using the blog/list element (i.e half page width) they will not display the image crops as intended, and may display a grey area or 'space' underneath.

Step-by-step guide- Layout #1

The first file creates a rectangular main or “hero” image. (See below for an example)

1. Go to: Settings>Blogs & News>List
   
2. Click on:  Add Layout
3. Add layout name:  (ex. “Hero Image Grid”)

List Header HTML:

1. Add “ List Header HTML ” (attached below). We suggest adding it to a Wordpad like application first to strip it of any formatting, and then copying and pasting it under the “List Header HTML” section.

List Item HTML:

1. Add “ List Item HTM L” (attached below). We suggest adding it to a Wordpad like application first to strip it of any formatting, and then copying and pasting it under the “List Item HTML” section.

Thumbnail Image Sizes:

1. Change  “Thumbnail Image Width” to: 600

2. Change “Thumbnail Image Height” to:  300

3. Click “Save”

Example Of How It Will Look On Your Site:

Step-by-step guide-Layout #2

The second file creates a system of smaller square images. (See below for an example)

1. Go to: Settings>Website Settings>Blogs & News>List Layout
2. Click on:  Add Layout
3. Add layout name:  Ex. “Square Image Grid”

List Header HTML:

1. Add “ List Header HTML ” (attached below). We suggest adding it to a Wordpad like application first to strip it of any formatting, and then copying and pasting it under the “List Header HTML” section.

List Item HTML:

1. Add “ List Item HTML ” (attached below). We suggest adding it to a Wordpad like application first to strip it of any formatting, and then copying and pasting it under the “List Item HTML” section.

Thumbnail Image Sizes:

1. Change  “Thumbnail Image Width” to: 300
2. Change “Thumbnail Image Height” to: 300
3. Click “Save”

Example Of How It Will Look On Your Site:

Blog Grid Layout #1 & Layout #2