Se stai usando il tema Divi per creare il tuo sito (ottima scelta!), sappi che ci sono due moduli nativi pensati proprio per mostrare i tuoi lavori: il modulo portfolio e il modulo portfolio filtrabile.

Entrambi ti permettono di dare spazio ai tuoi progetti, ma con una differenza importante:

• il modulo portfolio è perfetto per una presentazione semplice ed essenziale.
• il modulo portfolio filtrabile, invece, ti offre qualcosa in più: la possibilità di organizzare i tuoi progetti in categorie e farli filtrare con un semplice clic. Così chi visita il tuo sito potrà orientarsi meglio tra i tuoi lavori.

Di default, Divi mostra i progetti in una griglia a quattro colonne oppure in una colonna a tutta larghezza, a seconda del layout scelto (griglia o larghezza piena).

Ma se volessi personalizzare questo numero di colonne? Magari per avere solo due, oppure tre… o magari cinque o sei, per una griglia più fitta?

In questo tutorial ti guiderò passo dopo passo per farlo in modo semplice, utilizzando un po’ di CSS personalizzato.
Useremo il modulo portfolio e ti farò vedere come passare da 4 a 2, 3, 5 o 6 colonne, mantenendo il tutto responsive, cioè perfettamente adattabile anche su tablet e smartphone.

Pronta a metter mano al tuo portfolio e renderlo davvero tuo?

Sotto al video trovi i codici CSS che puoi copiare e incollare nel tuo sito per ciascuna configurazione

Ora, per poter modificare il numero di colonne del portfolio, dobbiamo assegnare una classe al modulo. Vai nella tab AVANZATE e in ID & CLASSI CSS inseriamo la classe specifica per ogni configurazione:

• portfolio-due-colonne
• portfolio-tre-colonne
• portfolio-cinque-colonne
• portfolio-sei-colonne

IMPORTANTE: per un buon risultato, nella tab CONTENUTI devi impostare un numero di post multiplo delle colonne che vuoi mostrare. Se hai due colonne mostra un numero pari di post, se ne hai 3 mostra 6, 9 o 12 post, ecc…

Dopo aver assegnato la classe opportuna al modulo portfolio filtrabile salva cliccando sul pulsante verde quindi apri le impostazioni di pagina cliccando sull’icona viola in basso al centro, quella con tre pallini, e poi sulla rotella. Vai in AVANZATE e poi in CSS personalizzato. Qui è dove puoi incollare il codice CSS che ti fornisco qui sotto, a seconda del numero di colonne che hai scelto.

/* Portfolio 2 colonne */
@media (min-width: 981px) {
  .portfolio-due-colonne .et_pb_grid_item {
    width: 47.25%!important;
    margin-right: 5.5%!important;
    }

  .portfolio-due-colonne .et_pb_grid_item:nth-child(3n) {
    margin-right: 5.5%!important;
    }

  .portfolio-due-colonne .et_pb_grid_item:nth-child(2n) {
    margin-right: 0!important;
    }

  .portfolio-due-colonne .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
    clear: none!important;
    }

  .portfolio-due-colonne .et_pb_grid_item.first_in_row {
    clear: unset;
    }
}

/* Portfolio 3 colonne */
@media (min-width: 981px) {
    .portfolio-tre-colonne .et_pb_grid_item {
        width: 29.66%!important;
        margin-right: 5.5%!important;  
    }
  
    .portfolio-tre-colonne .et_pb_grid_item:nth-child(3n) {
        margin-right: 0!important;
    }
  
    .portfolio-tre-colonne .et_pb_grid_item:nth-child(3n+1) {
        margin-right: 5.5%!important;
        clear: left !important;
    }
  
    .portfolio-tre-colonne .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        clear: none!important;
    }
    .portfolio-tre-colonne .et_pb_grid_item.first_in_row {
        clear: unset;
    }
}

/* Portfolio 5 colonne */
@media (min-width: 981px) {
    .portfolio-cinque-colonne .et_pb_grid_item {
       width: 15.6%!important;
       margin-right: 5.5%!important; 
    }
 
    .portfolio-cinque-colonne .et_pb_grid_item:nth-child(3n) {
       margin-right: 5.5%!important;
    }
 
    .portfolio-cinque-colonne .et_pb_grid_item:nth-child(5n) {
       margin-right: 0!important;
    }
  
    .portfolio-cinque-colonne .et_pb_grid_item.et_pb_portfolio_item:nth-child(5n+1) {
       clear: left!important;
    }
   .portfolio-cinque-colonne .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
       clear: none!important;
   }
 
   .portfolio-cinque-colonne .et_pb_grid_item.first_in_row {
       clear: unset;
   }
}

/* Portfolio 6 colonne */
@media (min-width: 981px) {
    .portfolio-sei-colonne .et_pb_grid_item {
        width:16%!important;
        margin-right: 5px!important;        
    }
  
    .portfolio-sei-colonne .et_pb_grid_item:nth-child(4n) {
        margin-right: 5px!important;
    }
  
    .portfolio-sei-colonne .et_pb_grid_item:nth-child(6n) {
        margin-right: 0!important;
    }
  
    .portfolio-sei-colonne .et_pb_grid_item.et_pb_portfolio_item:nth-child(6n+1) {
        clear: left!important;
    }
    .portfolio-sei-colonne .et_pb_grid_item:nth-child(4n+1) {
        clear: unset !important;
    }  
    .portfolio-sei-colonne .et_pb_grid_item.first_in_row {
        clear: unset;
    }
}