Opacity text animation
How to use the Opacity text animation block in the Meditative Folks Theme.
Opacity text animation
At a glance
Text that animates opacity for emphasis.
Used in
- Configure where this block is available in the parent section.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Text | Controls “Text” on the storefront. Open the theme editor to preview live. | — | Always |
| Use global H2 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | text != blank |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 32 | Text is filled in and Use global H2 styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 40 | Text is filled in and Use global H2 styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 48 | Text is filled in and Use global H2 styles is off |
| Heading color | Controls “Heading color” on the storefront. Open the theme editor to preview live. | #000000 | Text is filled in and Use global H2 styles is off |
| Max width (mobile) | Controls “Max width (mobile)” on the storefront. Open the theme editor to preview live. | 400 | Text is filled in and Use global H2 styles is off |
| Max width (tablet) | Controls “Max width (tablet)” on the storefront. Open the theme editor to preview live. | 600 | Text is filled in and Use global H2 styles is off |
| Max width (desktop) | Controls “Max width (desktop)” on the storefront. Open the theme editor to preview live. | 800 | Text is filled in and Use global H2 styles is off |
| Line height (mobile) | Controls “Line height (mobile)” on the storefront. Open the theme editor to preview live. | 1.2 | Text is filled in and Use global H2 styles is off |
| Line height (tablet) | Controls “Line height (tablet)” on the storefront. Open the theme editor to preview live. | 1.2 | Text is filled in and Use global H2 styles is off |
| Line height (desktop) | Controls “Line height (desktop)” on the storefront. Open the theme editor to preview live. | 1.2 | Text is filled in and Use global H2 styles is off |
| Visually hide heading and subheading | Controls “Visually hide heading and subheading” on the storefront. Open the theme editor to preview live. | No | text != blank |
| Content alignment | If the block is inside the flex block, content align does not work. Move it outside the flex block to work. | center | Always |
Setting details
Each control from the tables above, explained simply:
Text
Controls “Text” on the storefront. Open the theme editor to preview live. Default: —.
Use global H2 heading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: text != blank.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 32. This control appears when: Text is filled in and Use global H2 styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 40. This control appears when: Text is filled in and Use global H2 styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 48. This control appears when: Text is filled in and Use global H2 styles is off.
Heading color
Controls “Heading color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Text is filled in and Use global H2 styles is off.
Max width (mobile)
Controls “Max width (mobile)” on the storefront. Open the theme editor to preview live. Default: 400. This control appears when: Text is filled in and Use global H2 styles is off.
Max width (tablet)
Controls “Max width (tablet)” on the storefront. Open the theme editor to preview live. Default: 600. This control appears when: Text is filled in and Use global H2 styles is off.
Max width (desktop)
Controls “Max width (desktop)” on the storefront. Open the theme editor to preview live. Default: 800. This control appears when: Text is filled in and Use global H2 styles is off.
Line height (mobile)
Controls “Line height (mobile)” on the storefront. Open the theme editor to preview live. Default: 1.2. This control appears when: Text is filled in and Use global H2 styles is off.
Line height (tablet)
Controls “Line height (tablet)” on the storefront. Open the theme editor to preview live. Default: 1.2. This control appears when: Text is filled in and Use global H2 styles is off.
Line height (desktop)
Controls “Line height (desktop)” on the storefront. Open the theme editor to preview live. Default: 1.2. This control appears when: Text is filled in and Use global H2 styles is off.
Visually hide heading and subheading
Controls “Visually hide heading and subheading” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: text != blank.
Content alignment
If the block is inside the flex block, content align does not work. Move it outside the flex block to work. Default: center.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.