Copyright Jahreszahl im Footer automatisch aktualisieren

Webflow Code-Vorlage mit Anleitung

Diesen Trick und 43 weitere im Bundle kaufen

Vorschau

Anleitung

Einfach folgenden Code in deinen Seiteneinstellungen des Projekts im Bereich „Footer Code” hinzufügen:

 
<script>
    document.addEventListener("DOMContentLoaded", () =>
        document.querySelectorAll('.copyright-year').forEach(el =>
            el.textContent = new Date().getFullYear()
        )
    );
</script>

Ein Textfeld im Webflow Designer muss die CSS-Klasse „copyright-year” haben. Dieses Textfeld wird dann durch die aktuelle Jahreszahl ersetzt.

‍

Diesen Trick und 43 weitere im Bundle kaufen

Für 49 € freischalten

Was ist enthalten?

Weitere nützliche Webflow Tricks

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

Highlight

Freischalten

Autoplay Webflow Tabs

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Kostenlos

Freischalten

Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

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

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

Freischalten

Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Kostenlos

Freischalten

Eigener Video Player komplett in Webflow gebaut

Bau dir ein Video Player komplett in Webflow mit eigenen Interaktionen und Icons. Das mp4 File muss selbst gehostet werden.

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Kostenlos

Freischalten

SVG Linien animieren (wenn im Viewport)

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Alle Tricks anzeigen →