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.
Notez le titre du site et le slogan en haut au milieu de l’en-tête qui est affiché dynamiquement.
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.
Une fois terminé, le modèle d’en-tête global sera disponible dans Divi Theme Builder.
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.
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.
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.
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.
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).
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.
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 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.
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
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
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.
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%
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.
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!
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.
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.
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
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
Espacement
Ajoutez ensuite une marge supérieure et inférieure personnalisée.
Marge supérieure: 200px
Marge inférieure: 200px
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.
Paramètres de texte H2
Passez à l’onglet de conception du module et modifiez les paramètres de texte H2 comme suit:
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)
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.
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
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
Ligne
Modifiez ensuite la couleur de ligne du module.
Couleur de la ligne: # 000000
Dimensionnement
Ensuite, apportez quelques modifications aux paramètres de dimensionnement.
Poids du diviseur: 3px
Largeur: 28%
Espacement
Nous ajoutons également une marge supérieure.
Marge supérieure: 10px
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
Débordements
Cachez aussi les débordements.
Débordement horizontal: caché
Débordement vertical: caché
Ajouter une nouvelle ligne
Structure de colonne
Continuez en ajoutant une première ligne en utilisant la structure de colonnes suivante:
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
Espacement
Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.
Rembourrage supérieur: 0px
Rembourrage inférieur: 0px
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
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%
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)
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
Ligne
Modifiez ensuite la couleur de ligne du module.
Couleur de la ligne: # 000000
Dimensionnement
Apportez également des modifications aux paramètres de dimensionnement.
Poids du diviseur: 3px
Largeur: 50%
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.
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.
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
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.
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
Button Font: Questrial
Poids de la police du bouton: gras
Espacement
Ajoutez également un rembourrage personnalisé.
Rembourrage supérieur: 50px
Rembourrage inférieur: 50px
Rembourrage gauche: 100px
Rembourrage droit: 100px
Position
Et repositionnez le bouton en conséquence:
Position: Absolute
Emplacement: en bas à gauche
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.
Changer tout le contenu
Assurez-vous de modifier tout le contenu dans des lignes en double.
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
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
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
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
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
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
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.
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.
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.
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)
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é
Ajouter la ligne # 1
Structure de colonne
Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante:
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
Espacement
Nous ajoutons également un rembourrage supérieur et inférieur personnalisé.
Rembourrage supérieur: 100px
Rembourrage inférieur: 100px
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.
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)
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
Ligne
Apportez ensuite quelques modifications aux paramètres de ligne.
Couleur de la ligne: # edf000
Style de ligne: solide
Line Position: Top
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
Ajouter une ligne # 2
Structure de colonne
À la rangée suivante! Utilisez la structure de colonnes suivante:
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%
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)
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.
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
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
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.
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.
Supprimer l’image
Ensuite, supprimez l’image. Nous utilisons à la place l’image d’arrière-plan de la colonne.
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
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%
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
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
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%
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)
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
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
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.
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:
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 .
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.
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.
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.
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.
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 .
Ensuite, sélectionnez-en un dans la liste déroulante.
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.
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.
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 .
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.
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.
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 .
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.
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 .
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.
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).
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.
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.
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.
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.
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.
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.
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 .
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.
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 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
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
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.
Remplissez les champs Avantages du produit
Et remplissez les avantages du produit.
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».
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.
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é».
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
Espacement
Move on to the section’s design tab and add some custom top and bottom padding.
Top Padding: 10px
Bottom Padding: 10px
Ajoutez une nouvelle ligne
Structure Colonne
Continuons en ajoutant une nouvelle ligne à la section qui à la structure suivante :
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%
Espacement
Retirez tout l’espacement interne haut et bas.
Marge Interne Haute: 0px
Marge Interne Basse: 0px
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
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)
Réglages Texte
Basculez à l’onglet « Design » et modifier la police du texte.
Police Texte: Karla
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
Police Bouton: Oswald
Style Police Bouton: Majuscule
Marge Interne Haute: 20px
Marge Interne Basse: 20px
Marge Interne Gauche: 50px
Marge Interne Droite: 50px
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%
Espacement
Allons dans l’onglet Design et ajoutons une marge interne haute.
Top Padding: 150px
Ajouter une nouvelle ligne
Structure Colonne
Continuez en ajoutant de nouvelle ligne ayant la même structure qu’indiqué ci-après :
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
Spacing
Nous allons retirer la marge interne supérieure également.
Top Padding: 0px
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;
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
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
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
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
Espacement
Complétez le module de titre Woo en ajoutant des marges gauche et droite.
Marge gauche: 5%
Marge droite: 5%
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
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
Dimensionnement
Ensuite, modifiez la largeur sur différentes tailles d’écran.
Largeur: 59% (ordinateur de bureau), 82% (tablette et téléphone)
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%
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
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/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
Title Text Settings
We’re modifying the title text settings next.
Title Font: Oswald
Title Font Style: Uppercase
Title Text Size: 25px
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
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%
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)
É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;
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.
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.
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)
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
Ajoutez également une bordure inférieure au premier module Blurb.
Largeur de bordure inférieure: 1px
Couleur de la bordure inférieure: # 000000
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
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
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
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
Champs arrondis: 0px (tous les coins)
Largeur de bordure inférieure des champs: 1px
Couleur de la bordure inférieure des champs: # 000000
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
Police du bouton: Oswald
Style de police du bouton: majuscule
Rembourrage supérieur: 20px
Rembourrage inférieur: 20px
Rembourrage gauche: 50px
Rembourrage droit: 50px
Espacement
Et complétez les paramètres du module en ajoutant des valeurs de marge personnalisées.
Marge supérieure: 100px
Marge gauche: 5%
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!
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.
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.
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.
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.
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.
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
Largeur: 50px
Alignement du module: centre
Hauteur: 25px
Marge: 0px bas
Coins arrondis: 4px
Largeur de bordure: 2px
Couleur de la bordure: # 666666
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:
Cela ajoute une étiquette au module Blurb que nous passerons de «clair» à «foncé» au clic.
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
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.
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
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
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.
É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.
Nous pouvons ajouter la classe CSS à chaque élément de la page individuellement.
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.
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.
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.
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.
Et voici à quoi devrait ressembler la page en mode sombre.
Ressources Supplémentaires
Voici d’autres ressources qui pourraient vous intéresser.
É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.
Confidentialité et cookies : ce site utilise des cookies. En continuant à naviguer sur ce site, vous acceptez que nous en utilisions.
Pour en savoir plus, y compris sur la façon de contrôler les cookies, reportez-vous à ce qui suit :
Politique relative aux cookies
