Eine Portfoliogalerie erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Portfolioseite: eine zentrierte Überschrift, drei Projekte nebeneinander mit je einem Titelbild und einem einzeiligen Ergebnis und eine Aufforderung. Nutzen Sie sie, um Ihre Arbeit auf einen Blick zu zeigen und jedes Projekt mit seiner Geschichte zu verlinken. Um ein Projekt im Detail zu beschreiben, folgen Sie Eine Fallstudie schreiben.

Das Video baut eine Agenturseite namens „Unsere Arbeit“.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält für jedes Projekt ein Titelbild, auf dieselben Proportionen zugeschnitten.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page) und klicken Sie auf Save.
  • Neue Elemente landen oben in ihrer Spalte, sodass jedes Titelbild nach seinem Text hineinkommt.

Schritt 1: Den Header hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Wählen Sie unter HTML classes Align text center und klicken Sie dann auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content.
  4. Geben Sie „Unsere Arbeit“ als Heading 2 ein, fügen Sie eine Einleitungszeile hinzu und klicken Sie auf Save. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe SEO-freundliche Seiten erstellen.

Schritt 2: Das Projektraster hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Öffnen Sie das More > Settings des neuen Abschnitts, wählen Sie ein hellgraues Background im Panel Style und klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten. Klicken Sie auf ihr Grid-Icon (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie in der ersten Spalte auf + und wählen Sie Text. Geben Sie den Projektnamen als Heading 3 ein, fügen Sie das einzeilige Ergebnis hinzu und klicken Sie auf Save.
  4. Klicken Sie in derselben Spalte auf + und wählen Sie Image; es landet über dem Text. Klicken Sie auf Select Image, haken Sie das Titelbild an und klicken Sie auf Insert selected. Geben Sie das Alt attribute im Panel SEO ein und klicken Sie auf Save.
  5. Wiederholen Sie das für die zweite und dritte Spalte.

Schritt 3: Die Aufforderung hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes, dann das violette Background und Weiß als Font color im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Kontakt aufnehmen“, Link auf /contact, Type auf Light und Size auf Large, und klicken Sie dann auf Save.
  3. Klicken Sie erneut auf + und wählen Sie Text; er landet über dem Button. Geben Sie „Arbeiten wir zusammen“ als Heading 2 ein und fügen Sie eine Zeile hinzu. Setzen Sie Font color im Panel Style auf Weiß und klicken Sie auf Save.

Schritt 4: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.

Weiter gehen

Nicht im Video gezeigt:

  • Jedes Projekt verlinken: Setzen Sie den Image link auf dem Titelbild auf die Fallstudienseite.
  • Anheben bei Hover: Setzen Sie im Panel Style jedes Bildes Border radius auf 4 und Drop shadow auf 1. Erhöhen Sie in Hover style Drop shadow auf 3.
  • Weitere Projekte: Fügen Sie unter der ersten eine weitere Row mit demselben Preset hinzu.

Das Raster filterbar machen

Das statische Raster passt für eine Handvoll Projekte. Damit Besucher nach Typ filtern können, speichern Sie jedes Projekt als Inhalt und zeigen Sie sie mit einer Ansicht mit offengelegtem Filter. Views ist Teil von Drupal Core.

1. Den Inhaltstyp Portfolio erstellen

  1. Gehen Sie zu Structure > Content types > Add content type (/admin/structure/types/add).
  2. Nennen Sie ihn „Portfolio“ und speichern Sie.
  3. Fügen Sie auf dem Tab Manage fields ein Image-Feld mit der Beschriftung „Cover image“ hinzu.
  4. Fügen Sie ein List (text)-Feld mit der Beschriftung „Project type“ hinzu, mit Werten wie web|Web, branding|Branding und campaign|Campaign.
  5. Erstellen Sie einige Portfolio-Einträge unter Content > Add content > Portfolio.

2. Die Ansicht bauen

  1. Gehen Sie zu Structure > Views > Add view (/admin/structure/views/add).
  2. Nennen Sie sie „Portfolio grid“; zeigen Sie unter View settings Content vom Typ Portfolio.
  3. Haken Sie Create a block an, setzen Sie das Anzeigeformat auf Grid aus fields und speichern Sie.
  4. Fügen Sie im Ansichtseditor die Felder Cover image und Title hinzu und setzen Sie das Raster in seinen Formateinstellungen auf 3 Spalten.
  5. Klicken Sie unter Filter criteria auf Add, wählen Sie Project type und haken Sie Expose this filter to visitors an. Beschriften Sie ihn mit „Nach Typ filtern“.
  6. Setzen Sie unter Advanced Use AJAX auf Yes. Offengelegte Filter auf einer Builder-Seite funktionieren nur über AJAX.
  7. Speichern Sie die Ansicht.

3. Die Ansicht in die Seite einfügen

  1. Leeren Sie zurück in DXPR Builder die drei statischen Spalten oder fügen Sie eine neue Row hinzu.
  2. Klicken Sie auf +, öffnen Sie den Tab Drupal Views und wählen Sie View: Portfolio grid (Block).
  3. Haken Sie im Einstellungsdialog Show exposed filters an und klicken Sie auf Save. Das Raster rendert mit dem Dropdown „Nach Typ filtern“ darüber, und neue Portfolio-Einträge erscheinen von selbst.
  4. Klicken Sie in der Builder-Symbolleiste auf Save.

Was Sie sehen

Die zentrierte Überschrift „Unsere Arbeit“ eröffnet die Seite. Auf dem grauen Band darunter stehen drei Projekte nebeneinander, jedes ein Titelbild über seinem Namen und Ergebnis. Ein violettes Band schließt die Seite mit Kontakt aufnehmen.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Ein Titelbild sitzt unter seinem Text. Das Bild kam vor dem Text hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie das Bild am Zieh-Anfasser in seiner Kontrollleiste über den Text.
  • Die Titelbilder haben unterschiedliche Höhen. Ihre Proportionen unterscheiden sich. Schneiden Sie sie auf dieselben Proportionen zu, laden Sie sie erneut hoch und wählen Sie die neuen Kopien.
  • Portfolio grid ist nicht im Tab Drupal Views. Die Ansicht ist deaktiviert, oder Ihr Builder-Benutzerprofil blendet sie aus. Aktivieren Sie sie unter Structure > Views oder bitten Sie die Website-Administration, sie unter Views in Ihrem Benutzerprofil anzuhaken.
  • Der Editor zeigt „Turn on Ajax on this view to use exposed filters.“ Die Ansicht nutzt kein AJAX. Setzen Sie Use AJAX auf Yes unter Advanced im Ansichtseditor; siehe Ein Element sieht falsch aus oder verhält sich falsch.
  • Das Dropdown „Nach Typ filtern“ fehlt. Show exposed filters ist auf dem Element aus. Öffnen Sie die Einstellungen des Ansichtselements, haken Sie es an und klicken Sie auf Save.

Wie geht es weiter?