How Do I Create Custom Blog List Layouts in SoCast?

How Do I Create Custom Blog List Layouts in SoCast?

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 layout creates a unique grid, which you can use 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 (for example, 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 (for example, "Hero Image Grid").

Hero Image Grid Example

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 Header HTML Example

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.

List Item HTML Example

Thumbnail Image Sizes

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

Thumbnail Image Size Example

Example of Layout #1 on Your Site

Hero Image Grid on 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 (for example, "Square Image Grid").

Square Image Grid Example

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 Header HTML Example

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.

List Item HTML Example

Thumbnail Image Sizes

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

Thumbnail Image Size Example

Example of Layout #2 on Your Site

Square Image Grid on Site

Attachments

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