Overlapping images
Overlapping images places two images together: a large main image and a smaller one overlapping its top or bottom corner, such as a look and a fabric detail. Text, links and buttons sit beside them. As the page scrolls, the two images can drift at different speeds.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Overlapping images. Drag it to where you want it on the page.
Step 2: Add the images
- Under Images, select the Main image and the Overlapping image.
- Choose a ratio for each: Portrait 2:3, Portrait (3:4), Portrait (4:5), Square or Landscape (4:3).
- Choose the Overlapping image position (1): Bottom corner or Top corner, and its Overlapping image size as a percent of the main image.
- Set a Corner radius for both images.
Step 3: Add the content
- Click Add block in the section and add a Subheading, Heading, Text, Split text, Icon, Links or Button wrapper.
- Under Layout, choose the Images position (left or right of the content), the Content position (top, center or bottom) and the Content width and alignment.
Step 4: Set the motion and mobile order
- Under Animation, choose the Parallax: None, Subtle or Strong.
- Under Mobile, choose whether the images or the content come first, and the content alignment.
Settings reference
Overlapping images
| Images | |
|---|---|
| Main image | An image from your files. |
| Main image ratio | Options: Portrait 2:3, Portrait (3:4), Portrait (4:5), Square, Landscape (4:3), Landscape (5:4). |
| Overlapping image | An image from your files. |
| Overlapping image ratio | Options: Portrait 2:3, Portrait (3:4), Portrait (4:5), Square, Landscape (4:3), Landscape (5:4). |
| Overlapping image position | Options: Bottom corner, Top corner. |
| Overlapping image size | Slider. |
| Corner radius | Slider. |
| Animation | |
| Parallax | The images drift at different speeds while scrolling. Options: None, Subtle, Strong. |
| Layout | |
| Images position | Options: Left, Right. |
| Content position | Options: Top, Center, Bottom. |
| Content alignment | |
| Mobile | |
| Order | Options: Images first, Content first. |
| Content alignment | |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- On screens narrower than 990px, the images stack above or below the content, as set in Mobile > Order, and the overlapping image keeps its corner.
- Parallax uses the same scroll effect as the theme's other media sections.