HTML-Einbettungsblock

Du kannst den HTML Embed-Block verwenden, um benutzerdefiniertes HTML und Skripte hinzuzufügen, die nicht im Sitebuilder vordefiniert sind. Der HTML Embed-Block ermöglicht es dir, Inhalte aus anderen Quellen wie Kalender, Video- und Audiodateien oder Inhalte von einer anderen Website zu integrieren. Du kannst dieses HTML auch mit CSS stylen.

Hinzufügen eines HTML Embed Blocks

Wähle den Ort aus, an dem du deinen HTML Embed-Block hinzufügen möchtest, und klicke auf die Block hinzufügen (+) Plus-Schaltfläche.
Im Blockbibliothek-Bereich scrolle die Liste hinunter und wähle HTML Embed, um das vordefinierte Layout für diesen Blocktyp zu sehen.
Klicke auf den Blocktyp, den du hinzufügen möchtest, um ihn auf deiner Seite zu platzieren.

Es gibt drei Arten von HTML Embed Blöcken, die es dir ermöglichen:

Google-Dokumente einzubetten
Einen Google-Kalender einzubetten
Eine Google-Tabelle (Tabellenkalkulation) einzubetten
Einen benutzerdefinierten HTML-Code einzubetten (Premium-Block)

Einbetten von Google Docs

Nachdem du den vordefinierten Google-Dokumente-Block ausgewählt hast, erscheint er auf deiner Seite. Direkt im Block findest du kurze Anweisungen, wie du Google Docs zur Seite hinzufügen kannst.

Hier sind einige detailliertere Anweisungen:

In dem Google-Dokument, das du in deine Seite einbetten möchtest, gehe zu Datei > Freigeben > Im Web veröffentlichen.
Im Im Web veröffentlichen-Fenster klicke auf Veröffentlichen, um deinen Inhalt für alle sichtbar zu machen.
Wenn das Dokument veröffentlicht ist, gehe zum Einbetten-Tab und kopiere den Iframe-Code.
Im Sitebuilder gehe zu deinem Google-Doc-Block und klicke darauf, um das Iframe-Einstellungen-Symbol zu aktivieren.
Füge den Code von Google Docs in das Feld Einbetten-Code des Tabs ein anstelle des Beispielcodes und klicke auf Senden.

Jetzt kannst du die Größe des Textfelds anpassen, indem du auf den Block klickst und die Größenanpassungssteuerelemente verwendest.

Verwende die Vorschau-Schaltfläche in der Top-Leiste, um zu sehen, wie dein Block aussehen wird, wenn er veröffentlicht wird. Veröffentliche deine Website, um die Änderungen live zu machen.

Du kannst auf diese Weise mehrere Dokumente einbetten.

Hinzufügen von Google Sheets (Tabellenkalkulationen)

Der Prozess ist ähnlich wie beim Hinzufügen eines Google-Docs zum Block. Hier sind die Schritte:

In der Google-Tabelle, die du in deine Seite einbetten möchtest, gehe zu Datei > Freigeben > Im Web veröffentlichen.
Im Im Web veröffentlichen-Fenster klicke auf Veröffentlichen, um deinen Inhalt für alle sichtbar zu machen.
Wenn das Dokument veröffentlicht ist, gehe zum Einbetten-Tab und kopiere den Iframe-Code. Du kannst wählen, das gesamte Dokument oder nur eine Tabelle einzubetten.
Im Sitebuilder gehe zu deinem Google-Sheet-Block und klicke darauf, um das Iframe-Einstellungen-Symbol zu aktivieren.
Füge den Code von Google Sheets in das Feld Einbetten-Code des Tabs ein anstelle des Beispielcodes und klicke auf Senden.

Du kannst die Größe des Textfelds anpassen, indem du auf den Block klickst und die Größenanpassungssteuerelemente verwendest.

Verwende nun die Vorschau-Schaltfläche in der Top-Leiste, um zu sehen, wie dein Block aussehen wird, wenn er veröffentlicht wird. Veröffentliche deine Website, um die Änderungen live zu machen.

Es ist möglich, mehrere Tabellen und separate Blätter mit dieser Methode einzubetten.

Einbetten von Google Kalender

Du kannst den Google Kalender direkt auf deiner Seite einbetten. Dies ist nützlich, wenn du möchtest, dass Benutzer einen Termin oder eine Besprechung gemäß deiner Verfügbarkeit buchen. Du kannst Google Kalender mit dem Formular kombinieren, das die Anforderung von Terminen und die Buchung eines bestimmten Zeitpunkts und Datums ermöglicht.

Hinweis: Dein Kalender muss öffentlich sein, damit er auf deiner Website sichtbar ist. Dieses Google-Tutorial hilft dir, ihn öffentlich zu machen.

Um einen Google Kalender zu deinem Block hinzuzufügen, befolge diese Schritte:

Öffne deinen Google Kalender im Browser und gehe zu den Einstellungen. Wähle im linken Seitenbereich den Kalender aus, den du einbetten möchtest.
Scrolle nach unten zum Kalender integrieren-Abschnitt und kopiere den Code-Schnipsel aus dem Einbetten-Code-Feld.
Im Sitebuilder gehe zu deinem Google Kalender-Block und klicke darauf, um das Iframe-Einstellungen-Symbol zu aktivieren.
Füge den Code von Google Kalender in das Feld Einbetten-Code des Tabs ein anstelle des Beispielcodes und klicke auf Senden.

Falls erforderlich, passe die Größe des Kalenders an, indem du die Größenanpassungssteuerelemente nach oben oder unten verschiebst.

Nun kannst du die Vorschau-Schaltfläche in der Top-Leiste verwenden, um zu sehen, wie dein Block aussehen wird, wenn er veröffentlicht wird. Veröffentliche deine Website, um die Änderungen live zu machen.

Du kannst auf diese Weise mehrere Kalender einbetten.

Hinzufügen von benutzerdefiniertem HTML-Code

Bevor du beginnst, kopiere den HTML-Code von dem Dienst, zu dem du den Code hinzufügen möchtest, und halte ihn griffbereit.

Fahre mit der Maus über den HTML Embed-Block, den du hinzugefügt hast, um das Menü für seine Steuerelemente zu aktivieren.
Klicke auf das Benutzerdefiniertes HTML-Symbol, um das Fenster für benutzerdefiniertes HTML zu öffnen.

Füge den Code in das Feld ein und klicke auf Senden. Die Funktion zur Codeüberprüfung benachrichtigt dich, wenn der Code Fehler enthält, die mit der Funktionsweise des Sitebuilders kollidieren können.

Hinweis: Der Code wird nicht ausgeführt, solange du im Sitebuilder arbeitest. Er wird nur im Vorschaumodus oder auf der veröffentlichten Website ausgeführt.

Anpassen des HTML Embed Blocks

Die Google Docs, Google Sheets und Google Calendar HTML Embed Blocktypen können mithilfe ihres Steuerungsfelds angepasst werden. Um es zu aktivieren, klicke auf den Block und dann auf das Blockeinstellungen-Symbol.

Hinweis: Der <HTML>-Typ des Blocks hat diese Option nicht, da alle Anpassungen über den eingebetteten Code vorgenommen werden sollen. Du kannst jedoch diesen Typ von HTML Embed Block duplizieren, löschen, nach oben oder unten verschieben sowie kopieren und einfügen.

Das Menü für Blockeinstellungen besteht aus zwei Registerkarten: der Layout-Registerkarte und der Erscheinung-Registerkarte.

In der Layout-Registerkarte kannst du auswählen, welche Elemente im Block angezeigt werden sollen. Um ein bestimmtes Blockelement auszublenden (zum Beispiel, um eine Schaltfläche zu entfernen), entferne das Häkchen neben dem Namen des Elements.

In der Erscheinung-Registerkarte kannst du folgende Änderungen vornehmen:

Blockstil: Ändere das Farbschema des Blocks.
Blockabstand: Ändere die Leerstellen oben und unten im Block.
Einstellungen für Mediainhalte: Füge einen Schwarz-Weiß-Filter zu den Medien innerhalb dieses Blocks hinzu.

Nachdem du die Blockeinstellungen angepasst hast, klicke auf Speichern. Erfahre mehr über die Anpassungsoptionen für Blöcke in unserem Artikel zu Blockeinstellungen.