Hoe het werkt
Alva Courses voegt een Knop-blok toe als één call-to-action-knop, zoals een link naar je boekingspagina. Een HTML-blok plaatst je eigen opmaak in de les precies zoals je die typt, wat handig is voor iframe-insluitcodes van formulieren en agenda's. Beide blokken zitten in elk abonnement.
Knop staat in het menu Inhoud Toevoegen van zowel de standaard leseditor als de builder op volledig scherm. HTML wordt alleen in de builder op volledig scherm aangeboden, maar een HTML-blok dat je al hebt toegevoegd, kun je nog steeds bewerken in de standaard leseditor.
Een Knop- of HTML-blok toevoegen
1. Open de les
Open in de Shopify-beheeromgeving Alva Courses, klik op Cursussen, selecteer een cursus en open de les. Klik voor een HTML-blok ook op Volledig scherm in de paginakop: de builder op volledig scherm opent bij die les.
2. Voeg een Knop-blok toe
Klik op Inhoud Toevoegen en kies Knop. Nieuwe blokken komen aan het einde van de les; gebruik de pijlen omhoog en omlaag op het blok om het te verplaatsen. In de standaard leseditor werken de pijlen van een nieuw blok pas nadat je de les hebt opgeslagen.
3. Vul de knoptekst en de link in
Typ het label in Knoptekst en het adres in Knop-URL. Het label verschijnt precies zoals je het typt, dus tekens zoals < en & worden getoond zoals getypt. Studenten zien de knop alleen als Knoptekst een waarde heeft. Vul ook Knop-URL in: een knop zonder adres wordt nog steeds getoond, maar een klik erop opent alleen dezelfde pagina opnieuw in een nieuw tabblad.
Adressen die beginnen met http:// of https://, e-maillinks die beginnen met mailto: en paden in je eigen winkel die beginnen met / (zoals /pages/contact) worden gebruikt zoals getypt. Aan al het andere wordt vooraan https:// toegevoegd, dus www.example.com werkt, maar telefoonlinks en #ankers niet.
4. Kies de uitlijning
Klik onder Uitlijning op Links, Gecentreerd of Rechts; een nieuwe knop staat standaard gecentreerd. Zodra beide velden een waarde hebben, verschijnt er een voorbeeld in het blok. Het voorbeeld is altijd blauw; de cursusplayer gebruikt in plaats daarvan je cursuskleuren.
5. Voeg een HTML-blok toe in de builder op volledig scherm
Klik in de builder op volledig scherm op Inhoud Toevoegen in de werkbalk van de les en kies HTML. Plak je code in HTML-Inhoud. Een vak Voorbeeld: onder het veld wordt ongeveer een halve seconde nadat je stopt met typen bijgewerkt.
6. Sla de les op en bekijk een voorbeeld
Klik in de builder op volledig scherm op Deze les opslaan; klik in de standaard leseditor op Opslaan in de opslaanbalk. Klik daarna op Voorbeeld om de opgeslagen les in je storefront te openen, waar de eigen stijlen van de cursusplayer gelden.
Wat een HTML-blok wel en niet kan
Een HTML-blok wordt precies getoond zoals je het hebt opgeslagen. Alva Courses controleert of schoont de code niet op, dus plak alleen code die je vertrouwt, zoals de opmerking onder het veld waarschuwt. In de cursusplayer:
- Scripts worden niet uitgevoerd. Code binnen <script>-tags wordt genegeerd in het voorbeeld in de editor en in de cursusplayer, dus insluitingen die een script nodig hebben, laden niet. Biedt een tool een iframe-versie van de insluitcode, gebruik die dan.
- Iframes werken. De meeste ingesloten frames worden uitgerekt tot de volle breedte van de les, dus stel in de code de hoogte in die je nodig hebt. Voor een YouTube-video is het blok YouTube de eenvoudigere keuze.
- Links krijgen de linkkleur van je cursus en openen in een nieuw tabblad.
- Afbeeldingen vullen de breedte van de les, tenzij ze een inline breedte hebben, en studenten kunnen erop klikken om ze te vergroten.
- De stijlen van de player winnen van veel inline stijlen. Koppen, alinea's, lijsten en div-elementen verliezen hun eigen kleuren, achtergronden, randen, afstanden en lettergewicht, en tekst gebruikt het cursuslettertype als dat is ingesteld. Wil je ze anders opmaken, zie dan Aangepaste CSS wordt niet toegepast in de cursusplayer.
Wat cursisten zien
Studenten zien een Knop-blok als een knop in je cursuskleur. Is Geavanceerde kleuraanpassing voor de cursus ingeschakeld, dan gebruikt de knop in plaats daarvan de kleuren Button Background, Button Text en Button Hover onder Interactive Colors — zie De cursusplayer in je huisstijl. Een klik op de knop opent de link in een nieuw tabblad, zodat de les erachter open blijft. HTML-inhoud verschijnt op zijn plek tussen de andere blokken van de les.
Veelgestelde vragen
Waarom staat HTML niet in het menu Inhoud Toevoegen?
De standaard leseditor biedt het niet aan. Klik op Volledig scherm, selecteer de les en open daarna Inhoud Toevoegen in de werkbalk van de les, waar HTML wel in de lijst staat. HTML-blokken die je al hebt toegevoegd, blijven bewerkbaar in de standaard leseditor.
Waarom is mijn knop blauw in de editor?
Het voorbeeld in het blok gebruikt altijd een standaardblauw. In de cursusplayer krijgt de knop je cursuskleur, of je kleuren Button Background, Button Text en Button Hover als Geavanceerde kleuraanpassing is ingeschakeld.
Kan een link in een HTML-blok een andere les openen?
Het HTML-blok heeft geen lessenkiezer. Wil je naar een andere les linken, voeg de link dan toe in een Tekstblok en kies het tabblad Les in de linkeditor. De les opent dan binnen de cursusplayer.
Vindt het zoeken in lessen tekst in deze blokken?
Ja. Het zoeken in lessen in de cursuseditor vindt de zichtbare tekst van HTML-blokken en knoplabels. Het vindt geen linkadressen en ook niet de code, scripts en stijlen binnen een HTML-blok.
Zie ook
Was dit nuttig?
Laatst bijgewerkt 2026-10-12