How to Use the 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.
Action Steps
-
Open the Preview: Log in to your Umbraco Backoffice and select any page from the Content tree.
-
Trigger the Designer: Click the arrow next to the Save and Publish button in the bottom right corner and select Save and Preview.
-
Find the Paint Bucket: Once the preview opens, look for the Paint Bucket icon on the uSkinned toolbar (usually located at the edge of the screen). Click it to open the Design panel.
-
Choose Your Category: Select from options like Colors, Fonts, or Spacing.
-
Adjust and Watch: Move sliders or pick colors. The site will update in real-time so you can see the magic happen instantly.
-
Commit Your Look: When you love what you see, click Save within the designer panel to apply these styles across your entire website.
Pro-Tips for Beginners
-
Logo and Favicon: The Visual Designer is where you upload your site's Logo and the Favicon (the tiny icon seen in browser tabs).
-
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" block on your site should always have a specific background color by default.
-
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.
- Reset Option: If you feel you've gone too far with the "neon pink," don't worry! You can use the Reset option within specific design categories to return to your last saved state.
Need a Visual Walkthrough?
Watch: Building Multi-Column Layouts in Umbraco 17+
This short video walks you through selecting a Grid layout and placing your first components into columns. You'll learn how to switch from a single-column view to a multi-column design in just two clicks.
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 and theme customization.
-
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 your site has its own unique look and feel, it’s time to focus on the top and bottom of your pages. Your next step is to explore "Header and Footer Globals"—where you’ll set up your logo, main navigation menu, and social media links.