Comment remplir le texte avec des images pour un fond créatif en utilisant Divi

Remplir le texte avec des images est une bonne façon d’ajouter un design moderne à un site Web. En mode mixte Divi, vous pouvez afficher l’image de fond à travers n’importe quel texte. De plus, avec des marges personnalisées dans Divi Builder, vous pouvez placer du texte plein d’images comme arrière – plan du contenu. Dans ce tutoriel, je vais vous montrer comment utiliser le mode Fusion d’écran pour ajouter un fond de texte plein d’images en couleur en utilisant Divi. Je vais également vous montrer comment ajouter des délimiteurs qui correspondent à la conception du texte de fond et des sections qui passent sans couture entre les délimiteurs.
On y va. Voici un aperçu de ce qui sera créé aujourd’hui. Pour vous aider à compléter le tutoriel cost, vous aurez besoin de ce qui suit: Divi Topic (installé, actif et mis à jour) 4 images pour chaque fond de texte. Pour de meilleurs résultats, je recommande d’utiliser des images plus foncées, texturées et d’au moins 1920 × 1080 tailles. Comment interagir avec Visual Builder Mesh: Puisque nous allons superposer des modules et créer des mises en page plus complexes, je vous recommande d’utiliser le mode d’interaction Mesh pour éviter toute confusion lorsque vous essayez de survoler des éléments superposés dans Visual Builder. Comment utiliser Divi pour remplir le texte d’arrière – plan créatif Inscrivez – vous à notre canal YouTube créer une nouvelle page et distribuer Visual Builder. Ensuite, ajoutez une section normale avec des lignes à la colonne (ou n’utilisez que les sections qui existent déjà par défaut), et ajoutez un formulaire de texte à la colonne. Mettre à jour les paramètres du formulaire de texte ouvrir les paramètres du formulaire de texte et mettre à jour ce qui suit: contenu: 01 (qui sera le numéro utilisé pour l’arrière – plan) couleur de l’arrière – plan: # FFFFFF Design…
California
Sur un appareil mobile. Mettre à jour les paramètres de ligne maintenant que nous avons le contenu, changeons les paramètres de première ligne comme suit.
Contenu… Colonne 1 image de fond: insérer une image Voici l’image que j’utilise… Design… Make this Line Full Width: s Custom Edge Ditch width: 1 Custom fill: 10% top, 7% Bottom Edge width: 1px Edge color: # FFFFFF in the second line, update the Settings as follows: Custom fill: 0px top, 0px Bottom this time we have completed the first successful background text. En raison de la façon dont le mode de fusion de l’écran fonctionne, le texte est limité à l’arrière – plan blanc. Mais nous pouvons ajouter quelques couleurs en ajoutant des séparateurs dans la partition.
Ajouter un séparateur à une partition pour ajouter un séparateur, allez à paramètres de partition sur l’onglet conception et mettez à jour ce qui suit. Haut du séparateur… Style du séparateur: voir capture d’écran couleur du séparateur: rgba (1310233,0,65) hauteur du séparateur: 127 Px disposition du séparateur: haut du contenu de la Section Couleur du partitionnement: rgba (1310233,0,65) hauteur du partitionnement: 249 Px (bureau), 127 Px (tablette) retournement du partitionnement: Disposition verticale et horizontale du partitionnement: partie supérieure du contenu Avant de commencer la partie suivante, nous devons créer une partie lisse comme gradient de couleur entre les séparateurs supérieurs et inférieurs. Pour créer une transition, nous devons utiliser la couleur du séparateur inférieur supérieur et du séparateur supérieur inférieur (désolé, peut – être un peu confus). En utilisant les deux couleurs, nous créons une rampe de fond, du séparateur supérieur au séparateur inférieur.
Continuer à ajouter de nouvelles sections normales, mais supprimer la colonne Rig