From time to time, you may want to freshen up the content on your homepage. And we get it… it can be tough to remember where to add every little detail.

In this post, we’ll outline how to customize your Chroma homepage so it’s the perfect introduction to your cause. If you’re not using the Chroma theme, learn how to adjust the homepage on other themes.

To update anything on your website, you’ll first need to be logged in to access the back end. Using the admin menu, navigate to the “Pages” section and click “Home — Front Page”.

How the Homepage Works

Your homepage uses the block editor. You can add, remove and rearrange most blocks, with some exceptions. 

These homepage blocks look and function differently from blocks you’ll find on other pages and posts. This allows your homepage to have a more unique look.

Use the labeled photo and links below to find instructions for each homepage block.

A screenshot of the different sections of the homepage in the Chroma theme.

Jump Ahead To

Update the Hero Block

The Hero block is the large image at the top of your homepage. While you can customize many elements of this block, it is not possible to move or delete this block on your homepage. 

A screenshot of the Hero Image and Headline Section in the homepage of the Chroma theme

Replace the Image

  • Crop your image to 1920 pixels wide by 500 pixels tall. 
  • Click “Replace Image” within the block toolbar and either add or select your desired homepage hero image. 
  • If the image you want to use is too bright, you can darken it using the settings in the sidebar.

Update the Headline

  • Place your cursor where it says “Add a heading…” or hover over the existing text to enter your headline. 
  • Try to keep this text as short as possible to ensure your headline is quick and easy for visitors to read. 

Add a Button 

  • Add button text to highlight an important call to action on your homepage. 
  • Enter the URL where you want the button to direct users.
  • If you don’t want the button to show up on the front end, just leave it empty.
    • The button also won’t show up if the URL field is empty.

Scrolling Blog Feed Block

The Scrolling Blog Feed block displays a scrolling feed of your blog post titles.

A screenshot of the Scrolling Blog Feed Block in the homepage of the Chroma theme

This block will show the most recent blog post and continue to scroll through your posts chronologically. As you create and publish new blog posts, the titles will automatically appear in the scrolling feed.

Learn how to move this block to another position on the homepage or delete it if it’s not necessary.

Note that it is not possible to change the “Latest News” text that precedes the scrolling feed. 

Update the Image Callouts Block

This block allows you to display images with text in various layouts using three different alignment options: centered, right image and left image, and can be added more than once if needed.

You can choose to have as few as one column (spanning full width) or as many as four. The number of columns you choose will impact what alignment options are available. For example, an Image Callouts block with three or more callouts will only allow center alignment. 

A GIF showing the different layouts for the image callout block
  • Use the block inserter to add an Image Callouts block and select a layout that fits your needs. 
Screenshot of the Image callouts layouts options
  • Make sure the Image Callout parent block is selected and use the slider under “Callouts” in the block settings to specify the number of columns.
A screenshot of the Image Callouts block settings

Once you determine the number of columns you’d like, you can customize each callout. To customize a callout:

  • Select a square image that’s at least 200 pixels wide by 200 pixels tall.
A GIF adding an image to the image callout block
  • Add a brief heading.
  • Add a short description.
  • Customize the button text.
    • If you don’t want the button to show up on the front end, just leave it empty. 
  • Add the URL of the page you’d like to link visitors to.
    • Note that the images themselves cannot be linked; links can only be added to the headings, inside the description text, and to buttons.

To remove a column from the Image Callouts block:

  • Select the column you’d like to remove.
  • Click the three vertical dots within the block toolbar for more options.
  • Select “Delete”.
  • Repeat as necessary.
A GIF showing how to delete a column.

Update the Text Callouts Block

Text Callouts are perfect for highlighting important information. While this block doesn’t allow images like the Image Callouts block, you can still rely on headings, descriptive text and buttons to share your content. You also have the option to add this block multiple times if needed.

A GIF showing the different layouts for the text callout block

Use the block inserter to add a Text Callouts block and select a layout that fits your needs.

Screenshot of the Image callouts layouts options.

Once you select your layout, you can customize each callout. To customize a callout:

  • Add a brief heading. 
  • Add a brief description.
  • Customize the button text.
    • If you don’t want the button to show up on the front end, just leave it empty. 
  • Add the URL of the page you’d like to link visitors to.

Blog Posts Block

This block features your most recent blog posts. While the Scrolling Blog Feed block displays a feed of blog post titles, the Blog Posts block displays the title, featured image and excerpt of your three most recent posts.

A screenshot of the Blog post block

As you publish new posts, this block will automatically update to feature the latest ones.

You can move this block or delete it, but it can’t be added more than once to your homepage.

This block uses “On the Blog” as the heading by default. You can customize this by selecting and editing the text or removing it altogether if desired.

Moving or Deleting Homepage Blocks

It’s easy to customize the various elements of your homepage by reordering or removing blocks. 

To move a block, simply select it and use the up and down arrows to move it where you’d like.

Another option to reorder blocks is to use the “Document Overview” button, which is located at the top left of the screen, next to the “Redo” button. There, you’ll see a List View of all the blocks on the page and can rearrange them through drag and drop.

The only block that cannot be moved is the Hero block, as it is locked at the top of the homepage.

Once in a while, you might need to remove a block, which you can do in a few simple steps:

  • Select the block you want to remove.
  • Click the three vertical dots in the block toolbar to access more options.
  • Select “Delete”.
  • Repeat as necessary.
A screenshot of the blog post block highlighting the three vertical dots on the toolbar and the delete option.

Preview

Before publishing your changes, it’s important to preview your homepage to make sure everything looks good. 

To do this, click the laptop icon in the top right corner of the editor and select “Preview in new tab” from the menu. Take a moment to review your edits. If you’re happy with the changes, click the blue “Update” button to save them.

Still Have Questions?

The quickest way to get support is to reach out to us within your website’s admin dashboard. Log into your website and then fill out the Request Help form. You’ll hear back from us within one business day.