Comment créer des designs uniques en utilisant des pseudo-éléments avant et après dans Divi
Publié: 2019-04-14En tant que concepteurs de sites Web, nous recherchons toujours de nouvelles façons d'ajouter de l'individualité aux sites Web que nous créons. Divi offre des possibilités infinies de produire des mises en page uniques, mais il y a toujours de petits ajouts que nous pouvons inclure pour rassembler un design. C'est là que les pseudo-éléments CSS sont vraiment utiles.
Que sont les pseudo-éléments CSS ?
En termes simples, un pseudo-élément CSS peut être utilisé pour styliser des parties spécifiques d'un élément. Il existe cinq types de pseudo-éléments qui font des choses différentes. Pour les besoins de cet article, nous examinerons ::avant et ::après.
Ces deux pseudo-éléments sont utilisés pour insérer quelque chose avant ou après le contenu d'un élément. Ceci est particulièrement utile car nous pouvons les utiliser pour ajouter des éléments visuels supplémentaires aux images existantes, au texte et à toute autre chose !
Alors pourquoi utiliserions-nous ces pseudo éléments ? Avant et après sont parfaits pour déverrouiller les possibilités de conception sans avoir besoin d'ajouter plus d'éléments ou de modules. De même, ils sont utiles pour ajouter des éléments supplémentaires sans avoir à toucher aux modèles HTML ou aux fichiers de thème principal.
Comment utilisez-vous les éléments avant et après avec Divi ?
Si tout cela semble un peu confus jusqu'à présent, ne vous inquiétez pas ! Si nous devions utiliser ::before et ::after lors de l'écriture du code CSS à partir de zéro, cela ressemblerait un peu à ceci :
Imaginez que nous ayons une ligne de texte avec la classe « text-example » – le CSS pour styliser et personnaliser cette ligne serait :
.text-example {*This is where you add the styles*}Maintenant, si vous vouliez ajouter et styliser un élément ::before ou ::after, le CSS ressemblerait à ceci :
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}Heureusement, Divi offre un accès facile aux pseudo-éléments ::before et ::after avec beaucoup moins de tracas. En fait, si vous avez déjà ouvert l'onglet "Avancé" pour n'importe quel module pour ajouter du code CSS personnalisé, vous aurez vu les domaines auxquels nous faisons référence.
Ces boîtes fournissent un raccourci rapide pour ajouter et personnaliser du contenu avant et après tout module Divi existant et nous pouvons les utiliser pour créer des designs vraiment flexibles et intéressants.
Aperçu
Voici ce que nous allons créer dans ce tutoriel :
Exemple 1
Exemple 2
Exemple 3
Commencer
Pour ce tutoriel, nous avons juste besoin d'une copie du thème Divi et d'une ardoise vierge. Pour commencer, nous allons créer une nouvelle page et, après avoir ajouté un titre de page, cliquez sur le constructeur visuel.
Nous sommes maintenant prêts à commencer !
Exemple 1 : modules de présentation numérotés à l'aide de pseudo-éléments
Le texte de présentation est probablement l'un des modules Divi les plus flexibles à votre disposition. Dans ce cas, nous utiliserons des pseudo-éléments pour ajouter des nombres avant chaque texte de présentation afin de créer une section étape par étape « comment ça marche ». Nous allons également ajouter une forme de flèche à droite pour indiquer le processus.
Ce que nous allons créer :
Bien que cette conception fonctionne avec n'importe quelle conception de présentation, nous avons emprunté la section présentation à la mise en page de l'agence Web. Si vous souhaitez les utiliser comme point de départ, vous pouvez accéder à la page de destination de l'agence Web en créant une nouvelle page et en accédant au générateur frontal.
Lorsque votre page se charge, vous aurez la possibilité d'utiliser une mise en page prédéfinie, l'une de vos mises en page enregistrées ou de créer à partir de zéro. Sélectionnez une mise en page prédéfinie et utilisez la barre de recherche pour trouver les mises en page « Agence Web ». La section de présentation de ce didacticiel se trouve sur la page de destination.
Une fois chargé, la seule différence entre la mise en page prédéfinie et notre exemple est que nous avons modifié l'arrière-plan de chaque texte de présentation, la couleur du titre et de la police du texte et ajouté un peu de remplissage.
Une fois que vous avez modifié ces paramètres sur un texte de présentation, vous pouvez cliquer avec le bouton droit sur le module et utiliser les « Styles étendus » pour les appliquer aux trois autres.
Maintenant que nous avons personnalisé nos quatre modules de présentation pour qu'ils ressemblent à nos souhaits, il est temps d'ajouter du code pour créer l'élément numéroté. Cependant, pour que cette conception fonctionne, nous devons d'abord ajouter une ligne de css à la boîte css personnalisée de l'élément principal.
overflow: visible;
Cela permettra simplement à tous les éléments que nous créons dans les prochaines étapes d'être visibles partout où ils chevauchent les bords de notre module de présentation.
Une fois que vous avez fait cela, ouvrez les options du module et accédez à l'onglet "Avancé". Dans la zone "avant", ajoutez cet extrait CSS :
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
Une fois que vous avez ajouté cet extrait de code, vous verrez le numéro apparaître en haut à gauche du module de présentation. Vous pouvez modifier la position du numéro en modifiant les lignes « gauche : » et « haut : » ou modifier la couleur et la taille de la police du numéro dans cet extrait CSS.
Une fois que vous avez terminé cela pour le premier module, accédez aux trois nouveaux modules de présentation et modifiez la ligne « content : » en :
contenu : '2.' ;
contenu : '3.' ;
…etc.
Maintenant que nous avons trié nos nombres, nous devons ajouter un peu de css pour créer la forme de la flèche.
Ouvrez chaque module et entrez ceci dans la zone Après dans la zone CSS personnalisée :
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Maintenant, vos quatre textes de présentation devraient ressembler à ceci :
Exemple 2. Ajout de formes uniques à vos modules existants
Cette conception repose sur de petits extraits de code simples mais efficaces qui sont ajoutés à la fois aux zones CSS personnalisées ::before et ::after dans chaque module de texte.
La beauté de l'utilisation de pseudo-éléments ici est que nous pouvons intégrer des formes et des objets uniques à nos modules existants sans avoir besoin d'ajouter d'éléments ou de modules supplémentaires à notre page. Parce que ces pseudo-éléments sont contenus dans nos modules existants, ils n'ajoutent pas d'espace supplémentaire à nos conceptions et restent beaux sur tous les appareils.
Ce que nous allons créer :
Pour créer la mise en page initiale, nous devons ajouter une section régulière avec une rangée de trois colonnes, définie sur la largeur par défaut. Une fois cela fait, ajoutez un module de texte à l'une des nouvelles colonnes.
Encore une fois, vous pouvez styliser ce module de texte comme vous le souhaitez, mais si vous suivez, voici les étapes pour réaliser cette conception :
Ouvrez les options du module de texte et ajoutez votre contenu textuel et une image d'arrière-plan ou une couleur d'arrière-plan selon vos besoins. Nous avons utilisé une image d'arrière-plan normale avec un dégradé transparent sur le dessus :
Ensuite, configurez les options de conception suivantes :
1.Rembourrage supérieur : 120px et Rembourrage inférieur : 120px
2. Alignement du texte : centre et couleur du texte : #ffffff
3. Alignement du titre : centre et couleur du titre : #f5ee5d
Maintenant que nous avons tous les aspects visuels en place pour votre premier module de texte, il est temps d'ajouter le CSS pour que la magie opère. Dans l'onglet Avancé du module de texte, ajoutez le code suivant dans la case « avant » :
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
Et puis ajoutez le code suivant dans la case « après » :
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
Une fois que vous avez ajouté ces extraits de code au module, vous verrez nos nouvelles formes fantaisie ajoutées.
Si vous vous demandez ce que fait ce CSS, c'est en fait assez simple. Tout ce que nous faisons, c'est créer un carré transparent qui est positionné à 20px du haut et de la gauche (et du bas et de la droite) du module de texte. Nous ajoutons ensuite deux bordures à ces carrés pour créer l'effet de flèche.
Lorsque vous êtes satisfait de l'apparence de ce premier module de texte, copiez-le simplement et collez-le pour remplir les autres colonnes et modifiez le contenu du texte, l'arrière-plan et les styles en conséquence.
Le bonus de cette méthode est qu'elle fonctionnera avec à peu près n'importe quel module Divi avec un peu de personnalisation. Si vous voulez être plus sophistiqué, essayez d'ajouter du CSS supplémentaire pour faire pivoter, incliner et personnaliser encore plus les éléments ::before et ::after. S'amuser!
Exemple 3. Ajout d'icônes et de descriptions aux titres d'onglet
Dans cette conception, nous profiterons de la possibilité d'ajouter une icône d'image avant certains contenus existants ainsi qu'une petite description textuelle ci-dessous. C'est parfait pour personnaliser le module des onglets Divi un peu plus loin que vous ne le pouvez normalement.
Remarque – Bien que l'ajout de contenu via CSS soit idéal pour la conception, il n'est pas facilement indexé par les moteurs de recherche (bien que Google indexe en fait le contenu CSS et Javascript, cela prend beaucoup plus de temps et n'est pas fiable à l'heure actuelle. Les moteurs de recherche comme Bing et DuckDuckGo le font pas du tout indexer ce contenu). Pour cette raison, votre contenu doit être minimal et vous ne devez pas vous y fier pour influencer votre potentiel de classement.
Ce que nous allons créer :
Tout d'abord, nous devons ajouter notre section standard et une ligne à 1 colonne, suivies du module d'onglets Divi lui-même. Dans le module des onglets, nous n'avons qu'à ajouter nos titres et notre contenu à chaque onglet car nous gérerons les styles dans les prochaines étapes.
Une fois que notre contenu est en place, nous devons commencer à ajouter du contenu à l'élément ::before du module. Étant donné que nous ne pouvons pas ajouter de CSS personnalisé à des onglets spécifiques à l'aide de la méthode que nous avons suivie ci-dessus, nous devrons procéder de manière légèrement différente.
Ouvrez les options du module d'onglets et dans l'onglet Avancé, donnez au module la classe « fancy-tabs ».
Une fois que vous avez ajouté cette classe CSS, nous devons faire un peu de préparation. Pour ajouter des icônes ou des images à vos titres d'onglets, nous devons évidemment les ajouter à WordPress. Accédez à l'onglet Médias dans le tableau de bord WordPress et téléchargez les icônes que vous avez choisies comme vous le feriez normalement.
Une fois vos images téléchargées, nous devons cliquer sur chacune d'elles et copier l'URL que WordPress a générée pour nous. Parcourez chacune de vos images et copiez et collez ces URL dans un document ou dans l'application de notes que vous avez choisie.
Avec les URL de vos images choisies à portée de main, accédez à vos options de thème Divi dans le menu Divi du tableau de bord WordPress.
Au bas de cette page, vous verrez une boîte dans laquelle vous pouvez ajouter votre propre CSS personnalisé. C'est dans cette boîte que nous collerons du code CSS.
L'extrait suivant ajoutera les images au-dessus de chaque titre d'onglet. Copiez et collez simplement cet extrait dans la zone CSS personnalisée et remplacez le contenu entre (et y compris) les astérisques (par exemple * Remplacez-le par l'URL de votre première image *) par les URL que vous avez notées précédemment.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
Si vous revenez à la page avec votre module d'onglets activé, vous devriez maintenant voir que les images ont été ajoutées au-dessus de chaque titre – succès !
Et si vous ajoutiez des descriptions ? Heureusement, c'est aussi assez simple. Juste en dessous du code que vous venez de copier dans votre boîte CSS personnalisée, collez ce qui suit :
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
Comme auparavant avec vos images, vous devrez remplacer « ceci est une description » par votre propre contenu. En revenant à la page avec votre module d'onglets, vous verrez que nous avons maintenant aussi des descriptions fantaisistes !
Enfin, il suffit d'appliquer un peu plus de CSS pour obtenir le design complet présenté ci-dessus. Encore une fois, copiez l'extrait suivant dans la même boîte CSS personnalisée :
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
Ce code centre le texte et les images de vos onglets et augmente la largeur de vos onglets pour couvrir l'ensemble du module.
Nous avons également ajouté du CSS pour garantir que les onglets s'affichent correctement sur tous les appareils. Si vous préférez que vos onglets ne soient pas sur toute la largeur et ne soient pas empilés sur mobile, nous devrons revenir en arrière et entourer le code CSS d'origine dans une requête multimédia. Cela signifie que sur les appareils de la taille d'une tablette et plus larges, nous ajoutons les descriptions et les icônes, mais sur les appareils plus petits, nous reviendrons au style par défaut de Divi.
Pour ce faire, copiez le code CSS modifié ci-dessous et collez-le dans votre zone CSS personnalisée dans le panneau d'options du thème Divi :
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
Ajouter plus d'onglets
Dans ce cas, nous avons créé un module d'onglets qui comprend 2 onglets différents, mais dans la pratique, nous avons parfois besoin de plus que cela. Si vous êtes dans une situation où vous cherchez à créer plus de 2 onglets, nous devrons modifier le code que vous venez d'ajouter.
Comme vous pouvez le voir sur l'extrait, Divi attribue automatiquement une classe à chaque titre d'onglet – le premier commençant par 0 (.et_pb_tab_0), augmentant de 1 à chaque fois (.et_pb_tab_1, .et_pb_tab_2 et ainsi de suite). Nous avons déjà pris soin des deux premiers onglets, donc lors de l'ajout d'autres, nous pouvons simplement copier et coller une section du code pour chaque nouvel onglet :
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
et changez le numéro de la classe (.et_pb_tab_0) en 2, 3, 4 etc. Vous devrez également faire la même chose pour vos descriptions.
La dernière modification que nous devons apporter est d'ajuster une ligne supplémentaire de CSS. Prenez le nombre de vos onglets et divisez-le par 100. Notez ce nombre et accédez à la section suivante dans votre CSS personnalisé :
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
et échangez les 50% avec votre réponse. Cela garantira que vos onglets sont également espacés sur toute la largeur du module.
Par exemple, si vous créez un troisième onglet, le code CSS supplémentaire dont vous avez besoin serait le suivant :
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
En terminant
Et voilà, trois excellentes façons d'utiliser les éléments CSS ::before et ::after pour créer de nouvelles possibilités de conception. Espérons que ce guide vous inspirera pour explorer comment vous pouvez utiliser des pseudo-éléments dans vos futures créations – les opportunités sont vraiment infinies !