Website Developer This book serves as the complete SOP and reference guide for the Developer role at Upastra Digital Media. 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.  Fillout Forms How to create fillout form SOP: Creating a Fill-Out Form Log in to Fillout Open Fillout and log in with your account credentials. Start a New Form Click on “Create New Form” or “+ New Form” . Set Form Title & Description Enter a clear title for your form. Add a description or instructions for users if needed. 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. Organize Form Layout Use sections or pages if the form is long. Drag and drop fields to arrange order. Customize Settings Enable notifications for new submissions. Set submission limits or restrictions if needed. Adjust privacy settings (public, internal, or private). Preview Form Click “Preview” to test how it looks and works. Make sure all fields and instructions are clear. Publish Form Click “Publish” or “Share” . Copy the form link or embed code to distribute. Collect Responses Monitor submissions in the Responses tab. Export data if needed for analysis. Update or Edit Form Edit questions or settings as required. Save changes; the live form updates automatically. Tools and Plugins Useful Tools & Plugins 1. Design & UI Tools Color & Fonts Color Picker Quintessentially.com ColorZilla WhatFont Visual & Content Extraction Copyfish (Text extraction from images) Lightshot (Screenshot tool) SVG & Graphics SVG Export Freepik (Graphics & banners) Video Tools Video Downloader Plus Handbrake (Video compression) Mobile & Layout Testing Mobile Simulator 2. Writing & Content Tools Grammarly (Writing assistant & grammar checker) Unlimited Elements (For Elementor – unfold content card) Dummy Content Generator / FakerPress (Posts & products) 3. WordPress Security & Site Management Security Plugins iTheme Security Wordfence WP Limit Login Attempts Site Enhancement & Optimization NitroPack (Website speed & performance) WPTravelly (Tour & travel booking plugin) Migrate Guru (Website transfer plugin) 4. WordPress Login & User Management Login Page Customizer – LoginPress Ultimate Membership / WooCommerce Memberships CartFlows (Checkout customization & email follow-ups) 5. Elementor & Addons Content Switcher (Elementor Addon Elements / Happy Addons) The Plus Addons (Pro version) Essential Addons for Elementor (Tables & 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 & 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 & Notes YayExtra (Checkout Field Editor, Author: ThemeHigh) Cart Abandonment Plugin (Follow-up WooCommerce emails) BWD Awesome Shop (Eye-catching design) 7. Event & Booking Plugins Eventin (Event Calendar) Bookly Pro (Service booking, similar to Calendly) 8. Templates & 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 & Optimization Tools HandBrake (Video compression) TinyPNG (Image compression) 10. Cache & Speed Plugins Hostinger: LiteSpeed Cache SiteGround: SG Speed Optimizer GoDaddy: Built-in Cache & Optimization 11. Social Media & Marketing Tools Smash Balloon (Instagram Feed) Social Media Icon Addon for Elementor CURCY Multi Currency SOP for WooCommerce Website Changes How to Make Website Changes Text Updates & Layout Adjustments - Appex Luxury Travel 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 : Group Tours Wellness Retreats 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 & 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   🧠 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: Home Services / Products About Blog / Portfolio 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 ColorZilla4.1 Copyfish 🐟 Free OCR Software 6.2.0 Image downloader - Imageye 5.18.5 Mobile simulator - responsive testing tool 4.13.0 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: Book Publishing Assistance – Help authors self-publish through Learn & Grow. Personal Development Coaching – Online sessions with expert coaches. Custom Learning Plans – Tailored book bundles for students or institutions. 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 Fully functional website (hosted or on LocalWP) Exported Elementor template kit (JSON) 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     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 ) How To Create Job Portal Using ACF And Integrate Elementor Form - ACF & Elementor Form 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=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  Elementor Conditional Logic Tutorial – Show/Hide Fields Based on User Choices 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 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 & 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