Block Layout

Home → Erste Schritte → Blocklayout

Blocklayout

Das Blocklayout hilft bei der Erstellung einer einheitlichen Seitenstruktur. 

  1. Warum Blöcke verwenden?
  2. Blocklayout und Bereiche
  3. Blöcke platzieren
  4. Sichtbarkeit einstellen
  5. Benutzerdefinierten Block hinzufügen: Suchleiste
    5.1. Abschnitt
  6. Standardblock hinzufügen: Social Media Buttons

Drupal bietet eine Reihe von Standardblöcken, die im Blocklayout platziert werden können. Da diese nicht Teil von picturemaxx Drupal sind, finden Sie weitere Informationen auf der Drupal-Website.

1. Warum blöcke verwenden?

  • Navigieren Sie zu Struktur → Blocklayout um:

    • Wählen Sie einen Bereich der Website aus, um dort einen Block mit wiederverwendbaren Inhalten zu platzieren.
    • Verwenden Sie Standardblöcke (von Drupal vorgegeben) und/oder fügen Sie benutzerdefinierte Blöcke (von uns entwickelte Blöcke) hinzu.
    • Einfaches Verschieben eines Blocks im Layout per Drag'n'Drop.
    • Sie kontrollieren auf welchen Seiten Blöcke angezeigt werden und auf welchen nicht. 

  • Hier können Sie benutzerdefinierte Blöcke erstellen: Struktur → Blocklayout → Benutzerdefinierten Block 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.

    Mehr über die Bereiche, in denen die Blöcke platziert werden können, erfahren Sie im nächsten Schritt: 2. Blocklayout und Bereiche

    Bildschirmfoto der Seite Benutzerdefinierten Block hinzufügen

  • 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. 

    Mehr über die Bereiche, in denen die Blöcke platziert werden können, erfahren Sie im nächsten Schritt: 2. Blocklayout und Bereiche

    Bildschirmfoto der Seite 'Blocklayout'.

2. Blocklayout und Bereiche

Sie können Blöcke in den verfügbaren themenabhängigen Bereichen platzieren. Die entsprechenden Bereiche, die für das picturemaxx Base Theme zur Verfügung stehen, finden Sie auf den folgenden Reitern (Header, Navigation, etc.).

  • Dies ist die Seite zur Einrichtung des Blocklayouts der picturemaxx Drupal-Demoseite: 

    Bildschirmfoto des Blocklayouts der picturemaxx Drupal Demo Website

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

    Screenshot of the picturemaxx Drupal demo page, highlighting the Header Menu area.

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

    Screenshot of the picturemaxx Drupal demo page, highlighting the Header area.

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

    Screenshot of the picturemaxx Drupal demo page, highlighting the Navigation area.

    ​

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

    Screenshot of the picturemaxx Drupal demo page, highlighting the Header Suffix area.

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

    HINWEIS: Es wird empfohlen, diese Einstellung nicht zu ändern. 

    Screenshot of the picturemaxx Drupal demo page, highlighting the Navigation area.

  • 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.

    Screenshot of the picturemaxx Drupal demo page, highlighting the Content area.

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

    Screenshot of the picturemaxx Drupal demo page, highlighting the Content Suffix area.

  • 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. 

  • 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. 

    Screenshot of the picturemaxx Drupal demo page, highlighting the Footer area.

3. Blöcke platzieren

    1. Navigieren Sie zu Struktur → Blocklayout 
      HINWEIS: Nur das picturemaxx Base Theme ist für Ihre Einstellungen relevant. Ignorieren Sie bitte die Themes Claro, Seven und Gin.
    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. 
    4. Entscheiden Sie im Dialogfeld Block konfigurieren, ob der Titel angezeigt werden soll, legen Sie die Sichtbarkeit dieses Blocks fest, und überprüfen Sie den ausgewählten Bereich doppelt.

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

    1. Klicken Sie neben Header Suffix auf Block platzieren:

    Bildschirmfoto der Einrichtungsseite des Blocklayouts

     

    2. 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. 

    Bildschirmfoto der Einrichtungsseite des Blocklayouts

     

    3. 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. Wenn Sie hier keine Änderungen vornehmen, wird der Block standardmäßig auf jeder Seite Ihrer Website angezeigt. Mehr unter 6. Sichtbarkeit einstellen.
    • Klicken Sie auf Block speichern, um den benutzerdefinierten Block im ausgewählten Bereich anzuzeigen.
    Bildschirmfoto der Einrichtungsseite des Blocklayouts

     

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

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

    In Struktur → Blocklayout: 

    • einen Block per Drag & Drop an eine andere Position im Layout ziehen, oder 
    • wählen Sie eine Position aus der Dropdown-Liste in der jeweiligen Zeile.

    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.

     

  • Ändern Sie die Position eines benutzerdefinierten Blocks (Suchleiste)

4. 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 das Verfahren. 

  • Hide a default block of social media icons on a specific page. The same settings can be applied on any other block. 

5. Benutzerdefinierten Block 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.

Gehen Sie in der Hauptnavigation auf Struktur → Block Layout → benutzerdefinierten Block hinzufügen.  Sie haben die Wahl zwischen Awards, Basisblock und Suchleiste. Bitte klicken Sie auf Suchleiste.

  • Bildschirmfoto der Einrichtungsseite des benutzerdefinierten Blocks Suchleiste

     

  • 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 picturemaxx 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 picturemaxx BACKSTAGE definierten Klassifizierungen ein.
    HINWEIS: Erfordert einen BACKSTAGE API Key. Kontaktieren Sie uns unter support@picturemaxx.com für Details und eine Anleitung.

    Revisionsinformation
    Fügen Sie Kommentare zu den von Ihnen vorgenommenen Änderungen hinzu.

5.1. Benutzerdefinierten Block hinzufügen: Abschnitt

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.

Gehen Sie in der Hauptnavigation auf Struktur → Block Layout → benutzerdefinierten Block hinzufügen.  Sie haben die Wahl zwischen Awards, Basisblock und Suchleiste. Bitte klicken Sie auf Suchleiste.

  • Bildschirmfoto der Einrichtungsseite des benutzerdefinierten Blocks Abschnitt

     

  • 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: 

    Revisionsinformation
    Fügen Sie Kommentare zu den von Ihnen vorgenommenen Änderungen hinzu.

6. Standardblock hinzufügen: Social Media Buttons

    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 Sharing Buttons und klicken Sie auf Block platzieren, um ihn hinzuzufügen.

    Das folgende Video führt Sie durch das Verfahren. 

    HINWEIS: Shariff Sharing Buttons ist ein Drupal-Modul, das es den Nutzern einer Website ermöglicht, ihre Lieblingsinhalte zu teilen, ohne ihre Privatsphäre zu gefährden.

  • Fügen Sie dem Doormat-Bereich einer Website einen Standardblock mit Symbolen für soziale Medien hinzu:

Vor der Veröffentlichung der Website:

  • Klicken Sie auf Vorschau um sicherzustellen, dass alle Änderungen wie erwartet aussehen. 
  • Klicken Sie Zurück zum Bearbeiten des Inhalts
  • Wenn Änderungen auf Ihrer Website sichtbar sein sollen, müssen Sie das Häkchen bei Inhalt ist live (veröffentlicht) setzen.
  • Klicken Sie auf Speichern. Der Inhalt wird gespeichert und ist auf der Seite Inhalt zu finden.