Documentation
Everything you need to know to build beautiful one-page sites with Folio.
Getting Started
Building Sites
Publishing
Quick Start Guide
Get your first site up and running in under 5 minutes. Follow these simple steps to create your one-page website.
Create an account
Sign up with your email at /login. No credit card required to get started with the free plan.
Choose a template
Browse our 8+ professionally designed templates at /build. Pick one that matches your needs - Profile, Landing, Portfolio, Event, and more.
Customize your content
Use our visual editor to add your text, upload images, and configure buttons. Everything is drag-and-drop with real-time preview.
Preview and publish
Click the preview button to see how your site looks on desktop and mobile. When ready, hit Publish to go live instantly.
Creating Your First Site
Creating a site with Folio is designed to be intuitive. Here is a detailed breakdown of the site creation process.
Dashboard Overview
After logging in, you will see your dashboard showing all your sites. Click "New Site" to begin.
Template Selection
Browse templates by category: Profile, Landing Page, Form, Portfolio, Sectioned, Linktree, Resume, and Event. Each template includes:
- Pre-designed layouts optimized for mobile and desktop
- Professional color schemes and typography
- Placeholder content to guide your customization
- Responsive design that works on all devices
Site Settings
Configure your site basics before editing:
- Site Name: Internal name for your reference
- Subdomain: Your free folio.site address (e.g., mysite.folio.site)
- Visibility: Public or draft mode
Understanding Templates
Folio offers 8 professionally designed templates, each optimized for specific use cases. All templates are fully responsive and customizable.
Profile
Personal bio with social links
Best for: Personal websites, freelancers
Landing
Product showcase with CTA
Best for: Products, apps, services
Form
Email signup or contact form
Best for: Newsletters, waitlists
Portfolio
Image gallery grid
Best for: Photographers, designers, artists
Sectioned
Multi-section layout
Best for: Business sites, agencies
Linktree
Social links page
Best for: Social media, influencers
Resume
CV layout with experience
Best for: Job seekers, professionals
Event
Event promotion page
Best for: Conferences, meetups, parties
Pro All templates are included with both Free and Pro plans. Pro users get access to additional customization options.
The Editor
The Folio editor is a powerful visual tool for building your site. It features real-time preview, drag-and-drop functionality, and an intuitive interface.
Editor Layout
The editor consists of three main areas:
- Left Panel: Element library - drag elements here to add to your site
- Center Canvas: Your site preview - click elements to edit
- Right Panel: Properties panel - customize selected elements
Key Features
Real-time Preview
See changes instantly as you edit
Device Preview
Test on desktop, tablet, and mobile
Undo/Redo
Cmd/Ctrl+Z to undo, Cmd/Ctrl+Shift+Z to redo
AI Assistant
Get help from Gemma AI (Pro feature)
Working with Elements
Elements are the building blocks of your Folio site. Learn how to add, edit, and style each type of element.
Text Elements
Headlines, paragraphs, and formatted text. Click to edit inline or use the properties panel.
Styling: Font family, size, color, alignment, line height, letter spacing
Image Elements
Upload images or add URLs. Supports JPG, PNG, GIF, WebP formats.
Styling: Border radius, shadow, opacity, object-fit, hover effects
Button Elements
Call-to-action buttons with links. Configure target URLs and styling.
Styling: Background color, text color, border, border radius, padding, hover states
Container Elements
Group elements together and apply layout properties.
Styling: Background, padding, margin, flex/grid layout, border
Forms and Widgets
ProCollect information from visitors and embed third-party content. Forms are available on Pro and Pro Plus plans.
Contact Forms
Add a contact form to let visitors reach you. Configure:
- Form fields (name, email, message, custom fields)
- Submission email address
- Success message
- Required field validation
Email Signup Forms
Build your email list with integrated signup forms. Compatible with:
- Mailchimp
- ConvertKit
- Substack
- Custom webhook endpoints
Embeds
Add external content to your site:
- YouTube/Vimeo videos
- Google Maps
- Calendly booking
- Custom HTML/iframe (Pro Plus)
Custom CSS
Pro PlusPro Plus users can add custom CSS to achieve advanced styling beyond the built-in options.
Getting Started
In the editor, open the Settings panel and click "Custom CSS" to add your styles.
CSS Scope
Custom CSS is scoped to your site only and loaded after all default styles. You can:
- Override existing styles
- Add custom animations
- Create custom classes for elements
- Use CSS variables for theming
Example
/* Custom button hover effect */
.btn-custom {
transition: all 0.3s ease;
}
.btn-custom:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}Note:Custom CSS requires understanding of CSS. Invalid CSS may break your site's styling.
Preview and Publishing
Before making your site public, preview it to ensure everything looks perfect across all devices.
Preview Mode
Click the Preview button in the editor to see your site as visitors will. Preview mode allows you to:
- Test all links and buttons
- Verify forms submit correctly
- Check mobile responsiveness
- Review loading speed
Publishing Your Site
When ready to go live:
- Click the "Publish" button in the editor
- Confirm your subdomain or custom domain
- Your site goes live instantly
- Share your URL with the world
Unpublishing
Need to take your site down? You can unpublish anytime from your dashboard. Your content is saved and you can republish later.
Custom Domains
ProPro users can connect their own domain name for a professional web address. Use yourdomain.com instead of yourdomain.folio.site.
Setup Process
- Purchase a domain from a registrar (Namecheap, GoDaddy, etc.)
- In Folio dashboard, go to Site Settings > Custom Domain
- Enter your domain name
- Add the DNS records provided to your domain registrar
- Wait 24-48 hours for DNS propagation
- Verify connection in Folio
DNS Configuration
You will typically need to add:
- A CNAME record pointing to domains.folio.site
- Or an A record with our IP addresses
Tip: We recommend using a CNAME record for www subdomains and an A record for root domains.
HTTPS/SSL
All custom domains automatically receive free SSL certificates via Lets Encrypt. Your site will be served over HTTPS with no configuration needed.
SEO and Sharing
Optimize your site for search engines and social media sharing. Good SEO helps people find your site, while proper sharing settings make your links look great.
SEO Settings
In Site Settings > SEO, configure:
- Page Title: Appears in browser tabs and search results
- Meta Description: Short summary for search results
- Keywords: Relevant terms for your content
- Canonical URL: Preferred URL for search engines
Social Sharing
Configure how your site appears when shared:
- OG Image: Image shown on Facebook, LinkedIn, etc.
- Twitter Card: Image and layout for Twitter
- Social Title: Title shown in social previews
- Social Description: Description for social platforms
Best Practices
Keep titles under 60 characters
Descriptions under 160 characters
Use OG images 1200x630px
Include relevant keywords naturally
Can't find what you're looking for?
Our support team is here to help you build amazing sites.