Visual Editor

Welcome! This guide will walk you through the Visual Editor, the most powerful tool in uSkinned 6+ and Umbraco 17. Designed specifically for beginners, the Visual Editor allows you to build professional-looking web pages by dragging and dropping pre-designed blocks—all without touching a single line of code.

Think of it as a "What You See Is What You Get" (WYSIWYG) experience: as you add images, text, and galleries, you see exactly how they will look to your visitors in real-time.

Step-by-Step: Building Your Page

  1. Open Your Page: Log in to your Umbraco Backoffice and navigate to the Content section on the left. Click on the page you want to edit from your "digital filing cabinet" (the site tree).

  2. Add a Component: Instead of just typing into a blank box, you will use Modular Components. Look for the [ + ] sign (the Block Catalogue) on your page.

  3. Choose Your Layout: A visual gallery will open showing thumbnails of different blocks, such as Banners, Image Galleries, Contact Forms, and Featured Sections. Click on the one you want to add.

  4. Edit Content: Once a component is added, you can click on it to add your text or images. You will see your changes appear instantly as you work.

  5. Rearrange with Drag-and-Drop: If you want to move a section higher or lower, simply click and hold the component to drag it into a new position.

  6. Save and Publish: When you are happy with the look of your page, click the green Save and Publish button at the bottom.

Pro-Tips for Beginners

  • Real-Time Feedback: You don't need to save or refresh to see how your design looks; the Visual Editor updates as you build.

  • Preview Mode: Before making your page live, use Preview Mode to see exactly how it looks on mobile, tablet, and desktop devices.

  • Reusable Components: If you create a section you love (like a "Join Our Newsletter" box), you can save it as a Reusable Component to drop onto any other page in seconds.

  • Safe Editing: If you make a mistake while typing, use the Clear Formatting button in the text editor to clean up any messy code pasted from other programs like Word.

Watch: Navigating the Umbraco 17+ Backoffice Interface

Blank placeholder image

This video provides a tour of the workspace, showing how to switch between tabs and use the new management features in version 17.

Relevant Links & Resources

  • Watch: Getting Started with uSkinned: This YouTube video series walks you through the click-by-click process of using the Visual Editor to build and optimize your site.

  • uSkinned Help Guide: How to create content with the Visual Editor.

  • uSkinned Help Guide: How to add or edit a component to a page.

Where Next?

Now that you've mastered the Visual Editor, why not try customizing the overall look of your site? Ask about "The Visual Designer" to learn how to change colors, fonts, and site-wide layouts visually!