Text reveal
Text reveal shows a paragraph that fills in with color as the shopper scrolls. An optional button can follow the text, and an optional image can sit behind it.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Text reveal.
The package uses this section on the Home page template.
Settings
View the section guide .
General
Reading speed sets how fast the text fills in: Slow, Medium or Fast. Text opacity sets how faint the text is before it fills in. A button appears only when Button label is set. Without a Button link, the button still appears but is disabled.
| Setting | Options | Description |
|---|---|---|
| Content | The text that is revealed gradually as the shopper scrolls. It is plain text, and any formatting is removed. | |
| Content max width | Maximum width of the text block as a percentage of the page on desktop. Mobile uses the full width. | |
| Button label | Text of the button under the revealed text. The button is not shown when this is empty. | |
| Button link | Page the button opens. Without a link the button still appears but is disabled. | |
| Button style | • Primary | Primary is a solid button and Outline has a border only. |
| Open link in new tab | Opens the button link in a new browser tab. | |
| Reading speed | • Slow | How much scrolling it takes to reveal all the text. Slow needs the most scrolling and Fast the least. |
| Text opacity | How faded the text looks before it is revealed. A higher value makes the unrevealed text easier to read. |
Heading content
Subheading appears above the text. Text size sets the text style of the revealed text, using the theme's H1 to H6 styles.
| Setting | Options | Description |
|---|---|---|
| Subheading | Small line shown above the revealed text. | |
| Text size | • H1 | Size of the revealed text, taken from the theme's H1 to H6 heading styles. |
Background image
Image and Image on mobile sit behind the text.
| Setting | Options | Description |
|---|---|---|
| Image | Background image behind the text. A placeholder image is shown when this is empty. | |
| Image on mobile | Separate background image for mobile screens. |
Appearance
Overlay opacity darkens the background image so the text is easier to read.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Overlay opacity | Darkens the background image so the text stays readable. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Top padding | Space above the section, in pixels. | |
| Bottom padding | Space below the section, in pixels. | |
| Show top border | Draws a line along the top edge of the section. |
Notes
- Open link in new tab applies only when a button link is set.
No comments yet