Een portfoliogalerij maken.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een portfoliopagina: een gecentreerde kop, drie projecten naast elkaar elk met een omslagfoto en een resultaat van één regel, en een oproep tot actie. Gebruik hem om je werk in één oogopslag te tonen en link elk project aan zijn verhaal. Om één project uitgebreid te beschrijven, volg je Een klantverhaal schrijven.

De video bouwt een bureaupagina genaamd “Ons werk”.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een omslagfoto voor elk project, bijgesneden tot dezelfde verhoudingen.
  • De pagina is open in de builder. Ga voor een nieuwe naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page) en klik op Opslaan.
  • Nieuwe elementen belanden bovenaan hun kolom, dus elke omslagfoto gaat erin na zijn tekst.

Stap 1: de header toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out.
  2. Beweeg over de sectie en open More > Settings. Kies onder HTML-klassen de optie Align text center, en klik daarna op Opslaan.
  3. Klik op + op de sectie en kies Tekst op het tabblad Inhoud.
  4. Typ “Ons werk” als Kop 2, voeg één regel introductie toe en klik op Opslaan. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie SEO-vriendelijke pagina’s bouwen.

Stap 2: het projectraster toevoegen

  1. Beweeg over de sectie en klik op Sectie hieronder toevoegen. Open More > Settings, kies een lichtgrijze Achtergrond in het paneel Stijl en klik op Opslaan.
  2. Klik op + op de sectie en kies Rij; deze komt met twee gelijke kolommen. Klik op het rasterpictogram (Kolomindeling), kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.
  3. Klik op + in de eerste kolom en kies Tekst. Typ de projectnaam als Kop 3, voeg het resultaat van één regel toe en klik op Opslaan.
  4. Klik op + in dezelfde kolom en kies Afbeelding; deze belandt boven de tekst. Klik op Afbeelding selecteren, vink de omslagfoto aan en klik op Geselecteerde invoegen. Typ het alt-attribuut in het paneel SEO en klik op Opslaan.
  5. Herhaal voor de tweede en derde kolom.

Stap 3: de oproep tot actie toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen en open More > Settings. Kies Align text center onder HTML-klassen, daarna de paarse Achtergrond en witte Tekstkleur in het paneel Stijl. Klik op Opslaan.
  2. Klik op + op de sectie en kies Knop. Zet Titel op “Neem contact met ons op”, Link op /contact, Type op Light en Size op Large, en klik daarna op Opslaan.
  3. Klik opnieuw op + en kies Tekst; deze belandt boven de knop. Typ “Laten we samenwerken” als Kop 2 en voeg één regel toe. Zet Tekstkleur op wit in het paneel Stijl en klik op Opslaan.

Stap 4: opslaan en vooraf bekijken

  1. Klik op Opslaan op de werkbalk van de builder.
  2. Open het weergavemenu (het oogpictogram) en kies Voorvertoning.

Verder gaan

Niet getoond in de video:

  • Link elk project: zet bij de omslagfoto Afbeeldingslink naar de klantverhaalpagina.
  • Optillen bij hover: zet in het paneel Stijl van elke afbeelding Randradius op 4 en Slagschaduw op 1. Verhoog in Hoverstijl de Slagschaduw naar 3.
  • Meer projecten: voeg nog een Rij met dezelfde preset toe onder de eerste.

Maak het raster filterbaar

Het statische raster past bij een handvol projecten. Om bezoekers op type te laten filteren, sla je elk project op als inhoud en toon je ze met een view met een exposed filter. Views is deel van Drupal-core.

1. Het contenttype Portfolio aanmaken

  1. Ga naar Structuur > Contenttypen > Contenttype toevoegen (/admin/structure/types/add).
  2. Noem het “Portfolio” en sla op.
  3. Voeg op het tabblad Velden beheren een Afbeelding-veld toe met het label “Omslagafbeelding”.
  4. Voeg een veld Lijst (tekst) toe met het label “Projecttype” en waarden zoals web|Web, branding|Branding en campaign|Campaign.
  5. Maak een paar Portfolio-items bij Inhoud > Inhoud toevoegen > Portfolio.

2. De view bouwen

  1. Ga naar Structuur > Weergaven > View toevoegen (/admin/structure/views/add).
  2. Noem hem “Portfolio grid”; toon onder View-instellingen Inhoud van het type Portfolio.
  3. Vink Blok aanmaken aan, zet het weergaveformaat op Raster van velden en sla op.
  4. Voeg in de view-editor de velden Omslagafbeelding en Titel toe, en zet het raster in de formaatinstellingen op 3 kolommen.
  5. Klik onder Filtercriteria op Toevoegen, kies Projecttype en vink Deze filter tonen aan bezoekers aan. Noem het “Filteren op type”.
  6. Zet onder Geavanceerd Use AJAX op Yes. Exposed filters in een builderpagina werken alleen via AJAX.
  7. Sla de view op.

3. De view invoegen in de pagina

  1. Leeg in DXPR Builder de drie statische kolommen of voeg een nieuwe Rij toe.
  2. Klik op +, open het tabblad Drupal-views en kies View: Portfolio grid (Block).
  3. Vink in de instellingendialoog Exposed filters tonen aan en klik op Opslaan. Het raster toont met de dropdown “Filteren op type” erboven, en nieuwe Portfolio-items verschijnen vanzelf.
  4. Klik op Opslaan op de werkbalk van de builder.

Wat je ziet

De gecentreerde kop “Ons werk” opent de pagina. Op de grijze strook eronder staan drie projecten naast elkaar, elk een omslagfoto boven naam en resultaat. Een paarse strook sluit de pagina af met Neem contact met ons op.

Als je de pagina niet ziet zoals getoond

  • Een omslagfoto staat onder zijn tekst. De foto ging erin vóór de tekst, en nieuwe elementen belanden bovenaan hun kolom. Sleep de foto met de sleepgreep op de besturingsbalk boven de tekst.
  • De omslagen hebben verschillende hoogtes. De verhoudingen verschillen. Snijd ze bij tot dezelfde verhoudingen, upload ze opnieuw en kies de nieuwe exemplaren.
  • Portfolio grid staat niet op het tabblad Drupal-views. De view is uitgeschakeld, of je gebruikersprofiel voor de builder verbergt hem. Schakel hem in bij Structuur > Weergaven, of vraag een beheerder hem aan te vinken onder Weergaven in je gebruikersprofiel.
  • De editor toont “Turn on Ajax on this view to use exposed filters.” De view gebruikt geen AJAX. Zet Use AJAX op Yes onder Geavanceerd in de view-editor; zie Een element ziet er verkeerd uit of gedraagt zich verkeerd.
  • De dropdown “Filteren op type” ontbreekt. Exposed filters tonen staat uit op het element. Open de instellingen van het view-element, vink het aan en klik op Opslaan.

Wat nu?