Editor Basics - Master the Mediaweb Website Builder

Learn the fundamentals of the Mediaweb visual editor, including canvas navigation, element selection, and essential building tools.

Website Builder Basics: Your Creative Playground

Welcome to the Mediaweb editor - your creative playground where ideas become beautiful websites! Think of this like a digital art studio where you can arrange, design, and perfect your online portfolio. Don't worry if you've never built a website before - we'll start with the basics and have you creating like a pro in no time.

Understanding the Editor Layout

When you open the Mediaweb editor, you'll see three main areas, just like a well-organized workspace:

The Canvas (Center)

This is where the magic happens! The canvas shows exactly how your website will look to visitors. Think of it as your digital canvas where you paint your online presence. Everything you see here is exactly what your visitors will see.

Your toolbox full of elements and options. This is like having all your art supplies organized and ready to use:

Elements - Building blocks for your website (text, images, buttons)
Layers - Shows all the pieces of your website in order
Files - Your uploaded photos, videos, and other content
AI Assistant - Your smart helper for quick changes

The Properties Panel (Right Side)

When you select something on your canvas, this panel shows all the ways you can customize it. Think of it like the settings for whatever you're working on - colors, sizes, fonts, and more.

Your First Steps in the Editor

Let's start with the basics - moving around and understanding what you're looking at.

Navigating Your Canvas

Zooming In and Out:

Use your mouse wheel to zoom in for detailed work or zoom out to see the big picture
Think of it like stepping closer to or further from a painting you're working on

Moving Around:

Click and drag on empty space to move around your website
Use the scroll bars on the sides if you prefer

Selecting Elements:

Click on any text, image, or section to select it
You'll see a blue outline around selected items
The properties panel will show options for whatever you've selected

Understanding the Blue Outlines

When you click on things, you'll see different types of blue outlines:

Solid blue line = The exact element you selected (like a single photo)
Dotted blue line = The container holding that element (like the section containing the photo)
Thick blue line = You're about to drop something here

Working with Elements

Elements are the building blocks of your website - like LEGO pieces that you can arrange however you want.

Basic Elements You'll Use Most

Text Elements:

Headings - Big titles for sections (like "About Me" or "My Work")
Paragraphs - Regular text for descriptions and stories
Links - Clickable text that takes visitors to other pages or websites

Media Elements:

Images - Photos of your work, yourself, or anything visual
Videos - Showcase your video content or tutorials
Icons - Small symbols that add visual interest

Layout Elements:

Sections - Large containers that organize your content
Dividers - Lines that separate different parts of your page
Spacers - Invisible elements that add breathing room

Adding Elements to Your Website

Adding elements is as easy as shopping - just drag what you want from the toolbar to your canvas:

Find the element you want in the left toolbar
Click and drag it onto your canvas
Drop it where you want it to appear
Customize it using the properties panel on the right

Pro Tip: Look for the blue guidelines that appear when you're dragging - they help you align things perfectly!

Moving Elements Around

Once you've added elements, you can rearrange them anytime:

Drag and Drop:

Click on any element and drag it to a new location
Blue guidelines will help you align it with other elements

Using the Layers Panel:

Think of layers like a stack of transparent sheets
You can reorder elements by dragging them up or down in the layers list
Elements higher in the list appear in front of elements lower in the list

Making Changes and Customizations

This is where your creativity really shines! Every element can be customized to match your style.

Changing Text

When you select any text element:

Content:

Double-click to edit the text directly on the canvas
Type your new content and press Enter when done

Styling:

Font - Choose from hundreds of professional fonts
Size - Make text bigger for headlines, smaller for details
Color - Match your brand colors or try something new
Alignment - Left, center, right, or justified

Example: Select a heading and change it from "Welcome" to "Hey, I'm Sarah!" then make it pink and center-aligned.

Customizing Images

Images are crucial for creators - here's how to make them perfect:

Replacing Images:

Click on any image
Click "Replace" in the properties panel
Choose a new image from your files or upload a new one

Resizing:

Drag the corner handles to make images bigger or smaller
Hold Shift while dragging to keep the proportions perfect

Styling:

Borders - Add frames around your images
Shadows - Create depth and visual interest
Filters - Apply Instagram-style effects

Working with Colors

Colors are how you make your website uniquely yours:

Choosing Colors:

Click on any color option to open the color picker
Use the eyedropper tool to match colors from your photos
Enter specific color codes if you have brand colors

Color Harmony Tips:

Stick to 2-3 main colors for a professional look
Use lighter versions of your main colors for backgrounds
Make sure text colors contrast well with backgrounds for readability

Understanding Responsive Design

Your website needs to look great on phones, tablets, and computers. Mediaweb handles most of this automatically, but here's what you should know:

Device Preview

At the top of your editor, you'll see three icons:

Desktop 💻 - How your site looks on computers
Tablet 📱 - How it appears on iPads
Mobile 📱 - How it looks on phones

Click each one to see how your website adapts to different screen sizes.

Mobile-First Thinking

Most of your visitors will see your website on their phones first, so:

Make sure your most important content is visible on mobile
Keep text large enough to read on small screens
Ensure buttons are big enough to tap with fingers

Undo, Redo, and Saving

Don't worry about making mistakes - Mediaweb has your back!

Undo and Redo

Undo (Ctrl+Z or Cmd+Z) - Takes back your last action
Redo (Ctrl+Y or Cmd+Y) - Brings back what you just undid
You can undo/redo up to 50 actions, so experiment freely!

Auto-Save

Your work is automatically saved every few seconds, so you'll never lose your progress. You'll see a small "Saved" indicator in the top bar.

Manual Save

Want to save right now? Use Ctrl+S (or Cmd+S on Mac) or click the save icon.

Preview and Testing

Before you publish, always preview your website to see how visitors will experience it.

Preview Mode

Click the "Preview" button to see your website exactly as visitors will:

All editing tools disappear
Links become clickable
Forms become functional
You can navigate just like a real visitor

Testing Checklist

Before publishing, check:

✅ All text is readable and makes sense
✅ Images load properly and look good
✅ Links work and go to the right places
✅ Contact forms are set up correctly
✅ The website looks good on mobile, tablet, and desktop

Common Beginner Mistakes (And How to Avoid Them)

Mistake 1: Too Much Text

Problem: Walls of text that nobody reads
Solution: Break text into short paragraphs with headings

Mistake 2: Inconsistent Styling

Problem: Different fonts and colors everywhere
Solution: Pick 2 fonts and 3 colors, then stick to them

Mistake 3: Ignoring Mobile

Problem: Website looks great on desktop but terrible on phones
Solution: Check mobile view regularly while building

Mistake 4: No Clear Purpose

Problem: Visitors don't know what you do or how to contact you
Solution: Make your main message and contact info obvious

Keyboard Shortcuts for Faster Editing

Once you're comfortable, these shortcuts will speed up your workflow:

Ctrl+Z / Cmd+Z - Undo
Ctrl+Y / Cmd+Y - Redo
Ctrl+S / Cmd+S - Save
Ctrl+C / Cmd+C - Copy selected element
Ctrl+V / Cmd+V - Paste copied element
Delete - Remove selected element
Ctrl+D / Cmd+D - Duplicate selected element

Getting Help While You Work

AI Assistant: Your smartest helper is always available in the left panel. Just type what you want in plain English:

"Make this section more colorful"
"Add a contact form at the bottom"
"Change all the fonts to something more modern"

Tooltips: Hover over any button or icon to see what it does.

Context Menus: Right-click on elements for quick actions like copy, paste, and delete.

What's Next?

Now that you understand the basics, you're ready to dive deeper:

Immediate Next Steps

Practice - Try adding different elements and moving them around
Experiment - Change colors, fonts, and layouts to see what you like
Preview Often - Check how your changes look to visitors

Advanced Learning

Elements & Components - Master all the building blocks
Styling & Design - Create beautiful, professional designs
CSS Variables & Customization - Advanced styling techniques

Remember: Creativity Takes Time

Building a great website is like learning to paint or play an instrument - it takes practice! Don't expect perfection on your first try. The most important thing is to start creating and keep experimenting.

Your AI assistant is always there to help, and every mistake is just a learning opportunity. The best creators are the ones who aren't afraid to try new things and learn from what doesn't work.

Next Steps

Ready to learn more? Check out these guides:

Elements & Components - Deep dive into all available building blocks
Styling & Design - Make your website beautiful and professional
Data Binding - Connect your social media content automatically

Happy building! 🎨✨