📖 Complete Divi Website Setup Guide (SiteGround + WordPress + Divi)

✨ Hosting & WordPress Setup (SiteGround)

• Enable SG Optimizer (default with SiteGround)
• Choose PHP 8.1 or above
• Set memory limit via php.ini:
  Copy

  memory_limit = 1024M
  upload_max_filesize = 256M
  post_max_size = 512M
  max_execution_time = 300
  max_input_time = 300

• Use SiteGround's built-in daily backups & image compression (no plugin needed)

📁 Essential Plugin Installation

• RankMath SEO (SEO setup & schema)
• Wordfence (security & login alerts)
• WPCode or Code Snippets (for custom functions)
• Divi Children Plugin (child theme generator)

🔧 Divi Installation & Child Theme Setup

Upload Divi .zip via Appearance → Themes

Use Divi Children Plugin to generate a child theme

Activate child theme

In functions.php, add font upload support if needed:

function my_custom_upload_mimes($mimes = array()) {
    $mimes['ttf'] = "font/ttf";
    $mimes['otf'] = "font/otf";
    return $mimes;
}
add_filter('upload_mimes', 'my_custom_upload_mimes');

🌈 Global Design System

Global Colors:

Go to Divi > Theme Options > Builder > Advanced > Enable Global Defaults

Open any module → Click gear icon → Choose Global Colors → Add:

• Primary (#1e1e1e)
• Accent (#e84a5f)
• Link (#355c7d)
• Light (#f9f9f9)
• Contrast (#ffffff)

Typography (Desktop):

• Headline H1: 56px | Line Height: 1.1
• H2: 40px | Line Height: 1.2
• H3: 32px | Line Height: 1.3
• Body Text: 18px | Line Height: 1.6

Typography (Mobile):

• H1: 36px
• H2: 30px
• Body: 16px

Font Suggestions:

• Headings: Roboto or Montserrat (bold)
• Body: Open Sans or Lato (regular)

Set under: Divi > Theme Customizer > General Settings > Typography

⚖️ Theme Customizer Settings

• Homepage display: Static Page > Select homepage
• Site Identity: Logo, favicon
• Menus: Create & assign to Primary
• Widgets: Disable if unused
• Footer: Add custom credits or leave blank
• Background: Leave white or very light color

🖋️ Page Building Tips & Presets

Presets

• Create a styled module (e.g., Button)
• Right-click > Create New Preset From Current Styles
• Name it clearly (e.g., "Main Button Red")
• Apply to all instances or keep unique

Layout Tips:

Use flexbox for 3-column rows

For 4–6 in a row (on mobile):

.et_pb_column {flex: 1 1 100%; max-width: 100%;} /* fallback */
@media (min-width: 768px) {
    .four-column .et_pb_column {width: 25%;}
    .five-column .et_pb_column {width: 20%;}
    .six-column .et_pb_column {width: 16.66%;}
}

Add 'four-column', 'five-column', or 'six-column' to row's CSS Class.

🚀 Performance & Security Optimization

• SG Optimizer: Enable dynamic cache + browser cache + compression
• Disable unused Divi modules under Divi > Theme Options > Builder > Advanced
• Enable Minify & Combine CSS/JS via SiteGround plugin
• RankMath: Enable sitemap, schema, and basic meta automation
• Wordfence: Enable 2FA + block brute force + notifications

📝 Final Pre-Launch Checklist

• SSL installed and forced via SG Optimizer
• Remove default WP content (Hello World, Sample Page)
• Set favicon & OG image
• Test on mobile + tablet
• Check SEO title/meta (via RankMath)
• Speed test: GTmetrix, PageSpeed Insights

📊 Appendix A: Useful CSS & JavaScript Snippets

Transparent Header (Fixed):

#main-header {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
}

Animated Bullet Points:

Add 'custom-bullets' class to any

. Example:
• This is an animated bullet point.
• Another animated point.
• And one more for effect.
Copy

ul.custom-bullets li::before {
    content: "\\2022"; /* Unicode for bullet • */
    color: #e84a5f; /* Accent color */
    font-size: 1.5em;
    line-height: 1;
    padding-right: 0.5em;
    animation: pulse 1.5s infinite ease-in-out;
    display: inline-block; /* For transform to work */
}
@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.3);}
    100% {transform: scale(1);}
}

📘 Appendix B: Design Tips & UI Hints

Rounded Corners & Drop Shadows

• Use border-radius: 12px or 2xl (Tailwind terminology, implies larger radius)
• Add box-shadow for cards or sections

Animations

• Use fade-in or slide-up (set under Advanced > Animation)
• Keep subtle (duration 700ms max)

Color Harmony

• Use analogous schemes with 1–2 accent pops
• Limit to 3 primary colors + neutrals

Font Pairing

• Display: Montserrat or Bebas Neue
• Body: Open Sans or Lato
• Keep contrast between heading/body weight and size

Spacing

• Use consistent padding (e.g., 40px top/bottom for sections)
• Line-height: 1.4 to 1.6 for readability