Close Menu

Block Transitions

Apply a transition to create visual interactions between your blocks.

Apply a Transition

To enable a transition for your block, hit the toggle switch. There are options for both Top and Bottom transitions, which will appear in the specified position. Enabling block transitions will also bring up tools to control the transition, and both the top and bottom transition will have its own set of the following controls.

Offset Transition Option

The Offset Transition Height toggle is a very important tool that determines whether the transition takes up space in the document flow or if the transition is allowed to bleed into other blocks. This interactions is illustrated in the examples below.

Offset Transition Height Enabled

Offset Transition Height Disabled

Select a Shape

You can change the shape of your transition by selecting one of the preset shapes from the Shape tool. You’ll be able to preview the shape. Each shape interacts differently with the Size tool.

Set the Size

The Transition Size controls the height of the transition element. Ths number is in the vh unit, which stands for viewport height. In other words, a transition that is set to 10vh will take up 10% of the total viewport size and will scale with the device its displayed on, whether on desktop or on mobile.

Transition Colors

You can choose the color of both the top and bottom transition. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer.

In general, you want to set this to the color of the adjacent block so that your transition is seamless. For example, if you are setting a top transition and the block that comes before has a gray background, you’ll want to set the transition to gray. With a bottom transition, you should try to mimic the block that comes after this one.