Starter Templates

Pick a starter and customize in minutes. Click a card to preview larger.

This guide shows the full flow: pick a template, edit visually, manage images, and publish safely to your host.

Overview

CMS Amigo is a lightweight visual editor for clean HTML/CSS sites. You can start from our templates or bring your own, then publish by exporting files or using built-in SFTP (Pro/Agency).

Tip: You always own your code. Host anywhere.

Quick start

  1. Open the editor and choose a Starter Template (or import your HTML/CSS).
  2. Edit the page text, buttons, and links inline.
  3. Replace images (see “Images & responsiveness” below).
  4. Preview in a new tab; check headings, links, and mobile layout.
  5. Publish:
    • Export (Demo/Starter): upload via your host’s File Manager or Git.
    • SFTP (Pro/Agency): save server credentials and deploy from the editor.

Editing pages

Most content is editable in place. Use the sidebar (if present) for sections/components.

  • Copy/paste blocks: duplicate a section to iterate without losing the original.
  • Links: prefer relative paths (e.g., pricing.html) for portability.
  • Anchors: add id to headings; our CSS offsets anchors for a sticky topbar.

Images & responsiveness

Use WebP/AVIF, keep aspect ratios, and add responsive sources for sharper cards and heroes.

<img
  src="images/kitchen-1200.webp"
  srcset="images/kitchen-800.webp 800w,
          images/kitchen-1200.webp 1200w"
  sizes="(max-width: 980px) 100vw, 600px"
  width="1200" height="800"
  alt="Finished kitchen renovation in Toronto"
  loading="lazy" decoding="async">
Hero images: if used as CSS backgrounds, add a preload in <head> so LCP is fetched early.

Using templates

Each template ships as plain HTML/CSS. Replace copy and images; keep class names to retain layout.

<section class="hero hero--overlay">
  <img class="hero-media" src="images/toronto-reno-hero-1600.webp"
       width="2000" height="1200" alt="" fetchpriority="high" decoding="async">
  <div class="container hero-inner">
    <h1>Project headline</h1>
    <p>Short value statement…</p>
  </div>
</section>

Publishing (Export / SFTP)

Export: download files and upload to your host (cPanel, Plesk, or Git). SFTP: use a deploy-only user and limited permissions.

# SFTP example (command-line)
sftp deploy@example.com
# put your exported files into /public_html or your web root
put -r site/* /public_html
bye
Security: never use your main hosting login for deploys; rotate passwords; prefer SFTP over FTP.

Backups & rollback

  • Local: keep dated export zips.
  • Server: enable host snapshots or versioned deploys.
  • Git (optional): commit exported files and tag releases.
git init
git add .
git commit -m "Initial"
git tag -a v1.0 -m "Launch"
# later… git checkout v1.0  # rollback

Performance & LCP

  • Use fetchpriority="high" on the hero & preload if background-image.
  • Lazy-load non-critical images (loading="lazy") and add width/height to prevent CLS.
  • Serve local AVIF/WebP; set long cache headers (your .htaccess already covers this).

Troubleshooting

  • Lightbox tiny? Ensure the overlay is outside the templates container and your CSS includes the lightbox rules (max-width 96vw / 90vh).
  • Layout breaks after editing hero <img>? Don’t put HTML comments inside a tag; ensure the tag closes with >.
  • Sticky topbar overlaps anchors? Our section sets scroll-margin-top using --topbar-h.

Need more? See the FAQ for plan details and editor tips.