Handy

Hinzufügen von benutzerdefiniertem Code in WebFlow

Webflow wird weithin als codefreie Plattform angepriesen und gilt als ihr größter Vorteil. Dies bedeutet jedoch nicht, dass dem Plan kein Code hinzugefügt werden kann.

How to Add Custom Code in WebFlow

WebFlow bietet zwar eine breite Palette von Designoptionen, aber es wird empfohlen, dass Sie Ihre Website weiter anpassen. An dieser Stelle kommt der benutzerdefinierte Code ins Spiel. Erweiterungen ermöglichen mehr Funktionalität.

Lesen Sie weiter, um herauszufinden, wie Sie benutzerdefinierten Code zu Webflow hinzufügen können.

Beschränkungen beim Hinzufügen von benutzerdefiniertem Code

Bevor Sie lernen, wie Sie benutzerdefinierten Code zu Webflow hinzufügen können, sollten Sie einige Grundregeln beachten.

Beachten Sie, dass benutzerdefinierte Codes erweiterte Änderungen sind. Daher können sie mit der Webflow-Funktionalität in Konflikt geraten und zu einem unerwarteten Verhalten auf Ihrer Website führen. Es kann daher nicht garantiert werden, dass jeder benutzerdefinierte Code vollständig kompatibel oder funktionsfähig ist.

Im Allgemeinen unterstützt WebFlow die folgenden Arten von Code

Das Hinzufügen von benutzerdefiniertem JavaScript-Code kann Ihrer Website eine Menge Funktionalität hinzufügen. Aus diesem Grund enthält WebFlow auch eine einfachere Version von JavaScript namens JQUERY. Es kann zusammen mit JavaScript verwendet werden, um den Schreibprozess zu erleichtern.

Bei der Einführung von jQuery ist es wichtig, auf die Version zu achten. Die Version muss mit der aktuell importierten Version von Webflow übereinstimmen, um Konflikte und unerwartetes Verhalten zu vermeiden. Außerdem können Szenarien wie OnClick und Onhover, die sich auf DOM-Ereignisse auswirken, ebenfalls zu unerwartetem Verhalten auf Ihrer Website führen.

Bei der Einbindung von benutzerdefiniertem Code können Sie keine serverseitigen Sprachen verwenden, wie z. B.

Ein weiterer wichtiger Aspekt, den es zu beachten gilt, ist die Länge des benutzerdefinierten Codes. WebFlow legt die folgenden Zeichengrenzen fest

  • 10.000 Zeichen für Build-Elemente
  • 10.000 Zeichen für Code über eine einzelne Seite
  • 20.000 Zeichen für Code für eine gesamte Website

Wenn der Code, den Sie einfügen möchten, diese Zeichengrenzen überschreitet, kann er nicht direkt eingefügt werden. Sie können den Code jedoch auf einem anderen Server speichern und dann das Skript an den Code melden. Alternativ können Sie auch das Tool eines Drittanbieters verwenden, um Ihren benutzerdefinierten Code zu minimieren.

Der meiste benutzerdefinierte Code wirkt sich nicht auf Elemente im Entwurfsmodus aus, um unerwartetes Verhalten zu vermeiden. Die Ergebnisse werden also erst nach dem Absenden der Website angezeigt.

Wenn der benutzerdefinierte Code nicht funktioniert, ist das WebFlow-Supportteam leider keine große Hilfe, da der benutzerdefinierte Code nicht in den Bereich des politischen Supports des Kundensupports fällt. Bitte überprüfen Sie den Code gegebenenfalls noch einmal und besuchen Sie das Webflow-Forum, um weitere Hilfe zu erhalten.

Webflow Wie man benutzerdefinierten Code hinzufügt

Mit benutzerdefiniertem Code können Sie Ihre Website an Ihre individuellen Bedürfnisse anpassen. Webflow bietet immer eine Reihe von Szenarien, die es den Benutzern ermöglichen, der gesamten Website oder nur einzelnen Seiten angepassten Code hinzuzufügen. Außerdem können Sie bestimmte Beiträge anpassen. Das Beste daran ist, dass Sie den benutzerdefinierten Code mit nur wenigen Klicks hinzufügen können, unabhängig von Ihrem Standort.

So fügen Sie Ihrer gesamten Website benutzerdefinierte Codes hinzu

Wenn Sie benutzerdefinierten Code auf jede Seite Ihrer Website anwenden möchten, ist die Option “Website-Einstellungen” der richtige Ort. Durch das Hinzufügen von benutzerdefiniertem Code wird ein nahtloses Erlebnis für alle Details der Website gewährleistet.

Site-weite Codes finden Sie in den Abschnitten “Head” oder “Footer Codes”. Gehen Sie wie folgt vor, um benutzerdefinierten Code in den Abschnitt “Head Code” einzufügen

In diesem Abschnitt können Sie benutzerdefinierte Stile verwenden, Verbindungen zu externen Ressourcen herstellen und Metadaten hinzufügen.

Um dem Abschnitt “Fußzeilen-Codes” benutzerdefinierten Code hinzuzufügen, kehren Sie zur Registerkarte “Benutzerdefinierte Codes” zurück und befolgen Sie die folgenden Schritte

So fügen Sie benutzerdefinierten Code zu einer Seite hinzu

Möglicherweise möchten Sie nur eine oder ein paar bestimmte Seiten Ihrer Website anpassen. WebFlow hat diesen Prozess sehr einfach gestaltet. Nach dem Hinzufügen des Codes folgt der Code der Seite über die gesamte Website und markiert sie.

Sobald der benutzerdefinierte Code zu einer einzelnen Seite hinzugefügt wurde, können Sie wählen, wo er platziert werden soll.

HTML- und CSS-Code sollten Sie immer auf dem Etikett platzieren. JavaScript-Code muss jedoch in folgenden Bereichen eingefügt werdenTeil des Labels, vor dem label Tag. Dies verbessert in der Regel die Leistung der Website, da Links, die dem Label-Abschnitt hinzugefügt werden, vor dem Element ausgeführt werden.

So fügen Sie benutzerdefinierten Code zu einem Label hinzu

Wiederholen Sie die ersten beiden Schritte und fügen Sie den Code vor Etikett. Gehen Sie dann wie folgt vor

So fügen Sie benutzerdefinierten Code zu einem Beitrag hinzu

Nehmen Sie an, dass Sie nicht die gesamte Website oder Seite anpassen müssen. In diesem Fall können Sie den benutzerdefinierten Code zu dem spezifischen Beitrag hinzufügen, den Sie aktualisieren. Bei einzelnen Beiträgen ist die Integration das A und O.

Sie können den benutzerdefinierten Code an beliebiger Stelle in das Design Ihrer Website oder in Rich-Text-Elemente einbinden. Zusätzlich zum benutzerdefinierten Code eignet sich diese Option auch hervorragend für die Integration von Daten Dritter, wie z. B. Live-Conversation-Anwendungen, Google Docs, Social Media Flow usw.

Wenn Sie Code zu einem Rich-Text-Element hinzufügen möchten, navigieren Sie zunächst zu dem anzupassenden Sammlungselement.

  1. Öffnen Sie den “Processor”.
  2. [Klicken Sie auf die Registerkarte “Sammlungen”.
  3. Wählen Sie “Sammlungen mit Rich-Text-Elementen”.
  4. Wählen Sie das gewünschte Sammlungselement aus.

Als nächstes müssen Sie das Feld “Rich Text” öffnen. Inhalt hat mehrere Optionen, die dem Rich-Text-Feld hinzugefügt werden können. Sie können eine der vorgegebenen Optionen auswählen oder Text eingeben.

Um benutzerdefinierten Code hinzuzufügen, müssen Sie die verfügbaren Optionen anzeigen. Klicken Sie dazu auf eine beliebige Stelle im leeren Feld. Gehen Sie dann wie folgt vor

Wenn Sie den benutzerdefinierten Code direkt in das Design der Website einfügen möchten, sehen Sie, was Sie tun müssen.

  1. Kopieren Sie den benutzerdefinierten Code, den Sie integrieren möchten.
  2. Gehen Sie zur Option “Tabelle hinzufügen”.
  3. [Wählen Sie die Option “Element integrieren”.
  4. Fügen Sie den benutzerdefinierten Code in das integrierte Element auf der Webflow-Arbeitsfläche ein.
  5. Drücken Sie auf “Speichern und schließen”.

Wenn Sie benutzerdefinierten Code schreiben, sollte dieser nicht eingebunden werden. Andernfalls wird Ihre Website ruiniert. Denken Sie jedoch daran, Etiketten zu öffnen und zu schließen.

Kodierung leicht gemacht

Sie müssen kein erfahrener Webentwickler sein, um benutzerdefinierten Code in WebFlow zu verwenden. Wenn Sie nicht wissen, wie man Code schreibt, hilft Ihnen in der Regel eine schnelle Google-Suche, um einen Kunden für Ihre Bedürfnisse zu finden. Folgen Sie dann der Anleitung und wenden Sie den Code dort an, wo Sie ihn benötigen. Das Ergebnis ist die maßgeschneiderte Website Ihrer Träume.

Haben Sie versucht, benutzerdefinierten Code zu Ihrem WebFlow-Standort hinzuzufügen? Welche Elemente haben Sie angepasst? Lassen Sie es uns im Abschnitt Anweisungen unten wissen.

LESEN SIE MEHR:

Verwandte Artikel

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button