Comment ajouter un titre de site dynamique et un slogan à un en-tête global Divi

Comment ajouter un titre de site dynamique et un slogan à un en-tête global Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Savoir ajouter un titre de site dynamique et un slogan à un en-tête global Divi sera utile lors de la création de sites Web Divi. Et il y a quelques bonnes raisons de le faire. D’une part, tous les sites n’ont pas de logo. Un titre de site est un bon remplacement de logo. Une autre raison est de booster votre marque en incluant des informations vitales sur votre site où tout le monde le verra.

Dans ce didacticiel, nous allons vous montrer comment ajouter un titre de site dynamique et un slogan à un en-tête global Divi. Cette solution extraira dynamiquement le titre du site et le slogan du backend de WordPress. De plus, vous aurez toutes les puissantes options de conception de Divi pour personnaliser le titre et le slogan comme vous le souhaitez!

Résultat Possible

Voici un aperçu de la conception que nous allons construire dans ce tutoriel.

Dynamic site title global header template 6

Notez le titre du site et le slogan en haut au milieu de l’en-tête qui est affiché dynamiquement.

Exemple modification titre divi

Télécharger gratuitement

Rejoignez le Divi Newlsetter et nous vous enverrons par e-mail une copie du pack de mise en page de la page de destination Divi ultime, ainsi que des tonnes d’autres ressources, astuces et astuces Divi gratuites et incroyables. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.TÉLÉCHARGER

Pour importer le modèle, accédez à Divi> Générateur de thèmes.

Cliquez sur l’icône de portabilité en haut à droite de la page.

Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier de téléchargement depuis votre ordinateur.

Cliquez ensuite sur le bouton d’importation.

Choisir un template divi

Une fois terminé, le modèle d’en-tête global sera disponible dans Divi Theme Builder.

Modifier entete global divi

Dans ce qui suit nous allons passer à la conception.

Le titre du site et le slogan sur WordPress

Chaque site WordPress a un titre de site et un slogan. Le titre du site est essentiellement le nom du site et le slogan est une courte phrase qui explique généralement de quoi il s’agit.

Il n’est pas rare d’ajouter le titre du site lors de l’installation de WordPress et de l’oublier.

Personnaliser titre divi

Et, certaines personnes ne réalisent même pas que le slogan existe, et encore moins prennent le temps de le mettre à jour. De plus, lorsque vous utilisez le thème Divi, le titre du site et le slogan ne seront pas visibles sur votre site par défaut, il est donc facile de les ignorer. Cependant, le titre du site et le slogan sont des éléments essentiels du site Web et seront reconnus par les moteurs de recherche.

Vous pouvez localiser et mettre à jour le titre du site et le slogan dans WordPress à tout moment en accédant au tableau de bord WordPress et en naviguant vers Paramètres> Général.

Ou, vous pouvez prendre un autre itinéraire en utilisant le personnalisateur de thème pour mettre à jour le titre du site sous les paramètres généraux.

Personnaliser identité wordpress

Maintenant que nous savons où se trouvent le titre du site et le slogan sur le backend de WordPress, explorons comment nous pouvons les ajouter à un en-tête Divi!

Comment ajouter un titre de site dynamique et un slogan à un en-tête global dans Divi

Importation du modèle d’en-tête global préconçu

Pour ce didacticiel, nous allons nous concentrer sur la façon d’ajouter le titre de site dynamique et le slogan à un en-tête existant au lieu de créer un en-tête complet à partir de zéro. Cela vous fera gagner du temps et améliorera la clarté. Donc, pour démarrer cette conception d’en-tête, nous allons importer un modèle d’en-tête global prédéfini à partir de notre quatrième pack de générateur de thème .

Une fois que vous avez téléchargé le pack de création de thème , décompressez le fichier et recherchez le fichier JSON de modèle de site Web par défaut.

Ensuite, accédez à Divi> Theme Builder.

Cliquez sur l’icône de portabilité en haut à droite. Dans la fenêtre contextuelle de portabilité, choisissez le fichier JSON de modèle de site Web par défaut et cliquez sur le bouton Importer.

Importation modele divi

Une fois le modèle ajouté au générateur de thème, supprimez le modèle de pied de page et cliquez pour modifier l’en-tête global.

Supprimer le modele du pied de page

Ajout d’un titre de site dynamique et d’un slogan à l’en-tête

À l’intérieur de l’éditeur de disposition de modèle, vous verrez l’en-tête premade déjà conçu. Nous pouvons commencer à faire nos personnalisations tout de suite.

Déplacer le logo

Pour commencer, faites glisser le module d’image qui affiche le logo (dynamiquement) de la colonne du milieu de la ligne supérieure vers la colonne de gauche de la ligne du haut.

Ajouter un module d’appel à l’action pour afficher le titre du site et le slogan

Ajoutez ensuite un nouveau module Appel à l’action à la colonne du milieu de la ligne supérieure (où se trouvait le logo).

Personnaliser lappel a laction

Nous utiliserons le module Appel à l’action pour afficher le titre du site et le slogan.

Mais avant de commencer à ajouter du contenu, sélectionnez d’abord NON pour utiliser la couleur d’arrière-plan.

Configurer les actions dappel a laction

Ajouter un titre de site dynamique

Sous les paramètres de contenu, survolez la zone de saisie du titre et cliquez sur l’icône «Utiliser le contenu dynamique». Sélectionnez ensuite «Titre du site» dans la liste.

Ajouter un slogan de site dynamique

Ensuite, passez la souris sur la zone du corps et sélectionnez l’icône «Utiliser le contenu dynamique». Sélectionnez ensuite «Site Tagline» dans la liste.

Ajouter un slogan du site divi

Ajouter un lien de page d’accueil dynamique

Il est courant que le titre du site redirige vers la page d’accueil au clic, surtout si vous remplacez le logo. Pour rediriger l’intégralité du module vers la page d’accueil, ajoutez le lien de la page d’accueil en tant que contenu dynamique à l’URL du lien du module.

Ajouter un lien vers la pge daccueil

Conception du texte du titre et du slogan du site

Now the site title and tagline are displayed on the header dynamically. All we have to do now is add some styling. Remember, we need to customize the title text to design the site title and the body text to design the tagline.

Jump over to the design tab, and update the following:

  • Title Font: Heebo
  • Title Font Weight: Bold
  • Title Font Style: TT
  • Title Text Size: 32px (desktop), 24px (tablet and phone)
  • Title Letter Spacing: 0.3em
  • Body Font: Roboto
  • Body Font Style: italic
  • Body Text Color:
  • Body Text Size: 13px
  • Body Letter Spacing: 0.1em
  • Body Line Height: 1em
Personnaliser police titre divi

To help with centering, take out the default padding below the body text by adding the following custom CSS to the Promo Description:

padding-bottom: 0px
Ajouter code css divi personnalisé

Additional Design Adjustments

For this last part of the tutorial, we are going to make some additional design adjustments to the header to make sure the items remain vertically centered in each column and to give the button a unique design. We’ll also add a before and after squiggly line to the tagline (just for kicks).

Vertically Centering the Columns/Content

Right now the top row is the “Equalize Column Heights” active which uses the flex property. We can capitalize on this by adding a small css snippet to make sure all the columns remain vertically centered within the row. To do this, open the settings for the top row and add the following CSS to the Main Element:

align-items: center;

Updating the Column with the Button

Next, open the settings for column 3 in the top row and take out the background color and padding.

Personnaliser le bouton contact divi

Updating the Button Background

Ouvrez ensuite le paramètre du module de boutons et mettez à jour l’arrière-plan avec un nouveau dégradé d’arrière-plan comme suit:

  • Arrière-plan dégradé Couleur gauche: #ffffff
  • Couleur de fond dégradé à droite: # 1dbf73
  • Gradient Direction: 135deg
  • Start Position: 10%
  • End Position: 0%
Personnaliser larriere plan du bouton divi

Ajout de caractères avant et après au slogan

Chaque élément de contenu dynamique peut être modifié en cliquant sur l’icône d’engrenage. Pour ajouter des caractères avant et après au slogan, ouvrez les paramètres du module d’appel à l’action contenant le slogan et cliquez sur l’icône de modification sur le contenu dynamique du slogan du site. Ajoutez ensuite les caractères aux entrées avant et après.

Afficher le slogan divi

Résultat final

Pour voir le résultat, ouvrez n’importe quelle page de votre site. Vous devriez voir le titre du site dynamique et le slogan affichés magnifiquement!

Résultat final divi

Dernières pensées

Il est vraiment agréable de pouvoir personnaliser un en-tête global avec un titre de site dynamique et un slogan. Cela semble être quelque chose qui sera utile pour de nombreux sites. J’aime également l’idée d’inclure le titre du site et le slogan en plus du logo pour une représentation encore plus forte de la marque.

Source: Elegant Theme

Comment créer une transition transparente avec les effets de défilement sur Divi

Comment créer une transition transparente avec les effets de défilement sur Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Lors de la conception de votre page de services, vous voulez vous assurer que vos visiteurs remarquent tous les différents services que vous fournissez. Dans de nombreux cas, ce ne sera qu’un seul service spécifique qu’ils recherchent, mais si vous fournissez une manière rationalisée dans votre structure de service, il est plus probable que vos visiteurs les traitent tous. 

Dans ce didacticiel, nous vous montrerons comment faire preuve de créativité avec les effets de défilement de Divi et créer une transition de service transparente. Vous pourrez également télécharger gratuitement le fichier JSON!

Allons-y.

Résultat Possible

Avant de plonger dans le didacticiel, jetons un coup d’œil au résultat sur différentes tailles d’écran.

Transition entre section divi

1, recréer la structure des éléments

Ajouter la section # 1

Espacement

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de section et modifiez les valeurs de remplissage sur différentes tailles d’écran.

  • Rembourrage supérieur: 80 px (ordinateur de bureau et tablette), 0 px (téléphone)
  • Rembourrage inférieur: 80px
Section paramètre divi

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante:

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez les modifications suivantes aux paramètres de dimensionnement:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Largeur: 90%
  • Largeur max: 1580px
Configuration espacement divi

Espacement

Ajoutez ensuite une marge supérieure et inférieure personnalisée.

  • Marge supérieure: 200px
  • Marge inférieure: 200px
Configuration espacement ligne divi

Ajouter un module de texte à la colonne 1

Ajouter du contenu H2

Il est temps d’ajouter des modules, en commençant par un module de texte dans la colonne 1. Entrez le contenu H2 de votre choix.

Nos services propose par les experts du moment

Paramètres de texte H2

Passez à l’onglet de conception du module et modifiez les paramètres de texte H2 comme suit:

  • Titre 2 Police: Questrial
  • En-tête 2 Taille du texte: 80 px (bureau), 50 px (tablette), 40 px (téléphone)
  • Hauteur de la ligne 2 de la tête: 1.2em
En tête police divi

Espacement

Ajoutez ensuite une marge inférieure sur la tablette et le téléphone.

  • Marge inférieure: 50 pixels (tablette et téléphone uniquement)
Configuration espacement texte divi

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne. Là, le premier module dont nous avons besoin est un module de texte avec un certain contenu de description.

Contenu zone de texte divi

Paramètres de texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence:

  • Police du texte: cabine
  • Style de police du texte: majuscule
  • Couleur du texte: # 000000
  • Taille du texte: 18 px (ordinateur de bureau), 15 px (tablette), 13 px (téléphone)
  • Espacement des lettres texte: 3px (bureau), 1px (tablette et téléphone)
  • Hauteur de la ligne de texte: 3em
Parametre texte divi

Ajouter un module de séparation à la colonne 2

Visibilité

Le module suivant et dernier dont nous avons besoin dans cette colonne est un module de séparation. Assurez-vous que l’option «Afficher le séparateur» est activée.

  • Afficher le séparateur: Oui
Séparateur divi visible

Ligne

Modifiez ensuite la couleur de ligne du module.

  • Couleur de la ligne: # 000000
Séparateur divi couleur arriere plan

Dimensionnement

Ensuite, apportez quelques modifications aux paramètres de dimensionnement.

  • Poids du diviseur: 3px
  • Largeur: 28%
Dimensionnement séparateur divi

Espacement

Nous ajoutons également une marge supérieure.

  • Marge supérieure: 10px
Espacement module separateur divi

Ajouter la section # 2

Espacement

Passons à la section régulière suivante. Supprimez le rembourrage supérieur par défaut de la section.

  • Rembourrage supérieur: 0px
Espacement section 2 divi

Débordements

Cachez aussi les débordements.

  • Débordement horizontal: caché
  • Débordement vertical: caché
Masquer les debordements module divi

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une première ligne en utilisant la structure de colonnes suivante:

Choisir une mise ne page divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez aux paramètres de dimensionnement et apportez les modifications suivantes:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: Oui
  • Largeur: 90%
  • Largeur max: 1580px
Configuration goutière section divi

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

  • Rembourrage supérieur: 0px
  • Rembourrage inférieur: 0px
Reglages espacement module ligne divi 1

Paramètres de la colonne 1

Couleur de l’arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et modifiez la couleur d’arrière-plan.

  • Couleur d’arrière-plan: # f7f7f7
Configuration arriere plan module ligne divi

Espacement

Complétez les paramètres de la colonne en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 200px (bureau), 100px (tablette et téléphone)
  • Rembourrage inférieur: 200px (bureau), 100px (tablette et téléphone)
  • Rembourrage gauche: 8%
  • Rembourrage droit: 8%
Reglages colonne module ligne

Paramètres de la colonne 2

Espacement

Continuez en ouvrant les paramètres de la colonne 2. Accédez à l’onglet avancé et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 100 px (ordinateur de bureau), 50 px (tablette et téléphone)
  • Rembourrage inférieur: 200px
  • Rembourrage gauche: 150 px (bureau), 0 px (tablette et téléphone)
Reglages espacement module divi

Ajouter un module de séparation à la colonne 1

Visibilité

Dans la première colonne, le premier module dont nous avons besoin est un module de séparation. Assurez-vous que l’option «Afficher le séparateur» est activée.

  • Afficher le séparateur: Oui
Afficher séparateur divi 1

Ligne

Modifiez ensuite la couleur de ligne du module.

  • Couleur de la ligne: # 000000
Reglages séparateur divi

Dimensionnement

Apportez également des modifications aux paramètres de dimensionnement.

  • Poids du diviseur: 3px
  • Largeur: 50%
Dimensionnement séparateur divi

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3

Le prochain module dont nous avons besoin dans la colonne 1 est un module de texte avec du contenu H3.

Reglage section contenu divi

Paramètres de texte H3

Passez à l’onglet de conception du module et modifiez les paramètres de texte H3:

  • Titre 3 Police: Questrial
  • Couleur du texte de la rubrique 3: # 000000
  • Rubrique 3 Taille du texte: 50 px (ordinateur de bureau), 40 px (tablette), 35 px (téléphone)
  • Hauteur de la ligne 3 de la tête: 1.1em

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le premier module dont nous avons besoin est un module de texte avec un certain contenu de description.

Reglage module texte divi

Paramètres de texte

Modifiez les paramètres de texte du module comme suit:

  • Police du texte: cabine
  • Style de police du texte: majuscule
  • Taille du texte: 18 px (ordinateur de bureau), 15 px (tablette), 13 px (téléphone)
  • Espacement des lettres texte: 3px (bureau), 1px (tablette et téléphone)
  • Hauteur de la ligne de texte: 3em
Reglage police moule texte divi

Ajouter un module de boutons à la colonne 2

Ajouter une copie

Le module suivant et dernier dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.

Reglage contenu module texte

Paramètres des boutons

Stylisez ensuite le bouton.

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 20 pixels
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000
  • Largeur de bordure de bouton: 0px
Reglage style bouton divi
  • Button Font: Questrial
  • Poids de la police du bouton: gras
Reglages couleur bouton divi

Espacement

Ajoutez également un rembourrage personnalisé.

  • Rembourrage supérieur: 50px
  • Rembourrage inférieur: 50px
  • Rembourrage gauche: 100px
  • Rembourrage droit: 100px
Reglages espacement bouton module divi

Position

Et repositionnez le bouton en conséquence:

  • Position: Absolute
  • Emplacement: en bas à gauche
Reglage position module bouton divi

Cloner la ligne autant de fois que nécessaire

Une fois que vous avez terminé la ligne entière et tous ses modules, vous pouvez cloner la ligne entière trois fois.

Cloner module divi

Changer tout le contenu

Assurez-vous de modifier tout le contenu dans des lignes en double.

Modifier contenu section divi

2. Appliquer des effets de défilement

Effets de défilement de la première rangée

Mouvement horizontal

Une fois que vous avez terminé toutes les lignes de votre section, il est temps d’ajouter les effets de défilement. Ouvrez la première ligne de la section et ajoutez un mouvement horizontal.

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: -5
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Appliquer effets defilement divi

Fondu entrant et sortant

Utilisez également un effet de fondu entrant et sortant.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 100%
  • Opacité moyenne: 100% (à 50%)
  • Opacité de fin: 0% (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Configurer animation fondu section divi

Effets de défilement des rangées moyennes

Mouvement vertical

Ensuite, nous ajouterons des effets de défilement à toutes les lignes entre la première et la dernière ligne de la section. Utilisez d’abord un mouvement vertical:

  • Activer le mouvement vertical: Oui
  • Décalage de départ: -4
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Effet de déclenchement de mouvement: milieu de l’élément
Configuration aniation au défilement divi

Fondu entrant et sortant

Activez également un effet de fondu entrant et sortant.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100% (de 27% à 50%)
  • Décalage de fin: 0 (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation fondu ligne divi

Effets de défilement de dernière ligne

Mouvement vertical

Ensuite, ouvrez la dernière ligne de la section et ajoutez le mouvement vertical suivant:

  • Activer le mouvement vertical: Oui
  • Décalage de départ: -4
  • Décalage moyen: 0 (à 26%)
  • Décalage de fin: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Animation défilement module ligne divi

Fondu entrant et sortant

Avec un effet de fondu entrant et sortant et vous avez terminé!

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 0%
  • Opacité moyenne: 100% (de 27% à 50%)
  • Opacité de fin: 100% (à 53%)
  • Déclenchement d’effet de mouvement: milieu de l’élément
Reglages animation apparition module ligne divi

Résultat Final

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Demo finale

Dernières pensées

Dans cet article, nous vous avons montré comment créer une belle transition de service avec les effets de défilement de Divi. Avant même qu’un service ne disparaisse, l’autre commence à apparaître, donnant une belle transition agréable à l’œil. Cette approche vous aidera à mettre en évidence chaque service à un niveau individuel. Vous avez également pu télécharger gratuitement le fichier JSON! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Comment créer une carrousel de défilement des membres de l’équipe avec Divi

Comment créer une carrousel de défilement des membres de l’équipe avec Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Lors de la création de votre page « À propos », vous souhaiterez probablement également y présenter les membres de votre équipe. Ce faisant, vous permettez ainsi aux visiteurs d’interagir avec les personnes derrière votre entreprise. Si vous cherchez un moyen d’animer la section des membres de votre équipe sur le défilement, ce tutoriel pourra vous plaire. Nous allons créer un carrousel de membres de l’équipe à défilement automatique qui se déplace lorsque vos visiteurs font défiler la page. 

Démonstrratoin

Avant de plonger dans le didacticiel, jetons un coup d’œil au résultat sur différentes tailles d’écran.

Defilement membre equipe divi

Début de la conception

Ajouter une nouvelle section

Espacement

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et ajoutez un rembourrage personnalisé sur différentes tailles d’écran.

  • Rembourrage supérieur: 200px (bureau), 100px (tablette et téléphone)
  • Rembourrage inférieur: 200px (bureau), 100px (tablette et téléphone)
Configuration parametres

Débordements

Pour vous assurer qu’aucune barre de défilement horizontale n’apparaît dans notre conception, nous cacherons les débordements de section dans l’onglet avancé.

  • Débordement horizontal: caché
  • Débordement vertical: caché
Configuration debordement

Ajouter la ligne # 1

Structure de colonne

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante:

Choisir mise en page divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l’onglet de conception et modifiez la largeur et la largeur maximale dans les paramètres de dimensionnement.

  • Largeur: 90%
  • Largeur max: 1580px
Paramètre ligne divi

Espacement

Nous ajoutons également un rembourrage supérieur et inférieur personnalisé.

  • Rembourrage supérieur: 100px
  • Rembourrage inférieur: 100px
Configuration ligne espacement divi

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Il est temps d’ajouter des modules, en commençant par un premier module de texte. Saisissez le contenu H2 de votre choix.

Rencontrer léquipe

Paramètres de texte H2

Passez à l’onglet de conception du module et modifiez les paramètres de texte H2 comme suit:

  • Titre de la police 2: Quicksand
  • Titre de la police 2: semi-gras
  • Couleur du texte de la rubrique 2: # 000000
  • En-tête 2 Taille du texte: 70 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
Espacement texte divi

Ajouter un module de séparation à la colonne

Visibilité

Ensuite, ajoutez un module de séparation. Assurez-vous que l’option «Afficher le séparateur» est activée.

  • Afficher le séparateur: Oui
Afficher séparateur divi

Ligne

Apportez ensuite quelques modifications aux paramètres de ligne.

  • Couleur de la ligne: # edf000
  • Style de ligne: solide
  • Line Position: Top
Style espacement divi

Dimensionnement

Et complétez les paramètres du module en modifiant les paramètres de dimensionnement en conséquence:

  • Poids du diviseur: 20px
  • Largeur: 11%
  • Alignement du module: gauche
  • Hauteur: 20px
Dimensionnement divi ligne module

Ajouter une ligne # 2

Structure de colonne

À la rangée suivante! Utilisez la structure de colonnes suivante:

Configuration colonnes divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 2
  • Largeur: 100%
  • Largeur max: 100%
Configuration largeur goutiere

Espacement

Ensuite, ajoutez du rembourrage gauche et droit sur les écrans plus petits uniquement.

  • Rembourrage gauche: 5% (tablette et téléphone uniquement)
  • Rembourrage droit: 5% (tablette et téléphone uniquement)
Configuration style espacement ligne

Paramètres de colonne (5x)

Maintenant, dans les trois prochaines étapes de ce didacticiel, nous allons apporter des modifications aux colonnes. Appliquez les trois étapes à chacune des colonnes de votre ligne.

Configuration ligne parametre divi

Fond dégradé

Tout d’abord, ajoutez un arrière-plan dégradé à chaque colonne.

  • Couleur 1: rgba (255,255,255,0)
  • Couleur 2: rgba (0,0,0,0,84)
  • Type de dégradé: linéaire
  • Start Position: 25%
  • End Position: 86%
  • Placer le dégradé au-dessus de l’image d’arrière-plan: Oui
Configuration colonne arriere plan divi

Image de fond

Ensuite, téléchargez une image d’arrière-plan de votre choix. Cette image d’arrière-plan représente chaque membre de l’équipe, utilisez donc une image différente pour chaque colonne.

  • Taille de l’image d’arrière-plan: Couverture
  • Position de l’image d’arrière-plan: Centre
Ajouter image arriere plan colonne divi

Main Element

Complétez les paramètres de la colonne en ajoutant du CSS personnalisé à l’élément principal de la tablette de chaque colonne. Ces lignes de code CSS nous aideront à placer les colonnes les unes au-dessous des autres sur la tablette, au lieu d’en avoir deux côte à côte.

width: 100% !important;margin: 50px 0px 50px 0px !important;
Code css colonne divi

Ajouter un module de personne à la colonne

Ajouter du contenu

Pour partager les informations sur les membres de l’équipe, nous utiliserons un module Personne. Ajoutez le premier module Personne à la colonne 1 et utilisez le contenu de votre choix.

Nom personne divi

Supprimer l’image

Ensuite, supprimez l’image. Nous utilisons à la place l’image d’arrière-plan de la colonne.

Retirer image divi

Image de fond

Nous ajouterons ensuite une superposition d’image comme image d’arrière-plan du module. Vous pouvez trouver celui que nous utilisons en téléchargeant le dossier au début de ce tutoriel.

  • Taille de l’image d’arrière-plan: Couverture
  • Position de l’image d’arrière-plan: Centre
Configuration arriere plan module personne

Paramètres du texte du titre

Passez à l’onglet de conception du module et modifiez les paramètres de texte du titre comme suit:

  • Niveau de titre: H3
  • Police du titre: Quicksand
  • Poids de la police du titre: gras
  • Couleur du texte du titre: #ffffff
  • Taille du texte du titre: 230%
Personnalisation titre divi module

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

  • Body Font: Open Sans
  • Couleur du texte du corps: #ffffff
  • Hauteur de la ligne du corps: 2,2 em
Personnalisation corps divi

Paramètres de texte de position

Ensuite, apportez quelques modifications aux paramètres de texte de position.

  • Position Font: Open Sans
  • Couleur du texte de position: # edf000
Position divi

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées aux paramètres d’espacement.

  • Rembourrage supérieur: 70%
  • Rembourrage inférieur: 10%
  • Rembourrage gauche: 10%
  • Rembourrage droit: 10%
Espacement module personne divi

Dupliquer le module Personne 4 fois

Une fois que vous avez terminé le module Personne, vous pouvez cloner le module entier quatre fois.

Placer des doublons dans les colonnes restantes

Placez les modules en double dans les quatre colonnes restantes de la ligne. Assurez-vous de modifier également le contenu.

Transformez Row en carrousel à défilement automatique

Modifier la taille de la ligne # 2

Maintenant, pour transformer cette ligne en carrousel de membres d’équipe à défilement automatique, nous devons rouvrir les paramètres de ligne et modifier la largeur et la largeur maximale dans les paramètres de dimensionnement.

  • Largeur: 180%
  • Largeur maximale: 220% (bureau), 100% (tablette et téléphone)
Ligne divi modification espacement

Ajouter un mouvement horizontal de la ligne # 2

Complétez les paramètres de ligne en ajoutant un mouvement horizontal aux paramètres d’effet de défilement dans l’onglet avancé et vous avez terminé!

  • Activer le mouvement horizontal: Oui
  • Décalage de départ:
    • Bureau: 2,5
    • Tablette et téléphone: 0
  • Décalage moyen: 0 (à 40%)
  • Décalage de fin:
    • Bureau: -25 (à 62%)
    • Tablette et téléphone: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Configuration animation defilement divi

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Bureau

Defilement membre equipe divi

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment faire preuve de créativité avec les effets de défilement intégrés de Divi. Plus précisément, nous avons recréé un magnifique carrousel de membres d’équipe à défilement automatique. Lorsque les visiteurs font défiler la page, une autre partie du carrousel apparaît.

Comment ajouter plus d’icônes de médias sociaux à Divi

Comment ajouter plus d’icônes de médias sociaux à Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Divi vous permet de contrôler et de concevoir chaque détail de votre site Web, de l’en-tête au pied de page. L’un des éléments les plus cliqués de n’importe quel site Web sont des icônes de médias sociaux. Un public engagé veut vous trouver ailleurs et vous connaître. Évidemment, vous voudrez rendre cela aussi simple que possible. 

Nous allons donc vous montrer comment activer des icônes de médias sociaux supplémentaires dans les options de thème de Divi, comment utiliser Divi Builder pour insérer des icônes de médias sociaux n’importe où sur une page ou un article, et comment tirer parti de la puissance du thème Divi Builder pour ajouter des icônes de médias sociaux à tous les coins et recoins de votre site.

Comment activer facilement des icônes de médias sociaux supplémentaires dans le pied de page de Divi

La façon la plus simple d’ajouter plus d’icônes de médias sociaux à votre site Divi consiste à accéder au panneau Options de thème , activant les options pour Facebook, Twitter, Instagram et RSS. Il vous suffit ensuite de saisir les URL de votre profil dans les champs. Lorsque vous faites cela, vous les verrez apparaître sous forme de liens d’icônes dans le pied de page de votre site:

Icones sociales divi

Dans votre menu de tableau de bord WordPress, accédez à Divi – Options de thème et cliquez sur l’onglet Général . Faites défiler vers le bas pour voir le réseau basculer. En outre, juste sous ces bascules, assurez-vous d’entrer les URL de chaque icône sociale Divi que vous activez. Sinon, l’icône apparaîtra, mais en cliquant dessus, l’utilisateur ne sera nulle part. L’utilisation d’un # à la place d’une URL gardera l’utilisateur sur la page plutôt que de le rediriger potentiellement vers une page 404 .

Options theme divi

Faites défiler jusqu’à la fin de vos options de thème et cliquez sur Enregistrer les modifications . Vous pouvez maintenant consulter le pied de page de votre site et cliquer sur les icônes sociales pour les tester!

Si vous ne voyez pas les icônes dans votre pied de page, assurez-vous de vérifier votre personnalisateur de thème sous Apparence – Personnaliser et assurez-vous que Afficher les icônes sociales est coché sous les options de pied de page.

Divi wordpress

Si, cependant, vous voulez encore plus d’options pour les icônes sociales de pied de page, continuez à faire défiler jusqu’à notre section sur le Divi Theme Builder où nous discutons à la fois des modèles personnalisés et des valeurs par défaut globales.

Comment utiliser Divi Builder pour ajouter des modules de suivi de médias sociaux dans une page ou publier du contenu

Parfois, mettre des icônes de médias sociaux supplémentaires entre des blocs de texte, des images ou tout autre contenu dans le corps des pages ou des publications peut avoir beaucoup de sens. Votre page de destination ou la page À propos, par exemple, serait un bon endroit pour ajouter des icônes sociales supplémentaires pour informer les visiteurs sur la façon de se connecter avec vous. Ils se démarqueront certainement plus que simplement un lien vers vos profils sociaux en utilisant du texte normal. De plus, les gens sont à la recherche d’icônes reconnaissables.

Vous pouvez utiliser Divi Builder pour insérer des icônes de médias sociaux directement dans vos pages ou publications à l’aide du module de suivi des médias sociaux .

Chaque fois que vous créez ou ouvrez une page ou un article existant dans votre tableau de bord WordPress, vous verrez un grand bouton violet vous demandant si vous souhaitez ou non utiliser Divi Builder.

Divi creation article

Et bien sûr que oui. Cliquez simplement sur Utiliser Divi Builder pour commencer à créer votre page ou publier à partir de zéro (ou à partir de l’une de nos mises en page prédéfinies ). De plus, vous pouvez inclure les icônes des médias sociaux Divi si vous utilisez l’éditeur WordPress par défaut. Tout ce que vous devez faire est d’insérer un bloc de mise en page Divi et suivez les mêmes étapes que nous suivons ci-dessous.

Disposition divi gutenberg

Vous pouvez utiliser l’outil pour concevoir votre page ou publier comme vous le souhaitez en utilisant les modules de création de page disponibles. Si c’est la première fois que vous utilisez Divi Builder, vous voudrez peut-être d’abord consulter cette présentation pour avoir une compréhension claire de son fonctionnement.

Lorsque vous êtes prêt à ajouter des icônes de médias sociaux à votre page, cliquez sur le cercle noir + dans la section dans laquelle vous souhaitez placer vos icônes de médias sociaux et faites défiler jusqu’à ce que la boîte de suivi des médias sociaux s’affiche.

Insertion module suivre sur les média sociaux

Il vous sera demandé de choisir les réseaux sociaux que vous souhaitez avant de pouvoir commencer à les personnaliser. Cliquez sur Ajouter un nouveau réseau social .

Ajouter réseau sociaux module social divi

Ensuite, sélectionnez-en un dans la liste déroulante.

Ajouter un nouveau réseau social

Avec cela choisi, ajoutez l’URL de votre profil. En option, vous pouvez sélectionner une couleur, un dégradé, un arrière-plan, etc. spécifiques pour son icône.

Personnaliser bouton reseau social

Une fois que vous avez ajouté votre premier réseau social, vous pouvez continuer à ajouter d’autres réseaux en suivant ces mêmes étapes. Ils seront tous répertoriés sous l’onglet Contenu des paramètres de suivi des médias sociaux . Vous pouvez modifier, copier ou réorganiser en les faisant glisser et en les déposant en place.

Personnaliser icone sociales

Une fois que vous avez ajouté vos réseaux sociaux, passez aux onglets Contenu et Conception pour jouer avec d’autres options de personnalisation. Vous pouvez tout changer depuis l’ombre de la boîte, le rayon de la bordure, l’espacement, les filtres et même l’animation d’introduction pour le module d’icônes. Vous avez également la possibilité d’inclure un bouton Suivre pour toutes vos icônes pour attirer davantage l’attention sur elles. Lorsque vous avez terminé, cliquez sur la coche verte .

Suiviez nous bouton divi

Vous pouvez ensuite déplacer les icônes autour de votre page, travailler leur espacement et leur mise en page comme bon vous semble. (Les options de transformation Divi sont étonnantes pour cela, soit dit en passant.) Lorsque vous êtes satisfait de toutes vos décisions, appuyez sur le bouton vert Enregistrer (ou Publier) dans le coin inférieur droit pour enregistrer votre nouveau module d’icône de médias sociaux. Si vous ne voyez pas de bouton Publier / Enregistrer, appuyez sur les points de suspension violets (trois points) en bas au centre de l’écran pour développer le menu.

Bouton divi suivez nous

Après cela, vos icônes de médias sociaux seront en direct sur votre site.

Utilisation du Divi Theme Builder pour ajouter des icônes de médias sociaux

Comme nous l’avons mentionné ci-dessus, le Divi Theme Builder est un outil puissant qui vous donne un contrôle complet sur à peu près tous les aspects de votre site. Donc, si vous cherchez à ajouter des icônes de médias sociaux n’importe où, le générateur de thème vous a couvert.

Pour commencer avec le générateur de thème, accédez à Divi – Générateur de thème dans votre tableau de bord WordPress.

Divi builder

Il s’agit très d’ajouter des icônes de médias sociaux à une disposition de générateur de thème Divi existante. Ou à un nouveau! Peu importe que vous ajoutiez à l’en-tête, au pied de page ou au corps global de votre site – ou même à certaines catégories ou à d’autres types de page spécialisés. Vous suivrez le même processus.

Nous allons d’abord trouver la section à laquelle nous voulons ajouter. Encore une fois, il peut être global ou personnalisé. Si vous n’avez jamais utilisé le générateur de thème auparavant, c’est facile. Nous allons ajouter des icônes de médias sociaux à des messages individuels. Vous pouvez donc commencer en cliquant sur Ajouter un nouveau modèle et en sélectionnant Tous les messages ou Messages dans des catégories spécifiques . Cochez ensuite les catégories que vous souhaitez inclure. Cliquez ensuite sur Créer un modèle .

Ajouter un modele divi

Si vous avez déjà configuré des modèles, il vous suffit de cliquer sur Modifier le crayon ou de double-cliquer sur la section que vous souhaitez modifier.

Mise en page divi

Le processus d’ajout d’icônes de médias sociaux ici est le même que celui décrit ci-dessus dans le générateur. Cependant, comme vous utilisez le générateur de thèmes au lieu de simplement modifier une seule page, les icônes n’apparaîtront pas uniquement à l’endroit que vous choisissez. Des modèles peuvent être ajoutés aux en-têtes, pieds de page et modèles globaux. Et vous pouvez choisir comment et quand ils apparaissent sans avoir à les configurer une seule fois. Pas page par page, comme vous le feriez ci-dessus.

Par exemple, si nous voulons inclure les icônes des médias sociaux sous le titre de l’article, mais au-dessus du contenu de l’article sur chaque article de blog que nous publions, nous ajouterons simplement un module de suivi des réseaux sociaux . Cliquez sur le cercle Noir + et sélectionnez-le dans la boîte de dialogue Insérer un module .

Choisir le module social

Ensuite, faites simplement glisser le module à l’endroit où vous souhaitez que les icônes des médias sociaux s’affichent. (Nous utilisons le mode filaire pour ce placement). Il vous suffit ensuite d’ajouter les réseaux sociaux que vous souhaitez afficher. Ensuite, vous personnalisez le dimensionnement et la coloration comme vous l’avez fait ci-dessus.

Social icon media module divi

Et juste comme ça, vous avez ajouté des icônes de médias sociaux au générateur de thème Divi. Ils apparaîtront sur n’importe quel article de blog que vous créez (dans cet exemple).

Apparence sur divi avec bouton de partage

Et si vous n’aimez pas leur apparence, le générateur de thème est facile à personnaliser. Faites-les simplement glisser vers un emplacement différent, tel que le haut de la barre latérale.

Deplacement module partage social divi

Assurez-vous de cliquer sur le bouton vert Enregistrer dans le coin. Maintenant, chaque article de blog avec ce modèle sur le site sera mis en ligne avec vos icônes de médias sociaux en haut de la barre latérale.

icônes de la barre latérale

Ajout d’icônes de médias sociaux à l’en-tête et au pied de page avec Divi Theme Builder

Peut-être que les icônes de médias sociaux par défaut dans les paramètres Divi ne fonctionnaient pas pour vous ou n’offraient pas suffisamment de personnalisation. Dans ce cas, vous pouvez toujours utiliser le générateur de thème pour le personnaliser plus complètement. 

Dans n’importe quel modèle, vous pouvez ajouter un pied de page personnalisé. Cela remplacera le Divi par défaut. Tout modèle sans modèle personnalisé affichera l’élément de thème par défaut. Les icônes des médias sociaux peuvent différer d’une publication à une page à archiver, selon les besoins de vos utilisateurs.

Personnalisation theme divi mise en page

Vous pouvez également ajouter un pied de page global qui remplacera tous les autres pieds de page que vous avez créés. (Cela s’applique également aux corps et en-têtes globaux). 

Si vous avez conçu 4 pieds de page personnalisés pour les publications, les pages, les projets et les catégories, mais que vous créez ensuite un pied de page global, seul le pied de page global s’affichera. 

Les modèles globaux sont excellents pour les icônes de médias sociaux à l’échelle du site pour, peut-être, un journal ou une marque. Alors que les modèles personnalisés avec des icônes sociales peuvent être les meilleurs pour les créateurs individuels qui font partie d’un réseau.

Ajouter un pied de page global divi

En utilisant Divi Builder pour les en-têtes, pieds de page et modèles de corps personnalisés, vous pouvez ajouter des icônes de médias sociaux à presque toutes les parties de Divi que vous souhaitez. Vous n’êtes pas limité aux conceptions par défaut ou devez creuser dans le système de fichiers WordPress. De plus, avec le générateur de thème, vous pouvez utiliser l’une des options de conception de Divi pour embellir les icônes des médias sociaux et les faire ressortir de la bonne manière pour chaque public particulier.

Conclusion

Lorsque vous disposez des options de pied de page par défaut de Divi, de l’outil Divi Builder pour les publications et les pages, de la puissance du Divi Theme Builder, il n’y a aucune raison pour que vous ayez besoin d’installer un plugin pour ajouter des icônes de médias sociaux à votre site Web. Divi vous donne un contrôle total sur l’apparence de vos icônes sociales et leur emplacement. 

Que vous ayez besoin de promouvoir une marque, un auteur invité, une écurie de créateurs de contenu ou simplement les endroits où vous-même pouvez être trouvés en ligne, Divi a un moyen de le faire. Nous sommes partiaux, mais nous pensons que c’est la façon la plus simple, la plus simple et la plus élégante d’ajouter des icônes de médias sociaux à votre site Web.

Création d’une grille d’avantages dynamique pour des produits WooCommerce

Création d’une grille d’avantages dynamique pour des produits WooCommerce

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

La façon dont vous concevez votre page produit a un impact immédiat sur le comportement de vos visiteurs. Une conception de page de produit bien conçue et personnalisée peut permettre aux visiteurs de décider plus facilement s’ils souhaitent acheter votre produit. Si vous cherchez un moyen de rendre votre page produit plus attrayante, vous aimerez probablement ce tutoriel. 

Nous vous montrerons comment inclure une grille d’avantages produit dynamique dans votre conception à l’aide de Divi et du plugin Advanced Custom Fields. Nous allons commencer par créer un groupe de champs pour les avantages. Nous remplirons ensuite les champs personnalisés de notre page produit et inclurons le contenu dynamique dans notre modèle de page produit. 

Résultat Possible

Avant de plonger dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Résultat possible divi

1. Installer le plugin ACF Plugin Et Product Benefit Field Group

Installer le plugin Advanced Custom Fields

Pour afficher les différents avantages du produit dans le backend de nos produits, nous utiliserons le plugin gratuit Advanced Custom Fields. Accédez à votre backend WordPress> Plugins> Ajouter nouveau> Rechercher le plugin ACF> Installer > Activer .

Installer plugin adavanced custom field

Accédez aux champs personnalisés et ajoutez un nouveau groupe de champs

Une fois que vous avez installé et activé le plugin ACF, vous pourrez accéder à vos champs personnalisés et ajouter un nouveau groupe de champs.

Créer des champs acf

Paramètres du groupe de champs

Donnez à votre nouveau groupe de champs un titre et permettez-lui de s’afficher uniquement sur les pages produits.

  • «Type de message» est égal à «Produit»
Ajouter des regles

Ajouter un premier champ

Continuez en ajoutant un nouveau champ pour le titre de votre premier avantage produit.

  • Étiquette de champ: Titre de l’avantage 1
  • Type de champ: texte
Ajouter une champ ac
Personnalisation champ divi

Répétez l’étape pour les champs restants

Faites de même pour les autres avantages du produit et leurs descriptions. Tous ces champs nécessitent le type de champ «Texte» qui leur est attribué.

  • Titre de la prestation 1
  • Description des avantages 1
  • Titre de la prestation 2
  • Description des avantages 2
  • Titre de la prestation 3
  • Description des avantages 3
  • Titre de la prestation 4
  • Description des avantages 4
Configuraiton champs acf

2. Ajoutez des avantages aux produits

Ouvrir ou ajouter un nouveau produit

Une fois votre groupe de champs et vos champs créés, vous pouvez ajouter les avantages du produit à vos produits à un niveau individuel. Ouvrez un produit de votre choix ou créez-en un nouveau.

Creation de produit divi

Remplissez les champs Avantages du produit

Et remplissez les avantages du produit.

Remplir les champs avantages divi

3. Créer un modèle de page de produit dans Divi Theme Builder

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Il est temps de commencer avec Divi! Pour créer un nouveau modèle, accédez au Divi Theme Builder et cliquez sur «Ajouter un nouveau modèle».

Divi theme builder

Utiliser un modèle sur tous les produits

Nous utilisons ce modèle sur tous les produits, mais n’hésitez pas à sélectionner des produits avec une catégorie ou une étiquette spécifique à la place.

Ajouter tous les produits woocommerce

Entrez dans l’éditeur de modèle de corps du modèle

Ensuite, entrez le corps du modèle en cliquant sur «Ajouter un corps personnalisé» et en sélectionnant «Créer un corps personnalisé».

Construire corps divi

Modifier la section # 1

Couleur de l’arrière plan

Once inside the template editor, you’ll notice a section. Open that section and change the background color to black.

  • Background Color: #000000
Configuration arriere plan section divi

Espacement

Move on to the section’s design tab and add some custom top and bottom padding.

  • Top Padding: 10px
  • Bottom Padding: 10px
Configuration espacement section divi

Ajoutez une nouvelle ligne

Structure Colonne

Continuons en ajoutant une nouvelle ligne à la section qui à la structure suivante :

Configuration mise en page module ligne

Espacement

Sans ajouter de module, ouvrons les réglages de la ligne et faisons quelques ajustement à l’espacement.

  • Utilisez Gouttière Personnalisée : Yes
  • Largeur Gouttière: 1
  • Largeur: 90%
  • Largeur maximale: 100%
Reglages espacement module ligne

Espacement

Retirez tout l’espacement interne haut et bas.

  • Marge Interne Haute: 0px
  • Marge Interne Basse: 0px
Reglages espacement module ligne divi

Ajouter le module Woo Cart Notice à la colonne

Contenu Dynamique

Le seul module dont on a besoin sur cette ligne et section est le module Woo Cart Notice. Assurez-vous que « Ce Produit » est sélectionné dans la section dynamique.

  • Product: Ce Produit
Reglages woo cart notice module divi

Couleur Arrière-plan

Ensuite, ouvrez les réglages du module et utilisez un arrière-plan transparent.

  • Couleur Arrière-plan : rgba(0,0,0,0)
Reglages woo cart module divi

Réglages Texte

Basculez à l’onglet « Design » et modifier la police du texte.

  • Police Texte: Karla
Reglages police divi module

Réglage Bouton

Terminez les réglages du plugin en définissant les réglages de style :

  • Use Custom Styles For Button: Yes
  • Taille Texte Bouton: 20px
  • Couleur Texte Bouton: #000000
  • Arrière-plan Bouton: #ffd623
  • Largeur Bordure Bouton: 0px
  • Bordure Arrondis Bouton : 0px
Reglages couleur module woo cart notice
  • Police Bouton: Oswald
  • Style Police Bouton: Majuscule
Reglage design couleur module woo cart notice
  • Marge Interne Haute: 20px
  • Marge Interne Basse: 20px
  • Marge Interne Gauche: 50px
  • Marge Interne Droite: 50px
Configuration design module woo cart notice

Ajouter la section #2

Arrière-plan dégradé

Ajoutez une autre section régulière en dessous de la précédente. Ouvrez ensuite les réglages et utilisez un arrière-plan dégradé comme suit :

  • Color 1: #000000
  • Color 2: #ffffff
  • Start Position:
    • Desktop: 30%
    • Tablet: 57%
    • Phone: 54%
  • End Position:
    • Desktop: 30%
    • Tablet: 57%
    • Phone: 54%
Reglage arriere plan module ligne divi

Espacement

Allons dans l’onglet Design et ajoutons une marge interne haute.

  • Top Padding: 150px
Configuration espacement module ligne divi

Ajouter une nouvelle ligne

Structure Colonne

Continuez en ajoutant de nouvelle ligne ayant la même structure qu’indiqué ci-après :

Configuration style ligne divi

Dimensionnement

Sans ajouter aucun module pour le moment, nous allons ouvrir les réglages et modifier l’espacement comme suit :

  • Utiliser Gouttières personnalisées : Oui
  • Espace Gouttières: 1
  • Largeur: 95%
  • Largeur Maximale: 2560px
  • Alignement Ligne: Centrer
Configuration goutiere module divi

Spacing

Nous allons retirer la marge interne supérieure également.

  • Top Padding: 0px
Configuration espacement module divi

Main Element

Et pour centrer le contenu de la colonne sur DeskTop, nous allons utiliser deux lignes code de CSS dans l’élément principale de la du module ligne.

Desktop:

display: flex;align-items: center;

Tablet & Phone:

display: block;
Reglages style module ligne divi

Ajouter le module Woo Image à la colonne 1

Contenu Dynamique

Il est temps d’ajouter des modules, nous allons commencer par le module Woo Images dans la colonne 1. Assurez-vous que « Ce produit » est sélectionné.

  • Product: This Product
Reglages module image produit woocommerce

Effet d’animation du défilement vertical

Nous ajoutons un mouvement subtil à l’image en utilisant l’effet de défilement de mouvement horizontal dans l’onglet avancé.

  • Activer le mouvement vertical: Oui
  • Décalage de départ:
    • Bureau: -4
    • Tablette et téléphone: 0
  • Décalage moyen: 0
  • Décalage de fin: 0
  • Déclenchement d’effet de mouvement: milieu de l’élément
Reglage module image divi

Ajouter le module de titre Woo à la colonne 2

Contenu dynamique

Dans la colonne 2, le premier module dont nous avons besoin est un module de titre Woo. Assurez-vous que «Ce produit» est sélectionné dans la zone de contenu dynamique.

  • Produit: Ce produit
grille des avantages du produit

Paramètres du texte du titre

Ensuite, accédez à l’onglet de conception et stylisez le texte du titre comme suit:

  • Police du titre: Oswald
  • Style de police du titre: majuscule
  • Couleur du texte du titre: # ffd623
  • Taille du texte du titre: 80px
Reglage design module titre divi

Espacement

Complétez le module de titre Woo en ajoutant des marges gauche et droite.

  • Marge gauche: 5%
  • Marge droite: 5%
Reglage module titre divi

Ajouter le module de description Woo à la colonne 2

Contenu dynamique

Passons au module suivant, qui est un module de description Woo. Nous utilisons pour cela le contenu dynamique suivant:

  • Produit: Ce produit
  • Type de description: Description courte
Reglages module description produit

Paramètres de texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence:

  • Text Font: Karla
  • Couleur du texte: #dbdbdb
  • Taille du texte: 17 px (ordinateur de bureau et tablette), 15 px (téléphone)
  • Hauteur de la ligne de texte: 1,9 em
Reglage couleur module description divi

Dimensionnement

Ensuite, modifiez la largeur sur différentes tailles d’écran.

  • Largeur: 59% (ordinateur de bureau), 82% (tablette et téléphone)
Reglage largeur module resumé divi

Espacement

Complétez le module de description Woo en ajoutant des valeurs de marge personnalisées dans les paramètres d’espacement.

  • Marge supérieure: 50px
  • Marge inférieure: 100px
  • Marge gauche: 5%
  • Marge droite: 5%
Module description produit divi

Ajouter le module Blurb à la colonne 2

Contenu dynamique

Pour afficher les avantages du produit que nous avons ajoutés dans la première partie de ce didacticiel, nous allons utiliser les modules Blurb. Ajoutez un premier module Blurb et utilisez le contenu dynamique du premier avantage produit pour le titre et le corps.

  • Title: Benefit Title 1
  • Body: Benefit Description 1
Réglage texte module résumé divi

Upload Image

Upload an image or use an icon of your choice next. You can find the ones we’ve used throughout this tutorial in the download folder you were able to download at the beginning of this tutorial.

Image module résumé divi configuration

Image/Icon Settings

Move on to the module’s design tab and change the image/icon settings as follows:

  • Image/Icon Placement: Top
  • Image/Icon Alignment: Left
Module réglage divi

Title Text Settings

We’re modifying the title text settings next.

  • Title Font: Oswald
  • Title Font Style: Uppercase
  • Title Text Size: 25px
Configurer police module résumé divi

Body Text Settings

Along with the body text settings.

  • Body Font: Karla
  • Taille du corps du texte: 17 px (ordinateur de bureau et tablette), 15 px (téléphone)
  • Hauteur de la ligne du corps: 1,9 em
Configurer texte module résumé div i

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et modifiez les largeurs. Il est important d’utiliser une largeur principale inférieure à 50%, cela nous permettra de montrer deux modules Blurb côte à côte dans les prochaines étapes.

  • Largeur de l’image: 25%
  • Largeur: 49%
Configurer dimensionnement module résumé divi

Espacement

Nous ajouterons également des espaces autour du module Blurb en utilisant des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 8%
  • Rembourrage inférieur: 8%
  • Rembourrage gauche: 8% (ordinateur de bureau et tablette), 2% (téléphone)
  • Rembourrage droit: 8% (ordinateur de bureau et tablette) 2% (téléphone)
Configure espacement module résumé divi

Élément Principal

Maintenant, nous allons nous assurer que le module Résumé affiche le texte les uns à côté des autres, en deux étapes. Premièrement, nous allons nous assurer que la largeur du module est inférieure à 50% (comme nous l’avons fait dans l’étape précédente). Ensuite, nous allons utiliser la propriété sur la ligne. Nous allons ajouter cette propriété CSS sur l’élément principale dans la section avancé.

display: inline-block;
Ajouter code css module divi

Clonez le module résumé 3 fois

Une fois que vous avez terminé le premier module Blurb, vous pouvez le cloner trois fois. Vous remarquerez automatiquement que les modules Blurb apparaissent dans une grille.

Nom produit divi section

Modifier les images du module Blurb

Modifiez l’image dans chaque module Blurb en double. Vous pouvez les trouver dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

Image module résumé divi

Modifier le contenu dynamique du module Blurb

Modifiez également le contenu dynamique de chaque module Blurb en double.

  • Titre: Titre de la prestation (2,3 ou 4)
  • Corps: description des avantages (2,3 ou 4)
Réglaes module résumé divi

Ajouter des bordures aux modules Blurb individuellement

Paramètres de bordure du module 1 de Blurb

Maintenant, pour terminer la conception de notre grille, nous allons ajouter des bordures aux modules Blurb à un niveau individuel. Ouvrez le premier module Blurb et utilisez une bordure droite.

  • Largeur de bordure droite: 1px
  • Couleur de la bordure droite: # ffd623
Configuration bordure arrondi module résumé divi

Ajoutez également une bordure inférieure au premier module Blurb.

  • Largeur de bordure inférieure: 1px
  • Couleur de la bordure inférieure: # 000000
Configurer la marge inférieure divi
Paramètres de bordure du module 2 de Blurb

Ensuite, ouvrez le deuxième module Blurb et utilisez une bordure inférieure.

  • Largeur de bordure inférieure: 1px
  • Couleur de la bordure inférieure: # 000000
Configuration border module résumé divi
Paramètres de bordure du module 3 de Blurb

Complétez la conception de la grille en ajoutant une bordure droite au troisième module Blurb.

  • Largeur de bordure droite: 1px
  • Couleur de la bordure droite: # ffd623
grille des avantages du produit

Ajouter Woo Ajouter au panier Module à la colonne 2

Contenu dynamique

Le dernier module dont nous avons besoin dans notre conception est un module Woo Add to Cart. Assurez-vous que «Ce produit» est sélectionné dans la zone de contenu dynamique.

  • Produit: Ce produit
Réglages module add to card divi

Paramètres des champs

Passez à l’onglet de conception suivant et modifiez les paramètres des champs.

  • Couleur d’arrière-plan des champs: #ffffff
  • Couleur du texte du champ: # 000000
Configurer style couleur module add to cart divi
  • Champs arrondis: 0px (tous les coins)
  • Largeur de bordure inférieure des champs: 1px
  • Couleur de la bordure inférieure des champs: # 000000
Configurer espacement section divi

Paramètres des boutons

Ensuite, stylisez le bouton en conséquence:

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 20 pixels
  • Couleur du texte du bouton: # 000000
  • Couleur d’arrière-plan du bouton: # ffd623
  • Largeur de bordure de bouton: 0px
  • Rayon de bordure du bouton: 0px
Configurer design bouton divi
  • Police du bouton: Oswald
  • Style de police du bouton: majuscule
Configurer bouton divi
  • Rembourrage supérieur: 20px
  • Rembourrage inférieur: 20px
  • Rembourrage gauche: 50px
  • Rembourrage droit: 50px
Configurer dimensionnement module divi

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de marge personnalisées.

  • Marge supérieure: 100px
  • Marge gauche: 5%
Configurer espacement divi

3. Enregistrer les modifications du générateur de thème et prévisualiser le résultat

Une fois que vous avez terminé la conception du modèle de page de produit, vous pouvez enregistrer toutes vos modifications de Theme Builder et afficher le résultat sur vos produits!

Enregistrer la conception divi
Sauvegarder les modifications divi

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Résultat demo

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec votre prochain modèle de page de produit Divi. Plus précisément, nous vous avons montré comment inclure une grille d’avantages produit dynamique pour ajouter des avantages supplémentaires à votre page produit. Nous avons créé ce tutoriel en utilisant Divi en combinaison avec le plugin Advanced Custom Fields. Vous avez également pu télécharger gratuitement le fichier JSON! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Comment implémenter le mode sombre sur votre site avec Divi

Comment implémenter le mode sombre sur votre site avec Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi : le thème WordPress le plus facile à utiliser

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] TÉLÉCHARGER [/vcex_button][/vc_column][/vc_row]

Le mode sombre continue de gagner en popularité en tant qu’option pratique permettant aux utilisateurs de découvrir le Web avec moins de pression sur les yeux. Avouons-le, nous avons tous tendance à passer plus de temps à regarder les écrans que nous ne le devrions probablement, donc tout confort supplémentaire à l’expérience utilisateur (comme le mode sombre) peut aller très loin. 

Les systèmes d’exploitation, les programmes et les navigateurs incluent généralement des capacités intégrées en mode sombre, mais certains développeurs la portent à un autre niveau en incluant une expérience en mode sombre personnalisée pour leur site Web. L’idée est de prendre plus de contrôle sur l’apparence de leur site Web en mode sombre sans avoir à faire de compromis sur la marque et / ou le design.

Dans ce tutoriel, nous allons vous montrer comment créer un basculement de mode sombre personnalisé dans Divi à partir de zéro sans plugin. Avec cette fonctionnalité de bascule du mode sombre, vous aurez le contrôle sur la conception du mode sombre et aurez une meilleure expérience utilisateur adaptée à votre marque.

Commençons!

Aperçu

Voici un aperçu de la conception que nous allons construire dans ce tutoriel.

Voici la bascule de mode sombre personnalisée que nous allons créer.

Bascule mode sombre

Et voici l’avant et l’après pour le mode sombre appliqué à l’une de nos dispositions prédéfinies.

Et voici la bascule du mode sombre ajoutée à un en-tête global. Remarquez comment le mode clair / sombre reste lorsque vous naviguez sur le site.

Partie 1: Construire le basculement du mode sombre

Dans cette première partie du tutoriel, nous allons construire une bascule en mode sombre avec une page dans Divi. Une fois la bascule créée avec le code, vous pourrez l’enregistrer dans la bibliothèque Divi et l’ajouter à n’importe quel endroit de votre site Web.

Pour commencer, ajoutez une ligne d’une colonne à la section par défaut lors de la construction à partir de zéro avec Divi sur le front-end.

Section divi

Ajouter Module Résumé

Pour construire la bascule personnalisée, nous allons concevoir un module Blurb avec un peu de CSS personnalisé.

Ajoutez un nouveau module de texte de présentation à la ligne.

Contenu

Retirez le contenu factice par défaut pour le titre et le corps. Ajoutez ensuite l’icône carrée à la place de l’image.

Module résumé divi

Conception

Accédez aux paramètres de conception et mettez à jour les éléments suivants:

  • Couleur de l’icône: # 666666
  • Alignement image / icône: gauche
  • Taille de la police de l’icône: 22 pixels
Configuration icone divi
  • Largeur: 50px
  • Alignement du module: centre
  • Hauteur: 25px
Configuration dimensionnement divi
  • Marge: 0px bas
  • Coins arrondis: 4px
  • Largeur de bordure: 2px
  • Couleur de la bordure: # 666666
Configuration bordure divi

CSS personnalisé

Une fois la conception en place, passez à l’onglet avancé. Sous le CSS personnalisé, ajoutez le CSS personnalisé suivant à l’élément principal afin de vous assurer que le débordement n’est pas masqué par le style des coins arrondis.

overflow: visible !important;

Ajoutez ensuite le CSS personnalisé suivant à l’élément After:

content: "light";position: absolute;left: -35px;top:0px;

Cela ajoute une étiquette au module Blurb que nous passerons de «clair» à «foncé» au clic.

Bouton bascule divi

Conception du texte du corps

Étant donné que le texte du pseudo-élément après hérite des styles de texte du corps, nous pouvons ajouter les styles de texte du corps à l’aide des options Divi comme suit:

  • Body Font: Roboto
  • Couleur du texte du corps: # 666666
  • Taille du corps du texte: 13px
  • Espacement des lettres du corps: 1px
Police bascule bouton

Ajout de code personnalisé avec un module de code

Pour ajouter le code nécessaire (CSS / JQuery) pour faire fonctionner la bascule du mode sombre, nous utiliserons un module de code.

Créez un nouveau module de code sous le module Blurb dans la même colonne.

Ajouter module code

Collez ensuite le code suivant dans la zone de code:

<style>/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}</style><script>function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});</script>

Ajout des classes CSS personnalisées

Le code personnalisé nécessite que vous ayez une classe CSS personnalisée ajoutée au module Blurb ou basculez. Cela permettra au texte de présentation de déclencher le basculement du mode sombre et la fonctionnalité au clic.

Classe de module Blurb

Ouvrez les paramètres du module Blurb et ajoutez une classe CSS personnalisée comme suit:

  • Classe CSS: et-dark-toggle
Code css divi

Classe capable de mode sombre

Nous devons également ajouter une classe CSS personnalisée à chaque élément Divi que nous voulons avoir la capacité de mode sombre. Une fois que l’élément a la classe CSS, cet élément héritera du CSS personnalisé «mode sombre» dans le code que nous avons ajouté une fois le mode sombre activé. Cette méthode nous donne plus de contrôle sur notre conception en mode sombre, car certains éléments peuvent ne nécessiter aucun style en mode sombre.

Pour commencer, nous pouvons ajouter le mode sombre à la section contenant notre bascule de mode sombre.

Ouvrez les paramètres de section et ajoutez la classe CSS suivante:

  • CSS Class: et-dark-mode-capable
Selecteur css section divi

Partie 2: Ajout de fonctionnalités en mode sombre à une page Divi

Maintenant que nous avons le code et les classes CSS en place, nous sommes prêts à appliquer la fonctionnalité et la conception du mode sombre à une page entière dans Divi. Pour ce faire, nous allons utiliser notre mise en page Premade de la page de destination de l’application mobile .

Pour ajouter la disposition, ouvrez le menu des paramètres en bas du générateur visuel et cliquez sur l’icône Ajouter une nouvelle disposition.

Sélectionnez ensuite la mise en page de la page de destination de l’application mobile dans l’onglet Mises en page prédéfinies.

Assurez-vous que l’option «Remplacer le contenu existant» n’est PAS sélectionnée. Vous ne voulez pas effacer la section avec la bascule du mode sombre.

Choisir mise en page divi 1

Étant donné que le style en mode sombre ne s’appliquera qu’aux éléments avec la classe CSS «capable et-dark-mode», nous pouvons choisir d’ajouter à la page de différentes manières.

  1. Nous pouvons ajouter la classe CSS à chaque élément de la page individuellement.
  2. Nous pourrions étendre la classe CSS à des éléments sur toute la page (ce serait plus rapide que de le faire manuellement). Par exemple, nous pourrions ouvrir les paramètres de section pour la section supérieure et étendre la classe CSS pour cette section à toutes les sections de la page.
  3. Nous pouvons ajouter la classe CSS aux valeurs par défaut globales de l’élément. Cela appliquera la classe CSS à tous les éléments à l’échelle du site, ajoutant une capacité de mode sombre sur l’ensemble du site. Par exemple, nous pourrions ouvrir les paramètres de section et cliquer sur l’icône par défaut globale pour modifier les valeurs par défaut de la section globale. Ensuite, nous pouvons ajouter la classe CSS et l’enregistrer en tant que classe CSS pour toutes les sections du site.

Ajout de la classe CSS aux éléments de page

Pour cet exemple, nous allons mettre à jour les éléments de la page en ajoutant la classe CSS aux valeurs par défaut globales aux sections et modules de texte. Et nous ferons également quelques ajouts aux autres éléments de la page au fur et à mesure.

Toutes les sections

Pour ajouter la classe CSS à toutes les sections, ouvrez les paramètres de la section supérieure qui contient la bascule du mode sombre. Modifiez ensuite les valeurs par défaut globales de la section et ajoutez la classe CSS suivante aux valeurs par défaut globales de la section:

  • CSS Class: et-dark-mode-capable

Toutes les sections spécialisées

Ajoutez également la classe CSS aux valeurs par défaut globales de la section spécialisée.

Ajouter a toutes les sections spécialisés

Modules de texte

Ensuite, ouvrez les paramètres de l’un des modules de texte sur la page et ajoutez la même classe CSS aux valeurs par défaut globales du texte.

Ajouter au modules textes

Pour tester le résultat, passez à la page en direct et cliquez sur la bascule du mode sombre en haut de la page.

Voici à quoi devrait ressembler la page en mode clair.

Modeclair

Et voici à quoi devrait ressembler la page en mode sombre.

Mode sombre

Ressources Supplémentaires

Voici d’autres ressources qui pourraient vous intéresser.

Dernières pensées

Équiper votre site Divi d’une bascule de mode sombre personnalisée peut être un excellent moyen de booster l’expérience utilisateur et de créer un tout nouveau design qui à la fois plaît et soulage l’œil. J’espère que cela vous sera utile.