[Musik spielt]
Ja, in diesem Live Demonstrations Video
werden wir uns noch mal den Gutenberg
Editor im Detail anschauen.
Das heißt, es ist kein klassisches Tutorial, sondern mehr
ein Walkthrough.
Das heißt, wir schauen uns noch mal an,
wie können wir einen Newsletter anlegen?
Ja, wir gehen dafür wieder ins Dashboard
zum Punkt Newsletters und dann zum Punkt erstellen.
Das heißt, wir erstellen jetzt direkt
einen Newsletter, finden hier wieder
die Layoutübersicht,
die sie schon aus dem Tutorial kennen sollten.
Und natürlich einmal die gespeicherten
und einmal die vorgefertigten Layouts.
Aus Demonstrationsgründen
erstellen wir jetzt eine neue Vorlage,
das heißt, wir nehmen keine
der vorgeschlagenen Vorlagen.
Wenn wir dann im Gutenberg Editor sind,
dann schaut es ungefähr so bei Ihnen aus.
Vielleicht haben Sie die
Einstellungseite offen,
die Sie über dieses Einstellungrad zu
und ausblenden können.
Sie finden hier oben
das klassische Plus,
um einen Block hinzuzufügen
Sie haben hier zwei Modi
der Auswahl einmal
auswählen und bearbeiten
dazu vielleicht auch gleich noch mehr.
Und Sie haben hier diese
drei Striche dazu auch gleich mehr.
Erst mal möchten wir eine Überschrift
für unseren Artikel
für unseren Newsletter hinzufügen.
Hierfür klicken wir auf diesen Block,
der hier eben schon präsentiert wird.
Das heißt,
wir klicken einfach ins Editor Fenster
und haben jetzt die Möglichkeit
mit der Shift-Taste und 7.
Also bei gehaltener
Shift-Taste 7 drücken,
hier einen der schnellen
Blöcke quasi hinzuzufügen,
das heißt, hier findet man nicht alle
Blöcke, die angezeigt werden,
aber eine ja verschiedene Auswahl.
Man kann auch natürlich suchen und sagen
Ich will ein Bild hinzufügen.
Dann zeigt er Ihnen auch
den entsprechenden Block entsprechend an
aus dieser Auswahl.
Sie haben noch eine andere Möglichkeit.
Sie können auch einfach klicken
und über das schwarze Plus,
das hier an der Seite angezeigt wird,
dann eben einen Block hinzuzufügen.
Das heißt, das Plus alle durchsuchen
und dann finden Sie alle Blöcke
hier auch die zur
Verfügung stehen letztendlich.
Und das sehen wir schon.
Es gibt hier unsere Überschrift.
Man hat auch andere Funktionen
wie Listen, Absätze und Zitate.
Wobei der Absatz aktuell.
Er wird schon unterstützt,
das ist einfach ein Anzeigefehler hier.
Das einzige, was nicht unterstützt
ist, ist eben der Initialbuchstabe,
der hier sehr groß in diesem
Bild dargestellt ist.
Das heißt, wir haben auch andere
Elemente, Bilder.
Wir haben Elemente
fürs Design, wobei
man immer schauen muss,
ist es jetzt auch bei den Mail-Klienten,
dann funktioniert das auch alles.
Das sollte aber auch alles klappen
eigentlich, da man das schon sieht.
Ich zeige das einmal ganz kurz, dass
wenn man wirklich eine
Funktion jetzt entdeckt hat,
die es vielleicht noch ja.
Die nicht unterstützt wird,
dann wird Ihnen unser Newsletter Plugin
normalerweise sagen,
dass diese Funktion
nicht unterstützt wird, wie hier.
Wir versuchen hier diesen
diesen Initialbuchstaben mit auszugeben
und das Programm sagt uns jetzt schon,
dass diese Eigenschaften eben
nicht in einer E-Mail unterstützt werden.
Das heißt, das können wir dann auch
natürlich weglassen im Design.
Ich entferne diesen Text jetzt noch mal,
damit wir auf dem gleichen Stand sind.
Das heißt, ich wähle die Blöcke aus
und entferne die ganzen Blöcke
und werde jetzt eine
Überschrift hinzufügen.
Wir klicken als auf
den Editor Überschrift
und sagen Wir haben hier
unsere H1 Überschrift und das ist dann
der Titel des Newsletters.
Wir können hier auch sagen,
dass die Schriftgröße
vielleicht nicht so groß sein sollte,
sondern vielleicht nur 30 Pixel.
Die Standardeinstellung sollte
aber normalerweise in allen Fällen
vollkommen ausreichen.
Das heißt, Sie müssen hier keine
individuellen Werte festlegen.
Sie können zum Beispiel auch sagen,
die Standard-Schriftgröße soll
also die Schriftgröße
der Überschrift soll riesig sein,
soll vielleicht Mittel sein
oder einfach groß.
Das heißt, wir haben jetzt
den Titel des Newsletters,
in einem nächsten Teil
möchten wir dann einen unserer
Leitartikel vielleicht anpreisen
hierfür klicken wir auf Block hinzufügen
und werden erst mal ein Bild
einfügen.
Hier könnte man dann aus der Mediathek
zum Beispiel eins auswählen.
Hier hat man auch die Möglichkeit,
eine Bildunterschrift zu vergeben.
Man kann aber auch
gleichzeitig für dieses Bild hier
rechts einen alternativen Text festlegen.
Das heißt, man kann sagen,
wenn hier wichtige
Persönlichkeiten drauf sind.
Person A auf
einer
Laufstrecke für die Leute,
also, wenn es wichtige Persönlichkeiten
sind, einfach für die Leute,
die vielleicht nicht
Komplett
volle Sicht haben.
Das heißt, falls es nur ein Muster ist
oder ein dekoratives Element,
dann braucht man diesen Alt-Text
natürlich entsprechend nicht
und kann ihn leer lassen.
Wir haben jetzt schon ein Bild
für unseren Artikel hinzugefügt.
Im nächsten Schritt
möchten wir unsere Leser
vielleicht begrüßen,
einen Text hinzufügen
auch das funktioniert natürlich
wie beim alten Editor.
Das heißt, wir haben
einfach einen Block hinzugefügt,
das heißt, wir waren auf dem Bild.
Sehen hier schon drunter.
Meistens hier den nächsten leeren
Block, klicken darauf
und können dann hier den Text
entsprechend einfügen,
wenn wir mit dem Kurs an der
linken Seite sind.
Wir haben auch die Möglichkeit,
zum Beispiel einfach
auf das Bild zu klicken
und dann mit der Enter-Taste
eine neue Zeile einzufügen.
Hierfür auch noch mal eine Anmerkung:
Wir hatten am Anfang gesehen,
dass es hier oben verschiedene Modi gibt.
Der Modus auswählen ermöglicht
Ihnen, dass Sie einfach
nur die Blöcke auswählen,
ohne diese zu editieren.
Der Modus
editieren
Also jetzt sind wir Modus auswählen
der Modus editieren
gibt Ihnen die Möglichkeit,
das Element, also den Text etc.
auszuwählen.
Das heißt, falls Sie mal nur irgendwie
Elemente oder Blöcke auswählen möchten,
dann lohnt sich das, hier
einmal kurz zu wechseln.
Wir fügen jetzt hier
einen Text hinzu - Texte
können Sie immer einfach
so einfügen und hinein kopieren.
Sie können aber auch
erst einen Absatz wählen.
Das heißt, das machen wir jetzt.
Wir haben hier unsere paar Zeilen
Text, die dann dargestellt werden sollen.
Können auch sagen, dass vielleicht
die erste Zeile fett
dargestellt werden soll
in den verschiedenen Mail-Clienten.
Das heißt,
wir haben jetzt schon eine Basis
für unseren Newsletter
und können jetzt natürlich das Ganze noch
mit weiteren Blöcken ergänzen.
Hierfür gehen wir an das Ende des Textes
und können dann zum Beispiel
mit der Enter-Taste
einen neuen Block hinzufügen.
Wir wählen dann aus.
Alle durchsuchen, sehen hier schon wieder
die verschiedenen Blöcke,
die sie als Möglichkeiten gibt
und können dann zum Beispiel
einen Abstand, einen
Abstandshalter hinzufügen.
Hier können wir an der rechten Seite
über das Einstellungsrad
unter Block dann auch wieder z.B.
genaue Pixel-Werte festlegen.
Zum Beispiel können wir sagen,
dieser Abstand soll 30 Pixel betragen.
Anschließend können wir
wieder einen neuen Block
hinzufügen, zum Beispiel
übers Betätigen der Enter-Taste,
dann wieder auf Block.
Alle durchsuchen
und können jetzt sagen,
dass wir hier vielleicht
eine Spalte brauchen
oder erst mal eine Überschrift,
die die nächsten Artikel
präsentieren soll.
Auch hier wieder
mit der Enter-Taste bestätigen, auf
das Plus oder eben
mit dem Shortcut
einen neuen Block einfügen.
Wir können zum Beispiel
auch einfach sagen.
Die Shift-Taste mit der 7.
Und jetzt möchten wir hier eine Spalte.
Dann geben wir einfach ein Spalte
und klicken dann
zum Beispiel auf Spalten.
Wir brauchen jetzt 50 zu 50..
Denken Sie immer daran,
dass vor allem die meisten Leute
ihre Mails inzwischen auf dem Smartphone
oder auf mobilen Geräten lesen.
Deshalb sollte man vielleicht bei Spalten
jetzt kein sehr seltsames Format wählen.
Meistens ist bei Newslettern
einfacher, besser.
Deshalb probieren wir es einfach mal
mit einer klassischen 50/50 Verteilung.
Auch hier haben wir wieder
die Möglichkeit, natürlich Blöcke
in der Spalte hinzuzufügen,
denn da kann man natürlich oftmals
diesen Überblick verlieren
mit der Hierarchie
der verschiedenen Elemente.
Dazu auch gleich noch einen Tipp.
Hier werden wir jetzt noch
mal eine Überschrift vergeben
sagen zum Beispiel,
dass es jetzt eine h3 Überschrift und.
Artikel Eintrag
XYZ.
Daneben gibt es vielleicht
noch mal ein Bild,
was zu diesem Artikel gehört
von der Forschung etc.
was hier vielleicht hin soll.
Und dann kann man natürlich auch sagen
Hier kommt wieder ein bisschen
so ein Anleser mit hin oder mit dazu
und dann kann man das Ganze
auch entsprechend wieder mit
zum Beispiel einen Button hier versehen
und dann sagen,
dass noch ein Button
eingefügt werden soll mit Weiterlesen.
Und auch hier beim Button
haben Sie die Möglichkeit,
über Einstellungen zum Beispiel
den Ecken Radius auf 0 zu setzen.
Das schaut jetzt alles noch
sehr unschön aus.
Aber denken Sie daran,
dass Sie auch eben
Abstände hinzufügen können,
was wir schon hier oben gemacht haben.
Sie können zum Beispiel auf
die Überschrift hier klicken.
Und dann über die
drei Einstellungs Punkte
auf danach einfügen klicken oder davor
einfügen, je nachdem, wo
dieses Element landen soll
und dann wird in Gutenberg
eben hier schon mal ein Block vorbereit.
Da können Sie dann sagen
Ich brauche hier
noch ein bisschen Abstand.
Ich mache jetzt hier
den Abstandshalter noch mit rein.
Dann zum Beispiel sagen
hier kommen vielleicht noch 20 Pixel
Abstand mit rein.
Sie haben auch die Möglichkeit,
Blöcke zu kopieren, das heißt,
wählen Sie den Block aus.
Falls Sie hier Schwierigkeiten
haben, den auszuwählen
zwischen zwei Elementen,
dann kommt diese Funktion ins Spiel.
Unter der Funktion
Kontur diese drei Striche
kriegen Sie ein Navigationsmenü,
was Ihnen sagt, wo Sie gerade sind
und welche Elemente Sie auswählen können.
Das heißt, Sie können sagen,
ich will jetzt gerade
diesen Absatz auswählen
oder vielleicht eher
diesen Abstandshalter.
Wenn Sie den ausgewählt haben,
können Sie über die Einstellungs Punkte
dann zum Beispiel sagen
Ich möchte diesen Block
entsprechend duplizieren.
Dann können Sie diesen Block
entweder ziehen.
Also Sie haben die Möglichkeit,
den Block natürlich klassisch zu ziehen
oder Sie können normalerweise auch sagen
verschieben nach.
Jetzt finden Sie hier
einen blauen Indikator,
den Sie mit den Pfeiltasten oben
und unten zum Beispiel
an die passende Position
verschieben können
und mit der Enter-Taste bestätigen.
Gutenberg ist aktuell
noch etwas kompliziert
bei der Handhabung.
So ist es nicht ganz leicht,
zumindest in dieser Version von Gutenberg
Blöcke zu kopieren.
Das heißt, wenn wir jetzt sagen,
wir haben mehrere Artikel,
dann kommt man eventuell
nicht drum herum,
diese dann noch mal händisch
entsprechend zu erweitern.
Wir haben übrigens für alle Webmaster,
die schon ihre Artikel automatisch
als RSS Feed ausgeben,
auch die Möglichkeiten,
hier bei diesem Newsletter
einfach einen RSS Feed mit anzubinden.
Das heißt, Sie haben hier die Funktion,
des RSS-Blockes.
Das heißt hier einfach die
RSS-URL entsprechend eingeben
und dann werden diese Artikel
natürlich mit ausgegeben.
Und diese Funktion wird in Zukunft
natürlich auch noch erweitert werden,
damit Sie hier weniger Arbeit haben,
um diese Sachen eben nicht mehr händisch
alle einzutragen jedes Mal.
Aus Demonstrationsgründen
werden wir jetzt noch ein paar mehr
Artikel Einträge erstellen.
Das heißt, wir gehen
wieder einen neuen Blog
erstellen spalten 50 zu 50.
Jetzt haben wir hier oben
ja schon Elemente,
die können wir kopieren.
Das heißt, wir gehen hier
auf Duplizieren,
ziehen uns diesen Artikel Eintrag
hier in die neue Spalte, machen
das Ganze auch mit dem Text,
wobei Sie hier natürlich
vermutlich einen neuen Textern haben
werden, der hier unten dann
mit ausgegeben werden soll.
Hier haben wir ein Bild.
Da wählen wir wieder ein Bild aus.
Natürlich können Sie auch immer
die Bildunterschrift noch vergeben.
Man merkt, dass es noch nicht
ganz glatt läuft bei Gutenberg hier
eine korrekte Positionierung zu finden
der Elemente.
Das heißt, hier muss man immer ein
bisschen nachjustieren,
zum Beispiel über die zwei Pfeile,
die noch gegeben werden,
zum Beispiel nach oben oder nach unten,
damit sie letztendlich
die korrekte Position finden können.
Auch hier
können wir auch den Abstand kopieren.
Es ist immer eine Frage,
ob es sich wirklich lohnt,
was zu kopieren oder eben
letztendlich einfach so einzufügen.
Weil man die Sachen dann eben
dann bei Gutenberg dann doch oft händisch
noch nachjustieren muss.
Natürlich kann es sein,
dass in zukünftigen Versionen
das alles dann noch
einfacher gemacht wird,
damit sie dann vielleicht
auch weniger Frust dabei haben,
wenn Sie diesen Newsletter dann
in diesen Einzelteilen
aktuell erstellen müssen.
Das heißt, wir arbeiten natürlich daran
und diese Prozesse
dann auch zu vereinfachen.
Und ich bin mir sicher,
dass die nächsten
kommenden Gutenbergversionen
Ihnen da auch noch mal
etwas Arbeit abnehmen können.
Wir sehen, wir können
diesen Button jetzt nicht
kopieren und einfügen.
Und woran liegt das?
Das liegt daran, dass ein Button noch mal
in einer anderen Gruppe liegt,
die Buttons heißt.
Das heißt, wenn Sie
den Button kopieren möchten,
müssen Sie zuerst wieder über das
Kontur-Menü auf Buttons,
also auf die Überkategorie.
Sie sehen schon, der Indikator
selektiert jetzt den gesamten Block.
Und jetzt haben Sie die Möglichkeit,
diesen Block zu kopieren
und dann hier unten Über
Steuerung+V einzufügen.
Natürlich haben sie auch
die Möglichkeit, zum Beispiel hier
diesen Abstand noch einzufügen.
Dann gehen wir in den Text:
Enter-Taste, Steuerung+V.
und können auch hier
dann wieder einen
neuen Button mit einfügen.
Das heißt,
so hat man die Möglichkeit, nach
und nach seinen Newsletter
zusammenzustellen
mit verschiedenen Elementen,
die man natürlich entsprechend
immer wieder erweitern kann.
Man sollte auch immer
prüfen, wie die Darstellung
letztendlich im Mail-klienten ausschaut.
Das heißt, wenn Sie dann
mal zufrieden sind,
dann können Sie natürlich
unter Newsletter > Testen.
Das heißt, Sie finden
hier einen Reiter testen,
egal ob er jetzt aus oder
eingeklappt ist.
Dann können Sie hier
Ihre Mailadresse angeben und sagen,
er soll
an Sie zum Beispiel gesendet werden.
Sie bekommen dann noch eine Bestätigung,
wenn der Versand erfolgreich
war, in der Regel.
Das heißt, Sie bekommen dann hier oben
die Bestätigung angezeigt.
Wenn sie dann zufrieden sind,
dann wie im Tutorial schon beschrieben:
Gehen Sie einfach auf Newsletter,
können Ihren Betreff vergeben.
Hier kommt dann eben
Ihr Titel des Newsletters,
der Anleser kommt in den Vorschau Text.
Der sollte nicht zu lang sein,
sondern einfach eine Zeile,
vielleicht zwei Zeilen.
Dass ist die Zeile,
die man immer bei den Mails
als Vorschau lesen kann.
Natürlich können sie dann
den Empfänger vergeben bzw.
in unserem CMS ist das aktuell
eben der Mail Verteiler.
Das heißt hier kommt dann
der entsprechende E-Mail-Verteiler hin,
den sie entsprechend
auch bei den Postmastern,
gesondert noch mal ja
eben beantragen können.
Absender, Name
und natürlich eine Reply to Adresse,
falls Sie das brauchen.
Sie haben auch hier die Möglichkeit,
die System Schriftart zu ändern,
denn bei Mail-Klienten ist es natürlich
so, dass diese auf allen verschiedenen
Softwares laufen sollten.
Da hat man leider jetzt nicht
die Möglichkeit zu sagen,
meine Schriftart sollte Roboto sein.
Das heißt, wählen Sie
eine der vorgegebenen Schriftarten.
Sie sehen dann auch die Vorschau
gibt Ihnen das dann
auch schon korrekt aus.
Das heißt,
da können Sie dann zum Beispiel sagen
Ich möchte.
Die Tahoma zusammen mit einem Arial Text.
Und.
Dann, wenn Sie fertig sind,
wie gesagt, über den Button
senden, einfach abschicken.
Ich hoffe, Sie haben jetzt noch mal
einen besseren Einblick bekommen
in den Gutenberg Editor.
Es ist natürlich nicht immer trivial,
aber wir versuchen natürlich,
dass wir noch weitere Blöcke
für diesen Newsletter
zur Verfügung stellen.
Also falls Ihnen da
noch Funktionen fehlen,
falls Sie noch Ideen haben
oder falls Ihnen Fehler
auffallen sollten,
dann melden Sie sich bei uns
und wir versuchen das eben
entsprechend zu beheben.
Guttenberg wird in ferner Zukunft
auch auf unserem CMS
vermutlich ausgerollt werden.
Das heißt, Sie werden mit diesem Editor
vermutlich noch öfters arbeiten müssen
und wir versuchen natürlich dann auch
entsprechende Dokumentationen
bereitzustellen, falls es so weit ist.
Ich wünsche Ihnen jetzt
viel Spaß beim Erstellen
und beim Versenden Ihrer Newsletter.
Auf Wiedersehen.