Comment réaliser un effet texte masqué avec n’importe quelle image sur Divi ?
Un effet très cool !
Donnez vie à votre texte avec notre effet de texte masqué ! Cet effet unique utilise une image de votre choix pour « masquer » votre texte, créant un effet visuellement captivant qui attire l’attention de vos visiteurs.
L’effet de texte masqué est parfait pour les titres, les en-têtes et tout autre texte que vous voulez mettre en évidence sur votre site. Il est particulièrement efficace pour les sites de design, de mode, d’art et tout autre site où l’esthétique est primordiale.
Avec notre effet de texte masqué, vous pouvez :
- Choisir n’importe quelle image pour masquer votre texte.
- Personnaliser la taille, le poids et la couleur de votre texte.
- Utiliser n’importe quelle police d’écriture.
L’effet de texte masqué est facile à ajouter à votre site avec le constructeur de page Divi. Il suffit d’ajouter le code HTML et CSS à votre page, et vous pouvez immédiatement voir l’effet en action.
Impressionnez vos visiteurs et donnez à votre site un avantage visuel avec notre effet de texte masqué. Essayez-le dès aujourd’hui !
Le tuto en vidéo
Code HTML
- Dans le tableau de bord WordPress, naviguez jusqu’à la page ou l’article où vous souhaitez ajouter le texte masqué.
- Cliquez sur « Modifier avec Divi ».
- Cliquez sur le bouton « + » pour ajouter un nouveau module à votre page.
- Dans la liste des modules disponibles, recherchez et sélectionnez le module « Code ».
- Dans le champ « Contenu » du module de code, collez le code HTML suivant :
<div class="masked-text">
<h1>VOTRE TEXTE ICI</h1>
</div>Code CSS
- Toujours dans le constructeur Divi, cliquez sur l’icône de trois lignes horizontales en bas pour ouvrir les paramètres de la page.
- Cliquez sur l’onglet « Avancé ».
- Dans le champ « CSS personnalisé », collez le code CSS suivant :
.masked-text h1 {
font-size: 100px;
font-weight: bold;
color: transparent;
font-family: 'Arial', sans-serif;
background: url('https://example.com/your-image.jpg') no-repeat;
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
}Voilà, vous n’avez plus qu’à regarder la magie opérée 😉
