📖 Guide complet d'installation d'un site Divi (SiteGround + WordPress + Divi)

✨ Hébergement et installation de WordPress (SiteGround)

• Activer SG Optimizer (par défaut avec SiteGround)
• Choisissez PHP 8.1 ou supérieur
• Définir la limite de mémoire via php.ini :
  Copie

  limite_mémoire = 1024M
  upload_max_filesize = 256M
  post_max_size = 512M
  max_execution_time = 300
  max_input_time = 300

• Utiliser les sauvegardes quotidiennes intégrées de SiteGround et la compression d'images (aucun plugin nécessaire)

📁 Installation des plugins essentiels

• RankMath SEO (configuration SEO et schéma)
• Wordfence (alertes de sécurité et de connexion)
• WPCode ou Code Snippets (pour les fonctions personnalisées)
• Divi Children Plugin (générateur de thèmes enfants)

🔧 Installation de Divi et configuration du thème enfant

Télécharger Divi .zip via Apparence → Thèmes

Utiliser le plugin Divi Children pour générer un thème enfant

Activer le thème enfant

Dans le fichier functions.php, ajoutez la prise en charge du téléchargement des polices si nécessaire :

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') ;

🌈 Système de conception globale

Couleurs globales :

Allez dans Divi > Theme Options > Builder > Advanced > Enable Global Defaults

Ouvrez n'importe quel module → Cliquez sur l'icône de l'engrenage → Choisissez Couleurs globales → Ajouter :

• Primaire (#1e1e1e)
• Accent (#e84a5f)
• Lien (#355c7d)
• Léger (#f9f9f9f9)
• Contraste (#ffffffff)

Typographie (bureau) :

• Titre H1 : 56px | Hauteur de la ligne : 1.1
• H2 : 40px | Hauteur de la ligne : 1.2
• H3 : 32px | Hauteur de la ligne : 1.3
• Texte du corps : 18px | Hauteur de la ligne : 1.6

Typographie (mobile) :

• H1 : 36px
• H2 : 30px
• Le corps : 16px

Suggestions de polices :

• Rubriques : Roboto ou Montserrat (en gras)
• Le corps : Open Sans ou Lato (normal)

Défini sous : Divi > Theme Customizer > General Settings > Typography

⚖️ Paramètres du Customizer du Thème

• Affichage de la page d'accueil : Page statique > Sélectionner la page d'accueil
• Identité du site : Logo, favicon
• Menus : Créer et assigner au primaire
• Widgets : Désactiver si inutilisé
• Pied de page : Ajouter des crédits personnalisés ou laisser en blanc
• Contexte : Laisser le blanc ou une couleur très claire

🖋️ Page Building Tips & Presets

Préréglages

• Créer un module stylé (par exemple, un bouton)
• Clic droit > Créer un nouveau préréglage à partir des styles actuels
• Nommez-le clairement (par exemple, "bouton principal rouge").
• Appliquer à toutes les instances ou garder unique

Conseils de mise en page :

Utiliser la boîte à outils pour les lignes à trois colonnes

Pour 4-6 fois d'affilée (sur 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%;}
}

Ajoutez 'quatre colonnes', 'cinq colonnes' ou 'six colonnes' à la classe CSS de la ligne.

🚀 Optimisation des performances et de la sécurité

• SG Optimizer : Activer le cache dynamique + le cache du navigateur + la compression
• Désactiver les modules Divi inutilisés sous Divi > Theme Options > Builder > Advanced
• Activer Minify & Combine CSS/JS via le plugin SiteGround
• RankMath : Activation de l'automatisation du sitemap, du schéma et des méta de base
• Wordfence : Activer 2FA + bloquer la force brute + notifications

📝 Liste de contrôle finale pour le pré-lancement

• SSL installé et forcé via SG Optimizer
• Supprimer le contenu par défaut de WP (Hello World, Sample Page)
• Définir le favicon et l'image OG
• Test sur mobile + tablette
• Vérifier le titre/méta SEO (via RankMath)
• Test de vitesse : GTmetrix, PageSpeed Insights

📊 Annexe A : Extraits CSS et JavaScript utiles

En-tête transparent (fixe) :

#main-header {
    background-color: rgba(255,255,255,0.8);
    filtre d'arrière-plan : blur(10px) ;
}

Points à puces animés :

Ajouter la classe 'custom-bullets' à n'importe quel fichier

. Exemple :
• Il s'agit d'une puce animée.
• Un autre point animé.
• Et un dernier pour l'effet.
Copie

ul.custom-bullets li::before {
    content : "\2022" ; /* Unicode pour les puces - */
    colour : #e84a5f ; /* Couleur d'accentuation */
    font-size : 1.5em ;
    hauteur de ligne : 1 ;
    padding-right : 0.5em ;
    animation : pulse 1.5s infinite ease-in-out ;
    display : inline-block ; /* Pour que la transformation fonctionne */
}
@keyframes pulse {
    0% {transform : scale(1);}
    50% {transform : scale(1.3);}
    100% {transform : scale(1);}
}

📘 Annexe B : Conseils de conception et d'utilisation

Coins arrondis et ombres portées

• Utilisation rayon de la bordure : 12px ou 2xl (terminologie de vent arrière, implique un rayon plus grand)
• Ajouter ombre de la boîte pour les cartes ou les sections

Animations

• Utiliser un fondu enchaîné ou un fondu-enchaîné (défini sous Avancé > Animation)
• Rester subtil (durée 700ms max)

Harmonie des couleurs

• Utiliser des schémas analogues avec 1 ou 2 touches d'accent
• Limitation à 3 couleurs primaires + neutres

Association de polices de caractères

• Affichage : Montserrat ou Bebas Neue
• Le corps : Open Sans ou Lato
• Maintenir le contraste entre le poids et la taille de la tête/du corps

Espacement

• Utiliser un remplissage cohérent (par exemple, 40px en haut/bas pour les sections).
• Hauteur de ligne : 1,4 à 1,6 pour une meilleure lisibilité