LT Web Design is a theme for small web design and development agencies, built for Elementor (free): a hero that draws a client project as its sitemap with every page's build stage, services with prices and typical weeks, case studies, a six-step process, packages drawn as the sitemap you get, care and hosting plans, a project enquiry form and a blog. A Hello Elementor child theme with bundled fonts, one-page mode and a mobile menu.
Editions
| Edition | Price | What you get |
|---|---|---|
| Free | $0 | The child theme with its design, fonts, header and footer, the Studio and Contact pages, blog and 404 templates, one-page mode and the mobile menu. Credit link stays. |
| Pro Standard | $29 a year | Every page, sample posts and one-click demo import, credit removal. Downloads, updates and ticket support for 1 year, 1 website. |
| Pro Unlimited | $49 once | Everything in Pro Standard plus the AI kit. Unlimited websites, lifetime updates and ticket support. |
Pages in Free (Appearance → Starter setup): Studio, Contact, Notes. Pages in Pro (Appearance → Demo import): Home, Studio, Team, How a project runs, Services, Websites, Brochure sites, Online shops, Booking sites, Care and hosting, Packages and prices, Work, Fernhill Library, Harbour Bikes, Contact, Notes.
Quick setup
- Install the free Elementor plugin and the Hello Elementor theme, then upload and activate LT Web Design (Install and update).
- Optional: activate WPForms Lite for the project enquiry form.
- Pro: Appearance → Demo import → Import (Demo import). Free: Appearance → Starter setup.
- Replace the demo content and pictures (below), set your logo and the header button.
Pages in the demo
| Page | Under | Edition |
|---|---|---|
| Home | – | Pro |
| Studio | – | Free |
| Team | Studio | Pro |
| How a project runs | Studio | Pro |
| Services | – | Pro |
| Websites | Services | Pro |
| Brochure sites | Websites | Pro |
| Online shops | Websites | Pro |
| Booking sites | Websites | Pro |
| Care and hosting | Services | Pro |
| Packages and prices | Services | Pro |
| Work | – | Pro |
| Fernhill Library | Work | Pro |
| Harbour Bikes | Work | Pro |
| Contact | – | Free |
| Notes (blog) | – | Free |
Home page sections
The home page sections, in order, with the name they have in Elementor’s Navigator and their CSS ID (the anchor used by one-page mode and by links such as /#sitemap).
| Section (Navigator name) | CSS ID |
|---|---|
| Sitemap | #sitemap |
| Services | #services |
| Work | #work |
| Process | #process |
| Packages | #packages |
| Care plans | #care |
| Questions | #questions |
| Notes | #notes |
| Start a project | #start |
- A sitemap as the hero: The home page opens with a client project drawn as its sitemap, every page box showing its stage: wireframe, design, built or live.
- Services with prices and weeks: Brochure sites, online shops, booking sites and care plans in plain rows, each with a starting price and typical time.
- Packages drawn as the site you get: Three packages side by side, each with a small sitemap of the pages it includes, a fixed price and the typical time.
- Work and case studies: Projects with photos and facts, and case-study pages with the finished sitemap and what changed after launch.
- Free Elementor and a ready enquiry form: Every page is built with free Elementor widgets on Hello Elementor, with a project enquiry form made with the free WPForms Lite plugin. Fonts are bundled: no Google Fonts requests.
Menu
The demo import creates this main menu (Appearance → Menus):
- Home
- Studio → Team, How a project runs
- Services → Websites (Brochure sites, Online shops, Booking sites), Care and hosting, Packages and prices
- Work → Fernhill Library, Harbour Bikes
- Notes
- Contact
Header button: Ask for a quote (link /contact/#project), changed in Appearance → Customize → LT Web Design options.
One-page mode (Pro)
With Pro Standard or Pro Unlimited, tick One-page mode on the home page in Appearance → Customize → LT Web Design options and the menu scrolls to these sections: Sitemap, Services, Work, Process, Packages, Care plans, Questions, Notes, Start a project. To change the labels or leave sections out, see One-page mode.
Used the old LT Web Design onepage WordPress theme? It is not sold any more: version 2.0 is one theme for both. Install its Pro edition and turn on one-page mode.
Colours and fonts
Change them in Elementor Site Settings → Global Colors and Global Fonts; the whole site follows.
| Name in Global Colors | Value |
|---|---|
| Link blue (buttons, links, live pages) | #2433C2 |
| Slate (soft text) | #4A5170 |
| Ink (text) | #151A33 |
| Live green (marks on dark only) | #3FD17F |
| Canvas (page) | #F4F6FA |
| Wireframe grey (tinted sections, pages in design) | #E2E7F2 |
| Hairlines | #C3CADB |
| Night shift (dark bands) | #151C52 |
| Text on dark | #F4F6FA |
| Soft text on dark | #B3BBE0 |
| Button hover | #18228F |
| Name in Global Fonts | Font |
|---|---|
| Display (headings, page boxes) | TASA Orbiter |
| Interface (menu, labels) | TASA Orbiter |
| Body text | Hedvig Letters Serif |
| Buttons | TASA Orbiter |
Form
With WPForms Lite active, the demo import creates the form Project enquiry on the Contact page. Fields: Your name (required), Email (required), Organisation, What do you need? (required), Current website address (optional), Budget, When would you like to launch?, Tell us about the project. Email subject: “Project enquiry from the website”. After sending, visitors see: “Thank you. We read every enquiry and reply by email within two working days with questions or a first estimate.”
See Contact form for where messages go and how to change the fields.
Demo content to replace
Everything marked with one of these in the demo is sample content: names, numbers, prices and addresses that you replace with your own (or delete):
(sample)Example pricesexample.com(555)Pinecroft Web StudioFernhill LibraryHarbour BikesSpringfield
- Keep the four page-box treatments for build stages only (dashed wireframe, tinted design, outlined built, filled live); do not use dashed borders as decoration.
- Keep live green for marks on the dark bands; never use it for text on light backgrounds.
- Number only the project steps; services, packages and projects are not a sequence.
Only publish facts that are true for your business: real prices, opening hours, reviews and qualifications. Pro Unlimited’s launch checker lists every sample marker left on the site.
Photo guide
The demo uses placeholder pictures. Replace each one in Elementor (click it → Choose image) with a photo of about this size; save photos as JPEG or WebP under about 300 KB.
| Picture | Upload size |
|---|---|
| Bright library reading area with bookshelves and coloured chairs | 1600 × 1100 px |
| Bicycle workshop seen through its front window, bikes hanging inside | 1600 × 1100 px |
| Physiotherapist helping a patient with a leg exercise in a calm treatment room | 1600 × 1100 px |
| Sketchpad with hand-drawn website wireframes beside a keyboard on a wooden desk | 1600 × 1100 px |
| Two colleagues planning a project with sticky notes on a whiteboard | 1600 × 1100 px |
| Two women sorting sticky notes on a whiteboard during a planning session | 1600 × 1100 px |
| Library help desk with computers in front of tall bookshelves | 1600 × 1100 px |
| Close-up of hand-drawn page wireframes on paper | 1600 × 1000 px |
| Open laptop on a wooden desk in a quiet office | 1600 × 1000 px |
| Mechanic's hands fitting a bicycle chain in a workshop | 1600 × 1000 px |
| Empty library reading room with wooden tables and full shelves | 1600 × 1000 px |
AI kit (Pro Unlimited)
The AI kit’s AGENTS.md tells an assistant how LT Web Design is built. The CSS classes it relies on (keep them when you edit):
| CSS class | What it is |
|---|---|
lt-hero | home hero band (headline + the project sitemap) |
lt-sitemap | panel holding a sitemap: caption, lt-tree and the stage key |
lt-tree | page tree: a root lt-pbox, then lt-branches (the trunk) of lt-twig rows; each twig is a page box plus optional lt-leaves (its sub-pages). lt-tree–mini for packages |
lt-pbox | one page box: lt-pbox__name + lt-pbox__stage; stage class lt-pbox–wire|design|built|live (dashed, tinted, outlined, filled) |
lt-key | the stage key under a sitemap (four swatches in stage order) |
lt-service | one service row (name, what it is, price and weeks) |
lt-project | one project in the work list (photo + facts rows) |
lt-fact | label/value line in a facts list (with lt-rows) |
lt-steps | the six project steps (a real sequence); each lt-step with lt-step__no |
lt-package | one package column: name, price, its mini sitemap, ticks, button |
lt-price | price row (label + amount) |
lt-person | team member (name, role, what they do) |
lt-pagehead | inner page heading band |
lt-desk | contact desk block |
See AI kit for the prompts, the safe edit tool and the launch checker.
Questions about LT Web Design
Do I need Elementor Pro?
No. LT Web Design uses only the free Elementor plugin and the free Hello Elementor theme. The header and footer are part of the theme, so you do not need Theme Builder.
Can I change the sitemap in the hero?
Yes. Every page box is a normal Elementor container with a heading and a text line. Change the names, and switch the stage by changing one CSS class (wireframe, design, built or live).
Will my site look like the demo?
Yes, with Pro: Appearance > Demo import creates every page, the colours, fonts, menu, header and footer. The demo photos are replaced by placeholders you swap for your own.
Does it work as a one-page site?
Yes. Turn on one-page mode in the Customizer and the menu scrolls to the home page sections; every edition includes it.
What is the difference between Free and Pro?
Free has the design, header and footer, the Studio and Contact pages and the blog. Pro adds the home page, services, work and case-study pages, sample posts, one-click demo import, credit removal, updates and support. Pro Unlimited adds the AI kit.
I have the old LT Web Design. Is this an update?
It is a new version 2.0 with a new design, built for free Elementor. Your current site keeps working; install 2.0 on a new site or a staging copy and import the demo there.
Also for Joomla
LT Web Design also exists as a Joomla template: see the LT Web Design Joomla docs.
Ask AI about LT Web Design
Ask in your own words. The assistant answers from these docs and links the sections it used.
AI answers can be wrong; check the linked section. Never share passwords or licence keys. Open a ticket