Jansens Pott im neuen Dark Design – dunkel und grün

Gesteuert wird das über ein Tag. Zuerst hatten wir überlegt, es über die Kategorie zu filtern. Das kann uns später aber mal auf die Füße fallen, wenn wir einen Beitrag eigentlich lieber in einer anderen Kategorie als „Fotoalbum“ haben wollen. Daher haben wir uns für das Tag „dark“ entschieden. Das ist dahin gehend praktisch, weil wir die Schlagwörter sowieso nur zu Steuerung im Hintergrund nutzen. Die tauchen nirgendwo sichtbar auf dem Blog auf.

Im Avada Layout-Builder haben wir jetzt zwei Beitrags-Layouts, welche über das Tag gesteuert werden.

Am Ende mussten wir nur einen Änderung per CSS machen. Die Überschriften werden auch im Dark Design in Dunkelgrün geschrieben. Das kann man im Content-Bereich des Layout-Builder nicht beeinflussen. Aber wir haben der Content-Box dann einfach die Klasse „dark-design“ gegeben und die Überschriften per CSS auf Weiß gesetzt.

Startseite, Themenseiten und Archive im Dark-Design

Als Nächstes kam die Startseite dran. Diese erscheint nun, wie alle Themenseiten, im Dark-Design. Alle wichtigen Informationen und Linkboxen haben dort aber eine Farbe als Kontrast. Dazu haben wir neue Masken-Funktion von Avada für Fotos genutzt. Titelbilder und Vorschaubilder werden jetzt in einem Sechseck angezeigt. Mit dieser Funktion kann jedes Foto in einer Maske, in einer beliebigen Form dargestellt werden. Dafür stehen im Standard einige zur Verfügung. Wer eine andere Form haben möchte, kann einfach eigene Masken hochladen. Einfach ein Bild hochladen, wo die Form des Bildes schwarz ist.

Für die Anzeige von Blogbeiträgen auf der Startseite, den Themenseiten und der Archivseiten war das über die selbst definierten Post-Cards schnell erledigt.

Etwas mehr Aufwand waren die anderen Boxen auf den genannten Seiten, welche manuell eingebunden waren. Hier mussten wir die Masken manuell einmal zufügen. Die restliche Formatierung der Boxen, Hintergrund und den Farbbalken oben konnten wir über das Farbmanagement zentral steuern.

Nun mussten nur noch die Hintergründe der Archivseiten auf dunkel umgestellt werden und auf den Themenseiten haben den Wechsel von dunkel auf hell noch mal angepasst. Damit waren die Inhalte auf Dark Design so weit umgestellt.

Header und Menü

Beim Menü haben wir nur die Anpassung der Farben vorgenommen und den Menübereich ein wenig höher gemacht. Das wirkte im dunklen Design sonst arg gequetscht. Den Hintergrund bei den ausgeklappten Menüs haben wir hell gelassen. Das ist jetzt ein schöner Kontrast zum Inhalt, wenn die Menüs darüber liegen.

Die Schrift im Menü haben wir ein wenig vergrößert. Diese war vorher doch arg klein und schwer zu lesen. Jetzt passen aber nicht mehr alle Kategorien ins Menü. Naja, wir haben die nicht soooo wichtigen Kategorien nun unter „Mehr…“ zusammengefasst.

Wichtig – danach die Performance checken

Nach den Änderungen, und dem Umzug zum neuen Hoster, waren wir natürlich gespannt, was die Performance des Blogs sagt. Wir haben doch viele grafische Elemente eingebaut. Aber, Entwarnung. das sieht gut aus.

Das sieht doch brauchbar aus, damit können wir gut leben. Und wieder der Beweis, auch ein mächtiges Theme wie Avada bekommt man schnell, wenn man es nicht übertreibt und im Hintergrund ein gutes Caching und ein schneller Server arbeitet.

Arbeiten abgeschlossen und trotzdem nicht fertig

Wir haben die Arbeiten nun abgeschlossen. Aber richtig fertig sind wir noch nicht, wie immer. Ein paar Kleinigkeiten stören uns noch. Mit der Hintergrundfarbe der kleinen Boxen sind wir noch am Hadern. Vielleicht ändern wir diese erneut. Zudem  haben wir gestern versucht, im Header einen Förderturm einzublenden. Nicht als Logo, aber als Bezug zum Pott aus dem Pott. Leider macht das auf dem iPhone einige Probleme, wenn wir im Header Bilder einfügen. Da müssen wir mal forschen, was der Grund dafür ist.

Jetzt interessiert uns natürlich, wie gefällt Euch unser neues Design? Wir wissen, dass wir uns damit abseits vom Mainstream bewegen. Wir haben uns trotzdem bemüht, kein 90er Jahre Bernstein-Monitor-Design entstehen zu lassen. Schreibt uns gerne Eure Meinung in die Kommantare.