Blocklayout

Überblick

Blöcke sind wiederverwendbare Elemente, aus denen die Seiten Ihrer Website bestehen. Auf der Seite Blocklayout können Sie diese den Regionen des Themes zuweisen, platzieren und neu anordnen.

Grundlagen zu Blöcken

Navigieren Sie zu Struktur > Blocklayout. Hier können Sie:

• Bereiche Ihrer Website auswählen und dort einen Block mit wiederverwendbaren Inhalten platzieren.
• Standardblöcke und benutzerdefinierte Blöcke verwenden.
• Blöcke per Drag'n'Drop neu anordnen.
• festlegen, auf welchen Seiten Blöcke angezeigt werden.

Standardblöcke

Wenn Sie das Blocklayout öffnen, finden Sie eine von uns vorbereitete Struktur, die als Ausgangspunkt für Ihre Website dient. Hier finden Sie auch einige Standardblöcke, zum Beispiel:

• Header Menü
  Enthält die Anmelde- und Registrierungslinks und -symbole (obere rechte Ecke der Webseite).
• Language Switcher
  Wir haben den Sprachumschalter standardmäßig neben dem Kopfmenü platziert.
• Site branding
  Enthält das Logo Ihrer Website.
• Main navigation
  Wir haben die Hauptnavigation standardmäßig unter Navigation platziert.

Inhaltsblöcke

Hier können Sie benutzerdefinierte Blöcke erstellen: Inhalt > Blöcke > Inhaltsblock hinzufügen

• Abschnitt
  Ermöglicht das Hinzufügen verschiedener Absatztypen wie einen normalen Abschnitt, ein Formular oder einen Abstandshalter.
• Auszeichnungen
  Ermöglicht die Vergabe von Auszeichnungen für den Content Suffix Bereich.
• Basic Block
  Bietet ein Basislayout, das einen Titel und einen Textkörper enthält.
• Suchleiste
  Fügt eine Suchleiste für Ihren Webshop hinzu.

Blocklayout und Bereiche

Sie können Blöcke in den verfügbaren themenabhängigen Ihrer Website Bereichen platzieren. Die Bereiche legen fest, an welcher Stelle Inhalte auf der Seite angezeigt werden, beispielsweise im Header, im Navigationsbereich oder im Footer.

Um die Platzierung von Blöcken zu verwalten, navigieren Sie zu Struktur > Blocklayout. Dies ist die Seite zur Einrichtung des Blocklayouts der Demo Seite. Sie können diese als Ausgangspunkt verwenden und an die Anforderungen Ihrer Website anpassen.

Bereichsübersicht

Header-Menü

Die Blöcke Header-Menü und Language switcher (Sprachumschalter) werden standardmäßig im Bereich Header-Menü festgelegt.

Kopfzeile
Der Site branding Block wird standardmäßig in die Kopfzeile gesetzt.

Navigation
Die Main navigation (Hauptmenü) ist standardmäßig im Bereich Navigation eingestellt.

Header Suffix
Der Bereich Header Suffix bietet sich an, um benutzerdefinierte Blöcke (z.B. Suchleiste) zu platzieren.

Content Prefix
Wenn Sie sich als Administrator anmelden, erscheinen die Registerkarten des Bearbeitungsmenüs im Bereich Content Prefix.

Inhalt
Wie Sie auf dem Bildschirmfoto der Einstellungen sehen können, haben wir keine Blöcke im Bereich Inhalt platziert. Dieser Bereich ist für die meisten Websites individuell gestaltet, so dass ein standardisierter Block hier selten Sinn macht.

Content Suffix
Der Content Suffix Bereich ist ideal für die Platzierung von benutzerdefinierten Blöcken. Auf der Demo Seite haben wir hier ein Newsletter-Anmeldeformular platziert.

Doormat
Die Doormat (übersetzt Fußmatte) einer Website kann eine Site Map (Lageplan) oder ein Verzeichnis sein, das in der Regel am unteren Ende einer Seite erscheint, oft im Footer (Fußzeile) oder in unserem Fall direkt über dem eigentlichen Footer in unserem Blocklayout. Sie dient als Wegweiser, wenn eine Landing Page eine Reihe von Seiten enthält, auf die verlinkt werden soll.

Footer
Die Fußzeile einer Website ist der Bereich, den Sie ganz unten auf einer Website finden. Er bleibt in der Regel auf jeder Seite der Website gleich und enthält hilfreiche Informationen wie Kontaktdaten, Links zu wichtigen Seiten (z. B. Datenschutzrichtlinie oder Allgemeine Geschäftsbedingungen), Symbole für soziale Medien (Shariff Sharing Buttons) und manchmal eine Newsletter-Anmeldung.

Blöcke platzieren

Verwenden Sie Blöcke, um wiederverwendbare Inhalte und Funktionen zu verschiedenen Bereichen Ihrer Website hinzuzufügen, beispielsweise zum Header, zur Navigation, zum Inhaltsbereich oder zum Footer.

Blöcke in einem Bereich platzieren

1. Navigieren Sie zu Struktur > Blocklayout.
2. Suchen Sie den Bereich der Website (Kopfzeile, Inhalt usw.), in dem Sie den Block platzieren möchten.
   • Klicken Sie auf Block platzieren neben dem entsprechenden Bereich.
3. Filtern oder scrollen Sie im Dialogfeld Block platzieren die Liste der verfügbaren Blöcke, um einen gewünschten Block zu finden.
   • Klicken Sie auf Block platzieren neben dem entsprechenden Block.
4. Im Dialogfeld Block konfigurieren:
   • Aktivieren Sie Titel anzeigen, wenn der Blocktitel auf der Seite sichtbar sein soll.
   • Legen Sie die Sichtbarkeit dieses Blocks fest.
     • Wenn Sie hier keine Änderungen vornehmen, wird der Block standardmäßig auf jeder Seite Ihrer Website angezeigt.
   • Überprüfen Sie den im Dropdown-Menü Region ausgewählten Bereich doppelt.

Beispiel: Suchleiste platzieren

Zum Beispiel, um die Suchleiste unter der Kopfzeile der Seite zu platzieren:

1. Navigieren Sie zu Struktur > Blocklayout.
2. Klicken Sie neben Header Suffix auf Block platzieren.
3. Der Dialog Block platzieren listet alle Standardblöcke und benutzerdefinierten Blöcke auf. Suchen Sie einen gewünschten Block und klicken Sie auf Block platzieren.
4. Das Dialogfeld Block konfigurieren bietet folgende Optionen:
   • Titel anzeigen, um den Blocknamen als Titel des Blocks auf der Seite zu verwenden.
   • Sichtbarkeit, um die Sichtbarkeit des Blocks für bestimmte Seiten, Rollen usw. zu steuern. Mehr unter Sichtbarkeit einstellen.
5. Klicken Sie auf Block speichern, um den benutzerdefinierten Block im ausgewählten Bereich anzuzeigen.

Die Suchleiste wird nun auf jeder Seite der Website direkt unter der Hauptnavigation angezeigt.

Blockposition ändern

So platzieren Sie einen Block in einem anderen Bereich des Blocklayouts:

1. Navigieren Sie zu Struktur > Blocklayout.
2. Verschieben Sie den Block auf eine der folgenden Arten:
   • einen Block per Drag & Drop an eine andere Position im Layout ziehen, oder
   • wählen Sie eine Position aus der Drop-down-Liste in der jeweiligen Zeile.
3. Vergessen Sie nicht, Ihren Fortschritt zu speichern, indem Sie unten auf der Seite auf Blöcke speichern klicken.

Das folgende Video zeigt, wie Sie auf die Optionen zugreifen können.

Kurze Demo: Ändern Sie die Position eines benutzerdefinierten Blocks (Suchleiste)

Sichtbarkeit einstellen

Es ist sehr praktisch, Blöcke überall gleichzeitig anzeigen zu können. Auf manchen Seiten, möchte man aber die Möglichkeit haben eine Ausnahme zu machen.

So konfigurieren Sie die Sichtbarkeit von Blöcken:

1. Navigieren Sie zu Struktur > Blocklayout.
2. Wählen Sie auf der Seite Blocklayout einen Block aus und klicken Sie auf Konfigurieren.
3. Auf der Seite Block konfigurieren können Sie den Blocktitel ein- oder ausblenden und Ausnahmen für die Sichtbarkeit des Blocks hinzufügen:
   • Wählen Sie in der Liste Sichtbarkeit > Seiten aus und geben Sie Seitenpfade ein, um den Block auf diesen Seiten ein- oder auszublenden.

Das folgende Video führt Sie durch den Vorgang. Dasselbe Verfahren können Sie auch verwenden, um die Sichtbarkeit anderer Blöcke zu konfigurieren.

Kurze Demo: Social-Media-Symbole auf der Impressum-Seite ausblenden.

Blöcke hinzufügen

Je nach Bedarf können Sie benutzerdefinierte Inhaltsblöcke hinzufügen oder vorhandene Systemblöcke verwenden.

Inhaltsblock hinzufügen: Suchleiste

Um Ihnen zu zeigen, wie Sie zu Ihrer Website benutzerdefinierte Blocks hinzufügen können, benutzen wir eine Suchleiste, die Sie für die Suche in Ihrem Webshop verwenden können.

1. Gehen Sie in der Hauptnavigation auf Inhalt > Blöcke > Inhaltsblock hinzufügen. Sie haben die Wahl zwischen Abschnitt, Auszeichnungen, Basic block und Suchleiste. Bitte klicken Sie auf Suchleiste.
2. Legen Sie die folgenden Einstellungen fest:
   • Block-Beschreibung
     Fügen Sie einen kurzen Text hinzu, der Ihren Block beschreibt.
   • Suchfeld Beschriftung
     Geben Sie einen Leertext ein, der in Ihrer Suchleiste erscheinen soll, um Besucher zu motivieren, nach Ihren Bildern zu suchen, z. B. Suche nach...
   • Webgate-Such-URL
     Geben Sie die URL Ihres Webshops ein. Kontaktieren Sie picturemaxx Professional Services für einen entsprechenden Link: support@picturemaxx.com
   • Standard-Hintergrund verwenden
     Aktivieren Sie diese Option, um den in den Themeneinstellungen konfigurierten Standard-Hintergrund anzuwenden. Andernfalls wird der transparente Hintergrund auf den Block angewendet.
   • Am Anfang von Listen
     Aktivieren Sie die Option, um die Suchleiste in der gleichen Position zu fixieren, wenn der Benutzer nach unten scrollt.
   • Erweiterte Suche verwenden
     Aktivieren Sie die erweiterte Suche auf Basis der in Backstage gesetzten Filter und Klassifizierungen.
     HINWEIS: Erfordert den Backstage API Key und die Konfiguration der Standardeinstellungen (z.B. Website ID). Kontaktieren Sie uns unter support@picturemaxx.com für Details und eine Anleitung.
   • Autovervollständigung
     Richten Sie die Autovervollständigung auf Basis der in Backstage definierten Klassifizierungen ein.
     HINWEIS: Erfordert einen Backstage API Key. Kontaktieren Sie uns unter support@picturemaxx.com für Details und eine Anleitung.
   • Revisionsprotokollnachricht
     Fügen Sie Kommentare zu den von Ihnen vorgenommenen Änderungen hinzu.
3. Klicken Sie auf Speichern.

Inhaltsblock hinzufügen: Abschnitt

Sie können einen Abschnittztyp (z. B. Spalten, Texte & Medien oder Kontaktformular) an Ihre Anforderungen anpassen und auf Ihrer gesamten Website verwenden.
So erstellen Sie einen wiederverwendbaren Abschnitt-Block:

1. Gehen Sie in der Hauptnavigation auf Inhalt > Blöcke > Inhaltsblock hinzufügen > Abschnitt.
2. Legen Sie die folgenden Einstellungen fest:
   • Block-Beschreibung
     Fügen Sie einen kurzen Text hinzu, der Ihren Block beschreibt.
   • Sprache
     Wählen Sie den Sprachcode des benutzerdefinierten Blocks.
   • Abschnitt hinzufügen
     Die verfügbaren Absatztypen sind:
     • Spalten, Text & Medien
     • Eingebundene Google-Karte
     • FAQ-Gruppe
     • Kontaktformular
     • Abstandhalter
   • Revisionsprotokollnachricht
     Fügen Sie Kommentare zu den von Ihnen vorgenommenen Änderungen hinzu.
3. Klicken Sie auf Speichern.

Standardblock hinzufügen: Social Media Buttons

Sie können Social-Media-Buttons zu vordefinierten Bereichen Ihrer Website hinzufügen.

1. Gehen Sie zu Struktur > Blocklayout.
2. Scrollen Sie in der Liste nach unten zum Bereich Doormat, und klicken Sie auf Block platzieren, um die verfügbaren Blöcke anzuzeigen.
3. Suchen Sie nach Shariff-Teilen-Buttons und klicken Sie auf Block platzieren, um ihn hinzuzufügen.

Das folgende Video führt Sie durch das Verfahren.

Kurze Demo: Fügen Sie dem Doormat-Bereich einen Standardblock mit Symbolen für soziale Medien hinzu