logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
  1. Home
  2. Libro Drupal
  3. 6. Drupal: Creazione di temi
  4. 6.1. Temi core di Drupal

6.1.1 - Creazione di un tema basato su Zen in Drupal 8

17/10/2025, by Ivan

Menu

Zen è il tema builder più popolare per Drupal. Se hai bisogno di creare rapidamente un design responsive per un sito basato su un layout a tre colonne, allora Zen è ciò che fa per te. Ti basta installarlo, eseguire npm install e Zen prepara per te la base del tuo design. Vediamo tutto passo per passo.

Scarica il tema padre Zen dal sito ufficiale:

https://www.drupal.org/project/zen

A partire da Drupal 8, possiamo posizionare i temi direttamente nella cartella /themes, quindi inseriamo lì la cartella del tema.

Nella cartella /themes/zen/STARTERKIT trovi un sotto-tema di esempio da cui puoi creare manualmente il tuo. Per farlo, devi sostituire ovunque la parola STARTERKIT con il nome del tuo tema e spostare la cartella del tuo nuovo sotto-tema fuori dalla cartella /themes/zen, in modo che, durante gli aggiornamenti di Zen, il tuo sotto-tema non venga sovrascritto. Tuttavia, è fortemente consigliato utilizzare Drush o un generatore di temi.

Per utilizzare il tema Zen, dobbiamo anche installare il modulo Components Libraries:

https://www.drupal.org/project/components

Attiviamo il tema Zen, ma non lo impostiamo come predefinito: imposteremo invece il nostro sotto-tema come tema predefinito più avanti. Esegui il seguente comando Drush:

drush zen drupalbook

Drush creerà per noi un sotto-tema chiamato drupalbook; puoi sostituire “drupalbook” con qualsiasi altro nome desideri per il tuo tema. Ora possiamo abilitare il nostro nuovo sotto-tema drupalbook come tema predefinito. Il tema funzionerà, ma sarà necessario abilitare i task di Gulp. Per farlo, è necessario installare Node.js:

https://nodejs.org/en/download/

Node.js può essere installato su Windows, Mac OS, Ubuntu e altri sistemi operativi.

Dopo aver installato Node.js, è necessario configurare anche il gestore di pacchetti per Node.js, ovvero npm:

https://docs.npmjs.com/getting-started/installing-node

Ora apri la console di PhpStorm e spostati nella cartella del tuo tema:

cd themes/drupalbook

Quindi esegui il comando per installare tutte le dipendenze di Zen:

npm install

Ora clicca con il tasto destro sul file gulpfile.js e seleziona Show Gulp Tasks:

drupal 8 zen

Inizialmente, tutti gli stili sono compilati e si trovano nella cartella /themes/drupalbook/components/asset-builds/css. Per scrivere nuovi stili, devi utilizzare file .scss; Gulp li ricompilerà automaticamente. Per fare ciò, esegui il task watch:css. In questo modo, quando modifichi un file SASS, Zen genererà automaticamente i file CSS (oppure potrai forzare la compilazione premendo Ctrl + S, modificando le impostazioni in PhpStorm).

Per modificare gli script JavaScript del tema, puoi utilizzare il file già incluso:

/themes/drupalbook/js/script.js

Il tuo sotto-tema basato su Zen per Drupal 8 è ora pronto per essere utilizzato e personalizzato:

drupal 8 zen

Durante l’installazione di Node.js, possono verificarsi errori legati a Gulp. Scrivi nei commenti se sei riuscito a configurare correttamente Zen.