How to create a vertical teaser

Teasers in Claspo can be placed in eight different positions along the edges of the screen. A teaser attached to the top or bottom edge stretches horizontally across the screen.

When attached to the left or right edge, the teaser is displayed vertically — like a slim tab aligned to the side of the page. Below is an example from a live website:

A vertical teaser is often the better choice when you want to avoid overlapping important content at the top or bottom.

All Claspo templates include pre-designed teasers. However, by default, the teaser is not connected to the template.

To connect a teaser to your widget:

1. Open the template you want to use.

2. In the right panel, find the Teaser section.

3. Select it instead of “Do not use.”

4. Click Use this template.
​
Your widget will now be created with an active teaser. If you created a widget without a teaser, you can add one later in the editor. You don’t need to start over.

To add a teaser:

1. Open your widget in the editor.

2. In the bottom panel, click + Teaser.

To adjust the position:

1. In the bottom panel, click Teaser to open its settings.

2. In the right panel, go to the Position section.

3. Click on the placement area in the position selector.
​

To display the teaser vertically, choose one of the side positions: left offset or right offset.

You can also adjust the offset values to control the exact distance from the screen edges.

To edit the teaser design, click on the teaser element. This will open its detailed settings in the right panel. In the Align inner elements section, you can control how the content inside the teaser is arranged.

This allows you to adjust the internal structure to better fit a vertical placement.
​

For more detailed instructions on customizing teaser design see

Teaser creation and customization.