Comment j’ai créé mondher.ch avec WordPress Divi en 6h

🚀 Pourquoi WordPress + Divi pour mon site pro en 2025

Après avoir testé Webflow, Framer, et même codé des sites from scratch, je suis revenu à WordPress + Divi pour mondher.ch. Pourquoi ?

Parce qu’en 2025, le combo WordPress + Divi reste imbattable pour un site professionnel quand on veut :

• ✅ Contrôle total : Design pixel-perfect sans limitations
• ✅ Rapidité : Site complet en 6h (vs 20h en code pur)
• ✅ Évolutivité : Ajouter blog, portfolio, e-commerce facilement
• ✅ Autonomie : Client peut modifier contenu sans coder
• ✅ Écosystème : 60,000+ plugins, 10,000+ thèmes
• ✅ SEO native : Structure optimisée Google dès le départ

Webflow ? Magnifique mais tarifs à partir de 14$/mois (site basique), et ça monte vite avec CMS + e-commerce. Migration compliquée si vous voulez partir. Framer ? Hype mais limité pour sites complexes. WordPress ? Gratuit, open source, et utilisé par 43% du web.

Dans ce guide, je vous montre exactement comment j’ai construit mondher.ch. Méthodologie reproductible, pas de bullshit. Temps total : 6 heures chrono.

⚙️ Installation et configuration initiale

Prérequis

• Hébergement web (j’utilise Infomaniak, 6€/mois)
• Nom de domaine (mondher.ch)
• Accès cPanel ou équivalent

Étape 1 : Installer WordPress

La plupart des hébergeurs ont un installateur automatique WordPress (Softaculous, Installatron…).

Chez Infomaniak (mon cas) :

1. Espace client → Hébergements → Modules en 1 clic
2. Choisir WordPress
3. Domaine : mondher.ch
4. Remplir admin email, user, password
5. Installer (5 minutes)

Étape 2 : Configuration de base

Une fois WordPress installé, accédez à mondher.ch/wp-admin

Réglages essentiels :

Réglages → Général :
- Titre : Mondher Adoudi
- Slogan : Expert Code/NoCode Automation
- Fuseau horaire : Paris

Réglages → Permaliens :
- Structure : Titre de publication (/mon-article/)

Réglages → Lecture :
- Page d'accueil : Page statique (créer plus tard)

Étape 3 : Installer Divi

J’utilise Divi (249$ lifetime access, one-time payment). Investissement qui se rentabilise dès le 1er projet client. Licence utilisable sur sites illimités.

1. Apparence → Thèmes → Ajouter
2. Téléverser divi.zip (depuis elegantthemes.com)
3. Activer Divi

Alternative gratuite : GeneratePress + Elementor (bon mais moins puissant que Divi pour sites pros).

Étape 4 : Créer un child theme

CRUCIAL pour ne pas perdre vos modifs lors des updates Divi !

Créez /wp-content/themes/divi-child/ avec 2 fichiers :

style.css :

/*
 Theme Name: Divi Child
 Template: Divi
 Version: 1.0.0
*/

/* Vos CSS custom ici */

functions.php :

<?php
function divi_child_enqueue_styles() {
    wp_enqueue_style('divi-parent', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('divi-child', get_stylesheet_uri(), array('divi-parent'));
}
add_action('wp_enqueue_scripts', 'divi_child_enqueue_styles');
?>

Activez le child theme dans Apparence → Thèmes.

🎨 Définir sa charte graphique

Avant de toucher au design, je définis ma charte graphique. Ça évite de tâtonner pendant des heures.

Palette de couleurs

J’ai choisi violet/bleu pour mondher.ch (tech + innovation) :

Primary : #605CAB (violet)
Primary Light : #9794D4
Primary Dark : #332F80

Accent : #FF2C55 (rose/rouge CTA)
Secondary : #D4AF37 (doré, touches subtiles)

BG White : #FFFFFF
BG Light : #EEEDFF (sections alternées)
BG Dark : #141154 (footer)

Text Primary : #2E2E2E (gris foncé, pas noir pur)
Text Secondary : #666666

Astuce : Utilisez color.adobe pour générer des palettes harmonieuses.

Typographie

Titres : Montserrat (Bold, SemiBold)
Corps : Open Sans (Regular, 18px)

H1 : 48-56px
H2 : 40px
H3 : 24px
Body : 18px

Configuration dans Divi

Divi → Theme Customizer → General Settings :

• Primary Color : #605CAB
• Secondary Color : #FF2C55

Divi → Theme Customizer → Typography :

• Body Font : Open Sans
• Header Font : Montserrat

Ajoutez vos autres couleurs dans le child theme style.css via variables CSS :

:root {
  --primary: #605CAB;
  --primary-light: #9794D4;
  --primary-dark: #332F80;
  --accent: #FF2C55;
  --bg-light: #EEEDFF;
  --text-primary: #2E2E2E;
}

🏗️ Theme Builder : Header et Footer globaux

Le Theme Builder = game-changer Divi. Créez Header/Footer une fois, appliqués partout automatiquement.

Créer le Header global

Divi → Theme Builder → Add New Template → Add Global Header

Ma structure Header :

• Section 1 ligne, 1 colonne
• Module Menu
• Background : Blanc
• Padding : 20px 80px
• Position sticky (reste en haut au scroll)

Menu :

• Font : Open Sans 18px
• Color : #2E2E2E
• Hover : #605CAB
• Layout : Horizontal

Créer le Footer global

Add Global Footer → Build

Ma structure Footer :

• Section background : #141154
• Padding : 60px 80px 20px
• 3 colonnes : Logo+baseline / Newsletter / Contact+réseaux

Colonne 1 : Logo + « Expert Code/NoCode Automation »

Colonne 2 : Module Email Optin (Mailchimp)

Colonne 3 : Email, téléphone, localisation + icônes LinkedIn/GitHub

Copyright centré en bas : « © 2025 Mondher Adoudi – Sidr Valley AI »

🏠 Construire la page d’accueil (section par section)

Créez une nouvelle page : Pages → Ajouter → Use Divi Builder

Section 1 : Hero Fullscreen

Module Fullscreen Header :

• Title : « Automatisez votre business avec l’IA »
• Subheading : « Expert Code/NoCode Automation »
• Button : « Discutons de votre projet »
• Background : Image code + Gradient overlay (#605CAB → #332F80, 70% opacity)
• Button color : #FF2C55
• Min Height : 60vh

Section 2 : Services (3 cards)

• Background : Blanc
• Padding : 80px 0
• Titre H2 centré : « Mes Services »
• Row : 3 colonnes égales

Chaque card = Module Blurb :

• Icône : robot (automation), brain (IA), code (dev custom)
• Title + Description
• Border : 1px #EEEDFF
• Border radius : 15px
• Box shadow : subtile
• Padding : 40px

Section 3 : Process (4 étapes)

• Background : #EEEDFF (mauve clair)
• Titre : « Comment ça marche ? »
• Row : 4 colonnes

Chaque étape = Module Texte :

1️⃣
Audit & Analyse
Je comprends vos besoins

2️⃣
Proposition
Workflow sur mesure

3️⃣
Développement
Création Make/N8N

4️⃣
Formation
Support continu

Section 4 : Blog (derniers articles)

• Background : Blanc
• Titre : « Derniers Articles »
• Module Blog : 3 posts, Grid layout, 3 colonnes

Section 5 : CTA Final

• Background : Gradient violet (#605CAB → #332F80)
• Padding : 100px 0
• Titre blanc : « Prêt à automatiser votre business ? »
• Bouton : #FF2C55, « Réserver un appel gratuit »

Temps construction page home : 2-3h (avec maquette Figma préparée avant, sinon 4-5h).

🔌 Les 3 plugins essentiels (et pas un de plus)

Philosophie : Moins de plugins = site plus rapide et stable. Voici les 3 que j’installe systématiquement.

1. W3 Total Cache – Performance ⚡

Pourquoi : Cache pages + minification CSS/JS + optimisation base de données

Installation : Extensions → Ajouter → « W3 Total Cache » → Installer → Activer

Config rapide :

Performance → General Settings :
☑ Page Cache
☑ Minify (CSS + JS)
☑ Browser Cache
☑ Database Cache

Sauvegarder

Résultat mondher.ch :

• Page load : 3.2s → 0.8s
• Requêtes DB : 47 → 6
• Taille page : 2.1 MB → 890 KB

2. Rank Math SEO – Référencement 📈

Pourquoi : Alternative gratuite et plus complète que Yoast

Features clés :

• Schema markup automatique (rich snippets Google)
• Google Search Console intégré
• Analysis SEO en temps réel
• Redirections 301 illimitées
• XML Sitemap auto

Setup : Assistant de configuration en 5 minutes (connecter Search Console, choisir type de site…)

3. WPvivid Backup – Sauvegardes 💾

Pourquoi : Backups automatiques vers Google Drive (gratuit, 15 GB)

Ma config :

• Backup hebdomadaire automatique (dimanche 3h du matin)
• Stockage Google Drive
• Rétention : 4 backups (= 1 mois d’historique)
• Include : DB + Themes + Plugins + Uploads

Astuce : Testez la restauration une fois pour être sûr que ça fonctionne ! J’ai appris ça à mes dépens… 😅

⚡ Optimisations performance (scores 90+)

Site construit, plugins installés. Maintenant on optimise pour vitesse + SEO.

1. Configuration W3 Total Cache avancée

Performance → Page Cache :
☑ Cache preload (crawl automatique)

Performance → Minify :
☑ HTML minify
☑ JS minify (combine files)
☑ CSS minify (combine files)

Performance → Database Cache :
☑ Enable
→ Clean expired transients (1×/semaine)

2. Images optimisées

Toutes mes images sont :

• Converties en WebP (70% plus légères que JPG)
• Redimensionnées avant upload (max 1920px largeur)
• Compressées avec XnView MP
• Lazy loading activé (Divi natif)

Astuce : W3 Total Cache peut convertir JPG → WebP automatiquement (Premium feature), sinon utilisez un plugin gratuit comme « WebP Converter for Media ».

3. CSS/JS Divi optimisé

Divi → Theme Options → Builder → Advanced :

• ☑ Static CSS File Generation
• ☑ Defer jQuery And jQuery Migrate
• ☐ Dynamic CSS (désactiver pour performance)

4. Désactiver ce qui ne sert pas

Dans child theme functions.php :

// Disable WordPress emojis
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// Remove WordPress version
remove_action('wp_head', 'wp_generator');

Résultat PageSpeed Insights :

mondher.ch scores :

• Performance : 92/100 (mobile), 98/100 (desktop)
• Accessibility : 76/100
• Best Practices : 100/100
• SEO : 100/100

📊 Résultat final et stats

Après 6 heures de travail (réparties sur 2 jours), mondher.ch était en ligne.

Temps de développement détaillé :

• ⏱️ Installation + config : 30 min
• ⏱️ Charte graphique : 45 min
• ⏱️ Theme Builder (Header/Footer) : 1h
• ⏱️ Page Home : 2h30
• ⏱️ Plugins + optimisations : 1h
• ⏱️ Tests + ajustements : 15 min
• Total : 6 heures

Coûts :

• Hébergement Infomaniak : 6€/mois
• Domaine .ch : 6€/an
• Divi lifetime : 249$ (one-time, amortissable sur projets clients)
• Plugins : 0€ (tout gratuit)
• Total mensuel : 7.50€

Performances :

• Page load : 0.8s (excellent)
• Mobile-friendly : 100% (Google test)
• SSL : A+ (SSLLabs)
• Uptime : 99.9% (6 mois monitoring)

Ce que j’aurais fait différemment :

Honnêtement ? Créer la maquette Figma AVANT Divi. J’ai directement construit dans Divi, ce qui m’a fait refaire le Hero 3 fois. Avec une maquette validée, j’aurais économisé 1-2h.

Maintenant, je fais toujours : Figma → Divi → Contenu. Plus rapide, plus pro.

🎯 Conclusion : WordPress + Divi, toujours pertinent en 2025

Malgré l’émergence de Webflow, Framer, et autres no-code builders, WordPress + Divi reste mon choix #1 pour sites professionnels.

Pourquoi :

• ✅ Rapidité de développement (6h pour site complet)
• ✅ Flexibilité totale (design + fonctionnalités)
• ✅ Coûts maîtrisés (7€/mois vs 220€/an Webflow)
• ✅ Autonomie client (Divi Visual Builder intuitif)
• ✅ Écosystème massif (plugins pour tout)
• ✅ SEO natif (structure Google-friendly)

Si vous lancez un site pro en 2025, commencez par WordPress + Divi. Vous pourrez toujours migrer vers autre chose plus tard, mais vous aurez un site fonctionnel rapidement.

Prochaines étapes pour mondher.ch :

1. Ajouter pages Services, Portfolio, Contact
2. Publier 10 articles blog (SEO content)
3. Intégrer N8N pour automatisation formulaires
4. A/B testing CTA (optimiser conversions)

Vous avez créé votre site avec ce guide ? Partagez le résultat, j’adorerais voir ! 💪