Zum Hauptinhalt springen

Verwenden des Seiten-Editors

Der B1-Seiten-Editor ist ein visueller Drag-and-Drop-Builder, mit dem Sie Ihre Kirchen-Website-Seiten entwerfen können, ohne Code zu schreiben. Sie können Abschnitte und Inhaltsblöcke hinzufügen, Stile anpassen, Ihre Arbeit vorschau und Änderungen rückgängig machen -- alles von innerhalb Ihres Browsers.

Bevor Sie anfangen

Öffnen des Editors​

  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 Panel zeigt Ihre Seitenstruktur und verfügbare Inhalts-Elemente; der mittlere Bereich zeigt eine Live-Vorschau Ihrer Seite.

Info

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

Seitenstruktur: Abschnitte und Elemente​

Jede Seite wird aus zwei Ebenen aufgebaut:

  • Abschnitte -- Die Top-Level-Container, die Ihre Seite in horizontale Banden teilen (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 Inhalts-Stücke, die in einem Abschnitt platziert sind, wie Text, Bilder, Schaltflächen, Karten, Formulare und Kalender.

Abschnitt hinzufügen​

  1. Klicken Sie auf Abschnitt hinzufügen (oder die Schaltfläche + oben im linken Panel).
  2. Wählen Sie, wie Sie beginnen möchten:
    • Aus einer Vorlage — durchsuchen Sie die Abschnittsvorlagen-Galerie, die nach Kategorie organisiert ist (Hero, Über, Services, Spenden usw.), und klicken Sie auf eine, um sie als vollständig gestalteten, vorausgefüllten Abschnitt einzufügen. Sie können alles nach dem Hinzufügen anpassen.
    • Leerer Abschnitt -- wählen Sie ein Spaltenlayout (einzeln, zwei Spalten, drei Spalten usw.) und bauen Sie von Grund auf.
  3. Der neue Abschnitt wird in der Vorschau angezeigt. Klicken Sie darauf, um ihn auszuwählen und seine Hintergrundfarbe, Padding und andere Stiloptionen zu konfigurieren.

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 -- Laden Sie ein Foto hoch oder verknüpfen Sie es
    • 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 -- Zeige einen Ereigniskalender an
    • Häufig gestellte Fragen -- Akkordeon-Stil Frage und Antwort Blöcke
    • Video -- Betten Sie ein Video per URL ein
    • Gruppen-Browser -- Ein filtrierbares Verzeichnis aller Kirchengruppen mit optionaler Suche, Kategorie-Filter und Etikett-Filter
    • Icon Feature -- Ein Symbol mit Titel und kurzer Beschreibung, für Feature oder Ministeriums-Highlights
    • Galerie -- Ein Mehr-Foto-Gitter oder Mauerwerk-Layout
    • Zeugnis -- Ein oder mehrere Zitate mit Autoren-Name, Rolle und Foto
    • Soziale Symbole -- Verknüpfte Symbole für Ihre Kirchen-Sozialmedien-Profile
    • Countdown -- Ein Timer, der zu einem Datum oder einer wöchentlichen Servicezeit herunterzählt
    • Statistiken -- Eine Reihe von großen Zahlen mit Bezeichnungen (Mitglieder, Jahre, Campi)
    • Kampagnen-Fortschritt -- Eine Live-Fortschrittsleiste für eine Spendenkampagne, die die Gesamtsumme in Richtung eines Fundszielziels anzeigt
    • Staff Grid -- Fotokarten für die Mitglieder einer Gruppe; die Gruppe muss die Option öffentliche Mitgliederliste aktiviert haben
    • Servicezeiten -- Die Service-Zeitplan Ihrer Campi, automatisch vom Anwesenheits-Setup abgerufen
    • Predigten -- Ihre Predigtbibliothek als vollständiger Browser oder Gitter-, Listen- oder Featured-Latest-Layout
  3. Konfigurieren Sie das Element mit dem Einstellungs-Panel, das angezeigt wird.

Neuordnung von Inhalten​

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 sie zwischen Abschnitten verschieben.

Gestalten Sie Ihre Seite​

Abschnitts-Stile​

Klicken Sie auf einen Abschnitt, um sein Stilfeld zu öffnen. Sie können eingestellt:

  • Hintergrund -- Volltonfarbe, Farbverlauf oder Bild. Bei Verwendung eines Bildhintergunds können Sie mit einer Focal Point-Auswahl auf den Teil klicken, der in der Mitte bleibt, wenn der Abschnitt skaliert wird, und eine Option Overlay-Farbe können Sie einen halbtransparenten Farbton über das Bild hinzufügen, um die Lesbarkeit des Textes zu verbessern.
  • Padding -- Oben- und Untenabstand innerhalb des Abschnitts
  • Breite -- Vollbreite oder zentriert/behälter
  • Teiler -- Dekorative Formtrenner (Welle, Schräge, Kurve, Dreieck und mehr) an der Ober- oder Unterseite des Abschnitts, mit Farb-, Höhen- und Flip-Optionen

Element-Stile​

Klicken Sie auf ein Element, um sein Stilfeld zu öffnen. Häufige Optionen enthalten Schriftgröße, Farbe, Ausrichtung, Marge und Padding. Bei Bildern können Sie Alternativtext und Link-Ziele eingestellt.

Benutzerdefiniertes CSS​

Für erweiterte Stile hat jeder Abschnitt und jedes Element ein Feld Benutzerdefiniertes CSS, in dem Sie Ihre eigenen CSS-Regeln schreiben können. Diese sind dem Element zugeordnet, daher werden sie nicht versehentlich den Rest der Seite beeinflussen.

Tipp

Wenn Sie Stile über Ihre gesamte Website anwenden müssen -- wie eine benutzerdefinierte Schriftart oder eine globale Farbe -- verwenden Sie stattdessen die Einstellungen Erscheinungsbild.

Vorschau Ihrer Seite​

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

  • Desktop -- Vollbreite Browser-Ansicht
  • Mobil -- Schmale Telefon-Größe Ansicht

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

Rückgängigmachen von Änderungen​

Der Editor verfolgt automatisch Ihre Bearbeitungsverlauf. Verwenden Sie die Symbolleisten-Schaltflächen oder Tastenkombinationen, um zu navigieren:

  • Rückgängig (Ctrl+Z / Cmd+Z) -- Machen Sie Ihre letzte Aktion rückgängig
  • Wiederherstellen (Ctrl+Y / Cmd+Y) -- Bringen Sie eine ungeschehen gemachte Aktion erneut an

Sie können die Seite auch auf ein früheres Snapshot wiederherstellen. Klicken Sie auf Verlauf in der Symbolleiste, um eine Liste gespeicherter Snapshots mit Beschreibungen zu sehen, und klicken Sie auf einen Eintrag, um zu diesem Punkt wiederherzustellen.

Warnung

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

Speichern und Veröffentlichen​

Änderungen werden automatisch gespeichert, wenn Sie arbeiten. Ein Status-Indikator in der Symbolleiste zeigt, ob Ihre Änderungen gespeichert wurden.

Entwurfs- und Veröffentlichungsstatus​

Seiten können einen veröffentlichten Status haben, der kontrolliert, wann Besucher Ihre Änderungen sehen. Die Symbolleiste zeigt einen Status-Chip mit dem aktuellen Status an:

  • Live on Save -- Die Seite verwendet keinen Publish-Workflow. Jede gespeicherte Änderung geht sofort live. Dies ist der Standard für neue Seiten.
  • Unverö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 stimmt überein, was Besucher sehen.

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

Um auf die letzte veröffentlichte Version zurückzukehren, ohne zu beeinflussen, was Besucher sehen, öffnen Sie das Overflow-Menü (⋮) und klicken Sie auf Änderungen verwerfen.

Um eine Seite vollständig offline zu nehmen, öffnen Sie das Overflow-Menü und klicken Sie auf Entpublizieren. Besucher werden diese Seite nicht mehr sehen, bis Sie sie erneut veröffentlichen.

Tipp

Verwenden Sie den Entwurf-/Veröffentlichungs-Workflow, wenn Sie eine Seite vorbereiten möchten -- zum Beispiel für ein bevorstehendes Ereignis -- und sie erst im richtigen Moment live schalten. Bauen Sie die Seite auf und schau sie vor, klicken Sie auf Veröffentlichen, wenn Sie bereit sind.

Verwandte Artikel​

  • Verwalten von Seiten -- Erstellen Sie Seiten, legen Sie URLs fest und verwalten Sie die Website-Navigation
  • Erscheinungsbild -- Legen Sie website-breite Farben, Schriftarten und Branding fest
  • Dateien -- Laden Sie Bilder und Dokumente hoch, um sie im Editor zu verwenden
  • Erstellen von Formularen -- Erstellen Sie Formulare, die Sie auf Seiten einbetten können