Skip to main content

🧠 Elementor Developer Crash Course (for Envato Templates)


Watch This Video Before Starting Out

Elementor Developer Crash Course - Building Website Using Envato Elements Templates
Watch Video

 

🧠 Elementor Developer Crash Course (for Envato Templates)

Duration: 10 Days | Goal: Become a Job-Ready Junior Web Developer

 

 

🗓️ Day 1 – WordPress & Environment Setup

Objective: Learn how WordPress works under the hood before Elementor.



Key Topics:


Assignment:

Build a simple 3-page WordPress site (Home, About, Contact) using the default theme.

 

 

🗓️ Day 2 – Elementor Interface & Widgets Mastery (Part 1)

Objective: Learn every Elementor widget and its purpose.

Key Topics:

  • Elementor interface: editor, navigator, history, and structure panel Link

  • Difference between sections, columns, and containers Link

  • Common widgets: Heading, Text Editor, Image, Icon, Button, Divider

  • Building content blocks and layouts with proper alignment and spacing

  • Setting responsive sizes using PX, EM, REM, VH/VW  Link

Assignment:

Rebuild a homepage hero section and service section using only default widgets.

 

 

🗓️ Day 3 – Elementor Interface & Widgets Mastery (Part 2)

Objective: Dive deeper into advanced Elementor features.

Key Topics: Video Link

  • Pro widgets: Forms, Slides, Nav Menu, Posts, Call to Action

  • Motion effects and entrance animations

  • Custom positioning and z-index

  • Hover effects, overlays, and background gradients

  • Creating templates and saving blocks for reuse

Assignment:

Build a 3-section landing page using advanced widgets and animations.

 

 

🗓️ Day 4 – Theme Builder & Global Design System

Objective: Learn how to control entire website design from one place.

Key Topics:

  • Elementor Theme Builder (Header, Footer, Single, Archive) Link

  • Creating and assigning templates to pages/posts

  • Understanding display conditions

  • Setting up a Design System: Link

    • Global colors and typography

    • Button and heading styles

    • Layout grid consistency

  • Working with dynamic fields (post titles, featured images, metadata)

Assignment:

Build a complete header and footer with dynamic menu & logo.

 

 

🗓️ Day 5 – Responsive Design

Objective: Build flexible, responsive layouts using containers.

Key Topics:

  • Responsive breakpoints for tablet and mobile Link


Assignment:

Convert a 1-page section into full responsive layout for all screen sizes.

 

 

🗓️ Day 6 – Sticky Headers, Motion, and User Experience

Objective: Add interactivity and visual polish.

Key Topics:

  • Making sticky headers (scroll up/down behavior) Link

  • Entrance animations, scroll effects, motion  and parallax Link

  • Scroll-to-anchor links and smooth navigation Link

Assignment:

Create a multi-section site with a sticky header and smooth scrolling.


 

 

🗓️ Day 7 – Envato Template Kits Workflow

Objective: Learn to import, clean up, and customize Envato templates properly.

  • Installing and connecting Envato Elements plugin

  • Importing full Template Kits vs single blocks

  • Cleaning unnecessary demo content and assets

  • Fixing “missing widgets” or layout issues after import

  • Customizing to match brand guidelines:

    • Replace fonts, colors, and images

    • Adjust spacing and icons

  • Using saved templates for reusability

Assignment:

Import a Template Kit, replace branding, and customize for a local business.

 

 

🗓️ Day 8 – Customization & Problem Solving

Objective: Turn a generic template into a unique client website.

Key Topics:

  • Adjusting Elementor layout and fixing overlaps

  • Custom CSS and Elementor’s “Custom Code” panel

  • Responsiveness testing (mobile vs tablet layout)

  • Troubleshooting common issues:

    • Missing widgets

    • Inconsistent spacing

    • Plugin conflicts

  • Using “Navigator” to reorganize the structure

Assignment:

Take any imported Envato template and modify 3 sections to improve UX and layout.

Videos:

  • Custom CSS in Elementor

  • Troubleshooting Common Problems

 

 

🗓️ Day 9 – Plugin Add-ons, WooCommerce, & Integrations

Objective: Expand website functionality with essential tools.

Key Topics:

Assignment:

Build a 2-product demo store with cart and checkout using Elementor Pro.

 

 

🗓️ Day 10 – Optimization, Launch, and Handoff

Objective: Learn how to finalize, optimize, and hand off a site professionally.

Key Topics:

Assignment:

Prepare a “Launch Checklist” for a site built from an Envato template.

 

 

🧾 

Final Project

Build a full 5-page website using an Envato Template Kit:

  1. Home

  2. Services / Products

  3. About

  4. Blog / Portfolio

  5. Contact

Requirements:

  • Responsive on all devices

  • Global design system used

  • Proper SEO setup

  • All unnecessary content cleaned up

  • Deployed to live demo domain

 

 



Google Chrome extensions list required


  1. ColorZilla4.1

  2. Copyfish 🐟 Free OCR Software 6.2.0

  3. Image downloader - Imageye 5.18.5

  4. Mobile simulator - responsive testing tool 4.13.0

  5. WhatFont3.2.0
    GoFullPage - Full Page Screen Capture 8.5






Assignment 1:


Instructions:

Pages

  • Home
  • About
  • Blog ( Single blog post too )
  • Contact
  • Shop ( Full shop cart, Single product template, checkout, My account, Categories archive template )
  • Faqs
  • Privacy POlicy
  • Terms & Conditions 


    Use Chatgpt to create the Privacy Policy And Terms of Services





Assignment # 2: 

 

🧠 Final Project: 

Learn & Grow – Educational Books & Blog Website

🎯 

Objective:

Design and build a fully functional, responsive education-based WordPress website using Elementor + Envato Template Kit, that serves as both a content hub (blog) and an eCommerce bookstore selling digital and printed books.

This mock project will simulate a real client brief, testing your ability to plan, customize, and deploy a complete website using Elementor best practices.

 

 

🧩 

Project Overview

Brand Name: Learn & Grow

Industry: Education / Books / eLearning

Type: Marketing + Blog + E-Commerce Website

Target Audience: Students, educators, and professionals interested in personal development and skill-building.

Primary Goal: Sell educational books and share free knowledge through articles.

Website that client likes : https://elkits4.bolvo.com/eduliv/

https://celaz.tokotema.xyz/template-kit/home/


 

 

🧱 

Website Structure (Mandatory Pages)

1. 

Home

  • Hero section with image and CTA “Explore Our Books”

  • Highlights of top categories (Self-Development, Design, Business, Productivity)

  • Featured books carousel

  • “Latest Articles” section (link to Blog)

  • Short about snippet with “Read More” button

  • Add testimonials carousel on homepage

  • Add services section on homepage

  • Newsletter sign-up form in footer

2. 

About

  • Introduction to Learn & Grow — mission and values

  • Team or founder image section

  • Short timeline or milestone stats section

  • CTA: “Start Learning Today”

3. 

Blog

  • Grid layout of posts with featured image, category, and read time

  • Sidebar: Search, Categories, Recent Posts, Social Follow links

  • Pagination at bottom

Single Blog Post Template

4. 

Shop

  • Product archive page with filters by category (Digital Books, Print Editions)

  • Each product card: title, author, short description, price, and “Add to Cart”

  • Shop sidebar: category filter, price range filter

Single Product Template

  • Product image gallery

  • Title, short and full description

  • Tabs: Description / Reviews

  • “You may also like” related books

  • Add-to-cart and wishlist buttons

Cart

  • Editable cart table

  • Shipping & tax estimation (optional mock data)

Checkout

  • Clean and minimal layout

  • Fields for billing, shipping, email, and payment method

  • Mock payment setup

My Account

  • Dashboard, Orders, Downloads, Address, Account details

Category Archive

  • Custom archive layout per book category

5. 

Contact

  • Contact form (Name, Email, Message)

  • Embedded Google Map

  • Business hours and address section

6. 

FAQs

  • Accordion layout for common questions:

    • Ordering

    • Shipping

    • Returns

    • Account setup

7. 

Privacy Policy

  • Standard GDPR-compliant template content

8. 

Terms & Conditions

  • Standard terms, refund policy, and usage rights

 

 

💼 

Services Page 

If you want to include a service section (for realism):

Services Offered:

  1. Book Publishing Assistance – Help authors self-publish through Learn & Grow.

  2. Personal Development Coaching – Online sessions with expert coaches.

  3. Custom Learning Plans – Tailored book bundles for students or institutions.

  4. Affiliate Program – Earn commission promoting books.

Each service should have:

  • Icon or image

  • Title & short description

  • “Learn More” link leading to a dedicated section

 

 

🎨 

Design & Branding Guidelines

Color Palette:

  • Primary: #0056D2 (Royal Blue) – for buttons, links, and headings

  • Secondary: #F7B500 (Warm Yellow) – accent color for highlights

  • Background: #FFFFFF (white) with light gray sections (#F7F7F7)

  • Text: #2E2E2E (dark gray for body), #000000 for headers

💡 Keep the contrast strong for readability and accessibility.

 

 

Typography:

  • Headings: Poppins – Bold, geometric, professional

  • Body Text: Open Sans – Clean and readable

  • Buttons & CTAs: Use uppercase, slightly increased letter spacing

  • Line height: 1.6 for paragraphs, 1.2 for headers

 

 

Layout & UI Guidelines:

  • Use Elementor containers with consistent padding (80px desktop / 40px mobile).

  • Avoid clutter — maintain whitespace around sections.

  • Use consistent button styles: rounded (8px radius), bold text, solid color.

  • Use iconography where possible to add visual structure.

  • Maintain max width 1200px for main content containers.

  • Global color system must be implemented in Elementor’s Site Settings.

 

 

📱 

Responsiveness

  • Test across all devices:

    • Desktop: Full layout

    • Tablet: Two-column structure

    • Mobile: Single-column with centered CTAs

  • Ensure header becomes sticky and collapses into a hamburger menu.

  • Optimize image sizes for faster load on mobile.

 

 

⚙️ 

Technical Requirements

  • Built using Elementor Pro + Envato Template Kit

  • Use Theme Builder for Header, Footer, Single Post, Product Templates

  • Integrate WooCommerce for store functionality

  • SEO plugin (RankMath or Yoast) installed

  • Cache plugin (LiteSpeed / WP Rocket)

  • Contact form using Elementor Forms

  • Optimize with WebP and compressed images

  • Add Google Analytics code in header/footer

  • Create global CSS variables for spacing, buttons, and typography

 

 

🧠 

Evaluation Criteria (for trainees)

Category

Weight

Description

Design Consistency

20%

Colors, fonts, and layout align with brand guidelines

Responsiveness

20%

Works perfectly on all devices

Functionality

20%

WooCommerce, Blog, Forms, and Menus fully functional

Optimization

15%

Loads fast, proper image optimization

SEO Basics

10%

Titles, meta, alt texts, clean URLs

Professional Finish

15%

Site feels client-ready, not like a template

 

 

🎁 

Deliverables

  1. Fully functional website (hosted or on LocalWP)

  2. Exported Elementor template kit (JSON)

  3. Documentation (Google Doc or PDF) including:

  • Color and font usage

  • Plugins used

  • Any custom CSS added

  • Screenshots (Desktop + Mobile)

    •  

     

    💬 

    Add-ons (Advanced Practice)

    • Add a newsletter pop-up using Elementor Popup Builder

    • Create a book bundle upsell section on single product pages

    • Use ACF for author bios in single book templates

     

     

    No comments to display

    Back to top