🚀 GHL WebDev Ultimate Workspace V10 (MEGA EDITION)

🗺️ Step-by-Step Beginner Roadmap

Treat this as your standard operating procedure for your first month. Don't rush into code until Week 3.

Week 1: Master the Native Builder Anatomy

• Step 1: The Hierarchy Drill. Spend 2 hours just dragging Green Sections, Blue Rows, and Purple Columns. Understand that you cannot put an element directly into a Section; it must go Section > Row > Column > Element.
• Step 2: Spacing Logic. Stop using empty text boxes for space. Learn to use the right-side panel to adjust Padding (space inside the border) and Margin (space outside the border).
• Step 3: Global Settings. Click "Typography" and "Colors" in the top right menu. Set your brand fonts and hex codes here before you build.

Week 2: Mobile Optimization (No Code Yet)

• Step 1: The Toggle Habit. Build a desktop section, then immediately click the Mobile icon at the top. Never build a full desktop page without checking mobile continuously.
• Step 2: The Visibility Hack. If a 3-column row looks terrible squeezed on mobile, duplicate that row, uncheck Desktop visibility, and change the duplicate into a 1-column layout for mobile.

Week 3: CSS Injection & Overrides

• Step 1: Hunting IDs. Click any element, go to the Advanced tab, and copy the CSS Selector.
• Step 2: Injection. Go to Settings > Custom CSS. Target your ID, open brackets {}, and paste the styles.

Week 4: Advanced Embeds & Polish

• Step 1: Custom HTML Blocks. Learn to use the "Custom JS/HTML" element to embed external widgets.
• Step 2: SEO Meta Data. Go to Settings > SEO Meta Data. Add your Title, Description, and an Open Graph Image.

🎨 The 50 Component Library

Select a category. Replace #c-xxx in the code with your actual Element ID.

#c-xxx { background: linear-gradient(90deg, #ff8a00, #e52e71); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

#c-xxx { background-image: linear-gradient(120deg, #84fab0, #8fd3f4); background-size: 100% 0.2em; background-position: 0 88%; transition: 0.25s; } #c-xxx:hover { background-size: 100% 88%; }

#c-xxx { overflow: hidden; border-right: .15em solid orange; white-space: nowrap; animation: typing 3.5s steps(30,end), blink-caret .5s step-end infinite; }

#c-xxx { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de; }

#c-xxx { color: #ccc; text-shadow: 1px 1px 0 #999, 2px 2px 0 #888, 3px 3px 0 #777; }

#c-xxx { background: linear-gradient(104deg, rgba(255,255,0,0) 0.9%, rgba(255,255,0,1) 2.4%, rgba(255,213,0,0.5) 5.8%, rgba(255,213,0,0.1) 93%, rgba(255,255,0,0) 96%); }

/* Needs ::before/after pseudo elements, best used in custom HTML block */

#c-xxx { color: transparent; -webkit-text-stroke: 1px #1565c0; }

#c-xxx { transition: letter-spacing 0.3s; } #c-xxx:hover { letter-spacing: 5px; }

#c-xxx { color: transparent; background: #333; transition: 0.3s; } #c-xxx:hover { color: #fff; }

#c-xxx { animation: glow 1.5s infinite; } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px #0f0; } 50% { box-shadow: 0 0 20px #0f0; } }

#c-xxx { box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #fff; } #c-xxx:active { box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #fff; }

#c-xxx { position: relative; z-index: 1; transition: 0.3s; border: 2px solid #1565c0; } #c-xxx:hover::before { width: 100%; } /* Requires ::before pseudo setup */

#c-xxx { box-shadow: 0 5px #09316b; transition: 0.1s; } #c-xxx:active { transform: translateY(4px); box-shadow: 0 1px #09316b; }

#c-xxx { animation: pulse 1.5s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(21,101,192,0); } }

#c-xxx { border: 2px solid transparent; border-image: linear-gradient(to right, #ff8a00, #e52e71) 1; }

#c-xxx { background: transparent; border: 2px solid #333; color: #333; transition: 0.3s; } #c-xxx:hover { background: #333; color: #fff; }

#c-xxx { transition: 0.3s; } #c-xxx:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.2); }

#c-xxx:hover { animation: wobble 1s; } /* Requires wobble keyframes */

#c-xxx { border-radius: 50px !important; padding: 15px 40px !important; }

1. Glassmorphism

Glass

#c-xxx { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }

2. Float on Hover

Hover Me

#c-xxx { transition: 0.3s; } #c-xxx:hover { transform: translateY(-10px); box-shadow: 0 15px 20px rgba(0,0,0,0.2); }

3. Glow Border

Glow Box

#c-xxx { border: 2px solid transparent; transition: 0.3s; } #c-xxx:hover { border-color: #00ff00; box-shadow: 0 0 15px #00ff00; }

4. Dark Mode Panel

Dark Mode

#c-xxx { background: #1e1e1e !important; color: #fff !important; border: 1px solid #333; }

5. Avatar Ring

#c-xxx { border-radius: 50%; border: 3px solid #1565c0; padding: 5px; }

6. Pricing Badge

Pro Plan

/* Use Custom HTML for exact pseudo element mapping */

7. Floating Card

Floating

#c-xxx { animation: cfloat 4s ease-in-out infinite; } @keyframes cfloat { 50% { transform: translateY(-10px); } }

8. Soft Shadow

Soft Drop

#c-xxx { box-shadow: 0 20px 40px -14px rgba(0,0,0,0.15) !important; border: none !important; }

9. Border Draw

Hover Border

#c-xxx { border: 1px solid #ccc; transition: 0.5s; } #c-xxx:hover { border-color: #1565c0; }

10. Circle Cropping

/* Target Row/Column */ #c-xxx { border-radius: 50% !important; overflow: hidden; }

1. Fixed Image Zoom

#c-xxx { overflow: hidden !important; border-radius: 8px; } #c-xxx img { transition: transform 0.5s ease !important; } #c-xxx:hover img { transform: scale(1.3) !important; }

2. CSS Loader

.loader { border: 4px solid #f3f3f3; border-top: 4px solid #1565c0; border-radius: 50%; animation: spin 1s linear infinite; }

3. Hover Shake

🔔

#c-xxx:hover { animation: shake 0.5s; } @keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

4. Bounce Idle

👇

#c-xxx { animation: bounce 2s infinite; } /* Keyframes needed */

5. Fade Up Info

New Alert!

#c-xxx { animation: fadeUp 2s infinite; } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

6. Heartbeat

❤️

#c-xxx { animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 50% { transform: scale(1.2); } }

7. Pendulum Swing

🕰️

#c-xxx { transform-origin: top center; animation: swing 2s infinite; }

8. Skeleton Load

#c-xxx { background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%); background-size: 200% 100%; animation: loading 1.5s infinite; }

9. Pulse BG

#c-xxx { animation: pulseBg 2s infinite; } @keyframes pulseBg { 70% { box-shadow: 0 0 0 15px rgba(255, 152, 0, 0); } }

10. Continuous Spin

⚙️

#c-xxx { animation: spin 2s linear infinite; }

#c-xxx { position: sticky !important; top: 0; z-index: 9999; }

.ghl-form-wrap input:focus { border-color: #1565c0 !important; box-shadow: 0 0 8px rgba(21,101,192,0.4) !important; }

@media only screen and (max-width: 767px) { #c-xxx { display: none !important; } }

@media only screen and (min-width: 768px) { #c-xxx { display: none !important; } }

#c-xxx { user-select: none; -webkit-user-select: none; }

#c-xxx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #1565c0; border-radius: 5px; }

#c-xxx { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#c-xxx { backdrop-filter: blur(8px); background: rgba(0,0,0,0.5); }

#c-xxx { min-height: 100vh !important; display: flex; flex-direction: column; justify-content: center; }

📖 Deep-Dive WebDev Guide (The SOP)

Follow these exact phases for every single page you build to ensure professional quality.

Phase 1: Wireframing & Structural Logic

1. Determine the Goal: Is this a Lead Gen funnel (requires a form) or a Sales Page (requires a checkout)? Choose your GHL templates accordingly.
2. The Z-Pattern: Users read in a Z shape. Place your Logo top left, CTA button top right, main headline center-left, and hero image center-right.
3. Container Widths: Do not make text stretch all the way across a desktop screen; it is hard to read. Limit text columns to a maximum of 800px wide.

Phase 2: Global Styling

1. Color Palette: Pick exactly 3 colors. A Primary brand color, a Secondary background color, and an Accent color specifically for buttons to make them pop.
2. Typography Rules: Set Headings (H1, H2, H3) to a bold font like Montserrat or Poppins. Set body text to a highly readable font like Open Sans or Roboto.
3. Implementation: Apply these settings in the Global Typography and Colors menu before adding elements.

Phase 3: The Build & CSS Injection

1. Build Native First: Do 90% of your work using GHL's native padding, margin, and color tools. Do not use CSS unless you have to.
2. Apply Upgrades: Once the page is built, look at elements that feel "boring." Grab the CSS Selectors for your main Call-To-Action buttons and apply snippets from Tab 2.
3. Protect with Wrappers: When targeting images (like the Image Zoom), always target the Column wrapping the image, not the image file itself.

Phase 4: QA & Handover Protocol

1. The Mobile Audit: Open the page on an actual physical smartphone, not just the GHL mobile preview. Check if buttons are easily tappable.
2. Form Testing: Submit a dummy lead through the form. Ensure the "Thank You" page triggers correctly.
3. Speed Optimization: Compress all background images before uploading them to GHL. Massive image files ruin conversion rates.

⚙️ GHL Custom Values & Essential JavaScript

As a GHL WebDev, you are building pages inside a CRM. You need to know how to pull CRM data into your web pages dynamically.

1. The "Custom Values" Simulator (Shortcodes)

Type these exact brackets directly into any Text Element in the GHL Builder. Try the live simulator below to see how GHL dynamically updates the text when a real lead visits the page.

2. Essential JavaScript Embeds

Drag the Custom JS/HTML Element onto your page, open the code editor, and paste the code.

<span id="year"></span>
<script>
  document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

<script>
  setTimeout(function() {
    window.location.href = "https://yourclientwebsite.com";
  }, 5000); // 5000 = 5 seconds
</script>

3. The "Inspect Element" Pro Workflow

Using the GHL "Advanced Tab" to find a CSS ID is slow. Here is how professional WebDevs do it faster:

1. Click Preview on your GHL page to open the live version in a new tab.
2. Right-click the exact button or text you want to change, and click Inspect (or press F12 on Chrome).
3. The DevTools panel will open. The element you right-clicked will be highlighted in the HTML code.
4. Look for the id="c-xxxxxxxx" tag on that highlighted line. Double click it and copy it.
5. In the "Styles" box on the right side of DevTools, you can test CSS (like background: red;) live to see if it works without breaking your actual funnel.
6. Once it looks good, copy your tested CSS back into the GHL Builder > Settings > Custom CSS.

🛡️ Platform Reality Checks & Time Protection

You have a 2-hour per day setup. This is amazing, but it means you must manage client expectations ruthlessly. Use current account documentation to verify feature availability, and protect your limited time with clear technical boundaries.

1. The “Custom Objects” Reality Check

GoHighLevel accounts may expose Custom Objects for structured records beyond Contacts, such as a Vehicles object. Availability and builder support can vary by account, plan, permissions, and rollout, so verify the current account before promising an implementation.

• Why you need to know this: A client may ask you to display Custom Object data dynamically on a website or funnel.
• Reality check: Confirm whether the current builder and account expose the exact binding or API capability needed. Do not assume a feature shown in one account exists everywhere.
• Your action: State what you verified, offer a supported Contact Custom Field approach when appropriate, and scope API or integration work separately when native binding is unavailable.

2. The Scope Creep Shield (Copy-Paste Scripts)

Clients often say "Can you just quickly add this one thing?" when that "one thing" takes 3 hours. Since you only have 2 hours a day, use these professional scripts to protect your boundaries without sounding aggressive.

3. Basic WebDev Ethics: SEO Meta Data & Accessibility

Want to look like a high-tier professional during your 2 hours? Always do these two things before handing over a link:

• Image Alt Text: Whenever you upload an image in GHL, scroll down in the right menu to "Alt Text" and describe the image. This is vital for screen readers (accessibility) and Google SEO.
• Page Titles: A client will judge you if they text the funnel link to someone and it says "Copy of Blank Page 2". Always hit Settings > SEO Meta Data and fill it out.

🔄 Full CRM & Automation Setup Guide

A beautiful funnel is useless if the leads go nowhere. This is the exact 4-step process to create a fully functioning CRM loop in GoHighLevel.

Step 1: The Capture Mechanism (Forms & Funnels)

Before you build the funnel, you must build the Form that collects the data. You cannot capture a lead without a form.

• Go to Sites > Forms > Builder. Drag in First Name, Email, and Phone. Save it.
• Go to Sites > Funnels. Open your funnel, click "Add Element", choose "Form", and select the form you just built.

Step 2: The Pipeline (The CRM Board)

Now that the lead filled out the form, they need a place to go so the client's sales team can track them.

• Go to Settings > Pipelines. Create a new Pipeline called "Website Leads".
• Add Stages to your pipeline: New Lead, Contacted, Appointment Booked, Won.

Step 3: The Automation Engine (Workflows)

This is where the magic happens. You need an automation to grab the form data and physically push the lead into the Pipeline you just made, while simultaneously emailing them.

• Go to Automation > Workflows. Click "Create Workflow" from scratch.
• Add a Trigger: Select "Form Submitted" -> Filter by your specific form.
• Add Action 1: Select "Create/Update Opportunity". Select the Pipeline and Stage ("New Lead") from Step 2.
• Add Action 2: Select "Send Email". Use the Custom Values from Tab 4 (e.g., "Hi {{contact.first_name}}!").

Step 4: Publish & Test (Crucial)

Workflows are built in "Draft" mode by default. In the top right corner of the workflow builder, toggle it to Publish and hit Save.

To test: Go to your live funnel link, put your own name and email in the form, and hit submit. Then, go check the "Opportunities" tab to see if your card appeared in the "New Lead" column, and check your inbox to see if the automated email fired.

🕸️ How to Create a Funnel from Scratch

Funnels in GHL are different from standard Websites. Funnels are designed to push a user through a linear sequence (Step 1 -> Step 2 -> Step 3) with no distraction menus. Here is how you build one.

Step 1: Creating the Shell

• Navigate to the left-hand menu and click Sites.
• At the top, ensure you are on the Funnels tab (not Websites).
• Click the blue + New Funnel button in the top right.
• Choose "From Blank" and name it (e.g., "Gym 7-Day Pass Funnel").

Step 2: Adding the Steps (The Anatomy)

A standard lead-gen funnel requires at least 2 steps. Click + Add New Step inside your new funnel.

• Step 1 Name: "Landing Page" or "Opt-in". This is where you put your sales copy and your Form.
• Step 2 Name: "Thank You Page". This is where the user lands immediately after hitting "Submit" on your form.

Step 3: Connecting the Domain

Your funnel will not be live to the public until it is attached to a real web domain.

• Inside your Funnel dashboard, look for the Settings tab at the top (next to "Steps" and "Stats").
• Look for the Domain dropdown menu.
• Select the client's domain (e.g., offer.gymname.com). If there are no domains, the client needs to connect their GoDaddy/Cloudflare account in the master GHL Settings first.
• Hit Save.

Step 4: Tracking Sales & Stats

Once your funnel is live, you don't need external tracking tools. GHL tracks it all natively.

• Stats Tab: Click this at the top of your funnel dashboard to see Page Views, Opt-ins, and Conversion Rates per step.
• Sales Tab: If you are selling a product (like a $20 eBook) on the page using a GHL Checkout element, click the Sales tab to see exact revenue generated from this specific funnel.