Wix Editor Studio tutorial

Wix Editor Studio Tutorial — Part 1

(working example: Life‑Coach Demo • author: Agata Business Services)

Goal for today  

• Log in, explore the interface and understand safe‑margins• Edit hero text & imagery on the “Rudi LeGaard” demo site - £0 Template {Wix Editor Studio}

  
  

Holistic Life Coach Website Template

Buy Now

• Add a new call‑to‑action button and a fresh inner page

• Publish & preview your first changes with confidence

Everything happens inside one browser tab, so you need no code and no software download. Let’s jump in.

1  Open your site in Wix Studio

1. Click the blue Edit Site button in your Wix dashboard (or use the direct edit link you got in the hand‑over email).

2. The Studio canvas loads with a white frame around the live page. The black bar on top is your control centre:

   • Autosave toggle (on by default)

   • View‑port icons (desktop, tablet, mobile)

   • Zoom & pixel width read‑out (e.g. “1280 px · 100 %”)

   • Preview / Publish buttons at far right

Quick check‑in: If the top bar shows a purple “Upgrade” badge your site is still on a free plan—fine for practice.

Editor Studio

2  Know your panels

Panel	Where	What it does
Site Pages	Left, first icon	Add, rename or reorder pages. Drag a page under “Main Pages” to add it to the navigation automatically.
Add Elements	Left, ‘+’ icon	Text, images, buttons, videos, lists, galleries—drop them anywhere inside the safe margin.
Layers	Left, stacked‑square icon	Select buried items, lock layers, change z‑index.
Inspector	Right‑hand fly‑out	Appears when you click anything; font, colour, size, responsive behaviour & accessibility live here.

Spend two minutes hovering over each icon so the name tool‑tips sink in. The more familiar you are with the left/right anatomy, the faster editing will feel.

3  Stay inside the safe margin

Every page shows faint grey shoulders left and right; step outside and the background turns darker. Never place text or vital buttons in that zone. On wide desktops your design will look odd; on mobiles it could be chopped off entirely. If you ever drag an element too far, press Ctrl + Z to undo or simply nudge it back with your arrow keys.

PADDING = MARGIN

4  Editing the hero section

4.1 Change the headline

1. Click once on the neon‑green “Rudi LeGaard” text.

2. A quick‑edit bar pops up; hit Edit Text.

3. Type your own name or headline.

4. In the Inspector, adjust:

   • Font (e.g. Sora Light → Sora SemiBold)

   • Font size (keep below 160 px so it wraps nicely on tablets)

   • Scale behaviour → Scale proportionally so it shrinks on phones.

4.2 Swap the background image

1. Click the big hero image (not the text).

2. Choose Change Background → Image.

3. Upload your own JPG/PNG or pick one from the Media Manager.

4. Tick Crop & focal‑point and drag the white dot to your subject’s face—Wix uses that to keep focus on all devices.

5. In Settings → Alt text, write a short description (“Life coach speaking on stage”). This is crucial for accessibility.

Hit Preview; notice that the headline and new image stay perfectly centred inside the margin.

5  Adding a call‑to‑action button

Imagine you want an extra “Book Session” button under the sub‑headline.

1. Open Add Elements → Button.

2. Drag a Text & Icon Button into the hero section.

3. In the Inspector:

   • Label → “Book Session”

   • Link → choose Page and point to “Contact Now” (already created).

   • Design → Style → pick the theme colour or define a new hex code.

Pro tip: keep the button width between 120 – 240 px; anything wider may spill beyond the mobile viewport.

BOTTONS

6  Working with section grids

Scroll down to the “NEXT EVENT” grid (yellow square, microphone image, speaker portrait). This area is a Section Grid—cells snap together, giving you magazine‑style layouts that stay responsive.

• Select a cell (click just outside the text).

• A thin blue outline appears; the Inspector shows Cell at the bread‑crumb trail.

• Split Cell lets you divide it, while Merge combines adjacent ones.

• Change background colour, drop new media or stack content vertically with Layout → Stack.

Notice that each cell’s width is locked as a percentage, so the layout rearranges gracefully on tablets without manual breakpoint work.

7  Adding an inner page

1. Click the Site Pages panel.

2. Press + Add New Page → choose Blank.

3. Name it “Testimonials”.

4. Tick Show in Menu so Wix updates the top navigation automatically.

5. Drag the new page between “Blog” and “Events” to control menu order.

Need a quicker option? Duplicate an existing page to inherit its header & footer, then strip out the content.

shows a different menu style, but the principles are identical in Studio.

PAGE

8  Editing mobile view

Tap the mobile phone icon on the top bar. Wix auto‑stacks content, yet you can:

• Hide elements on mobile only (Inspector → Hidden on check‑boxes).

• Re‑size text independently—keep headlines under 48 px for readability.

• Use Spacing → Margin/Padding to avoid thumb‑overlaps on buttons.

All changes are viewport‑specific, so your desktop design stays intact.

9  Save, preview & publish

Hit Ctrl + S or rely on Autosave. Then:

1. Preview – opens an interactive draft in a new tab.

2. Back to Editor – tweak anything out of place.

3. Publish – pushes changes to the live domain. You can always Undo Publish from Site History if needed.

10  What’s next?

This was the foundation session. In Part 2 we’ll:

• Build a CMS collection for blog posts (think dynamic “Events” listings)

• Set up on‑page SEO & structured data

• Integrate a payment gateway for paid workshops

Subscribe to the Agata Business Services blog so you don’t miss the drop, or head straight to our contact form if you’d like us to customise the Life‑Coach template for you.

Quick cheat‑sheet

Action	Shortcut / Path
Undo mistake	Ctrl + Z
Copy style between elements	Right‑click → Copy/Paste Style
Lock layer (avoid accidental drags)	Layers panel → padlock icon
Snap to margins	Drag element until blue guide appears
Make site multilingual	Site Settings → Languages & Regions (advanced)

You now hold the keys to replace images, rewrite copy, style buttons, juggle grids and spawn new pages—all without breaking the responsive magic that Wix Studio Editor gives you out of the box. Keep practising inside the safe margins and your confidence will soar.

CHANGE IMAGE

EDIT EVENTS

SECTIONS

TEXT