WEBFLOW WERK

Aufbau von Webseiten

Einleitung

Struktur

• Section: Die große, definierte Zone – vergleichbar mit einem Meeresgebiet. Sie teilt die Webseite in thematische Abschnitte.
• Container: Der strukturierte Hafen innerhalb der Zone. Er sorgt dafür, dass der Inhalt zentriert und lesbar bleibt.
• Grid / Flexbox: Die unsichtbaren Strömungen die bestimmen, wie die Elemente im Container zueinander stehen und sich bewegen.
• Div Block: Die vielseitigen, leeren Behälter – vergleichbar mit Felsen oder Korallen. Sie fassen Inhalte zusammen und geben ihnen eine eigene Form.
• Image / Heading / Paragraph: Die belebten Elemente im Behälter – wie Fische, Muscheln und Seegras. Sie sind der eigentliche Inhalt, der die Struktur füllt.

Container

Basic

• Heading: Die großen Felsen. Sie strukturieren den Meeresgrund und geben Orientierung.
• Paragraph: Das feine Meeresgestein, das die größeren Felsen umgibt. Es liefert die detaillierten Informationen.
• Text Link: Die Algen, die die Felsen miteinander verbinden. Sie führen zu anderen Orten im Ozean.
• Image: Die Fische und Korallen. Sie verleihen dem Meeresgrund visuelle Schönheit und Leben.
• Button: Der Rettungsring. Er gibt klare Handlungsanweisungen und leitet den Besucher zu einem sicheren Ziel.
• Video: Ein Unterwasserfilm. Er zeigt die dynamische Schönheit der Unterwasserwelt.
• List: Ein Schwarm kleiner Fische. Sie organisieren sich in einer geordneten Reihe und machen die Information leicht verdaulich.
• Background Video: Die ruhige Bewegung des Wassers. Es schafft eine beruhigende Atmosphäre im Hintergrund.

Grundelemente

TYPOGRAPHY

• Heading: Die wichtigsten Felsen im Riff, die dem Auge sofort Orientierung geben. Sie signalisieren die Bedeutung von Abschnitten.
• Paragraph: Das feine Sediment, das das Riff umgibt. Es füllt die Leerräume mit Detailinformationen.
• Block Quote: Ein einzelner, alter Korallenblock, der eine besonders weise Meeresbewohnerin beherbergt. Es hebt ein wichtiges Zitat hervor.
• Rich Text: Ein vielfältiges Stück Meeresboden, das verschiedene Elemente wie Text, Bilder und Listen in sich vereint.
• Link: Die unsichtbare Verbindung zwischen Riffen. Es ermöglicht eine nahtlose Navigation von einem Ort zum anderen.

Text

CMS

• Collection List: Ein Netz, um einen Schwarm ähnlicher Fische zu organisieren, wie z.B. Blogposts, Teammitglieder oder Produkte. Es ist der Behälter, der die Sammlung von Elementen darstellt.
• Collection Item: Ein einzelner Fisch im Netz. Es repräsentiert einen individuellen Datensatz, wie einen einzelnen Blogartikel oder ein einzelnes Produkt.
• Collection Page: Die spezielle Unterwasserhöhle, die automatisch für jeden einzelnen Fisch im Netz erstellt wird. Sie dient als Vorlage für die Einzelseiten der Inhalte.

Content Management System

E-Commerce

• Product Collection: Eine große, reichhaltige Perlenmuschel, die alle Produkte sicher und übersichtlich enthält. Sie ist der zentrale Behälter für alle Verkaufsartikel.
• Products: Die einzelnen, wertvollen Perlen in der Muschel. Jede Perle ist ein einzigartiges Produkt, das individuell betrachtet und gekauft werden kann.
• Add to Cart Button: Der Haken an der Angel, mit dem man die Perle aus dem Meer zieht. Er ist die direkte Handlungsaufforderung zum Kauf.
• Shopping Cart: Die Netztasche, in der man die gesammelten Perlen aufbewahrt, bevor man zum Schiff zurückkehrt. Es ist der virtuelle Einkaufswagen des Kunden.
• Checkout: Der Weg zurück zum Schiff, wo der Schatz übergeben wird. Es ist der sichere Prozess, um die Bezahlung abzuschließen.
• User Account: Der persönliche Meeresgrund, wo der Taucher alle seine vergangenen Funde und Informationen speichern kann. Es ermöglicht eine persönliche Verwaltung von Bestellungen und Daten.

Shop-System

MEDIA

• Image: Ein Unterwasserfoto. Es ist ein statischer Moment, der visuell ansprechend ist und die Geschichte des Ozeans erzählt.
• Video: Ein kurzer Film über die Strömung. Es fängt Bewegung und Atmosphäre ein und macht die Umgebung lebendig.
• Lottie-Animation: Ein leuchtender Tiefseefisch, der sich auf eine einzigartige, glatte Weise bewegt. Es ist eine extrem effiziente und anpassbare Vektorgrafik-Animation.
• Lightbox: Ein kleines Bullauge, das ein Bild oder ein Video in den Fokus rückt und das umgebende Meer ausblendet, um volle Aufmerksamkeit zu erzeugen.

Bild & Animation

ADVANCED

• Embed: Eine kleine Tauchkapsel, mit der man direkt in die Systeme anderer Ozeane (externe Webseiten) eintauchen kann, ohne das eigene Gewässer zu verlassen. Perfekt für das Einbetten von Karten, Widgets oder benutzerdefiniertem Code.
• Slider: Eine Glaswand, die sich bewegt und die verschiedenen Ansichten des Ozeans nacheinander präsentiert, wie eine Fotogalerie oder ein Karussell.
• Tabs: Eine Reihe von Leuchttürmen, die es dem Besucher ermöglichen, schnell von einem bestimmten Bereich des Riffs zum nächsten zu springen, ohne umherschwimmen zu müssen.
• Dropdown: Ein versenkbares Bullauge. Beim Draufklicken öffnet sich ein Menü, das weitere Optionen preisgibt.
• Background-Div: Eine unsichtbare Schicht, die dem Meeresboden zusätzliche Farbe oder Tiefe verleiht, ohne die darüberliegenden Elemente zu beeinflussen.
• Map: Eine interaktive Seekarte. Sie ermöglicht es dem Benutzer, einen bestimmten Bereich des Ozeans zu erkunden und Details zu Orten zu erfahren.
• Form: Ein intelligentes Netz, das vom Benutzer gesammelte Informationen (wie Kontaktanfragen oder Anmeldungen) sicher einfängt.

Mit den Fischen schwimmen 🐟

OTHERS

• Collection List Wrapper: Das große Containerschiff, das die Netze mit den Fischen (Collection Lists) über den Ozean transportiert und organisiert.
• Symbol: Eine magische Muschel, die Du klonen und an jedem Ort im Ozean wiederverwenden kannst. Jede Änderung, die Du an der Ursprungsmuschel vornimmst, wird automatisch auf alle Klone übertragen.
• Legacy Elements: Alte Schiffswracks, die noch immer auf dem Meeresgrund liegen und ihre Funktion erfüllen. Diese Elemente sind Teil der Geschichte, werden aber nicht mehr aktiv für neue Projekte verwendet.

Ich mache Meer daraus 🌊

INTERACTIONS

• Die Strömungen, die Leben einhauchen: Interaktionen sind die dynamischen Strömungen, die Dein Riff zum Leben erwecken. Sie lassen Fische vorbeiziehen, Algen schwingen und Korallen leuchten.
• Die unsichtbare Magie: Sie sind die unsichtbare Magie, die das Licht tanzen lässt, wenn ein Besucher Deine Seite berührt. Ein Klick, ein Hover – und die Unterwasserwelt reagiert, ohne dass die gesamte Umgebung sich verändert.
• Der Dialog zwischen Taucher und Ozean: Interaktionen ermöglichen den Dialog zwischen Deinem Besucher (dem Taucher) und Deiner Webseite (dem Ozean). Sie geben dem Nutzer Feedback und machen die Reise durch Deine Inhalte intuitiv und fesselnd.

- und sie bewegt sich doch, _{nicht nur angeblich ...}

HTML & CSS

• HTML ist das Skelett Deines Schiffes: Es gibt Deinem Web-Ozean eine feste Struktur. Ohne es würde alles davonschwimmen.
• CSS ist die Farbe und die Segel: Es sorgt dafür, dass Dein Schiff (und Dein Ozean) nicht nur funktional, sondern auch wunderschön aussieht und sich elegant bewegt.
• Gemeinsam sind sie der perfekte Tauchgang: Du kannst mit ihnen von Grund auf eine einzigartige Unterwasserwelt erschaffen, die genau so aussieht, wie Du es Dir vorstellst.

weiter im Text ...