Créez de manière créative une boîte d'images dans Elementor

L'adaptation de votre site web peut être influencée de manière décisive par l'utilisation de contenu photographique. Avec la Boîte d'images dans Elementor, vous avez la possibilité de présenter des images avec des titres et des descriptions de manière créative. Suivons ensemble les étapes importantes pour utiliser efficacement cette fonctionnalité.

Principales conclusions

• La Boîte d'images permet d'insérer des images, des titres et des textes.
• Vous pouvez télécharger des images depuis votre médiathèque ou de manière externe.
• Les éléments HTML aident à formater le texte.
• Les différences dans la conception des images telles que les propriétés de la typographie et les effets au survol sont importants.

Guide étape par étape

1. Insérer la Boîte d'images

Tout d'abord, vous devez ajouter la Boîte d'images à votre éditeur Elementor. Vous pouvez glisser l'élément directement depuis la sélection dans un nouvel onglet et le déposer à l'endroit désiré sur votre site web. Cela vous prépare une mise en page de base avec de la place pour une image, un titre et une description.

2. Sélectionner une image

Maintenant, choisissez une image. Allez dans votre médiathèque ou téléchargez une nouvelle image. Assurez-vous que l'image a une qualité adéquate et est dimensionnée de manière optimale. De préférence, elle ne doit pas dépasser 200 MB pour ne pas affecter le temps de chargement de votre site web.

3. Définir la taille de l'image

Pour ajuster l'affichage de l'image, vous pouvez choisir différentes options de taille: miniature, moyen, grand ou taille originale. Veillez à ce que l'image choisie s'accorde avec la conception globale de votre page. Un espacement excessif dû à un format d'image inadapté peut diminuer l'impact visuel.

4. Formater le titre

Allez dans la zone de titre de la Boîte d'images. Vous pouvez saisir le titre de votre collection d'images, par exemple "Drapeau d'Autriche". Réfléchissez à un titre percutant qui attire immédiatement l'attention.

5. Ajouter une description

Si vous le souhaitez, vous pouvez également ajouter une description en dessous du titre. C'est optionnel, mais c'est un bon moyen de fournir plus d'informations à vos visiteurs. Si la description est longue, vous devriez utiliser des balises HTML pour créer des paragraphes.

6. Formater le texte avec HTML

Pour insérer un saut de ligne dans le texte, vous devez utiliser des éléments HTML. Par exemple, la balise
est utilisée pour créer un retour à la ligne. Renseignez-vous en ligne sur les codes HTML si vous souhaitez en savoir plus sur le formatage du texte.

7. Ajouter un lien

Vous pouvez également ajouter des liens en relation avec l'image. Cela peut être des liens vers vos pages générales ou des contenus spécifiques comme votre chaîne YouTube. Assurez-vous de saisir correctement le lien pour que les utilisateurs puissent y accéder directement.

8. Position et alignement de l'image

Maintenant, vous pouvez déterminer le placement de l'image dans la boîte: à gauche, à droite ou au centre. Renseignez-vous également sur la typographie pour le titre et la description, afin que la police ait un aspect accueillant pour vos visiteurs.

9. Personnaliser le style

Vous pouvez ajuster les arrière-plans des images et des textes, les espacements ainsi que le rayon de bordure. Notez que l'ajustement du rayon de la bordure peut arrondir l'image et lui donner un aspect plus élégant.

10. Configurer les effets de survol

Définissez comment les images doivent réagir lorsque l'utilisateur passe la souris dessus. Vous avez la possibilité d'ajouter des animations, comme faire légèrement grossir l'image ou changer la transparence. Ces effets contribuent à l'expérience utilisateur de votre site web et le rendent plus dynamique.

11. Paramétrer la typographie pour le titre et la description

Enfin, vous pouvez configurer la typographie pour le titre et la description. Expérimentez avec différentes polices et couleurs pour améliorer le design de votre site web. Cela rendra le texte plus convivial pour les lecteurs et plus attrayant visuellement.

Résumé

Le module Images dans Elementor offre de nombreuses possibilités pour présenter du contenu visuel. Vous pouvez travailler de manière créative tout en améliorant l'expérience utilisateur. En apportant des formats appropriés, des effets hover et des liens attrayants, vous rendez vos images encore plus intéressantes.