How to add, design and reuse sections in Wix Studio Two

4 days ago

4 min read

Updated: 2 days ago

In the Studio Two editor, you add a section through Add Elements > Sections. You can start blank, use a ready-made design or generate one with Aria. Style it with the Background button on the action bar. To reuse it on other pages, right-click it and choose Set as Global.

Add Section dialog with the Blank Section option, the section categories, and Generate with AI — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Sections”

Before you start

You need a site open in the Studio Two editor, not the classic Studio editor.
Decide early whether a section should appear on one page or on several. Global sections change everywhere at once.
Have your brand colors and any background images or videos ready in the Media Manager.

Step by step

Open the Sections menu. Hover over the Add Elements icon at the top left of the editor and select Sections. On the canvas, you can also hover above or below an existing section and click + Add Section.
Pick how to start. Choose Blank section, Choose a design or Generate a section. With Choose a design, browse the categories on the left, hover a template and click Add Section. With Generate a section, Aria opens a chat where you pick a suggestion or write your own prompt.
Match the content to the site. Optionally, click the AI Actions icon at the top right of the section and then Match content to site. This adjusts text, images and buttons to the information already on your site.
Refine the section with AI. From AI Actions you can run Improve layout, which rearranges elements without touching colors or text and can be clicked repeatedly. Regenerate section opens a new chat. Under More actions you will find Simplify text and Fix alignment.
Set the background. Select the section and click Background on the action bar. One panel holds all types: brand color, solid, gradient, image and video. Gradients can be Linear, Radial, Conic or Mesh.
Tune image and video backgrounds. For images, set the focal point, blend mode, color behind the image, opacity and scaling, and add alt text under Settings > Accessibility. For video, set focal point, opacity and playback options such as loop, mute, mobile playback and quality. Add an accessible name, or mark the video as decorative.
Add scroll motion. Click the Motion icon on the action bar, open Scroll in the Inspector and pick an effect. Available effects depend on the background type.
Reorder or delete sections. Select a section and use the Move section up or Move section down icons next to the canvas. For many moves, drag sections in the Layers tab of the Site Structure panel. To delete, use More actions > Delete, or press the Delete key.
Set a section as global. Right-click the section, hover over Set as Global and choose Header, Section or Footer. Then right-click it again, open Global Settings, select Add to More Pages, tick the pages and click Apply.
Manage global sections. Hover over the Site Structure icon at the bottom left and select Global. From the More Actions icon on a section you can Edit, Add to More Pages, Rename, Duplicate, Delete or Set as Default. In the same panel, Add to page puts a global section on the page you are working on.
Detach when one page needs its own version. Right-click the global section on that page, hover over Global Settings and select Detach from Global Section. The original stays unchanged and the detached copy becomes a regular section.

A selected section with the Move section up and Move section down arrows next to the canvas — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Sections”

AI actions bar on a selected section with the More actions menu open, showing Fix alignment and Simplify text — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Sections”

Good to know

Edits to a global section apply everywhere it appears. Deleting it from the Global panel removes it from the whole site.
Only the topmost section can become a global header, and only the bottommost can become a global footer. If the option is grayed out, move the section to the top or bottom on every breakpoint.
A detached section cannot be re-attached. Only Undo right after detaching works.
Background changes made on desktop carry down to smaller breakpoints unless you customize those breakpoints. Changes do not cascade upward.
Scroll effects differ by background: solid and gradient offer None and Fade, while image and video backgrounds offer more, such as Closeup, 3D and Parallax.

parnii note

Before detaching a global section, check whether you only need to hide it on one breakpoint, because detaching cannot be reversed. Duplicate a global section first if you want to experiment with a variant.

FAQ

Can I show the same section on several pages in Studio Two?

Yes. Right-click the section, choose Set as Global, then use Global Settings > Add to More Pages. Select the pages and click Apply.

Why is Set as Global grayed out for my header or footer?

Another section is sitting where the header or footer should be. Move the section to the very top or bottom on all breakpoints, then try again. A hidden section may show in Layers.