Comment définir l'arrière-plan de l'image dans WordPress

Il existe d'autres façons d'ajouter des images d'arrière-plan dans WordPress. Du basique au plus avancé avec le changement de code de thème. Cependant, nous sommes ravis de présenter un outil convivial idéal pour les administrateurs de sites Web sans connaissances en codage et en conception. Plugin Citadela Pro est livré avec de nombreuses fonctionnalités et paramètres pour la personnalisation du site Web.

Essayez gratuitement les puissants blocs, paramètres et fonctionnalités du plugin Citadela Pro. Nous proposons un essai de 7 jours avec toutes les fonctionnalités premium. Vous pouvez explorer l'outil parfait qui vous permet d'ajouter des images d'arrière-plan aux pages WordPress, aux publications et aux types de publication personnalisés.

Le Cluster est un bloc Gutenberg dans WordPress qui vous permet d'ajouter une image de fond. L'élément multifonctionnel vous permet de changer l'arrière-plan WordPress par défaut. Vous pouvez non seulement ajouter une image d'arrière-plan, mais aussi la combiner avec d'autres blocs. Vous gagnez beaucoup de variations et de polyvalence.

Combiné avec le Bloc de titre de la page, vous obtenez facilement un site Web fabuleux. Vous pouvez ajouter plus de blocs Gutenberg et personnaliser l'image d'arrière-plan dans WordPress. En outre, vous pouvez enregistrer un ensemble de blocs comme des blocs réutilisables et ajouter un thème n'importe où sur votre site Web. Ainsi, vous pouvez modifier le site Web WordPress en arrière-plan à la fois.

Comment ajouter une image d'arrière-plan dans WordPress à l'aide du bloc Gutenberg

Image d'arrière-plan WordPress via le bloc Cluster

Nous vous présentons le bloc pratique que nous avons créé pour le bloc WordPress Gutenberg pour l'image d'arrière-plan - Bloc de cluster. Il fait partie de notre propre groupe de blocs. Le plugin Citadela Pro possède de nombreuses fonctionnalités pour vous aider à créer un beau site Web. Tous les blocs personnalisés AitThemes sont disponibles dans Plugin Citadela Pro.

Lisez s'il vous plaît Documentation sur le bloc de cluster pour les réglages détaillés.

Le bloc de cluster vous permet de regrouper plusieurs blocs en un seul. Vous pouvez travailler efficacement avec l'ensemble du groupe en cluster car il s'agissait d'un bloc. La largeur du cluster peut être définie sur la largeur de la page entière, ce qui signifie que vous disposez d'un espace supplémentaire pour ajouter divers blocs.

Le cluster ne s'étendra pas sur toute la largeur si :

• Vous avez une barre latérale active
• Si vous utilisez des colonnes qui limiteront l'espace pour le cluster

Étant donné que certains des blocs principaux de WordPress ne peuvent être alignés que sur la largeur du contenu, le bloc Cluster offre une plus grande variabilité dans la construction de votre site Web. Une grande fonctionnalité est également que vous pouvez définir sur WordPress une image d'arrière-plan, changer sa couleur ou définir une superposition d'image d'arrière-plan. L'arrière-plan peut donc être configuré pour la conception du site Web.

Dans cet article nous allons vous montrer :

• Comment ajouter un bloc Cluster à l'éditeur WordPress
• Regroupement à l'intérieur du cluster
• Paramètres de base dans la barre d'outils
• Couleur d'en-tête et de séparateur
• Comment ajouter une image d'arrière-plan sous des blocs groupés
• Qu'est-ce que la superposition d'arrière-plan
• Quelle est la différence entre le bloc Groupe et le bloc Ait Cluster

Comment ajouter un bloc de cluster

Le bloc de cluster est un bloc premium et n'est disponible que si vous installez et activez Module d'extension de blocs Citadela. Après avoir installé le plugin, le bloc Cluster sera automatiquement ajouté à l'éditeur de blocs WordPress et vous pourrez immédiatement commencer à travailler avec.

Le bloc de cluster peut être ajouté dans les publications et les pages. Cliquez simplement sur le signe "+" dans la barre supérieure ou n'importe où sur le bureau de l'éditeur. Ensuite, recherchez simplement le bloc Cluster.

La deuxième option pour ajouter un bloc de cluster consiste à taper "/" suivi du nom du bloc. Le bloc de cluster est alors prêt à l'emploi.

Regroupement de blocs à l'aide de Cluster

La principale caractéristique du bloc Cluster est de regrouper plusieurs blocs en un seul. Voyons comment cela fonctionne. Si vous insérez le bloc Cluster dans votre page, vous verrez immédiatement un espace réservé "Insérez plus de blocs ici". Si vous cliquez dessus, vous obtiendrez une liste de tous les blocs disponibles. Vous pouvez également rechercher le bloc demandé à l'aide de la barre de recherche en haut de la liste.

Tous les blocs imbriqués auront toutes les options et tous les paramètres par défaut disponibles. Par exemple, si vous insérez un bloc Image, vous aurez la possibilité de télécharger une image ou de la sélectionner dans la médiathèque.

En utilisant le bloc Cluster, vous pouvez par exemple créer une section accrocheuse sur votre site Web pour présenter votre travail récent. Ajoutez des images de votre portfolio, puis définissez une image d'arrière-plan en dessous. Vous venez de créer un joli lien vers votre portfolio.

Le bloc de cluster peut également être utilisé pour créer une présentation attrayante du produit. Vous pouvez définir l'image du produit comme arrière-plan de la section et choisir sa couleur. Bloc de services peut également être imbriqué dans le bloc Cluster.

Plusieurs blocs en un seul

Si vous souhaitez ajouter plusieurs blocs imbriqués dans le cluster, vous pouvez utiliser le bloc Columns. En utilisant le bloc de colonnes, vous pouvez ajouter plusieurs blocs côte à côte. Chaque colonne peut avoir un type de contenu différent, tel qu'une image, un paragraphe, des listes ou un bouton.

Un exemple typique de plusieurs colonnes en combinaison avec le bloc Cluster est un site Web d'une page.

Paramètres de base dans la barre d'outils : options d'alignement du contenu

Par défaut, la largeur du bloc de cluster est définie sur la taille du contenu. Vous pouvez modifier ce comportement dans la barre d'outils. Les options suivantes sont disponibles :

• Taille du contenu - option par défaut, le bloc de cluster a la même largeur que le contenu.
• Taille large - le contenu à l'intérieur du cluster est plus large que la largeur du contenu.
• Taille pleine largeur - dans ce cas, la largeur du cluster est d'un côté à l'autre de la fenêtre du navigateur.

Il est important de noter que ce paramètre n'affectera le contenu du cluster que si votre thème actuellement actif le prend en charge. Tous les blocs imbriqués peuvent être configurés en fonction de la disponibilité de leurs options.

Paramètres de couleur d'en-tête et de séparateur

Changement de couleur de titre

Depuis WP 5.3, vous pouvez changer la couleur de votre en-tête via le bloc d'en-tête. C'est une fonctionnalité très utile - surtout si vous avez une mise en page et un jeu de couleurs sombres, il est préférable de changer la couleur du texte par défaut (qui est le noir) en une couleur plus claire.

Il n'était pas possible de changer la couleur de l'en-tête jusqu'à la nouvelle version, ce qui posait des problèmes de visibilité sur une base sombre. Par conséquent, il arrivait souvent que le titre soit mélangé avec l'image ou la photo d'arrière-plan WordPress que vous avez ajoutée. Vous pouvez maintenant choisir la bonne couleur de titre pour faire briller votre site.

Nouvelle couleur pour le séparateur utilisé sur votre site Web

Lorsque vous ajoutez à votre WP une image de fond ou tout autre type de contenu, vous pouvez parfois avoir besoin de le séparer du reste du site Web. À cette fin, vous pouvez utiliser un bloc spécial appelé Séparateur. En insérant un séparateur, vous pouvez :

• Blocs spécifiques séparés
• Diviser le texte entier en sections plus petites
• Mettre en évidence les parties importantes
• Assurer une meilleure lisibilité du contenu
• Simplifiez la navigation sur votre site

De plus, vous pouvez désormais modifier la couleur de la ligne de séparation avec le WordPress mis à jour. Coloured Separator est parfait pour compléter la palette de couleurs de votre site Web.

Comment ajouter une image d'arrière-plan sous des blocs groupés

La véritable puissance du bloc Cluster est que vous pouvez ajouter une image d'arrière-plan et définir une couleur d'arrière-plan sous les blocs groupés. Tout peut être configuré facilement dans l'inspecteur WordPress. Voyons comment procéder.

1. Cliquez sur Image d'arrière-plan et activez la fonction "Afficher l'image d'arrière-plan".
2. Cliquez sur "Sélectionner une image". La médiathèque s'ouvrira. Vous pouvez sélectionner une image existante ou télécharger une nouvelle image dans votre bibliothèque.
3. L'image d'arrière-plan peut également être définie sur fixe. Cela signifie que si vous faites défiler la page, l'arrière-plan ne bougera pas avec le contenu et sa position sera fixe.
4. Vous pouvez également choisir quelle partie de l'image d'arrière-plan doit être affichée à l'aide de "Focal Point Picker". Il est également possible de choisir une partie de l'image en utilisant le pourcentage.

Superposition d'arrière-plan

L'une des options avancées de Cluster est la superposition d'image d'arrière-plan. Vous pouvez choisir l'une des couleurs par défaut ou sélectionner une couleur personnalisée à l'aide du sélecteur de couleurs. Il est également possible de définir l'opacité des couleurs. Ces paramètres de bloc de cluster vous aident à créer une présentation de site Web vraiment attrayante.

Nouveau bloc de groupe disponible dans le noyau

Quelle est la différence entre le bloc Groupe et le bloc AitThemes Cluster ?

Notre bloc Cluster personnalisé a été publié plus tôt que le bloc Group et fournit une solution plus complexe. Vous pouvez utiliser le bloc de groupe pour regrouper plusieurs blocs, mais ses fonctions sont toujours limitées. Par exemple, vous ne pouvez pas définir la superposition de couleurs dans le bloc - vous ne pouvez choisir que la couleur d'arrière-plan de base qui sera autour de l'image, pas au-dessus.

L'édition d'images d'arrière-plan est un jeu d'enfant dans notre bloc Cluster.

Vous pouvez télécharger sur votre image d'arrière-plan WordPress, définir sa couleur d'arrière-plan ainsi que la superposition de couleur d'arrière-plan (et également personnaliser l'opacité de la superposition !). Cela ne prend que quelques minutes.