Doku

Corporate Identity

Definition des Logos

Logo & Favicon

Ladet euer Logo im Backend hoch. Verwendet dafür eine SVG-, PNG- oder JPG-Datei.
Die Größe des Logos lässt sich frei anpassen.
Die Position des Logos könnt ihr unter Theme Options > Layout > Header ändern.

Für das Favicon verwendet PNG- oder JPG-Dateien. Nicht alle Größen sind erforderlich, aber 32×32 sollte vorhanden sein.
Hinweis: SVGs werden als Favicons noch nicht von allen Browsern unterstützt.

Legt eure Farben fest

Farben

Die Farben der Webseite können über sechs Farbwerte eingestellt werden.

Wenn ihr unsicher seid, welche Kombination passend ist, nutzt die beiden vorhandenen Buttons, um Vorschläge zu erhalten.
Legt eure Hauptfarbe fest (häufig entspricht sie der Logofarbe), und die Farben-Buttons generieren dazu passende Ergänzungsfarben.
Alle einzelnen Farbwerte können anschließend jederzeit angepasst werden

Schriftart

Typografie

Wählt eine der vorhandenen Schriftarten für eure Webseite aus.

Hier könnt ihr außerdem die Linienhöhe festlegen und bestimmen, ob Überschriften global zentriert dargestellt werden sollen.

Layout

Containerweite

Container

Hier wird die maximale Breite des Inhalts festgelegt. Standardmäßig beträgt sie 1200 Pixel und kann bei Bedarf angepasst werden.

Hinweis: Textelemente sind schmaler dargestellt und haben eine maximale Breite von 850 Pixeln.

Header

Header

Im Header befindet sich das Logo, der Titel der Webseite sowie das Menü.

Hier lässt sich die Platzierung der 3 Inhalte anpassen.

Tipp: Ist im Logo der Titel eurer Webseite nicht integriert, könnt ihr diese mit einem klick hinzufügen.

Beitragskacheln

Beitragskacheln

Beiträge werden für einen Blog oder News Feed genutzt. Sie werden als Kachel in einer Übersicht dargestellt.

Beitragskacheln können auf der Startseite oder auf Archivseiten angezeigt werden, meist in einem dreispaltigen Layout.

Hier kann festgelegt werden, ob das Datum ausgeblendet werden soll.
Wenn eure Webseite mehrere Inhaltstypen nutzt, lassen sich diese ebenfalls optional aus den Kacheln entfernen.

Button

Button

Standardmäßig haben Buttons abgerundete Ecken. Wenn euch das nicht gefällt, könnt ihr die Rundungen hier entfernen.

Im Seiteneditor kann ein einzelner Button alternativ mit einer Kontur (Outline) statt mit einer Hintergrundfarbe dargestellt werden. Zusätzlich lässt sich ein Icon aus der Bootstrap-Bibliothek hinzufügen.

Hamburgermenü

Hamburger

Vegetarisch oder nicht spielt hier keine Rolle.

Diese Option verändert die Darstellung der Menüpunkte im Header. Wird sie aktiviert, erscheint anstelle der Menüleiste ein Hamburger-Icon.

Das ist besonders sinnvoll, wenn viele Menüpunkte auf der ersten Ebene vorhanden sind.

Auf kleineren Bildschirmen wie Tablets und Smartphones wird das Hamburger-Menü automatisch angezeigt.

Benutzerdefinierte Styles

Custom Styles

Ihr kennt euch mit CSS und Javascript aus und möchtet hier und da eine kleine Änderung oder Ergänzung hinterlegen.

Hier findet ihr das Gewerk dazu. Passt bitte beim Javascript auf. Kommt bei Fragen auf uns zu.

Seiteninhalte erstellen

Seiten und Beiträge werden mit dem WordPress eigenen (Gutenberg-) Editor erstellt. Hier erfahrt ihr ein paar nützliche Tips.

Der neue Editor hat ein anderes Konzept. Dabei gelten folgende Grundsätze: Jedes Element ist ein separater Block.
Daher wird Gutenberg-Editor oft als Blockeditor bezeichnet. Egal, ob du Überschriften, Absätze oder Bilder einfügen möchtest, füge immer zuerst den entsprechenden Block ein. Der Vorteil des neuen Konzepts, jeder Block hat völlig separate Formatierungsoptionen. Wenn du einen Block auswählst, werden die zugehörigen Einstellungen in der Symbolleiste und der rechten Seitenleiste angezeigt.
Einzelne Blöcke können auch per Mausklick verschoben oder kopiert werden. Insgesamt haben Sie nun deutlich mehr Gestaltungsmöglichkeiten für optisch ansprechende Inhalte als im alten Editor. 

Die Werkzeugleiste

1. Kehre mit dem WordPress-Symbol oben links zum Dashboard zurück.
2. Neuen Block hinzufügen
3. Werkzeug (Standard ist der Stift als Symbol für „Bearbeiten“)
4. Letzte Aktion rückgängig machen / Letzte Aktion wiederherstellen
5. Details zum Dokument inkl. Gliederung des Dokuments
6. Block-Navigation anzeigen
7. Editor Einstellungen (rechte Sidebar) ein-/ausblenden
8. Gutenberg Options-Menü öffnen

Neue Blöcke hinzufügen (2)

Hier findest du alle Blöcke für den Editor, neben zahlreichen Standard-Blöcken von WordPress reihen sich noch die eigens für das GRÜNE INTERNET entwickelten Blöcke auf. Eine genaue Übersicht der neuen Blöcke und ihrer Funktionsweise findest du in unserer hier.

Folgende Blöcke aus dem Standard von WordPress des EINFACHEN INTERNETS.

Tabellen

Tabellen lassen sich mit dem Block „Tabellen“ aufbauen.
Spalten und Zeilen lassen sich individuell erweitern.
Ebenso kann eine Kopf und/oder Fußzeile ergänzt werden.

Listen

Listen lassen sich mit dem Block „Listen“ aufbauen.

Es kann zwischen Listen-Punkte oder Listen-Nummern ausgewählt werden.
Mit dem Einrücken-Tab oder dem dazugehörigen Button, lassen sich Listenpunkte Einrücken

Videos

Videos lassen sich in die Mediathek hochladen. Wir empfehlen Videos nur für Hero-Bereiche zu begin einer Seite aus der Mediathek zu nutzen. Achtet auf eine passende (minimale) Größe, um den Datenstrom für eure Besucher gering zu halten. Video-komprimieren finden sich Online.
Für alle anderen Videos empfiehl es sich, Youtube zu nutzen und diese Videos via Iframe in einer Seite zu platzieren.

Editoreinstellungen (7)

Die Editoreinstellungen befinden sich in der rechten Seitenleiste. Er lässt sich zu und abschalten. Über die oberen Registerkarten könnt ihr zwischen Seite und Block wechseln. Ersteres gilt, wie der Name schon verrät, für die Seiteneinstellungen allgemein und letzteres für das ausgewählte Block-Element.

Seiten

Auf dieser Registerkarte werden die Einstellungen für die aktuell bearbeitete Seite (Beitrag) angezeigt.

Der Screenshot zeigt die Seiteneinstellung einer Seite. Mehr Optionen gibt es noch für Beiträge (Kategorien, Schlagworte und Textauszüge).

Einzelne Einstellungen können durch Klicken auf die Pfeile erweitert werden. Im folgenden eine Erklärung der wichtigsten Optionen:

Zusammenfassung

• Sichtbarkeit: Artikel können für alle öffentlich, nur für registrierte Benutzer privat oder für bestimmte Benutzergruppen passwortgeschützt sein.
• Veröffentlichen: Veröffentlichen Sie Ihren Beitrag sofort oder zu einem bestimmten Zeitpunkt in der Zukunft.
• Beitrag auf der Startseite halten: Auf diese Weise können Sie Beiträge als sticky markieren. Der Beitrag wird dauerhaft oben auf der Startseite angezeigt. Gilt natürlich nur für Beiträge.
• Ausstehende Überprüfung: Autoren ohne Veröffentlichungsrechte können Beiträge nur auf diesen Status setzen. Die Veröffentlichung muss dann von einem Redakteur oder Administrator durchgeführt werden.
• In den Papierkorb verschieben: Der Beitrag wird in den Papierkorb verschoben und nicht mehr veröffentlicht. 

Revisionen: Zuletzt gespeicherte Zustände, die wieder aktiviert werden können (eine Art Backup)

Seiten-Attribute

Diese Gruppe enthält ein Dropdown-Menü zur Template Auswahl. Hier findet man das Template „Startseite“. Es generiert eine automatische Darstellung der Inhaltstypen (Beiträge, Termine, Themen, etc.) und setzt sie nach dem Inhalt des Editors.

Block

In dieser Registerkarte werden immer die Einstellungen des aktuell bearbeiteten Blocks angezeigt. Wenn du also auf einen anderen Blocktyp klickst, werden die verfügbaren Optionen geändert.

Gutenberg Options-Menü (8)

Das Options-Menü erreichst du mit einem Klick auf die drei Punkte oben rechts in der Ecke. Hier kannst du verschiedene globale Einstellungen für den Editor vornehmen.

Blöcke vom einfachen Internet

Jenseits der Standard-Blöcke gibt es noch weitere Blöcke die exklusiv für euch zur Verfügung stehen.

Zähler Block

Eine kleine Animation die einen Füllstand wiedergibt.

zum Beispiel

Youtube Popup

Spielt ein Youtube-Video in einem Popup aus.
Ein Vorschaubild kann frei gewählt werden.
Die ID des Videos genügt.

zum Beispiel

Akkordeon

Ein Akkordeon-Effekt-Container, wo sich der Inhalt beim klicken auf die Überschrift öffnet.

zum Beispiel

Störer

Ein mitlaufender kleiner Banner, den Ihr mit Text und einem Link belegen könnt

Bild mit Lupe

Ein Vorschaubild das über ein Popup vergrößert werden kann. Als Erkennungs-Symbol wird eine kleine Lupe hinzugefügt.

zum Beispiel

Open Streetmap

Darstellung einer Karte, in die ihr euren Standort hinterlegen könnt

zum Beispiel

Countdown

Ein Zähler der auf ein Datum die Zeit runter zählt. Zudem kann ein Link hinterlegt werden

zum Beispiel

Tabs

Ein Tab-Container kann über diesen Block realisiert werden.

zum Beispiel

Inhaltsverzeichnis

Das Inhaltsverzeichnis generiert sich automatisch aus den im Folgetext hinterlegten Überschriften. Verlässt der Besucher das ende des Inhaltsverzeichnis, lässt sich das Verzeichnis über einen mitlaufenden Button wieder vor Augen bringen.

Icons

für das einbinden von Icons haben wir euch die Sammlung von Bootstrap hinterlegt.
Ihr müsst dem Block (Icon) nur den Namen des Icons von Bootstrap angeben und das Icon wird übernommen.

Auch für Buttons lässt sich ein Icon hinzufügen.

zum Beispiel

Teaserbox

Die Teaserbox gibt einen vordefinierten Container aus, der aus 2 Spalten besteht. Ein Bild auf der einen, einen Textbereich sowie einen Button auf der anderen enthält. Hinterlegt wird die Box mit den Farben der Webseite.

Die Box spart euch Zeit.

zum Beispiel

Karussel

Statt einem Slider kann hiermit eine Karussel-Animation genutzt werden.

zum Beispiel