Visual Designer

Welcome! If you want to change the look and feel of your website—such as colors, fonts, and spacing—without writing a single line of code, the Visual Designer is your best friend. In uSkinned 6+ and Umbraco 17, this tool acts as the "master controller" for your theme.

Think of it as a digital paint bucket that allows you to tailor your brand's style and see the results instantly.

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.

Step-by-Step: Customizing Your Site's Design

  1. Enter Preview Mode: Log in to your Umbraco Backoffice, go to the Content section, and select any page. Click the Preview button at the top right to see your site as a visitor would.

  2. Launch the Designer: While in Preview mode, look for the "Paint Bucket" icon. Clicking this will open the Visual Designer interface.

  3. Explore Design Categories: A menu will appear allowing you to edit different parts of your theme:

    • Colors: Change your brand's primary and secondary color palettes.

    • Fonts: Choose from Google, Adobe, or System fonts for your headings and body text.

    • Spacing: Adjust the margins and padding to give your content more room to breathe.

    • Layout: Change the global structure of your header, footer, and page containers.

  4. Make Real-Time Tweaks: As you adjust a slider or pick a new color, the preview of your website will update instantly. You don't have to guess how it will look!

  5. Save Your Changes: Once you are happy with the new look, click Save. Your new design will now be applied across your entire website.

Pro-Tips for Beginners

  • Page-Level Overrides: By default, your changes in the Visual Designer affect every page. However, if you want a specific page (like a special landing page) to have a unique look, you can override the global theme for just that one page.

  • Component Styling: You can set "Default Styles" for specific blocks. For example, you can decide that every "Gallery" component on your site should always have a specific background color by default.

  • Logo and Favicon: The Visual Designer is also where you upload your site's Logo and the Favicon (the tiny icon seen in browser tabs).

  • Safe Experimentation: Because you are working in a visual interface, you can try different combinations of fonts and colors safely before committing to them live.

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: Designing with uSkinned: uSkinned provides a "Getting Started" video series on YouTube that includes a specific walkthrough of the Visual Designer.

  • uSkinned Help Guide: How to edit your Theme Design using the Visual Designer.

  • uSkinned Help Guide: How to add or edit Colors in your Theme Design.

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!