Modi semplici e creativi per visualizzare i loghi aziendali in Divi

Ci sono molti motivi per visualizzare i loghi aziendali sul tuo sito web. Una sezione "In primo piano" dei loghi aziendali potrebbe influenzare i potenziali investitori o partner. Oppure una sezione "I nostri clienti includono" potrebbe stabilire una preziosa prova sociale con i visitatori. Ma qualunque sia la ragione, è importante sapere come aggiungere questi loghi al tuo sito web. In questo tutorial, esaminerò tre diversi metodi per aggiungere loghi aziendali al tuo sito Web con Divi. Ti mostrerò anche come aggiungere gallerie di loghi a qualsiasi modulo Divi!

Ecco cosa verrà trattato in questo tutorial:

• Preparare le immagini del tuo logo
• Utilizzo del modulo Divi Gallery per visualizzare i loghi con un semplice trascinamento della selezione
• Utilizzo della Galleria WordPress Incorpora per visualizzare i loghi
• Utilizzo di Divi Builder per creare un layout personalizzato per i loghi

Iniziamo!

Sbirciata

Ecco una sbirciatina ad alcuni dei design possibili utilizzando le tecniche in questo tutorial.

Preparare le immagini del tuo logo

Quando prepari i tuoi loghi da visualizzare sul tuo sito web, è importante dedicare del tempo a ridimensionare le immagini utilizzando un editor di foto prima di aggiungerle al tuo sito. Questo ti farà risparmiare il mal di testa di provare a ridimensionare e posizionare i tuoi loghi con larghezze, padding o margini personalizzati. Fidati di me. Non vuoi percorrere quella strada se non devi.

Poiché ogni logo ha una dimensione unica, è praticamente impossibile che tutti abbiano le dimensioni esatte. È qui che torna utile un editor di foto. Ad esempio, utilizzando Photoshop, puoi creare un nuovo file e impostare le dimensioni del documento sulla dimensione desiderata per tutte le immagini del tuo logo (in questo caso 226 x 100 pixel).

Quindi aggiungi l'immagine del logo al documento e ridimensiona e posiziona l'immagine direttamente al centro. Assicurati che sia un file immagine png con uno sfondo trasparente.

Quindi esporta l'immagine come file png per mantenere lo sfondo trasparente.

Quindi ripeti il ​​processo per il resto dei tuoi loghi.

Puoi mantenere il colore originale del logo o utilizzare un editor di foto per cambiarlo con il colore che desideri. Se hai intenzione di aggiungere i tuoi loghi utilizzando un Divi (cioè il modulo immagine o la galleria di immagini), puoi sempre utilizzare gli effetti filtro incorporati di Divi per regolare anche i colori.

Iscriviti al nostro canale Youtube

#1 Utilizzo del modulo Divi Gallery per visualizzare i loghi aziendali (un semplice trascinamento della selezione)

Questo primo metodo per aggiungere loghi aziendali al tuo sito con Divi è molto semplice. Utilizzando la funzione di trascinamento della selezione di Divi, puoi trascinare tutti i loghi aziendali in Divi Builder per creare istantaneamente una galleria di immagini per visualizzare i tuoi loghi in una griglia.

Per fare ciò, crea una nuova pagina e distribuisci Divi Builder per costruire sul front-end. Seleziona l'opzione "Crea da zero". Una volta che Divi builder è attivo e funzionante, apri la cartella contenente tutte le tue immagini e selezionale. Quindi trascinali semplicemente nella finestra del browser con Divi Builder.

Divi aggiungerà automaticamente quelle immagini a un nuovo modulo Galleria e aprirà le Impostazioni galleria per avviare il processo di personalizzazione per te.

Poiché sto aggiungendo 8 immagini di logo e non voglio mostrare alcun titolo, didascalia o impaginazione, posso aggiornare quanto segue:

Numero immagini: 8
Mostra titolo e didascalia: NO
Mostra impaginazione: NO

Per impostazione predefinita, il modulo galleria aggiungerà un overlay al passaggio del mouse con un'icona per ogni immagine. È possibile regolare le impostazioni di sovrapposizione per il colore dell'icona dello zoom, il colore della sovrapposizione al passaggio del mouse o l'icona al passaggio del mouse.

Per mantenere le cose pulite e semplici, puoi eliminare l'overlay al passaggio del mouse impostando Zoom Icon Color e Hover Overlay Color su trasparente.

Successivamente, puoi esplorare tutte le opzioni di design per creare design unici per la tua galleria di immagini. Ad esempio, puoi aggiungere un bordo con un'ombra sottile.

Larghezza bordo immagine: 1px
Colore bordo immagine: #dddddd
Image Box Shadow: vedi screenshot

Ecco come apparirebbe il design finale su browser di diverse dimensioni.

E poiché questa galleria può essere aggiunta a qualsiasi struttura di colonne, puoi facilmente creare layout unici per i loghi della tua azienda. Ecco un esempio di layout a due colonne con un modulo di testo a sinistra e il modulo galleria di immagini (con i loghi) a destra. Ho aggiunto un gradiente di sfondo solo per mostrarti un aspetto diverso.

#2 Utilizzo della Galleria WordPress Incorpora per visualizzare i loghi aziendali (con qualsiasi modulo Divi)

Puoi anche aggiungere loghi aziendali al tuo sito web utilizzando lo shortcode della Galleria di immagini di WordPress. Questo è sorprendentemente facile da fare ed è perfetto per i loghi perché nella maggior parte dei casi non sarà necessario aggiungere stili personalizzati alle immagini. La cosa fantastica di questo metodo è che puoi distribuire fino a 9 colonne per i tuoi loghi che si adattano alla finestra del browser permettendoti di mantenere la struttura delle colonne anche sui dispositivi mobili.

Ecco come farlo.

In Divi Builder, crea una nuova sezione con una struttura di colonne da un quarto a tre quarti.

Supponiamo che tu voglia avere del testo a sinistra dei loghi della tua azienda in una galleria di sei colonne. Per prima cosa aggiungi un modulo di testo nella colonna di sinistra e aggiorna quanto segue:

Contenuto: "Come descritto in"
Carattere del testo: Montserrat
Peso del carattere del testo: grassetto
Dimensione del testo del testo: 26px
Orientamento del testo: centro

Ora aggiungi un altro modulo di testo nella colonna di destra. Nella scheda contenuto, elimina il contenuto fittizio attualmente presente e fai clic sul pulsante "Aggiungi media" nella parte superiore della casella dell'editor di contenuti.

Verrà visualizzato il popup Galleria multimediale. Quindi fai clic sul collegamento Crea galleria a sinistra del popup. Quindi seleziona le immagini del logo che desideri includere nella galleria (sto usando otto immagini per questo esempio). Fare clic sul pulsante Crea galleria.

Questo farà apparire la pagina Modifica Galleria nel popup. Aggiorna le impostazioni della Galleria nella barra laterale destra come segue:

Link a: Nessuno
Colonne: 8 (questo dovrebbe essere uguale al numero di immagini nella galleria in modo che rimangano su una riga)
Dimensioni: a grandezza naturale

Quindi fare clic sul pulsante Crea una nuova galleria.

Questo incorporerà lo shortcode della galleria necessario integrato in WordPress e visualizzerà la galleria all'interno del modulo di testo.

Ora apri le impostazioni della riga e aggiorna quanto segue:

Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S

Con questa configurazione, hai più spazio per respirare i tuoi loghi. Ora tutto ciò che resta da fare è regolare il testo a sinistra per essere allineato verticalmente con i loghi a destra. È possibile aggiungere il necessario riempimento personalizzato alla colonna di sinistra per eseguire questa operazione, ma per garantire che entrambi i moduli rimangano centrati verticalmente, è possibile aggiungere il seguente CSS personalizzato all'elemento principale nella scheda Impostazioni riga avanzate.

align-items: center;

Questo CSS funziona perché impostiamo Equalize Column Heights su YES, abilitando così la proprietà "display:flex" per la riga. Per maggiori informazioni su questo, controlla come allineare verticalmente il contenuto in Divi.

E per eliminare il bordo grigio attorno alle nostre immagini, dobbiamo aggiungere il seguente frammento CSS alle impostazioni della nostra pagina:

.gallery img {
border: none !important;
}

Ecco il disegno definitivo.

Eccolo con uno sfondo nero aggiunto alla riga.

Su dispositivi mobili, le colonne non si interrompono su nessuna dimensione dello schermo. Le immagini si ridimensionano semplicemente a una dimensione più piccola. Lo ammetto. Otto colonne sono probabilmente troppe su smartphone perché le immagini diventano molto piccole.

Incorpora gallerie di loghi in qualsiasi modulo Divi

Poiché si tratta di un incorporamento di shortcode, puoi aggiungere questa galleria a quasi tutti i moduli Divi che aprono molte possibilità diverse.

Ad esempio, puoi aggiungere immagini del logo all'interno di un interruttore, una fisarmonica o persino un modulo di schede.

Ecco un esempio di come apparirebbe quando aggiungi lo shortcode della galleria wordpress dei tuoi loghi a due schede diverse.
Per questo esempio, ho selezionato 6 loghi con 3 colonne per ogni galleria.

Questo potrebbe tornare utile per i siti che richiedono molti loghi.

#3 Utilizzo di Divi Builder per creare un layout personalizzato per i loghi aziendali

Se vuoi essere un po' più creativo con i layout del logo della tua azienda, puoi utilizzare Divi Builder per progettare qualsiasi cosa tu possa immaginare. L'elemento riga di Divi supporta layout di colonne fino a 6 colonne, il che è più che sufficiente per la maggior parte dei layout del logo aziendale. Mi piacciono i layout a 6 colonne e a 4 colonne per i loghi in gran parte per come rispondono sui dispositivi mobili.

Nel seguente design, ti mostrerò alcuni suggerimenti su come portare i layout del logo della tua azienda al livello successivo.

Innanzitutto, iniziamo con la creazione di una nuova sezione con una riga di sei colonne.

Prima di iniziare ad aggiungere qualsiasi cosa alle nostre colonne, vai alle impostazioni delle righe e aggiorna quanto segue:

Larghezza personalizzata: 90%
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S

Imbottitura personalizzata: 4vw superiore, 4vw inferiore

Salva le impostazioni.

Quindi aggiungi un modulo immagine alla tua prima colonna e quindi seleziona una delle immagini del tuo logo.

Quindi continua ad aggiungere un'immagine del logo a ciascuna colonna come segue:

Colonna 1: 1 logo
Colonna 2: 2 loghi
Colonna 3: 3 loghi
Colonna 4: 3 loghi
Colonna 5: 2 loghi
Colonna 6: 1 logo

Ora con questa configurazione, puoi regolare l'allineamento verticale usando un frammento di CSS personalizzato. Se vuoi centrare verticalmente il contenuto, puoi aggiungere lo stesso frammento CSS che aggiungiamo per centrare verticalmente il nostro testo accanto alla galleria del logo in #2 sopra. Apri le impostazioni della riga e aggiungi il seguente CSS all'elemento principale.

align-items: center;

Come puoi vedere, questo crea un layout arrotondato per i loghi.

Ma per questo layout, allineerò i moduli alla parte inferiore della riga. Quindi sostituisci lo snippet "align-items: center" con il seguente:

align-items: flex-end;

Questo allinea tutti i moduli alla parte inferiore della riga che funzionerà bene con la sezione Divisori che aggiungeremo.

Ora siamo pronti per personalizzare la nostra sezione. Apri le impostazioni della sezione e aggiorna quanto segue:

Sfondo: #2a3443

Stile divisore superiore: vedi screenshot
Colore divisorio superiore: rgba (255,255,255,0,03)
Altezza divisore superiore: 13vw
Flip divisore superiore: verticale

Imbottitura personalizzata: 0px in alto, 0px in basso

Per la nostra intestazione, creeremo una nuova sezione e la posizioneremo sopra la sezione appena creata. Crea una nuova sezione regolare con una struttura di riga a una colonna.

Aggiorna le impostazioni della sezione come segue:

Colore di sfondo: #2a3443

Stile divisore inferiore: vedi screenshot
Colore divisorio inferiore: rgba (238,238,238,0,09)
Altezza divisore inferiore: 13vw

Imbottitura personalizzata: 0px in basso

Ora salva le tue impostazioni e aggiungi un modulo di testo alla riga e aggiorna quanto segue:

Per il contenuto aggiungere quanto segue:

<h2>As Featured In</h2>

Intestazione 2 Carattere: Montserrat
Intestazione 2 Peso del carattere: grassetto
Intestazione 2 Allineamento del testo: centro
Colore testo titolo 2: #ffffff
Titolo 2: Dimensione testo: 32px

Margine personalizzato: 0px in basso

Infine, aggiungi un modulo immagine sotto il modulo di testo con un logo aziendale che vuoi risaltare sopra il resto. Quindi aggiorna quanto segue:

Allineamento immagine: centro
Margine personalizzato: -75 px

Controlla il risultato finale.

Pensieri finali

Creare una sezione sul tuo sito web per i loghi aziendali è in realtà piuttosto semplice. Una volta che le immagini del logo sono state dimensionate correttamente utilizzando un editor di foto, Divi può occuparsi del resto. I metodi trattati in questo tutorial dovrebbero fornire tutto il necessario per creare il layout che stai cercando di ottenere con il minimo sforzo. E con la potenza di Divi nel tuo angolo, dovresti divertirti a creare alcuni layout unici.

Non vedo l'ora di sentirti nei commenti.

Saluti!