Comment afficher des fichiers image SVG sur des pages construites avec Elementor
La diversité des périphériques, des tailles d'écran et des résolutions d'affichage rend l'évolutivité de la qualité et la réactivité indispensables pour offrir à votre public numérique une expérience optimale. Les SVG sont idéales pour illustrations comme logos, icônes et autres graphismes. SVG est un format graphique vectoriel. Littéralement, SVG signifie «graphiques vectoriels évolutifs». Le format SVG peut être créé et modifié dans des éditeurs graphiques comme Illustrator, Sketch ou Inkscape.
Utiliser des images SVG pour votre page Web présente quelques avantages:
- Modification facile. Beaucoup plus facile de modifier l'emplacement, la forme, la taille, les proportions, les couleurs et toutes les autres propriétés des parties constitutives de l'image par rapport aux graphiques raster.
- Une image suffit pour les écrans à haute densité de pixels. Les pixels nécessaires à l'affichage de l'image apparaissent immédiatement, en fonction de la taille de pixel requise.
- Vitesse de chargement rapide. Les concepteurs doivent également penser à la vitesse de chargement, car plus le délai d’envoi d’une demande d’affichage de la page est long, plus la conversion du projet est lente.
- Il est facile de rendre SVG adaptatif. Lorsqu'il est nécessaire d'afficher le logo du site dans une version simplifiée, SVG vous permet d'y parvenir en une seule demande au serveur.
- Interactivité. Il est possible d'inclure des liens, des scripts, des parties interactives et des animations dans l'image.
- SEO friendly. Les images SVG étant définies dans des fichiers texte XML, les mots clés et les descriptions peuvent être utilisés et plus facilement reconnus par les moteurs de recherche.
Les graphiques vectoriels permettent de redimensionner toutes les tailles sans perte de qualité. Voyons comment ajouter des images à vos pages Web sur WordPress et comment les redimensionner à n’importe quelle taille sans perdre la qualité de l’image. Nous verrons aujourd’hui comment ajouter des images SVG de tous types: logos, illustrations, diagrammes, etc., à l’aide d’Elementor Page Builder et de JetElements Plugin for Elementor.
Aujourd'hui, vous apprendrez à ajouter des fichiers image SVG sur des pages Elementor-Build à l'aide du widget SVG en ligne.
Notez que ce widget fait partie de plugin JetElements, alors tout d'abord, vous devez installer ce puissant additif d'Elementor. Une fois le processus terminé, ouvrez simplement votre site WordPress Elementor et suivez les instructions détaillées ci-dessous.
- Tapez "SVG" dans la ligne de recherche du panneau des éléments.
- Ensuite, saisissez le widget et déposez-le dans une nouvelle section à droite.
- Ensuite, vous verrez les paramètres de contenu simples sur la gauche.
- Cliquez sur l'espace vide pour ajouter votre fichier SVG - il suffit de le télécharger à partir de la bibliothèque Insert Media ouverte.
- Pour le rendre cliquable, ajoutez l’URL dans le champ sous SVG.
- Ensuite, allez à la section Style. Ici, vous pouvez activer l'utilisation de la largeur personnalisée et redimensionner l'image.
- Si vous basculez l’option Use Aspect Ratio sur “no” vous pourrez modifier manuellement la largeur et la hauteur.
- Et si vous souhaitez conserver le format d’image original du fichier SVG, il vous suffit de basculer cette option sur “yes”. Dans ce cas, vous ne déplacerez cette image que de haut en bas et le rapport de format d'origine reste toujours le même. Seule la taille de l'image entière sera modifiée.
- L'option suivante vous permettra d'utiliser des couleurs personnalisées pour votre image. Notez que cela dépend du type de fichier SVG que vous avez et du nombre de couleurs.
- Cependant, dans la capture d'écran ci-dessus, vous pouvez voir que vous pouvez définir une couleur pour toute l'image SVG.
- Si vous avez un logo n’ayant qu’une couleur, cette option apportera un effet vraiment intéressant à votre page.
- L’autre option que vous verrez est Remove Inline CSS. Elle permet de supprimer des styles en ligne dans le SVG chargé.
- De plus, dans ce bloc de paramètres, vous pouvez définir l'alignement: gauche, centre ou droite.
Elementor Page Builder est un outil assez universel. Avec son aide, vous pouvez littéralement tout faire, de la création d’animations et de billets de blogs à l’affichage même de fichiers d’images SVG. Si vous êtes un vrai fan de l'éditeur de contenu Elementor, alors cette offre va vous impressionner. TemplateMonster a récemment lancé un tout nouveau service d'abonnement appelé ONE. Il s'agit du premier service comprenant une gamme complète de produits allant des plug-ins et extensions à différents types de modèles et de graphiques.
Payez 19 $ par mois et obtenez l’ensemble complet des éléments nécessaires à la création de sites Web. Un bonus supplémentaire: vous n'êtes pas limité à les utiliser pour autant de projets que vous avez besoin. En outre, nous sommes heureux d’offrir une réduction de 5% sur l’abonnement à tous les lecteurs de MonsterPost. Il suffit d'appliquer le code promo BecomeThe1.
Conclusion
Nos félicitations! Vous avez ajouté une image SVG à votre page à l’aide du plug-in JetElements. Si vous avez des questions sur d'autres widgets de ce plugin, écrivez-les simplement ci-dessous dans les commentaires.
Claire est une écrivaine talentueuse et curieuse. Sa principale priorité est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'intéresse également activement à la littérature, aux traductions et communique avec plaisir avec les abonnés en ligne.