{"id":151,"date":"2020-07-11T01:25:12","date_gmt":"2020-07-10T23:25:12","guid":{"rendered":"http:\/\/wp12964331.server-he.de\/experimentelles_design\/?p=151"},"modified":"2020-11-03T11:48:35","modified_gmt":"2020-11-03T10:48:35","slug":"manual","status":"publish","type":"post","link":"http:\/\/wp12964331.server-he.de\/experimentelles_design\/2020\/07\/11\/manual\/","title":{"rendered":"Manual"},"content":{"rendered":"\n

\u00dcbersicht
<\/strong>Erste Schritte
<\/a>Hochladen von Bildern
<\/a>Aufl\u00f6sung und Komprimierung von Bildern
<\/a>Das Inserter-Werkzeug
<\/a>Visuelle Bearbeitung
<\/a>Multimedial<\/a>
Beitragsbild festlegen
<\/a>Weitere Links und Hilfestellungen
<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Erste Schritte<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Nach dem Login \u00fcber http:\/\/wp12964331.server-he.de\/experimentelles_design\/wp-admin\/<\/a> gelangst du in das Dashboard der WordPress Seite und kannst \u00fcber den Punkt Beitr\u00e4ge<\/em> \u2192 Erstellen<\/em> einen Beitrag hinzuf\u00fcgen. In die Titelzeile gibst du den Titel des Beitrags (also deiner Arbeit) ein. Anschlie\u00dfend kannst du in den Editor darunter die Inhalte einf\u00fcgen. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bevor es aber richtig losgeht, solltest du den Beitrag als Entwurf speichern.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Das Ziel des Gutenberg Editors ist es, das Hinzuf\u00fcgen von umfangreichen Inhalten in WordPress einfach und angenehm zu gestalten. Dieser ganze Beitrag besteht aus einzelnen Inhalts-Elementen<\/em>, die LEGO-Steinen \u00e4hneln, die man bewegen und mit denen man interagieren kann.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Was du gerade liest befindet sich in einem Text-Block<\/strong>, der einfachste Block von allen. Der Text-Block kann frei im Beitrag positioniert werden und die Textausrichtung l\u00e4sst sich \u00fcber die Men\u00fcleiste links oben \u00e4ndern. \u00dcberschriften sind selbst separate Bl\u00f6cke, was bei der Gliederung und Organisation deiner Inhalte hilft.<\/p>\n\n\n\n

Drag and Drop<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

W\u00e4hle den Block und dann das linke Symbol aus (je nach Block-Typ sieht es anders aus), um ihn per Drag and Drop zu verschieben.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Der Block l\u00e4sst sich frei verschieben. Alternativ kannst du die Position durch die \u2191 \u2193 Pfeil-Symbole verschieben.<\/p>\n\n\n\n

Hochladen von Bildern<\/h2>\n\n\n\n

Der Umgang mit Bildern und Medien ist ein prim\u00e4rer Schwerpunkt des Editors. Beim Hochladen von Bildern solltest du darauf achten, dass sie im Dateinamen <\/p>\n\n\n\n

keine Sonderzeichen enthalten<\/strong> (darunter fallen alle deutschen Umlaute wie \u00c4\u00e4 \u00dc\u00fc \u00d6\u00f6 \u00df und Sonderzeichen wie ?!%&) und das<\/p>\n\n\n\n

keine Leerzeichen<\/strong> bzw. das W\u00f6rter durch einem Unterstrich „_“ oder einem Viertelgeviertstrich „-“ getrennt werden.<\/p>\n\n\n\n

Bj\u00f6rn Sch\u00f6nborn Ro\u00dflau.jpg<\/strong> wird in bjoern_schoenborn_rosslau.jpg<\/strong> umbenannt.<\/p>\n\n\n\n

Die Dateien sollten grunds\u00e4tzlich deinen Vor- und Nachnamen enthalten. Der Dateiname sollte folgende Struktur haben:

vorname_nachname_projekttitel_00.jpg<\/strong> <\/p>\n\n\n\n

Aufl\u00f6sung und Komprimierung von Bildern<\/h2>\n\n\n\n

Au\u00dferdem sollten die Bilder eine Aufl\u00f6sung von 72 dpi<\/strong> haben. In der Regel haben sie h\u00f6here Aufl\u00f6sungen, die sich f\u00fcr den Druck, nicht aber f\u00fcr das Web eignen. Deswegen m\u00fcssen die Bilder vor dem Upload komprimiert werden. <\/p>\n\n\n\n

Durch die Reduktion der Aufl\u00f6sung und ggf. einer Verkleinerung der Gr\u00f6\u00dfe k\u00f6nnen die Bilder schneller laden und es wird nicht viel Speicher ben\u00f6tigt. Du kannst dich dabei an den Richtwert 1200px f\u00fcr die lange Seite<\/strong> orientieren, in vielen F\u00e4llen reicht aber 800px (Lange Seite) aus.<\/p>\n\n\n\n

In Adobe Photoshop gibt es hierf\u00fcr die Funktion „F\u00fcr Web speichern“. Hier findest du weitere Infos: https:\/\/helpx.adobe.com\/de\/animate\/using\/save-for-web-options.html#Webgrafikformate<\/a><\/p>\n\n\n\n

\"Sch\u00f6ne<\/figure><\/div>\n\n\n\n

Das Inserter<\/em>-Werkzeug<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Stell dir vor, alles, was WordPress kann, steht dir direkt auf der Oberfl\u00e4che zur Verf\u00fcgung. Keine Notwendigkeit, sich an HTML-Tags, Klassen oder komplizierte Shortcode-Syntax zu erinnern. Das ist der Grundgedanke hinter dem Inserter \u2013 der (+)<\/code>-Button, den du um den Editor herum siehst \u2013 mit dem du alle verf\u00fcgbaren Inhalts-Bl\u00f6cke suchen und in deinen Beitrag einf\u00fcgen kannst. Plugins und Themes sind in der Lage, ihre eigenen Bl\u00f6cke zu registrieren, was alle Arten von M\u00f6glichkeiten f\u00fcr eine umfangreiche Bearbeitung und Ver\u00f6ffentlichung er\u00f6ffnet.<\/p>\n\n\n\n

Versuch es, du entdeckst wom\u00f6glich Dinge, die WordPress bereits in deine Beitr\u00e4ge einf\u00fcgen kann, von denen du nichts wusstest. Hier ist eine kurze Liste, was du aktuell dort findest:<\/p>\n\n\n\n

  • Text und \u00dcberschriften<\/li>
  • Bilder und Videos<\/li>
  • Galerien<\/li>
  • Einbettungen, wie YouTube, Tweets, oder andere WordPress-Beitr\u00e4ge.<\/li>
  • Layout-Bl\u00f6cke, wie Buttons, Hero-Bilder, Separatoren, etc.<\/li>
  • Und nat\u00fcrlich Listen<\/em> wie diese \ud83d\ude42<\/li><\/ul>\n\n\n\n

    Visuelle Bearbeitung<\/h2>\n\n\n\n

    Ein gro\u00dfer Vorteil von Bl\u00f6cken ist es, dass du sie direkt vor Ort bearbeiten und deinen Inhalt ver\u00e4ndern kannst. Anstelle von Feldern, um beispielsweise die Quelle eines Zitats oder den Text eines Buttons zu bearbeiten, kannst du den Inhalt direkt \u00e4ndern.<\/p>\n\n\n\n

    Der Editor bietet ein neue Erfahrung beim Erstellen von Seiten und Beitr\u00e4gen, die das m\u00fchelose Schreiben umfangreicher Inhalte erm\u00f6glicht. Er hat \u201eBl\u00f6cke\u201c, um das Einbetten von Inhalten, die bisher \u00fcber Shortcodes, individuelles HTML oder \u201emysteri\u00f6se Praktiken\u201c eingebettet wurden, zu vereinfachen.<\/p>Matt Mullenweg, 2017<\/cite><\/blockquote>\n\n\n\n

    Die Quellenangabe des Zitats ist ein separates Textfeld, \u00e4hnlich wie bei den Bildunterschriften. Somit bleibt die Struktur des Zitats gesch\u00fctzt, auch wenn du die Quelle ausw\u00e4hlst, ver\u00e4nderst oder entfernst. Sie kann jederzeit wieder hinzugef\u00fcgt werden.<\/p>\n\n\n\n

    • \"\"<\/figure><\/li>
    • \"\"<\/figure><\/li>
    • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n

      Du kannst die Anzahl der Spalten in deinen Galerien \u00e4ndern, indem du einen Schieberegler im Block-Inspektor in der Seitenleiste bewegst.<\/p>\n\n\n\n

      Multimedial<\/h2>\n\n\n\n
      • \"\"<\/figure><\/li>
      • \"\"<\/figure><\/li><\/ul><\/figure>\n\n\n\n

        Hier oben ist eine Galerie mit nur zwei Bildern. Du kannst die Galerie mithilfe des Block-Umschalters auch wieder zur\u00fcck in einzelne Bilder konvertieren.<\/p>\n\n\n\n

        Jeder Block kann sich an diese Ausrichtungen anpassen. Der Einbetten-Block hat sie auch und ist standardm\u00e4\u00dfig responsiv:<\/p>\n\n\n\n

        \n