Zum Hauptinhalt springen

Seiten-Editor verwenden

Der B1 Seiten-Editor ist ein visueller Drag-and-Drop-Builder, mit dem Sie Kirchenwebsite-Seiten entwerfen können, ohne Code zu schreiben. Sie können Abschnitte und Inhaltsblöcke hinzufügen, Stile anpassen, Ihre Arbeit in der Vorschau ansehen und Änderungen rückgängig machen -- alles direkt in Ihrem Browser.

Bevor Sie beginnen

  • Führen Sie Ersteinrichtung aus, um Ihre Website zu konfigurieren
  • Erstellen Sie mindestens eine Seite in Seiten verwalten
  • Sie benötigen die Berechtigung content.edit, um auf den Editor zuzugreifen

Editor öffnen​

  1. Klicken Sie in B1 Admin auf Website im linken Menü.
  2. Suchen Sie die Seite, die Sie bearbeiten möchten, in der Tabelle „Seiten" und klicken Sie auf Bearbeiten.

Der Editor öffnet sich im Vollbildmodus. Das linke Fenster zeigt Ihre Seitenstruktur und verfügbare Inhaltelemente an; der mittlere Bereich zeigt eine Live-Vorschau Ihrer Seite.

Info

Der Editor wird immer im hellen Modus angezeigt, unabhängig von Ihrer B1 Admin-Design-Einstellung. Dies stellt sicher, dass die Vorschau genau entspricht, wie Ihre Seite für Website-Besucher aussieht.

Seitenstruktur: Abschnitte und Elemente​

Jede Seite ist aus zwei Ebenen aufgebaut:

  • Abschnitte -- Die Behälter auf höchster Ebene, die Ihre Seite in horizontale Bänder unterteilen (z. B. ein Hero-Abschnitt, ein Inhaltsblock oder ein Footer-Streifen). Jede Seite muss mindestens einen Abschnitt haben, bevor Sie Inhalte hinzufügen können.
  • Elemente -- Die einzelnen Inhaltskomponenten, die in einem Abschnitt platziert sind, z. B. Text, Bilder, Schaltflächen, Karten, Formulare und Kalender.

Einen Abschnitt hinzufügen​

  1. Klicken Sie auf Abschnitt hinzufügen (oder auf die Schaltfläche + oben im linken Fenster).
  2. Wählen Sie, wie Sie starten möchten:
    • Aus einer Vorlage — durchsuchen Sie die nach Kategorien organisierte Galerie mit Abschnittsvorlagen (Hero, Über, Dienste, Geben usw.) und klicken Sie auf eine, um sie als vollständig gestalteten, vorgefüllten Abschnitt einzufügen. Sie können danach alles anpassen.
    • Leerer Abschnitt — wählen Sie ein Spaltenlayout (einfach, zwei Spalten, drei Spalten usw.) und bauen Sie von Grund auf.
  3. Der neue Abschnitt erscheint in der Vorschau. Klicken Sie darauf, um ihn auszuwählen, und konfigurieren Sie Hintergrundfarbe, Abstände und andere Stile.

Layout eines Abschnitts wechseln​

Haben Sie einen Abschnitt bereits ausgebaut, möchten aber eine andere Struktur? Verwenden Sie den Layout-Umschalter in diesem Abschnitt, um die Spaltenordnung für eine andere aus der Galerie zu tauschen und dabei Ihren vorhandenen Inhalt und die Elemente beizubehalten.

Elemente zu einem Abschnitt hinzufügen​

  1. Klicken Sie in der Vorschau in einen Abschnitt, um ihn auszuwählen.
  2. Klicken Sie auf Inhalt hinzufügen und wählen Sie einen Elementtyp aus der Liste:
    • Text -- Überschriften, Absätze und Rich Text
    • Bild -- Ein Foto hochladen oder verlinken
    • Schaltfläche -- Ein anklickbarer Call-to-Action-Link
    • Karte -- Ein Bild mit Titel und Beschreibung
    • Formular -- Betten Sie ein Formular direkt auf der Seite ein
    • Kalender -- Einen Ereigniskalender anzeigen
    • FAQ -- Akkordeon-artige Frage-und-Antwort-Blöcke
    • Video -- Ein Video anhand der URL einbetten
    • Gruppenbrowser -- Ein filterbares Verzeichnis aller Kirchengruppen mit optionaler Suche, Kategorifilter und Etikettenfilter
    • Icon Feature -- Ein Symbol mit Titel und Kurzbeschreibung für Funktions- oder Ministeriums-Highlights
    • Galerie -- Ein Multi-Foto-Gitter oder Masonry-Layout
    • Zeugnis -- Ein oder mehrere Zitate mit Autorenname, Rolle und Foto
    • Social Icons -- Verlinkte Symbole für die Social-Media-Profile Ihrer Kirche
    • Countdown -- Ein Timer für ein Datum oder eine wöchentliche Servicezeit
    • Statistiken -- Eine Reihe großer Zahlen mit Beschriftungen (Mitglieder, Jahre, Filialen)
    • Kampagnensfortschritt -- Eine Live-Fortschrittsleiste für eine Spendenkampagne, die den Gesamtbetrag gegenüber einem Fondsbudget anzeigt
    • Personal-Netzwerk -- Fotokarten für die Mitglieder einer Gruppe; die Gruppe muss die Option öffentliches Verzeichnis aktiviert haben
    • Service-Zeiten -- Der Serviceplan Ihrer Filialen, automatisch aus der Attendance-Einrichtung abgerufen
    • Predigten -- Ihre Predigenbibliothek als vollständiger Browser oder Netzwerk-, Listen- oder Featured-Latest-Layout
    • Karte -- Eine auf die Adresse Ihrer Kirche zentrierte eingebettete Karte
    • Tabelle -- Ein einfaches Gitter von Zeilen und Spalten für tabellarische Inhalte
    • Text mit Foto -- Text und ein Bild nebeneinander
    • Logo -- Ihr Kirchenlogo, abgerufen aus Erscheinungsbild
    • Live-Stream -- Ihr Live-Stream-Player, direkt auf der Seite eingebettet
    • Spende -- Ein Spenden-Button oder eingebettetes Spendenformular
    • Rohes HTML -- Benutzerdefiniertes HTML-Markup für fortgeschrittene Anwendungsfälle
    • iFrame -- Externe Inhalte anhand der URL einbetten
  3. Konfigurieren Sie das Element mit dem Fenster „Einstellungen", das angezeigt wird.

Inhalte neu ordnen​

Ziehen Sie Abschnitte oder Elemente mit dem Handle-Symbol (sechs Punkte) auf der linken Seite jedes Elements, um sie neu zu ordnen. Sie können Elemente innerhalb eines Abschnitts ziehen oder zwischen Abschnitten verschieben.

Seite gestalten​

Abschnitt-Stile​

Klicken Sie auf einen beliebigen Abschnitt, um sein Stilpanel zu öffnen. Sie können Folgendes festlegen:

  • Hintergrund -- Vollfarbe, Farbverlauf oder Bild. Bei Verwendung eines Bildhintergrunds können Sie mit einem Brennpunkt-Regler festlegen, welcher Teil des Bildes zentriert bleibt, wenn sich der Abschnitt skaliert, und eine Overlay-Farbvarioption zur Verbesserung der Textleserlichkeit hinzufügen.
  • Abstände -- Oben und unten Abstände im Abschnitt
  • Breite -- Volle Breite oder zentriert/begrenzt
  • Unterteiler -- Dekorative Formunteiler (Welle, Schrägstrich, Kurve, Dreieck und weitere) oben oder unten an der Abschnittskante mit Farb-, Höhen- und Umkehroptionen

Element-Stile​

Klicken Sie auf ein beliebiges Element, um sein Stilpanel zu öffnen. Zu den allgemeinen Optionen gehören Schriftgröße, Farbe, Ausrichtung, Rand und Abstände. Für Bilder können Sie alt-Text und Link-Ziele festlegen.

Benutzerdefiniertes CSS​

Für erweiterte Gestalten hat jeder Abschnitt und jedes Element ein Feld Benutzerdefiniertes CSS, in dem Sie Ihre eigenen CSS-Regeln schreiben können. Diese sind auf das Element beschränkt, sodass sie den Rest der Seite nicht unbeabsichtigt beeinflussen.

Tipp

Wenn Sie Stile auf Ihrer gesamten Website anwenden müssen -- z. B. eine benutzerdefinierte Schriftart oder globale Farbe -- verwenden Sie stattdessen die Erscheinungsbild-Einstellungen anstelle von benutzerdefiniertem CSS auf einzelnen Seiten.

Seite in der Vorschau ansehen​

Verwenden Sie die Vorschausteuerelemente in der Symbolleiste, um zu überprüfen, wie Ihre Seite bei verschiedenen Bildschirmgrößen aussieht:

  • Desktop -- Vollbreitiger Browser-Ansicht
  • Mobile -- Enge Telefongrößen-Ansicht

Klicken Sie auf Vorschau, um eine Live-Version der Seite in einem neuen Browser-Tab zu öffnen, genau wie Besucher sie sehen.

Zugänglichkeit überprüfen​

Klicken Sie auf das Zugänglichkeits-Symbol in der Symbolleiste, um eine schnelle Überprüfung auf häufige Probleme durchzuführen -- Bilder ohne alt-Text, niedriger Farbkontrast oder falsch angeordnete Überschriften. Jedes Problem verweist direkt auf das Element, das Aufmerksamkeit benötigt, damit Sie es direkt beheben können.

Änderungen rückgängig machen​

Der Editor verfolgt Ihren Bearbeitungsverlauf automatisch. Verwenden Sie die Symbolleistenschaltflächen oder Tastaturkürzel, um zu navigieren:

  • Rückgängig (Strg+Z / Cmd+Z) -- Ihre letzte Aktion rückgängig machen
  • Wiederherstellen (Strg+Y / Cmd+Y) -- Eine rückgängig gemachte Aktion erneut anwenden

Sie können die Seite auch auf einen früheren Snapshot zurücksetzen. Klicken Sie in der Symbolleiste auf Verlauf, um eine Liste gespeicherter Snapshots mit Beschreibungen anzuzeigen, und klicken Sie auf einen Eintrag, um zu diesem Punkt zurückzukehren.

Warnung

Das Wiederherstellen eines Snapshots ersetzt Ihren aktuellen Seiteninhalt mit der Snapshot-Version. Dies kann mit der Standard-Undo-Schaltfläche nicht rückgängig gemacht werden. Speichern Sie einen Snapshot Ihres aktuellen Zustands, bevor Sie einen alten wiederherstellen, wenn Sie die Option haben möchten, zurückzukehren.

Speichern und Veröffentlichung​

Änderungen werden automatisch gespeichert, während Sie arbeiten. Ein Statusindikator in der Symbolleiste zeigt, ob Ihre Änderungen gespeichert wurden.

Draft- und veröffentlichten Status​

Seiten können einen veröffentlichten Status haben, der steuert, wann Besucher Ihre Änderungen sehen. Die Symbolleiste zeigt einen Statuschip an, der den aktuellen Status anzeigt:

  • Live bei Speicherung -- Die Seite verwendet keinen Veröffentlichungs-Workflow. Jede gespeicherte Änderung wird sofort online gestellt. Dies ist der Standard für neue Seiten.
  • Nicht veröffentlichte Änderungen -- Die Seite wurde zuvor veröffentlicht, aber Sie haben seit der letzten Veröffentlichung Änderungen vorgenommen. Besucher sehen immer noch die zuvor veröffentlichte Version.
  • Veröffentlicht -- Die Seite ist live und Ihr gespeicherter Inhalt entspricht dem, was Besucher sehen.

Um Ihre Änderungen zu veröffentlichen, klicken Sie auf die Schaltfläche Veröffentlichen in der Symbolleiste. Die Seite wird sofort online gestellt.

Um zur zuletzt veröffentlichten Version zurückzukehren, ohne zu beeinflussen, was Besucher sehen, öffnen Sie das Menü "Mehr" (⋮) und klicken Sie auf Änderungen verwerfen.

Um eine Seite ganz offline zu nehmen, öffnen Sie das Menü "Mehr" und klicken Sie auf Veröffentlichung aufheben. Besucher sehen diese Seite nicht mehr, bis Sie sie erneut veröffentlichen.

Tipp

Verwenden Sie den Draft/Publish-Workflow, wenn Sie eine Seite vorbereiten möchten -- z. B. für ein bevorstehendes Event -- und sie nur zum richtigen Zeitpunkt online stellen möchten. Erstellen und zeigen Sie eine Vorschau der Seite an, klicken Sie dann auf „Veröffentlichen", wenn Sie bereit sind.

Verwandte Artikel​

  • Seiten verwalten -- Erstellen Sie Seiten, legen Sie URLs fest und verwalten Sie die Site-Navigation
  • Erscheinungsbild -- Legen Sie site-weite Farben, Schriftarten und Branding fest
  • Dateien -- Laden Sie Bilder und Dokumente hochladen, um sie im Editor zu verwenden
  • Formulare erstellen -- Erstellen Sie Formulare, die Sie auf Seiten einbetten können