Complete Landing Page Editing Guide

1

Introduction to Built-In Edit System

Your landing page comes with a built-in, beginner-friendly editing system that lets you modify content without any coding knowledge. Here's what you need to know:

Key Features:

No coding required - Just click and type
Auto-save to browser - Your changes are saved locally
Download ready-to-use file - Get a complete HTML file after editing
Visual editing mode - See changes as you make them

How to Access Edit Mode:

1 Open the HTML file in any browser (Chrome, Firefox, Safari, Edge)

2 Look for the blue "Edit" button in the top-right corner

3 Click it to enter edit mode

4 Make your changes

5 Click "Save" to download the updated file

Important:

The edit controls ONLY work when viewing the file locally on your computer. If you upload it to a website first, edit mode will be disabled.

2

How to Edit Texts & Headings

Step-by-Step Guide:

1 Open the file in your browser

2 Click the blue "Edit" button (top-right corner)

3 Notice the blue outlines - These appear around editable elements

4 Click on any text with blue outline

5 Type your new text

6 Click "Save" when finished

Common Text Elements You Can Edit:

Element	How to Find	Example
Headlines	Large blue text at top	"The Authentic Coffee Luxury Set"
Descriptions	Paragraphs below headlines	"Taste Arabic coffee with elegance..."
Features	Bullet points with icons	"Luxury Heritage Design 💎"
Prices	Numbers with $ sign	"$162"
Buttons	Clickable blue/gold buttons	"Add to Cart 🛒"
Testimonials	Customer reviews	"The set is very luxurious..."

Pro Tips:

You can use emoji anywhere (copy from: https://getemoji.com/)
Line breaks work normally (press Enter)
The system keeps your formatting
All text edits are automatically loaded when you reopen the file in edit mode

3

How to Replace Images & Videos

A. Replacing Existing Images:

Method 1: Direct URL Replacement (Easiest)

1 Find the image URL in the code:

2 Replace ONLY the URL between the quotes:

                
                src="https://i.imghippo.com/files/DdGa4231avs.jpg"
                
                src="https://yourwebsite.com/your-image.jpg"

Method 2: Using an Image Hosting Service:

Since you can't upload files directly in the browser, use these free image hosts:

ImgBB (https://imgbb.com/) - No account needed
PostImages (https://postimages.org/) - Simple drag & drop
Imgur (https://imgur.com/) - Popular and reliable

Steps:

1 Go to any image hosting site

2 Upload your image

3 Copy the "Direct Link" or "BBCode" URL

4 Replace the existing URL in your HTML file

4

How to Add Links to CTA Buttons

Understanding CTA Buttons:

CTA = "Call to Action" - These are your "Buy Now", "Add to Cart", and "Learn More" buttons.

A. Changing Existing Button Links:

1 Find button code - Look for:

2 Replace #order with your actual link:

<a href="#order" class="cta-button">  <a href="https://yourstore.com/checkout" class="cta-button">  <a href="https://yourstore.com/checkout" class="cta-button" target="_blank">

5

How to Add Basic Tracking Codes

Where to Add Tracking Codes:

Location: BETWEEN <head> and </head> tags

Find this in your HTML file:

                <head>
                    <!-- Your existing meta tags here -->
                    <meta name="description" content="Luxury Arabic coffee set...">
                    
                    <!-- ADD YOUR TRACKING CODES RIGHT HERE -->
                    
                    <!-- Font Awesome -->
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
            

A. Google Analytics 4 (GA4):

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script>

Replace GA_MEASUREMENT_ID with your actual GA4 ID (starts with G-).

B. Facebook/Meta Pixel:

<script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1" /></noscript>

6

How to Change Page Colors

Understanding Color Variables:

Your page uses a color system at the very top of the CSS. This makes changing colors SUPER easy!

Find this code at the top:

                :root {
                    --primary-blue: #2A5CAA;
                    --secondary-blue: #1E4A8A;
                    --accent-blue: #4A90E2;
                    --light-blue: #E8F2FF;
                    --gold: #D4AF37;
                    --dark-gold: #B8860B;
                    --light-gold: #F5E8C8;
                    --coffee: #6F4E37;
                    --white: #FFFFFF;
                    --light-beige: #F9F5F0;
                    --dark-brown: #3E2723;
                    --text-dark: #2D3748;
                }
            

A. Quick Color Change Guide:

Variable	What it Changes	Recommended Color
`--primary-blue`	Main buttons, highlights	#2A5CAA (Default blue)
`--secondary-blue`	Button hover, accents	#1E4A8A (Dark blue)
`--gold`	Gold elements, decorations	#D4AF37 (Default gold)
`--light-beige`	Background color	#F9F5F0 (Cream)
`--dark-brown`	Headlines, dark text	#3E2723 (Dark brown)

7

E-commerce Integration Guide

Connect your landing page to popular e-commerce platforms:

Amazon Integration

Method: Link buttons to Amazon product page

<a href="https://www.amazon.com/dp/YOUR_PRODUCT_ID" class="cta-button" target="_blank"> <i class="fab fa-amazon"></i> Buy on Amazon </a>

Steps:

Copy your Amazon product URL
Replace button links with Amazon URL
Add target="_blank" to open in new tab

Shopify Integration

Method 1: Direct product link

<a href="https://YOURSTORE.myshopify.com/cart/ADD_TO_CART_ID:1" class="cta-button"> <i class="fab fa-shopify"></i> Add to Cart </a>

Method 2: Buy Now button

<a href="https://YOURSTORE.myshopify.com/checkout" class="cta-button"> <i class="fas fa-bolt"></i> Buy Now </a>

WooCommerce Integration

Method 1: Add to cart link

<a href="https://YOURSITE.com/?add-to-cart=PRODUCT_ID" class="cta-button"> Add to Cart </a>

Method 2: Direct checkout

<a href="https://YOURSITE.com/checkout" class="cta-button"> Proceed to Checkout </a>

Tip: Use WooCommerce URL parameters for quantities:
?add-to-cart=123&quantity=2

Platform Badges for Trust:

Add these badges below your buttons for credibility:

Visa Mastercard Amex PayPal Apple Pay SSL Secure

8

Advanced Tracking & Pixels Setup

Complete setup guide for advanced advertising pixels:

Google Ads Conversion Tracking

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-CONVERSION_ID'); </script>  <script> gtag('event', 'conversion', { 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL', 'value': 162.00, 'currency': 'USD', 'transaction_id': '' }); </script>

Get these from: Google Ads → Tools → Conversions

TikTok Ads Pixel

<script> !function (w, d, t) { w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[]; ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"]; ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))};}; for(var i=0;i<ttq.methods.length;i++) ttq.setAndDefer(ttq,ttq.methods[i]); ttq.load=function(e,n){ttq._i=e;var i=d.createElement("script");i.type="text/javascript";i.async=!0;i.src="https://analytics.tiktok.com/i18n/pixel/sdk.js";var a=d.getElementsByTagName("script")[0];a.parentNode.insertBefore(i,a);ttq._n=n;}; ttq.load('YOUR_PIXEL_ID'); ttq.page(); }(window, document, 'ttq'); </script>

Add purchase event: Add this after purchase confirmation

Snapchat Pixel

<script type='text/javascript'> (function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function(){a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments);};a.queue=[]; var s='script';r=t.createElement(s);r.async=!0;r.src=n;var u=t.getElementsByTagName(s)[0];u.parentNode.insertBefore(r,u);}) (window,document,'https://sc-static.net/scevent.min.js'); snaptr('init', 'YOUR_PIXEL_ID', {user_email: '__INSERT_USER_EMAIL__'}); snaptr('track', 'PAGE_VIEW'); </script>

LinkedIn Insight Tag

<script type="text/javascript"> _linkedin_partner_id = "YOUR_PARTNER_ID"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script> <script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=YOUR_PARTNER_ID&fmt=gif" /> </noscript>

Important Notes:

Replace ALL placeholder IDs with your actual IDs
Add conversion events on thank you/purchase pages
Test pixels using browser extensions (Meta Pixel Helper, Tag Assistant)
Keep tracking codes organized with comments

9

Email Forms & Booking Systems

A. Email Collection Forms

Mailchimp Form

<div style="background: #f8f9fa; padding: 30px; border-radius: 15px; margin: 30px 0;"> <h3>Join Our Exclusive Coffee Club</h3> <p>Get special offers and Arabic coffee tips</p> <form action="https://YOURBRAND.usXX.list-manage.com/subscribe/post" method="POST" style="margin-top: 20px;"> <input type="hidden" name="u" value="YOUR_U_VALUE"> <input type="hidden" name="id" value="YOUR_ID_VALUE"> <div style="display: flex; gap: 10px; flex-wrap: wrap;"> <input type="email" name="EMAIL" placeholder="Your email address" required style="flex: 1; padding: 12px; border: 2px solid #E8F2FF; border-radius: 8px; min-width: 200px;"> <button type="submit" class="cta-button" style="padding: 12px 30px;"> Subscribe </button> </div> </form> </div>

Review Collection System

Add to your existing review form:

<div class="review-form"> <h3>Share Your Experience</h3> <form id="reviewForm"> <div class="form-group"> <label>Name</label> <input type="text" id="reviewName" required> </div> <div class="form-group"> <label>Rating</label> <div class="star-rating" id="starRating"> <span data-rating="1">☆</span> <span data-rating="2">☆</span> <span data-rating="3">☆</span> <span data-rating="4">☆</span> <span data-rating="5">☆</span> </div> </div> <div class="form-group"> <label>Your Review</label> <textarea id="reviewText" rows="4"></textarea> </div> <button type="submit" class="cta-button"> Submit Review </button> </form> </div> <script> // Save to localStorage document.getElementById('reviewForm').addEventListener('submit', function(e) { e.preventDefault(); const review = { name: document.getElementById('reviewName').value, rating: document.querySelector('.star-rating .active')?.dataset.rating || '5', text: document.getElementById('reviewText').value, date: new Date().toLocaleDateString() }; localStorage.setItem('userReview', JSON.stringify(review)); alert('Thank you for your review!'); }); </script>

B. Booking/Reservation System

Calendly Integration

<div style="margin: 40px 0;"> <h3>Book a Personal Consultation</h3> <div class="calendly-inline-widget" data-url="https://calendly.com/yourusername" style="min-width:320px;height:630px;"></div> <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script> </div>

Steps:

Create free account at calendly.com
Set up your availability
Copy your Calendly link
Paste the code in your page

WhatsApp Booking

<a href="https://wa.me/1234567890?text=Hi!%20I%20want%20to%20book%20a%20coffee%20set%20consultation%20for%20[Date]%20at%20[Time]" class="cta-button" target="_blank" style="background: #25D366;"> <i class="fab fa-whatsapp"></i> Book via WhatsApp </a>

Customize: Replace phone number and pre-filled message

10

Using Quick Edit App (Android)

Installation

Open Google Play Store
Search for "Quick Edit" (by Rhythm Software)
Install the free app

Editing Your File

Open Quick Edit app
Tap "Open" → Navigate to your HTML file
Make changes directly in code
Save (Ctrl+S or menu → Save)

Pro Tips

Use search (magnifying glass icon)
Bookmark important lines
Preview changes in browser
Use undo/redo liberally

11

Uploading to Your Hosting

After Editing

Click "Save" button on your page
File downloads as: authentic-coffee-set-edited.html
Rename to index.html if it's your main page

Upload Process

Login to hosting control panel
Open File Manager
Navigate to public_html folder
Upload your HTML file
Visit: https://yourdomain.com

Pre-Launch Checks

Test all buttons and links
Check mobile responsiveness
Verify image loading
Test tracking codes
Check page speed

12

FAQ & Troubleshooting

Common Issues

Q: Changes disappeared after reopening?

A: Use the NEW downloaded file after clicking "Save"

Q: Images not showing?

A: Check URL format and image accessibility

Technical Problems

Q: Buttons not working?

A: Ensure proper link formatting

Q: Colors not changing?

A: Edit :root section and clear cache

Mobile Issues

Q: Page looks broken on phone?

A: Check responsive design and image sizes

Q: Text too small?

A: Increase font sizes in CSS

Quick Start Checklist

Pre-Launch Checklist:

All text edited correctly
Images replaced with yours
CTA buttons link to your store/checkout
Tracking codes added (GA4, Meta Pixel)
E-commerce integration completed
Advanced pixels configured (if needed)
Email/booking forms added
Colors match your brand
Tested on desktop and mobile
File renamed to index.html (if main page)
Uploaded to correct hosting folder
All links and forms tested

Beginner's Guide to Editing Your Arabic Coffee Landing Page

Table of Contents