Ce tutoriel vous montre comment ajouter une image avec Elementor pour que vous puissiez ajouter vous-même des images dans vos pages web. Je l’ai créé à destination des clients ayant opté pour une de mes prestations en création de site internet WordPress.
Pour insérer une image avec Elementor, ouvrez la page concernée, puis cliquez sur le bouton + dans la barre noire en haut et à gauche de l’écran pour ajouter un élément.
Choisissez l’élément « Image » et placez-le dans un conteneur sur votre page (voir le tutoriel sur la création de pages avec Elementor pour comprendre comment utiliser les conteneurs).
Cliquez sur l’élément « Image » afin d’ouvrir la médiathèque WordPress de votre site web.
Pour choisir l’image à insérer, vous pouvez soit cliquer sur l’onglet « Téléverser des fichiers » afin de choisir une image dans votre ordinateur, soit aller dans votre médiathèque si l’image a déjà été téléchargée.
Une fois l’image téléchargée, vous voyez apparaître son nom de fichier, son poids (ici 8Ko), ses dimensions (ici : 300 pixels par 279) dans la colonne des paramètres à droite de votre médiathèque.
Ecrivez un texte explicatif dans la zone « Texte alternatif ». C’est utile pour les personnes souffrant d’un handicap visuel, mais aussi pour votre référencement naturel.
Indiquez un texte de légende, uniquement si vous voulez que ce texte apparaisse sous l’image dans la page web.
Le champ « Description » peut rester vide…
Vous pouvez répéter ces opérations afin d’ajouter une série d’images dans votre médiathèque.
Une image utilisée comme arrière-plan doit être suffisamment grande afin de couvrir la zone de l’arrière-plan, ou bien doit pouvoir être répétée comme un motif.
Commencez par importer l’image dans votre médiathèque WordPress.
Elementor propose de nombreux réglages de styles CSS pour afficher une image en arrière-plan.
Par exemple, l’image des nuages qui apparait en arrière-plan dans ce conteneur a comme réglages :
Pour que l’effet soit réussi dans cet exemple, il faut que l’image soit plus grande que les dimensions du conteneur.
Attention donc au temps de chargement de cette image dans votre navigateur : n’utilisez pas de fichiers JPG trop lourds.
Le format de fichier JPG (ou JPEG) est l’un des formats d’image les plus populaires et largement utilisés sur le web. C’est le format utilisé pour les photos, car il accepte plusieurs millions de teintes. Par contre, il ne peut pas avoir de fond transparent ou être animé.
Si vous créez une image qui comporte peu de couleurs (maximum 256) ou bien qui doit avoir un fond transparent, optez alors pour le format PNG, comme pour cette carte du Var.
Le format PNG sert aussi pour créer les logos ou les titres graphiques qui peuvent ainsi, avec un fond transparent, s’afficher par dessus n’importe quelle autre image.
Les images SVG sont créées sous forme vectorielle. Cela permet de les redimensionner à n’importe quelle taille sans que le poids de leur fichier ne change.
Leur autre intérêt est de pouvoir s’animer. Pour créer une image au format SVG, vous devez utiliser un logiciel ou bien consulter des banques d’images SVG.
Les vecteurs étant des traits, on ne peut pas avoir autant de détails qu’avec une image JPG. Les images SVG ne sont donc pas utilisées pour afficher des photos, mais plutôt des schémas ou des pictos, comme sur l’exemple de cette page.
Attention : le format SVG permet l’insertion de code malveillant. C’est pour cette raison que WordPress en interdit l’importation par défaut.
Il reste possible de contourner cette interdiction en ajoutant un plugin à WordPress (ex : SafeSVG), mais faites bien attention à ce que vous allez télécharger !
WebP et AVIF sont deux nouveaux formats d’image qui offrent des avantages intéressants en termes de compression et de qualité. Leur utilisation permet de réduire la taille de vos photos tout en maintenant une excellente qualité visuelle.
WebP est un format développé par Google (voir les explications de Google pour les développeurs). Il est reconnu par WordPress et par les navigateurs récents.
Si votre logiciel de traitement d’images le permet, vous pouvez créer directement des images au format WebP. Sinon, vous pouvez ajouter un plugin à WordPress pour qu’il effectue des conversions automatiques de vos fichiers JPG en fichiers WebP.
Il existe également une solution gratuite en ligne, Convertio.co, qui propose de convertir vos fichiers.
Ce format a été popularisé par Apple. Il est conçu à partir d’un Codec vidéo Open Source qui permet la compression d’images avec ou sans perte.
C’est cette gratuité qui en fait son principal intérêt, ainsi que la possibilité de choisir, selon le type d’image, le niveau de qualité d’affichage.
Il est également supporté par WordPress et les navigateurs récents et vous pouvez aussi trouver facilement de quoi convertir vos photos JPG en AVIF.
Les deux formats se valent. De mon point de vue, si vous êtes plutôt Windows et Google, vous aurez tendance à utiliser WebP. Si votre coeur balance côté Apple, vous irez vers le format AVIF !
Dans tous les cas, transformer toutes les images de votre site web dans l’un de ces deux formats est une excellente solution pour réduire le temps de chargement de vos pages, ce qui est un critère important pour le référencement naturel de vos contenus.
Je suis à votre disposition pour vous proposer mes prestations en création de site Internet sous WordPress :
Ce tutoriel vous montre comment ajouter une image avec Elementor pour que vous puissiez ajouter vous-même des images dans vos pages web. Je l’ai créé à destination des clients ayant opté pour une de mes prestations en création de site internet WordPress. Table des matières L’élément Image d’Elementor Pour insérer
Elementor est le constructeur de pages le plus puissant pour créer du contenu dans un site WordPress. Même si vous n’avez pas de compétences en création de sites web, vous pouvez apprendre rapidement à l’utiliser. C’est ce que je propose à mes clients, après avoir créé la maquette et la
WordPress est un système de gestion de contenu (CMS) open-source très populaire, utilisé pour créer et gérer des sites web. Lancé en 2003, il a évolué pour devenir l’une des plateformes les plus utilisées pour les blogs, les sites de commerce électronique, les portfolios, et bien plus encore. Caractéristiques principales
Retrouvez-moi sur les réseaux sociaux :
Je suis Activateur pour France Num dans le Var (83)
Découvrez mes prestations de pilote de drone sur mon site dronoclip.fr
(c) Diginoman – Tous droits réservés
