Comment afficher votre flux Instagram en plein écran sur votre site hôtelier
Créez une expérience visuelle immersive avec LightWidget
Points clés :
- Vous pouvez afficher votre widget Instagram en plein écran grâce aux paramètres LightWidget
- Le mode “Full width” et les marges à zéro permettent d’occuper tout l’espace disponible
- L’intégration s’adapte parfaitement au responsive design
- Cette mise en page met en valeur votre storytelling visuel hôtelier
Afficher votre flux Instagram en plein écran est un excellent moyen de renforcer l’impact visuel de votre site hôtelier. C’est particulièrement efficace sur les pages d’accueil, les sections “Galerie” ou les landing pages de mariage, spa ou restaurant. Voici comment obtenir ce rendu immersif, étape par étape.
1. Accédez à votre compte LightWidget
Connectez-vous à www.lightwidget.com et ouvrez le widget que vous utilisez déjà sur votre site hôtelier.
💡 Si vous souhaitez créer un flux spécifique en plein écran (ex. pour une seule page), vous pouvez dupliquer votre widget existant et adapter ses paramètres.
2. Configurer l’affichage en plein écran
Dans les paramètres du widget, ajustez les éléments suivants :
- Columns (Colonnes) : choisissez un nombre faible (ex. 3 ou 4) pour des images plus larges.
- Rows (Lignes) : laissez plusieurs lignes pour donner une impression de grille immersive.
- Image spacing (Espacement) : mettez 0 px pour supprimer toutes les marges.
- Widget width : sélectionnez 100% afin que le flux occupe toute la largeur de la page.
- Widget height : laissez vide ou ajustez selon le rendu souhaité (ex. 100vh pour une hauteur pleine fenêtre).
💡 Astuce : vous pouvez également activer la fonction Responsive columns, pour que le flux s’adapte automatiquement à la largeur de l’écran.
3. Générer le nouveau code d’intégration
Une fois les paramètres ajustés :
- Cliquez sur Get code.
- Copiez le nouveau code d’intégration (iframe ou script).
4. Intégrer le widget en plein écran dans votre site hôtelier
Dans Webflow Designer :
- Ouvrez la page où vous souhaitez afficher le flux (ex. “Galerie”, “Accueil”, “Expériences”).
- Glissez un bloc Embed (</>) à l’endroit voulu.
- Collez le code LightWidget.
- Ouvrez les paramètres du bloc et ajoutez une classe CSS (par exemple instagram-fullscreen).
- Dans l’onglet Style, définissez :
- Width : 100%
- Height : 100vh (ou ajustez selon le design)
- Padding : 0
- Margin : 0
- Width : 100%
💡 Cela garantit que votre flux s’étend sur toute la largeur et hauteur visibles de l’écran.
5. Publier et tester le rendu
Cliquez sur Publish pour mettre le site à jour, puis visualisez la page en taille réelle.
Testez l’affichage sur :
- Ordinateur de bureau (pour vérifier l’effet plein écran)
- Tablette et mobile (pour s’assurer que les images restent bien cadrées)
Si le flux semble tronqué ou trop étiré, ajustez le nombre de colonnes ou la hauteur du conteneur directement dans LightWidget.
Conclusion
Oui, il est tout à fait possible d’afficher votre flux Instagram en plein écran sur votre site hôtelier. En combinant une largeur à 100 %, un espacement nul et un design responsive, vous obtenez un rendu immersif qui met en valeur vos plus belles images et renforce l’émotion visuelle de votre marque.