Page Builder Blöcke

Der Page Builder bietet verschiedene Blöcke, die Sie kombinieren können, um Ihre Webseite zu gestalten.

Layout-Blöcke

Hero-Block

Der erste Eindruck zählt. Der Hero-Block eignet sich perfekt für den Seitenkopf.

Optionen:

• Hintergrundbild oder -farbe
• Überschrift und Untertitel
• Call-to-Action Buttons
• Höhe und Ausrichtung
• Overlay-Effekte

Verwendung:

• Startseite
• Landingpages
• Besondere Ankündigungen

Spalten-Block

Erstellen Sie mehrspaltrige Layouts für komplexe Inhalte.

Optionen:

• 2, 3 oder 4 Spalten
• Unterschiedliche Spaltenbreiten
• Mobile-Verhalten (untereinander oder nebeneinander)
• Abstände zwischen Spalten

Tabs-Block

Organisieren Sie Inhalte in übersichtlichen Tabs.

Optionen:

• Unbegrenzte Anzahl Tabs
• Titel für jeden Tab
• Verschiedene Inhalte pro Tab

Verwendung:

• Öffnungszeiten nach Tagen
• Verschiedene Angebote
• FAQ-Kategorien

Akkordeon-Block

Aufklappbare Bereiche für FAQ oder umfangreiche Informationen.

Optionen:

• Mehrere aufklappbare Elemente
• Titel und Inhalt
• Standardmäßig geöffnet/geschlossen
• Nur einer oder mehrere gleichzeitig offen

Verwendung:

• FAQ-Seite
• Detaillierte Informationen
• Lange Texte strukturieren

Text-Blöcke

Text-Block

Klassischer Textbereich mit umfangreichen Formatierungsoptionen.

Optionen:

• Rich-Text-Editor
• Überschriften (H2-H4)
• Fett, Kursiv, Unterstrichen
• Listen und Nummerierungen
• Links
• Textausrichtung

Callout-Block

Hervorgehobene Hinweise oder wichtige Informationen.

Optionen:

• Verschiedene Typen (Info, Warnung, Erfolg)
• Icon
• Hintergrundfarbe
• Titel und Text

Verwendung:

• Wichtige Ankündigungen
• Hinweise
• Gebetszeiten-Highlight

Medien-Blöcke

Bild-Block

Einzelbilder mit optionalen Beschriftungen.

Optionen:

• Bild aus Medienbibliothek
• Bildunterschrift
• Alt-Text (für Barrierefreiheit)
• Verlinkung
• Größe und Ausrichtung

Text & Bild-Block

Kombinierter Block mit Text und Bild nebeneinander.

Optionen:

• Bild links oder rechts
• Verhältnis Text/Bild
• Hintergrundfarbe
• Button hinzufügen

Verwendung:

• Über uns Sektion
• Dienstleistungen vorstellen
• Team-Mitglieder

Interaktive Blöcke

Button-Block

Call-to-Action Buttons für Aktionen und Verlinkungen.

Optionen:

• Button-Text
• Link (intern oder extern)
• Stil (Primär, Sekundär, Outline)
• Größe
• Ausrichtung

Newsletter-Block

Anmeldeformular für Ihren Newsletter.

Optionen:

• Überschrift und Beschreibung
• E-Mail-Feld
• Bestätigungstext
• Integration mit E-Mail-Service

Social Links-Block

Verlinkungen zu Ihren Social-Media-Kanälen.

Optionen:

• Unterstützte Plattformen:
  • Facebook
  • Instagram
  • YouTube
  • Twitter/X
  • WhatsApp
  • Telegram
• Icon-Stil und -Größe
• Ausrichtung

Dynamische Blöcke

Diese Blöcke zeigen automatisch aktualisierte Inhalte.

News-Listen-Block

Automatische Anzeige Ihrer News-Artikel.

Optionen:

• Anzahl der News (1-10)
• Kategorie-Filter
• Anzeige-Stil (Karten, Liste)
• "Alle anzeigen" Link

Funktion:

• Zeigt automatisch die neuesten News
• Aktualisiert sich selbstständig
• Keine manuelle Pflege erforderlich

Event-Kalender-Block

Übersicht kommender Veranstaltungen.

Optionen:

• Anzahl der Events
• Kalender- oder Listenansicht
• Kategorie-Filter
• Zeitraum

Funktion:

• Zeigt anstehende Events
• Aktualisiert sich automatisch
• Vergangene Events werden ausgeblendet

Spezial-Blöcke

Karten-Block

Info-Karten für strukturierte Informationen.

Optionen:

• Anzahl der Karten
• Icon oder Bild
• Titel und Text
• Button/Link
• Hovereffekte

Verwendung:

• Dienste vorstellen
• Features auflisten
• Team präsentieren

Testimonials-Block

Zitate und Empfehlungen.

Optionen:

• Mehrere Testimonials
• Name und Position
• Profilbild
• Zitat-Text
• Karussell oder Raster

Block-Einstellungen

Allgemeine Einstellungen

Jeder Block hat gemeinsame Einstellungen:

• Abstand oben/unten: Vertikaler Abstand zum nächsten Block
• Hintergrund: Farbe oder Bild
• Sichtbarkeit: Auf bestimmten Geräten ausblenden
• CSS-Klasse: Für fortgeschrittene Anpassungen

Responsive Verhalten

Alle Blöcke sind für verschiedene Bildschirmgrößen optimiert:

• Desktop: Volle Darstellung
• Tablet: Angepasstes Layout
• Mobile: Optimierte Mobile-Ansicht

Best Practices

Struktur

• Beginnen Sie mit einem Hero-Block
• Wechseln Sie zwischen verschiedenen Blocktypen
• Nutzen Sie Callouts für wichtige Informationen

Konsistenz

• Verwenden Sie einheitliche Farben
• Halten Sie Abstände konsistent
• Nutzen Sie die gleichen Button-Stile

Performance

• Optimieren Sie Bilder vor dem Upload
• Vermeiden Sie zu viele Blöcke pro Seite
• Nutzen Sie Lazy Loading für Bilder

Nächste Schritte