dernière mise à jour le 26 février 2026

Genially et Canva sont des applications web permettant de créer facilement des infographies plus ou moins élaborées à partir de modèles. Cela peut aller du bandeau d'accueil avec le nom du cours à une leçon interactive en passant par une infographie présentant le contenu de l'espace sous forme de mindmap par ex.

Ces productions peuvent être affichées directement sur la page d'accueil du cours ou intégrées à une ressource ou une activité, comme pour cet exemple présent dans le cours du support à l'édition UV.    

    

Condition unique : accéder à un champ texte pour intégrer le "code embed" ou "iframe", par ex. dans

  • une Ressource Zone texte, sur la page d’accueil du cours
  • la zone description d’une section,
  • une Ressource Page,
  • la page d’un livre ou d’une leçon,
  • la description/consignes d'un test ou dans une question,
  • etc.

    

Étape 1. Récupérer le lien "embed" ou lien d'incorporation

 

1. Où se rendre dans l'application ?

Genially 

Préalable : la présentation doit avoir été publiée dans Genially (> < privé, brouillon)
Canva 
Cliquez sur Partager en haut à droite puis sur Insérer : copiez le code ‘iframe’.

Cliquez sur l'icône Partager en haut à droite, Afficher tout, puis sur Intégrer : copiez le CodeHTML intégré

2. Conservez le lien précieusement en le collant dans un Word par ex.

Vous obtenez un code de ce type : 

<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="UV Formats de cours" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genially.com/66b4e54910307629f86bf0f8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>

    

Étape 2. Afficher dans l'UV

  

a) Là où vous souhaitez afficher l'infographie : ouvrez la page permettant d'éditer la ressource ou l'activité, par exemple :

    • Zone texte : Admin de la zone texte/ Paramètres pour atteindre le champ Contenu de la zone texte
    • Zone description d'une section : menu Modifier de la section (à droite de son intitulé) pour atteindre le champ Résumé
    • Page : Admin de la Page/ Paramètres pour atteindre le champ Contenu de la page
    • Livre ou Leçon : Bouton de la page ou du chapitre à éditer pour atteindre le champ Contenu
    • Test : Admin du test/ champ Description du test ou dans une question elle-même, champ Description de la question

  

b) Dans le champ texte

    • si vous comptez insérer une phrase (intro ou consignes) au-dessus, faites-le maintenant (c'est plus difficile de l'ajouter après si le champ texte est vide...). Tapez éventuellement juste un mot que vous modifierez par la suite : dans cet exemple, je tape "Visuel1".
    • sélectionnez "Outils" dans le bandeau du dessus, puis sélectionnez "source code pro" pour pouvoir avoir accès au code : 

   

    • dans la fenêtre pop-up qui s'affiche, coller à la fin du code déjà présent le code iframe récupéré précédemment 

    • Cliquez sur "Save" en bas de fenêtre : l'infographie s'affiche dans la zone texte
    • Enregistrez en bas de page.

 

Astuces 

La grandeur d’affichage l'infographie ou le fait de le centrer est compliqué à gérer. Il est conseillé de finir l’intégration pour voir le résultat sur le cours (quittez le mode édition pour avoir une meilleure vue du rendu final) puis revenir au code pour le modifier si c’était réellement utile. Reprendre à l'étape 2 pour atteindre le code.

  • Taille

L'infographie est configurée pour s'afficher sur la largeur complète de la page de façon responsive (il s'adapte à l'agrandissement ou réduction de la fenêtre du navigateur). Pour réduire la taille, diminuer les % dans la 1re partie du code : 

<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="UV Formats.... 

  • Centrer

Pour centrer le Genially, ajoutez un bout un code : votre code collé précédemment correspond à celui-ci ; en enregistrant le code, il s'est certainement libéllé sur 2 lignes ; remplacer la 1re ligne (ou la partie) renseignée ici en jaune par le code en bleu 

<div style="width: 100%;">
<div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="UV Formats de cours" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genially.com/66b4e54910307629f86bf0f8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>

à remplacer par <div style="width: 100%; margin-left: auto; margin-right: auto;">

  

© 2025 Université Virtuelle