Guide to uSkinned Site Builder

What is uSkinned?

The uSkinned Site Builder is a content-editor experience designed to help anyone launch a new website using the powerful Umbraco CMS. Once installed on top of Umbraco, uSkinned provides a user-friendly, no-code environment for stunning website authoring.

uSkinned gives you all of the tools you need to quickly create and edit your website, giving you more control over your site content and structure. Modular page component content allows for quick deployment of website pages - whether it is a service page, members-only content, or scheduled posts such as blogs or news. 

You can also integrate all your favorite tools into uSkinned to make a truly customized experience. For example, with uSkinned you can easily do the following:

• Add Google Analytics tracking
• Setup Google ReCaptcha
• Collect email addresses with MailChimp
• Integrate Typeform forms
• Add social sharing buttons
• Display Instagram, Facebook, or Twitter posts
• Integrate eCommerce and payment platforms like PayPal or Stripe
• Build booking and scheduling platform functionality
• Add video and music platforms like YouTube, Vimeo, Spotify, and Soundcloud

uSkinned Templates

One of the most powerful features of uSkinned is the pre-built templates, or themes, that provide a head start on website creation. Essentially, these themes are starting calibrations of the component toolkit to give you a sense of how they can be utilized to create a beautiful website. 

Components – Page elements like accordion tabs, banners, call-to-action strips, picture galleries, text, and more can be deftly dropped in place and positioned to create the most impact for your site visitors.

Layouts – Optimal layouts give an easy framework to display content on pages with options to have content displayed across the full width of the screen, create sidebar areas, or dictate navigation panes.

You can start with one of uSkinned’s professionally designed templates or make your own. Another more enticing option is to combine both approaches! Use a theme as a starting point and customize the template so it becomes the exact representation of your dream website using uSkinned's Visual Designer.

Editing a pre-built theme design using the Visual Designer is as simple as these steps:

1. Login to the CMS.
   
   
2. Go to any page in the tree menu.
   
   
3. In the bottom right corner, click 'Save and Preview.' Preview mode will load in a new browser tab or window.
   
   
4. On the right-hand side, there will be two buttons. Click on the ‘Paint Bucket’ icon to access the Visual Designer.
   
   
5. Work through each tab – Layout, Colors, Spacing, and Fonts – to create an individualized theme design in real-time.

How to Install uSkinned on Umbraco

Installing uSkinned Site Builder on Umbraco is a simple and straightforward process. The following steps work for uSkinned Site Builder version 2.x and up with Umbraco version 9.x and up.

1. With the command line open and running Umbraco CMS, run the following command: dotnet add package uSkinned Site Builder
   
   
2. Wait for the package to install. The command line will run through each part of the process.
3. When the installation finishes, navigate to the local URL provided by the command line.
   
   For example, the console will output a message like:
   
   [10:30:59 INF] Now listening on https://localhost:44388
   
   The URL would be similar to the last part of the output message:
   ttps://localhost:44388
   
   
4. Open your web browser and navigate to the URL given. uSkinned Site Builder will be running!

Content Management

Content creation and management are handled expertly through the uSkinned environment. Add, edit, delete, or reorganize content with drag and drop right from the editor screen. 

Site content is arranged as modular components and pods – like easily movable building blocks that click together. 

Each component has a number of different options to give you more flexibility over your changes and to help you with future customizations and page builds. 

This content management method keeps you from labor-intensive coding prone to errors while still giving you the customized, yet fluid, design you want.

uSkinned also gives you a number of additional options such as the ability to edit the SEO details of a page, to quickly change page layouts, to add global components, and to remove/update headers.

uSkinned SEO Features

Customized Meta Tags

uSkinned lets you auto-generate metadata, including Open Graph sharing meta markup. It does so without requiring add-on plugins like other CMS solutions might. You can also override this automatically generated value and format it specifically to your needs for greater control.

XML Sitemaps

These are auto-updated every time you create, update, or delete a page or blog post on your website. You even have full control over this process, making it easier for search engines to locate important information on your site.

Structured Data

uSkinned allows for adding structured information that is highly valuable for search engines. For example, web crawlers can present and recognize pricing menus, ratings, and hours of operation, so your website garners the top spot when searchers request this kind of information.

Canonical URLs

Duplicate content is not great for your SEO. With uSkinned, every page on your site will add a canonical tag as the page source, ensuring that search engines properly index pages that may contain duplicate information.

Benefits of uSkinned

User-Friendly Interface

The uSkinned interface is built from the ground up to be intuitive and easy to use. No complex coding skills are required, and all screens feature an easy guide from one step to the next to get you through a task quickly and efficiently.

Additionally, the built-in Visual Designer lets you work on a website in preview mode to see design changes in real-time, seeing your updates instantly.

Pre-Built Templates

One of the coolest features of uSkinned is the variety of professionally created templates that can be used as a jumping-off point in web development and leave you at an advanced spot in your website creation journey.

Customizable Templates

Templates may give you a head start, but they can be adjusted even further. With Visual Designer, you can adjust the layout, color palettes, object spacing, and fonts used to fine-tune everything about your site. With advanced design and development expertise, you can even adjust the code to make adjustments that more closely match your vision. 

Responsive Design

A melting pot of people consumes the web, and each may access your site from different devices. You want a responsive design built into your website to look great on small mobile screens and full-size monitors.

The uSkinned package provides the tools to accomplish this with its modular page component designs and CMS features that let you customize everything without needing to remember complex code to force the page to do what you want.

SEO-Friendly

uSkinned provides SEO tools out of the box to help you reach the top position in search results. These are built-in and do not need to be installed as a separate feature. Build your site with confidence, knowing that you are designing it with attention to optimization.

Third-Party Plugin Integration

uSkinned Site Builder is a digital experience platform that integrates seamlessly with tools and widgets that let you make the most out of your website. Whether adding eCommerce features, setting up Google Analytics, or integrating third-party forms into a web page, you can do it all with uSkinned.

Multi-Language Support

uSkinned sites can be designed with language localization so that your audience is served the correct page based on their preferences. Umbraco’s Variants feature can provide direct 1-to-1 translation of pages, or you can create multi-site setups with a single click.

uSkinned vs. Custom Web Design

uSkinned simplifies the website authoring process. It allows for the design of a fully responsive and mobile-ready website with little or no coding required. The intuitive and flexible interface lets you design a theme to tie a shared visual environment across all pages. The new website design process can take a fraction of the time, cost, and effort needed with a fully manual custom web design project.

A fully-custom website is built from the ground up to more closely mold to specific designs, management experiences, and workflows. It provides more customization and scalability for organizations that have more in-depth needs such as integrations, strict brand standards, and teams that require custom editor workflows. 

While uSkinned provides all of the tools needed to create and edit pages out-of-the-box, it can also cause issues if not governed appropriately among teams. Having access to all of these options means that different editors can create different experiences with a few button clicks. This can obviously become an issue if not managed properly on an ongoing basis. 

Custom websites can be built to provide flexibility, but also to prevent users from going outside of defined standards. This can be helpful for larger teams that need the ability to govern multiple editors producing and publishing site content. 

If you’re unsure about your website’s specific customization needs, reach out to us here. The Marcel Digital team can help you determine if uSkinned is a good fit, or we can walk you through some of our more customized web development solutions.  

Hundreds of uSkinned support guides can also detail everything you need to know about uSkinned from Umbraco and give you the information and step-by-step instructions to keep you moving forward. These are perfect for marketers with a more DIY-forward approach to customizable content management. 

Watch this video to see all the ways that uSkinned can work for your website creation project.

Frequently Asked Questions About uSkinned

What is uSkinned?

uSkinned is a content editing environment that overlays the Umbraco CMS. It provides a no-code or low-code place to design, author, and edit your website. Elements of web pages are contained in modular pods with new elements added by simply dragging and dropping them on the page.

The real power of uSkinned comes from the prebuilt UI toolkit that gives users access to a full library of page components that can be customized and structured to build content quickly without the need for a development background. 

Also the professionally designed themes can act as ready-made starters for stunning websites. These are customizable, or users can create their own unique designs.

What is Umbraco?

Umbraco is an open-source content management system (CMS) for creating, managing, and sharing your web content. It is written in C# and deployed on Microsoft infrastructure. Umbraco is a stable and scalable solution, which makes it a favorite choice among web developers.

Umbraco can also be utilized as a Headless CMS for omni-channel deployment and management. It is an incredibly versatile, best-in-class CMS that integrates cohesively with tools such as CRMs, marketing automation platforms, APIs, databases, and other third-party integrations. 

What kind of websites can I create with uSkinned?

uSkinned is great for any type of site, but is particularly useful for organizations that have tighter budgets and don’t necessarily care about extensive customizations to out-of-the-box content components. 

uSkinned can be utilized for B2B organizations, SaaS companies, blogs, portfolios, simple eCommerce sites, and much more. 

Check out some of the success stories that others have experienced with uSkinned.

Can I use my domain name with uSkinned?

uSkinned provides hosted and self-hosted options. Even with a hosted uSkinned website, pointing your website to your custom domain is easy.

Follow these easy steps to assign a custom domain to your hosted website.

How much does uSkinned cost?

All pricing information is available via the uSkinned pricing guide. There are both hosted and self-hosted options that customers can purchase.

Hosted websites are housed on uSkinned servers and come pre-installed with Umbraco and uSkinned.

Self-hosted licenses provide the uSkinned software as a download for applying to your web server. 

That being said, the most incredible uSkinned sites are built and customized with a professional partner that understands how to maximize uSkinned features and components. There are many ways you can customize a uSkinned website to make it look and feel like a completely personalized website. uSkinned Partners can help build a site on uSkinned that utilizes all of the features the platform has to offer. 

The initial setup and customization can be a little beyond the capabilities of most organizations, so engaging a trusted partner can be a great way to get the most out of uSkinned out of the box to kickstart your future website and editing experience.