Comment afficher des images dans WordPress avec Elementor : les méthodes créatives

Ce n’est un secret pour personne : les images constituent un élément important de tout site Web. Cela améliore l’attrait visuel du site Web ainsi que l’engagement. Dans WordPress, insérer des images dans vos articles et pages est assez simple. 

Une façon d'afficher des images consiste simplement à ajouter des médias dans l'éditeur classique. Une autre façon consiste à utiliser les blocs Image dans l’éditeur Gutenberg. Dans les deux cas, les styles sont prédéfinis dans le thème.

Cependant, Elementor offre une flexibilité dans l'affichage des images dans WordPress. Il offre une variété de façons créatives d’afficher des images sur votre site Web. Plus important encore, chaque élément de l'image est personnalisable individuellement.

Utiliser des éléments comme Boîtes d'images, Galeries d'images, Masquage des images
vous pouvez créer des sections d’images époustouflantes.

Avec un peu de créativité et d’attention aux détails, vous pouvez faire en sorte que votre site Web se démarque des autres en utilisant ces éléments.

Cet article vous expliquera comment afficher des images dans WordPress avec Elementor pour concevoir une interface intuitive et conviviale pour afficher des images sur votre site Web.

Pourquoi les images sont importantes pour votre contenu Web

Lorsque nous voyons une image, le cerveau humain commence automatiquement à analyser et à catégoriser les informations visuelles qu'il reçoit, sans effort conscient. Ce processus rend le contenu plus facile à mémoriser et à rappeler.

En outre, les images peuvent rendre votre contenu plus attrayant et accrocheur pour les visiteurs en améliorant l’attrait visuel d’un site Web. 

Voici quelques raisons pour lesquelles les images sont importantes pour le contenu Web :

• Capte facilement l’attention : Les images peuvent être utilisées pour attirer l’attention d’un visiteur et l’attirer vers votre contenu. Ceci est particulièrement important pour les sites Web visant à vendre des produits ou des services.
• Transmettre rapidement des informations : Parfois, une image peut communiquer des informations plus rapidement et plus efficacement qu’un texte. Par exemple, une infographie peut transmettre simplement des informations complexes.
• Rompre la monotonie : Les gros blocs de texte peuvent être fastidieux et monotones à lire. Les images peuvent aider à diviser le long texte et à attirer l’attention sur votre contenu.
• Laisse une marque durable dans la mémoire : Le cerveau humain peut traiter les informations visuelles beaucoup plus rapidement que les informations textuelles ou verbales et peut les conserver pendant une durée à long terme.
• Rend votre contenu plus partageable : Les plateformes de médias sociaux comme Facebook et Instagram sont très visuelles et les photos sont souvent plus partageables que le texte seul. En incluant des images de haute qualité sur votre site Web, vous pouvez augmenter la probabilité que les visiteurs partagent votre contenu sur les réseaux sociaux.
• Notoriété de la marque : Les images peuvent contribuer à améliorer votre image de marque en présentant votre logo ou d'autres éléments visuels associés à votre marque.

Comment ajouter des images dans WordPress (méthode de base)

La manière la plus simple d'afficher des images sur WordPress consiste à ajouter une image à la médiathèque et à l'afficher avec les styles par défaut.

Pour ajouter une image à la médiathèque WordPress :

Connectez-vous à votre WordPress, allez sur Média > Ajouter un nouveau, puis sélectionnez l'image sur votre ordinateur à télécharger dans la bibliothèque multimédia.

Désormais, l'affichage des images sur WordPress dépend de l'éditeur par défaut que vous utilisez.

Éditeur Gutenberg :

Dans la configuration par défaut de WordPress Gutenberg alias éditeur de blocs, vous pouvez afficher des images à l'aide de blocs d'images. Pour cela, ouvrez l'éditeur et ajoutez le bloc image à la position souhaitée pour afficher l'image. Ensuite, téléchargez ou sélectionnez une image dans la médiathèque.

Éditeur classique :

Si vous utilisez un ancien éditeur classique, ouvrez une page ou une publication sur l'éditeur, puis placez le curseur de la souris sur la publication/la page où vous souhaitez afficher l'image. Après cela, cliquez sur le bouton Ajouter un média et sélectionnez une image dans la bibliothèque multimédia.

Comment afficher des images dans WordPress à l'aide d'Elementor (méthodes avancées)

Désormais, si vous souhaitez des moyens plus avancés d'afficher des visuels, vous pouvez passer au générateur de pages Elementor. Avec Elementor, vous pouvez utiliser les widgets d'images pour présenter les images de sites Web de manière créative. 

Faisant passer les choses au niveau supérieur, l'addon ElementsKit Elementor est livré avec un tas de widgets qui peuvent vous permettre d'afficher des images avec style avec les fonctionnalités les plus personnalisables. ElementsKit est livré avec des widgets tels que Elementor Image Box, Image Gallery, Image Swap, etc. Ces widgets vous offrent diverses options pour afficher des images avec style. 

Voici une démonstration de la façon dont vous pouvez utiliser ces widgets pour afficher des images sur WordPress et rendre votre site plus vivant.

Installer ElementsKit

Pour utiliser les fonctionnalités d'image avancées, vous devez installer les plugins ElementsKit Lite et ElementsKit Pro sur votre site WordPress.

Voici la documentation pour installer les plugins ElementsKit

Après avoir installé les plugins, vous pouvez continuer avec les widgets pour afficher des images sur WordPress.

Méthode 1 : afficher des images dans une boîte à images élégante

À l’aide du widget ElementsKit Image Box, vous pouvez mettre en surbrillance une section avec une combinaison d’image et de texte. Il vous permet d'afficher une image avec du texte comme un titre et une description. Ces styles sont souvent utilisés pour mettre en valeur un produit, un service ou une fonctionnalité phare.

Pour utiliser la fonctionnalité : activez le widget Image Box depuis ElementsKit > Widget.

Voici comment utiliser le widget ElementsKit Image Box pour Elementor :

Image

Dans la section image, vous pouvez personnaliser l'image et son apparence.

1. Choisissez une image : Sélectionnez une image dans la médiathèque ou téléchargez-en une.
2. Taille de l'image: Définissez la taille de l'image.
3. Zone de contenu: Vous pouvez choisir le style de la zone de contenu parmi les options proposées.
4. Hauteur égale : Activez ou désactivez la hauteur égale pour l'image et la zone de contenu.
5. Activer le lien : Vous pouvez utiliser l'image comme section d'ancrage en activant le lien. Lorsqu'il est activé, ajoutez le lien vers l'image.

Corps

Dans la section corps, vous pouvez ajouter tout le texte à la zone d’image Elementor. Cela inclut un titre, une description, une balise HTML de titre et un alignement du texte.

1. Titre: Ajoutez le texte du titre dans ce champ.
2. Balise HTML du titre : Sélectionnez la balise HTML souhaitée pour le titre (H1, H2, H3, div, span, paragraphe, etc.)
3. Description: Dans ce champ, ajoutez une brève description du contenu.
4. Alignement: Définissez l'alignement du texte pour l'image, le titre, la description et le bouton.

Bouton

Vous avez la possibilité d'ajouter un bouton CTA sur la zone d'image Elementor. Pour ça,

1. Activer le bouton : Pour ajouter un bouton sur la zone d'image, activez cette option.
2. Étiquette: Ajoutez une étiquette de bouton (texte) qui indique l’objectif du CTA.
3. URL : Entrez le lien de la page sur laquelle vous souhaitez rediriger le visiteur une fois qu'il a cliqué.
4. Ajouter une icône : Si vous souhaitez afficher une icône avec l'étiquette du bouton, activez cette fonctionnalité.
5. Icône: Choisissez une icône dans la bibliothèque d'icônes Elementor.
6. Position de l'icône : Sélectionnez si l'icône sera avant ou après le texte du bouton.

Ensuite, sous l'onglet style, vous pouvez personnaliser l'apparence de la zone d'image Elementor, y compris les couleurs, l'arrière-plan, la typographie, etc.

Dans le Courbes classiques section, vous pouvez ajuster la largeur et la marge de la zone de contenu. Stylisez ensuite l’image en modifiant le remplissage et l’opacité. 

En outre, vous pouvez personnaliser l’apparence du texte de titre et de description en modifiant la couleur, la typographie, la couleur d’arrière-plan, etc. De plus, personnalisez les styles de boutons et son icône avec leurs attributs.

Regardez la vidéo pour obtenir des connaissances plus détaillées sur le widget ElementsKit Image Box.

Méthode 2 : Afficher deux images avec des animations d'échange

L'échange d'images est un moyen élégant d'afficher deux images alternatives en un seul endroit qui s'échangent lorsque les visiteurs survolent ou cliquent sur l'image. Le widget ElementsKit Image Swap est livré avec quelques dizaines d'effets époustouflants qui rendent votre site Web encore plus attrayant visuellement.

Vous pouvez utiliser cette fonctionnalité, par exemple en utilisant la première image comme image de couverture qui attire l'attention et la deuxième image pour fournir les informations nécessaires.

Pour utiliser la fonctionnalité : activez le widget Image Swap depuis ElementsKit > Widget.

Voici comment utiliser le widget ElementsKit Image Swap pour Elementor :

1. Image avant : Il s'agit de l'image qui apparaît par défaut lors du chargement de la page sur le navigateur Web.
2. Image arrière: C'est l'image qui apparaît lorsque l'action est effectuée, c'est-à-dire qu'un visiteur survole ou clique sur l'image.
3. Taille de l'image: Définissez la taille de l'image pour les deux images.
4. Style d'échange : Vous disposez de 21 effets d'échange différents disponibles avec le widget ElementsKit Image Swap, qui peuvent vous aider à rendre votre conception Web plus attrayante pour les visiteurs.

5. Tigrou : Ici, vous pouvez choisir entre une action de survol ou de clic pour déclencher les images d'échange.
6. Indicateurs : Cela fonctionne comme un navigateur, qui indique quelle image est à l'écran et laquelle est en arrière-plan.
7. Lien: Vous pouvez lier les images à une page si vous le souhaitez.

Dans l'onglet Style, vous pouvez ajuster la hauteur de l'image et la durée de l'animation d'échange. Et si vous activez l'indicateur, vous pouvez modifier leur position et personnaliser leur taille et leurs couleurs.

Méthode 3 : Donner des formes uniques aux images du site Web avec le masquage d'image

C’est une façon unique de rendre votre site Web vivant avec des images aux formes uniques. Les fonctionnalités de masquage d'image transforment les images de forme traditionnelle en images plus attrayantes. Dans WordPress, le masquage est assez simple avec Elementor.

L'ElementsKit pour Elementor est livré avec un module de masquage pour les images. Le module est disponible pour tous les éléments d'Elementor qui impliquent une image. Dans l'éditeur Elementor, activer le masquage ElementsKit et sélectionnez une forme parmi celles préchargées. Vous pouvez également ajouter une forme personnalisée aux images.

Méthode 4 : présenter des images dans une galerie

Elementor propose un excellent moyen de présenter plusieurs images dans une galerie élégante. Le widget Basic Gallery d'Elemntor fonctionne avec une approche traditionnelle dans laquelle vous pouvez ajouter des images, définir la taille de l'image et personnaliser les éléments de base tels que l'espacement et les bordures de l'image.

Cependant, le Widget de galerie d'images ElementsKit est livré avec des options plus flexibles. Avec le widget, vous pouvez personnaliser la mise en page avec des descriptions, ajouter des filtres sur la galerie et individuellement chaque aspect de la vignette, du overlay, de l'image et des filtres.

Apprenez-en davantage sur le widget Galerie d’images et sur la manière dont il peut améliorer la conception de votre site Web sur notre blog.

Conclure

Dans l’ensemble, Elementor propose plusieurs façons d’afficher des images dans WordPress. Pour tirer le meilleur parti des capacités d'Elementor, ElementsKit peut être un excellent ajout.

ElementsKit a diverses manières et styles : Zone d'image pour afficher une image avec un titre et une description ; Image Swap pour afficher alternativement deux images ; Il existe également des widgets Galerie d'images et Masquage d'images pour vous offrir plus d'options.

Chacun de ces éléments offre des fonctionnalités uniques et des options de personnalisation, vous permettant de créer un contenu engageant et visuellement attrayant pour votre site Web.

Si vous trouvez cela utile, il y en a d'autres pour vous avec ElementsKit. Ce Modules complémentaires Elementor est livré avec des dizaines d'éléments supplémentaires qui peuvent vous aider à créer et à concevoir un site Web avec le plus grand nombre de fonctionnalités et d'optionnalités.