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.

    • Related Articles

    • What Blog List Layouts Are Available in SoCast and How Do They Work?

      What Blog List Layouts Are Available in SoCast and How Do They Work? Who Is This Article For? All users with Blog permissions Applies to all SoCast themes Overview of Blog List Layouts SoCast offers a variety of blog list layouts so you can present ...

    • How Do I Manage Blog Settings in SoCast?

      How Do I Manage Blog Settings in SoCast? Use SoCast’s blog settings to control your blog’s appearance, advertising, sharing options, and comments. These tools help you customize your blog’s look, improve engagement, and create monetization ...

    • What Contest List Widget Layouts Are Available in SoCast?

      What Contest List Widget Layouts Are Available in SoCast? This Article Is For: Users who have access to the Contest Tool Users who have access to Pages, Blogs, or Sidebars SoCast offers several layout options for the Contest List widget, allowing you ...

    • How Do I Create and Manage Blog Categories in SoCast?

      How Do I Create and Manage Blog Categories in SoCast? Who Is This For? This article is for: All users with access to Blogs & Blog Categories Applicable to all themes Step-by-Step: Create a Blog Category Go to Website > Blogs & News in your SoCast ...

    • How Do I Enable Pagination or the 'See More' Button for Blog Lists in SoCast Engage?

      To enable pagination (the 'See More' button) for blog lists in SoCast Engage, follow these steps: Log in to SoCast Engage. Navigate to Website on the left panel. Select Pages/Blogs and choose the page where your blog list is displayed. Locate the ...