Der Showcase ist die Referenzinstallation von Leitvia: das Theme, Leitvia Studio und Leitvia Pro auf einer WordPress-Website, mit den Patterns und Blöcken auf eigenen Seiten und drumherum der Website von Plumbline, einem erfundenen Webstudio mit eigenem Token-Set.
Was die Demo zeigt
- Eine Seite für jedes Pattern des Themes und jedes der 11 Patterns von Studio, mit der Beschreibung, die der Block-Inserter anzeigt; die Shop-Patterns stecken in der Demo Northfold
- Eine Seite für jeden Block von Studio und Seiten für die Pro-Blöcke Scroll story, Before and after, Slider, Entry list, Data list und Data map, gefüllt mit echten Inhalten; die Commerce-Blöcke von Pro stecken in der Demo Northfold
- Die Website von Plumbline: ein Onepager mit Hero, Leistungen, einer Kundengeschichte, Ablauf, Preisen, Fragen und Kontakt, dazu eine Beispiel-Website mit Work, Services, About, Journal, Contact und Documentation, zusammengesetzt nach den Regeln in
leitvia-contract.json - Jede Seite in jeder Stilvariante über ?style= in der Adresse: Warm Editorial, Swiss Editorial und Corporate, jeweils hell und dunkel, neben dem Token-Set von Plumbline
- Eine Erklärung zur Barrierefreiheit mit einer Fassung in Leichter Sprache
Patterns und Blöcke
Die Patterns des Themes (Heroes, Inhalte, Teaser, Social Proof, Handlungsaufrufe, Angebote, Header und Footer) und die 11 von Studio, darunter Bento-Features, Story-Highlight, Spotlight-Szene, Timeline, Ankündigungs-Header, Mega-Menü-Panel und Preispläne. Die Startseite zerlegt die Showcase-Seite Streifen für Streifen, mit nummerierten Punkten, die zur Seite des jeweiligen Patterns führen.
Blöcke: jeder Block von Studio und sechs Blöcke von Leitvia Pro; die Startseite selbst nutzt Spotlight und Mega menu.
Jedes Pattern liest Farben, Größen und Abstände aus den Rollen des Designvertrags. Deshalb sehen dieselben Abschnitte in jeder Demo anders aus, ohne eine Zeile eigenes CSS.
Eckdaten
- Marke: Plumbline, ein erfundenes Webstudio, mit IBM Plex Mono für Überschriften und Newsreader für Text auf Kreideweiß, hellem Limettengrün und Moosgrün
- Art der Website: Referenzseite
- Gebaut mit: dem Theme, Leitvia Studio und den Blöcken von Leitvia Pro
- Tarif: Free, abgesehen von den Seiten der Pro-Blöcke.
- Live-Demo: demo.leitvia.com/
Eine Website wie Showcase bauen
So richtest du sie in drei Schritten auf deiner eigenen Website ein:
- Installiere das Theme und Leitvia Studio, wie es die Anleitung Erste Schritte zeigt.
- Wähle unter Design, Editor, Stile eine Stilvariante.
- Füge Patterns über den Block-Inserter ein und ersetze den Beispieltext; das Rezept Company richtet eine ähnliche Studio-Website in einem Durchlauf ein.
wp leitvia recipe apply leitvia/company --user=adminDer Skill leitvia-page baut eine Seite aus einem Ziel und Inhaltspunkten und wählt die Patterns nach den Kompositionsregeln des Vertrags.
Weitere Demos
- Northfold: Papier- und Risodruck-Shop
- The Lindenfeld Courier: Regionale Tageszeitung
- Lantern: Dokumentation einer Suchmaschine
- Alle dreizehn Demos