# 🧠 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** ](https://kommodo.ai/recordings/aTrhtD6gSFSp5IxGYCAe) --- ## 🧠 **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 ](https://www.youtube.com/watch?v=OyDv3CCRl38) - Installing WordPress locally or on hosting (XAMPP, LocalWP, or cPanel) [Video Link Here ( Local WP )](https://www.youtube.com/watch?v=lkD9WsHeWbM) [Video Link Here ( Wordpress Software ) ](https://www.youtube.com/watch?v=MCus_y42kD0) - Wordpress Dashboard Overview ( Important Setting in Wordpress Dashboard ) [Video Link Here ](https://www.youtube.com/watch?v=Ee6PHF4lGbg) - Understanding WordPress core: pages, posts, plugins, themes [Video Link Here ( Post & Pages )](https://www.youtube.com/watch?v=2JiyjO7DA8Y) [Video Link Here ( Plugins & Theme ) ](https://www.youtube.com/watch?v=ZL8wZZINsGA&t=122s) - Theme hierarchy & template structure - Creating clean permalinks and setting up menus [Permalinks Video Here](https://youtu.be/Ee6PHF4lGbg?si=tzKrTbEWZ8qr1PuV&t=843) [Menu Video here ](https://www.youtube.com/watch?v=3gfllN0mqnE) - Installing key plugins (Elementor, Envato Elements, Yoast SEO) [Video Link Here](https://youtu.be/rXiDKDXomRk?si=Ss2_Wn9pZSwKY3d9) [Top 10 Free Plugin ](https://www.youtube.com/watch?v=naya2eQFwrQ) - User roles and permissions (Admin, Editor, Contributor) [Video Link Here ](https://www.youtube.com/watch?v=W5cYehYRCGI) - Media library organization and optimization basics (WebP, compression) [Video Link Here ](https://www.youtube.com/watch?v=Klo5imkyhzY) - Website Designing Fundamentals [Video Link Here ](https://www.youtube.com/watch?v=J-P1JxDM2uQ) 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 ](https://youtu.be/CHZ7Mvzc-Vg?si=mCk89-7N5kYImvxF&t=1421) - Difference between sections, columns, and containers [Link ](https://youtu.be/KvIxV5WnObQ?si=LBdfCaomynNOvIdc) - 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 ](https://youtu.be/wKLXXE3Tq_c?si=O3WwDb6amwvS1n54) 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](https://www.youtube.com/watch?v=oxewS70TTIk&list=PLZyp9H25CboE1nHkb7rH1nkE96NEn7XD3) - 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 ](https://www.youtube.com/watch?v=BWx8NQm2hdI&list=PLZyp9H25CboGtTyTEMw8BXcliMjWirItR) - Creating and assigning templates to pages/posts - Understanding display conditions - Setting up a Design System: [Link ](https://www.youtube.com/watch?v=OvETB43I7_w) - 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 ](https://www.youtube.com/watch?v=tptSEDkaw_c) 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 ](https://www.youtube.com/watch?v=PJp87rmeLcI) - Entrance animations, scroll effects, motion and parallax [Link ](https://www.youtube.com/watch?v=0pjPb8orwXM&list=PLZyp9H25CboH0hMcZnE93oJQq6hiik7LK) - Scroll-to-anchor links and smooth navigation [Link ](https://youtu.be/qcPk5U29DvI?si=saZm4Vz2VOdAKEpn) 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](https://youtu.be/Z8SnpnzKmz0?si=RariZzgqcvq5pFMd) - 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 ](https://youtu.be/xn-_TOOauL0?si=MPNmtnbMWZgUzCx_) - Cache ( [LiteSpeed](https://youtu.be/GxxEXcYI6XI?si=Pih36AtGNrOD5Nvb)) - Security ([Wordfence](https://youtu.be/8RwggOrbK_g?si=dQ83VbzNYEZkAAys)) - Forms ([Elementor Forms](https://youtu.be/xT1a2v_6GqQ?si=L-QiNcuHcevyB6sl) / [Fillout form](https://youtu.be/WNIGuxBntuU?si=tfH0xBFpKZHqafRP) / [Typeform ](https://youtu.be/7iGc-tVGiIo?si=cjFswrWtfoxJ0D_K)/ [Forminator Form](https://youtu.be/Vlnl6WLeS2s?si=3vv-AgimdayZXp5T)) - [Popups ](https://youtu.be/2lPoObvlB8I?si=l6gHc8yxvqbk-sfL)and Newsletter integration ( [Mailchimp ](https://youtu.be/JU2lu1u18Ic?si=zBZ1JjF5dHNdCFnF)) - WooCommerce setup basics [Full video link here ](https://youtu.be/dmlTRU-eyJs?si=yxZfrF-KTjxI-nMx) - 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 ](https://youtu.be/E2H-O4Kz6qA?si=sxVec9jC7JGJIXDd) - Speed testing (GTmetrix, PageSpeed Insights) [Video link ](https://youtu.be/9ycfEhPfnBM?si=lH_ITXOlMra9x-hN) - Backup and migration process ([All-in-One WP Migration](https://youtu.be/jNNEKarvGz8?si=WHydu3WeQvPvJn1I) / [Migrate Guru](https://youtu.be/TTBC1Rz9tLM?si=ZGwvcz4XzMkNI0zK)) - SEO setup [Yoast SEO setup ](https://youtu.be/xn-_TOOauL0?si=MPNmtnbMWZgUzCx_) 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/](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://elkits4.bolvo.com/eduliv/) [https://celaz.tokotema.xyz/template-kit/home/](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)
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 186. 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 ---