Die Blog-Posts „Feed“ gestalten

Heute haben ich mich damit beschäftigt, die Blog-Post zu gestalten. Den So genannten Feed oder Stream. Dieser sollen für jeden einzelnen Artikel ein Beitragsbild erhalten. Mit der Größe und Position bin ich nicht ganz zufrieden. Hier werde ich weiter daran schrauben. Auch habe ich die alten Trenner, der zwischen den einzelnen Artikel war, wieder übernommen und angepasst. Auch wurde dem Hauptinhalt, in dem sich die Posts befinden, mehr Platz gegeben.

post-article-styling-feed
post-article-styling-feed

Markup und Formatierung

Diese Woche habe ich etwas Feinschliff an der Formatierung und dem Markup gemacht. Mir gefällt das Color-Schema sehr. Das dunkle Grün mit den Erdton für die Links und Titel harmoniert und ist denke ich treffend für das Thema Umwelt.

markup-formatierung
markup-formatierung

Footer Logo – Individuell einstellbar für das Theme

Ich habe heute einen Bereich im Footer für das Logo des Seitenbetreibers erstellt. Somit kann das Thema auch ein anderer Umweltverein nutzen. Das war mir wichtig.

footer-logo-schwarzweiss
footer-logo-schwarzweiss

Für den aktuellen Verein habe ich, dank des Rates eines befreundeten Designers, das Logo auch in Farbe hinterlegt. Wenn man mit der Maus drüber fährt, wird es gegen die Variante in Farbe ausgetauscht. Siehe unten.

footer-logo-farbe
footer-logo-farbe

Header und Fonts eingerichtet

Ich habe eine maximale breite von 1650px vergeben. Ich denke damit werden alle Endbenutzer zufrieden sein. Als Fonts kommen Lora für die Überschriften und Nora Sans für den Fließtext in Frage. Auch habe ich noch Zierelemente hinzugefügt und ein ruhigeres Weiß als Hintergrund für den News-Stream gewählt, damit auch bei langen Artikel das Auge nicht zu sehr strapaziert wird.

header-fonts-eingerichtet
header-fonts-eingerichtet

Browser-sync eingerichtet und Gulp Workflow erstellt

Browser-sync eingerichtet und Gulp Workflow erstellt. Nun ist alles so eingerichtet wie ich es haben möchte um das neue WP-Theme zu entwickeln. Ich habe es auenwald-2017 getauft. Zudem habe ich bewusst auf den Schritt Photoshop oder Sketch Datei(n) zu entwickeln ausfallen lassen. Mal schauen wohin mich die Reise bringt. Ich bin jedenfalls gespannt.

browser-sync-gulp-eingerichtet
browser-sync-gulp-eingerichtet