Setup: Homepage Split Images
In this quick guide, we'll demonstrate the settings used with the Broadcast Bold demo store. The split images section allows you to add two side-by-side images in one section and also include a text area with a heading, subheading and a call to action button.
The Elevate and Soothe section uses the following settings:
When adding the section, you'll find it under the IMAGE category:
Setting tips
Section height - We've used Full screen height for best results on mobile. There are a range of options for you to choose from which can be helpful based on the images you use. We recommend using the same sized images for best results.
Mobile layout - There are two options for how your images are displayed on mobile: Inline and Stacked. Here are example of both:
Images - Add your left and right images here. Try and maintain similar height images for best results with the main subject of the in the middle. In our example, both images are 1527 x 1527 pixels.
Text - Adding a Heading will automatically be rendered as an H1 heading tag. Both Heading and Subheading are optional, we do recommend using at least the Heading. The subheading is rendered as an H5.
Use the Block alignment drop-down to choose where your text box appears over the split images. Based on your images, this can help keep the text box in a suitable position over your images.
An an example of Middle left on mobile with stacked images will pull the text box to the left center of the display:
Test on both mobile and desktop to find the right position and avoid covering important image areas. Example on desktop, covers a key portion of the first image:
Button - Your main call-to-action text and link. We've used a general link to all products, you might want to target a certain collection, product or even page or blog post.
Overlay - Allows you to add a color layer over the the images which can help to bring out the text box. Increase the opacity to make the overlay stronger, resulting in more attention to the text box area.
Example of a colored overlay with 30% opacity:
Increasing to 80% will fade the images away and bring out the text box:
Experiment with various settings. We've used 0% overlay which is none or no overlay even though a color has been set:
