Neu im Gutenberg Editor ist das Konzept der Blöcke. Statt wie bisher alles in einem großen Eingabefeld einzutragen, sind jetzt alle Inhalte einzelne Komponenten im Beitrag. Diese lassen sich auch individuell gestalten und eröffnen so neue Möglichkeiten in der Erstellung von Beiträgen und Seiten. In dieser Übung lernen wir die Formatierungen des Editors kennen.
0) Mehr-Block
Klicke in die leere Zeile vor der Überschrift und dann auf das dunkle Plus-Zeichen rechts. Suche nach meh und füge mit einem Klick den Mehr-Block ein.
Info gutenberg-fibel.de/bloecke/mehr/
1) Zeichenformatierungen (Inline/span)
a) Schriftschnitt: Fett – Kursiv
b) Durchgestrichen – Unterstreichen – Hervorheben
a) Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Hinweis: Unterstreichen können wir im Block-Editor nur mit dem Tastenkürzel STRG+U
b) Es reicht eine Seite, die – richtig angelegt – sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung.
c) Hoch- und Tiefgestellt
H2O ist eine chemische Verbindung aus den Elementen Sauerstoff (O) und Wasserstoff (H).
Als Potenz geschrieben, z. B.
10-9 steht für 10 hoch -9 also 0,000000001 oder
1011 steht für 10 hoch 11 also 100 Milliarden, werden sie in den Naturwissenschaften zur Darstellung sehr großer oder sehr kleiner positiver Zahlen verwendet.
d) Tastatur-Eingabe
e) Inline-Code
Hinweis: Markiere unten im Text die Buchstaben „Ctrl“ und „X“ „C“ „V“ einzeln und wende die Tastatur-Eingabe an. (Der Effekt ist erstmal nur leicht zu erkennen)
Info: HTML-Element < kbd > und besseres CSS dafür: wiki.selfhtml.org/wiki/HTML/Textauszeichnung/kbd
d) Zu den bekanntesten Tastenkombinationen gehören die Befehle Ausschneiden, Kopieren und Einfügen. Diese wurden in Windows und andere Betriebssysteme als Ctrl + X, Ctrl + C und Ctrl + V übernommen.
e) Und hier markieren wir ab dem Doppelpunkt den Text als Inline-Code: h1 { font-size: 1.2em; color: red; } Hier steht dann wieder ein normaler Text.
f) Hyperlink einfügen
- Hier gibt es viele Plugins die auf WordPress.org verzeichnet sind.
(Markiere hier den Text „WordPress.org“, wähle Link aus der Toolbar und verlinke auf die externe URL https://wordpress.org mit der Einstellung „in einem neuen Tab/Fenster öffnen“) - Hier verlinke ich intern auf den Beitrag „Hallo Welt„. (nutze die Suche)
- Hier verlinke ich intern auf die Seite „Beispiel-Seite„. (nutze die Suche)
- Hier verlinke ich intern auf die Kategorie „Allgemein„. (nutze die Suche)
- Hier verlinke ich relativ auf die „Überschrift Alfatraining„.
Anmerkung: Dieses als Link eintragen #alfatraining
(Das Linkziel dazu erzeugen wir später in Aufgabe 2d)
2) Textblöcke & Formatierungen
a) Absatz Block
- Block-Einstellungen Absatz (rechte Seitenleiste)
- Text/Hintergrundfarbe und Linkfarbe ändern (jetzt versteckt, siehe Farbe 3-Punkte Menü)
- Typografie (+ bzw 3-Punkte Menü)
- Größe auf 13px (size in css font-size)
- Initial / drop cap
- Schreibweise (letter case) auf großgeschrieben (in css capitalized)
- Design auf Extraleicht (appereance in css font-weight)
- Zeilenhöhe auf 2 (in css line-heigt)
- Zeichenabstand (einheit ist em nicht px – in css letter-spacing)
- Infos zum Absatzblock: gutenberg-fibel.de/bloecke/absatz/
Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Ich bin ein Linktext. Wir müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.
b) Ausrichtungen
Ich bin Linksbündig: Nein, Du hast es wirklich nicht leicht gehabt. Und dann noch die Selbstdarstellung für Tante Ika. Erinnerst Du Dich? Da hat sich selbst einer wie Du schwergetan.
Ich bin Rechtsbündig: Aber Du hast die Situation gemeistert. Weil Du ein Genie bist. Selbst Klinkentexte konntest Du in ein Stück Literaturgeschichte verwandeln.
Ich bin Zentriert: Kein Wunder also, dass Deine Studenten Dich anhimmeln und Dich schon jetzt, zu Deinen Lebzeiten, als den neuen Papst der deutschen Reklame feiern.
Ich könnte ein Blocksatz sein (Nicht mehr verfügbar im neuen Block-Editor, nur im klassischen Editor mit Tastenkürzel oder via HTML!):
Denn esse est percipi – Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.
c.1) Listen-Block
- Füge unterhalb einen Listen-Block ein
- Tippe eine Rezeptliste mit 4 Zutaten
- Milch
- Mehl
- Ei
- Zucker
c.2) Listenblock mit Nummerierung und Einzügen
Hinweis: Man kann mehrere Absätze gleichzeitig markieren und direkt zu einer Liste umwandeln. Dazu klicke auf das erste Werkzeug (Block-Typ oder Stil ändern) in der gemeinsamen Toolbar der markierten Abstze.
Hinweis 2: Einzelne Zeilen mit (weichen) Umbrüchen in Listen sind durch einem harten Umbruch zu ersetzen, um daraus einen eigenen Listenpunkt zu machen.
Hinweis 3: Einige Listenpunkte benötigen einen Einzug (siehe Ziffern am Zeilenende)
- Gerade in Deinem Alter ist man ja gesegnet, wenn man noch so witzig schreiben kann wie Du.1
- Viele Deiner Werberkollegen sind ja schon zu wichtig, um noch Humor zu haben. Du bist da ganz anders.2
- Du kannst richtig komisch sein.3
- Und das, obwohl Du in Deinem sehr langen Leben auch schon viele unangenehme Dinge schreiben musstest.4
- Dieser Listenpunkt hat einen Einzug4.1
- Dieser Listenpunkt hat einen Einzug4.2
- Texte für McDonald’s zum Beispiel. Oder kleine Reime für Onkel Norbert.5
d) Überschriften-Blöcke – Headings 1-6
Hinweis: Mit Überschriften kannst du deine Texte und Inhalte ganz einfach strukturieren. gutenberg-fibel.de/bloecke/ueberschrift/
Ich bin eine H1
Dieser Absatz möchte oberhalb eine Überschrift sehen mit dem Text „Ich bin eine H1“.
Ich bin eine H2 mit dem HTML-Anker alfatraining
Hinweis: Block-Eigenschaften (Seitenleiste rechts) unter Erweitert/HTML-Anker; später setzen wir einen Link auf diese Sprungmarke. Info: wpfellows.com/de/wordpress-anker-setzen/
Ich bin eine zentrierte H3 mit Hintergrundfarbe
Hinweis: Siehe rechte Seitenleiste, Block-Eigenschaften, Spoiler Farbe
Ich bin eine zentrierte H4 mit Hintergrundfarbe und Ausrichtung „Weite Breite“
Absatzblindtext Absatzblindtext Absatzblindtext AbsatzblindtextAbsatzblindtext Absatzblindtext Absatzblindtext .
Ich bin eine zentrierte H5 – mit Hintergrundfarbe und Ausrichtung „Gesamte Breite“
Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext.
Ich bin eine H6 und „Ich bin rot“ und „ich bin blau„
Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext Absatzblindtext.
e) Der Block „Vorformatiert„
Info: Der Vorformatiert-Block ähnelt dem Code-Block, der Inhalt wird aber nur im <pre> Element gespeichert. Der Text wird wie im Quelltext vorhanden ausgegeben. gutenberg-fibel.de/bloecke/vorformatiert/
e.1) Die Zeile unterhalb markieren und umwandeln in Block Vorformatiert
Quelle: https://gutenberg-fibel.de/
Info: Der Text im Vorformatiert-Block ist im Monospace Font gehalten und es werden alle Leerzeichen und Zeilen beibehalten, die eingegeben werden. Vorformatiert ist in HTML das pre-Element (Preformated)
e.2) Die 6 Zeilen unterhalb markieren und umwandeln
/* Ein CSS-Codetext und eine lange Zeile*/
p {
color: #FF0000;
margin-bottom: 1em;
}
…and heres a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
f) Block Vers
Info: Der größte Unterschied zum Absatz: wenn man im Vers-Block Enter drückt, entsteht im Block selbst eine neue Zeile. Beim Absatz entsteht gleich ein ganz neuer Block, außer man erzeugt den neuen Absatz mit Umschalt+Enter. gutenberg-fibel.de/bloecke/zitat/
Absatz unterhalb nach Vers umwandeln
Hello Dolly
This is miss Dolly
It's so nice to have you back where you belong
You're lookin' swell, Dolly
I can tell, Dolly
You're still glowin', you're still crowin', you're still goin' strong
g) Block Zitatblock
Info: Das HTML-Element blockquote (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist. Normalerweise wird dieses Element als Einrückung dargestellt. Eine URL für die Quelle des Zitats kann mit Hilfe des cite Attributs angegeben werden, während die Quelle eines Textes mit dem Element angegeben werden kann gutenberg-fibel.de/bloecke/zitat/
Absatz unterhalb als Zitatblock umwandeln
Stil: Standard / Einfach (Hat im aktuellen Standardtheme TwentyTwentyTwo keine Auswirkung)
Quellenangabe: Platon
Farbe / Hintergrund beliebig
So wäre denn die Tugend, wie es scheint, eine Gesundheit und Schönheit und Wohlbefinden der Seele, die Schlechtigkeit aber Krankheit und Hässlichkeit und Schwäche.
Platon
h) Block Pullquote
Info: Mit dem Pullquote-Block kannst du eine Zeile deines Textes besonders hervorheben. Im Gegensatz zum Zitat-Block hast du weitere Gestaltungsmöglichkeiten. gutenberg-fibel.de/bloecke/pullquote/
- Einstellungen Pullquote
- Textfarbe helle Farbe – Hintergrundfarbe dunklere Farbe
- Quellenangabe: Sokrates
- Rahmen beliebig
- Textgröße: große Größe
- Text Design: Leicht
- Ausrichtung: Weite Breite
Bekommst du eine gute Frau, wirst du glücklich werden; bekommst du eine schlechte, wirst du Philosoph werden.
Sokrates
i) Block „Tabelle“
Info: Mit dem Tabellen-Block kannst du eine tabellarische Übersicht von Daten erstellen. gutenberg-fibel.de/bloecke/tabelle/
- Schritte
- Erstelle eine Tabelle mit 2 Spalten und 3 Zeilen
- Aktiviere in den Tabelleneinstellungen die Kopfzeile
- Füge die Spaltentitel Name & Ort ein
- Trage kurze Mustertexte ein
- Füge in der Mitte eine weitere Spalte namens Alter mit Musterzahlen hinzu
Tipp: Symbol Tabelle bearbeiten in der Toolbar - Füge die Tabellenbeschriftung Klasse 2022 ein
| Name | Alter | Ort |
|---|---|---|
| Mike | 37 | Hagen |
| Irina | 40 | Leibzig |
| Annette | 40 | Karlsruhe |
j) Block „Classic“
Info: Mit dem Classic-Block kannst du den bisherigen TinyMCE-Editor im Block-Editor weiter verwenden. Wenn du einen älteren Beitrag das erste Mal im Block-Editor öffnest, wird der gesamte Inhalt in einem Classic-Block angezeigt. gutenberg-fibel.de/bloecke/classic/
- Schritte
- Fügen den „Classic“-Block in die leere Zeile unterhalb ein
- Füge in diesen 2-3 Absätze Blindtext ein.
- Schalte die 2. Werkzeugleiste des Classic-Editors ein (Symbol rechts in Classic-Toolbar) und entdecke die Werkzeuge (Symbole) die der alte visuelle Editor „Tiny MCE“ zu bieten hatte (Standard-Editor bis WP 4)
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.
3) Sonstiges
a) Sonderzeichen / Smileys einfügen
Info: Sonderzeichen waren im alten Editor per Werkzeug verfügbar, im Block-Editor sind sie es noch nicht, daher fügen wir Emojis (Smileys) und Sonderzeichen folgendermaßen ein:
-
Wie füge ich Sonderzeichen ein?
- Chrome-Browser mit der rechten Maustaste „-> Emojis
- Tastenkombination Windows: [WIN]+[PUNKT]
- Tastenkombination MAC: [CTRL]+[COMMAND]+[Leertaste]
- Sonderzeichen aus einer Liste suchen, herauskopieren und als Text einfügen , z.B.
de.wiktionary.org/wiki/Hilfe:Sonderzeichen/Tabelle
www.vioma.de/de/wiki/tools/html-sonderzeichen/ - Twemoji Übersicht: twemoji.maxcdn.com/2/test/preview.html
- Emojis/Smileys einfügen ->😍😊
- Gedankenstrich (Halbgeviert) -> –
- Ein-Halb Zeichen-> ½
- Copyright-Zeichen -> ©
- Rightwards-Arrow (Pfeil nach rechts) -> →
b) Inhalte einfügen aus der Zwischenablage
Info: Im Classic-Editor hätten wir dazu das Werkzeug „Als Text einfügen“, aber nicht im neuen Block-Editor. Daher nutzen wir die Tastenkombination des Browsers.
Formatiertes Einfügen
Füge hier unterhalb 2-3 Absätze fremden Textes mit Bild aus einer beliebigen Newsseite „formatiert„, also mit STRG+V ein.
Lerne WordPress Kennen
WordPress ist eine Open-Source-Software, mit der du eine schöne Website, einen Blog oder eine App erstellen kannst.
Unformatiertes (Als Text) Einfügen
Nun den selben Text hier unterhalb „unformatiert“ einfügen. Das geht mit der Tastenkombination STRG+UMSCHALT+V (oder mit der rechten Maustaste im Google Chrome Browser)
Lerne WordPress Kennen
WordPress ist eine Open-Source-Software, mit der du eine schöne Website, einen Blog oder eine App erstellen kannst.
TRY NOW
WP Kurs Übungen