Comment ça fonctionne
Alva Courses ajoute un bloc Bouton sous la forme d'un unique bouton d'appel à l'action, par exemple un lien vers votre page de réservation. Un bloc HTML place votre propre balisage dans la leçon exactement tel que vous le saisissez, ce qui convient aux codes d'intégration iframe de formulaires et de calendriers. Les deux blocs sont inclus dans tous les forfaits.
Bouton se trouve dans le menu Ajouter du contenu de l'éditeur de leçon standard comme du générateur en plein écran. HTML n'est proposé que dans le générateur en plein écran, mais un bloc HTML déjà ajouté reste modifiable dans l'éditeur de leçon standard.
Ajouter un bloc Bouton ou HTML
1. Ouvrir la leçon
Dans l'admin Shopify, ouvrez Alva Courses, cliquez sur Cours, sélectionnez un cours et ouvrez la leçon. Pour un bloc HTML, cliquez aussi sur Plein écran dans l'en-tête de la page : le générateur en plein écran s'ouvre sur cette leçon.
2. Ajouter un bloc Bouton
Cliquez sur Ajouter du contenu et choisissez Bouton. Les nouveaux blocs se placent à la fin de la leçon ; utilisez les flèches haut et bas du bloc pour le déplacer. Dans l'éditeur de leçon standard, les flèches d'un nouveau bloc ne fonctionnent qu'après l'enregistrement de la leçon.
3. Saisir le texte et le lien du bouton
Saisissez le libellé dans Texte du bouton et l'adresse dans URL du bouton. Le libellé s'affiche exactement tel que vous le saisissez : des caractères comme < et & s'affichent donc tels quels. Les apprenants ne voient le bouton que si Texte du bouton est renseigné. Remplissez aussi URL du bouton : un bouton sans adresse s'affiche quand même, mais un clic dessus ne fait que rouvrir la même page dans un nouvel onglet.
Les adresses qui commencent par http:// ou https://, les liens e-mail qui commencent par mailto: et les chemins de votre propre boutique qui commencent par / (comme /pages/contact) sont utilisés tels quels. Tout le reste se voit ajouter https:// au début : www.example.com fonctionne donc, mais pas les liens téléphoniques ni les #ancres.
4. Choisir l'alignement
Sous Alignement, cliquez sur Gauche, Centre ou Droite ; un nouveau bouton est centré par défaut. Une fois les deux champs renseignés, un aperçu apparaît dans le bloc. L'aperçu est toujours bleu ; le lecteur de cours utilise à la place les couleurs de votre cours.
5. Ajouter un bloc HTML dans le générateur en plein écran
Dans le générateur en plein écran, cliquez sur Ajouter du contenu dans la barre d'outils de la leçon et choisissez HTML. Collez votre code dans Contenu HTML. Une zone Aperçu : sous le champ se met à jour environ une demi-seconde après que vous avez arrêté de taper.
6. Enregistrer et prévisualiser la leçon
Dans le générateur en plein écran, cliquez sur Enregistrer cette leçon ; dans l'éditeur de leçon standard, cliquez sur Enregistrer dans la barre d'enregistrement. Cliquez ensuite sur Aperçu pour ouvrir la leçon enregistrée dans votre vitrine, où s'appliquent les styles propres au lecteur de cours.
Ce qu'un bloc HTML peut et ne peut pas faire
Un bloc HTML s'affiche exactement tel que vous l'avez enregistré. Alva Courses ne vérifie ni ne nettoie le code : ne collez donc que du code de confiance, comme l'indique la note sous le champ. Dans le lecteur de cours :
- Les scripts ne s'exécutent pas. Le code placé dans des balises <script> est ignoré dans l'aperçu de l'éditeur et dans le lecteur de cours : les intégrations qui nécessitent un script ne se chargent donc pas. Si un outil propose une version iframe de son code d'intégration, utilisez-la.
- Les iframes fonctionnent. La plupart des cadres intégrés sont étirés sur toute la largeur de la leçon : définissez donc dans le code la hauteur dont vous avez besoin. Pour une vidéo YouTube, le bloc YouTube est le choix le plus simple.
- Les liens prennent la couleur de lien de votre cours et s'ouvrent dans un nouvel onglet.
- Les images remplissent la largeur de la leçon, sauf si elles ont une largeur définie en ligne, et les apprenants peuvent cliquer dessus pour les agrandir.
- Les styles du lecteur l'emportent sur de nombreux styles en ligne. Les titres, paragraphes, listes et éléments div perdent leurs propres couleurs, arrière-plans, bordures, espacements et graisses de police, et le texte utilise la police du cours lorsqu'elle est définie. Pour les restyliser, voir Le CSS personnalisé ne s'applique pas au lecteur de cours.
Ce que voient les apprenants
Les apprenants voient un bloc Bouton sous la forme d'un bouton aux couleurs de votre cours. Si la Personnalisation avancée des couleurs est activée pour le cours, il utilise à la place les couleurs Button Background, Button Text et Button Hover sous Interactive Colors — voir Personnaliser l'apparence du lecteur de cours. Un clic sur le bouton ouvre le lien dans un nouvel onglet, si bien que la leçon reste ouverte derrière. Le contenu HTML apparaît à sa place parmi les autres blocs de la leçon.
Questions fréquentes
Pourquoi HTML n'apparaît-il pas dans le menu Ajouter du contenu ?
L'éditeur de leçon standard ne le propose pas. Cliquez sur Plein écran, sélectionnez la leçon, puis ouvrez Ajouter du contenu dans la barre d'outils de la leçon, où HTML figure dans la liste. Les blocs HTML déjà ajoutés restent modifiables dans l'éditeur de leçon standard.
Pourquoi mon bouton est-il bleu dans l'éditeur ?
L'aperçu dans le bloc utilise toujours un bleu standard. Dans le lecteur de cours, le bouton prend la couleur de votre cours, ou vos couleurs Button Background, Button Text et Button Hover lorsque la Personnalisation avancée des couleurs est activée.
Un lien dans un bloc HTML peut-il ouvrir une autre leçon ?
Le bloc HTML n'a pas de sélecteur de leçon. Pour créer un lien vers une autre leçon, ajoutez le lien dans un bloc Texte et choisissez l'onglet Lesson dans son éditeur de lien. La leçon s'ouvre alors dans le lecteur de cours.
La recherche de leçons trouve-t-elle le texte de ces blocs ?
Oui. La recherche de leçons de l'éditeur de cours prend en compte le texte visible des blocs HTML et les libellés des boutons. Elle ne prend pas en compte les adresses des liens, ni le code, les scripts et les styles d'un bloc HTML.
Voir aussi
Cet article vous a-t-il été utile ?
Dernière mise à jour 2026-10-12