Comment écraser & # 39; Images WordPress

Si vous voulez rendre votre site différent, vous ferez de votre mieux pour l’embellir. Il y a des millions de façons de faire de votre site une muse inspirante, dont l’une sera mentionnée dans notre billet d’aujourd’hui: superposer des images. Résumé caché 1. Qu’est – ce que le chevauchement? 2. Comment superposer des images dans WordPress 2.1. Méthode 1: utiliser le bloc de couverture Gutenberg 2.2. Méthode 2: utiliser CSS 3. Qu’est – ce que le jugement veut savoir d’autre? Détends – toi, on va te sortir d’ici! Qu’est – ce que le chevauchement? Comme vous pouvez le voir, j’ai utilisé une image avec du texte et des superpositions comme titre; C’est très différent de l’écriture d’un titre de texte simple. Ça a l’air plus élégant et plus attrayant que d’habitude, non?
Plus important encore, le recouvrement sur l’image aide à mettre en évidence le texte tout en maintenant l’image de fond visible. Vous pouvez facilement ajouter des images avec du texte et des superpositions à ces messages \/ pages et les utiliser à différentes fins. Dans cet article, nous vous montrerons comment le faire par étapes simples. Tu es excitée? Allons – y! Comment superposer des images dans WordPress il y a deux façons d’essayer de superposer des images dans WordPress: en utilisant la couverture de Gutenberg et CSS. Bien que Gutenberg vous aide à créer des articles \/ pages avec des images superposées, même des pages vierges, css vous aide à personnaliser rapidement les images sur les articles \/ pages pré – construits.
Les deux méthodes sont assez faciles à utiliser, et nous vous montrerons comment les utiliser une par une. Méthode 1: utilisez le bloc de couverture Gutenberg pour aller à l’éditeur de page Gutenberg. Étape 1: insérez l’image en utilisant le bloc de couverture. Cliquez sur Ajouter un bloc et sélectionnez le type de bloc comme couverture. Ensuite, sélectionnez l’image de fond à afficher
Sur ce couvercle. Vous pouvez télécharger des images ou les sélectionner dans la bibliothèque. Si nécessaire, vous pouvez également modifier l’image précédemment ajoutée à l’image de couverture. Cliquez sur l’image, sélectionnez changer de style ou de type de bloc, puis sélectionnez couverture: Dans mon cas, je choisirais ce chapeau comme arrière – plan et j’écrirais aussi du texte aléatoire dessus. De plus, je peux définir la largeur de l’image dans les paramètres ci – dessous. Je vais le mettre au milieu. Maintenant, ma couverture est prête avec l’image de fond et le texte. Par défaut, le bloc de couverture a déjà une couverture noire, donc nous verrons comment l’éditer dans la section suivante: Étape 2: personnaliser la superposition du bloc de superposition ensuite, vous continuerez à créer la superposition en utilisant les paramètres du bloc. Cliquez sur Bloc > cliquez sur le bouton Options (affiché sous forme de bouton à trois points) > Cliquez pour afficher plus de paramètres. Le menu paramètres de verrouillage du côté droit de l’écran devrait maintenant être prêt. Allez à la section couverture. Il vous offre deux options de couleur, solide et gradient, pour couvrir l’image de couverture: Nous allons essayer les deux options. D’abord, essayons la couverture normale. Surimpression solide Vous pouvez maintenant: sélectionner une couleur dans le menu recommandé; Sélectionnez une couleur personnalisée. Vous pouvez sélectionner une couleur dans la palette ou entrer un code de couleur. Les couleurs personnalisées sont affichées ci – dessous. J’ai juste choisi un rose doux comme couverture. De plus, je peux modifier l’opacité de la couverture (niveau de transparence): Une opacité de 30 à 60% est une valeur appropriée. Si l’opacité est réglée à une vitesse inférieure ou supérieure à la vitesse recommandée, le recouvrement peut être presque invisible ou trop gras pour que l’arrière – plan soit visible. Je garderai l’opacité à 50% C
Par défaut. Tout est prêt! C’est ainsi que vous pouvez simplement ajouter une superposition de couleur solide à l’image de couverture. Passons maintenant à l’option décoloration. Comme décrit ci – dessus, un gradient est un motif d’au moins deux couleurs sélectionnées. Ou simplement, la couleur de superposition change graduellement et individuellement de la première couleur sélectionnée à la seconde (et ainsi de suite).
Voyons comment je fais la superposition des gradients pour mieux comprendre. Tout d’abord, j’ai changé le mode couleur du solide au Gradient. De plus, j’a i sélectionné un ensemble de couleurs de gradient dans le menu suggestions. Voici à quoi il ressemble: Comme vous pouvez le voir, la superposition se compose de 3 points de contrôle. Chacun a une couleur solide et vous pouvez déplacer ces points de contrôle pour ajuster le schéma de couleur de la couverture. La disposition des couleurs par défaut lors de la sélection des couleurs de rampe est équilibrée. Je vais essayer de l’ajuster, et voici les changements: Un autre ajustement que vous pouvez faire est le type de schéma de couleur. Vous pouvez choisir entre les types linéaires et radiaux. En utilisant le type linéaire, vous pouvez également sélectionner la direction du chevauchement.
Pour maîtriser les options de couleurs de gradient, vous avez besoin d’un meilleur sens de l’art et d’apprendre à mélanger et à correspondre aux couleurs pour créer la meilleure combinaison de chevauchement. Méthode 2: utiliser CSS si vous souhaitez utiliser un éditeur de classe pour ajouter une superposition à une image, vous devez utiliser CSS. Vous devez ajouter des CSS. Allez à apparence > personnaliser > attacher CSS. Pour la pile de gradient, ajoutez le code suivant pour la pile de gradient:. Fond de gradient
Position: relative;
}
– Oui. Gradient de fond:: Avant
Contenu: \
Contexte: gradient linéaire (135 degrés, # 0693e3, # 9b51e0);
Position: absolue;
En haut: 0;
Gauche: 0;
En b