Webflow Span in CMS-Text: Text-Spans in dynamischen Text einfügen

Text-Spans in dynamischen CMS-Textelementen in Webflow erstellen

Auf diese Funktion warten viele Webflow-Nutzer schon seit der Einführung der Collection Lists in Webflow. Ohne Code ist das kaum umsetzbar, es sei denn, Sie kombinieren eine ganze Reihe von Feldern. Das funktioniert wirklich nur bei Überschriften (Rich-Text-Felder bleiben meist außen vor) und ist wenig flexibel. Falls Sie schon einmal nach einer Möglichkeit gesucht haben, einen Webflow-Span hinzuzufügen oder nur einen Teil einer Überschrift oder eines Textfelds aus dem CMS zu formatieren, ist dies der Workaround, den wir verwenden.

Dafür setzen wir ein wenig eigenen Code und eine Markierung ein, die Sie im Designer oder Editor in Ihren CMS-Feldern vor und nach dem Text platzieren, der den Span erhalten soll. Als kleines Webflow Studio besteht Milk Moon Studio aus Webflow-Designern, die Low-Code-Lösungen bevorzugen, wenn es keine No-Code-Option gibt. Sie müssen dafür keineswegs ein Webflow-Experte sein, es ist im Grunde Kopieren und Einfügen. Am Ende des Beitrags finden Sie außerdem einen praktischen Webflow Cloneable zum Übernehmen.

In unserem Fall wollten wir einfach die Textfarbe ändern und es dem Kunden besonders leicht machen, indem er nur eine Markierung im CMS setzt. Zunächst jedenfalls, komplexere Anwendungsfälle folgen später.

Die Styles erstellen

Zuerst haben wir den Text-Style erstellt, der im Span verwendet wird. Wir haben eine grüne Textfarbe gewählt und ihn text-color-green genannt. Beachten Sie die Regeln der CSS-Style-Stapelung und überschreiben Sie nur das, was der Span anwenden soll. (Falls die Stapelung noch etwas unklar ist, hilft unser Leitfaden zur CSS-Spezifität in Webflow weiter.)

Den Webflow-Span-Style für das dynamische Textelement erstellen

jQuery einbinden

Als Nächstes fügen Sie dieses Skript in den <head>-Code des Projekts ein.

Eigenen Code zur Seite hinzufügen

Im nächsten Schritt fügen Sie das eigene Skript zu den Seiten hinzu, die die CMS-Spans benötigen. Es gehört in den Bereich „Before </body> tag“, da der Text geladen sein muss, bevor das Skript läuft.

Im Code sehen Sie, dass ich in meinem Fall alle h1, alle h2 und Text mit dem Style .services-hero_h1 erfassen wollte. Sie suchen Zeile 4:

‍const headings = document.querySelectorAll('h1, h2, .services-hero_h1');

Ergänzen Sie hier einfach Ihre eigenen Styles oder Tags.

Den Text im CMS markieren

Setzen Sie zum Schluss die Markierung um den Text im CMS. Wir haben %% als Markierung verwendet. Sie lässt sich im vorherigen Codeabschnitt ändern, aber für uns hat %% gut funktioniert.

Die Markierung um den Text setzen, auf den sie in Webflow nach der Veröffentlichung wirken soll

Natürlich sehen Sie den Span im Designer nicht, aber nach der Veröffentlichung funktioniert er einwandfrei, sobald der Code läuft. Das Skript sucht die angegebenen Textelemente, prüft auf die Markierung %% und setzt den Span um den Text innerhalb der Markierung.

Text-Span-Markierung im Designer

Text-Span mit sichtbaren Markierungen im dynamischen Textfeld im Webflow Designer

Webflow-CMS-Text-Span auf der veröffentlichten Website

Text-Span für dynamischen Text im veröffentlichten Webflow-Projekt

Zwei Spans!

Wenn Sie es einfach halten möchten, ist das schon alles. Uns fiel allerdings auf, dass das Grün auf weißem Hintergrund einen viel zu schwachen Kontrast hatte. Also haben wir einen weiteren Span mit einem dunkleren Grünton erstellt und zwei Styles ergänzt, die wir auf die Textelemente anwenden konnten: einen für grünen Text auf dunklem Hintergrund und einen für grünen Text auf weißem Hintergrund. Damit gab es zwei zusätzliche Text-Styles, die das Skript prüfen musste, und zwei formatierte Text-Spans, die je nach hellem oder dunklem Hintergrund anzuwenden waren. Damit das Skript Text auf Weiß erkennt, haben wir .text-is-on-white als Style hinzugefügt, für Text auf Dunkel den Style .text-is-on-dark.

Für Text auf Weiß haben wir einen neuen, dunkleren Grün-Style erstellt: .text-color-green-on-white

Wir wissen, wir müssen dringend besser darin werden, Styles zu benennen.

Jedenfalls musste der Code angepasst werden, damit er alles durchläuft und auch den neuen Span setzt. Hier ist der neue Code:

Dieser Code ersetzt einfach den vorherigen Code vor dem </body>-Tag. Das war’s auch schon: etwas zusätzlicher Code, der Ihnen eine Idee gibt, was möglich ist, wenn es komplexer wird.

Den Text ausblenden, wenn die Seite beim Laden %% aufblitzen lässt

Zu guter Letzt: Ist Ihre Seite groß oder aufwendig, sehen Sie vielleicht die %%-Markierung kurz aufblitzen, bevor sie beim Laden des Skripts ersetzt wird. Eine einfache Lösung ist eine Klasse, die den Text ausblendet, bis das Skript gelaufen ist, und ihn danach sichtbar macht.

Sie müssen den neuen Style im <head> hinzufügen und die Klasse dann auf die Elemente anwenden, die aus- und eingeblendet werden sollen (bei uns waren das h1, h2 und .services-hero_h1). Ergänzen Sie danach Ihr Skript um den Teil, der den Text wieder einblendet.

Häufige Fragen zu Webflow-Text-Spans

Wie füge ich in Webflow einen Span zu CMS-Text hinzu?

Webflow erlaubt es im Designer nicht, einen Teil eines dynamischen Textelements in einen Span zu setzen. Der Workaround: Sie setzen eine Markierung (wir verwenden %%) um die Wörter im CMS-Feld und fügen ein kleines Skript hinzu, das die Markierung findet und diese Wörter in einen Span mit Ihrer Style-Klasse packt.

Warum sehe ich den Span im Designer nicht?

Der Span wird vom Skript im Browser hinzugefügt. Im Designer und Editor sehen Sie deshalb nur die %%-Markierungen. Der formatierte Text erscheint, sobald die Website veröffentlicht ist und der Code läuft.

Kann ich statt %% eine andere Markierung verwenden?

Ja. Die Markierung wird im Skript festgelegt. Ändern Sie sie dort und verwenden Sie dieselben Zeichen in Ihren CMS-Feldern. Wir sind bei %% geblieben, weil es für uns gut funktioniert hat.

Warum blitzt %% auf, bevor sich der Text ändert?

Das Skript läuft nach dem Laden der Seite. Auf einer großen oder aufwendigen Seite kann die Markierung daher kurz sichtbar sein. Blenden Sie den Text mit einer Klasse aus, bis das Skript gelaufen ist, wie im Abschnitt zum Ausblenden des Textes oben beschrieben.

Wenn Sie mehr CMS-Tricks suchen, werfen Sie einen Blick auf CMS-gesteuerte Hintergrundverläufe, ein natives CMS-gesteuertes Ticker-Band, das Ausbrechen aus dem CMS-Raster mit Flexbox und das Erstellen einer Blog-Zusammenfassung ohne Zusammenfassungsfeld. Weitere kostenlose Builds finden Sie auf unserer Seite Webflow Cloneables.

Dieser Leitfaden hilft Ihnen hoffentlich, eine seit Langem gewünschte Funktion umzusetzen. Wenn Sie Fragen haben, hinterlassen Sie sie gern in den Kommentaren. Vielleicht erstellen wir auch ein Video-Tutorial, bleiben Sie also dran! Hier können Sie den Webflow Cloneable übernehmen , um zu sehen, wie es umgesetzt ist. Wenn Sie an weiteren Anleitungen interessiert sind, schauen Sie in den entsprechenden Bereich des Blogs.