You do not have to start from a template. Anything you have already built can be animated by labelling three things, and in a page builder you pick each label from a dropdown — there is nothing to type.
The three labels
- Recipe host — the outer section. This is where the animation itself is attached.
- Viewport — the frame inside it that the slides move within.
- Panel — each individual slide, in the order they should appear.
The order matters
They nest, one inside the next: the Recipe host contains the Viewport, and the Viewport contains the Panels. This is the single most common thing to get wrong, and it is worth checking in your builder's own structure or layers view where the nesting is visible at a glance.
- Select your outer section and set its role to Recipe host.
- Paste the recipe you copied from the Studio into the recipe field on that same section.
- Select the container inside it and set its role to Viewport.
- Select each slide in turn and set its role to Panel.
- Save, then view the live page — see the note below.
The animation does not run inside the editor. That is deliberate — it would move things around while you are trying to click on them. View or preview the page to see it.
Give each panel a background
The stacking effects deliberately lay panels over one another, so a panel with no background of its own will be see-through. Set a solid colour or an image on each panel using your builder's own Background setting. Backgrounds are yours to control — the plugin does not paint over them.
Editor-specific steps
Where those dropdowns live differs by editor, and the documentation has a walkthrough with screenshots for each: Elementor, the WordPress block editor, Bricks, WPBakery, and raw HTML.