Teil 2: Ein gestaltetes Portfolio ohne Code

Dein CMS läuft und du hast ein Konto. Jetzt braucht es einen Ort für deine Inhalte. In Manablox heißt dieser Ort Space: eine Website mit eigenen Seiten, Bildern, Menüs und Sprachen. Eine Installation kann viele Spaces enthalten, zum Beispiel dein Portfolio und einen Blog.

Der Einrichtungsassistent aus dem letzten Teil fragt direkt nach deinem Konto nach dem ersten Space. Klick auf Create a space.

Name und Website

Füll das Formular so aus:

• Name: Portfolio. Der technische Name füllt sich von selbst aus. Programme sprechen den Space damit an, und er lässt sich später nicht ändern.

• Website: Designed site. Manablox zeichnet die Website für dich. Die andere Wahl, Own frontend, ist das, worauf du in Teil 4 umstellst.

• Site URL: Behalte http://localhost:3200. Dort läuft die gestaltete Website auf deinem Computer.

• Locales: Englisch reicht vorerst. Weitere Sprachen kannst du später hinzufügen.

• Start with: Preconfigured, damit du Inhaltstypen, Beispielseiten und ein Menü bekommst statt eines leeren Spaces.

Die Art der Website

Als Nächstes fragt Manablox, was für eine Website es ist. Wähl Portfolio.

Die Portfolio-Art legt eine Menge für dich an:

• Einen Inhaltstyp namens Project. Ein Inhaltstyp ist wie ein Formular: Er legt fest, welche Felder ein Dokument hat. Ein Projekt hat einen Kunden, ein Jahr, deine Rolle, ein Titelbild, eine Zusammenfassung, eine Galerie und einen Text.

• Einen Inhaltstyp namens Page, der aus Blöcken besteht: Abschnitte wie ein Hero, ein Projektraster, eine Galerie, ein Zitat oder ein Kontaktformular, die du in beliebiger Reihenfolge stapelst.

• Beispielseiten (Home, Work, About und Contact), drei Beispielprojekte und ein Hauptmenü, das sie verlinkt.

Theme und Design

Der letzte Schritt ist das Aussehen. Das Theme legt Farben, Schriften und Knöpfe fest. Das Site Design legt das Layout fest: Kopf- und Fußbereich, Menüs und wie jeder Abschnitt aussieht. Jedes Design passt zu jedem Theme, und du kannst beides jederzeit ändern, nimm also einfach, was dir gefällt. Robin hat das Theme Studio und das Design Gallery gewählt, das ruhig ist und Bilder in den Vordergrund stellt. Klick dann auf Create space.

Ein Rundgang durch den Admin

Klick auf Go to the admin. Das Dashboard zeigt, was in deinem Space steckt: sieben Dokumente, zwei Inhaltstypen und acht Blocktypen. In der Seitenleiste findest du alles andere:

• Content: deine Seiten und Projekte.

• Assets: Bilder und Dateien.

• Menus: die Navigation deiner Website.

• Content types: die Formulare hinter deinen Dokumenten.

• Design: Theme, Layouts und das Aussehen jedes Blocks.

• Settings: Sprachen, Benutzer, Export und mehr.

Den Site-Prozess starten

Eine gestaltete Website wird von einem eigenen Prozess ausgeliefert, dem Site-Prozess. Öffne ein zweites Terminal, lass das erste mit pnpm dev weiterlaufen, und starte ihn:

Klick jetzt im Admin auf Visit site, oder öffne http://localhost:3200. Das ist deine Website, bereit für deine Inhalte:

Wie die Inhalte geordnet sind

Klick in der Seitenleiste auf Content. Die Spalte in der Mitte ist der Inhaltsbaum, und er ist die Landkarte deiner Website: Der Platz eines Dokuments im Baum ist seine Adresse. Work liegt unter /work, und das Projekt Brand refresh darunter unter /work/brand-refresh. Klick auf den Pfeil neben Work, um seine drei Projekte zu sehen.

Die Symbole in jeder Zeile erledigen die häufigsten Aufgaben: Der Stern macht eine Seite zur Startseite, der grüne Punkt zeigt, dass sie veröffentlicht ist, dann folgen Duplizieren, Löschen und +, um eine Seite darunter anzulegen. Du brauchst sie im nächsten Teil, in dem Robins Projekte die Beispiele ersetzen.