Comment ajouter un bloc Iframe sur une page personnalisée ? – Centre d'Aide

Le bloc Iframe vous permet d'intégrer sur une page personnalisée de votre site le contenu d'un autre site (formulaire, vidéo, etc.). Il fonctionne comme une fenêtre ouverte sur ce site externe : vous ajoutez le bloc depuis Site internet > Menus et pages, puis vous y collez l'URL du site à afficher ou le code d'intégration fourni par la plateforme externe.

Cet article détaille les points suivants :

Qu'est-ce qu'un bloc Iframe ?
Où ajouter un bloc Iframe sur une page personnalisée ?
Ajouter et configurer un bloc Iframe

Qu'est-ce qu'un bloc Iframe ?

Iframe signifie inline frame. C'est en quelque sorte une "fenêtre" ouverte sur un autre site, dont elle affiche une partie du contenu. Autrement dit, l'iframe sert à afficher le contenu d'un site dans un autre site : un formulaire, une vidéo, un tableau, etc.

Vous pouvez ajouter des blocs Iframe sur les pages personnalisées de votre site.

Où ajouter un bloc Iframe sur une page personnalisée ?

Le bloc Iframe s'ajoute depuis le mode édition de la page personnalisée concernée. Pour y accéder :

Allez dans l'application Site internet > Menus et pages ;
Repérez la page personnalisée à modifier, reconnaissable à l'icône , puis passez la souris dessus et ouvrez le menu des trois points horizontaux ;
Cliquez sur Editer la page.

Interface « Menus et pages » d'AssoConnect avec le menu contextuel d'une page ouvert, affichant les options : Éditer la page, Voir le rendu, Dupliquer et Placer dans la corbeille

La page s'ouvre alors en mode édition : la grille d'édition et le menu des blocs s'affichent.

Ajouter et configurer un bloc Iframe

Depuis la page personnalisée ouverte en mode édition, prenez le bloc Iframe et déposez-le sur la grille de votre page :

Menu de blocs de contenu avec le bloc « Iframe » sélectionné (encadré en rose), aux côtés de Twitter, Articles, Dons, Événement et Personne

Configurer le contenu du bloc Iframe

Dès que le bloc est déposé sur la grille, une fenêtre d'édition s'ouvre (si le bloc est déjà en place, double-cliquez dessus pour rouvrir cette fenêtre). Deux options sont possibles :

Renseignez l'URL complète du site à intégrer dans le champ "URL du site à coller" : le site entier s'affiche en iframe ;
Ou collez le code d'intégration fourni par certaines plateformes (Dailymotion, Vimeo, etc.) dans le champ "Ligne de code à utiliser" : seuls les éléments prévus par ce code s'affichent.

Fenêtre de configuration d'une iframe avec les champs « URL de la page à afficher » et « Ligne de code à utiliser », et le bouton « Enregistrer » mis en évidence par des flèches rouges.

Après avoir cliqué sur Enregistrer, le contenu du site externe s'affiche dans le bloc sur votre grille d'édition.

Modifier l'apparence du bloc Iframe une fois placé

Sélectionnez le bloc Iframe sur la grille : des options d'édition s'affichent en haut du menu de gauche (si elles n'apparaissent pas, cliquez sur le bloc pour le sélectionner).

Modifier l'URL ou le code renseigné (également accessible en double-cliquant sur le bloc) ;
Supprimer le bloc ;
Couleur de fond : vous choisissez la couleur de fond du bloc ;
Cadre : vous ajoutez une bordure et réglez son épaisseur ;
Marges extérieures : vous ajustez les marges autour du bloc ;
Dupliquer le bloc à l'identique.

Cliquez enfin sur Enregistrer : vos modifications sont sauvegardées et le bloc Iframe s'affiche avec sa nouvelle apparence sur la page publiée.

Pour aller plus loin sur le bloc Iframe