QuickStart: Your First Effect

QuickstartYour first effect in 6 stepsFrom a fresh install to a live WebGL effect on your page. Follow these steps in order to master the core loop.

1

Dashboard sidebarCreate a design postGo toAddifect Designsin your sidebar. ClickAdd New Addifect Design, give it a name, then Save and Publish it. This is the container your effect lives inside.

2

Addifect menuOpen the studioGo to the Addifect menu in your dashboard sidebar and clickLaunch Studio. Select the design post you just created and click Edit.

3

Inside the studioBuild your effectClick Effect and create a new effect. Open the shader library and stack your layers in this order for a complete effect:

ARTPick a base — Fluid Gradient, Flame Wings, or Solid Color

DISPAdd a Glass Pattern or Wave on top

MASKShape and isolate with a Radial or Linear mask

Configure each layer, preview the result, then clickSave Effect.

4

Studio top barCreate a partIn the studio top bar, click the+icon and select Part. Give it a name. In the layer panel click Root → + → Add Inside → Effect Wrapper Block. Select that new block, open its options, and assign the effect you just created.

5

Left sidebar — bottom iconDeployClick the Publish button at the very bottom of the left vertical sidebar. Select your Part from the list and clickDeploy. Your effect is now live and ready to attach.

6

Your page builder or themeAttach to your pageIn your page builder or theme editor, select any element and add a custom attribute. Replaceyour-part-idwith the ID of the Part you just deployed.

data-addifect-block="your-part-id"

CopyCopied!