Blöcke, Zähler und Zeitsteuerung

Ein Absatz, ein Bild oder ein ganzer Abschnitt ist im Editor jeweils ein Block. Du kannst Blöcke einzeln verschieben, duplizieren und löschen. Für die Einstellungen wählst du den Block aus und öffnest rechts den Reiter Block. Wenn du einen verschachtelten Block nicht triffst, hilft die Listenansicht oben links.

Den passenden Block finden

Öffne + oben links. Die Blöcke sind nach Aufgaben geordnet:

Ordner	Was du dort findest
Text	Absätze, Überschriften, Listen, Zitate, Tabellen, Code und Inhaltsverzeichnis
Bilder & Medien	Bilder, Galerien, Video, Audio, Dateien und das Best-of-Karussell
Aufbau & Gestaltung	Gruppen, Spalten, Raster, Buttons, Abstandshalter, Akkordeon und Tabs
Kampagne & Mitmachen	Bühne, Zähler, Countdown und Formular
Beiträge, Termine & Presse	Beitragslisten, Beitragsfilter, Kommende Termine, Pressespiegel-Liste und Pressefotos
Social Media	Mastodon-Post, Social-Media-Feeds, Teilen-Knöpfe und Social Icons
Weitere Blöcke	Unter anderem HTML, Shortcode und RSS
Kopf, Fuß & Navigation / Für Templates	Bausteine für den Website-Editor, etwa Sprachumschalter und Kommentare

Klicke auf einen Ordner, um ihn auf- oder zuzuklappen. Der Editor merkt sich deine Auswahl, auch auf anderen Geräten. Unter Meistgenutzt stehen deine sechs häufigsten Blöcke. Das kannst du im Menü ⋮ → Einstellungen → Blöcke abschalten.

Die Suche versteht auch Aufgaben wie Kontakt, Wahl oder Termine. Wenn du den Blocknamen kennst, tippe in einer leeren Zeile zum Beispiel /Countdown. Seltene Einbettungen wie Reddit oder TED findest du über die Suche. Oft reicht es, den Link allein in eine leere Zeile einzufügen.

Mit der Tastatur wechselst du mit Tab zwischen den Ordnern, öffnest sie mit Enter und gelangst mit Pfeil nach unten zu ihren Blöcken.

Fertige Abschnitte statt einzelner Blöcke

Unter + → Vorlagen → Genossi findest du vorbereitete Abschnitte, etwa eine Kontaktkarte, Themenkarten, eine Zeitleiste oder einen Teaser mit Foto. Nach dem Einfügen bearbeitest du die Texte und Bilder direkt auf der Seite.

Wie du diese Abschnitte gestaltest, steht unter Design und Navigation. Die Bühne auf der Startseite bearbeitest du ebenfalls als Block.

Welche Blöcke angeboten werden

Unter Genossi CMS → Blöcke kannst du das Einfügen-Menü für die ganze Website aufräumen. Jeder Block hat dort eine Kachel mit einem Schalter, sortiert wie die Ordner im Einfügen-Menü. Die Zahl auf der Kachel zeigt, wie oft der Block vorkommt. Sie zählt auch Entwürfe, Pop-ups, Templates und Muster.

1. Schalte den Block auf seiner Kachel aus.
2. Speichere die Änderungen.
3. Der Block verschwindet für alle aus + und aus der Auswahl nach /.

Bereits eingefügte Blöcke bleiben erhalten und lassen sich weiter bearbeiten. Ungenutzte abwählen blendet alle Blöcke ohne Vorkommen aus. Alle anwählen holt alle zurück. Nur deine eigene Auswahl änderst du im Editor unter ⋮ → Einstellungen → Blöcke.

Eine Zahl zeigen

Der Block Zähler eignet sich etwa für gesammelte Unterschriften oder die Zahl deiner Termine. Auf der Website zählt die Zahl einmal von null hoch, sobald sie ins Bild kommt. Wer am Gerät reduzierte Bewegung eingestellt hat, sieht sofort den Endstand.

1. Füge unter + → Kampagne & Mitmachen einen Zähler ein.
2. Wähle rechts unter Zahl die Quelle. Für einen selbst gepflegten Stand nimmst du Eigene Zahl.
3. Trage die Zahl und eine verständliche Beschriftung ein, etwa 12.500 und Unterschriften gesammelt.
4. Ergänze bei Bedarf ein Ziel, etwa 20.000. Dann erscheint ein Fortschrittsbalken.

Für eigene Zahlen sind 12500, 12.500 und 1,5 möglich. Ab fünf Stellen setzt Genossi Tausenderpunkte. Vierstellige Jahreszahlen bleiben ohne Punkt.

Als automatische Quellen stehen Anzahl Beiträge, Termine in diesem Jahr, Termine insgesamt und Einträge im Pressespiegel bereit. Die Beitragszahl folgt der Sprache der Seite. Beide Terminquellen zählen bis einschließlich heute, keine künftigen Termine.

Unter Vor der Zahl und Nach der Zahl ergänzt du zum Beispiel +, € oder %. Mit Farbe und Ausrichtung passt du die Darstellung an. Für rote oder dunkle Flächen gibt es Weiß. Mehrere Zähler setzt du in einen Spalten-Block.

Bis zu einem Zeitpunkt herunterzählen

Füge einen Countdown ein. Unter Zählt herunter bis hast du zwei Möglichkeiten.

Bei Zu einem Zeitpunkt wählst du Datum und Uhrzeit, etwa den Wahlsonntag um 18 Uhr. Es gilt die Zeitzone der Website unter Einstellungen → Allgemein. Ergänze eine Überschrift und einen Text danach. Dieser Text erscheint, sobald die Zeit abgelaufen ist. Lässt du ihn leer, verschwindet der Countdown.

Bei Zum nächsten angekündigten Termin nimmt der Block den nächsten passenden Eintrag aus Termine. Darüber stehen Titel und Ort. Der Titel führt zum Eintrag auf der Seite „Termine“. Sobald der Termin beginnt, verschwindet der Countdown. Nach dem Neuladen zählt er zum nächsten Termin herunter. Bei zwischengespeicherten Seiten kann dieser Wechsel bis zu 30 Minuten dauern.

Sekunden zeigen schaltet die Sekundenanzeige ein. Der Browser berechnet die verbleibende Zeit selbst, auch wenn die Seite aus dem Cache kommt.

Ein Inhaltsverzeichnis einfügen

Setze den Block Inhaltsverzeichnis an den Anfang eines längeren Textes. Er übernimmt die Überschriften automatisch und zeigt sie schon im Editor an.

• Unter Überschriften wählst du Nur H2, H2 und H3 oder H2 bis H4. H2 bedeutet Überschrift der Ebene 2. Das sind die Hauptabschnitte unter dem Seitentitel. Für Unterabschnitte nutzt du Ebene 3, für deren Unterabschnitte Ebene 4.
• Nummeriert ersetzt die roten Quadrate durch Nummern wie 1, 1.1 und 1.2.
• Zuklappen bestimmt, ob das Verzeichnis immer offen ist oder sich öffnen und schließen lässt.
• Ein leerer Titel verwendet Inhalt.

Jede erfasste Überschrift bekommt eine Sprungadresse, etwa #bezahlbare-mieten. Du kannst damit direkt auf einen Abschnitt verlinken. Eine eigene Adresse setzt du am Überschrift-Block unter Erweitert → HTML-Anker. Verwende jede Adresse auf der Seite nur einmal.

Pro Seite ist ein Inhaltsverzeichnis vorgesehen. In Templates und Pop-ups bleibt es leer.

Einen Abschnitt nur zu einer bestimmten Zeit zeigen

Mit der Zeitsteuerung kannst du etwa einen Wahlaufruf nach 18 Uhr ausblenden, ohne die ganze Seite zurückzuziehen.

1. Wähle den Block aus. Soll ein ganzer Abschnitt zeitlich begrenzt sein, wähle seine äußere Gruppe.
2. Öffne rechts Animation & Zeitsteuerung.
3. Setze unter Nur zu dieser Zeit zeigen ein Datum bei Anzeigen ab, Anzeigen bis oder beidem.
4. Speichere die Seite.

Es gilt die Zeitzone der Website. Ohne Anfang gilt der Block sofort, ohne Ende bleibt er nach dem Start sichtbar. Im Editor erkennst du geplante Blöcke am gestrichelten Rahmen. Ein blasser Block ist derzeit ausgeblendet. Darunter steht sein aktueller Status.

Außerhalb des Zeitraums fehlt der Block auf der Website vollständig. Seine Texte erscheinen dann auch nicht in der Suche und in automatisch erzeugten Beschreibungen beim Teilen. Das ist keine Zugangssperre für Dateien. Ein bereits geteilter Bild- oder Dateilink bleibt erreichbar.

Auf gespeicherten Seiten kann der Wechsel einige Minuten dauern, spätestens nach 30 Minuten wird die Fassung erneuert. Wenn ein Abschnitt zu einer genauen Uhrzeit erscheinen muss, lass die Hintergrundaufgaben des Hostings prüfen. Mehr dazu unter Wartung und Ladezeiten.

Eine dezente Animation einstellen

Im selben Feld Animation & Zeitsteuerung wählst du unter Animation beim Erscheinen beispielsweise Einblenden oder Von unten. Dazu gibt es Tempo, Verzögerung und Abspielen für die Vorschau im Editor.

Eine Animation läuft einmal beim Scrollen ins Bild. Bei drei nebeneinanderstehenden Karten kannst du etwa 0, 150 und 300 Millisekunden Verzögerung verwenden. Für die Bühne und den Seitenkopf lass die Animation ausgeschaltet, damit der erste Inhalt sofort zu sehen ist. Geräte mit reduzierter Bewegung zeigen die Blöcke ohne Animation.

Befehle und Programmcode lesbar zeigen

Für Befehle, Konfigurationen und Programmcode gibt es den Block Code unter + → Text. Alternativ tippe drei Backticks in eine leere Zeile und drücke Enter.

Der Block hat einen dunklen Hintergrund und eine Schrift mit festen Zeichenbreiten. Lange Zeilen lassen sich seitlich verschieben. Die farbige Hervorhebung siehst du in der Vorschau und auf der Website. Im Editor bleibt der Code zunächst ohne Farben.

Genossi erkennt unter anderem Shell-Befehle, Python, JavaScript, PHP, HTML, CSS, JSON, YAML, SQL, Nginx und Dockerfile. Stimmen die Farben nicht, wähle rechts Programmiersprache → Farben für und lege die Sprache selbst fest. Für Ausgaben oder Fehlermeldungen passt Nur Text (ohne Farben).

Fett, kursiv oder Links innerhalb des Codes schalten die automatische Färbung für diesen Block ab. Hintergrund- und Textfarbe sind festgelegt, damit der Code lesbar bleibt. Nach einer Änderung am Code oder an der Sprache gilt die neue Fassung sofort.