Fügen Sie Rechner-Widgets zu Ihrer Webflow-Website mit dem Embed-Element hinzu. Diese Anleitung führt Sie durch das Hinzufügen von benutzerdefiniertem HTML zu Ihren Webflow-Seiten.
Schritt 1: Holen Sie Ihren Einbettungscode
- Gehen Sie zu unserem Widget-Generator
- Wählen Sie Ihren Rechnertyp, passen Sie Farben und Styling an Ihre Website an
- Kopieren Sie den generierten Einbettungscode aus dem Tab "HTML Einbetten"
Schritt 2: Zu Ihrer Webflow-Site hinzufügen
-
Öffnen Sie den Designer
Öffnen Sie Ihr Projekt im Webflow Designer.
-
Fügen Sie ein Embed-Element hinzu
Klicken Sie im linken Bereich auf "+" und suchen Sie "Embed" unter Components, oder drücken Sie "A" und suchen Sie nach "HTML Embed".
-
Fügen Sie Ihren Einbettungscode ein
Doppelklicken Sie auf das Embed-Element, um den Code-Editor zu öffnen. Fügen Sie Ihren Einbettungscode ein und klicken Sie auf "Speichern & Schließen".
-
Styling und Veröffentlichen
Passen Sie Breite und Ränder mit den Styling-Tools von Webflow an. Veröffentlichen Sie Ihre Website, um das Widget live zu sehen.
Tipps
- Stellen Sie eine feste Breite für den Embed-Element-Container ein, um beste Ergebnisse zu erzielen
- Embeds werden im Designer nicht gerendert - verwenden Sie den Vorschaumodus, um das Widget zu sehen
- Das Widget passt seine Höhe automatisch an den Inhalt an, sodass Sie sich keine Sorgen um Scrollbalken machen müssen
Fehlerbehebung
Dies ist normales Verhalten. Webflow rendert Embeds aus Sicherheitsgründen nicht im Designer. Klicken Sie auf Vorschau oder veröffentlichen Sie Ihre Website, um das Widget zu sehen.
Stellen Sie sicher, dass der Einbettungscode korrekt eingefügt wurde und sowohl die iframe- als auch die Script-Tags enthält. Überprüfen Sie die Entwicklerkonsole Ihres Browsers auf Fehlermeldungen.