Unser Blog soll schöner werden!

Bei de.hypotheses stehen die Inhalte im Vordergrund, klar. Aber das Auge liest mit – und ein spannendes Blog, das schön aussieht, wird umso lieber gelesen. Ganz häufig werden wir daher als Community Management gefragt, wie Bloggende bei de.hypotheses ohne viel Aufwand ihre Blogs “aufhübschen” können. Und viele Bloggende sind überrascht, welche einfachen Möglichkeiten sich bieten, um aus dem eigenen Blog visuell mehr herauszuholen.

In diesem Artikel zeigen wir, welche Möglichkeiten der Customizer sowie die Bild- und Seitenansicht bieten, um designerische Akzente zu setzen – und geben noch ein paar andere praktische Tipps aus unserer Toolbox mit.

Der Customizer: Ungeahnte Möglichkeiten

Da der Customizer in jedem Theme etwas anders aussieht und unterschiedliche Möglichkeiten bietet, werden hier zwei besonders gern genutzte Themes bei de.hypotheses präsentiert: Twenty Seventeen und Hueman Hypotheses. Die anderen Tipps gelten aber natürlich für alle Themes gleichermaßen!

Farbauswahl im Customizer: Hueman

Hueman ist das vielseitigste und flexibelste (und daher auch anspruchvollste) Theme, das bei de.hypotheses verfügbar ist. Daher bietet hier der Customizer auch die meisten Möglichkeiten.

Unter Design einer Seite > Allgemeines Design können primäre Farbe und sekundäre Farbe eingestellt werden. Die primäre Farbe definiert, welche Farbe der Header-Hintergrund hat, außerdem die Hintergrundfarbe der Menüleiste unter dem Header sowie die Farbe der Links, der Autorennahmen und der Kategorien. Die sekundäre Farbe legt wesentlich weniger fest, unter anderem (beim Darüberwischen mit dem Cursor) die Angabe der Anzahl der Kommentare für einen Artikel, wenn diese Darstellung aktiviert ist. Es kann natürlich auch dieselbe Farbe als primäre und als sekundäre Farbe festgelegt werden! Die Schriftfarbe der Blogbeiträge und Seiten kann übrigens nicht zentral eingestellt werden. Für die Schriftart gibt es eine vorgebene Auswahl an Schriften.

Screenshot des Customizer im Bloghaus mit primärer und sekundärer Farbe
Im Bloghaus nutzen wir denselben Farbcode für die primäre und die sekundäre Farbe

Wir empfehlen darauf zu achten, eine dunkle Farbe als primäre Farbe zu wählen. Warum? Die Schiftfarbe für das Menü und den Titel und Untertitel des Blogs ist bei Hueman automatisch weiß. Wird nun eine helle primäre Farbe ausgewählt – beispielsweise pastellgelb – dann ist der Titel sowie das Menü kaum noch sichtbar, schon gar nicht für sehbehinderte Menschen.

Tipp: Arbeiten mit Farbcodes: Wenn es eine Corporate Design Farbe der Universität, des Forschungsinstituts oder des Archivs gibt, an welches das Blog angegliedert ist, kann der Farbcode direkt eingetragen werden: Einfach auf “Farbe auswählen” klicken und im Kästchen rechts daneben den Hex-Code eintragen. Genauso kann auch verfahren werden, wenn dieselbe sekundäre Farbe gewählt werden soll wie die primäre Farbe: Einfach den primären Farbcode ins sekundäre Farbfeld copy&pasten! Farbcodes können übrigens überall da verwendet werden, wo das jeweilige WordPress-Theme Einstellungen an den Farben vorsieht.

Tipp: Eigenes Farbschema: Die richtigen Farben können die Botschaft eines Blogs unterstützen! Viele Bildbearbeitungsprogramme haben ein Pipette-Werkzeug mit dessen Hilfe sich aus einer Bilddatei ein Farbcode extrahieren lässt (Photoshop, Gimp, aber auch Paint). Außerdem ist es mit diesem kostenlosen Tool von Adobe möglich, vollständig eigene Farbschemata zu gestalten oder ein Farbschema aus einer Bilddatei zu generieren (das geht hier).

Farbauswahl im Customizer: Twenty Seventeen

Die Farbauswahl für Twenty-Seventeen findet sich im Customizer unter Farben. Im Vergleich zu Hueman sind die Möglichkeiten hier wesentlich weniger überwältigend – deshalb ist Twenty-Seventeen gerade für Anfänger:innen ein geeignetes Theme. Trotzdem sind einige individuelle Einstellungen möglich. Twenty-Seventeen bietet die Möglichkeit, ein Farbschema festzulegen: Das Blog kann dunkel angezeigt werden mit hellem Text, oder aber hell mit dunklem Text (analog zur Einstellung des Erscheinungsbildes bei mobilen Endgeräten). Das sieht dann zum Beispiel so aus:

Screenshot von Horror Game Politics das die Nutzung des Dark Mode (weißer Text auf dunklem Untergrund) zeigt
Das Blog Horror Game Politics nutzt den Dark Mode für die Darstellung (https://hgp.hypotheses.org/)

Außerdem kann eine Textfarbe für den Header ausgewählt werden. Das ist vor allem dann sinnvoll, wenn beispielsweise ein dunkles Bild als Header-Bild ausgewählt wurde und der Blogtitel lesbar bleiben soll.

Screenshot des Customizer des Redaktionsblogs, hier gibt es nur dunkel/hell zur Auswahl sowie eine Textfarbe für den Header
Die Farbauswahl im Customizer von Twenty-Seventeen

Farbauswahl in der Beitrags- und Seitenbearbeitung

Für alle Themes stehen in der Beitrags- und Seitenbearbeitung außerdem noch eine Reihe von Möglichkeiten bereit, Text- und Hintergrundfarben individuell zu gestalten.

Dazu in die Beitrags- oder Seitenbearbeitung gehen: “Beitrag erstellen” (oder analog “Seite erstellen”). Für eine andere Schriftfarbe als das voreingestellte schwarz einfach im Reiter „Block“ nach unten zu „Textfarbe“ scrollen und die gewünschte Farbe auswählen oder per Farbcode einstellen.

Übrigens gibt es auch die Möglichkeit, einen Absatz mit einer Hintergrundfarbe zu gestalten – etwa, wenn Informationen in einem Kasten dargestellt werden sollen wie beim Tipp oben zu “Arbeiten mit Farbcodes”. Dazu wählt man in der rechten Seite den Reiter “Block” aus und dann unter “Farbe” die gewünschte Hintergrundfarbe. Auch hier kann ein individueller Farbcode eingestellt werden. Dazu wird der Code in den Farbkasten über der Vorauswahl einfach händisch eingefügt oder per Klick auf das Farbschema ausgewählt:

Die Auswahl der Hintergrundfarbe eines Blocks im Customizer (Screenshot)
In der Beitragsansicht einen Kasten mit Hintergrundfarbe versehen

Schon gewusst? Auch die Buttons lassen sich farblich gestalten. Buttons sind vor allem dann gefragt, wenn es um Verlinkungen und Downloads geht, die auf den ersten Blick ersichtlich sein sollen. Zum Beispiel, wenn ein Lebenslauf zum Download verfügbar ist, ein Konferenzprogramm abrufbar sein soll oder auf die Website einer Partnerinstitution verlinkt werden soll. Die Buttons finden sich bei den Blockvorlagen (auf das +-Zeichen oben links klicken und dann im Drop-Down-Menü unter “Design” die Buttons auswählen). Wenn der Cursor im Button bleibt, können im Reiter “Block” (rechte Seitenleiste) nicht nur verschiedene Stile (Füllen, Outline, Kein Schatten), Typografien und Rand-Einstellungen, sondern auch die Farbe des Buttons ausgewählt werden.

Tipp: Auch die Breite der Buttons lässt sich hier vergrößern!

Screenshot aus dem Backend eines Blogbeitrags, der den Button nutzt. Anpassung der Farbe und Größe wird gezeigt analog zur Beschreibung im Text
Durch Klick in den Reiter Block können Größe und Farbe des Buttons eingestellt werden

Mehr Tipps & Tricks in der Beitrags- und Seitenbearbeitung

Wiederverwendbare Blöcke nutzen

Ob Teasertext mit Bild zu einer Artikelreihe oder Button mit Link zum Konferenzprogramm: Manchmal erscheint dasselbe Element in mehreren Blogbeiträgen oder auf mehreren Seiten immer wieder. Um sich etwas Arbeit zu ersparen, lohnt es sich, für solche Elemente einen wiederverwendbaren Block anzulegen. Dieser wird dann abgespeichert und steht für zukünftige Beiträge und Seiten unter +> “Vorlagen” zur Verfügung. Aber Vorsicht: Wenn Änderungen an einem wiederverwendbaren Block vorgenommen werden, werden die Änderungen für alle Blöcke überall dort, wo sie benutzt wurden, automatisch übernommen!

Um einen wiederverwendbaren Block zu erstellen, einfach einen Block mit dem gewünschten Content anlegen, den Mini-Editor öffnen und im Drei-Punkte-Menü “zu wiederverwendbaren Blöcken hinzufügen” auswählen und benennen. Schon fertig!

Screenshot eines wiederverwendbaren Blocks analog zur Beschreibung im Artikel

Blockvorlagen entdecken

Übrigens lohnt sich ein Blick durch die Blockvorlagen ungemein: Dort stehen eine Menge Gestaltungsmöglichkeiten bereit, die sich am besten durch suchen und ausprobieren entdecken lassen. Der Weiterlesen-Knopf sorgt für übersichtliche Teaser-Texte auf der Startseite (für Hueman gibt es dazu noch einen besonderen Trick, siehe unten1). Über den Block Spalten lassen sich schöne und übersichtliche Team-Seiten erstellen (wie hier zum Beispiel: https://europedebate.hypotheses.org/participants), indem Bild- und Textelemente in den Spalten angeordnet werden. Und mit dem Block Galerie können mehrere Bilder nebeneinander angeordnet und durchgeklickt werden.

Das geht in der rechten Seitenleiste ganz einfach: Das Wort oder den Abschnitt markieren, auf den verlinkt werden soll, dann in der rechten Seitenleiste unter “Block” die erweiterten Optionen anklicken und hier bei “Html-Anker” eine möglichst einfache und kurze Beschreibung wählen, idealerweise nur ein Wort. Das ist, wie die Beschreibung schon sagt, der Anker. Dann ganz oben das Inhaltsverzeichnis erstellen: Dazu normalen Fließtext eingeben, dann über den Mini-Editor das Büroklammerzeichen wählen – genau wie beim Verlinken einer Website – und dann statt einer URL eine Raute und den Namen des Ankers eingeben: #name-des-ankers. Das für die anderen Abschnitte wiederholen – und schon ist das Inhaltsverzeichnis fertig!2

Screenshot zum Setzen eines Ankerlinks
Der Ankerlink kann über den Reiter “Block” hinzugefügt werden

Die mobile Ansicht mitbedenken

Die meisten Blogs werden am großen Bildschirm gestaltet. Gelesen werden sie aber häufig an mobilen Endgeräten. Daher lohnt es sich, immer auch die mobile Ansicht in der Gestaltung eines Blogs mitzubedenken. Und das geht ganz einfach: Im Customizer gibt es links unten eine kleine Leiste, in der eine typische Ansicht für Tablets und Smartphones angezeigt wird. Hier erkennt man auf den ersten Blick, ob die Anordnung des Menüs beispielsweise viel zu sperrig ist fürs Lesen am Handy oder ob sich in der Anordnung der Blöcke in einem Beitrag Fehler eingeschlichen haben.

Screenshot des Customizers mit eingestellter Auswahl der mobilen Ansicht: Das Menü ist nun als faltbares Menü oben rechts, die Artikel werden hintereinander angezeigt
Die mobile Ansicht findet sich im Customizer unten links

Twenty Sixteen: Es geht auch ohne Rand!

Noch ein Tipp an alle unsere neuen Twenty-Sixteen-Bloggenden: Per Voreinstellung wird in diesem Theme ein schwarzer Rand mitgeliefert. Den finden viele Bloggende unästhetisch – aber er lässt sich ganz einfach abschaffen: Unter Design > Customize > Farben bei Hintergrundfarbe statt schwarz weiß aktivieren. Schon ist der „Trauerrand“ weg!

Mehr Tipps:

Noch mehr Tipps? Dann freuen wir uns über Kommentare mit Ergänzungen. Bis dahin: Frohes Ausprobieren!

Herzlichen Dank an Leonard Dorn für den Tipp, ein eigenes Farbschema für das Blog zu gestalten!

Beitragsbild: Foto von RhondaK Native Florida Folk Artist auf Unsplash (Unsplash-Lizenz).



Diesen Blogbeitrag zitieren
Ulrike Stockhausen (2022, 2. November). Unser Blog soll schöner werden! Bloghaus. Abgerufen am 4. März 2024, von https://doi.org/10.58079/m292

  1. Bei Hueman werden diese Teaser-Texte automatisch erstellt. Das hat zur Folge, das manchmal der Teasertext mitten im Satz endet. Um das zu umgehen, kann in der rechten Seitenleiste unter Beitrag das Feld für den Textauszug mit dem gewünschten Teasertext ergänzen. []
  2. Eine ausführliche Erklärung dazu gibt es auf der WordPress-Seite: https://wordpress.com/de/support/inhalte-aufteilen/sprungmarken/ []

Ulrike Stockhausen

Ulrike Stockhausen arbeitet als Referentin für digitale Wissenschaftskommunikation für de.hypotheses bei der Max Weber Stiftung in Bonn. Sie ist US-Historikerin mit Schwerpunkt Religionsgeschichte (The Strangers in Our Midst: American Evangelicals and Immigration, OUP 2021) und ist Mitbegründerin des Promotionsblogs www.cafecumlaude.de.

Das könnte dich auch interessieren …

4 Antworten

  1. Mona Kirsch sagt:

    Sehr informativer Text, herzlichen Dank. Gäbe es die Möglichkeit, dazu mal ein Webinar anzubieten?

    • Vielen Dank! Der Text fasst tatsächlich ein Webinar zusammen, das im Rahmen unserer Geburtstagsaktion #dehypo10 angeboten wurde. Wir nehmen die Anregung gerne auf und denken über eine Neuauflage des Webinars nach!

  2. Fabian Gründling sagt:

    Gibt es für die Themes außer Hueman eine Möglichkeit, diese ohne Google Fonts (bzw. mit lokalen Kopien der Fonts) zu nutzen oder ist absehbar, ob bzw. wann das der Fall sein wird?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search