In dieser kurzen Anleitung zeigen wir Ihnen, wie Sie das „Look and Feel“ der Scrivito Example App ändern können, ohne den Code der Anwendung zu modifizieren.
Das Erscheinungsbild der Example App anpassen
Das Erscheinungsbild der Example App anpassen
Öffnen Sie zu Beginn bitte die Example App über Ihr Scrivito Dashboard oder Ihren Netlify-Account. Aktivieren Sie dann die Scrivito-Bedienoberfläche (falls sie nicht bereits aktiv ist), indem Sie über edit.scrivito.com auf Ihre Website zugreifen oder „scrivito/“ unmittelbar hinter dem Hostnamen (und Port) in die URL einfügen. Die URL müsste dann ungefähr so aussehen:
https://guter-name-3522.scrivito.net/scrivito/https://guter-name-26311.netlify.com/scrivito/
Jetzt können Sie den Modus-Schalter in der Mitte der oberen Leiste auf „Bearbeiten“ stellen. Falls Sie noch nicht in einer Arbeitskopie sind, werden Sie nun gebeten, eine anzulegen oder auszuwählen.
Seiten- und Website-Eigenschaften festlegen
Mit Scrivito können Sie nicht nur Webseiten mit Widgets erstellen, sondern auch bestimmte Seiteneigenschaften anpassen, die nicht direkt auf den Seiten zugänglich sind, beispielsweise die Größe des Header-Bildes, Seitenbeschreibungen für soziale Medien und dergleichen. Dies können Sie über den jeweiligen „Seiteneigenschaften“-Dialog erledigen, der im Hauptmenü rechts oben angeboten wird.
Bei auf Scrivito basierenden Anwendungen ist es gängige Praxis, Einstellungen, die die Website insgesamt betreffen (und nicht nur einzelne Seiten), über die Homepage zugänglich zu machen. Ein Logo oder Header-Bild zum Beispiel, das auf den meisten oder allen Seiten angezeigt werden soll, kann dadurch bequem an einer zentralen Stelle auf der „obersten Ebene“ der Website gepflegt werden. Die Scrivito Example App folgt diesem Ansatz.
Der untere Bereich jeder Seite, der Footer, ist ebenfalls eine Komponente der Website insgesamt, kann jedoch direkt bearbeitet werden und ist daher nicht in den Seiteneigenschaften der Homepage zu finden. Werden solche übergreifenden Inhalte auf einer Seite geändert, ändern sie sich auch auf allen anderen Seiten.
Lassen Sie uns nun eine der Website-Einstellungen ändern, die im „Seiteneigenschaften“-Dialog zur Verfügung stehen.
Das Logo austauschen
Die Example App ist mit einem anpassbaren Logo ausgestattet, das in zwei Versionen enthalten ist, je einer für helle und dunkle Hintergründe. Wie Sie vielleicht schon bemerkt haben, ändert sich das Logo, wenn man die Seite scrollt und der Header von dunkel zu hell übergeht. Die als Logo zu verwendenden Bilder können in den Homepage-Eigenschaften festgelegt werden.
Während Sie auf der Homepage sind (klicken Sie das Logo an, um gegebenenfalls dorthin zu navigieren), können Sie aus dem Hauptmenü „Seiteneigenschaften öffnen“ wählen und dann auf den Reiter „Site settings“ klicken, um im Dialog unterhalb von „Site name“ die beiden Logo-Optionen zu sehen und bei Bedarf zu ändern.
Im Bearbeitungsmodus können Sie auf ein Dialogelement eines Bildes klicken, wodurch sich der Content Browser öffnet, sodass Sie ein Bild auswählen oder ein eigenes hochladen können. Um ein Bild hochzuladen, ziehen Sie es von Ihrem Desktop in den Content Browser und lassen Sie es dort fallen.
Ist ein (gewähltes oder hochgeladenes) Bild im Content Browser selektiert, klicken Sie rechts unten auf „Auswählen“, um das betreffende Bild zu ersetzen. Am besten probieren Sie es gleich einmal aus!
Laden Sie nun das zweite Logo hoch. Für diese Anleitung haben wir aus der Scrivito Example App die ACME-App gemacht.
Am besten ist es, wenn beide Versionen des Logos dasselbe Motiv darstellen, farblich jedoch gegensätzlich sind. Beide sollten dieselbe Größe und Form haben, aber natürlich können Sie auch hier experimentieren, um den Übergang zwischen den Versionen zu optimieren. Scrollen Sie ein wenig auf der Seite, um zu sehen, wie das Logo insgesamt wirkt.
Wenn Sie zu einer anderen Seite navigieren, können Sie auch dort das Logo sehen, obwohl Sie es in den Seiteneigenschaften nicht festgelegt haben. Dies wäre auch gar nicht möglich, da – wie oben erwähnt – die Example App das Logo von der Homepage auch für alle anderen Seiten nutzt.
Den Stil der Header-Bilder ändern
Bei der Scrivito Example App lässt sich für jede Seite ein eigenes Header-Bild angeben, um die Seiten interessanter und visuell ansprechender machen zu können. Wurde einer Seite ein Header-Bild zugewiesen, dient es auch als Hintergrund des Logos, der Navigation und des Icons für die Suche.
Um das Header-Bild oder eine Anzeigeoption dafür zu ändern, öffnen Sie wieder den Seiteneigenschaften-Dialog der Seite über das Hauptmenü rechts oben. Wählen Sie diesmal nicht die „Site settings“, sondern bleiben Sie auf dem „Allgemein“-Tab.
Es gibt drei Optionen für den Header, dessen Höhe, das zu verwendende Bild sowie die Anwendung eines Verlaufs. Probieren Sie einfach aus, welche Kombination von Einstellungen am besten zu den jeweiligen Seiteninhalten passt.
Wie oben mit Bezug auf das Logo erwähnt, können Sie auch Ihre eigenen Header-Bilder hochladen. Denken Sie bitte daran, dass ein solches Bild die gesamte Breite der jeweiligen Seite beansprucht. Einem zu schmalen Bild wird es daher an Schärfe fehlen.
Die Optionen “Small” und “Medium” für die Bildhöhe bewirken, dass das Bild oben und unten beschnitten wird, um es passend zu machen. Bei eingeschaltetem Verlauf („gradient“) wird die Bildmitte hervorgehoben, indem die Helligkeit zu den Rändern hin verringert wird.
Wenn Sie mit dem Ergebnis Ihrer Änderungen zufrieden sind, vergessen Sie nicht, die Arbeitskopie zu veröffentlichen. Werfen Sie doch auch noch einen Blick auf die anderen „Site settings“ der Homepage!