Documentation
Step-by-step guides for every tool in Webpress — from your first project to a published site.
Getting Started
What is Webpress?
A plain-language introduction to Webpress — what it does, who it's for, and the handful of ideas that make everything else click.
Read guideGetting started with Webpress
Create your first website project and open it in the editor in a couple of minutes. No code required.
Read guideAccounts & signing in
Create your Webpress account, sign in, reset a forgotten password, and turn on extra security like two-factor authentication.
Read guideWorkspaces
What a workspace is, why you have one, and how to create and switch between them to keep different businesses or clients separate.
Read guideThe dashboard
A tour of your Webpress home screen — the sidebar, your projects, and where to find billing, analytics, submissions, and more.
Read guideThe Editor
The editor at a glance
Tour the main regions of the Webpress editor — the top bar, the left panel, the canvas, and the customizer — so you know where everything lives.
Read guideAdding and editing content
Drag blocks onto the canvas, edit text inline, replace images, and style elements with the customizer — the core building loop.
Read guideSelecting & moving elements
Select the right element, move it, copy it, and delete it — plus the on-canvas toolbar and right-click menu.
Read guideLayers & structure
Use the Layers panel to see your page as a tree, select hard-to-click elements, reorder and nest them, and hide or lock what you're not working on.
Read guideManaging pages
Add pages, set the homepage, edit per-page settings, and review your site structure in the Site Map.
Read guideResponsive design
Make your site look right on phones, tablets, and desktops by checking and adjusting each screen size with the device selector.
Read guideUndo, redo & version history
Never lose work — undo and redo any change, rely on autosave, and roll back to a saved version of your project.
Read guideImporting HTML
Bring an existing HTML design onto the canvas by uploading a file or pasting code — and understand what's kept and what's removed.
Read guideKeyboard shortcuts
Work faster in the editor with shortcuts for selecting, duplicating, nudging, saving, and the command palette.
Read guideStyling & Design
Styling overview
What "styling" means, where the controls live, and the difference between Simple and Pro mode — your map for the whole Styling & Design section.
Read guideUnderstanding classes & states
What CSS classes are, how to use them to style many elements at once, and how to style hover and other states — explained for non-coders.
Read guideTypography
Control how your text looks — font, size, weight, line height, letter spacing, alignment, and more — with every control explained in plain language.
Read guideColors & backgrounds
What text color, background color, background images, and gradients are — and how to set each one with the color and background controls.
Read guideSpacing — margin & padding
The single most useful styling skill — understand the box model and use margin and padding to give your design room to breathe.
Read guideSizing & units
Set width and height, understand px, %, rem, vw and vh, and use overflow and object-fit — the controls in the Dimension sector.
Read guideBorders & corners
Add outlines around elements and round their corners — from subtle card borders to fully rounded pill buttons.
Read guideEffects & shadows
Add depth and polish with shadows, transparency, blur and other filters, smooth transitions, and transforms.
Read guideLayout — flexbox & grid
Arrange elements into rows, columns, and grids with the Layout sector — align them, space them with gaps, and control how each item behaves.
Read guidePosition & layering
Pin elements in place, overlap them, and control which sits on top — using position, offsets, and z-index. An advanced but powerful sector.
Read guideBrand kit & design tokens
Set your colors, fonts, and corner style once in the Brand Kit, and have your whole site follow — the fastest way to look consistent and re-theme in one click.
Read guideAdding fonts
Install Google Fonts, use the fonts that come with templates, and upload your own font files so they appear in every font picker.
Read guideCustom CSS
The escape hatch for advanced styling — add any CSS property an element's controls don't expose, plus where site-wide custom code lives.
Read guideComponents & Tools
The blocks library
The Blocks panel is your palette of ready-made building pieces — from a single button to a whole section. Here's what's inside and how to use it.
Read guidePro components
Rich, configurable building blocks — video, accordions, tabs, countdowns, pricing cards, carousels, and more — that you set up with simple settings, no code.
Read guideComponent properties & traits
The Properties tab controls what an element IS and DOES — a link's destination, an image's alt text, a video's URL — as opposed to how it looks.
Read guideImages & media
Upload and reuse images, browse your library, generate pictures with AI, and keep everything accessible with alt text.
Read guideForms & lead capture
Add a contact form, configure it, and collect the messages visitors send in your dashboard inbox — with email notifications and spam protection built in.
Read guideSymbols (reusable components)
Design an element once, reuse it everywhere, and update every copy at the same time — perfect for navigation bars, footers, and repeated calls-to-action.
Read guideThe auditor (quality & accessibility)
A built-in reviewer that scans your page for accessibility, SEO, and link problems, scores it, and stops you publishing pages with serious errors.
Read guideAI Features
AI features overview
What the AI in Webpress can do — generate whole sites, edit sections by chatting, restyle the element you've selected, and create images from a prompt.
Read guideBuilding with the AI assistant
Chat with the AI to generate a whole page or site, add and change sections, and refine your design in plain language — right inside the editor.
Read guideThe AI design copilot
Select any element and ask the AI to rewrite its text, restyle it, or match it to your brand — a single, undoable edit scoped to just that element.
Read guidePublishing & Domains
Publishing your site
Take your project live on the web — the publish flow, the pre-publish quality check, updating, and unpublishing.
Read guideYour free subdomain
Every site gets a free webpress.id web address. Here's how to choose it, change it later, and take your site offline.
Read guideCustom domains
Connect your own domain like yourbrand.com — add it, set the DNS records at your registrar, verify, and go live with automatic HTTPS.
Read guideHow published sites work
Understand the difference between your draft and your live site, what publishing actually does, and why your edits don't appear until you update.
Read guideSettings & SEO
Project settings
The site-wide settings drawer — your project's name and favicon, social sharing defaults, domain, analytics IDs, custom code, and version history.
Read guidePage settings
Give each page a name, a clean URL, a description, and a homepage flag — and preview how it appears in Google as you type.
Read guideSEO basics
What SEO is, the handful of settings that matter, and how Webpress makes every page search-ready — even if you do nothing.
Read guideAnalytics
See how many people visit your published sites, where they come from, and which pages are popular — with privacy-friendly, built-in analytics.
Read guideSearch-engine indexing
How Google and other search engines discover your site, what Webpress does automatically, and the few things you can do to speed things up.
Read guideAccount & Billing
Plans & pricing
What the Free plan includes, what paid plans unlock, and how plan limits affect projects, pages, custom domains, and coins.
Read guideSubscriptions & billing
How to subscribe to a paid plan, pay your invoices, change or cancel your plan, and what happens if a renewal goes unpaid.
Read guideCoins & credits
What coins are, the difference between monthly and purchased coins, what they're spent on, and how to top up — your in-app credit for AI features.
Read guideCoupons & discounts
Redeem a discount code on a subscription or a coin top-up — where to enter it, how discounts work, and what the messages mean.
Read guidePlugins & Templates
Using templates
Start from a professionally-designed template for your industry, preview it, and apply it to your canvas — then make it yours.
Read guideThe plugin marketplace
Plugins add new blocks and features to the editor. Browse the marketplace, install them into a project, and configure them — safely.
Read guideBecoming a contributor
Join the creator program to publish your own templates and plugins for the whole Webpress community to use.
Read guide