# Website Developer

<span>This book serves as the complete </span>**SOP and reference guide**<span> for the </span>**Developer**<span> role at </span>**Upastra Digital Media**<span>. It defines the purpose, workflows, and responsibilities of the team members who are directly responsible for building, structuring, and implementing client websites based on approved project requirements and design direction. </span>

# Fillout Forms

# How to create fillout form

**SOP: Creating a Fill-Out Form**

1. **Log in to Fillout**
    
    
    - Open [Fillout<span aria-hidden="true" class="ms-0.5 inline-block align-middle leading-none"><svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M14.3349 13.3301V6.60645L5.47065 15.4707C5.21095 15.7304 4.78895 15.7304 4.52925 15.4707C4.26955 15.211 4.26955 14.789 4.52925 14.5293L13.3935 5.66504H6.66011C6.29284 5.66504 5.99507 5.36727 5.99507 5C5.99507 4.63273 6.29284 4.33496 6.66011 4.33496H14.9999L15.1337 4.34863C15.4369 4.41057 15.665 4.67857 15.665 5V13.3301C15.6649 13.6973 15.3672 13.9951 14.9999 13.9951C14.6327 13.9951 14.335 13.6973 14.3349 13.3301Z"></path></svg></span>](https://fillout.com) and log in with your account credentials.
2. **Start a New Form**
    
    
    - Click on **“Create New Form”** or **“+ New Form”**.
3. **Set Form Title &amp; Description**
    
    
    - Enter a clear **title** for your form.
    - Add a **description or instructions** for users if needed.
4. **Add Questions/Fields**
    
    
    - Click **“Add Question”**.
    - Choose field type: text, multiple choice, checkbox, dropdown, etc.
    - Enter the question and mark it as **required** if necessary.
5. **Organize Form Layout**
    
    
    - Use sections or pages if the form is long.
    - Drag and drop fields to arrange order.
6. **Customize Settings**
    
    
    - Enable **notifications** for new submissions.
    - Set **submission limits** or restrictions if needed.
    - Adjust privacy settings (public, internal, or private).
7. **Preview Form**
    
    
    - Click **“Preview”** to test how it looks and works.
    - Make sure all fields and instructions are clear.
8. **Publish Form**
    
    
    - Click **“Publish”** or **“Share”**.
    - Copy the **form link** or embed code to distribute.
9. **Collect Responses**
    
    
    - Monitor submissions in the **Responses** tab.
    - Export data if needed for analysis.
10. **Update or Edit Form**
    
    
    - Edit questions or settings as required.
    - Save changes; the live form updates automatically.

<iframe allowfullscreen="allowfullscreen" height="314" src="https://www.youtube.com/embed/WNIGuxBntuU?si=vL-EJ8x4_A6J_nTR" width="560"></iframe>

# Tools and Plugins

# Useful Tools & Plugins

## **1. Design &amp; UI Tools**

- **Color &amp; Fonts**
    
    
    - Color Picker
    - Quintessentially.com
    - ColorZilla
    - WhatFont
- **Visual &amp; Content Extraction**
    
    
    - Copyfish (Text extraction from images)
    - Lightshot (Screenshot tool)
- **SVG &amp; Graphics**
    
    
    - SVG Export
    - Freepik (Graphics &amp; banners)
- **Video Tools**
    
    
    - Video Downloader Plus
    - Handbrake (Video compression)
- **Mobile &amp; Layout Testing**
    
    
    - Mobile Simulator

---

## **2. Writing &amp; Content Tools**

- Grammarly (Writing assistant &amp; grammar checker)
- Unlimited Elements (For Elementor – unfold content card)
- Dummy Content Generator / FakerPress (Posts &amp; products)

---

## **3. WordPress Security &amp; Site Management**

- **Security Plugins**
    
    
    - iTheme Security
    - Wordfence
    - WP Limit Login Attempts
- **Site Enhancement &amp; Optimization**
    
    
    - NitroPack (Website speed &amp; performance)
    - WPTravelly (Tour &amp; travel booking plugin)
    - Migrate Guru (Website transfer plugin)

---

## **4. WordPress Login &amp; User Management**

- Login Page Customizer – LoginPress
- Ultimate Membership / WooCommerce Memberships
- CartFlows (Checkout customization &amp; email follow-ups)

---

## **5. Elementor &amp; Addons**

- Content Switcher (Elementor Addon Elements / Happy Addons)
- The Plus Addons (Pro version)
- Essential Addons for Elementor (Tables &amp; widgets)
- Timeline Widget Addons (Elementor)
- Item Lists (Icon Lists)
- Jet Plugin (WooCommerce Filters)
- Jet Menu (Mobile Header / Mega Menu)
- MystickyElements (Side-centered social media buttons)

---

## **6. WooCommerce &amp; E-Commerce Tools**

- Payment Integration: Forminator (Stripe account integration)
- Product Slider: WooLentor
- Age Verification Plugin: Shoplenter
- Advanced Comparison Table (Elementor + WooCommerce)
- WooCommerce Variation Swatches
- Simple Product Options (Author: Pekteskeye) – Additional Accessories &amp; Notes
- YayExtra (Checkout Field Editor, Author: ThemeHigh)
- Cart Abandonment Plugin (Follow-up WooCommerce emails)
- BWD Awesome Shop (Eye-catching design)

---

## **7. Event &amp; Booking Plugins**

- Eventin (Event Calendar)
- Bookly Pro (Service booking, similar to Calendly)

---

## **8. Templates &amp; Themes**

- Arzeo (Business Template)
- Realite (Remote Work Template)
- Troof (Template – white cut box)
- Spectrum (Template for UGC websites)
- Phlox Theme Pack
- Raazi E-Commerce Theme Pack
- Work Now Template (Website services)

---

## **9. Media Compression &amp; Optimization Tools**

- HandBrake (Video compression)
- TinyPNG (Image compression)

---

## **10. Cache &amp; Speed Plugins**

- Hostinger: LiteSpeed Cache
- SiteGround: SG Speed Optimizer
- GoDaddy: Built-in Cache &amp; Optimization

---

## **11. Social Media &amp; Marketing Tools**

- Smash Balloon (Instagram Feed)
- Social Media Icon Addon for Elementor

# CURCY Multi Currency SOP for WooCommerce

<iframe allowfullscreen="allowfullscreen" height="521" src="https://www.youtube.com/embed/cmVheXqMk34?t=150s" style="width: 929px; height: 521px;" width="929"></iframe>

# Website Changes

# How to Make Website Changes Text Updates & Layout Adjustments - Appex Luxury Travel

<div id="bkmrk-" style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(56.25%, 95vh);"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="allowfullscreen" height="100%" src="https://kommodo.ai/embed/recordings/x7PzCIZZG8hTgE4ycSdY?onlyRecording=1" style="border: 0px; position: absolute; inset: 0px;" width="100%"></iframe>

</div>##  **Detailed List of Changes from the Video**

### **1. Destinations Section**

- Highlighted **Caribbean** as main specialty.
- Added **other European countries** (e.g., Paris, Amsterdam, Germany, Greece, Rome, Switzerland, Norway, Iceland) in the destinations.
- Removed **Japan** from the destinations (client does not do Japan trips).
- Added **Indian Ocean destinations** (Maldives, Mauritius, Seychelles, etc.).
- Added **South Pacific destinations**: Hawaii, Fiji, Tahiti, Bora Bora, Marquesa.
- Added **South America** and **Central America**.
- Added **Gulf countries**: Dubai, United Arab Emirates (client chose not to include Saudi Arabia, Oman, Kuwait).
- Added **Pakistan** as a nearby destination.
- Added **Aruba** as a new top destination on the homepage (first position in list).
- Removed some **duplicated destinations** and unnecessary top destination placeholders.
- Updated **top home page destinations**: Italy, Spain, Maldives, Bora Bora, Mexico, Canary Islands, Switzerland.

---

### **2. Homepage Photo Updates**

- Replaced **Caribbean background image** with a beach scene (Aruba or St. Lucia).
- Changed **top destinations mountain image** to highlight **Northern Lights in Norway**.
- Updated homepage images where people are gazing, replaced with **Barcelona viewpoint** type images.
- Removed **real photos gallery** temporarily; will be added later when photos are ready.
- Changed all home page **destination photos** to match the updated destinations list.

---

### **3. Services Section**

- Added new **service boxes**:
    
    
    1. Group Tours
    2. Wellness Retreats
    3. Bucket List Destinations
- Ensured each service has a **separate window / box**.

---

### **4. About Us Section**

- Updated **story/journey section**.
- Removed “Explore Top Destinations” from About Us page.
- Replaced **headshot photo**; client to send new one for update.

---

### **5. Contact / Email Section**

- Verified and added **email account information** from Hostinger.
- Client will provide **phone number** and social media links to add.
- Added **Facebook and YouTube page links**.

---

### **6. Domain &amp; Website Setup**

- Checked the website domain (`epiclux.com`) setup.
- Verified **hosting and active website email**.
- Ensured domain is correctly connected and functioning.

---

### **7. Miscellaneous**

- Removed **testimonials tab** temporarily; will reactivate later.
- Removed unused / placeholder gallery elements.
- Refreshed multiple sections to update visuals and content.
- Removed **copyrighted Google images** and replaced with client-approved alternatives.

---

### **Summary**

- Main focus: **Destinations updates and visual refresh** (home page, photos, gallery).
- Secondary focus: **Services section updates** (added 3 new boxes).
- Other updates: **Contact info, About Us, domain/email verification**.
- Removed unnecessary placeholders, duplicated entries, and copyrighted content.

# SEO

# Courses - Step By Step Guides for Different Roles

# 🧠 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 &amp; 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 &amp; Pages )](https://www.youtube.com/watch?v=2JiyjO7DA8Y) [Video Link Here ( Plugins &amp; Theme )  
      ](https://www.youtube.com/watch?v=ZL8wZZINsGA&t=122s)
- Theme hierarchy &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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, &amp; 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 &amp; Conditions   
      
      
    **Use Chatgpt to create the Privacy Policy And Terms of Services**

##   
  
  
  
**Assignment # 2:**   


---

# **🧠 Final Project:** 

### Learn &amp; Grow – Educational Books &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; short description
- “Learn More” link leading to a dedicated section

---

## 🎨 

## Design &amp; 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 &amp; CTAs: Use uppercase, slightly increased letter spacing
- Line height: 1.6 for paragraphs, 1.2 for headers

---

### Layout &amp; 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)

<div align="left" dir="ltr" id="bkmrk-category-weight-desc"><table><colgroup><col width="143"></col><col width="64"></col><col width="385"></col></colgroup><tbody><tr><td>Category

</td><td>Weight

</td><td>Description

</td></tr><tr><td>Design Consistency

</td><td>20%

</td><td>Colors, fonts, and layout align with brand guidelines

</td></tr><tr><td>Responsiveness

</td><td>20%

</td><td>Works perfectly on all devices

</td></tr><tr><td>Functionality

</td><td>20%

</td><td>WooCommerce, Blog, Forms, and Menus fully functional

</td></tr><tr><td>Optimization

</td><td>15%

</td><td>Loads fast, proper image optimization

</td></tr><tr><td>SEO Basics

</td><td>10%

</td><td>Titles, meta, alt texts, clean URLs

</td></tr><tr><td>Professional Finish

</td><td>15%

</td><td>Site feels client-ready, not like a template

</td></tr></tbody></table>

</div>---

## 🎁 

## 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

---

# Advanced Custom Fields - ( ACF )

# How to Create Events Custom Post Type Using ACF - Create Custom Loop Grid and Single Post Template Using ACF Data ( Custom Post Type )

<div id="bkmrk-" style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(56.25%, 95vh);"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="allowfullscreen" height="100%" src="https://kommodo.ai/embed/recordings/Z4xgV0iR7vRGNsqWtih5?onlyRecording=1" style="border: 0px; position: absolute; inset: 0px;" width="100%"></iframe>

</div>

# How To Create Job Portal Using ACF And Integrate Elementor Form - ACF & Elementor Form

<div id="bkmrk-" style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(56.25%, 95vh);"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="allowfullscreen" height="100%" src="https://kommodo.ai/embed/recordings/24bd5DGyOtSDHn7PwMFX?onlyRecording=1" style="border: 0px; position: absolute; inset: 0px;" width="100%"></iframe>

</div>

# Daily Guide

# Start-of-Day Checklist Website developer



# End-of-Day Checklist Website developer

# Addons List Updated

---

#### **Priority Fast Delivery**

I will complete your project on a priority basis, ideal for clients who need their website or updates delivered quickly. Whether you have an urgent launch or a tight deadline, this service ensures fast delivery without compromising quality.  
Pricing:

---

#### **Additional Website Page**

I will add more pages beyond the initial scope of your website to expand content and create a richer site structure. This helps establish a comprehensive online presence with detailed services, blogs, or portfolio sections.  
Pricing: $100 per page

---

#### **Extra Revision Rounds**

I will provide additional opportunities to tweak and perfect your website beyond the standard revisions — ideal for clients who prefer multiple rounds of feedback and fine-tuning.  
Pricing: $30 per revision

---

#### **Enhanced E-commerce Functionality**

I will implement robust online shopping features, including product catalogs, shopping carts, and secure checkout systems, to fully support your e-commerce needs.  
Pricing: $250

---

#### **Payment Gateway Integration**

I will seamlessly integrate popular and secure payment gateways such as PayPal, Stripe, and credit card processors to enable smooth transactions on your site.  
Pricing: $100

---

#### **Personalized Website Tutorial**

I will provide a tailored video tutorial or document guide to help you manage, update, and maintain your website confidently without ongoing developer assistance.  
Pricing: $40

---

#### **Newsletter Opt-in Forms**

I will design and integrate professional subscription forms connected to popular email marketing platforms like Mailchimp or Constant Contact to capture email leads effectively.  
Pricing: $50

---

#### **Custom Pop-up Implementation**

I will design and implement targeted pop-up windows for promotions, newsletter signups, or announcements — enhancing conversions without annoying visitors.  
Pricing: $50

---

#### **Google Analytics Integration**

I will set up and configure Google Analytics to track visitor behavior, traffic sources, and conversion data, giving you valuable insights for marketing strategies.  
Pricing: $50

---

#### **Automated Email Responders**

I will create custom autoresponders for instant email replies to inquiries, signups, or purchases, improving user engagement and support.  
Pricing: $50

---

#### **Elementor Pro Yearly**

I will install and configure Elementor Pro to unlock advanced design features, including custom widgets, theme builders, and enhanced styling options.  
Pricing: $30

---

#### **Additional E-commerce Product Setup**

I will add extra products to your store, including complete product pages with images, descriptions, and pricing options to expand your online catalog.  
Pricing: $20 per product

---

#### **Website Speed Optimization / Page**

I will improve your website’s performance by reducing load times, optimizing images, and cleaning up code to enhance user experience and SEO rankings.  
Pricing: $50

---

#### **Basic On-Page SEO Setup / Page**

I will implement essential SEO practices such as meta tags, XML sitemap creation, and keyword optimization to increase your website’s search engine visibility.  
Pricing: $50

---

#### **Professional Content Writing / Page**

I will write tailored content for your website pages or blog posts, crafted to engage your audience and represent your brand’s unique voice.  
Pricing: $50 per page

---

#### **Advanced Navigation Menus**

I will add advanced navigation tools like mega menus, sticky menus, and breadcrumb trails to improve site usability and visitor experience.  
Pricing: $50

---

#### **Accessibility Enhancements**

I will make your website more inclusive with better color contrast, enriched alt text for images, and keyboard accessibility features using WP Accessibility.  
Pricing: $70

---

#### **Plugin Installation and Configuration**

I will install and configure essential plugins securely and efficiently to extend your website’s capabilities without causing conflicts or slowdowns.  
Pricing: $20

---

#### **Blog or News Section Setup**

I will create a modern and functional blog or news section that allows easy posting and categorization of articles or updates.  
Pricing: $150

---

#### **Multimedia Gallery Integration**

I will embed dynamic image galleries, videos, and audio files into your website to create engaging visual and auditory experiences for visitors.  
Pricing: $70

---

#### **Downloadable Content Setup**

I will set up downloadable assets such as PDFs, brochures, or whitepapers, making them easily accessible directly from your website.  
Pricing: $30  
  
**How To Videos:**

[https://www.youtube.com/watch?v=5nnOVYNqKDk](https://www.youtube.com/watch?v=5nnOVYNqKDk)

[https://www.youtube.com/watch?v=2yjyw0xeU2E](https://www.youtube.com/watch?v=2yjyw0xeU2E)

---

#### **Custom Contact Forms**

I will design and implement customized contact or inquiry forms tailored to your business needs, making it easy for visitors to reach out.  
Pricing: $50  
  
**How To Videos:   
  
[https://www.youtube.com/watch?v=dBvfmY1bOko](https://www.youtube.com/watch?v=dBvfmY1bOko) Elementor Conditional Logic Tutorial – Show/Hide Fields Based on User Choices  
[https://www.youtube.com/watch?v=q\_2JPKl36\_s](https://www.youtube.com/watch?v=q_2JPKl36_s) Dynamic Elementor Form Logic — Reveal Fields Based on User Selections**

---

#### **WhatsApp or Tawk.to Live Chat Integration**

I will integrate WhatsApp chat buttons or Tawk.to widgets to enable real-time communication and enhance customer engagement.  
Pricing: $50

[https://www.youtube.com/watch?v=GbAQQC0z-GA](https://www.youtube.com/watch?v=GbAQQC0z-GA) **Live Chat for WordPress (Free Plugin) with Tawk.to**

---

#### **Enhanced Site Search Functionality**

I will implement advanced search features that help visitors quickly find products, services, or content on your website.  
Pricing: $70

---

#### **Multi-Language Support**

I will add Google Translate-based multi-language support to your website, helping you reach a broader global audience.  
Pricing: $50

---

#### **Website Backup Delivery**

I will provide a complete backup copy of your website’s files and database, delivered safely to you for future use.  
Pricing: $30

---

#### **Video Autoplay and Playlist Galleries**

I will add video players with autoplay and playlist capabilities to showcase multiple videos and capture visitor attention effectively.  
Pricing: $50

---

#### **Embedded PDF and Document Viewers**

I will embed PDFs or other documents directly on your website using integrated viewers for easy access to important files.  
Pricing: $50

---

#### **Interactive Maps and Location Services**

I will incorporate Google Maps or custom maps to display your business locations, service areas, or directions interactively.  
Pricing: $50

---

#### **Legal Page Creation with Cookies Banner (Privacy Policy, Terms &amp; Conditions)**

I will create professionally drafted legal pages to meet regulations and build customer trust, along with a compliant cookies banner.  
Pricing: $100

---

#### **Social Media Feed Embed / Feed**

I will embed live social media feeds from Instagram, Facebook, or Twitter to display real-time content directly on your website.  
Pricing: $70

---

#### **Blog Migration / Transfer Service**

I will transfer your blog content from an existing website to a new platform seamlessly, maintaining SEO and formatting for up to 50 blogs.  
Pricing: $100

---