Ottimizzazione dell'immagine del logo del tuo sito Divi con i preset globali
Pubblicato: 2020-09-25L'ottimizzazione del logo del tuo sito in Divi è una parte importante del design del tuo sito web. Ma non deve essere uno sforzo misterioso o scoraggiante. In effetti, Divi lo rende piuttosto semplice con Divi Theme Builder e tutte le opzioni di progettazione integrate disponibili.
In questo tutorial, ti mostreremo come ottimizzare i tuoi loghi con la giusta dimensione, posizione e stile in Divi. Quindi ti mostreremo come salvare quei progetti come predefiniti globali che puoi utilizzare per lo sviluppo futuro.
Facciamo un salto!
Scarica GRATUITAMENTE il layout dei predefiniti per le immagini del logo
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per utilizzare questo layout dell'immagine del logo sulla tua intestazione globale, devi prima importarlo nella libreria Divi come segue:
- Vai a Divi > Libreria Divi.
- Fare clic sul pulsante di importazione/esportazione nella parte superiore della pagina.
- Seleziona la scheda Importa nel popup di portabilità
- Seleziona Importa preset
- Fare clic sul pulsante Importa
Quindi vai al generatore di temi e modifica l'intestazione globale. Aggiungi un modulo immagine dove vuoi che sia il logo e usa i preset per modellare e posizionare il logo di conseguenza.
Dimensioni del logo
Prima di arrivare all'ottimizzazione dell'immagine del logo con Divi, è importante considerare l'ottimizzazione delle dimensioni dell'immagine del logo prima di caricarla su un modulo immagine. Non vuoi caricare un'immagine del logo 1920px per 1080px sul tuo sito quando prevedi di visualizzare quel logo a 100px per 50px. Certo, ci sono modi per ridimensionare l'immagine del logo dopo il fatto (cioè srcset e plugin di ottimizzazione dell'immagine). Tuttavia, questa non è la migliore pratica poiché ciò potrebbe comportare tempi di caricamento della pagina più lenti. E, ammettiamolo, il tuo logo è troppo importante per accontentarti di scorciatoie disordinate.
Di seguito è riportato un elenco delle dimensioni comuni delle immagini del logo da considerare:
Per la disposizione orizzontale:
- 250 px x 150 px
- 350 px x 75 px
- 400 px x 100 px
Per il layout verticale (quadrato):
- 160 px x 160 px (grande)
- 60 px x 60 px (piccolo)
Potresti aver bisogno di una dimensione del logo più grande di quanto pensi.
È comune aver bisogno di un logo più piccolo sul desktop e di un logo più grande sul tablet (o anche sul telefono). In Divi, è comune che i layout delle colonne vengano impilati in un layout a una colonna sui display di tablet e telefoni. E poiché le larghezze del browser per tablet normalmente hanno una larghezza massima di 980 px, che è un contenitore molto più grande per il tuo logo rispetto forse al desktop. Pertanto, potrebbe essere necessario scegliere una dimensione del logo più grande e regolare l'altezza o la larghezza massima in base al dispositivo. Se carichi un logo più piccolo del necessario sul tablet, non puoi aumentare le dimensioni senza compromettere la nitidezza dell'immagine. In breve, assicurati che il logo sia grande quanto la dimensione massima del display su tutte le larghezze del browser.
Ottimizzazione delle dimensioni e della posizione del logo del tuo sito Divi con i preset globali
Modifica del logo dell'intestazione globale
Per iniziare, vai a Divi Theme Builder andando su Divi > Theme Builder. Quindi fare clic per creare una nuova intestazione globale all'interno del modello di sito Web predefinito.
Quindi seleziona l'opzione "Costruisci da zero".
Per questo tutorial, ottimizzeremo il logo incluso con un'intestazione globale personalizzata utilizzando Divi Theme Builder. Sei il benvenuto a un design di intestazione esistente o importa uno dei nostri modelli di intestazione (e piè di pagina) globali predefiniti dal nostro blog. Per semplificare le cose, creeremo un layout di intestazione davvero semplice con un logo e un menu.
Aggiungi layout di righe e colonne
All'interno dell'editor del layout dell'intestazione globale, aggiungi una riga di colonna di un quarto e tre quarti.
Nella colonna di destra, aggiungi un modulo immagine come segnaposto per aiutarci a visualizzare il posizionamento del logo nell'intestazione.
Aggiungi il modulo immagine per visualizzare l'immagine del logo
Aggiungi un modulo immagine alla colonna di sinistra.
Utilizzo del modulo immagine per i loghi
Per design di intestazioni più tradizionali, puoi sfruttare il modulo menu di Divi per visualizzare il tuo logo. Tuttavia, con le funzionalità di contenuto dinamico di Divi, puoi visualizzare il logo del tuo sito utilizzando un numero qualsiasi di moduli Divi. Fondamentalmente, puoi visualizzare il tuo logo ovunque sia possibile visualizzare un'immagine in Divi. Ad esempio, puoi scegliere di visualizzare il logo del sito su un'immagine di un modulo blurb o anche come immagine di sfondo, se lo desideri. Per questo tutorial, ci concentreremo sull'utilizzo del modulo immagine per visualizzare il logo del sito. Ciò consente al logo di essere un elemento completamente separato (non collegato ad altri elementi in un modulo come un modulo menu o un modulo blurb). Inoltre, il modulo immagine è costruito per modellare le immagini, il che ci offre molte opzioni di design aggiuntive per modellare l'immagine del nostro logo. Vai alla fine dell'articolo per ulteriori informazioni su come aggiungere un logo del sito come immagine dinamica.
Dal momento che testeremo alcune diverse dimensioni dell'immagine del logo, attaccheremo immagini normali per i nostri esempi invece del logo dinamico del sito.
Esempio 1: creazione di un predefinito globale logo allineato a sinistra
Per questo primo esempio, creeremo un semplice preset per un logo allineato a sinistra che sia 60px per 60px.
Apri le impostazioni del modulo immagine e carica un'immagine del logo di 60 x 60 pixel nel modulo immagine.
Aggiorna le impostazioni di progettazione dell'immagine come segue:
- Allineamento immagine: centro
- Larghezza massima: 60px
- Allineamento del modulo (desktop): Sinistra
- Allineamento del modulo (tablet e telefono): Centro
Anche se si tratta di un logo allineato a sinistra, l'allineamento dell'immagine è impostato al centro perché l'allineamento dell'immagine è diverso dall'allineamento del modulo. L'allineamento dell'immagine è centrato all'interno del modulo. E poiché il modulo ha una larghezza massima di 60 px, l'allineamento dell'immagine non ha importanza perché l'allineamento del modulo ora determinerà l'allineamento dell'immagine del logo.
Questo è utile se vuoi aggiungere un'immagine di sfondo al logo o arrotondare il contenitore. In sostanza, questo rende il contenitore dell'immagine del logo delle stesse dimensioni dell'immagine del logo stesso.
Notare che l'allineamento del modulo viene modificato per centrarlo sul tablet poiché le colonne verranno impilate sul dispositivo mobile.
Crea nuovo preset dagli stili correnti
Ora che il design del logo è terminato, puoi creare un predefinito globale per il modulo immagine facendo clic sul menu a discesa predefinito e selezionando "Crea nuovo predefinito dagli stili correnti".
Assegna un nome univoco alla preimpostazione dell'immagine del logo. In questo caso, possiamo dargli il nome "Logo Left (60px by 60px)" per farci sapere esattamente quale dimensione dell'immagine utilizzare e come verrà allineato il logo quando si seleziona l'uso del preset.
Esempio 2: creazione di un predefinito globale logo allineato a destra
Per questo prossimo esempio, creeremo un preset globale del logo allineato a destra. Questo sarà facile da fare con il nostro design attuale e preimpostato in atto. Cambia semplicemente il layout della colonna in tre quarti un quarto, sposta il menu nella colonna di sinistra e sposta il logo nella colonna di destra.
Apri le impostazioni per il modulo immagine contenente il predefinito per l'immagine del logo che abbiamo appena creato.
Quindi aggiorna le impostazioni di progettazione per modificare l'allineamento del modulo a destra.
Abbastanza semplice. Ora fai clic sul menu a discesa dei preset e crea un nuovo preset dagli stili correnti.
Assegna al preset il nome "Logo Right (60px by 60px)".
Esempio 3: creazione di un preset globale con logo centrato
Per questo prossimo esempio, creeremo un preset globale del logo centrato. Poiché questo è un logo centrato, possiamo usare un logo più grande per il nostro esempio.
Innanzitutto, cambia il layout della colonna in una struttura da 0 un quarto a metà un quarto in modo da avere una colonna più grande al centro per il logo. Quindi sposta il logo nella colonna centrale
Carica una nuova immagine del logo di 250 x 150 pixel.
Nella scheda Progettazione, aggiorna quanto segue:
- Larghezza massima: 250 px
- Allineamento del modulo: Centro
Quindi aggiungi un nuovo preset globale dagli stili correnti.
E dagli il nome "Logo Center (250 px per 150 px).
Esempio 4: creazione di un preset globale con logo grande allineato a sinistra
Per questo prossimo esempio, creeremo un preset per un logo allineato a sinistra più grande (400 px per 100 px).
Poiché il logo avrà una larghezza di 400 px, vogliamo una struttura a colonne che dia al logo lo spazio di cui ha bisogno.
Torniamo ad una struttura a due colonne con il logo a sinistra e il menu a destra. Tuttavia, cambiamo la struttura a un terzo due terzi.
Questo ci darà una colonna di circa 320 px di larghezza se manteniamo la larghezza massima della riga predefinita di 1080 px.
Apri le impostazioni del modulo immagine e aggiungi un'immagine del logo di 400 px per 100 px.
Nella scheda Progettazione, aggiorna quanto segue:
- Larghezza massima: 400 px
- Allineamento del modulo (desktop): a sinistra
- Allineamento del modulo (tablet): centro
Come ho detto, la colonna ha una larghezza massima di 320 px, il che significa che l'immagine del logo non sarà in grado di estendersi a tutta la larghezza sul desktop. Tuttavia, sarà in grado di farlo sul tablet una volta che le colonne sono state impilate. Per questo motivo, vogliamo impostare la larghezza massima dell'immagine a 400 px.
Ora il logo è leggermente più grande sul tablet oltre ad essere centrato.
Quindi aggiungi un nuovo preset globale dagli stili correnti.
Dagli il nome "Logo Left (400px by 100px)" e salva il preset.
Esempio 5: creazione di un logo allineato a sinistra con effetti al passaggio del mouse preimpostati globali
Per questo ultimo esempio, aggiungeremo alcuni effetti al passaggio del mouse a un logo allineato a sinistra e lo salveremo come un nuovo preset globale.
Normalmente, le persone collegano il loro logo alla home page. L'aggiunta di un effetto hover può migliorare la UX rendendo più evidente la sua cliccabilità.
Per questo esempio, utilizzeremo l'immagine del logo 60px per 60px con l'impostazione predefinita "Logo sinistro (60px per 60px)". Apri le impostazioni dell'immagine e seleziona il preset dall'elenco.
Ora possiamo modificare il preset con alcuni stili di effetti al passaggio del mouse prima di salvarlo come nuovo preset.
Aggiorna quanto segue:
- Angoli Arrotondati: 50%
- Box Shadow: vedi screenshot
- Posizione orizzontale dell'ombra del riquadro: 0px
- Box Shadow Vertical Position: 0px (desktop) 5px (hover)
- Colore ombra: #ac3cf7
Quindi aggiungi la seguente rotazione di trasformazione al passaggio del mouse:
- Trasforma Ruota asse Z (hover): 90deg
Quindi crea un nuovo preset dagli stili correnti e chiamalo "Logo Left w/ Hover (60px by 60px)".
Ecco il risultato.
Aggiunta di un logo del sito dinamico al modulo immagine
Per aggiungere dinamicamente il logo del tuo sito al modulo immagine, devi prima assicurarti di caricare il logo del sito in Opzioni tema Divi.
Tieni presente la dimensione del logo che stai selezionando.
Quindi vai al modulo immagine che ha il tuo preset globale e apri le impostazioni. Elimina l'immagine corrente, quindi fai clic sull'icona del contenuto dinamico. Dal menu a discesa, seleziona Logo del sito.
Ora il tuo modulo immagine estrarrà il logo del tuo sito in modo dinamico.
Non dimenticare di aggiungere anche un collegamento dinamico alla home page al logo.
Pensieri finali
Speriamo che questo tutorial aiuti a semplificare il processo di aggiunta di loghi alle intestazioni Divi. Inizia con l'ottimizzazione delle dimensioni dell'immagine del tuo logo prima ancora di caricarla sul tema Divi. Quindi puoi utilizzare le impostazioni di progettazione integrate di Divi per regolare le dimensioni e la posizione dell'immagine per diversi layout di colonne e diversi dispositivi.
Naturalmente, ogni sito Web richiederà il proprio stile unico, alcuni dei quali si discostano dalle linee guida stabilite in questi esempi. Ma sono sicuro che con alcune modifiche, puoi creare facilmente nuovi preset per qualsiasi layout unico!
Non vedo l'ora di sentirti nei commenti.
Saluti!