Getting Started with Your Website
Create and customize your site with ByteEditor in minutes, no coding required.
Follow these quick steps to go from a fresh install to a live website on Umbraco.
Step 1: Log in
Enter yourdomain.com/umbraco to log in and access the ByteEditor Back Office.
If you sign up for a hosted version of ByteEditor, you can use the direct link provided in the welcome email you received after registering.
Once logged in, you’ll have access to your content tree, design settings, and the visual editor.
Step 2: Review our video guide and familiarize yourself with ByteEditor
Review a full video walkthrough — adding blocks, switching theme variants live, drag-and-drop reordering, the new SEO tabs, and the token-based Design Builder:
(Or watch directly on YouTube: https://www.youtube.com/watch?v=8OySalbmEXk)
Step 3: Review and Try Ready-to-Use Pages
In the Content Tree, you’ll find pre-built pages for different site types. Expand the Home Page and then "Examples of the pages" and browse the pre-built pages to see layouts and styles.
Step 4: Edit Page Content
Click on a ready to use page to view its content.
A page in ByteEditor consists of 3 types of components or building blocks:
- Layouts (or Containers) that define the number of columns for the page builder.
- Pre-Designed Page Blocks that take whole page width, like a Banner.
- Page Elements and Cards that can be added into Layout columns or dynamic areas of Page Blocks.
To customize your page, simply click and drag elements to rearrange sections as needed. You can move headers, images, buttons, and more using the visual editor.
To make changes to a specific page component (like padding, links, or background), click the Edit icon to open its settings panel. Make your adjustments and instantly preview them on the left side. You can make multiple changes without saving the page. When done, don’t forget to Save or Save and publish.
To add a new page component, hover on a divider and click “+” or click “Add Layout” at the end of the page.
See our user guides for Visual Page Builder to learn more:
1. Add a Layout
2. Add Ready-to-use Blocks
3. Insert Elements
Step 5: Style Your Page Elements
To style your page elements, click on the edit icon of the specific element, in the new window scroll down to Styling, here you can select a theme variant. Try to switch and see the preview live as you update.
You can also add your Custom CSS for specific elements.
Step 6: Optimize your On-Page SEO
To make your page search engine friendly, click ”SEO Meta Tags” tab to enter text for organic results.
Click "SEO Page Structure" to analyze and update page headers. Click a header to navigate to the page builder right to where the element with the header is.
Click "Content Stats" to check most used words, see page word and character count.
See our on-page SEO user guide for more information.
Step 7: Customize Your Website Design
Click Design in the Content Tree on the left side of the page to access all customization options. Select the Default design.
Fully personalize your website’s appearance on "Theme" tab, update your colors, choose fonts, tweak button styles.
Upload your logo, and easily configure your header and footer layout, all in one place.
For more customization guidance refer to out Design Buider Guide.
Step 8: Configure Site Settings
To set up the core details of your website, click Settings in the Content Tree on the left side of the page.
Here you can:
Manage header and footer entirely
Set-up your website Identity
Add scripts to all pages, like Google Tag Manager
Configure your ReCaptcha settings for forms
Manage page redirects
Don’t forget to click Save & Publish after making changes.
