Pour tout propriétaire de site web, il est assez souvent important de se savoir distingué de la concurrence. Divi offre d’innombrables possibilités de produire des mises en page uniques, mais nous pouvons toujours, en creusant unpeu plus, créer quelque chose de plus unique. C’est ici que les pseudo-éléments CSS sont vraiment utiles.
Qu’entends-t-on par pseudo-éléments CSS ?
En termes simples, un pseudo-élément CSS peut être utilisé pour donner du style à 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 n’allons parler que de : before et : after.
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, textes et autres éléments existants !
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 les modèles html ou les fichiers de thème principaux.
Comment utilisez-vous les éléments avant et après avec Divi?
Si tout cela semble un peu déroutant jusqu’à présent, ne vous inquiétez pas ! Si nous utilisions :: before et :: after pour écrire le code CSS à partir de rien, cela ressemblerait un peu à ça:
Imaginons que nous ayons une ligne de texte avec la classe «exemple-texte» – le CSS pour styliser et personnaliser cette ligne serait:
.exemple-texte {*vous ajouter votre style ici*}
Maintenant, si vous vouliez ajouter et styler un élément :: before ou :: after, le CSS ressemblerait à ceci:
.exemple-texte::before {*vous ajouter votre style avant l'élément ici*}
.exemple-texte::after {*vous ajouter votre style après l'élément ici*}
Heureusement, Divi offre un accès aisé aux pseudo-éléments :: before et :: after avec beaucoup moins de tracas. En fait, si vous avez déjà ouvert l’onglet «Avancé» pour ajouter du code CSS personnalisé, vous avez déjà vu les zones auxquelles nous faisons référence.
Ces zones fournissent un raccourci rapide pour ajouter et personnaliser le contenu avant et après tout module Divi existant et nous pouvons les utiliser pour créer des conceptions vraiment flexibles et intéressantes.
Aperçu
Voici ce que nous allons créer dans ce tutoriel:
Exemple 1
Commençons
Pour ce tutoriel, nous allons commencer en mode Visual Builder. Il faut donc cliquer sur « Visual Builder », lorsque vous êtes sur une nouvelle page.
Maintenant nous sommes prêts à commencer !
Exemple 1: Modules Blurb numérotés utilisant des 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 chiffres avant chaque présentation afin de créer une section détaillée «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 toutes les conceptions de présentation, nous avons emprunté la section consacrée à la présentation de l’agence Web. Si vous souhaitez les utiliser comme point de départ, vous pouvez accéder à la page de renvoi 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 avez la possibilité d’utiliser une mise en page prédéfinie, l’une de vos mises en page enregistrées ou de créer une nouvelle construction. Sélectionnez la disposition prédéfinie et utilisez la barre de recherche pour trouver les dispositions «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, le titre et la couleur de la police du texte et ajouté un peu de remplissage.
Une fois que vous avez modifié ces paramètres sur un blurb, vous pouvez cliquer avec le bouton droit de la souris sur le module et utiliser les «styles étendus» pour les appliquer aux trois autres.
Maintenant que nous avons personnalisé nos quatres modules Blurb afin qu’ils aient l’apparence que nous voulons, il est temps d’ajouter du code pour créer l’élément numéroté. Toutefois, pour que cette conception fonctionne, nous devons d’abord ajouter une ligne de CSS à la boîte CSS personnalisée de Main Element.
overflow: visible
Cela permettra simplement aux éléments que nous créerons dans les étapes suivantes d’être visibles partout où ils chevaucheront les bords de notre module de présentation.
Ceci fait, ouvrez les options du module et accédez à “Onglet Avancé”. Dans la zone « avant », ajoutez cet extrait de code CSS:
content: '1.'; /* ajouter le nombre "1." avant le contenu */ font-weight: bold; font-size: 80px; opacity: 0.7; /* rend le nombre légèrement transparent */ color: blue; /* changer la couleur de la police du nombre */ position: absolute; z-index: 9999; left: 0; /* place le contenu à 0px tout a gauche du contenu */ 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 Blurb. 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 de code CSS.
Une fois que vous avez terminé ceci pour le premier module, allez dans les trois nouveaux modules blurb et modifiez la ligne «content:» en:
contenu: ‘2.’;
contenu: ‘3.’;
…etc.
Maintenant que nous avons trié nos chiffres, nous devons ajouter un peu de CSS pour créer la forme de la flèche.
Ouvrez chaque module et entrez-le dans la zone Après de la zone CSS personnalisée:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Maintenant, vos quatre notes de présentation doivent ressembler à ceci:
C’est tout pour ce tutoriel, j’espère qu’il vous permettra de mieux utiliser les pseudo-éléments avec les options que propose Divi.