The Home Page Builder is designed to give users more control over their homepage and feed page layouts, removing the need for developer intervention when making changes. It provides flexibility through a variety of pre-built components and allows for easy customization.
Accessing the Home Page Builder
To access the Home Page Builder, go to your organization's builder section:
- SI national site user: Click here
- FanSided user: Click here
- Mental Floss: Click here
*** Users must have the Craft Admin role assigned to them by their user credentials.
Contact your editorial admin or support to request that the Craft Admin role be added to your user.
Once logged in to the page builder, you can either edit an existing page or create a new one.
Creating a New Page
-
Click on the Create Page button.
-
Fill in the required fields:
-
Page Name (e.g., "Homepage")
-
Page URL (for a homepage, the URL must end with a “/” so the path field won’t be empty. This is only for the path field and will not reflect in the actual homepage URL)
- Page Type (eg., feed page, homepage, video page)
-
SEO Metadata (Meta Title, Description, Image url)
- The image URL must be obtained from the Voltax Image Library. To learn how to upload and obtain image URLs, click here.
-
-
Click Save Draft to proceed.
***Unless all mandatory fields are filled, the save button will remain grayed out.
Editing an Existing Page
- In the Page Builder main page, click the Edit button on the page's line item.
- Because this is a saved version, the mandatory fields are already filled out. However, we do recommend reviewing them before publishing any pages
Components Overview
The Home Page Builder includes a range of components divided into 5 main groups:
-
Basic Layout Components
- Multimedia components
- Featured components
-
Sports Illustrated Components
-
Other Custom Components
Components
Title
-
Allows users to add a title anywhere on the page.
-
Options for text size, alignment (left, center, right).
Heading
-
Similar to the Title component but offers more formatting options.
Text Editor
-
A simple text block allowing formatting (bold, italics, underline, lists, and hyperlinks).
-
Cannot include images or HTML.
CTA Button
- Displays a CTA button to direct to a new destination
- Allows up to 8 CTA buttons in 1 row
- Can change button from PRIMARY COLOR to SECONDARY COLOR
- Can change button alignment on the page
Layout Section
-
Allows grouping of components into sections with a shared background color.
-
Some components can be dragged into the section to inherit settings.
Spacer
- Allows creating a separating gap between one component to the other
-
Size of the spacer can be adjusted (low, medium, high)
Multimedia Component
- SportsRadar component can be dragged to the page. That said, you will need to include the embed code. Only authorized users would have access to these embed codes.
- Voltax Video component can be dragged to the page. That said, you will need to include the VMS video embed code.
Featured Content
Article List Section
-
Displays a customizable list of articles (3-20 articles per section).
-
Background color options: default or light gray.
-
Supports both manual selection and automatic feed-based selection.
-
Different components inside the Featured section (1-article section), Feed Component (usually used for top of the homepage), and Horizontal row (article blocks side-by-side) work exactly alike the Article List Section
Hero Component
-
Highlights a single featured article.
-
Option to manually select the article or pull from a feed.
SI Cover & SI Content Section
-
Designed specifically for Sports Illustrated pages.
-
Allows selecting articles from different feeds (SI National, SI Nation Network, SI Swimsuit).
-
Configurable layout with featured articles and article lists.
- Functionality is the same as Article List Section
Issue Section & Horizontal Row
-
Used for magazine-style layouts.
-
Supports title, date, image, and links.
Preview and Publishing
-
Users can preview their page before publishing to see how components look.
-
Validation checks ensure required fields are completed before publishing.
-
Mobile and desktop previews allow users to see how the layout adapts.