LT eLearning is an online courses theme for Elementor (free): a hero that draws a course as a video seek bar split into chapters by running time, a course catalogue on one time scale, how a lesson works, how long a course takes at your pace, instructors, plans and prices, course pages with every chapter, team seats and an enrolment form. 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 About 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): About, Contact, Study notes. Pages in Pro (Appearance → Demo import): Home, Courses, Data skills, Spreadsheets for real work, SQL basics, Charts that explain, Writing at work, For teams, Plans and prices, About, Instructors, How lessons work, Contact, Study notes.
Quick setup
- Install the free Elementor plugin and the Hello Elementor theme, then upload and activate LT eLearning (Install and update).
- Optional: activate WPForms Lite for the free lesson or enrolment request 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 |
| Courses | – | Pro |
| Data skills | Courses | Pro |
| Spreadsheets for real work | Data skills | Pro |
| SQL basics | Data skills | Pro |
| Charts that explain | Data skills | Pro |
| Writing at work | Courses | Pro |
| For teams | Courses | Pro |
| Plans and prices | Courses | Pro |
| About | – | Free |
| Instructors | About | Pro |
| How lessons work | About | Pro |
| Contact | – | Free |
| Study 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 /#course).
| Section (Navigator name) | CSS ID |
|---|---|
| This course | #course |
| Courses | #catalogue |
| Inside a lesson | #lesson |
| Your pace | #pace |
| Instructors | #instructors |
| Plans | #plans |
| Questions | #questions |
| Study notes | #notes |
| Free lesson | #preview |
- A course drawn as a seek bar: The home page opens with the flagship course as a video seek bar: one segment per chapter, each as long as its running time, with a sample learner's progress and playhead.
- A catalogue on one clock: Every course row carries its bar on the same time scale, so visitors see at a glance which course is two hours and which is six, with level, price and a details link.
- Lesson guide and study pace: How one lesson runs in four timed parts, and how long a course takes at twenty minutes a day or an hour on Saturdays.
- Course pages, plans and team seats: Course pages with every chapter, start time and exercises, plans and prices, and a page for team seats with progress reports.
- Free Elementor and a ready enrolment form: Every page is built with free Elementor widgets on Hello Elementor, with a free-lesson and enrolment 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
- Courses → Data skills (Spreadsheets for real work, SQL basics, Charts that explain), Writing at work, For teams, Plans and prices
- About → Instructors, How lessons work
- Study notes
- Contact
Header button: Try a free lesson (link /contact/#enrol), changed in Appearance → Customize → LT eLearning options.
One-page mode (Pro)
With Pro Standard or Pro Unlimited, tick One-page mode on the home page in Appearance → Customize → LT eLearning options and the menu scrolls to these sections: This course, Courses, Inside a lesson, Your pace, Instructors, Plans, Questions, Study notes, Free lesson. To change the labels or leave sections out, see One-page mode.
Used the old LT eLearning 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 |
|---|---|
| Lecture violet (buttons, links, watched part of a bar) | #4A22A0 |
| Slate violet (soft text) | #544F66 |
| Ink (text) | #1A1726 |
| Highlighter lime (playhead, tabs behind ink, focus; never text on light) | #D4F15A |
| Screen white (page) | #F4F2F7 |
| Paper (tinted sections, chapter lists) | #FFFFFF |
| Hairlines and the unwatched bar | #D5D0E0 |
| Player (dark bands, footer) | #221B36 |
| Text on dark | #F4F2F7 |
| Soft text on dark | #BDB6D2 |
| Button hover | #341578 |
| Chapter segment on catalogue bars | #B9ABDB |
| Name in Global Fonts | Font |
|---|---|
| Display (headings; Montagu Slab) | Montagu Slab |
| Interface (menu, labels, times) | Maven Pro |
| Body text | Maven Pro |
| Buttons | Maven Pro |
Form
With WPForms Lite active, the demo import creates the form Free lesson or enrolment request on the Contact page. Fields: Your name (required), Email for your login (required), Course (required), What would you like? (required), Number of seats, When will you study?, Anything we should know. Email subject: “Course request from the website”. After sending, visitors see: “Thank you. We will email your login and the first lesson within one working day (sample).”
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)Brightfold AcademyCanal WharfSpringfield
- Keep a bar's segments in chapter order and sized by minutes; do not use the bar as decoration or for things that are not running time.
- Use lime only for the playhead and tabs behind ink text, never as a text colour on a light background.
- Keep Montagu Slab for headings; times, durations and prices stay in Maven Pro.
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 |
|---|---|
| A woman with earphones writing notes beside her laptop at a table | 1600 × 716 px |
| An instructor at a desk with a laptop and a camera on a tripod, recording a lesson | 1600 × 1066 px |
| Hands at a laptop showing charts and tables of figures on a desk | 1600 × 1067 px |
| A laptop with a code editor open next to a notebook and pen | 1600 × 1060 px |
| Hands writing notes beside printed bar charts and line graphs | 1600 × 1067 px |
| A person writing on paper at a table with a cup of coffee | 1600 × 1067 px |
| Four colleagues gathered round one laptop by a large window | 1600 × 1067 px |
| A man taking notes from a tablet and a laptop at his kitchen table | 1600 × 1067 px |
| A notebook of handwritten notes and a pen beside a laptop and a coffee | 1600 × 1067 px |
| Handwritten notes, a fountain pen and a cup of coffee on a desk | 1600 × 1200 px |
| A microphone on an arm, a laptop and headphones set up for recording | 1600 × 1140 px |
AI kit (Pro Unlimited)
The AI kit’s AGENTS.md tells an assistant how LT eLearning is built. The CSS classes it relies on (keep them when you edit):
| CSS class | What it is |
|---|---|
lt-hero | home hero band (headline, intro, the flagship course as a scrubber, the paused line) |
lt-bar | a course or lesson drawn as a seek bar (Text widget): one lt-seg span per chapter, width = share of the running time; lt-bar–scaled sizes the whole bar on the 400-minute catalogue scale |
lt-seg | one chapter of a bar; is-done = watched (violet), is-now = the chapter with the playhead (its inner span is the watched part) |
lt-chapters | chapter labels under a bar (grid whose columns are the chapters' minutes as fr), one lt-chap each |
lt-chap | a chapter label: start time (lt-chap__time) and title (lt-chap__title); is-done / is-now mirror the bar |
lt-tab | lime tab behind ink text (paused at, new); lt-tab–quiet (outlined) for neutral notes |
lt-course | one catalogue row (name and level, bar on the shared scale, runtime and price, action) |
lt-chapter | one row of a course page's chapter list (start, title and what you learn, minutes and exercises) |
lt-steps | an ordered list of steps (the parts of a lesson, how a course is made); real sequences only |
lt-plan | a plan column (name, price, what is included, action) |
lt-price | label + value row |
lt-person | an instructor row |
lt-pagehead | inner page heading band |
lt-desk | contact desk block |
lt-facts | paper panel with course facts (lt-rows of lt-price) |
See AI kit for the prompts, the safe edit tool and the launch checker.
Questions about LT eLearning
Do I need Elementor Pro?
No. LT eLearning 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.
Does the theme sell courses or play videos?
No. It is a website theme, not an LMS: it shows your courses and sends people to the enrolment form or your phone. Link the buttons to your course platform if you use one.
Can I change the chapters of a course?
Yes. A bar is a text widget with one span per chapter and its width; the labels under it are normal Elementor containers. Edit the minutes and titles, or copy a chapter.
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.
What is the difference between Free and Pro?
Free has the design, header and footer, the About and Contact pages and the blog. Pro adds the home page, the Courses page and course pages, sample posts, one-click demo import, credit removal, updates and support. Pro Unlimited adds the AI kit.
I have the old LT eLearning. 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 eLearning also exists as a Joomla template: see the LT eLearning Joomla docs.
Ask AI about LT eLearning
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