Comment créer un design unique avec des pseudo – éléments avant et après Divi

Le domaine auquel nous faisons référence. Ces boîtes fournissent des raccourcis pour ajouter et personnaliser du contenu avant et après n’importe quel module Divi existant que nous pouvons utiliser pour créer des projets très flexibles et intéressants.
C’est ce que nous allons créer dans ce tutoriel: exemple 1 Exemple 2 Exemple 3 Pour ce tutoriel, nous avons juste besoin d’une copie du thème Divi et d’un tableau blanc. Tout d’abord, nous allons créer une nouvelle page, et après avoir ajouté un titre à la page, nous allons cliquer sur Visual Builder. Maintenant, on peut commencer! Exemple 1: un module Blurb numéroté utilisant un pseudo – élément Blurb peut être l’un des modules Divi les plus flexibles que vous pouvez utiliser. Dans ce cas, nous ajouterons des nombres avant chaque Blurb en utilisant des pseudo – éléments pour créer progressivement la section \
Ce que nous allons créer: Bien que cette conception fonctionnera avec n’importe quelle conception Blurb, nous avons emprunté la partie Blurb de la mise en page de l’agent Web. Si vous voulez les utiliser comme point de départ, vous pouvez accéder à la page d’atterrissage de l’agent Web en créant de nouvelles pages et en accédant au constructeur frontal. Lorsque vous chargez une page, vous pouvez choisir d’utiliser la mise en page par défaut, la mise en page enregistrée ou la créer à partir de zéro. Sélectionnez la mise en page par défaut et utilisez la barre de recherche pour trouver la mise en page de l’Agence web. La section Blurb de ce tutoriel se trouve sur la page d’atterrissage. Après le chargement, la seule différence entre la mise en page par défaut et notre exemple est que nous avons changé l’arrière – plan, le titre du texte et la couleur de police de chaque Blurb et ajouté un peu de remplissage. Après avoir modifié ces paramètres sur Blurb, vous pouvez faire un clic droit sur le formulaire et l’appliquer en utilisant le style étendu
); Vos quatre profils devraient maintenant ressembler à ceci: Exemple 2. Ajouter des formes uniques aux formulaires existants cette conception est basée sur de petits fragments de code simples mais efficaces qui sont ajoutés aux boîtes CSS personnalisées:: avant et:: après 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 dans des modules existants sans ajouter d’éléments ou de modules supplémentaires à la page. Comme ces pseudo – éléments sont contenus dans nos modules existants, ils n’ajoutent pas d’espace supplémentaire à nos projets et ne conservent pas une bonne apparence sur tous les appareils. Ce que nous allons créer: Pour créer la disposition initiale, nous devons ajouter une section générale avec trois lignes de colonne, définie à la largeur par défaut. Ensuite, ajoutez un formulaire texte à l’une des nouvelles colonnes. De même, vous pouvez modéliser ce formulaire de texte au besoin, mais vous pouvez obtenir cette conception si vous suivez les étapes suivantes: Ouvrez les options de formulaire de texte et ajoutez le contenu du texte et l’image de fond ou la couleur de fond au besoin. Nous avons utilisé une image de fond normale avec un gradient transparent en haut: Ensuite, Configurez les options de conception suivantes: 1. Remplissage supérieur: 120 Px, remplissage inférieur: 120 px 2. Alignement du texte: Centre du texte et couleur: # FFFFFF 3. Alignement de l’en – tête: Centre et couleur de l’en – tête: # f5ee5d Maintenant que nous avons tous les aspects visuels pour votre premier module texte, il est temps d’ajouter css pour réaliser cette magie. Dans l’onglet avancé du formulaire texte, ajoutez le code suivant à la première Case: contenu: ‘;
Hauteur: 30px Modifier les dimensions pour correspondre à votre conception
Largeur: 30px Modifier les dimensions pour correspondre à votre conception
Affichage: blocs;
Position: absolue;
Bordure supérieure: solide 3px # f5ee5d Changer la couleur en
Largeur maximale: 768px {
– Oui. Étiquette fantaisiste. Et _ pb tabs Control li {
Largeur: 100%! Important
}
– Oui. Étiquette fantaisiste. Et _ pb tabs Control {
Remplissage: 0! Important
}
}
Ce code Centre le texte et l’image de la carte et augmente la largeur de la carte pour couvrir l’ensemble du module. Nous avons également ajouté quelques css pour nous assurer que les onglets apparaissent bien sur tous les appareils: Si vous ne voulez pas que les onglets soient entièrement larges et empilés sur les appareils mobiles, nous devons retourner et encapsuler le code CSS original dans une requête multimédia. Cela signifie que sur les appareils de la taille de la tablette ou plus, nous ajoutons des descriptions et des icônes, mais sur les appareils plus petits, nous retournons au style Divi par défaut. Pour ce faire, copiez le code CSS modifié ci – dessous et collez – le dans la zone CSS personnalisée du panneau d’options Divi Theme: @ Media (largeur minimale: 769px) {
– Oui. Étiquette fantaisiste. Et \ \ u pb \ \ u tab \ \ u 0 A:: Avant
Contenu: url (* remplacer par l’URL de la première image *);
Haut de l’emballage: 20px;
Affichage: blocs;
}
– Oui. Étiquette fantaisiste. Et \ \ u pb \ \ u tab \ \ u 1 A:: Avant
Contenu: url (* remplacer par l’URL de la deuxième image *);
Haut de l’emballage: 20px;
Affichage: blocs;
}
– Oui. Étiquette fantaisiste. Et \ \ u pb \ \ u tab \ \ u Content A:: before {
Contenu: ‘! Important;}
– Oui. Étiquette fantaisiste. Objet de la position: Re: Re: ПррГрамииа
Contenu: \
Taille de la police: 10px;
Haut du joint: 5px;
Affichage: blocs;
}
– Oui. Étiquette fantaisiste. Чтопрограмможнонепрог раммениепольногопроромения прогамения програмения програмения проможно.
Contenu: \
Taille de la police: 10px;
Haut du joint: 5px;
Affichage: blocs;
}
– Oui. Étiquette fantaisiste. Et \ \ u pb \ \ u tab \ \ u Content A:: after {
Contenu: ‘! Important;}
– Oui. Étiquette fantaisiste. Et _ pb tab contenta: après {
Contenu: ‘! Important;}
– Oui. Étiquette fantaisiste. Et _ pb tabs Control li {
Largeur: 50%! Important
}
– Oui. Étiquette fantaisiste. Et _ pb tabs Control Li a {
Largeur: 100%! Important
Alignement du texte: centré;
}
} Dans ce cas, nous avons créé un module de carte contenant deux cartes différentes, mais dans la pratique, nous avons parfois besoin de plus de cartes. Si votre position est C
Lorsque vous essayez de créer plus de deux onglets, nous devons changer le Code que vous venez d’ajouter. Comme vous pouvez le voir à partir du fragment de code, Divi assigne automatiquement une classe à chaque titre de la carte, la première classe commençant par 0 (.Et _ pb tab 0) et augmentant de 1 à la fois (et pb Tab 1,.Et pb tab 2, et ainsi de suite). Nous avons déjà traité les deux premiers onglets, donc lorsque nous ajoutons plus d’onglets, il suffit de copier et coller un morceau de code pour chaque nouvel onglet:. Étiquette fantaisiste. Et \ \ u pb \ \ u tab \ \ u 0 A: avant {
Contenu: url (* remplacer par l’URL de la première image *);
Haut de l’emballage: 20px;
}
Et changez les nombres dans la classe (.Et _ pb tab 0) en 2, 3, 4, etc. Vous devez faire la même chose avec votre description. Le dernier changement que nous devons faire est d’ajuster une autre ligne de CSS. Divisez votre nombre de cartes par 100. Écrivez ce numéro et allez à la section suivante du CSS personnalisé:. Étiquette fantaisiste. Et _ pb tabs Control li {
Largeur: 50%! Important
}
50% de réduction pour vos réponses. Cela permettra de s’assurer que la carte est répartie uniformément le long de la largeur du module. Par exemple, si vous créez un troisième onglet, vous avez besoin du code CSS supplémentaire suivant:. Étiquette fantaisiste. Et _ pb tabs Control li {
Largeur: 33%! Important
} Voici trois bonnes façons de créer de nouvelles possibilités de conception en utilisant les éléments CSS:: before et:: after. Nous espérons que ce guide vous inspirera à explorer comment utiliser des pseudo – éléments dans vos créations futures – les possibilités sont infinies!