So funktioniert es
Ein Button-Block in Alva Courses ist eine einzelne Call-to-Action-Schaltfläche, etwa ein Link zu Ihrer Buchungsseite. Ein HTML-Block setzt Ihr eigenes Markup genau so in die Lektion, wie Sie es eingeben – geeignet für iframe-Einbettungscodes von Formularen und Kalendern. Beide Blöcke sind in jedem Plan enthalten.
Button steht im Menü Inhalt hinzufügen sowohl des Standard-Lektionseditors als auch des Vollbild-Kurseditors. HTML wird nur im Vollbild-Kurseditor angeboten, ein bereits hinzugefügter HTML-Block lässt sich aber weiterhin im Standard-Lektionseditor bearbeiten.
Button- oder HTML-Block hinzufügen
1. Die Lektion öffnen
Öffnen Sie im Shopify-Admin Alva Courses, klicken Sie auf Kurse, wählen Sie einen Kurs aus und öffnen Sie die Lektion. Für einen HTML-Block klicken Sie zusätzlich in der Kopfzeile der Seite auf Vollbild: Der Vollbild-Kurseditor öffnet sich bei dieser Lektion.
2. Einen Button-Block hinzufügen
Klicken Sie auf Inhalt hinzufügen und wählen Sie Button. Neue Blöcke werden am Ende der Lektion eingefügt; verschieben Sie den Block mit den Pfeilen nach oben und unten. Im Standard-Lektionseditor funktionieren die Pfeile eines neuen Blocks erst, nachdem Sie die Lektion gespeichert haben.
3. Button-Text und Link eingeben
Geben Sie die Beschriftung unter Button-Text und die Adresse unter Button-URL ein. Die Beschriftung erscheint genau so, wie Sie sie eingeben, Zeichen wie < und & werden also wörtlich angezeigt. Teilnehmer sehen den Button nur, wenn Button-Text einen Wert hat. Füllen Sie auch Button-URL aus: Ein Button ohne Adresse wird zwar angezeigt, ein Klick darauf öffnet aber nur dieselbe Seite erneut in einem neuen Tab.
Adressen, die mit http:// oder https:// beginnen, E-Mail-Links, die mit mailto: beginnen, und Pfade in Ihrem eigenen Shop, die mit / beginnen (etwa /pages/contact), werden so verwendet, wie Sie sie eingeben. Allem anderen wird https:// vorangestellt: www.example.com funktioniert daher, Telefonlinks und #Anker dagegen nicht.
4. Die Ausrichtung wählen
Klicken Sie unter Ausrichtung auf Links, Zentriert oder Rechts; ein neuer Button ist zunächst zentriert. Sobald beide Felder einen Wert haben, erscheint im Block eine Vorschau. Die Vorschau ist immer blau; der Kursplayer verwendet stattdessen Ihre Kursfarben.
5. Einen HTML-Block im Vollbild-Kurseditor hinzufügen
Klicken Sie im Vollbild-Kurseditor in der Lektions-Symbolleiste auf Inhalt hinzufügen und wählen Sie HTML. Fügen Sie Ihren Code in HTML-Inhalt ein. Ein Feld Vorschau: unter dem Eingabefeld aktualisiert sich etwa eine halbe Sekunde, nachdem Sie aufgehört haben zu tippen.
6. Die Lektion speichern und in der Vorschau ansehen
Klicken Sie im Vollbild-Kurseditor auf Diese Lektion speichern, im Standard-Lektionseditor in der Speicherleiste auf Speichern. Klicken Sie dann auf Vorschau, um die gespeicherte Lektion in Ihrem Storefront zu öffnen, wo die eigenen Stile des Kursplayers gelten.
Was ein HTML-Block kann und nicht kann
Ein HTML-Block wird genau so angezeigt, wie Sie ihn gespeichert haben. Alva Courses prüft oder bereinigt den Code nicht. Fügen Sie also nur Code ein, dem Sie vertrauen, wie der Hinweis unter dem Feld warnt. Im Kursplayer gilt:
- Skripte werden nicht ausgeführt. Code in <script>-Tags wird in der Editor-Vorschau und im Kursplayer ignoriert, daher laden Einbettungen, die ein Skript benötigen, nicht. Bietet ein Tool eine iframe-Version seines Einbettungscodes an, verwenden Sie diese.
- Iframes funktionieren. Die meisten eingebetteten Frames werden auf die volle Breite der Lektion gestreckt, legen Sie die benötigte Höhe also im Code fest. Für ein YouTube-Video ist der Block YouTube die einfachere Wahl.
- Links übernehmen die Linkfarbe Ihres Kurses und öffnen sich in einem neuen Tab.
- Bilder füllen die Breite der Lektion aus, sofern sie keine Inline-Breite haben, und Teilnehmer können sie zum Vergrößern anklicken.
- Die Stile des Players haben Vorrang vor vielen Inline-Stilen. Überschriften, Absätze, Listen und div-Elemente verlieren ihre eigenen Farben, Hintergründe, Rahmen, Abstände und Schriftstärken, und Text verwendet die Kursschriftart, wenn eine festgelegt ist. Um sie neu zu gestalten, lesen Sie Benutzerdefiniertes CSS wird im Kursplayer nicht angewendet.
Was Lernende sehen
Teilnehmer sehen einen Button-Block als Schaltfläche in Ihrer Kursfarbe. Ist Erweiterte Farbanpassung für den Kurs aktiviert, verwendet er stattdessen die Farben Button Background, Button Text und Button Hover unter Interactive Colors — siehe Kursplayer gestalten. Ein Klick auf den Button öffnet den Link in einem neuen Tab, die Lektion bleibt also dahinter geöffnet. HTML-Inhalte erscheinen an ihrer Stelle zwischen den anderen Blöcken der Lektion.
Häufige Fragen
Warum steht HTML nicht im Menü „Inhalt hinzufügen“?
Der Standard-Lektionseditor bietet es nicht an. Klicken Sie auf „Vollbild“, wählen Sie die Lektion aus und öffnen Sie dann „Inhalt hinzufügen“ in der Lektions-Symbolleiste, wo HTML aufgeführt ist. Bereits hinzugefügte HTML-Blöcke bleiben im Standard-Lektionseditor bearbeitbar.
Warum ist mein Button im Editor blau?
Die Vorschau im Block verwendet immer ein Standardblau. Im Kursplayer übernimmt der Button Ihre Kursfarbe oder, wenn die Erweiterte Farbanpassung aktiviert ist, Ihre Farben Button Background, Button Text und Button Hover.
Kann ein Link in einem HTML-Block eine andere Lektion öffnen?
Der HTML-Block hat keine Lektionsauswahl. Um auf eine andere Lektion zu verlinken, fügen Sie den Link in einem Text-Block ein und wählen Sie in dessen Link-Editor den Tab für Lektionen. Die Lektion öffnet sich dann innerhalb des Kursplayers.
Findet die Lektionssuche Text in diesen Blöcken?
Ja. Die Lektionssuche im Kurseditor findet den sichtbaren Text von HTML-Blöcken und Button-Beschriftungen. Linkadressen sowie Code, Skripte und Stile innerhalb eines HTML-Blocks werden nicht durchsucht.
Siehe auch
War das hilfreich?
Zuletzt aktualisiert 2026-10-12