Comment ajouter une zone d'image dans WordPress : 3 étapes simples 

Vous voulez rendre vos pages WordPress visuellement éclatantes ? Ensuite, les boîtes d’images sont l’élément secret.

Vous pouvez présenter des produits, mettre en valeur les membres de votre équipe ou attirer l'attention de vos clients sur des fonctionnalités clés avec la zone d'image dans WordPress. 

Et vous l’avez bien deviné !

Dans cet article, nous décrirons le Guide en 3 étapes sur la façon d'ajouter une zone d'image dans WordPress.

Commençons!

Qu’est-ce qu’une boîte à images dans WordPress ? 

Une zone d'image est un élément graphique ou un conteneur conçu pour afficher des images dans une page Web ou une publication. Vous pouvez combiner texte et liens avec des photos pour présenter les informations de manière attrayante et visuellement attrayante. Il est également utile d’améliorer la conception globale et l’expérience utilisateur d’un site Web WordPress.

Les zones d'image sont couramment utilisées dans les pages Web pour créer des sections telles que :

• Mettre en évidence les fonctionnalités ou services clés
• Présentation d'articles de blog ou de portfolios
• Afficher des images et galeries de produits
• Présentation des membres de l'équipe 
• Afficher des témoignages, etc.

Composants clés de la boîte d'images WordPress

• Image: L'élément visuel principal, présentant souvent un produit, un service, un membre de l'équipe ou un concept connexe.
• Titre: Un titre court et descriptif qui capture l'essence de l'image et du texte qui l'accompagne.
• Texte: Une brève description ou un extrait d’informations pour fournir le contexte et les détails.
• Bouton/Lien : Un bouton ou un lien cliquable pour diriger les utilisateurs vers une page, un produit ou d’autres ressources pertinentes.

Comment ajouter une zone d'image dans WordPress : guide en 3 étapes 

Les boîtes d'images peuvent transformer vos pages WordPress en chefs-d'œuvre visuellement époustouflants. Cela captive également votre public et laisse une impression durable.

Voyons comment créer une zone d'image dans WordPress en seulement 3 étapes simples :

Étape 1 : installer et activer les plugins nécessaires

Pour ajouter une zone d'image à votre site WordPress, vous pouvez utiliser soit du code liquide, soit des plugins Elementor. Dans ce cas, l’utilisation de plugins est un moyen pratique de créer et d’ajouter des zones d’image sans même avoir de connaissances en codage. 

Ainsi, vous pouvez opter pour un Module complémentaire Elementor tout-en-un — ElementsKit. Ce plugin étonnant offre des fonctionnalités étendues et des modèles prêts pour ajouter des images à votre site Web WordPress. De plus, la conception de la zone d'image et tous les éléments de la zone d'image ElementsKit sont entièrement personnalisables.

Pour installer le plugin ElementsKit image box, accédez à votre tableau de bord WordPress.

• Aller vers Plugins ➡ Ajouter un nouveau 
• Rechercher « Kit d'éléments » 
• Cliquer sur "Installer maintenant"
• Ou téléchargez et chargez le fichier zip
• Activez le plugin une fois installé

Étape 2 : Ajoutez une zone d'image à votre site WordPress

Après avoir installé et activé le plugin WordPress image box, c'est-à-dire ElementsKit, vous pouvez utiliser son modèles prédéfinis. Ces modèles sont faciles à utiliser en un seul clic. De plus, vous pouvez ajouter/supprimer des éléments en fonction de vos besoins. 

Voyons comment ajouter des images dans WordPress en utilisant le Zone d'image ElementsKit: 

• Créez une nouvelle page/article ou ouvrez-en une existante 
• Ouvrir avec Elementor 
• Clique sur le Icône « ElementsKit » 

• Ensuite, vous devez sélectionner le widget boîte d'image dans le menu Catégorie de widgets ElementsKit 
• Cliquer sur « Boîte à images »

• Ici, vous pouvez accéder 11 gratuits et 8 design et style premium variantes; un total de 19 modèles différents pour ajouter une zone d'image au site WordPress
• Tu peux voir le aperçus de tous les modèles pour comprendre le design et les éléments qui correspondent à votre site Web
• Clique sur le signe plus (+) pour voir l'aperçu en direct 

• Après avoir finalisé le design, cliquez sur "Insérer"
• Il sera ajouté à votre page/post 
• Maintenant vous pouvez ajouter/supprimer ou modifier le contenu, les styles et autres propriétés de la zone d'image
• Après toute la personnalisation, cliquez sur "Publier". Et la zone d'image sera en direct sur votre site WordPress.

Étape 3 : Personnalisez les styles et les paramètres 

ElementsKit, un excellent module complémentaire pour Elementor est un plugin entièrement personnalisable car les utilisateurs peuvent utiliser son Plus de 85 widgets et modules. Comme d’autres éléments, le widget zone d’image est également personnalisé selon vos besoins. 

Vous pouvez modifier les titres et le contenu du corps. Encore une fois, vous pouvez modifier les styles des images et des boutons d’appel à l’action. De plus, vous pouvez personnaliser les zones d'image avec de nombreux effets et formats.

Voyons comment personnaliser une zone d'image dans WordPress : 

Personnalisation de la mise en page

Après avoir inséré les modèles de zones d'image prédéfinis d'ElementsKit dans WordPress, vous pouvez ajuster sa mise en page. 

• Augmenter ou diminuer la largeur de la zone d'image
• Définir l'espace entre les colonnes comme étant étroit, étendu, large, personnalisé ou sans espace
• Ajuster la hauteur et l'alignement de la zone d'image 
• Conserver le débordement par défaut ou caché 
• Utilisez des balises HTML, par exemple en-tête, pied de page, main, article, etc.

Personnalisation du contenu

La zone Image dans WordPress contient un contenu différent pour différents éléments tels que titres, images, boutons, etc. Vous pouvez changer le texte et modifier leurs propriétés.

Voyons comment personnaliser le contenu de la zone d'image ElementsKit dans WordPress. 

✨ Titre 

• Modifier les titres des titres et des sous-titres 
• Insérer des liens avec le titre
• Masquer/afficher la bordure avec la position de début/fin 
• Ajouter/afficher ou masquer la description du titre 
• Ajouter des séparateurs avec différents styles et positions 

✨ Image 

• Changer l'image ou ajouter des images générées par l'IA
• Ajustez la taille de l'image, par exemple pleine, moyenne, grande, personnalisée, etc.
• Définissez la zone de contenu comme une ligne d'ombre simple, classique, etc.
• Activer/désactiver l'égalité de hauteur 
• Insérer une URL pour lier une autre ressource 

✨Corps 

• Ajouter/supprimer ou modifier le texte du titre
• Modifier la balise HTML du titre
• Ajustez l’alignement du titre à gauche, à droite ou au centre 

✨ Bouton

• Activer ou désactiver le bouton créatif
• Ajouter un texte d'étiquette de bouton personnalisé 
• Ajouter une URL personnalisée
• Ajouter/supprimer l'icône et régler le piston 

Personnalisation du style 

Avec la mise en page et le contenu, vous pouvez également modifier leurs styles. En conséquence, vous pouvez créer différents types de zones d’image adaptées à l’interface utilisateur de votre site WordPress et à d’autres propriétés. 

✨ Ligne d'Ombre 

• Choisissez la ligne d'ombre pour la gauche ou la droite
• Définir une largeur personnalisée selon les besoins
• Personnalisez le type et la couleur de l'arrière-plan de l'ombre 
• Définir une image d'arrière-plan personnalisée 

✨Image 

• Ajouter un rayon de bordure et un remplissage personnalisés 
• Ajustez l'opacité de l'image pour un rendu normal ou effet de survol 

✨Corps 

• Choisissez le type de bordure avec border-radius
• Définir une image, un type et une couleur d'arrière-plan personnalisés 
• Ajuster le remplissage de la boîte et la couleur de l'ombre de la boîte 
• Ajuster la typographie, la couleur et l'espacement du titre

✨ Bouton 

• Personnaliser la valeur de remplissage et la taille de la police de l'icône 
• Changer le texte du bouton et la couleur d'arrière-plan 
• Définir les propriétés normales ou de survol 
• Définir le type de bordure, le rayon de bordure et l'ombre de la boîte 

Personnalisation avancée 

La zone d’image ElementsKit est flexible pour utiliser des fonctionnalités de personnalisation avancées. Cela contribue à rendre votre boîte d’image plus élégante et attrayante. Vous pouvez également intégrer divers effets de mouvement ainsi que des codes personnalisés pour faire correspondre la zone d'image avec la page Web particulière de votre site Web.

Vous trouverez les options de personnalisation dans les paramètres avancés :

• Modifier le remplissage, la marge, la largeur, la position et l'index z de la disposition de la zone d'image
• Ajoutez des effets de mouvement pour les éléments (par exemple, fondu entrant, fondu sortant, rebond avant, zoom avant, glissement vers la gauche, etc.)
• Personnalisez la réactivité de la zone d'image en fonction des appareils tels que le PC, l'onglet et le mobile 
• Définir les attributs et les propriétés à masquer/afficher sur divers appareils 
• Inclure du CSS personnalisé pour une modification de fonctionnalités supplémentaires 

Avantages de l’ajout d’une zone d’image dans WordPress

• Améliorer l'attrait visuel : Une zone d'image attrayante divise le contenu contenant beaucoup de texte. En outre, cela rend les pages plus attrayantes visuellement et plus faciles à numériser.
• Mettez en surbrillance les informations de base : Vous pouvez mettre en évidence des messages, des fonctionnalités ou des appels à l'action importants.
• Améliorer l'engagement des utilisateurs : En utilisant les éléments de zone d’image dans WordPress, vous pouvez également créer des expériences visuellement convaincantes. Cela peut garder les utilisateurs intéressés et explorer votre contenu.
• Augmentez les taux de clics : Les boîtes d'images avec des appels à l'action (CTA) clairs peuvent encourager les utilisateurs à cliquer et à en savoir plus.
• Informations sur la structure : Vous pouvez organiser le contenu en sections logiques et améliorer la lisibilité grâce à la navigation.

5 conseils pour ajouter une zone d'image dans WordPress 

L'ajout d'une zone d'image à votre site Web WordPress rend efficacement votre contenu plus attrayant et informatif. 

Explorons 5 conseils pour en faire un site plus efficace et plus accrocheur élément sur votre site :

1. Optimiser la taille des images

Utilisez des outils comme MinusculePNG ou des plugins d'optimisation d'image pour réduire la taille des fichiers image sans compromettre la qualité. Cela améliore considérablement les vitesses de chargement des pages.

2. Maintenir la cohérence

Utilisez des images avec un style, une palette de couleurs et des proportions cohérents pour créer une expérience visuelle cohérente. Assurez-vous également que les zones d’image s’alignent avec les autres éléments de la page pour un aspect soigné.

3. Utilisez le texte alternatif descriptif

Fournissez un texte alternatif descriptif pour chaque image. Cela aide les lecteurs d'écran à décrire les images pour les utilisateurs malvoyants et améliore la visibilité des moteurs de recherche.

4. Pensez à la réactivité mobile

Vérifiez que les zones d'image s'affichent correctement sur différentes tailles d'écran, en particulier sur les appareils mobiles. Utilisez des techniques de conception réactive ou des plugins pour garantir une adaptation transparente.

5. Lien stratégique (le cas échéant)

Associez les zones d'image au contenu ou aux pages de destination pertinents pour guider les utilisateurs et encourager les actions souhaitées.

Bon à savoir 👉 Comment appliquer le masquage d'image Elementor en 4 étapes faciles avec ElementsKit

FAQ

Envelopper

Pour décorer vos sites WordPress avec des images, rien de plus captivant et informatif que la boîte à images ElementsKit.

Nous avons fourni ici un guide étape par étape sur la façon de ajoutez facilement une zone d'image à votre site WordPress. Nous avons également montré comment utiliser le Plugin ElementsKit Elementor pour plus d’impact et expérimentez différents styles et mises en page de zones d’image. 

Ainsi, la puissance des visuels est désormais à portée de main : utilisez-la efficacement et faites vraiment briller votre contenu ! 🥳