L'Iframe est principalement une partie de la même structure HTML qui gère un site web. Il vous permet d'ajouter ou d'incorporer du contenu provenant d'autres sites web dans votre site.
Pour de nombreuses raisons, vous pouvez avoir besoin de créer un widget iframe sur votre page web. Il peut s'agir d'images, de vidéos, d'une autre page web, etc.
En général, l'idée est d'accélérer le chargement de l'élément cible à partir d'une source externe et de réduire la charge sur votre site.
Pour ce qui est de l'intégration, il existe deux façons de créer un widget iframe dans Elementor :
- Utiliser un shortcode brut
- Utiliser un plugin Elelemntor Iframe
Dans ce blog, nous allons vous expliquer exactement comment vous pouvez créer un widget iframe dans Elementor.
Méthode 1 : Créer un widget iframe Elementor avec un shortcode
Faisant partie d'un logiciel open-source WordPress, Elementor dispose d'un grand nombre d'intégrations. L'une d'entre elles est le Shortcode. Même pour des opérations telles qu'une iframe, il y a des shortcodes disponibles.
Pour faire simple, vous pouvez ouvrir n'importe quelle page en utilisant l'éditeur WordPress Gutenberg ou l'éditeur Elementor, insérer des shortcodes et invoquer une iframe. Simple comme bonjour !
Il suffit de placer un bloc d'éditeur HTML sur votre page et d'ajouter le code ci-dessus. Cela permettra simplement d'afficher le contenu/site web souhaité dans une boîte d'une hauteur de 400px.
La création d'un widget iframe comporte certains attributs que vous pouvez utiliser pour personnaliser l'apparence du contenu.
- Src - Lien source. (https://) peut être nécessaire pour éviter le blocage du protocole de sécurité du site.
- Largeur/Hauteur - Valeurs en pixels qui définissent la zone de taille du contenu.
- Aligner - Définit l'alignement de l'iframe dans la page.
- Bordure de cadre - Ajoute une bordure autour de l'iframe si la valeur est supérieure/égale à 1. N'affiche aucune bordure si la valeur est 0.
- Défilement - Permet de faire défiler le contenu de l'iframe en définissant "yes", "no" et "auto".
Outre le code HTML, l'iframe prend également en charge les attributs CSS. Vous pouvez donc lui ajouter d'autres fonctionnalités.
Une chose dont vous devez vous souvenir est que tous les sites web ne sont pas compatibles avec les iframes. Cela signifie que votre site web peut refuser un site web iframe ou vice-versa.
Methos 2 : Créer un widget iframe dans Elementor avec des plugins
Si vous recherchez un widget iFrame pour créer des iframes, la meilleure option est la suivante Elementor addon-Pack d'éléments. Ce plugin est livré avec des widget pour Elementor iframe.
Le Widget Iframe de Element Pack vous permet d'intégrer n'importe quel site web externe, Google Maps, des statistiques sur les crypto-monnaies ou une application directement dans votre design Elementor. Suivez ces étapes simples pour l'installer.
Étape 1 : Insérer le widget Iframe dans Elementor
- Ouvrez votre page dans Elementor Éditeur.
- Dans la barre de recherche du widget, tapez "Iframe".
- Sélectionnez le widget à l'aide du bouton Logo Element Pack Pro.
- Faites-le glisser et déposez-le dans la section de votre page.
- Par défaut, vous verrez un espace réservé jusqu'à ce que vous ajoutiez une URL.
Étape 2 : Ajouter une URL et configurer la mise en page de l'iframe
- Aller à Contenu → Mise en page.
- Dans le cadre de la URL de la source du contenu collez le lien que vous souhaitez intégrer.
- Exemple :
- Lien Google Maps → Affiche la localisation.
- Crypto stats URL → Affiche les données cryptographiques en temps réel.
- URL du site web → Affiche le site web complet.
- Exemple :
- Ajuster les options de mise en page :
- Hauteur de l'auto → Ajuste automatiquement la hauteur de l'iframe.
- Hauteur du cadre → Définir une hauteur fixe personnalisée.
- Largeur du conteneur Iframe → Ajuster la largeur du conteneur.
- Ratio de réactivité → Respecter les proportions largeur × hauteur.
- Alignement → Positionner l'iframe (gauche, centre, droite).
Remarque : Si le Le widget Iframe occupe tout l'écran dans ElementorLe problème se situe généralement au niveau des paramètres de hauteur/largeur ou du ratio de réactivité. Pour résoudre ce problème, désactivez Hauteur de l'auto et définir un Hauteur du cadre (par exemple, 400-600px) et ajuster le paramètre Largeur du conteneur Iframe au lieu de le laisser à 100%. Vérifiez également si Ratio de réactivité est activé, car il peut forcer l'iframe à s'étirer. Il convient donc de le désactiver ou de définir un ratio approprié comme 16:9.
4. Configurer Paramètres Lazyload et Paramètres supplémentaires pour de meilleures performances et des options plein écran/barre de défilement. Et il faut activer l'option Chargement paresseux lors de l'utilisation de plusieurs iframes pour un chargement plus rapide.
Étape 3 : Affichage de l'Iframe dans les maquettes d'appareils
- Aller à Contenu → Dispositifs Iframe.
- Activer Afficher le dispositif Iframe.
- Choisissez parmi les cadres d'appareils préconstruits : Chrome, Firefox, Safari, Edge, Tablet, Mobile, ou Personnalisé.
- Si vous sélectionnez Sur mesurevous pouvez définir un Largeur × Hauteur, appliquer un Encoche, ajouter Boutonsou régler le Lunette.
Étape 4 : Personnaliser et styliser l'iframe
- Aller à Style → Dispositif.
- Personnaliser l'apparence de l'iframe :
- Couleur de la lunette (Couleur1) → Ajuster la couleur du cadre extérieur.
- Couleur de l'encoche (Color2) → Modifier la couleur du style de l'encoche.
- Style des boutons → Personnaliser les couleurs, la largeur et les décalages des boutons.
- Appliquez des bords arrondis ou ajustez l'épaisseur du cadre pour une apparence soignée.
Étape 5 : Prévisualisation et publication
- Utiliser la fonction Elementor Mode réactif pour vérifier l'apparence de l'iframe sur tous les appareils.
- Ajustez la hauteur, la largeur ou la charge paresseuse pour améliorer les performances.
- Une fois que tout est parfait, cliquez sur Mise à jour / Publication.
Conseil : Certains sites web bloquent l'intégration des iframes. Dans ce cas, utilisez leur code d'intégration officiel ou leur lien de partage.
Vous pouvez ajouter différents types de contenu, qu'il s'agisse de vidéo, d'audio, de texte, d'image ou de sites web, à l'aide de ce widget.
Regardez cette vidéo pour savoir comment utiliser correctement le widget iframe dans Elementor.
Notez que le widget iframe de Element Pack vous offre une fonction Lazyload intégrée. Ainsi, vous améliorerez les performances de votre site web en utilisant cet outil. Vérifier ceci Page de démonstration du pack d'éléments par exemple.
Conclusion
L'IFrame, fonction largement utilisée, a été transformée en widget pour la rendre plus dynamique et plus facile à utiliser.
Les sites web ayant des politiques de sécurité strictes peuvent ne pas autoriser l'intégration d'un contenu dans une iframe. Mais le nombre de sites compatibles est plus important. Il s'agit donc d'une solution rapide pour ajouter un contenu multicouche à votre site Web. Nous espérons que vous avez appris la méthode de création d'un widget iframe aujourd'hui.
Merci d'avoir veillé !
