Pattern band
Pattern band fills a strip of the page with a seamless pattern tile, such as your monogram, a print or a texture. Use it to separate sections or to bring a brand pattern into the page. The pattern can drift as the page scrolls, or move on its own.
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 Pattern band. Drag it to where you want it on the page.
Step 2: Add the pattern
- Under Pattern, select a Pattern tile (1): a square image whose edges match, so it repeats without seams. PNG with transparency works on any background color.
- Set the Tile size and the Band height.
- Write an optional Label shown in the middle of the band, and turn on Show borders for lines above and below.
Step 3: Choose the movement
- Under Animation, choose the Movement: None, Drift while scrolling or Continuous drift.
- For continuous drift, set Seconds per tile: higher is slower.
Step 4: Set the mobile size
- Under Mobile, set a smaller Tile size and Band height for phones.
Settings reference
Pattern band
| Pattern | |
|---|---|
| Pattern tile | Use a seamless square tile. It repeats across the band. |
| Tile size | Slider. |
| Band height | Slider. |
| Label | Optional text shown in the middle of the band. |
| Show borders | Turns this on or off. |
| Animation | |
| Movement | Drift while scrolling works in browsers that support scroll-driven animation. Options: None, Drift while scrolling, Continuous drift. |
| Seconds per tile | Slider. |
| Mobile | |
| Tile size | Slider. |
| Band height | Slider. |
| 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
- Drift while scrolling uses the browser's scroll-driven animation. Browsers without it show the pattern still.
- Continuous drift pauses while the band is off screen, and both movements stop for visitors who ask for reduced motion.
- The background color comes from the section's color scheme.