Options générales du thème DIVI

Cette fonctionnalité permet de modifier les paramètres généraux du thème DIVI.

Onglet “Général”

L’onglet “Général” contient les paramètres suivants :

• Logo : logo du site;
• Barre de navigation fixe : Par défaut la barre de navigation reste en haut de l’écran. Nous vous conseillons de désactiver cette option si vous allez utiliser une grande image pour votre logo;
• Activer la galerie Divi : permet de remplacer la galerie WordPress par défaut par la galerie avec le style Divi;
• Palette par défaut de sélectionneurs de couleurs : permet de définir la palette de couleur pour les sélectionneurs de couleurs dans le Divi Builder;
• Saisir la première image de l’article : Par défaut, les images miniatures sont créées à l’aide de champs personnalisés. Cependant, si vous préférez utiliser les images qui sont déjà dans votre message pour votre vignette (et éviter d’utiliser des champs personnalisés), vous pouvez activer cette option. Une fois activées, les images miniatures seront générées automatiquement en utilisant la première image de votre message. L’image doit être hébergée sur votre propre serveur;
• Mode style de blog : Par défaut, le thème Divi crée des extraits de vos articles pour en faire des aperçus au niveau des listes d’articles. Si vous préférez montrer les articles dans leur intégralité, activez cette fonction;
• Disposition de la barre latérale : position par défaut de la barre latérale qui peut contenu des widgets;
• Gabarit boutique & modèle de page pour WooCommerce : position par défaut de la barre latérale pour les pages qui listent des produits;
• Clé Google API : le module Maps utilise l’API de Google Maps et nécessite une clé Google API valide pour fonctionner. Avant d’utiliser le module de carte, assurez-vous d’avoir ajouté votre clé API ici. En savoir plus sur la création de votre clé Google;
• Utiliser Google Fonts : désactivez cette option pour supprimer les Google Fonts de vos pages Divi Builder;
• Sous-ensembles de Google Fonts : active Google Fonts pour d’autres langues que l’anglais;
• Script de Google Maps mis en file d’attente : désactivez cette option pour supprimer le script de l’API Google Maps de vos pages Divi Builder. Cela peut améliorer la compatibilité avec les plugins tiers qui mettent également ce script en file d’attente. Remarque : les modules qui dépendent de l’API Google Maps pour fonctionner correctement, tels que les modules Maps et Fullwidth Maps, seront toujours disponibles mais ne fonctionneront pas tant que cette option est désactivée (sauf si vous ajoutez manuellement le script de l’API Google Maps);
• Afficher l’icône Facebook : activer ou non l’icône Facebook sur votre site;
• Afficher l’icône X: activer ou non l’icône X sur votre site;
• Afficher l’icône Instagram: activer ou non l’icône Instagram sur votre site;
• Afficher l’icône RSS: activer ou non l’icône RSS sur votre site;
• URL profil Facebook : URL de votre page Facebook;
• URL profil X: URL de votre page X;
• URL profil Instagram: URL de votre page Instagram;
• URL de l’icône RSS : URL de votre page RSS;
• Nombre de produits affichés sur les pages d’archive de WooCommerce : vous pouvez définir ici combien de produits WooCommerce sont affichés sur la page d’archive des produits. Cette option fonctionne indépendamment des Paramètres > Options de lecture dans wp-admin;
• Nombre d’articles affichés sur la page des catégories : vous pouvez définir ici combien d’articles seront affichés sur la page des catégories. Cette option fonctionne indépendamment des options de lecture dans wp-admin;
• Nombre d’articles affichés sur la page d’archives : vous pouvez définir ici combien d’articles seront affichés sur la page des archives d’articles. Cette option fonctionne indépendamment des options de lecture dans wp-admin;
• Nombre d’articles affichés sur la page de recherche : vous pouvez définir ici combien d’articles seront affichés sur la page des résultats de recherche. Cette option fonctionne indépendamment des options de lecture dans wp-admin;
• Nombre d’articles sur la page des tags : ici vous pouvez décider combien d’articles récents seront affichés sur la page des tags. Cette option fonctionne indépendamment des options de lecture dans wp-admin;
• Format de date : cette option vous permet de changer le format de date. Pour plus d’informations veuillez vous référer au codex WordPress ici: Formater l’heure et la date;
• Utiliser des extraits quand défini : permet l’utilisation d’extraits dans les articles ou les pages;
• Bouton retour en haut de page : activez cette option pour afficher un bouton de retour en haut de page pendant le défilement;
• Défilement fluide : activez cette option pour obtenir un défilement fluide avec la molette de la souris;
• Désactiver les traductions : désactivez les traductions si vous ne voulez pas afficher les lignes de textes traduites sur votre site;
• Activer les images réactives : activez cette option pour que la taille des images sensibles soit générée lors du téléchargement des images et de l’ajout de l’attribut srcset pour l’élément images;
• Personnaliser CSS : vous pouvez ajouter ici des classes CSS personnalisées pour remplacer ou agrémenter les styles par défaut.

Onglet “Performance”

L’onglet “Performance” contient les paramètres suivants :

• Cadre de module dynamique : activez cette option pour permettre à Divi Framework de charger uniquement les modules utilisés sur la page et de traiter la logique des fonctionnalités utilisées;
• CSS dynamique : le CSS dynamique réduit considérablement la taille du fichier CSS en générant dynamiquement uniquement les ressources nécessaires aux fonctionnalités et modules que vous utilisez. Cela élimine toute surcharge de fichiers et améliore considérablement les temps de chargement;
• Icônes dynamiques : la police d’icônes Divi est divisée en différents sous-ensembles. Ces sous-ensembles sont chargés uniquement lorsque cela est nécessaire en fonction des modules et fonctionnalités utilisés sur chaque page. Si vous avez besoin d’accéder à l’intégralité de la police d’icônes sur toutes les pages (par exemple, si vous utilisez notre police d’icônes dans votre thème enfant), vous pouvez désactiver cette option et charger l’intégralité de la bibliothèque de polices d’icônes sur toutes les pages;
• Charger la feuille de style dynamique en ligne : cette option retire le fichier Divi style.css et imprime le contenu en ligne. Cela supprime une demande de blocage de rendu et améliore les scores PageSpeed des pages individuelles. Cependant, cela empêche également le fichier style.css d’être mis en cache. Comme la feuille de style est petite, il est recommandé de garder cette option activée;
• CSS critique : la CSS critique améliore considérablement les temps de chargement du site Web et les scores Google PageSpeed en différant les styles non critiques et en éliminant les requêtes CSS bloquant le rend;
• Hauteur du seuil critique : lorsque Critical CSS est activé, Divi détermine un « seuil au-dessus de la ligne de flottaison » et diffère tous les styles pour les éléments sous la ligne de flottaison. Cependant, ce seuil n’est qu’une estimation et peut varier selon les appareils. L’augmentation de la hauteur du seuil différera moins de styles, ce qui entraînera des temps de chargement légèrement plus lents, mais moins de chances que des changements de mise en page cumulés se produisent. Si vous rencontrez des problèmes CLS, vous pouvez augmenter la hauteur du seuil;
• Bibliothèques JavaScript dynamiques : chargez uniquement les bibliothèques JavaScript externes lorsqu’elles sont nécessaires à un module Divi spécifique sur la page. Cela supprime le JavaScript inutilisé du groupe de scripts principaux et améliore les temps de chargement;
• Désactiver les émoticônes WordPress : WordPress charge ses propres emojis WordPress. Les navigateurs modernes prennent en charge les emojis natifs, ce qui rend inutiles les emojis de WordPress dans la plupart des cas. La suppression des emojis WordPress supprime les actifs inutiles et améliore les performances;
• Différer le CSS du bloc Gutenberg : si une page est construite avec le Divi Builder, le fichier CSS du bloc Gutenberg est déplacé du header vers le footer. Étant donné que le fichier n’est probablement pas utilisé, nous pouvons le charger plus tard. Cela supprime une demande de blocage de rendu et améliore les performances;
• Améliorer le chargement Google Fonts : activez la mise en cache des Google Fonts et chargez-les en ligne. Cela réduit les requêtes bloquant le rendu et améliore les temps de chargement des pages;
• Limiter la prise en charge des Google Fonts pour les navigateurs hérités : l’activation de cette option réduira la taille des Google Fonts et améliorera les temps de chargement, mais cela limitera la prise en charge des Google Fonts dans certains navigateurs très anciens. Vous pouvez désactiver cette option pour augmenter la prise en charge des anciens navigateurs à un léger coût pour les performances;
• Différer jQuery et jQuery Migrate : lorsque cela est possible, jQuery et jQuery Migrate seront déplacés vers le corps pour accélérer les temps de chargement. Si un plugin tiers enregistre jQuery en tant que dépendance, il sera déplacé vers la tête;
• Mettre en file d’attente le script de compatibilité jQuery : certains scripts tiers peuvent être mis en file d’attente de manière incorrecte sans déclarer jQuery comme dépendance. Si jQuery est différé, ces scripts pourraient se casser. Si vous rencontrez des erreurs de console après avoir activé l’option “Différer jQuery et jQuery Migrate”, vous pouvez activer cette option, qui chargera un script de compatibilité supplémentaire qui tentera de résoudre le problème. Vous pouvez désactiver cette fonctionnalité si tout fonctionne correctement sans elle;
• Différer les scripts tiers supplémentaires : avertissement, cela peut entraîner des erreurs JavaScript dans certains cas et doit être utilisé avec précaution. Lorsqu’il est activé, les scripts enregistrés par les plugins et les thèmes seront différés pour améliorer les performances et jQuery sera toujours chargé dans le corps.

Onglet “Navigation”

Cet onglet permet de gérer certains paramètres de navigation du thème Divi.

Ces paramètres ne sont pas utilisés si vous créez vos propres menus de navigation.

Onglet “Créateur”

Cet onglet permet de gérer certains paramètres du Visual Builder.

• Intégration du type de post
  • Activer Divi Builder sur les types de publication : par défaut, Divi Builder n’est accessible que sur les types de publication standard (article et page). Cette option vous permet d’activer le générateur sur tout type de publication personnalisé actuellement enregistré sur votre site Web. Toutefois, il se peut que le générateur ne soit pas compatible avec tous les types de publication personnalisés;
  • Mise en page du produit : permet de définir la mise en page par défaut des pages produit  (WooCommerce);
  • Contenu du produit :
    • “Construire à partir de zéro” charge une présentation de page WooCommerce prédéfinie, sur laquelle vous vous appuyez lorsque le Divi Builder est activé;
    • “Par défaut” vous permet d’utiliser la présentation de page WooCommerce par défaut;
• Avancé
  • Génération de fichiers CSS statiques : lorsque cette option est activée, les styles CSS utilisés par le constructeur et déclarés localement pour cette page seront mis en cache et servis depuis plusieurs fichiers statiques. Il est déconseillé d’activer cette option car elle provoque des effets de bord…;
  • Visite du produit : si activé, le guide de démarrage démarrera automatiquement lorsque Visual Builder sera lancé pour la première fois;
  • Activer la dernière expérience Divi Builder : permet d’activer la dernière version du Divi Builder. Il est conseillé d’activer cette option;
  • Activer l’éditeur classique : permet de désactiver l’éditeur Gutenberg pour revenir à l’éditeur classique de WordPress (même fonction que l’extension “classic editor”). Il est conseillé d’activer cette option et de supprimer l’extension “classic editor”.

     

Onglet “Disposition”

Cet onglet permet de gérer certains paramètres de disposition (layout).

• • Modèle d’article
    • Choisissez les éléments à afficher dans la section des informations sur la publication : ici, vous pouvez choisir les éléments qui apparaissent dans la section des informations de publication sur les pages de publication unique. Il s’agit de la zone, généralement située sous le titre du message, qui affiche des informations de base sur votre message. Les éléments en surbrillance ci-dessous apparaîtront;

      

    •  Afficher les commentaires dans les articles : vous pouvez désactiver cette option pour retirer les commentaires et le formulaire pour commenter de vos articles;
    • Mettre des vignettes dans les articles : par défaut les vignettes sont placées au début de vos articles sur les pages ne contenant qu’un article. Si vous voulez supprimer cette vignette initiale pour éviter les répétitions, désactivez simplement cette option;
  • Modèle de page
    • Mettre des vignettes dans les pages : par défaut les vignettes sont placées au début de vos pages sur les pages ne contenant qu’un article. Si vous voulez supprimer cette vignette initiale pour éviter les répétitions, désactivez simplement cette option;
    • Afficher les commentaires dans la page : vous pouvez désactiver cette option pour retirer les commentaires et le formulaire pour commenter de vos pages;
  • Paramètres généraux
    • Section info de l’article : ici, vous pouvez choisir les éléments qui apparaissent dans la section des informations de publication sur les pages. Il s’agit de la zone, généralement située sous le titre du message, qui affiche des informations de base sur votre message. Les éléments en surbrillance ci-dessous apparaîtront;
      
    • Afficher des vignettes sur les pages d’index : cette option permet d’afficher les vignettes des articles sur la page d’accueil (si celle-ci liste des derniers articles).

       

Onglet “Les publicités”

Cet onglet permet d’afficher une bannière publicitaire de 468x60px au bas de la page de l’article, sous le contenu de l’article.

• Différents paramètres sont disponibles :
  • Active une bannière 468×60 : activer ou non la bannière;
  • Sélectionner une bannière de publicité de dimension 468×60 : vous pouvez fournir ici l’URL de destination pour une bannière de 468×60;
  • Entrer l’URL de destination pour une bannière de 468×60 : vous pouvez fournir ici l’URL de destination pour une bannière de 468×60;
  • Entrer le code Google adsense pour la publicité de dimension 468×60 : placez votre code Google Adsense ici si vous souhaitez diffuser de la publicité Google.

Exemple : 

Onglet “SEO”

Cet onglet permet de gérer différents paramètres liés au référencement naturel (SEO) du site dans les moteurs de recherche.
Les paramètres liés au SEO seront gérés au moyen de l’extension Yoast SEO, nous n’utiliserons donc pas ceux de Divi.

Onglet “L’intégration”

Cet onglet permet d’intégrer du code spécifique dans le code source des pages.

Si vous souhaitez insérer des balises HTML spécifiques ou des scripts JavaScript spécifiques dans votre code, il suffit d’activer la zone dans laquelle vous souhaitez insérer le code et d’insérer le code dans le champ correspondant.
Exemple : 

Onglet “Mises à jour”

Cet onglet permet d’entrer les données de licence du module Divi afin que celui-ci puisse être mis à jour automatiquement.

Boutons d’action

Les options du thème Divi fournissent également des boutons d’action complémentaires :