Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tabellen für Rich-Text Inhalte visuell erstellen
Tool
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Du kennst sicher das Problem: Du möchtest Tabellen in deine Rich-Text-Inhalte einfügen, aber das Webflow CMS bietet dafür bisher keine Lösung. Zum Beispiel für einen Vergleich zweier Plattformen in einem Blogpost. Ich nutze dafür immer einen visuellen HTML Tabellen-Designer, mit dem du schnell professionelle Tabellen für deine Blogposts erstellen und gestalten kannst. Diese Seite ermöglicht es dir, Spalten, Zeilen und Inhalte ohne Programmierkenntnisse hinzuzufügen.

Nachdem du deine Tabelle inklusive deiner Inhalte gestaltet hast, fügst du sie über das HTML-Embed-Field in deinem Rich-Text Element deines Webflow CMS Beitrags hinzu.

Diese zeitsparende Methode verbessert die Darstellung deiner Informationen und bietet deinen Lesern eine übersichtliche visuelle Präsentation. Du kannst das Tabellendesign sogar an deine Website anpassen, um ein einheitliches Erscheinungsbild zu gewährleisten. Eine praktische Ergänzung für Content-Creator oder Kunden, die viel mit Beiträgen arbeiten.

Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Im Browser Hintergrund von Bildern entfernen und als PNG runterladen
Freischalten
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen

Nutze ich häufig wenn es bei Kundenaufträgen mal schnell gehen muss. Funktioniert natürlich am besten bei Objekten, die einen neutraleren Hintergrund haben.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Sammlung an guten Webflow Styleguide-Vorlagen zum klonen (kostenlos)
Kostenlos
Highlight
Freischalten
Sammlung an guten Webflow Styleguide-Vorlagen zum klonen (kostenlos)

Nutze diese kostenlosen Webflow Styleguide Vorlagen für einheitliches, professionelles Website-Design.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern
Freischalten
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen
Freischalten
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen

Verlinke auf ein bestimmtes FAQ-Element von einer anderen Seite aus zu verlinken und es gleichzeitig geöffnet anzuzeigen. Einfach ?faq=3 mit an die URL hängen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Page Load Animation nur 1x in Webflow abspielen
Highlight
Freischalten
Page Load Animation nur 1x in Webflow abspielen

Erstelle eine Ladeanimation, die nur dann abgespielt wird, wenn der Besucher zum ersten Mal auf die Website kommt und nach Page Reload nicht mehr.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabs in Tabs, die auf Mobile zu Dropdown werden
Kostenlos
Freischalten
Tabs in Tabs, die auf Mobile zu Dropdown werden

Eine individuell gestaltete Tabs-in-Tabs-Komponente, die sich auf dem Mobile Breakpoint in eine Dropdown-Komponente verwandelt.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)
Freischalten
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Video Playback in einem Popup bei schließen stoppen
Freischalten
Video Playback in einem Popup bei schließen stoppen

Dieser Code stoppt automatisch das weitere abspielen eines Videos in einem Popup / Modal Fenster, sobald dieses geschlossen wird.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
JavaScript Breakpoints für Webflow
Freischalten
JavaScript Breakpoints für Webflow

Wenn du mit zusätzlichem Custom Code in Webflow arbeitest, soll dieser auch manchmal nur bei einem bestimmten Breakpoint ausgegeben werden. Dieser Code hilft dir dabei.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung