Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


La création de conceptions d’arrière-plan de texte avec CSS est un excellent moyen d’ajouter un élément de conception époustouflant à n’importe quel site Web. La clé pour créer ces arrière-plans de texte personnalisés consiste à utiliser le Clip d’arrière-plan Propriété CSS avec une valeur de texte. Cette méthode ayant gagné en popularité et prise en charge par les navigateurs ces derniers temps, nous allons vous montrer comment l’utiliser dans Divi. Cela ouvre une couche supplémentaire de conception qui cible les éléments de texte (comme H1, H2, p, etc.) ainsi que toutes les autres fonctionnalités de conception merveilleuses de Divi.

Commençons.

Avant goût

Voici un aperçu de la conception que nous allons créer dans ce didacticiel.

Voici un exemple d’arrière-plan dégradé linéaire ajouté au texte d’en-tête avec un clip d’arrière-plan

Arrière-plans de texte CSS dans Divi

Voici un exemple d’arrière-plan d’image ajouté au texte de l’en-tête et d’un arrière-plan dégradé linéaire ajouté au texte du paragraphe à l’aide d’un clip d’arrière-plan

Arrière-plans de texte CSS dans Divi

Et en voici un Codepen cela montre également ce concept.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle Portabilité, sélectionnez l’onglet Importer et téléchargez le fichier depuis votre ordinateur.

Cliquez ensuite sur le bouton Importer.

Panneau de notification Divi

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Extension des onglets d'angle

Pour commencer, vous devez effectuer les opérations suivantes:

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Utilisation du clip d’arrière-plan avec du texte

Avant de commencer à construire nos exemples dans Divi, nous devons d’abord mieux comprendre le code CSS nécessaire pour obtenir un fond de texte personnalisé en CSS.

Supposons que nous ayons un élément d’en-tête H2 qui ressemble à ceci.

Tout d’abord, vous devez définir l’arrière-plan que vous souhaitez utiliser. Dans cet exemple, nous ajoutons un fond dégradé à notre élément h2 gradient linéaire.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);


}

Ensuite, nous ajoutons Clip d’arrière-plan: texte avec la version de préfixe requise « -webkit » pour afficher l’arrière-plan de l’élément uniquement derrière le texte.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;

}

Ensuite, nous ajoutons -webkit-text-fill-color: transparent pour remplacer la couleur du texte et le rendre transparent.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Ensuite, nous ajoutons les préfixes de navigateur nécessaires pour rendre les dégradés linéaires plus conviviaux pour le navigateur:

h2 {
  background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Comme vous pouvez le voir, cet exemple utilise trois couleurs pour créer un dégradé. Cependant, vous pouvez facilement en ajouter autant que vous le souhaitez.

C’est vraiment tout. Bien sûr, cela aide à mieux comprendre comment utiliser le gradient linéaire Fonction pour concevoir le type de fond dégradé souhaité.

Pour plus d’informations, consultez la documentation sur le fonction de gradient linéaire. Vous pouvez aussi explorer cela Générateur de dégradé de texte CSS pour explorer des options amusantes.

Si vous ne souhaitez pas utiliser de dégradé, vous pouvez utiliser un arrière-plan d’image réel. Le code ressemblerait à ceci:

h2 {
  background: center / cover url("add image URL");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Maintenant que nous avons une meilleure compréhension du CSS, passons au tutoriel.

Conception d’arrière-plans de texte avec clip d’arrière-plan dans Divi

Partie 1: Utilisation d’un clip d’arrière-plan pour ajouter un arrière-plan dégradé à un en-tête H1

Dans notre premier exemple, nous ajoutons un arrière-plan dégradé à un en-tête H1.

La section, la ligne et la colonne

Tout d’abord, ouvrez les paramètres de la section et ajoutez une couleur d’arrière-plan:

  • Couleur de fond: # 153243

Arrière-plans de texte CSS dans Divi

Ajoutez une seule ligne de colonne dans la section.

Arrière-plans de texte CSS dans Divi

Le module de texte avec l’en-tête H1

Ajoutez un nouveau module de texte à la colonne de la ligne pour ajouter l’en-tête H1.

Arrière-plans de texte CSS dans Divi

Ouvrez les paramètres de texte et collez le code HTML suivant pour l’en-tête H2 sous l’onglet Texte du contenu du texte.

<h1>Creating CSS Text Backgrounds in Divi</h1>

Arrière-plans de texte CSS dans Divi

Dans l’onglet Conception, mettez à jour les paramètres de conception H1 comme suit:

  • Vedette: Montserrat
  • Épaisseur de la police de titre: gras
  • Police de titre: DD
  • Alignement du texte du titre: milieu
  • Couleur du texte de l’en-tête: #ffffff
  • Taille du texte de l’en-tête: 100 px (bureau), 55 px (tablette), 28 px (téléphone)
  • Hauteur du titre: 1.2em

REMARQUE: la couleur du texte de l’en-tête sera remplacée par le CSS personnalisé, mais il est utile d’en choisir une comme solution de secours au cas où.

Arrière-plans de texte CSS dans Divi

Sous l’onglet Avancé, ajoutez la classe CSS suivante:

  • Classe CSS: Text-Background-Clip

Nous utiliserons cette classe plus tard comme sélecteur dans notre code CSS personnalisé.

Arrière-plans de texte CSS dans Divi

Le code CSS

Ajoutez un nouveau module de code sous le module de texte pour ajouter le code CSS qui donnera au H1 un arrière-plan dégradé.

Arrière-plans de texte CSS dans Divi

Ensuite, collez le CSS suivant dans la zone Code et assurez-vous que le code est inclus sur la ligne requise style Mots clés:

.text-background-clip h1 {
  background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Arrière-plans de texte CSS dans Divi

REMARQUE: Nous reviendrons sur le même module de code pour ajouter du CSS supplémentaire pour nos exemples ci-dessous.

Résultat

Voici le résultat. Comme vous pouvez le voir, l’arrière-plan dégradé a été rogné de sorte qu’il ne soit indiqué que par l’élément d’en-tête H1.

Arrière-plans de texte CSS dans Divi

Partie 1: Utilisation d’un clip d’arrière-plan pour ajouter un arrière-plan d’image à un en-tête H2

Nous ne sommes pas limités aux arrière-plans dégradés pour concevoir nos arrière-plans de texte. Nous pouvons également concevoir nos arrière-plans de texte avec des images d’arrière-plan.

Dans cet exemple suivant, nous utiliserons la même méthode (avec Clip d’arrière-plan) pour ajouter un arrière-plan d’image à un en-tête H2.

La section, la ligne et la colonne

Tout d’abord, créez une nouvelle section régulière sous la section existante de notre premier exemple.

Arrière-plans de texte CSS dans Divi

Ajoutez ensuite une seule ligne de colonne à la section.

Arrière-plans de texte CSS dans Divi

Ouvrez les paramètres de la section et ajoutez une image d’arrière-plan sombre à la section.

Arrière-plans de texte CSS dans Divi

Ensuite, copiez le module de texte existant dans notre premier exemple ci-dessus et collez-le dans la colonne de notre nouvelle section.

Arrière-plans de texte CSS dans Divi

Ouvrez les paramètres de texte pour le module de texte en double et changez l’en-tête H1 en en-tête H2 en mettant à jour le HTML:

<h2>Creating CSS Text Backgrounds in Divi</h2>

Arrière-plans de texte CSS dans Divi

Sous l’onglet Conception, cliquez avec le bouton droit sur l’onglet H1 et copiez le texte d’en-tête Styles H1. Cliquez ensuite avec le bouton droit de la souris sur l’onglet H2 et collez les styles H1 du texte de l’en-tête pour que l’en-tête H2 ait le même style.

Arrière-plans de texte CSS dans Divi

Le code CSS

Pour ajouter le code CSS qui doit donner au H2 un arrière-plan d’image, ouvrez le module de code existant que nous avons créé précédemment et collez le CSS suivant sous le premier extrait de code CSS:

.text-background-clip h2 {
  background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Arrière-plans de texte CSS dans Divi

Cela ajoutera une image d’arrière-plan derrière l’élément H2. Le raccourci CSS pour l’arrière-plan comprend «centre» pour la position de l’arrière-plan, «couverture» pour la taille de l’arrière-plan et l’URL de l’image réelle.

Pour trouver l’url d’une image sur votre propre site Web, vous pouvez facilement ouvrir votre galerie multimédia WordPress, sélectionner l’image et copier l’URL du fichier.

Arrière-plans de texte CSS dans Divi

Résultat

Arrière-plans de texte CSS dans Divi

Partie 3: Utilisation d’un clip d’arrière-plan pour ajouter un arrière-plan dégradé au texte de paragraphe

Pour notre dernier exemple, nous utiliserons Clip d’arrière-plan Ajoutez un arrière-plan dégradé au texte du paragraphe. Le processus est le même. La seule différence est le code CSS qui cible la balise p pour notre texte de paragraphe.

Ajouter un module de texte

Ajoutez un nouveau module de texte sous le module de texte précédent dans la même section que nous avons conçue dans la partie 2.

Arrière-plans de texte CSS dans Divi

Mettez à jour le contenu du texte avec le texte de paragraphe HTML suivant:

<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p>

REMARQUE: assurez-vous que le texte est renvoyé à la ligne p Tag car c’est le sélecteur que nous ciblons dans notre code CSS personnalisé.

Arrière-plans de texte CSS dans Divi

Sous l’onglet Conception, mettez à jour les styles de texte suivants:

  • Couleur du texte du texte: #ffffff
  • Texte Taille du texte: 16px
  • Hauteur de la ligne de texte: 2em
  • Largeur maximale: 500px
  • Orientation du module: centre

Arrière-plans de texte CSS dans Divi

Sous l’onglet Avancé, ajoutez la même classe CSS que celle utilisée auparavant:

  • Classe CSS: Text-Background-Clip

Arrière-plans de texte CSS dans Divi

Le code CSS

Enfin, collez le code CSS qui cible la cible p balise et ajoutez un arrière-plan dégradé au texte Clip d’arrière-plan: texte.

.text-background-clip p {
  background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Arrière-plans de texte CSS dans Divi

Résultat

Voici le résultat de la conception d’arrière-plan du texte du paragraphe.

Arrière-plans de texte CSS dans Divi

Résultats finaux

Regardons maintenant les résultats finaux de nos créations!

Voici un exemple d’arrière-plan dégradé linéaire ajouté au texte d’en-tête avec un clip d’arrière-plan

Arrière-plans de texte CSS dans Divi

Arrière-plans de texte CSS dans Divi

Arrière-plans de texte CSS dans Divi

Voici un exemple d’arrière-plan d’image ajouté au texte de l’en-tête et d’un arrière-plan dégradé linéaire ajouté au texte du paragraphe à l’aide d’un clip d’arrière-plan

Arrière-plans de texte CSS dans Divi

Arrière-plans de texte CSS dans Divi

Arrière-plans de texte CSS dans Divi

Dernières pensées

La possibilité d’ajouter des arrière-plans de texte personnalisés à votre site peut être un outil de conception utile. Et lorsque vous comprenez mieux comment utiliser le Contexte Propriété CSS en combinaison avec Clip d’arrière-plan: texte, Les possibilités sont infinies. Si vous avez besoin d’un peu d’aide pour créer votre propre CSS, vous pouvez également étudier cela Générateur de dégradé de texte CSS pour fixer le processus.

Si vous souhaitez obtenir un effet similaire sans tout le CSS personnalisé, consultez la section Comment appliquer des couleurs de texte dégradées à l’aide des options du mode de fusion de Divi.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts