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
- Farbauswahl im Customizer: Hueman
- Farbauswahl im Customizer: Twenty Seventeen
- Farbauswahl in der Beitrags- und Seitenbearbeitung
- Mehr Tipps & Tricks in der Beitrags- und Seitenbearbeitung
- Wiederverwendbare Blöcke nutzen
- Blockvorlagen entdecken
- Mehr Übersichtlichkeit dank Ankerlinks
- Die mobile Ansicht mitbedenken
- Twenty Sixteen: Es geht auch ohne Rand!
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.
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:
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.
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:
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!
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!
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.
Mehr Übersichtlichkeit dank Ankerlinks
Für längere Artikel lohnt es sich, am Anfang des Artikels ein Inhaltsverzeichnis zu setzen, über das dann einzelne Abschnitte angeklickt werden können. So kann, wer sich nur für einen bestimmten Teilabschnitt interessiert, gleich direkt dorthin klicken! Auch externe Links können direkt auf einen Anker gesetzt werden, also mitten in einen Beitrag hinein, was für ein passgenaues Zitieren von Interesse ist.
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
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.
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:
- Infos zu fast jedem Theme, das bei de.hypotheses verfügbar ist, finden sich hier: https://bloghaus.hypotheses.org/tag/themes
- Warum es wichtig ist, die Autorenbox auszufüllen: https://bloghaus.hypotheses.org/3062
- Ein englischsprachiges Tutorial zum Finden des eigenen Farbschemas findet sich hier: https://www.youtube.com/watch?v=YeI6Wqn4I78.
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).
- 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. [↩]
- Eine ausführliche Erklärung dazu gibt es auf der WordPress-Seite: https://wordpress.com/de/support/inhalte-aufteilen/sprungmarken/ [↩]
OpenEdition schlägt Ihnen vor, diesen Beitrag wie folgt zu zitieren:
Ulrike Stockhausen (2. November 2022). Unser Blog soll schöner werden! Bloghaus. Abgerufen am 11. Februar 2025 von https://doi.org/10.58079/m292
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!
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?
Twenty-Nineteen, Twenty-Twenty und Twenty-Twenty-One nutzen keine Google Fonts. Für die früheren Themes hoffen wir auf zeitnahe Updates durch die Entwickler:innen. Wir behalten das Thema im Blick!