Getting started
Heee.ro is a hero-section website builder. Each site is made of one or more full-screen sections. Each section contains blocks — the content you place on the page — and a style that controls the background, colors, and layout.
1 — Create your site
From the dashboard, click New site. A site is created instantly with a default section. Click the site title in the top bar to rename it.
2 — Edit your content
The builder opens in Simple mode — a guided panel on the right where you fill in your name, what you do, your buttons, social links, and theme. For full control, switch to Advanced mode using the toggle in the top bar.
3 — Style your sections
In Advanced mode, switch to the Slide tab in the right panel to set the background, text colors, button style, content width, and entrance animation for each section independently.
4 — Publish
When you are ready, click Publish in the top bar. Your page goes live at your-slug.heee.ro. Changes auto-save as you type — publishing just toggles visibility.
The builder auto-saves every 800 ms. You will see "Saved" in the top bar when the latest changes are stored.
The builder
The builder is divided into four areas: the top bar, the sections panel (left), the canvas (center), and the editing panel (right).
Top bar
Runs across the top of the builder. From left to right it shows the site title (click to rename), save status (Saving… / Saved / Unsaved changes), the Simple / Advanced mode toggle, viewport buttons (Desktop · Tablet · Mobile), a Preview ↗ link when published, and the Publish button.
Sections panel (left)
Shows all your sections as thumbnails. Click a thumbnail to make it active. Drag to reorder. Hover a thumbnail and click × to delete it. Press + at the bottom to add a new section.
Canvas (center)
A live preview of the active section at the selected viewport size. Use the device buttons in the top bar to switch between Desktop, Tablet (768 px), and Mobile (390 px). In Advanced mode, click any text block directly on the canvas to jump to its editor in the right panel.
Editing panel (right)
The right panel changes depending on which mode you are in. In Simple mode it shows the guided content form. In Advanced mode it shows three tabs: Blocks, Slide, and Settings.
Simple mode
The default experience for new builders. The right panel presents a single guided form covering everything you need for a clean, visual website.
| Section | What you can edit |
|---|---|
| Theme | Pick a color preset. Switches background and accent colors across all sections instantly. |
| Content | Your name / title, a short description of what you do, and your main call-to-action button (label + URL). An optional second button is also available. |
| Social | Add links for up to 25 platforms — Twitter / X, LinkedIn, GitHub, Instagram, and more. |
| Appearance | Navigation bar style (bar or pill), brand name, and whether the nav is shown. |
| Sections | Add new sections from a set of pre-built templates, or delete an existing section. |
Switch to Advanced mode at any time — all your Simple mode content carries over. You can switch back to Simple mode too, and your changes will be preserved.
Advanced mode
Full control over every block, style, and setting. The right panel shows three tabs for the active section.
| Tab | What it does |
|---|---|
| Blocks | Add, reorder, edit, and delete content blocks on the active section. |
| Slide | Control the background, colors, alignment, width, and animation of the active section. |
| Settings | Site-level options: title, slug, fonts, SEO, navigation, and Pro features. |
Blocks
Blocks are the building pieces of a section. Open the Blocks tab in the right panel (Advanced mode), then click + Add block to insert one. Drag the ⠿ handle to reorder. Each block has two sub-tabs when expanded: Content (what it shows) and Style (how it looks).
Block style options
Every block exposes these style controls in its Style tab:
| Control | Values | Effect |
|---|---|---|
| Alignment | Left / Center / Right | Overrides the section-level alignment for this block only. Click the active value to reset. |
| Size | XS → XL | Controls font size (text blocks) or button padding (CTA). Not shown for blocks where size is fixed. |
| Spacing Above | None → XL | Adds margin above the block (0 / 4px / 8px / 16px / 32px / 64px). |
| Spacing Below | None → XL | Adds margin below the block. |
Available block types
| Block | Purpose |
|---|---|
| Heading 1 / 2 / 3 | Large display text. Switch level with the H1/H2/H3 buttons. Size scales with XS–XL. |
| Paragraph | Body copy. Supports XS–XL font size. |
| CTA Buttons | Up to 3 call-to-action links. Each button has a label, URL, variant (Filled / Outline / Ghost), and optional icon with left/right position. |
| Social Icons | Row of social media icon links. Choose from 25 platforms, set icon size (XS–XL), color mode (Slide / Brand / White / Black), and gap. |
| Image | Upload a PNG, JPG, SVG, or WebP. Files over 3 MB are auto-compressed. Control width, height, fit, and rounded corners. |
| Video | Embeds a YouTube video by URL. |
| Columns | Multi-column grid (2–6 cols). Set custom per-column widths, gap, and vertical alignment. Each column accepts all block types except another Columns block. |
| Divider | Horizontal line. Customize color, thickness, and width. |
| Spacer | Invisible vertical gap. Size: SM / MD / LG / XL. |
Slide style
Open the Slide tab in the right panel (Advanced mode) to control everything visual about the active section. Changes apply only to that section — each section has its own independent style.
| Option | Details |
|---|---|
| Background | Color (solid), Gradient (8 presets + custom CSS), Image (URL), or Video (YouTube URL). |
| Overlay | Tinted color overlay on top of image/video backgrounds. Set color and opacity. |
| Content Width | XS = 50% · SM = 640 px · MD = 896 px (default) · LG = 1200 px · XL = full width |
| Alignment | Left / Center / Right — controls text and block alignment within the content column. |
| Text Color (primary) | Color for headings. |
| Text Color (secondary) | Color for paragraphs and secondary text. |
| Button Radius | XS = 2 px · SM = 6 px · MD = 12 px · LG = 20 px · XL = pill |
| Button Text Size | XS – XL font size for all CTA buttons on this section. |
| Button Background / Text | Fill and label colors for Filled variant buttons. |
| Entrance Animation | None / Fade in / Slide up — plays when the section first appears. |
Columns block
The Columns block creates a CSS grid layout inside a section. It is the only block that can contain other blocks.
Column count
Choose 2 – 6 columns. Changing the count resets widths to equal distribution.
Column widths
Each column has a percentage input. The total should equal 100 — a warning appears if it does not. Use Reset equal to restore even distribution. Examples: 50/50, 30/70, 20/20/60, 60/10/10/10/10.
Column alignment
Each column header in the editor has Left / Center / Right buttons that control the text and block alignment within that column independently.
Vertical alignment
Controls how columns sit relative to each other when they have different heights: Top (default), Center, Bottom, or Stretch.
Drag blocks between columns using the ⠿ handle. A blue highlight shows the drop target column.
Settings
Site-level options available in the Settings tab of the right panel (Advanced mode). These apply across all sections.
| Setting | Details |
|---|---|
| Page title | The browser tab title and default share title. |
| URL slug | Your subdomain: your-slug.heee.ro. Must be unique. Changing it updates your live URL immediately. |
| Headline font | Google Font used for H1/H2/H3 blocks. 40+ fonts available across Sans-serif, Serif, Display, and Monospace categories. |
| Body font | Google Font used for paragraphs and body text. |
| SEO title | Overrides the page title in search results. |
| SEO description | Short description shown in search snippets. |
| Custom domain | Pro Connect a CNAME domain. Add the DNS record shown, then click Verify. |
| Password protect | Pro Require a password to view your published page. |
| Analytics | Pro Track page views and CTA clicks. |
| Remove branding | Pro Hide the "Made with Heee.ro" badge. |
Custom domain Pro
Connect your own domain (e.g. www.yourname.com) so your published page is served there instead of the default your-slug.heee.ro URL.
Step 1 — Enter your domain in the builder
Open the Settings tab in the right panel (Advanced mode), scroll to Custom Domain, and type your domain exactly as you want it to appear — e.g. www.yourname.com. The builder auto-saves it.
Step 2 — Add DNS records at your registrar
Log in to your domain registrar (Namecheap, GoDaddy, Cloudflare, etc.) and add these two records in the DNS / Zone Editor for your domain:
| Type | Name | Value | Purpose |
|---|---|---|---|
| A | @ | 76.76.21.21 | Apex domain (yourname.com) |
| CNAME | www | heee.ro | www subdomain (www.yourname.com) |
Name should be just @ and www — not the full domain. Some registrars show the full domain automatically; do not duplicate it.
Step 3 — Verify
Back in the Settings tab, click Verify Domain. DNS changes can take up to a few hours to propagate (depending on your registrar's TTL). If verification fails, wait 30 minutes and try again.
Step 4 — SSL certificate
Once DNS is verified, your hosting server needs an SSL certificate for your domain so visitors get a secure https:// connection. If you are on a cPanel host, go to cPanel → SSL/TLS → AutoSSL and run it, or add your domain as an Addon Domain first so AutoSSL can issue a cert automatically.
Both the A record and the CNAME are needed. The A record handles visitors who type yourname.com (no www), and the CNAME handles www.yourname.com.
Plans
Heee.ro is free to use. Pro and Business unlock advanced features for creators and agencies who need more power.
| Feature | Free | Pro | Business |
|---|---|---|---|
| Hero pages | 1 | 3 | 10 – 500 |
| Sections per page | Up to 2 | Unlimited | Unlimited |
| Image upload limit | 0.5 MB | 2 MB | 5 MB |
| All blocks & styles | ✓ | ✓ | ✓ |
| Mobile responsive | ✓ | ✓ | ✓ |
| SEO metadata | — | ✓ | ✓ |
| 40+ Google Fonts | ✓ | ✓ | ✓ |
| Custom domain | — | ✓ | ✓ |
| Remove branding | — | ✓ | ✓ |
| Analytics | — | ✓ | ✓ |
| Password protection | — | ✓ | ✓ |
| Price | $0 / forever | $14 / year | $29 – $299 / year |
Business tiers
The Business plan is designed for agencies and professionals managing multiple client pages. Choose the site quota that fits your workload — you can upgrade at any time.
| Sites included | Price |
|---|---|
| 10 sites | $29 / year |
| 25 sites | $49 / year |
| 50 sites | $79 / year |
| 100 sites | $119 / year |
| 250 sites | $199 / year |
| 500 sites | $299 / year |
All Business tiers include every Pro feature. Upgrading your tier preserves all existing sites and settings.