Crea una galleria portfolio.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una pagina portfolio: un’intestazione centrata, tre progetti fianco a fianco ciascuno con foto di copertina e un risultato in una riga, e un invito all’azione. Usala per mostrare il tuo lavoro a colpo d’occhio e collegare ogni progetto alla sua storia. Per raccontare a fondo un progetto, segui Scrivi un caso di studio.

Il video crea una pagina di agenzia chiamata "Our work".

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene una foto di copertina per ogni progetto, ritagliate alle stesse proporzioni.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.
  • I nuovi elementi arrivano in cima alla loro colonna, quindi ogni foto di copertina va inserita dopo il suo testo.

Passaggio 1: aggiungi l’header

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Passa sopra alla sezione e apri More > Settings. In HTML classes scegli Align text center, poi fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Text dalla scheda Content.
  4. Digita "Our work" come Heading 2, aggiungi una riga di introduzione e fai clic su Save. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi Crea pagine SEO-friendly.

Passaggio 2: aggiungi la griglia dei progetti

  1. Passa sopra alla sezione e fai clic su Add Section Below. Apri il More > Settings della nuova sezione, scegli un Background grigio chiaro nel pannello Style e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Row; arriva con due colonne uguali. Fai clic sulla sua icona griglia (Column layout), scegli il preset 1/3 + 1/3 + 1/3 e fai clic su Save.
  3. Fai clic su + nella prima colonna e scegli Text. Digita il nome del progetto come Heading 3, aggiungi il risultato in una riga e fai clic su Save.
  4. Fai clic su + nella stessa colonna e scegli Image; arriva sopra il testo. Fai clic su Select Image, seleziona la foto di copertina e fai clic su Insert selected. Digita l’Alt attribute nel pannello SEO e fai clic su Save.
  5. Ripeti per la seconda e la terza colonna.

Passaggio 3: aggiungi l’invito all’azione

  1. Aggiungi una terza sezione con Add Section Below e apri il suo More > Settings. Scegli Align text center in HTML classes, poi il Background viola e il Font color bianco nel pannello Style. Fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Button. Imposta Title su "Contact us", Link su /contact, Type su Light e Size su Large, poi fai clic su Save.
  3. Fai di nuovo clic su + e scegli Text; arriva sopra il pulsante. Digita "Let's work together" come Heading 2 e aggiungi una riga. Imposta Font color su bianco nel pannello Style e fai clic su Save.

Passaggio 4: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Collega ogni progetto: imposta Image link sulla foto di copertina alla pagina del caso di studio.
  • Sollevamento al passaggio del mouse: nel pannello Style di ogni immagine imposta Border radius su 4 e Drop shadow su 1. In Hover style alza Drop shadow a 3.
  • Altri progetti: aggiungi un’altra Row con lo stesso preset sotto la prima.

Rendi la griglia filtrabile

La griglia statica va bene per una manciata di progetti. Per lasciare che i visitatori filtrino per tipo, salva ogni progetto come contenuto e mostrali con una vista che ha un filtro esposto. Views fa parte del core Drupal.

1. Crea il tipo di contenuto Portfolio

  1. Vai in Structure > Content types > Add content type (/admin/structure/types/add).
  2. Chiamalo "Portfolio" e salva.
  3. Nella scheda Manage fields, aggiungi un campo Image denominato "Cover image".
  4. Aggiungi un campo List (text) denominato "Project type" con valori come web|Web, branding|Branding e campaign|Campaign.
  5. Crea alcuni elementi Portfolio in Content > Add content > Portfolio.

2. Crea la vista

  1. Vai in Structure > Views > Add view (/admin/structure/views/add).
  2. Chiamala "Portfolio grid"; in View settings mostra Content di tipo Portfolio.
  3. Seleziona Create a block, imposta il formato di visualizzazione su Grid di fields e salva.
  4. Nell’editor della vista, aggiungi i campi Cover image e Title, e imposta la griglia a 3 colonne nelle sue impostazioni di formato.
  5. In Filter criteria, fai clic su Add, scegli Project type e seleziona Expose this filter to visitors. Denominalo "Filter by type".
  6. In Advanced, imposta Use AJAX su Yes. I filtri esposti in una pagina builder funzionano solo via AJAX.
  7. Salva la vista.

3. Inserisci la vista nella pagina

  1. Torna in DXPR Builder, svuota le tre colonne statiche o aggiungi una nuova Row.
  2. Fai clic su +, apri la scheda Drupal Views e scegli View: Portfolio grid (Block).
  3. Nella finestra delle impostazioni, seleziona Show exposed filters e fai clic su Save. La griglia si rende con il menu "Filter by type" sopra e i nuovi elementi Portfolio compaiono da soli.
  4. Fai clic su Save nella barra degli strumenti del builder.

Cosa vedi

L’intestazione centrata "Our work" apre la pagina. Sulla banda grigia sotto, tre progetti stanno fianco a fianco, ciascuno una foto di copertina sopra nome e risultato. Una banda viola chiude la pagina con Contact us.

Se non vedi la pagina come mostrata

  • Una foto di copertina sta sotto il suo testo. La foto è entrata prima del testo e i nuovi elementi arrivano in cima alla loro colonna. Trascina la foto sopra il testo dalla maniglia di trascinamento sulla sua barra dei controlli.
  • Le copertine hanno altezze diverse. Le loro proporzioni differiscono. Ritagliale alle stesse proporzioni, ricaricale e scegli le nuove copie.
  • Portfolio grid non è nella scheda Drupal Views. La vista è disattivata, oppure il tuo profilo utente builder la nasconde. Attivala in Structure > Views, oppure chiedi a un amministratore di selezionarla in Views nel tuo profilo utente.
  • L’editor mostra "Turn on Ajax on this view to use exposed filters." La vista non usa AJAX. Imposta Use AJAX su Yes in Advanced nell’editor della vista; vedi Un elemento sembra o si comporta male.
  • Manca il menu "Filter by type". Show exposed filters è spento sull’elemento. Apri le impostazioni dell’elemento vista, selezionalo e fai clic su Save.

E adesso?