New: Add Images to Sections Using Sections Dashboard

It's important to make sure that your website structure is organized nicely, and this includes implementing a proper tagging system and section strategy. To make sure that every page on your website stands out, we've added the ability to add a cover photo to each of your sections in our Sections Dashboard. Here's how it works.

In your Sections Dashboard, click on the pencil icon to edit a specific section:

Here you'll find a new field that allows you to upload (and remove) a section image:

Any images you upload will be served in a next-generation format that ensures the load time of your section pages remains unaffected.

Here's a screencast of what the workflow looks like:

You can also add images to sections through Layout & Design Tool. First, navigate to your Section page in Layout & Design Tool. Then, add a Custom HTML element.

Here's the code you'll want to use for your section image:

<div class="section-page--header">{{subpage.title}}</div><div><img src ="{{subpage.url_header_image}}" height="300" width="100%"></div>

If you want to add additional styling, use the following code:

<style>
  .section-page--header {
    text-align: center;
    font-size: 3em;
    font-family: 'Helvetica';
    text-transform: uppercase;
    margin-top: 40px;
  }
</style>

Once added and saved, you're done! The following is an example of what this can look like on your site:

If you have any questions about this new feature, email support@rebelmouse.com or talk to your account manager today.