How Do I Create Custom Blog List Layouts in SoCast?

Follow the steps below to create your own custom blog grid layouts in SoCast. Each step creates a unique grid, which can be used together on the same page or individually. If you need the required files emailed to you, please contact your account manager.

Note:

• These blog list layouts are designed to be displayed at full page width (1/1). If you reduce their size using the blog/list element (e.g., half page width), images may not crop as intended and could display a grey area or extra space underneath.

Step-by-Step Guide – Layout #1: Hero Image Grid

This layout creates a rectangular main or “hero” image for your blog list.

1. Go to Settings > Blogs & News > List.
2. Click Add Layout.
3. Enter a layout name (e.g., “Hero Image Grid”).

List Header HTML

1. Add the List Header HTML (see attachment). We recommend pasting it into a plain text editor (like WordPad) first to remove any formatting, then copy and paste it into the List Header HTML section.

List Item HTML

1. Add the List Item HTML (see attachment). Again, use a plain text editor to strip formatting before pasting it into the List Item HTML section.

Thumbnail Image Sizes

1. Set Thumbnail Image Width to: 600
2. Set Thumbnail Image Height to: 300
3. Click Save

Example of Layout #1 on Your Site

Step-by-Step Guide – Layout #2: Square Image Grid

This layout creates a grid of smaller, square images for your blog list.

1. Go to Settings > Website Settings > Blogs & News > List Layout.
2. Click Add Layout.
3. Enter a layout name (e.g., “Square Image Grid”).

List Header HTML

1. Add the List Header HTML (see attachment). Use a plain text editor to remove formatting before pasting it into the List Header HTML section.

List Item HTML

1. Add the List Item HTML (see attachment). Use a plain text editor to remove formatting before pasting it into the List Item HTML section.

Thumbnail Image Sizes

1. Set Thumbnail Image Width to: 300
2. Set Thumbnail Image Height to: 300
3. Click Save

Example of Layout #2 on Your Site

Attachments

Please refer to the attached files for the required List Header HTML and List Item HTML code for each layout.