Tabs mit Videoinhalten in Webflow bauen – SION Part 7

Описание: Part 7: Heute bauen wir in Webflow eine Tab Komponenten, bei der Beschreibungstexte unter dem Navigationspunkt eingeblendet bzw. ausgeblendet werden, je nachdem welcher Tab gerade aktiv ist. Als Vorlage nutzen wir einen vorgefertigten Aufbau aus der Relume Library um zügig in die Umsetzung zu starten. Den Custom CSS Code um die Texte nach active state auszublenden siehst du ab Minute 11:03.

👉 Mit dem Code JONAS20 erhältst du 20% auf dein Relume Abo!
https://jonasarleth.com/relume (Affiliate Link)

Hier gehts zur YouTube Playlist mit allen Videos zu diesem Projekt:
   • Sono Motors SION Marketing Landingpage  

Responsive Design Prozess auf meinem Patreon Account verfolgen:
  / 77302808  

Ergebnis anschauen:
https://sion-car.webflow.io

Im Webflow Designer öffnen und klonen (Template):
https://webflow.grsm.io/sion-landingpage * (affiliate Link)

---------------------------------------------

Meine Onlinekurse:

👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
https://formburg.com/kurs

👉 50+ Webflow-Tricks:
https://www.formburg.com/tricks

👉 Webdesign Angebote mit drei Preisoptionen erstellen:
https://www.jonasarleth.com/produkt/w...

---------------------------------------------

Kostenlosen Webflow Account anlegen:
https://formburg.com/webflow-kostenlos *

Webflow schnell und einfach lernen:
https://formburg.com/tutorials

---------------------------------------------

// TIMESTAMPS

00:00 – Was wir bauen
01:23 – Mit einer Relume Library Vorlage arbeiten
04:14 – Aufbau Tab Nav
07:28 – Aufbau Tabs Videoinhalte
08:52 – Play Toggle für Background Videos hinzufügen
09:28 – Grid Umstellung auf Flexbox Bug Gap lösen
11:03 – Aktive Tab Navigation Text ein / ausblenden
12:59 – Tab Navigation Hover Effekt erstellen
13:44 – Ergebnis

#webflow #savesion #webdesign

---------------------------------------------

// PATREON

► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://bit.ly/patreon-seite

----------------------------------------------

// MEIN WEBDESIGN UND FREELANCER BLOG

► https://jonasarleth.com/blog

----------------------------------------------

// SOCIAL MEDIA

► Instagram:   / jonasarleth  
► Dribbble: https://dribbble.com/jonasarleth
► LinkedIn:   / jonasarleth  

----------------------------------------------

// MEIN WEB & DESIGN PODCAST

► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► Pocket Casts: https://jonasarleth.com/pocketcasts
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
► Stitcher: https://jonasarleth.com/stitcher

----------------------------------------------

Affiliate Links