Almondia – Bautipps Die Bauherrenberatung

Dummy Content

Styles richtig anwenden

Das wichtigste in Kürze:

Block „Pullqoute“: mit der Eigenschaft „solid“. Roter Hintergrund, helle Schrift, ausrichtbar links, rechts und volle Breite.

Textausrichtung: folgt automatisch der Ausrichtung der Box (linke Box = linksbündig, rechte Box = rechtsbündig)

Dies ist „fetter“ text: bold macht die Schrift nicht dicker, sondern heller zur Hervorhebung.

Cite: kann man auch weglassen 

Der folgende Guide enthält die wichtigsten Style-Elemente und jede Menge „Lorem-Ipsum“-Dummytext zum Füllen neben den flächigen Elementen.

Links zu sehen: die rote Infobox für den Content-Typ „Das wichtigste in Kürze“. Absätze können innerhalb der Box mit einmaligem Enter drücken eingefügt werden. Diese Absätze haben einen größeren Zeilenabstand und sind damit voneinander optisch abgehoben. Bitte keine Listen innerhalb der Boxen anlegen (geht ohnehin nur in der html-Bearbeitung), eine Hervorhebung ist genug!

Die Gestaltungsrichtlinien von Almondia sehen flächige Elemente vor, keine Linien und Rahmen. Das <hr>-Element (horizontal rule), bei den Blocks als Seperator zu finden, sollte deshalb möglichst nicht verwendet werden.

Grundsätzlich sollten farbige Elemente nur sehr sparsam eingesetzt werden und nicht allzu dicht aufeinander folgen. Das sieht zu bunt, zu unruhig und unseriös aus und ist auch keine Hilfestellung im Sinne einer optischen Hervorhebung mehr, wenn alles hervorgehoben ist.

Das hier ist ein Zitat

Es nutzt die volle Breite des Artikelbereichs, sodass es nicht die Linienführung für das Auge durchbricht und hat eine dezente, aber hinreichend abhebende Hintergrundfarbe zu Hervorhebung. Es eignet sich zum Beispiel für Infoboxen und wichtige Hinweise am Beginn oder Ende eines Absatzes.

Alternativ dazu gibt es das oben gezeigte „Pullquote“ auch mit dezenter Hintergrundfarbe. Pullquotes sollten nur verwendet werden, um links oder rechts ausgerichtete, vom Text umflossene Boxen zu erzeugen. Die Ausrichtung muss in den Blockeinstellungen gewählt werden.

Achtung: Die Darstellung der Pullquotes im Editor sind leider noch etwas verbuggt. Sobald es auf links- oder rechtsbündig gestellt ist, wird es zu einem nervtötenden Geschicklichkeitsspiel, diese auszuwählen (Pfeiltasten benutzen hilft). Ich empfehle deswegen, erst auf links- oder rechtbündig zu stellen, wenn der Artikel fertig ist.

Die kleine Endzeile könnt ihr verwenden, um zum Beispiel auf Quellen oder weiterführende Artikel hinzuweisen.

Der Gutenberg Editor

Folgende Blöcke für das Styling von Artikeln sind vorgesehen:

Pullqoute

Zitat

Galerien

Bilder

Tabellen

Listen

Die verschiedenen Blöcke

Die Blöcke in Gutenberg erreicht ihr durch einfaches Enter-Drücken am Ende eines Absatzes. Der neue Absatz erzeugt auch einen Abstand, bitte nutzt deswegen nur einmal Enter. Wollt ihr einen einfachen Zeilenumbruch innerhalb eines Blockes erzeugen, drückt ihr „Shift+Enter“.

Die verschiedenen Arten von Blöcken sind zugänglich über das + links oben im Editor oder links neben einem neuen, leeren Absatz. Wer gerne Shortcuts benutzt und nicht extra zur Maus greifen will, kann auch im leeren Block „/zitat“ schreiben und Enter drücken. Sobald ihr anfangt hinter dem Slash zu schreiben, öffnet sich eine Liste der Blöcke, die auch mit Pfeiltasten navigierbar ist.

Die Blockeigenschaften

Einstellungen direkt am Block vornehmen

In der Regel sollten die Styles ausreichen, die direkt am Block in der kleinen Leiste darüber verfügbar sind. Beispiel hier: Umstellen des Pullqoutes von „normal“ auf „einheitliche Farbe“.

Auch ein vorhandener Block lässt sich fast immer noch umstellen auf eine andere Blockart. Allerdings sind dann nicht mehr alle Optionen verfügbar. Einige Blöcke, insbesondere die sogenannten Pullquotes, lassen sich nicht mehr transformieren. Anstelle der Transformation sind hier die Blockeigenschaften verfügbar, mit denen ihr zwischen „regular“ (dezent) und „solid“ (rot) umschalten könnt.

Je nach Art des Blockes gibt es spezifische Einstellungen, die in der Seitenleiste vorgenommen werden können. Auch hier gilt allerdings, dass Abweichungen vom „üblichen“ Style nur sehr sparsam und aus wichtigem Grund vorgenommen werden sollten. Unter „Advanced“ kann auch eine CSS-Klasse hinzugefügt werden. Für ein einheitliches Layout im Magazin sollten Font Size und Farben jedoch nicht geändert werden. Auch sollte die Schriftfarbe nicht geändert werden!

Das Pullqoute

Achtung:

Die Pullquotes besser erst wenn der Artikel fertig ist auf links- oder rechtseitig stellen

Ich bin übrigens die dezente Version eines Pullquotes

Wird verwendet für: kurze Zusammenfassungen oder Überblicksinformationen am Beginn eines Abschnittes oder anstelle des Artikelbildes für die Info-Box „Das wichtigste in Kürze“. In sehr(!) langen Abschnitten können sie verwendet werden um diesen zu gliedern. Sinnvoller sind (auch aus SEO-Sicht) dafür aber Zwischenüberschriften.

  1. Block Pullquote auswählen
  2. Text einfügen, durch Absätze und Fettungen strukturieren
  3. In den Blockeigenschaften „einheitliche Farbe“ wählen für die rote Box, auf „normal“ stehen lassen für die dezente Box
  4. Die Zeile unter dem eigentlichen Inhalt („Schreiben Sie einen Bezugstext“) kann verwendet werden für einen weiterführende Link oder bei echten Zitaten, die Quelle
  5. Erst nach Fertigstellung der Texte empfohlen: recht- oder linksseitige Ausrichtung auswählen.

Das Zitat

Wird verwendet für: Zusammenfassungen eines langen Abschnitts, Infoboxen mit längerem Inhalt am Beginn eines Abschnittes und Abhebungen vom Text.

  1. Block Zitat auswählen
  2. Strukturieren durch Absätze, Fettungen und Schrägstellung
  3. Die Zeile unter dem eigentlichen Inhalt kann wieder für einen weiterführende Link oder bei echten Zitaten, die Quelle verwendet werden
  4. Gegebenenfalls die Eigenschaft „groß“ auswählen. Achtung: nur für sehr kurze Texte verwenden!

Bilder

Sofern Bilder nur der Dekoration dienen, werden sie auf keinen Fall in voller Größe verwendet. Schaubilder, Diagrame und erklärende Bebilderungen können auch in groß verwendet werden. In der rechten Seitenleiste findet ihr vorgefertigte Maße von 25 %, 50 %, 75 % und 100 %. Für rein Dekorative Bilder ist meist 25 % ausreichend. Diese Berechnet sich aber von der vorliegenden Bildgröße, überprüft also in der Vorschau das Ergebnis. Die absolute Größe (in Pixeln) kann ebenfalls verwendet werden, berücksichtigt aber nicht automatisch das Seitenverhältnis und führt zu einer Verzerrung, wenn nicht beide Werte korrekt geändert werden.

  1. Block Bild auswählen und Upload oder Mediathek als Quelle wählen
  2. Größe auswählen und per Vorschau das Ergebnis überprüfen
  3. Falls eine Größe gewählt wurde, die nicht die gesamte Breite ausfüllt: links- oder rechtsseitig auswählen
  4. Soll ein Bild vergrößert in der „Lightbox“ angeschaut werden können, muss in der Seitenleiste unter „Link-Einstellungen“ die Option „Link zu“ auf „Medien-Datei“ gesetzt werden

Galerien

Sollen viele Bilder in einem Artikel verwendet werden oder mehrer Beispiele gegeben werden, bietet sich die Nutzung einer Galerie an. Beachtet aber, dass beim Öffnen (Zoomen) eines Bildes des Beitrags immer alle Bilder des Beitrags, innerhalb und außerhalb der Galerie, durchgeblättert werden können.

  1. Block Galerie auswählen und per Upload oder aus der Mediathek Bilder hinzufügen
  2. Rechts in der Seitenleiste die Spaltenanzahl auswählen und 
    unter „Link-Einstellungen“ die Option „Link zu“ auf „Medien-Datei“ wählen
  3. Wollt ihr später weitere Bilder hinzufügen, gibt es unter der Galerie einen überdimensionierten Button zum Upload, aus der Mediathek lassen sich weitere Bilder auswählen, indem ihr das Stiftsymbol oben im Menü des Blockes benutzt
  4. Bitte achtet darauf, dass entweder alle oder kein Bild eine Beschriftung haben. Es wird automatisch die Beschriftung aus der Datenbank übernommen. Sie kann aber auch innerhalb der Galerie angepasst werden und ändert sich dann nur dort, nicht in der Datenbank. Bei vielen Bildern bietet es sich an, diesen Text für die Galerie etwas zu kürzen oder zu vereinheitlichen.

Tabellen

Werden genutzt für: Tabellen. 😀
Okay, und für Gegenüberstellungen, wie Listen von Vor- und Nachteilen. Die erste Zeile der Tabelle wird automatisch als Überschriftenzeile (fett und etwas dunkler hinterlegt) formatiert. Beachtet, dass hier Keywordspam möglich ist! Vgl. hierzu: Fertighaus oder Massivhaus bauen? Typische Suchfragen wie „Vorteile Fertighaus“ und „Nachteile Fertighaus“ können damit oft wiederholt werden, ohne, dass dem Nutzer auffällt, das es sich um unnatürliche Sprache handelt. Tabellenüberschriften also bitte nicht nur „Vorteile“ und „Nachteile“ nennen.

  1. Block Tabelle auswählen und gewünschte Spalten- und Zeilenanzahl festlegen
  2. Gegebenenfalls in der rechten Seitenleiste unter „Tabelleneinstellungen“ feste Breite einstellen (insbesondere für nur zweispaltige Tabellen)
  3. Im Menü des Blocks lassen sich unter „Tabelle bearbeiten“ Zeilen und Spalten hinzufügen oder löschen
  4. Tabellen lassen sich auch „floaten“, so wie Bilder und die Pullquotes. Ist aber aus ästhetischen Gründen nicht empfehlenswert, weil seltsame Umbrüche in verschiedenen Bildschirmauflösungen die Lesbarkeit erheblich beeinträchtigen.
Vorteile von TabellenNachteile von Tabellen
Keywordspam!!!Das ist so eckig
Ja, Keywords. Das ist so gut, das zählt als zwei VorteileSoviel Farbfläche, daneben sieht die rote Box ganz sicher nicht gut aus
Ist aber auch wirklich viel übersichtlicher
Also ist es kein Spam, sondern Service für den Leser

Colums (Spalten)

Was ihr aus den bisher genutzen Plug-Ins kennt, ist hier nativ integriert und heißt „Spalten“. Diesen Block könnt ihr einfügen um das Layout vertical zu unterteilen.

  1. Block „Spalten“ hinzufügen, er erscheint automatisch Zweispaltig
  2. In der rechten Seitenleiste gegebenenfalls eine andere Anzahl festlegen
  3. In der Spalten lassen sich beliebig viele und jede Art von Block platzieren.

Ich bin ein Textblock in Spalte Eins, nach mir ist ein Block in Spalte Eins mit Bild.

Poroton Hochlochziegel Textur

Kiefel Textur

Blähton Textur

Ich bin ein Textblock in Spalte Zwei, aber unter dem Bild.

Ich bin ein Textblock in Spalte Drei, nach mir ist ein Block in Spalte Drei mit Bild.

Wenn ich will, kann ich auch Zitate in den Spalten hinzufügen.

Wer will es mir verbieten?

Hilfsklassen

In der rechten Seitenleiste findet ihr bei jedem Block die Möglichkeit, zusätzliche CSS-Klassen zuzuweisen. Eingerichtete Klassen, die ihr dort einfach nur eintragt sind red, bluedark, bluelight und sand. Sie ändern Hintergrundfarbe und Schriftfarbe des Blockes. So wirklich empfehlenswert ist das aber nur für reine Textblöcke. In Kombination mit den Spalten lassen sich damit auch die vormals genutzen farbigen Blöcke erzeugen (wobei ich in nahezu allen Fällen davon abraten würde, meisten erschweren sie die Lesbarkeit)

Titelbild

Titelbild ist bloß ein Bildblock mit Text im Bild.

Ich bin ein Textblock und habe in den Erweiterten Eigenschaften die Klasse bluedark bekommen

Das hier ist red.

Gefolgt von sand.

Schrift auf dunklem Hintergrund ist fett, damit man es besser lesen kann.

Mittellanger Text mit bluelight.

Noch ein bisschen mehr sand, entspannt die Augen.

Jetzt reichts aber auch!

Macht keinen Unfug damit, die Artikel sollen nicht mehr so bunt sein.

Schreiben Sie einen Kommentar

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