ges → Add New 3. Click "Use Divi Builder" 4. Choose "Build From Scratch" 5. Click the ⊕ (Add Row) 6. Choose "Fullwidth" row 7. Add a "Code" Module 8. Paste the ENTIRE HTML code into the Code Module 9. Save & Publish
⚠️ Important Settings:
Copy
Page Settings You MUST Change: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Page Template → "Blank Page (No Header/Footer)" - Go to: Page Settings (gear icon) → Design → Page Layout - Select: "Blank Page" 2. OR use "Fullwidth" template if you want Divi header/footer 3. Disable Divi default padding: - Page Settings → Design → Spacing - Set all padding to 0px
Fix Potential CSS Conflicts:
Add this wrapper around the entire HTML to isolate styles from Divi:
htmlCopy
<!-- Paste this INSIDE the Divi Code Module --> <style> /* Reset Divi interference */ .saasrank-wrapper, .saasrank-wrapper * { box-sizing: border-box !important; } .saasrank-wrapper .container { width: 100% !important; max-width: 1200px !important; padding: 0 24px !important; } .saasrank-wrapper section { padding-left: 0 !important; padding-right: 0 !important; } .saasrank-wrapper h1, .saasrank-wrapper h2, .saasrank-wrapper h3, .saasrank-wrapper h4, .saasrank-wrapper h5, .saasrank-wrapper h6 { padding-bottom: 0 !important; line-height: 1.15 !important; } .saasrank-wrapper p { padding-bottom: 0 !important; } .saasrank-wrapper a { color: inherit; } /* Override Divi's default styles */ .saasrank-wrapper .et_pb_code_inner { padding: 0 !important; margin: 0 !important; } /* Hide Divi default header/footer if using blank page */ #main-header, #main-footer, #top-header, #et-footer-nav { display: none !important; } </style> <div class="saasrank-wrapper"> <!-- PASTE ALL YOUR HTML CODE HERE --> <!-- (Everything from <nav> to </footer>) --> <!-- Do NOT include <!DOCTYPE>, <html>, <head>, <body> tags --> </div>
Method 2: Custom Page Template (Most Professional)
Step 1: Create Custom Template File
Connect to your site via FTP or File Manager and create this file: Copy
📁 Location: /wp-content/themes/Divi-child/ 📄 File: page-saasrank-home.php
phpCopy
<?php /* * Template Name: SaaSRank Homepage * Description: Custom homepage for SaaSRank SEO Agency */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title> <meta name="description" content="We help B2B SaaS companies turn organic search into their #1 pipeline channel. Get more demos, signups, and SQLs with our proven SaaS SEO strategies."> <?php wp_head(); ?> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* ============================================ PASTE ALL CSS FROM THE <style> TAG HERE ============================================ */ /* IMPORTANT: Add these overrides at the top */ body.page-template-page-saasrank-home { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; margin: 0 !important; padding: 0 !important; } /* Hide Divi elements */ body.page-template-page-saasrank-home #main-header, body.page-template-page-saasrank-home #main-footer, body.page-template-page-saasrank-home #top-header, body.page-template-page-saasrank-home #page-container > .container, body.page-template-page-saasrank-home #et-footer-nav { display: none !important; } body.page-template-page-saasrank-home #page-container { padding-top: 0 !important; margin-top: 0 !important; } /* === PASTE ALL YOUR CSS BELOW THIS LINE === */ :root { --primary: #4F46E5; --primary-dark: #3730A3; /* ... rest of your CSS variables and styles ... */ } /* PASTE EVERYTHING from the original <style> tag */ </style> </head> <body <?php body_class(); ?>> <!-- ============================================ PASTE ALL HTML FROM <nav> to </footer> HERE ============================================ --> <!-- Navigation --> <nav class="navbar" id="navbar"> <!-- ... your nav code ... --> </nav> <!-- All other sections... --> <!-- Footer --> <footer class="footer"> <!-- ... your footer code ... --> </footer> <!-- ============================================ PASTE ALL JAVASCRIPT HERE ============================================ --> <script> // PASTE all your JavaScript here </script> <?php wp_footer(); ?> </body> </html>
Step 2: Assign Template to Page
Copy
1. Go to WordPress Dashboard 2. Pages → Add New (or edit Homepage) 3. In the right sidebar → Page Attributes 4. Template → Select "SaaSRank Homepage" 5. Publish 6. Set as Homepage: Settings → Reading → "A static page" Homepage → Select your page
Method 3: Divi Child Theme + Enqueue (Cleanest)
File Structure:
Copy
📁 /wp-content/themes/divi-child/ ├── 📄 style.css ├── 📄 functions.php ├── 📄 page-saasrank-home.php ← template file ├── 📁 assets/ │ ├── 📁 css/ │ │ └── 📄 saasrank.css ← all CSS │ └── 📁 js/ │ └── 📄 saasrank.js ← all JS
functions.php:
phpCopy
<?php // Divi Child Theme Functions // Enqueue parent theme styles function divi_child_enqueue_styles() { wp_enqueue_style( 'divi-parent-style', get_template_directory_uri() . '/style.css' ); } add_action('wp_enqueue_scripts', 'divi_child_enqueue_styles'); // Enqueue SaaSRank assets ONLY on homepage function saasrank_enqueue_assets() { if (is_page_template('page-saasrank-home.php')) { // Google Fonts wp_enqueue_style( 'google-fonts-inter', 'https://fonts.