Courses - Step By Step Guides for Different Roles

• 🧠 Elementor Developer Crash Course (for Envato Templates)

🧠 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:

• What is Wordpress Basic Intro to Wordpress   Video Link Here
  
  

• Installing WordPress locally or on hosting (XAMPP, LocalWP, or cPanel)  Video Link Here ( Local WP ) Video Link Here ( Wordpress Software )
  
  

• Wordpress Dashboard Overview  ( Important Setting in Wordpress Dashboard ) Video Link Here
  
  

• Understanding WordPress core: pages, posts, plugins, themes Video Link Here ( Post & Pages ) Video Link Here ( Plugins & Theme )
  
  

• Theme hierarchy & template structure 
  
  

• Creating clean permalinks and setting up menus  Permalinks Video Here  Menu Video here
  
  

• Installing key plugins (Elementor, Envato Elements, Yoast SEO) Video Link Here Top 10 Free Plugin
  
  

• User roles and permissions (Admin, Editor, Contributor)  Video Link Here
  
  

• Media library organization and optimization basics (WebP, compression) Video Link Here
  
  

• Website Designing Fundamentals Video Link Here
  
  

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.

Key Topics: Link

• 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:

• Installing and configuring must-have plugins:
  
  

• SEO (Yoast) Yoast SEO setup
  
  

• Cache ( LiteSpeed)
  
  

• Security (Wordfence)
  
  

• Forms (Elementor Forms / Fillout form / Typeform / Forminator Form)
  
  

• Popups and Newsletter integration ( Mailchimp )
  
  

• WooCommerce setup basics Full video link here
  
  

• Building a shop page, product template, and cart with Elementor
  
  

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:

• Image optimization (TinyPNG, WebP) Video link here
  
  

• Speed testing (GTmetrix, PageSpeed Insights) Video link
  
  

• Backup and migration process (All-in-One WP Migration / Migrate Guru)
  
  

• SEO setup Yoast SEO setup
  
  

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:

Website Link : https://shop.creativemox.com/furneta/

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

• Featured image header
  
  

• Author box and publish date
  
  

• Table of contents for long posts
  
  

• Comment section
  
  

• Related posts carousel at bottom
  
  

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)

 

---

 

🎁 

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
  
  

 

---