bloggerselite logo

Comment ajouter une image dans un texte avec Elementor

Comment ajouter une image dans un texte avec Elementor

Voulez-vous ajouter une image dans un texte dans Elementor ? Dans cet article, nous allons vous guider dans ce processus.

En utilisant Elementor, vous pouvez facilement ajouter différents styles à votre site Web sans avoir aucune connaissance en codage. Vous pouvez utiliser l’éditeur visuel pour créer n’importe quelle conception sans connaissances avancées en CSS et HTML.

Elementor fournit une large gamme de widgets pour vos besoins. Avec l’éditeur visuel, si vous avez des connaissances CSS, vous pouvez faire beaucoup plus de choses étonnantes. Vous pouvez utiliser les CSS personnalisés pour ajouter d’autres styles à vos pages Web. L’ajout d’images dans un texte peut ajouter apporter une différence par rapport aux autres sites Web.

Lire aussi : Elementor Cloud – La solution clé en main pour les créateurs Web

Dans Photoshop, vous pouvez le faire en ajoutant un calque, mais sur votre site Web, vous devez ajouter quelques lignes de code CSS. Voyons donc comment vous pouvez ajouter une image dans un texte avec l’aide d’Elementor.

Ajouter une image dans un texte dans Elementor

Le CSS personnalisé n’est disponible qu’avec Elementor pro. Donc, avant d’ajouter une image dans un texte, vous devez mettre à niveau votre version d’Elementor. Assurez-vous d’activer Elementor Pro, puis ouvrez une page où vous souhaitez ajouter une image dans un texte avec l’éditeur d’Elementor. Cliquez ensuite sur l’icône « + » pour créer une section.

Comment ajouter une image dans un texte avec Elementor

Puis choisissez la structure à une colonne.

ajouter une image dans un texte dans Elementor

Après avoir créé la section, ajoutez le widget Titre à la section que vous avez créée.

ajouter une image dans un texte dans Elementor

Vous pouvez modifier le texte du titre à partir de l’onglet Contenu du widget Titre. Passez à l’onglet Style où vous trouverez différentes options de style pour personnaliser l’apparence de votre texte. Vous pouvez modifier la couleur du texte, l’ombre du texte et le mode de fusion du texte.

Consultez aussi : Comment ajouter un bouton Skype dans Elementor

À partir de l’option de typographie, vous pouvez définir la famille de polices, la taille de police, l’épaisseur des lignes, l’espacement des lettres et bien d’autres choses.

ajouter une image dans un texte dans Elementor

Vous devez maintenant téléverser l’image que vous souhaitez ajouter au texte sélectionné. Pour le faire, allez à Média > Ajouter nouveau, puis sélectionnez l’image à télécharger. Lorsque votre image est téléversée , vous pourrez voir une option pour copier l’URL de l’image. Copiez l’URL de l’image, puis revenez à l’Editeur d’Elementor.

ajouter une image dans un texte dans Elementor

Accédez à l’onglet Avancé du widget Titre où vous trouverez le champ CSS personnalisé. Assurez-vous de passer à Elementor Pro, sinon vous ne pourrez pas utiliser cette fonctionnalité.

Découvrez aussi : Comment exclure les commentaires de la Table des matières dans Elementor

Ensuite, dans le champ CSS personnalisé, ajoutez le code suivant.

selector .elementor-heading-title
{
background: url("https://bloggerselite.com/wp-content/uploads/2022/08/image-into-text.jpeg") yellow repeat 40% 60%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

Cela ajoutera l’image sélectionnée au texte.

FAQ

Qu’est-ce qu’Elementor et comment fonctionne-t-il ?

Elementor est un constructeur de pages WordPress qui permet de créer des pages web en glisser-déposer sans besoin de coder.

Quels types d’images puis-je ajouter avec Elementor ?

Vous pouvez ajouter des images JPEG, PNG, GIF, et SVG, parmi d’autres formats.

Comment puis-je redimensionner une image dans Elementor ?

Utilisez les options de dimensionnement dans le panneau de style pour ajuster la taille de l’image.

Puis-je ajouter des effets aux images dans Elementor ?

Oui, Elementor permet d’ajouter des effets comme des ombres, des bordures, et des animations.

Est-ce que les images ajoutées avec Elementor sont responsives ?

Oui, Elementor permet d’ajuster les images pour qu’elles soient responsives et s’affichent correctement sur tous les appareils.

Puis-je utiliser des images de la bibliothèque de médias WordPress dans Elementor ?

Absolument, vous pouvez facilement accéder et utiliser des images de votre bibliothèque de médias WordPress.

Comment puis-je ajouter du texte sur une image dans Elementor ?

Utilisez le widget “Image Box” ou “Overlay” pour superposer du texte sur une image.

Puis-je ajouter des liens à des images dans Elementor ?

Oui, vous pouvez ajouter des liens à des images pour rediriger les visiteurs vers d’autres pages ou sites web.

Comment optimiser les images pour le SEO dans Elementor ?

Utilisez des noms de fichiers descriptifs, des balises ALT, et compressez les images pour améliorer le temps de chargement.

Quels sont les avantages d’ajouter des images dans mes textes ?

Les images rendent votre contenu plus attrayant, augmentent l’engagement des utilisateurs et améliorent la compréhension de l’information.

Conclusion

Ajouter des images à vos textes avec Elementor est une excellente façon d’améliorer l’apparence et l’engagement de votre site web. En suivant notre guide, vous pouvez facilement insérer et personnaliser des visuels qui captiveront vos visiteurs.

Voilà! Désormais avec ce processus, vous pourrez ajouter une image au texte.

Lire aussi : Comment créer un popup de vérification d’âge dans Elementor

N’oubliez pas de partager cet article avec vos amis et collègues pour les aider à tirer le meilleur parti d’Elementor. Vos commentaires et partages nous encouragent à continuer à fournir des conseils utiles et pratiques.

Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x