Add nested Block items to the block. Each item you add becomes one shape in the falling animation.
Falling content block
Updated 3 months ago
The Falling content block renders a physics animation of falling, draggable items. Its content comes from the nested Block items you add to it.
Settings
Setting | Description | Default |
|---|---|---|
Enable color scheme | Applies the chosen color scheme to the block. The Color scheme setting appears only when this is on. | Off |
Color scheme | The scheme applied to the block when Enable color scheme is on. | Scheme 1 |
Gravity | The strength of the fall, from 0.1 to 2 in steps of 0.1. | 1 |
Height mode | Custom uses the height values below; Inherit fills the height of the surrounding section. | Custom |
Height (Desktop) | The desktop height, from 200 to 1000 px. Shown only when Height mode is Custom. | 400 |
Height (Mobile) | The mobile height, from 200 to 800 px. Shown only when Height mode is Custom. | 300 |
Item copies | Repeats each nested item the selected number of times, from 1 to 10. | 1 |
Item width (Desktop) | The item width on desktop, from 50 to 600 px. Item height scales proportionally from the width. | 300 |
Custom item width on mobile | When on, a separate mobile item width is used; when off, items are half the desktop width on mobile. | Off |
Item width (Mobile) | The item width on mobile, from 50 to 600 px. Shown only when Custom item width on mobile is on. | 150 |
Custom class | One or more CSS classes, separated by spaces, added to the block wrapper. | — |
Margin top (Desktop) | Space above the block on desktop, from 0 to 34. | 0 |
Margin top (Mobile) | Space above the block on mobile, from 0 to 34. | 0 |
Hide block on desktop / on mobile | Hide the block on the selected viewport. | Off |
Block items
Add nested Block items to build the falling content. Each item is one shape in the animation.
Setting | Description | Default |
|---|---|---|
Text | The label shown inside the shape when no image is set. | Item label |
Color | The shape's fill color. | Black |
Image | An image used as the item's sprite; it replaces the text. A 60 px height is recommended, with width scaled to match the image's aspect ratio. | — |
FAQ
How do I add items to the Falling content block in the Pops theme?
How does the Gravity setting work in the Falling content block?
It sets the strength of the fall. The range is 0.1 to 2 in steps of 0.1, with a default of 1.
How do I set separate heights for desktop and mobile in the Falling content block?
Set Height mode to Custom and use Height (Desktop) and Height (Mobile). Desktop ranges from 200 to 1000 px (default 400) and mobile from 200 to 800 px (default 300). With Inherit, the block fills the height of the surrounding section.
How do I use an image instead of text for a falling item?
Set the item's Image setting. The image becomes the item's sprite and replaces the text label. A 60 px height is recommended, with width scaled to match the image's aspect ratio.
How do I repeat each item in the Falling content block?
Use the Item copies setting to repeat each nested item 1 to 10 times. The default is 1.
How do item widths work on desktop and mobile in the Falling content block?
Set Item width (Desktop) from 50 to 600 px (default 300); item height scales proportionally from the width. Turn on Custom item width on mobile to use a separate mobile width (50 to 600 px, default 150). When it is off, items are half the desktop width on mobile.
Was this helpful?
Was this helpful?