Everything you need to go from a blank screen to a live, fully-featured website.

Getting Started - Levo Documentation

Welcome to Levo! This guide will help you go from a blank screen to a live website in just a few minutes. Levo uses AI to do the hard work for you, so you can focus on your business.

Getting Started with Levo

Users can create a Levo account at app.levo.so/signup with just an email and password - no credit card required.

Sign Up

Getting started with Levo takes less than a minute. No credit card and no lengthy forms required.

How to Create Your Levo Account

A workspace functions as an organization's environment within Levo, containing sites, content, members, analytics, and settings.

Create a Workspace

A workspace functions as an organization's environment within Levo, containing sites, content, members, analytics, and settings. Users can establish multiple workspaces to serve dfferent brands, projects, or clients.

Creating Your Workspace

The Dashboard functions as your workspace entry point, designed to prioritize immediate actions, AI-driven content suggestions, and frequent module shortcuts.

Dashboard

Your Workspace Dashboard

Users with multiple workspaces can navigate between them without logging out.

Switch Workspace

Switching Between Workspaces

Levo integrates artificial intelligence throughout its platform as an inherent feature woven through your workflow, not as a separate add-on.

Levo AI

At Levo, AI isn't an extra tool you have to set up - it's built right into everything you do. We designed it to help you get started fast, so you never have to stare at a blank screen. Here is how our AI helps you every day:

How Levo AI Works Across the Platform

Levo Studio is a visual website builder enabling users to create professional sites without coding, with focus on search engine performance and page speed.

Levo Studio

Levo Studio is a visual website builder enabling users to create professional sites without coding. The platform emphasizes search engine performance, page speed, and clear user experience.

Introduction to Levo Studio

In Levo Studio, a page is a URL - a destination your visitors land on, where you control content visibility, appearance, and public accessibility.

Levo Studio Pages

In Levo Studio, a page is simply a web address, a place your visitors go to. You get to decide exactly how it looks, what it says, and who is allowed to see it.

Understanding Pages in Studio

Levo pages each have a Page Type that determines functionality - whether content is fixed or dynamically rendered per item.

Types of Pages

Every page you make in Levo has a Page Type. This type decides how the page works—like if the words stay exactly the same for everyone, or if the page automatically changes to show different items (like different blog posts or events).

Learn how to create a new page in Levo Studio by choosing a template or starting from a blank canvas, setting page details, and publishing.

How to Create a Page

How to Create Your First Page

Page Settings in Levo Studio lets you manage page title, URL slug, description, SEO meta tags, social sharing OG tags, and custom code.

Page Settings

Your Page Settings allow you to control the details, links, and behind-the-scenes information for your page.

How to Edit Page Settings

Blocks serve as the fundamental building units for page creation in Levo, offering pre-built sections like Navbar, Hero, Content, Contact Us, and Footer.

Blocks

Blocks are the building units of every page you create in Levo. Each block is a pre-built section — Navbar, Hero, Content, Contact Us, Footer, and more — designed so you can assemble a full webpage without writing a single line of code.

Building with Blocks

Learn how to modify what elements show in Levo Studio — including text, images, links, and data — using the Edit Block Panel's Content tab.

How to Edit the Content of a Block

When you click on anything in Levo Studio, an Edit Block Panel pops up on the right. The first tab is the Content tab. This is where you change the words, pictures, links, and data on your page.

When duplicating a page in Levo Studio, you can choose to keep blocks linked to the originals or create independent copies. Learn how to handle block instances.

How Do I Handle Instances of Blocks While Duplicating a Page

You can duplicate a page in two ways: A popup will appear asking for the new page's title and web address (slug).

How Do I Handle Instances of Blocks While Duplicating a Page?

Learn how to use the Style tab in Levo Studio's Edit Block Panel to modify element appearance, including fonts, layout, size, spacing, backgrounds, and effects.

How to Style in Levo Studio

When you click on anything in Levo Studio, the Edit Block Panel opens on the right side of your screen. To change how an item looks, simply click on the Style tab at the top of that panel.

How to Style Elements in Levo Studio

The Layout group in Levo Studio controls how elements behave in the page flow and how they arrange their children using Display, Flex, and Grid options.

Layout

Layout controls how items are arranged and positioned on your page. If you have ever felt frustrated and wondered, "Why won't these two things sit side-by-side?" — this is the menu where you fix it.

Layout & Positioning — Display, Flex & Grid

Controlling element dimensions and spacing is critical for creating pages that feel intentional and polished rather than cramped or bloated.

Size and Spacing

Two of the most important things you can control are the size of an item, and the empty space inside and around it. Getting this right is the secret to making your page look clean and professional instead of cramped or messy.

Controlling Size & Spacing

The Background group in Levo Studio manages visual elements appearing behind content, including colour, image, video, or layered effects.

Background

The Background settings control what appears behind your content. This can be a simple color, a striking photo, a moving video, or a cool layered effect.

Backgrounds — Colors, Images & Video

The Effects group in Levo Studio provides visual depth and definition through borders, shadows, and opacity controls for all elements.

Effects — Border, Shadow & Opacity

The Effects menu helps you add depth and definition to your page. This is where you use borders, drop shadows, and transparency to make your items look incredibly polished!

Visual Effects — Borders, Shadows & Opacity

The Font Options group manages typography across headings, text, buttons, and containers, controlling how text reads and feels on pages in Levo Studio.

Typography — Font Options

The Font Options menu controls how all your words look and feel! You can use these settings to style your headings, paragraphs, and buttons so they perfectly match your vision.

Typography — Choosing & Styling Fonts

Every website has a distinct personality expressed through colors, fonts, and design choices. In Levo, this personality is managed through the Theme feature, which serves as the design foundation for your site.

Theme

Every website has its own unique personality, shown through its colors, fonts, and overall style. In Levo Studio, you control this personality using the Theme feature! Think of your Theme as the master blueprint for your entire website.

Your Site Theme — Colors, Fonts & Design Foundation

The Primitive Tab serves as the foundational design layer where raw building blocks like colors, fonts, layout, and effects are configured for your entire site.

Theme Editing Panel — Primitive Tab

The Primitive Tab is the foundation of your website's entire design. Think of it as your raw building blocks! Everything else on your site — every single button, block, and page — copies its style from the values you set here.

Theme Primitives — Colors, Fonts & Raw Building Blocks

The Components tab governs application of raw values to specific elements, offering granular control over major element types.

Theme Editing Panel: Components Tab

While the Primitive tab gives you raw building blocks (like colors and fonts), the Components tab lets you use those blocks to build specific items! Here, you get fine control over the major pieces of your website. Just click on any component type (like a Button or a Heading) to access its style controls.

Theme Components — Styling Buttons, Headings & More

To finalize theme modifications, select Save at the editing panel's base to apply the theme across your entire site globally.

Saving and Resetting the Theme

When you are happy with your changes, just click Save at the bottom of the editing panel! This will automatically apply your new design choices to your entire website.

How to Save or Reset Your Theme

Variants are named style presets from your Site Theme. Rather than styling each element individually, apply a variant to instantly give an element a complete, pre-defined appearance.

How to Use Variants

Think of Variants as saved style "recipes" from your main Theme. Instead of slowly styling every single button or heading from scratch, you can just apply a Variant to instantly give that item a perfect, pre-made look!

Applying Style Variants to Elements

Every component supports custom variants. If the built-in Button sizes or Typography variants do not cover your needs, you can create your own.

Creating Your Own Variants

Every single component in Levo Studio lets you build custom Variants! If the built-in styles (like the standard Button sizes or Text options) don't perfectly fit what you need, you can easily build your own from scratch.

Creating Custom Style Variants

Elements change appearance based on user interaction. Levo Studio allows separate styling for different element states, providing control over how elements respond to visitor behavior.

Element States — Hover, Disabled & Active

Items on your page actually change how they look when a user interacts with them! Levo Studio lets you easily style these different "states", giving you total control over how your website responds to your visitors.

Element States — Styling Hover, Disabled & Active

The Style tab uses color-coded labels to indicate where style values originate and whether they have been customized.

What the Colours on Field Labels Mean

While using the Style tab, you will notice that some of the setting labels light up in different colors! Levo Studio uses these color-coded labels as helpful hints to tell you exactly where a styling rule is coming from.

Understanding Color-Coded Style Labels

Every style modification in Levo Studio's Style tab targets a specific screen size, with Desktop as the default view and support for Tablet and Mobile breakpoints.

Responsive Design — Styling for Every Screen Size

Every time you make a change in the Style tab, you are actually styling for a specific screen size! "Desktop" is always your main, default view. Levo Studio lets you design perfectly for three different screen sizes (often called "breakpoints"):

Responsive Design (Styling for Different Screen Sizes)

The Animation tab in Levo Studio's Edit Block Panel enables motion effects without coding. Animations make your page feel alive instead of static.

How to Animate Elements or Sections

Animations are the secret ingredient to making your website feel alive and professional instead of boring and static! The Animation tab in the Edit Block Panel lets you add incredible motion effects without writing a single line of code.

Adding Animations to Elements & Sections

Entry animations activate once when elements initially become visible as users scroll, transforming static pages into progressively revealing experiences.

Entry Animations

Entry animations play exactly once when an item first appears on the screen. It is an amazing way to make your website reveal itself progressively as the user scrolls down!

Entry Animations — Reveal Elements on Scroll

Scroll animations are driven by scrolling. As the visitor scrolls down the page, the element transforms in sync with the scroll position.

Scroll Animations

Scroll animations are tied directly to your visitor's mouse wheel! Unlike Entry animations that just play once, Scroll animations move continuously as a visitor scrolls up and down the page (playing forward as they scroll down, and reversing like a videotape as they scroll back up!)

Scroll Animations — Motion Driven by Scrolling

Hover animations activate when visitors move their cursors over elements on desktop, and they work particularly well with interactive components like buttons, cards, and images.

Hover Animations

Hover animations play whenever a laptop or desktop visitor places their mouse cursor over an item! Adding slightly bouncy hover animations to things like buttons and cards feels incredibly satisfying to click.

Hover Animations — Interactive Cursor Effects

All three animation types share the same timing controls that establish the feel and rhythm of animations, including duration, delay, and easing.

Timing Controls

All animations on Levo use the same three timing settings: Duration, Delay, and Easing. These controls help set the rhythm and feel of how elements move. Time is measured in milliseconds (ms), meaning 1,000ms is equal to 1 second.

Animation Timing — Duration, Delay & Easing

One or two well-placed animations per section create more impact than animating every single element. Learn key guidelines for effective animation in Levo Studio.

Animation Tips and Best Practices

Animation Best Practices — Less is More

Levo's personalization feature enables site owners to customize content and access permissions based on visitor location and language preferences.

Personalization: Creating Language and Country Specific Pages

Levo's Personalization feature lets you change what visitors see based on where they live or the language they speak. Instead of showing the exact same website to everyone, you can create special versions—called variants.

Creating Pages for Specific Languages & Countries

Page variants are how personalization comes to life on individual pages — create separate versions for specific countries or languages while maintaining the same URL.

Page Variants in Studio

Page variants are how personalization comes to life on individual pages. You can create separate versions for specific countries or languages while maintaining the same URL. Levo automatically detects visitor location and language to serve the appropriate version.

Creating Page Variants for Different Audiences

Before targeting specific countries in page variants, you must add those countries to your workspace.

Countries and Groups

Setting Up Countries & Groups for Personalization

Access Restrictions enable site-wide control over which countries can visit your site, functioning as a gating mechanism rather than content personalization tool.

Access Restrictions

Restricting Site Access by Country

A sitemap file catalogs all website pages to help search engines discover and index content efficiently. Levo handles sitemap generation automatically.

Sitemap

Your website needs two things to show up on search engines like Google: a sitemap that lists every page on your site, and a robots.txt file that tells search engines which pages they are allowed to visit. Levo handles both automatically — but this tab lets you fine-tune the rules when needed.

Sitemap & Robots

The Custom Code section allows users to insert raw HTML, CSS, or JavaScript into individual pages without modifying global site settings.

Custom Code

Think of Custom Code as a way to "teach" your website new tricks that aren't built-in yet. Whether you want to add a chat bubble, or change a specific font, Levo gives you two ways to add your own code safely.

Adding Custom HTML, CSS & JavaScript

Levo maintains automatic change records for each page, allowing users to revisit previous states without permanent consequences.

Version History

Levo automatically saves backup copies of your pages as you work. This acts like a time machine—if you ever make a mistake or want to undo a big change, you can easily revisit and restore older versions safely!

Page Version History — Undo Any Change

Changes are never published until you say so — which means you can work across multiple pages, get your team to review, and publish only what is ready.

Publishing

In Levo, your edits are never shown to the public until you explicitly say so. This gives you the freedom to work on multiple pages at once, experiment with new designs, and only publish exactly what is finished and ready.

Publishing Your Site

Domain settings in Levo Studio including domain setup and URL redirections.

Domain

Your domain is your brand’s home on the internet. With Levo, you can easily connect a custom domain and control how visitors navigate your site using redirects—all without technical complexity.

Domain Settings Overview

A Levo site comes with a free subdomain but can be connected to a custom domain through the Domain settings section.

Domain Setup

When you create a website on Levo, it automatically comes with a free web address (subdomain). You can use this right away, or connect your own custom domain for a more professional and branded experience.

Connecting a Custom Domain

The Domain Setting feature enables workspace administrators to manage and configure custom domains.

Once you’ve connected a custom domain to your Levo site, you can easily manage, update, or remove it anytime from your dashboard.

Managing Your Custom Domain

Redirects tell Levo to send visitors from outdated URLs to new ones, which is essential for maintaining your SEO ranking and preventing broken links.

URL Redirections

When you update your website such as renaming pages, moving folders, or switching platforms some old links may stop working. When someone opens these links, they see a 404 Error (Page Not Found). This can confuse users and reduce your website’s performance on search engines.

Setting Up URL Redirects to Avoid Broken Links

The Languages section enables you to add supported languages to your workspace and produce language-specific page versions for building multilingual sites in Levo.

Languages

If you want your website to appeal to an international audience, the Personalization module is where you start! This area lets you configure support for different languages and regions, empowering you to build specialized, localized versions of your pages.

Adding Languages for Multilingual Sites

A Collection functions as a spreadsheet with superpowers — columns (fields) you define and rows (entries) containing your data, powering forms, page generation, and dynamic blocks.

What is a Collection

A Collection is a structured database where you define fields and add entries, like a spreadsheet. Once set up, it powers website forms, auto-generates pages from a template, and fills dynamic content blocks across your site.

What is a Collection?

A Collection functions as a structured database table where you define fields (columns) and add entries (rows) containing your data.

Creating a Collection

A Collection is basically a smart folder for your data. You decide what kind of information you want to store (like names, prices, or photos), and then you start adding your items.

How to Create Your First Collection

Collections use fields to define what data entries can hold. Field types determine accepted data, form appearance, and available filtering and sorting options.

Field Types

Collections use fields to define what data entries can hold. Field types determine the accepted data, form appearance, and available filtering/sorting options.

Collection Field Types — What Data Can You Store?

Entries represent the rows of data in a Collection, with each entry containing values for all defined fields.

Managing Entries

Entries represent the rows of data in a Collection. Each entry contains values for all defined fields.

Adding & Managing Collection Entries

Views function as independently configurable display modes for Collection data, each with its own layout, visible fields, sort order, and filters.

Levo Docs

Levo Docs