Comment superposer une image dans WordPress

Si vous êtes enthousiaste à l'idée de rendre votre site Web exceptionnel, vous travaillerez toujours pour l'embellir. Il existe des millions de façons de faire de votre site une muse, et l'une d'entre elles sera mentionnée dans notre article d'aujourd'hui : la superposition d'une image .

Vous vous demandez toujours ce que c'est ? Allez-y doucement et laissez-nous vous sortir !

Qu'est-ce qu'une superposition ?

Comme vous pouvez le voir, j'ai utilisé une image avec du texte et une superposition comme titre ; cela faisait une grande différence par rapport à l'écriture d'un simple titre de texte. Il a l'air beaucoup plus élégant et attrayant par rapport à la normale, n'est-ce pas ?

Plus important encore, la superposition sur l'image permet de mettre en évidence le texte tout en gardant l'image d'arrière-plan visible. Vous pouvez facilement ajouter une image avec du texte et une superposition sur des articles/pages comme celui-ci et l'utiliser à différentes fins. Dans cet article, nous allons vous montrer comment le faire en quelques étapes simples.

Vous êtes encore excité? Commençons!

Comment superposer une image dans WordPress

Il existe deux méthodes que vous pouvez essayer pour superposer une image dans WordPress : en utilisant le bloc de couverture de Gutenberg et en utilisant CSS. Alors que l'utilisation de Gutenberg vous aide à créer une publication/page qui inclut une image avec superposition même à partir d'une feuille vide, l'utilisation de CSS vous aidera à personnaliser rapidement les images sur une publication/page prédéfinie.

Ces deux méthodes sont faciles à utiliser à certains égards, et nous allons vous montrer comment les utiliser une par une.

Méthode 1 : Utilisation du bloc de couverture de Gutenberg

Accédez à l'éditeur de page de Gutenberg.

Étape 1 : Insérez une image à l'aide du bloc de couverture.

Cliquez sur Ajouter un bloc et choisissez le type de bloc Couverture .

Ensuite, choisissez une image d'arrière-plan à afficher sur ce bloc de couverture. Vous pouvez télécharger une image ou choisir une image dans votre bibliothèque.

Vous pouvez également modifier une image que vous avez ajoutée précédemment en image de couverture si nécessaire. Cliquez sur l'image, choisissez Changer le style ou le type de bloc et choisissez Couverture :

Dans mon cas, je choisirai ce bonnet comme arrière-plan et j'écrirai également du texte aléatoire dessus.

De plus, je peux définir la largeur de mon image dans les paramètres ci-dessous. Je vais juste l'aligner au centre.

Maintenant, mon bloc de couverture est prêt avec une image d'arrière-plan et du texte. Par défaut, le bloc Cover a déjà une superposition de couleur noire, nous verrons donc comment nous pouvons l'éditer dans la partie suivante :

Étape 2 : Personnalisez la superposition du bloc de couverture

Ensuite, vous procéderez aux paramètres de bloc pour créer une superposition.

Cliquez sur le bloc > cliquez sur le bouton Options (afficher sous forme de bouton à trois points) > choisissez Afficher plus de paramètres .

Le menu des paramètres de bloc devrait maintenant être prêt à droite de votre écran. Accédez à la section Superposition .

Il vous offre deux options de couleur qui sont Solide et Dégradé pour superposer votre image de couverture :

Nous allons essayer ces deux options. Tout d'abord, essayons la superposition de couleur unie.

Superposition de couleur unie

Maintenant vous pouvez:

• Choisissez une couleur dans le menu suggéré;
• Choisissez une couleur personnalisée. Vous pouvez choisir une couleur dans la palette ou insérer un code couleur. La couleur personnalisée s'affiche comme ci-dessous.

Je viens de choisir une couleur rose douce pour ma superposition. En plus, je peux aussi changer l'opacité (le niveau de transparence) de la superposition :

Un taux d'opacité de 30 à 60% est une valeur appropriée. Si vous définissez l'opacité au-dessous ou au-dessus du taux suggéré, la superposition peut être presque invisible ou trop audacieuse pour voir l'arrière-plan. Je garderai le taux d'opacité à 50% par défaut.

Tout est réglé ici ! C'est ainsi que vous pouvez simplement ajouter une superposition de couleur unie à votre image de couverture.

Passons maintenant à l'option de dégradé de couleur.

Superposition de couleurs dégradées

Une couleur dégradée, comme mentionné ci-dessus, est un schéma d'au moins deux couleurs choisies. Ou simplement, la couleur de la superposition changera respectivement et progressivement de la première à la deuxième couleur choisie (et ainsi de suite).

Voyons comment je fais une superposition de dégradé pour mieux la comprendre.

Tout d'abord, j'ai changé le mode de couleur de Solide à Dégradé. De plus, j'ai choisi un jeu de couleurs dégradées dans le menu de suggestion. Voilà à quoi ça ressemble :

Comme vous pouvez le voir, la superposition se compose de 3 points de contrôle. Chacun porte une couleur unie et vous pouvez déplacer ces points de contrôle pour ajuster le schéma de couleurs de la superposition.

La disposition des couleurs par défaut lors de la sélection de la couleur du dégradé est équilibrée. Je vais essayer de l'ajuster un peu, et voici comment cela change :

Un autre ajustement que vous pouvez faire est le type de schéma de couleurs. Vous pouvez choisir entre le type linéaire et radial . Avec le type Linéaire , vous pouvez également choisir la direction de la superposition.

Pour maîtriser cette option de dégradé de couleurs, vous aurez besoin d'un meilleur sens artistique et apprendrez également à mélanger et assortir les couleurs pour créer la meilleure combinaison pour la superposition.

Méthode 2 : Utilisation de CSS

Si vous souhaitez ajouter une superposition à une image à l'aide de Classic Editor, l'utilisation de CSS est requise. Vous devez ajouter du CSS. Allez dans Apparence > Personnaliser > CSS supplémentaire .

Pour la superposition de dégradés

Ajoutez ce code pour la superposition de dégradé :

 .background-gradient {
    position : relative ;
}
.background-gradient::before {
    contenu: '';
    arrière-plan : linéaire-gradient(135deg,#0693e3,#9b51e0) ;
    position : absolue ;
    haut : 0 ;
    à gauche : 0 ;
    bas : 0 ;
    à droite : 0 ;
    indice z : 1 ;
    opacité : .5 ;
}

Pour la superposition solide :

Ajoutez ce code pour une superposition solide :

 .background-opacity {
    position : relative ;
}
.background-opacity:avant {
    contenu: '';
    position : absolue ;
    haut : 0 ;
    à gauche : 0 ;
    bas : 0 ;
    à droite : 0 ;
    indice z : 1 ;
    opacité : .5 ;
    couleur d'arrière-plan : #000 ;
}

Remarque : ce code vous aidera à ajouter uniquement la superposition, pas le texte sur l'image.

Vous pouvez ajouter les deux si vous souhaitez ajouter de nombreuses images avec différents types de superposition. Pour définir la superposition en couleur unie ou un dégradé, allez à l'éditeur de texte et ajoutez une classe à l'image que vous voulez superposer:

• Solide : <div class="background-opacity"> … </div>
• Dégradé : <div class="background-gradient is-style-default"> … </div>

Par example:

C'est comme ça que je le fais !

Verdict

L'ajout d'une superposition aux images vous aide vraiment à décorer vos articles/pages et à faire une meilleure impression sur les visiteurs. Cela vaut la peine de chercher comment faire une superposition parfaite, je vous recommande donc fortement de commencer à travailler dessus tout de suite. Vous pouvez également rendre votre site Web plus attrayant avec des curseurs, une bannière contextuelle, un arrière-plan vidéo,… J'espère que mes instructions sont suffisamment claires pour vous, et n'hésitez pas à laisser des questions et des commentaires ci-dessous, le cas échéant. Au revoir!