Doku

Corporate Identity

Definition des Logos

Logo & Favicon

Ladet euer Logo in das Backend hoch. Nutzt dazu eine SVG, PNG oder JPG.
Die Ausgabegröße des Logos lässt sich anpassen.
Die Platzierung des Logos kann unter Theme Options > Layout > Header geändert werden.

Für das Favicon nutzt PNGs oder JPGs. Es sind nicht alle Größen pflicht aber die Größe 32×32 sollte vorhanden sein.
Hinweis: SVGs werden bei Favicon’s leider noch nicht von allen Browsern unterstützt.

Legt eure Farben fest

Farben

Die Webseite-Farben können mit 6 Farbwerten konfiguriert werden.

Wenn ihr nicht wisst welche Farbkombination ihr wählen möchtet, nutzt die 2 vorhanden Buttons, um Farbkombinationen zu bekommen.
Definiert eure Hauptfarbe (meist findet sich diese im Logo wieder) und den rest machen die Zauber-Buttons.
Die einzelnen Farbpunkte können nachträglich einfach neu definiert werden.

Schriftart

Typografie

Wählt einer der vorhanden Schriftart für eure Webseite aus.

Auch die Linienhöhe oder ob die Überschriften global mittig platziert werden, lässt sich hier einstellen.

Layout

Container weite

Container

Die Breite des Inhalts bekommt hier ihren Wert. Dieser liegt standard bei 1200 Pixeln und kann nach bedarf geändert werden.
Hinweis: Text-Elemente haben eine geringere Weite: Diese liegt bei max. 850px

Header

Header

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

Hier lässt sich die Platzierung der Inhalte festlegen.

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 einer Archivseite ausgegeben werden. Meist in einem 3 Spalten-Layout.

Hier lässt festlegen, ob das Datum ausgeblendet werden soll.
Hat eure Webseite mehrere Inhaltstypen können diese auch in der Kachel entfernt werden.

Button

Button

Die Buttons haben im Standard Rundungen. Sie gefallen euch nicht. Hier könnt ihr sie entfernen.

Im Seiteneditor lässt sich ein einzelner Button auch mit einer Linie (Outline) umranden, statt ihn mit einer Hintergrundfarbe auszugeben.
Zudem könnt ihr ein Icon aus der Bootstrap-Bibliothek hinzufügen.

Hamburgermenü

Hamburger

Vegetarisch oder nicht spielt hier keine Rolle.

Diese Option ändert die Ausgabe der Menüpunkte im Header. Aktiviert ihr sie, wird statt der Menü-Auflistung ein Hamburger-Icon platziert.

Dies eignet sich unteranderem bei vielen Menüpunkten in der ersten Ebene.

Das Hamburger-Menü wird zudem bei kleineren Bildschirmen (Tablets und Smartphones) direkt angezeigt.

Benutzerdefinierte Styles

Custom Styles

Ihr kennt euch mit CSS und Javascript etwas 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.

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.

Exclusiv-Blöcke vom sportiven 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