In questa lezione vedremo come personalizzare il tema per adattarlo alla tua grafica e ai tuoi colori.

Vedremo come gestire le opzioni generali in ogni aspetto, dal logo, alla tipografia, ai bottoni, al banner pubblicitario, al pannello per gli aggiornamenti del tema, fino a tutti gli altri parametri configurabili.

Utilizzeremo lo strumento modificatore di tema per cambiare in tempo reale l'aspetto delle nostre pagine e vedremo come scegliere tra diversi tipi di layout, header e menu.

Con la nuova funzione Stili Mobile poi, vedremo come personalizzare i parametri di alcuni elementi per rendere il tuo sito perfetto per ogni device.

Dopo il modificatore di tema, capiremo lo strumento modificatore di moduli, che compie la stessa funzione del precedente, ma andando più nello specifico dei singoli elementi.

Hai una domanda su questa lezione?

Accedi al video corso


  1. Roberto
    Roberto dice:

    Buongiorno,

    Sto realizzando un sito x compra/vendita di barche e servizi nautici. Volevo realizzare una sezione con video corsi associando un plugin LMS.
    Potete darmi un consiglio se scegliere Divi o Avada e quale LMS usare? Grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Roberto,
      non esiste una risposta assoluta alla tua domanda.
      Un corso può essere fatto in tanti modi diversi.
      Per esempio solo con video, oppure anche con materiale di lettura, come un Pdf. Ci possono essere quiz. Si potrebbe volere il supporto (chat? ticket?).
      Si insomma, le possibilità sono davvero molte e di prodotti nuovi su questo argomento ne stanno uscendo ogni giorno.
      Essendo che questo rientra nella categoria dei progetti impegnativi (non è un sito normale con blog, per intenderci), allora dovrai dedicare il giusto tempo per fare test con diversi prodotti.
      Il tempo che dedicherai a questi test, lo risparmierai in seguito, magari evitando di ritrovarti a metà progetto con gli strumenti sbagliati.

      Detto questo ti consiglio la lettura dell’articolo Creare un sito di video corsi e venderli online.

      Per quanto riguarda il tema, sia Divi che Avada solo il top, quindi scegli quello che più ti piace.
      PS: parlando di landing page, ti ricordo che Divi ha la possibilità di fare AB split test su vari elementi della pagina. Non da poco.

      Buona giornata

  2. Andrea
    Andrea dice:

    Salve,
    prima di “fare danni” vorrei essere certo che le modifiche di visualizzazione apportate con con la funzione Stili Mobile non abbiano alcuna influenza su i parametri di visualizzazione della versione Desktop.
    Mi date conferma?
    Grazie.

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Andrea,

      a prescindere dalla domanda la cosa più importante che devi imparare per questo mestiere è avere una copia di backup. Ogni giorno affrontiamo problemi ed è impossibile avere delle garanzie, soprattutto in fase di development. Ogni sito è diverso, è installato su una macchina diversa, con database di diverse release, ecc… del futuro non c’è certezza, solo del passato, quindi il backup. La garanzia, in operazioni delicate e non, la ottieni in questo modo e non se te la diamo noi, altri tecnici o colleghi. Fondamentale.

      Altrettanto importante è avere a portata di mano un sito per i test.
      Se sto costruendo un sito online per un cliente e devo provare funzioni per cui ho il dubbio che “qualcosa di strano” possa succedere, allora mi faccio una copia del sito con duplicator, o in locale o in una sotto directory di test. Poi faccio il test e vedo che tutto fila liscio.

      Buona giornata

  3. Penelope
    Penelope dice:

    Buongiorno, ho iniziare a strutturare il sito ma non riesco a visualizzare il logo nella barra di navigazione, né in altro luogo, nonostante avessi inserito un logo in formato corretto e salvato le impostazioni.
    Inoltre da ieri sera non si visualizzano più le immagini del sito, ma solo righe di testo, ed il testo che avevo inserito… si vede bene solamente il negozio, Woo Commerce.
    Cosa ho sbagliato?

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Penelope,
      le cose che potrebbero essere andate storte sono centinaia e con gli elementi che mi dai mi è impossibile capire quale.
      Procediamo dal logo. Cosa è per te un “formato corretto”? Lo sei mai riuscita a vedere?
      Le righe di testo delle immagini cosa sono? i percorsi che portano alla foto come /wp-content/uploads/XXX?
      Quale hosting provider hai?

  4. Daniele
    Daniele dice:

    E’ possibile inserire a piè di pagina la freccia per tornare su, sul tema divi?
    E si è possibile, si può fare anche non utilizzando il piè di pagina di default?
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Daniele,
      puoi attivare il tasto dal menù di sinistra da Divi > Opzione Tema > Generale.

      Se scorri in fondi alla lista trovi Pulsante torna su, che è indipendente dal footer di default, si attiva in ogni caso.

      Buona giornata

  5. Andrea
    Andrea dice:

    sto sviluppando un sito con divi e ho un gran problema con la distanza tra moduli, in pratica ho creato dei normali riquadri per rendere intuitiva la navigazione e poi dalle impostazioni di riga ho personalizzato la distanza tra colonne… purtroppo però la distanza verticale non corrisponde alla distanza orizzontale! ho messo distanza tra colonne 2 perchè se si mette 1 la distanza si azzera ma mettendo distanza 2 i riquadri hanno una distanza minima sopra e sotto e una distanza più elevata tra destra e sinistra… se servisse un allegato per farle capire meglio il problema mi dica lei dove mandarglielo.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Con Divi gli spazi si possono personalizzare manualmente dalle impostazioni design di ogni Modulo Riga.

      Se vuoi azzerare le distanza sopra e sotto devi inserire un Padding = 0 per ogni lato.

      Poi puoi intervenire sul valore dei margini per distanziarli verticalmente.

      Se non dovessi riuscire da solo, ricorda sempre che puoi sfruttare i layout predefiniti di Divi.

      Nel tuo caso ad esempio, prova ad andare su Carica Layout > Premade Layouts e scegli Design Agency.

      La pagina Case Study credo che faccia al caso tuo.

      Buona giornata

    • Gianluca
      Gianluca dice:

      Ciao Daniele
      quella scritta si visualizza in automatico solo se scegli l’impostazione di menu con il logo centrato (probabilmente l’hanno inserita solo per una questione estetica perché solo il selettore al centro risulta un pò vuoto).

      L’unico modo per risolvere è intervenendo sul codice sorgente.

      Fai una ricerca su Google scrivendo Hiding Select Page Centered Menu Text Divi e vedrai che troverai le indicazioni su come fare.

      Buona giornata

  6. Daniele
    Daniele dice:

    Volevo chiedere come mai se inserisco il logo in opzioni tema, quando lo visualizzo in modalità tablet e/o mobile la qualità dell’immagine diventa scadente? ed è possibile impostare grandezze diverse per mobile – tablet – pc, parlo sempre del logo.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Daniele, non si può impostare grandezze differenti per i vari dispositivi, però puoi usare qualche accortezza:

      1. Inserisci un’immagine grossa il doppio di quanto vorresti che fosse il logo (così da supportare anche i monitor retina).

      2. Apri il Modificatore di Tema > Header > Barra di Menu Primario e imposta l’altezza massima del logo in relazione all’altezza del menu.

      3. Controlla l’altezza del menu quando rimane fisso nelle Impostazioni di Navigazione Fisse.

      Buona giornata

  7. Andrea
    Andrea dice:

    Salve, sto creando una landing page semplicissima per un sito che prima o poi verra costruito.
    Ho una sezione con sfondo, e ho 2 righe; una per il logo e una sotto a tre colonne e indirizzi.
    Vorrei che si centrassero sempre nella sezione come faccio?

    Vi lascio il link se volete vedere: beernbeard.com

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      quello che puoi fare è inserire una Sezione Standard con le due righe con logo e icone sotto.

      Nelle opzioni della sezione vai nella sezione Design e inserisci dei valori di padding in percentuale (25% in cima e 25% in fondo dovrebbero andare bene).

      In questo modo tutti i contenuti dovrebbero centrarsi nella schermata.

      Buona giornata

    • Andrea
      Andrea dice:

      Ho provato a fare come descritto ma niente, nella versione mobile il contenuto va fuori dalla sezione. Altre soluzioni.

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      il valore in percentuale del padding devi provare a variarlo in relazione ai contenuti che hai.

      Nel caso di un logo e 3 blocchi in linea è praticamente impossibile che si visualizzino tutti in una sola schermata da mobile e quindi lo scroll è inevitabile.

      Quello che puoi fare è creare una sezione dedicata visibile solo da mobile.

      Se apri le opzioni riga e vai su Avanzate puoi controllare la visibilità per ogni riga.

      Puoi quindi disattivare l’attuale per le versioni mobile e creare altre sezioni che saranno visibili solo da tablet e cellulare.

      In alternativa, puoi usare il modulo Sezione a larghezza intera > Intestazione a piena larghezza.

      È già pensato per essere fullscreen (Design > rendi a schermo intero); ha delle opzioni leggermente diverse rispetto alla grafica che avevi in mente ma puoi valutarlo come alternativa.

      Buona giornata

  8. Marica
    Marica dice:

    Ciao a tutti! Avrei una domanda: da dove è possibile impostare le famose 3 linee orizzontali che rappresentano il menù nella versione mobile del sito?
    Ho spulciato tutte le sezioni relative alle personalizzazioni del Tema Divi ma non riesco proprio a trovare la sezione dedicata a questo elemento.
    Dovrei semplicemente cambiare il colore perché per come è impostato di default è uguale al colore di sfondo del menù quindi non è visibile anche se è presente (infatti cliccandoci sopra apre normalmente il menù in versione mobile). Spero di essere stata chiara :D e grazie in anticipo per l’aiuto!

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Marica,
      Le impostazioni di colore le trovi in Modificatore di Tema > Stili Mobile > Menu per Mobile.

      Puoi impostare un colore di sfondo di background e il colore del testo e delle lineette.

      Buona giornata

    • Marica
      Marica dice:

      Ho appena controllato, nella sezione “Menu per Mobile” trovo solo due opzioni: “Colore del testo” e “Colore delle sfondo”.
      Quindi da lì non posso modificare le linee.
      Però facendo alcune prove ho notato che da “Impostazioni Generali” > “Impostazioni Layout” > modificando il colore dell’ultima voce “Colore dettagli tema” riesco a modificare le linee. Strano o corretto?

    • Gianluca
      Gianluca dice:

      Ciao Marica,
      la voce Colore del testo del Menu per Mobile, interviene sia sul testo che sulle lineette.

      La voce Dettagli del tema invece interviene anche su altri elementi della grafica, come ad esempio lo sfondo del menu di secondo livello, quindi se modifichi quel colore, controlla che il resto del sito sia corretto.

      Buona giornata

  9. Andrea
    Andrea dice:

    Scusate se approfitto ancora della vostra disponibilità.
    Sto creando un sito con DIVI ed ho inserito in una pagina il modulo E-Mail Optin
    Quando vado a testarlo, sul campo dove devo inserire la mail del mittente mi da sempre errore e mi dice che la mail non esiste. Ho provato ad inserire una mail di Gmail ed una mail aziendale.

    Vorrei poi anche chiederVi una delucidazione sui plugin per il tema DIVI. Da quanto vedo ci sono dei Plugin ufficiali e che sono compresi nell’acquisto del tema ma vedo anche in giro tanti altri plugin dedicati a DIVI e che sono a pagamento.
    La domanda è la seguente:

    Quali sono plugin ufficiali divi?
    Gli altri plugin che si trovano in giro sono affidabili?
    Esiste un modo per trovare tutti i plugin esistenti sia quelli ufficiali che gli altri a pagamento?

    Alla fine le domande sono tre, ma vi sarei grato se potreste darmi indicazioni in merito.

    Grazie.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      il modulo email optin serve per collegare il tuo sito a servizi dedicati all’invio newsletter come Mailchimp, quindi per poterlo utilizzare devi prima di tutto creare un account (su Mailchimp gratuito per i primi 2000 iscritti).

      Se invece ti serve inserire un sistema per ricevere semplici comunicazioni dal sito, devi utilizzare il modulo di contatto.

      Per quanto riguarda i plugin invece, la Elegant Themes ha realizzato “solo” quelli disponibili nella tua area riservata, ma tutti i plugin gratuiti o a pagamento che trovi su marketplace come Themeforest, sono assolutamente compatibili anche con Divi.

      Per quanto riguarda l’affidabilità, devi sempre fare riferimento ai valori di vendita e di valutazione degli utenti, ma in genere i prodotti più sicuri sono quelli a pagamento, sopratutto per la garanzia di continuità di aggiornamenti e di supporto.

      Se ti serve un plugin particolare facci sapere di cosa hai bisogno e faremo una ricerca per te,
      Buona giornata

    • Andrea
      Andrea dice:

      Gianluca grazie come sempre per la risposta.
      In effetti hai ragione infatti ho utilizzato il modulo di contatto.
      Come dicevo non mi prende l’indirizzo mail
      Quando chiede di inserire l’ID per quel campo a cosa si riferisce?

      Grazie ancora.

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      in che senso non ti prende l’indirizzo mail?

      La mail a cui vuoi ricevere i messaggi la devi inserire nella tab Contenuti e non dovrebbe causare problemi.

      Il campo ID si trova invece nella tab Avanzate, ma è un’opzione che serve agli sviluppatori per personalizzare il modulo con codice css, quindi lascialo pure vuoto.

      Buona giornata

  10. Andrea
    Andrea dice:

    Ciao Gianluca, ho realizzato delle pagine ,ma nella versione mobile i contenuti non sono impostati o allineati in maniera omogenea. c’è possibilità di intervenire direttamente sulle singole pagine e impostare/sistemare i contenuti visibili poi da smart phone e tablet?
    grazie
    Andrea

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      certo che c’è questa possibilità.

      Nel semplice modulo dei titoli o del testo, ad esempio, appare l’icona di un telefono a fianco al valore della grandezza del font.

      Se la premi vedrai che puoi impostare differenti misure a seconda del device.

      Lo stesso discorso vale per tutti gli altri moduli che hanno parametri personalizzabili per i diversi dispositivi, trovi sempre la stessa icona.

      Nella tab Avanzate dei moduli invece controlli la visibilità che puoi decidere a piacimento, quindi puoi realizzare delle sezioni visibili sono da desktop e altre visibili solo da mobile.

      Altri parametri per la gestione del mobile li trovi anche nel Modificatore di Tema.

      Se vuoi un controllo più immediato per tablet e smartphone ti consiglio anche di utilizzare il builder visivo con cui sarà più facile intervenire sui singoli elementi nelle varie visualizzazioni.

      Buona giornata

    • Vittorio
      Vittorio dice:

      Ciao Gianluca, ho una domanda per quanto riguarda l’impostazione delle immagini della galleria e di una pagina blog. Ho creato un modulo galleria impostando il layout a griglia creandomi una divisione delle immagini in una riga con 4 immagini ( 4 colonne). Come posso cambiare le dimensioni e il numero delle colonne da 4 a 6/8/10 ecc. Stessa cosa per quanto riguarda la pagina blog. I post del blog vengono divisi nella pagina in 3 sezioni ( o colonne) come posso variare anche qui il numero delle colonne e la loro dimensione? spero di essermi spiegato. Grazie
      Vittorio

    • Gianluca
      Gianluca dice:

      Ciao Vittorio
      innanzitutto per la galleria di immagini ti consiglio di abilitare la voce Attiva galleria Divi che trovi in Opzioni Tema > Generali.

      In questo modo potrai sfruttare tutte le opzioni disponibili.

      Detto questo, di default, il modulo galleria è pensato per una griglia di 4 colonne e non ci sono ancora settaggi “manuali” per modificarne il numero.

      È però possibile intervenire tramite css. Ecco un articolo sul blog della Elegant Themes che spiega come fare.

      Lo stesso discorso vale per il blog, le colonne sono pensate per essere il più leggibili possibile, ma volendo si può intervenire con il codice per modificarne l’aspetto.

      Se fai una ricerca in rete troverai, a seconda di quello che devi fare, diversi post che forniscono il codice corretto, come quello di Elegant Enthusiast o Divisoup.

      Buona giornata

  11. Giuseppa
    Giuseppa dice:

    Salve Lorenzo,
    ho previsto alla fine della home page il modulo di contatto che è presente in Divi, ma vorrei inserire una checkbox con la dicitura” acconsento al trattamento dei miei dati personali ai sensi del…etcc. E’ possibile crearla utilizzando un CSS?
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Giuseppa,
      non ti serve utilizzare i css. Nel modulo contatto di Divi puoi inserire direttamente sia i checkbox che i radio button, che i menu a tendina.

      Trovi tutte le impostazioni in Opzioni Campo > Tipo.

      Se non dovessi visualizzarle, prova ad aggiornare il tema, perché è probabile che tu abbia una versione che ancora non li comprendeva.

      Buona giornata

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      non è obbligatorio stabilire le categorie, dipende dal tipo di sito che devi realizzare.

      Se però ti occupi di più attività è consigliabile farlo, in modo da avere tutto organizzato e in ordine.

      Inoltre, se li suddividi per categoria, puoi anche utilizzare il modulo Portfolio filtrabile per far selezionare all’utente solo categorie specifiche.

      Buona giornata

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Quello non è un carosello per una galleria di immagini.

      Quelli che vengono recuperati nell’esempio che mi fai vedere sono gli Elementi di Portfolio.

      Una volta che inserisci i vari lavori li puoi mostrare con il modulo Portfolio.

      Se vuoi farli vedere a piena larghezza trovi il modulo Portfolio nella sezione viola a larghezza intera.

      Buona giornata

  12. Andrea
    Andrea dice:

    Buongiorno, ho una galleria fotografica da inserire nel sito e vorrei utilizzare sia l’opzione full width layouts con il carousel, e anche la Gallery layouts co l’opzione gallery grid, ma non ho capito come impostarle!
    Le foto dove vanno inserite e inoltre quali sono i moduli da utilizzare?
    grazie
    Andrea

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Per entrambe le opzioni, il modulo da utilizzare si chiama Galleria, ma è disponibile solo inserendo una Sezione Standard.

      Nella tab design del modulo Galleria, dovrai poi impostare il layout (a Griglia o Slider), l’orientamento delle foto, le spaziature etc.

      Per rendere la galleria a piena larghezza invece devi intervenire sulle Opzioni della Riga.

      Clicca sulle tre lineette della sezione verde e, nella tab Design, attiva l’opzione Rendi questa colonna a larghezza intera.

      Buona giornata

    • Andrea
      Andrea dice:

      Ciao Gianluca, sono riuscito a impostare la Gallery layouts con l’opzione gallery grid, ma non sono riuscito per l’opzione full width layouts con il carousel.
      Cortesemente mi daresti un’indicazione su come impostarla?
      ti ringrazio in anticipo
      Andrea

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Se con Carosello intendi la seconda opzione oltre alla griglia (quella chiama spider) il funzionamento è lo stesso, imposta la riga a larghezza intera ed elimina padding e margini dai lati in modo che l’immagine occupi tutto lo spazio.

      Buona giornata

  13. Andrea
    Andrea dice:

    Buongiorno Gianluca, in merito al logo, è solo lui che si ridimensiona quando scorre la pagina. Volevo sapere se è presente l’opzione che non lo ridimensiona?
    grazie
    Andrea

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Il logo si dimensiona a seconda delle dimensioni che inserisci nell’altezza della barra di Navigazione Fissa.

      Come ti dicevo, puoi provare a disabilitarla da Divi > Opzioni Tema > Barra di Navigazione Fissa, altrimenti l’unica alternativa e aumentare l’altezza della barra nel modificatore di tema.

      Buona giornata

    • Andrea
      Andrea dice:

      Buongiorno Gianluca, ho realizzato un modulo di contatti.Volevo chiederti se c’è la possibilità di inserire un testo come per esempio “Con l’invio del presente modulo acconsento al trattamento dei dati unicamente per la richiesta in oggetto. Consenso esplicito secondo il D.Lgs 196/2003.
      Leggi l’informativa sulla Privacy” e la possibilità mettere il ceck di linkare alla pagina privacy?

      inoltre è possibile salvare il layout del sito che stò realizzando in libreria e poterlo poi utilizzare per altri progetti simili installandolo su altri domini/hosting?
      grazie
      Andrea

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      purtroppo non è possibile inserire un ulteriore link al semplice testo, perché puoi abilitare il checkbox anche cliccando sulla scritta.

      Visto che c’è già un link inserito, non si possono aggiungere altri collegamenti tramite html.

      Se vuoi più libertà da questo punto di vista puoi usare contact form 7, ma dal punto di vista grafico è decisamente meno personalizzabile.

      Per la seconda domanda la risposta è si, puoi salvare i layout delle singole pagine.

      Ti basta cliccare sulle due freccine nella barra in alto del builder Divi, dare un nome al tuo layout e esportarlo.

      In questo modo viene salvato un file JSON che puoi importare nel builder di ogni altro sito realizzato con Divi.

      Buona giornata

  14. Andrea
    Andrea dice:

    Buongiorno, volevo chiederVi se è possibile centrare il testo che viene inserito nel piè di pagina? Io ho provato inserendo anche il tag ma la modifica non è avvenuta e il testo è sempre sulla sinistra.
    Inoltre quando la pagina scorre verso il basso il logo si ridimensiona. E’ presente l’opzione che non modifica il logo?
    grazie
    Andrea

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Non è possibile con le opzioni di default, ma c’è sempre il modo di inserire del codice personalizzato.

      In casi come questi, quello che devi fare è cercare su Google (preferibilmente in inglese) se c’è qualche sito che ha già la soluzione pronta.

      Facendo una ricerca con “center divi footer text” ho trovato un articolo che ne parla.

      Per quanto riguarda la dimensione della barra del logo quando si scorre la pagina (che puoi disabilitare dalle opzioni generali), puoi controllare la sua altezza dal Modificatore di Tema > Header e Navigazione > Impostazioni di Navigazione Fisse.

      Buona giornata

  15. info120
    info120 dice:

    Buongiorno, volevo chiederVi come si impostano le dimensioni per le slider?
    Per esempio io sul sito che devo realizzare ho la slider che è 1920 per 800 px, e caricandola mi viene tagliata.
    grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Le dimensioni delle slide non devi considerarle “fisse” perché a seconda della risoluzione del monitor o del dispositivo su cui le visualizzi, le immagini si dovranno adattare.

      È quindi un bene utilizzare immagini sufficientemente grandi (1920 pixel di larghezza sono perfetti).

      Per regolarti con le proporzioni in altezza invece, non ci sono regole specifiche, dipende dal tipo di immagine che vuoi dare.

      Immagini di 800 pixel di altezza vanno bene per slider a piena pagina, ma se ti serve uno slider in formato più cinematografico ad esempio, il mio consiglio è di ritagliare le immagini in altezza prima di caricarle nel pannello media.

      In questo modo partirai già con immagini più proporzionate.

      Volendo però, puoi anche provare a giocare con le immagini che hai già inserito, modificando le Impostazioni generali della slide (con i padding in alto e in basso nelle Opzioni Avanzate di Design o con padding e margini per le singole slide).

      Oppure, sempre nella sezione Contenuti delle singole slide, puoi cambiare le impostazioni di visualizzazione dello sfondo modificando la dimensione dell’immagine (coperchio, fit o dimensione reale) e la sua posizione.

      Se vuoi avere più possibilità di gestione delle dimensioni e di personalizzazione delle slide, puoi anche usare uno plugin specifico come quelli che mostriamo nel Corso Slider Animati.

      Buona giornata

  16. elmax22
    elmax22 dice:

    Ciao. Non riesco a capire bene su una cosa riguardo a Stili Mobile.
    Agendo sulle regolazioni per ingrandire ad esempio un font, il carattere diventerà effettivamente più grande in tutte le versioni del sito, anche cioè quando sarò in visualizzazione desktop, o la nuova grandezza del font sarà applicabile solo alla visualizzazione con il telefonino o tablet?
    Per dirlo diversamente: se modifico la pagina per come appare in Stili Mobile, modificherò anche la versione desktop o i due livelli sono gestiti separatamente?
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Massimo,
      gli Stili Mobile servono proprio per ottimizzare gli elementi per i diversi dispositivi.

      Quindi puoi stabilire una dimensione indipendente per il testo del desktop, una per quella dei tablet e una per gli smartphone.

      Buona giornata

  17. Stefania
    Stefania dice:

    Ciao, non so darmi una risposta definitiva.
    Ottimizzazione foto , non ho capito se in elegant hanno qualcosa a riguardo o se per alleggerire foto e ottimizzarle seo devo ricorrere a strumenti esterni al tema.
    Grazie

    Rispondi
  18. Vittorio
    Vittorio dice:

    Ciao, ho provato a usare il modificatore dei tema e stile mobile ma l’aspetto non cambia in tempo reale ma devo prima salvare tutto. C’è qualche impostazione che va attivata?

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Vittorio,
      no, non c’è nessuna impostazione particolare da attivare.

      Le opzioni degli stili mobile che puoi controllare dal Modificatore di tema > Stili Mobile riguardano prevalentemente le altezze delle sezioni e le dimensioni dei font.

      Una volta che attivi il modificatore, a seconda che tu stia controllando la visualizzazione per tablet o quella dei cellulari, vedrai che la pagina si riduce in dimensioni e puoi vederne l’anteprima in tempo reale.

      Il consiglio comunque è di salvare e di verificare sempre su un cellulare o su un tablet che tutto sia perfetto.

      Ricorda anche che puoi modificare la modalità di visualizzazione per i diversi device anche all’interno del builder tradizionale o del builder visivo, basta che premi l’icona del cellulare (dove presente) e ti si aprirà un sottomenu dedicato.

      Buona giornata

  19. William Vincenzo Marino
    William Vincenzo Marino dice:

    Ciao, buongiorno,
    avrei un problema col menu di navigazione e spero di essere chiaro nella spiegazione.
    Quando sono nella Home Page del sito, il menu di navigazione funziona bene; quindi se col cursore, ad esempio, vado sulla voce “Pubblicazione”, mi appare il menu a tendina con le varie voci e se continuo a navigare, mi mostra un ulteriore sottoelemento – per intenderci: Pubblicazione/Nome Rivista/Numero 1, 2, 3 e così via fino al numero 50. Li vedo tutti!
    Il problema sorge quando clicco la voce “Pubblicazione”; mi si apre la pagina e vedo il contenuto, ma se poi col cursore vado a vedere i sottoelementi, il menu a tendina non appare completo – per intenderci: Nome Rivista/Numero, 1, 2, 3 e basta.
    William

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao William,

      ci stai riportando qualcosa che non possiamo né vedere né verificare, visto che probabilmente è il tuo sito.
      Gentilmente mi dovresti passare il link, altrimenti è impossibile aiutarti.

      Grazie

    • William Vincenzo Marino
      William Vincenzo Marino dice:

      Ciao Lorenzo,

      il sito è xxxx e uso Divi

      Se col cursore vai su “Pubblicazioni” e poi su “Indice Generale Rivista Contrappunto”, i numeri che puoi vedere arrivano fino al 10/11, ma in totale sono 54.
      Se scorro verso il basso, va giù la pagina del sito, ma non l’indice.
      Lo stesso problema si ripresenta in “L’Associazione/Soci Della AFPP/Profili Professionali dei Soci Ordinari.

      Ne approfitto per chiederti un ulteriore aiuto.
      Riguardo sempre al solito argomento, queste lunghe liste non sono belle esteticamente; se sono nella home page o apro la pagina dal cellulare devo scorrere a lungo il menu.
      Cosa mi suggerisci di fare?
      Io pensavo di lasciare il solito menu a tendina e modificare una sotto-finestra (perdona il mio vocabolario); ad esempio, andare col cursore su pubblicazione/indice generale rivista contrappunto, vedere la sotto-finestra fino al numero 10 e poi col cursore scorrere fino alla fine dei numeri.
      Spero di essermi spiegato…

      Grazie
      William

    • Lorenzo
      Lorenzo dice:

      Ciao William,

      vedo che c’è proprio un errore di progettazione del menu.
      Stai cercando di inserire nei menu ogni singola pagina che hai pubblicato.

      Non puoi avere 3 o 4 livelli di sottomenu che fra l’altro contengono una ventina di voci.
      Prova a guardare in giro per il web. Hai mai visto un menu di questo tipo? No. Proprio perché va contro ogni legge di usability possibile.
      Giustamente, come anche tu hai sottolineato, dal mobile risulta impossibile una navigazione corretta.

      Quindi non devi avere più di un sottomenu. Al limite, ma proprio se non trovi altre soluzioni, inseriscine due.
      O meglio puoi fare degli esperimenti con il mega menu (leggi questo articolo in cui mostriamo anche un sottomenu con DIVI).

      Devi quindi ragionare sulla struttura delle pagine per fare arrivare l’utente ad ogni sezione del tuo sito.
      Per esempio hai Associazione > Soci > Profili Ordinari e poi la lista completa di tutti questi profili. Sbagliato.
      Nel menu inserirei: Associazione > Soci e basta.
      Soci è una pagina divisa in diverse sezioni: Onorari, Fondatori, Ordinari.
      Quindi hai il titolo, per esempio Soci Onorari e sotto i relativi nomi, magari con foto di anteprima. Questa foto, o il nome del socio, sono linkate alla pagina personale del socio.
      Segue l’altro titolo, Soci Fondatori e sotto i nomi dei relativi soci. Ecc…

      Altro esempio sono le pubblicazioni. Hai inserto tutte le pubblicazioni nel menu.
      Prova ad immaginare se nel nostro blog, qui su Webipedia, avessimo inserito nel menu principale il titolo di ogni articolo.
      In questo caso basta la pagna “indice generale” che sarebbe un po’ come la nostra pagina tutti gli articoli, dove l’utente ha la possibilità di vedere tutte le pubblicazioni che avete fatto.

      Buona giornata

    • William Vincenzo Marino
      William Vincenzo Marino dice:

      Grazie mille, Lorenzo, mi sento alleggerito dal tuo consiglio!

      Buona giornata anche a te

  20. vittoria777
    vittoria777 dice:

    CIAO, grazie mille per i video, molto interessanti.
    Vorrei togliere il logo dalla struttura del menu, mah non riesco, come posso fare?

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Vittoria,
      inserire il tuo logo nel sito è importante.
      Vai Divi > Opzioni Tema > Genrali e caricalo alla voce Logo.
      Se, invece proprio non lo vuoi, allora vai in Divi > Modificatore di Tema > Header e Navigazione > Barra Menu Primario > e attiva la seconda voce che è “Nascondi Immagine Logo”.

      Buona giornata

  21. MARIA JOSE IGLESIAS
    MARIA JOSE IGLESIAS dice:

    Ho due problemi con Divi:
    1) Ho creato alcuni box di testo ai quali ho dato una piccola formattazione con css per arrotondare il bordo. Ora succede che mentre la visualizzazione su schermo da computer è ottima, con cellulare invece il box si stringe fino all’inverosimile fino al punto di rendere impossibile la lettura. Perché questo? Non mi sembra che io debba intervenire con css per indicare la misura del box in em anziché in pixel, no?
    2) A volte mi succede (anzi spesso!) che editando testo con Divi Builder visuale, mi si creano un sacco di spazi fra i paragrafi. Li tolgo con l’editore di testo ma poi ne compaiono altri! E alla fine mi trovo con tutto spostato. Premetto che sto incollando il testo da Word ma senza formattazione, con solo testo, ma il problema non si risolve. Mi sapete dire perché? Grazie per qualsiasi aiuto. Un caro saluto.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Maria,
      se ci sono dei problemi di visualizzazione è probabile che il tuo css sia corretto per la versione desktop ma che crei qualche problema con gli altri device.

      Ho trovato infatti un articolo sul blog della elegant themes che offre tutto il codice per creare i bordi arrotondati.

      In casi come questi, ti consiglio di chiedere anche supporto direttamente agli sviluppatori, che ti daranno una dritta su quello corretto da utilizzare.

      Per evitare che si creino spazi tra i paragrafi, ti consiglio di non copiare mai il testo da word (anche se non formattato), ma di utilizzare un semplice editor come notepad o text edit.

      Poi, quando incolli il testo, fallo nella tab dell’editor testuale, così è tutto sicuramente pulito e procedi a tutte le formattazioni con quello visuale.

      Buona giornata

  22. MARIA JOSE IGLESIAS
    MARIA JOSE IGLESIAS dice:

    Ciao! Ho cancellato per errore una sezione nella quale avevo lavorato per ore! C’è qualcosa che possa fare per ripristinarla? Non l’avevo salvata nella libreria. :-(

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Maria,
      in Divi c’è un’opzione per navigare nello storico delle azioni.

      Premi l’ultima icona sulla destra nel Builder (le tre lineette in verticale con la freccia verso l’alto).

      Dovresti poter tornare indietro alle azioni precedenti.
      Buona serata

    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      con i moduli di default non è possibile ma, se non vuoi usare un plugin, prova a fare una ricerca scrivendo “Divi Polls Layout” su Google, ci sono alcuni sviluppatori che li hanno creati.

      Buona giornata

    • Gianluca
      Gianluca dice:

      Ciao Michele,
      anche Divi ha la funzione portfolio, solo che si chiama Progetti, la trovi nel menu di sinistra.

      Per richiamare tutti gli elementi portfolio che inserisci nelle tue pagine, ci sono i moduli Portfolio e Portfolio Filtrabile nel builder visivo.

      Buona giornata

  23. Luigi
    Luigi dice:

    Salve
    Grazie per i consigli e vedremo di fare il possibile per metterli in pratica, ho un problema con stili mobile, non si riesce a vedere i menu, quando dovrebbero scalare spariscono, ho mancato di attivare qualcosa?

    Saluti

    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Luigi,
      in realtà il menu si vede, solo che i tasti si compattano in un menu espandibile.

      Puoi provare cliccando nella parte in alto a destra della barra del menu e vedrai che si apre con tutte le voci sotto.

      Probabilmente hai solo inserito il colore bianco su bianco e quindi non lo vedi.

      Prova a modificare il codice colore e vedrai che appariranno le 3 lineette del menu.

      Buona giornata

  24. Luigi
    Luigi dice:

    Salve
    Io non ho copiato, ho solo fatto rif. a firebug, della regola css presente in style.css, ma dato che un tema cosí reclamizzato non permette di modificare questo dato, non rimane che intrvenire sul css, devo ametterlo sono un pò deluso da questo template, pensavo permettesse più opzioni, il fatto poi che per i menu i font sono pochi, io vorrei aggiungere altri ma devo installare un plugin, mentre sui moduli i font sono molti di più perchè?

    Comunque Lorenzo non mi hai risposto alla domanda, dove posso modiificare font-weight e portarlo da 300 a 400 se dal pannello divi non viene permesso?

    Saluti

    Luigi

    Rispondi
    • Lorenzo Novia
      Lorenzo Novia dice:

      Ciao Luigi,

      la risposta è la stessa di prima, ovvero vai in Theme Options > Custom CSS e inserisci il codice CSS per modificare il weight del menu.
      Il codice che hai postato prima lo devi inserire senza “in line 2”, che non fa parte del codice CSS.

      Tramite i CSS puoi arrivare dove le opzioni del tema non lo permettono, per esempio se inerisci:

      #et-top-navigation { font-weight: 400; }
      #et-top-navigation .nav li:hover a { border-bottom:1px solid #667932; }

      avrai il weight di 400 e al passaggio del mouse sopra le voci avrai la sottolineatura del colore #667932.
      Personalizza questi due valori come meglio credi. Per il weight inserisci o 300 0 400 o 700.

      Attenzione però. Con i CSS non puoi fare proprio tutto. Per esempio in Enfold se sei su una pagina la cui voce è presente nel menu, avrai la sottolineatura attiva, cosa che non è stata fatta con i CSS, ma tramite programmazione php o javascript.

      I temi che proponiamo, come Enfold o Divi, a nostro avviso, sono quelli che danno la più larga possibilità di personalizzazione. Certo, con questo non significa che si può fare qualsiasi cosa venga in mente, caso in cui bisogna saper padroneggiare i CSS.

      Inoltre, come dicevo prima, a volte nemmeno con i CSS si può arrivare dove si vuole, e quindi bisogna passare direttamente alla programmazione php e javascript.
      Ma prima di arrivare a quel punto, e di investire il tempo per apprendere queste materie, forse bisogna cerca di ottenere dei compromessi che, al giorno d’oggi, con i temi a disposizione sono veramente minimi.

      Detto questo se conosci dei temi che reputi migliori, allora saremo ben lieti di verificarli e nel caso di consigliargli anche ad altri studenti.

      Grazie e buona giornata

      Dimenticavo: giusto per indicare ad altri utenti cosa e dove trovare le impostazioni del menu primario e secondario.

      Per cambiare i font del menu di Divi basta andare in Modificatore Tema > Header e Navigazione e qui si ha il controllo del Menu Primario e Secondario.
      Per esempio dentro a menu primario abbiamo il controllo su altezza menu, dimensione testo, distanza lettere, stile del carattere (boldato, italico ecc…), colori vari di testo e background, animazione menu e la scelta fra più di 90 font (caratteri).

  25. Luigi
    Luigi dice:

    Salve
    Non trovo il modo per cambiare questo per i due menu principale e secondario
    #main-header, #et-top-navigation {
    font-family: ‘Open Sans’, Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;} In line 2
    Vorrei cambiare font-weight: da 300 a 400 In ine 2 a cosa fa rif.?
    In Divi opzioni tema non riesco a trovare come cambiarlo

    Saluti

    luigi

    Rispondi
    • Lorenzo Novia
      Lorenzo Novia dice:

      Ciao Luigi,

      in line 2 non significa nulla… hai copiato del testo che non rientra nel codice.

      In Divi se vuoi inserire del css personalizzato lo puoi fare da Theme Options > Custom CSS (ultima voce della pagina).

      PS: ricorda che per i singoli moduli puoi andare ad inserire delle regole CSS dedicate a ognuno di loro. Quelle che inserisci nelle theme options sono regole generali che valgono per tutto il tema.

      NB: copiare e incollare senza avere un infarinatura generale non è il massimo. Ti invito a considerare il corso di HTML e CSS se pensi di mettere mano spesso ai css.

      Buona giornata

  26. Luigi
    Luigi dice:

    Salve
    Non è quello che io intendevo, mi sono spiegato male io, scusa, sempre al menu secondario quando si passa sulle voci menù (hover) vorrei far visualizzare sotto la voce su cui si passa una linea in modo di evidenziare un pò di più la vose, infatti il tema Enfold lo utilizza, chiaramentee era solo un esempio, ma credo che la regola più o meno sia questa, non sò do metterla però, o in alternativa , accetto un tuo gradito consiglio.

    Saluti

    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Gli effetti che puoi inserire sono moltissimi, ma li potrai aggiungere solo tramite CSS.

      Vai sul blog ufficiale delle Elegant Themes e fai una ricerca “css effect menu divi”, vedrai che appare qualche post che ti può tornare utile.

      Buona giornata

  27. Luigi
    Luigi dice:

    Salve
    Dove posso inserire questa regola Css per inserire una linea sotto ogni parola del menu secondario? In Divi non vedo questa possibilità, ma forse mi sbaglio. Mi manca sapere dove inserirlo e voce del menu dove inserirlo

    .header_color.av_header_transparency
    .avia-menu-fx, .av_header_transparency
    .av-hamburger-inner, .av_header_transparency
    .av-hamburger-inner::before,
    .av_header_transparency .av-hamburger-inner::after {
    background: #fff;
    }

    Saluti
    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Luigi, non tutti i temi sono uguali.

      Da quello che vedo, questo codice fa riferimento al builder Avia di Enfold e, chiaramente, non può andare bene per un tema sviluppato dalla Elegant Themes, che è una software House differente.

      Se vuoi inserire la linea sotto ai tasti del menu di Divi, puoi farlo senza aggiungere alcun CSS.

      Apri il Modificatore di Tema e vai su Header e Navigazione > Barra del Menu Secondario.

      Troverai la sottolineatura alla voce Stile Carattere.

      Buona giornata

  28. Luigi
    Luigi dice:

    Salve
    Ho bisogno di inserire ulreriori font che non ci sono in modificatore tema di Divi, come è possibile inserirli, es: a me serve Helveticaneue che in divi non c’è come posso inserirlo?

    Saluti
    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Luigi,
      Non tutti i font si possono incorporare su un sito in WordPress.
      Questo perché, per fare in modo che tutti gli utenti possano vedere la stessa cosa, serve che il carattere risieda fisicamente sulla rete.

      Per risolvere il problema Google mette a disposizione i Google Fonts.

      Se tra quelli proposti del tema non c’è nulla che ti piace, devi scegliere quello che si avvicina di più al font che stai cercando tra questi, sicuramente troverai moltissime soluzioni simili.

      Per integrarli sul tuo sito dovresti mettere mano al codice, ma credo che la soluzione più comoda nel tuo caso sia quella di utilizzare un plugin come Easy Google Fonts.

      Buona giornata

  29. Stefano
    Stefano dice:

    Salve Lorenzo

    Stavo rivedendo la lezione su Divi, “Le opzioni Divi”.
    Al minuto 5, (formato header), cliccando il menù in alto a destra, la pagina cambia colore e appaiono dettagli menù.

    Era una delle cose che non riuscivo a spiegarmi nel mio sito, cos’è questo secondo piccolo menù che appare nel angolo destro e fa apparire una schermata diversa?

    E una specie di back page o si disattiva in seguito lanciando il sito quando è completo?

    Scusami per la mail di Domenica, non è urgente.

    Buona giornata.

    Stefano Argiolas

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Stefano,
      è semplicemente una combinazione fra le diverse soluzione che Divi ti propone per la header (logo + menu).

      Come vedi nel filmato, Gianluca ha selezionato come stile intestazione “schermo intero”.

      Questa opzione ti da il menu in stile mobile, quindi chiuso, anche se sei nel desktop. Ha inoltre la classica “icona menu” che si trova in tutte le applicazioni. Una volta premuta si apre il menu, sempre in stile mobile, con un overlay, ovvero un livello colorato che va sopra al resto, con nel mezzo le voci del menu.

      Buona giornata

Corso WordPress GRATUITO

INSERISCI NOME E MAIL PER ACCEDERE ALLE PRIME LEZIONI GRATUITAMENTE.

Zero spam. Garantito.

Corso Wordpress Gratis

Inizia il Corso di WordPress GRATIS!

Inserisci nome ed email per avere l'accesso gratuito alle prime lezioni del corso. Impara a costruire da solo il tuo sito web!

Ci sei quasi! Ti abbiamo mandato un'email per confermare il tuo indirizzo di posta.

Pin It on Pinterest