Come cambiare la dimensione del logo WordPress (funziona con qualsiasi tema)

Recentemente uno dei nostri lettori ha chiesto se fosse possibile cambiare la dimensione del logo in WordPress?

Il logo del tuo sito web è una parte importante del tuo marchio. A seconda del tema WordPress che usi, a volte non è chiaro come cambiare la dimensione del tuo logo per renderlo più grande o più piccolo.

In questo articolo, ti mostreremo come cambiare facilmente la dimensione del logo WordPress , passo dopo passo.

 Come cambiare la dimensione del logo WordPress (funziona con qualsiasi tema)

Come cambiare la dimensione del logo WordPress (funziona con qualsiasi tema)

Perché cambiare la dimensione del logo in WordPress?

Quando carichi il tuo logo su WordPress, potrebbe non essere sempre della giusta dimensione.

Un logo troppo piccolo non si distingue. Mentre, un logo troppo grande può finire per avere un impatto negativo sul design del tuo sito web.

Se hai investito in un design logo personalizzato, quindi si desidera assicurarsi che il logo appare come la giusta dimensione nell’intestazione del sito web.

Per quelli ancora nel processo di progettazione del logo, vedere le nostre scelte dei migliori produttori di logo gratuiti.

Detto questo, ti mostreremo alcuni modi diversi che puoi usare per cambiare la dimensione del logo in WordPress.

Il metodo scelto dipenderà dal tema WordPress che si sta utilizzando, e il vostro livello di comfort con la modifica del codice CSS.

  • Modifica la dimensione del logo WordPress con WordPress customizer
  • Modifica la dimensione del logo WordPress modificando il codice CSS
  • Modifica la dimensione del logo WordPress senza modificare il codice CSS

Metodo 1. Modificare la dimensione del logo WordPress con WordPress Customizer

Il modo più semplice e più semplice per modificare la dimensione del logo in WordPress è utilizzando il tema customizer. Tuttavia, questo metodo funziona solo se il tuo tema WordPress lo supporta.

Molti temi popolari come Divi, Astra, Ultra e altri hanno uno strumento di modifica delle dimensioni del logo integrato.

Quando carichi il tuo logo in WordPress, questi temi facilitano la regolazione del logo con un semplice cursore che puoi utilizzare per regolare la larghezza e l’altezza.

Nota: la dimensione del logo sarà grande solo quanto l’immagine che carichi, quindi vuoi assicurarti di caricare un’immagine del logo più grande, se il tuo obiettivo è renderlo più grande.

Per il bene del tutorial, mostreremo come cambiare il tuo logo in Divi, Astra e Ultra theme, ma il metodo è simile per i temi WordPress più popolari. Se il tema non ha questa opzione, è necessario utilizzare il metodo 2 o 3 di questo tutorial.

Cambia la dimensione del logo WordPress in Divi WordPress Theme

Per prima cosa, vai a Divi ” Theme Customizer e fai clic sull’opzione di menu ‘Header & Navigation’.

Seleziona personalizzatore tema Divi

Seleziona Divi theme customizer

Successivamente, fai clic sull’opzione a discesa “Barra dei menu principale”.

Qui puoi cambiare la dimensione del tuo logo.

 Seleziona la barra dei menu principale Divi

Selezionare Divi barra dei menu principale

In primo luogo, è necessario regolare l’impostazione ‘Menu Height’. Questo controlla l’altezza del vostro intero menu di navigazione e definirà quanto grande si può fare il vostro logo.

Successivamente, è possibile modificare l’impostazione “Altezza massima logo”, che è una percentuale dell’altezza totale del menu.

 Regolare logo altezza

Regola l'altezza del logo

Puoi regolare il cursore “Altezza massima logo” su e giù fino a trovare la dimensione del logo perfetta per il tuo blog WordPress.

Assicurarsi di fare clic sul pulsante ‘Pubblica’ per salvare le modifiche prima di uscire dalla schermata.

Cambia la dimensione del logo WordPress in Astra WordPress Theme

La prima cosa che devi fare è passare a Aspetto ” Personalizza e quindi fare clic sull’opzione di menu ‘Intestazione’.

 Astra tema personalizza

Astra theme personalizza

Successivamente, fai clic sull’opzione di menu ‘Identità sito’.

Qui puoi facilmente regolare le dimensioni del tuo logo.

Clicca sull'identità del sito in Astra

Fai clic su identità sito in Astra

Tutto ciò che devi fare è spostare il cursore “Larghezza logo” a sinistra oa destra.

È possibile visualizzare automaticamente le dimensioni del logo cambia in tempo reale, come si sposta il cursore.

 Astra logo larghezza slider

Astra logo width slider

Una volta che sei soddisfatto delle dimensioni del tuo logo, assicurati di fare clic su “Pubblica” prima di uscire dalla pagina.

Modificare la dimensione del logo WordPress in Ultra WordPress Theme

Per personalizzare la dimensione del logo in Ultra theme, passare a Aspetto ” Personalizza, e fare clic sulla voce di navigazione ‘Site Logo & Tagline’.

Logo e slogan del sito Ultra click

Ultra click sito logo e tagline

Dopo di che fare clic sul ‘Sito Logo’ discesa.

Quindi, selezionare il pulsante di opzione’ Immagine logo ‘ che appare.

 Pulsante logo sito Ultra click

Pulsante logo sito Ultra click

Ora puoi modificare le dimensioni del logo inserendo nuove dimensioni nelle caselle a destra dell’immagine del logo. Se si desidera ridimensionare l’immagine in base alle dimensioni originali, immettere solo le nuove dimensioni del logo in una casella.

È possibile modificare la larghezza con la casella a sinistra e l’altezza con la casella a destra.

 Cambia altezza e larghezza del logo

Cambia logo altezza e larghezza

Quando inserisci nuove dimensioni, vedrai la dimensione del tuo logo cambiare in tempo reale.

Una volta che hai finito di personalizzare la dimensione del tuo logo, assicurati di fare clic sul pulsante ‘Pubblica’.

Se il tema non è evidenziato sopra, allora c’è ancora una possibilità che è possibile personalizzare la dimensione del vostro logo utilizzando il WordPress customizer.

Basta andare a Aspetto ” Personalizza su qualsiasi tema che si sta utilizzando e vedere quali opzioni di personalizzazione sono disponibili per il vostro logo o intestazione.

Metodo 2. Modifica la dimensione del logo WordPress modificando CSS

Se il tuo tema WordPress non supporta la modifica della dimensione del logo utilizzando il customizer del tema WordPress, puoi modificare la dimensione aggiungendo CSS personalizzati.

La prima cosa che devi fare è passare alla home page del tuo sito web.

Quindi, fare clic destro in qualsiasi punto della pagina e selezionare l’opzione ‘Inspect’. Questo farà apparire un menu di ispezione che mostra tutto il codice per la pagina.

Fare clic con il pulsante destro del mouse su ispeziona

Fare clic con il pulsante destro del mouse su inspect

Dopodiché, è necessario fare clic sull’icona “Seleziona un elemento” che assomiglia a un puntatore del mouse.

Questo ti consente di selezionare l’elemento logo del tuo sito web e visualizzare il codice.

Fare clic sull'icona Seleziona un elemento

Fai clic sull'icona Seleziona un elemento

Quindi, passa semplicemente il mouse sul logo del tuo sito Web finché non viene visualizzata la classe CSS. Sarà simile all’immagine qui sotto.

Userai questa classe CSS per personalizzare le dimensioni del tuo logo WordPress. Quindi, scrivilo in un editor di testo come Blocco note.

Classe CSS logo

Logo CSS class

Ora puoi tornare alla tua dashboard di amministrazione di WordPress e passare a Aspetto ” Personalizza. È necessario fare clic sull’opzione di menu’ CSS aggiuntivo’.

Verrà visualizzato un menu a discesa in cui è possibile aggiungere codice CSS personalizzato.

Seleziona CSS aggiuntivo

Seleziona CSS aggiuntivo

Aggiungi semplicemente la classe CSS trovata in precedenza e specifica le nuove dimensioni dell’immagine. Puoi usare il codice CSS qui sotto come esempio.

img.custom-logo { max-height: 100px !important;}

È necessario modificare la classe CSS img.custom-logo sopra alla classe CSS utilizzata dal tema.

Puoi anche cambiare max-height in qualsiasi dimensione tu voglia.

Ecco come appare all’interno del customizer WordPress.

 Personalizzatore di WordPress CSS aggiuntivo

Ulteriori CSS WordPress customizer

Una volta apportate le modifiche, è sufficiente fare clic sul pulsante ‘Pubblica’ per rendere le modifiche dal vivo.

Metodo 3. Cambia la dimensione del logo WordPress senza modificare CSS

Se non ti senti a tuo agio a modificare i file del tema o ad aggiungere CSS personalizzati, allora questo metodo è per te.

Utilizzando un plugin per lo styling di WordPress, puoi apportare modifiche visive al tuo sito in modo simile all’utilizzo di un generatore di pagine drag and drop.

Si consiglia di utilizzare CSS Hero. È un plugin styler che ti consente di modificare quasi tutti gli stili CSS sul tuo sito WordPress senza scrivere una singola riga di codice CSS.

Deal: WPBeginner reader può ottenere uno sconto del 34% attraverso il nostro codice coupon CSS Hero.

La prima cosa che devi fare è installare e attivare il plugin. Per maggiori dettagli, vedere la nostra guida passo passo su come installare un plugin per WordPress.

Al momento dell’attivazione, è necessario fare clic sul pulsante “Procedi all’attivazione del prodotto” per attivare il plugin. Si trova proprio sopra l’elenco dei plugin installati.

Attiva il plugin CSS Hero

Attiva il plugin CSS Hero

Questo ti porterà a una schermata in cui puoi inserire nome utente e password. Basta seguire le istruzioni sullo schermo e verrai reindirizzato al tuo sito una volta verificato il tuo account.

Successivamente, fai clic sul pulsante “Personalizza con CSS Hero” nella parte superiore della barra degli strumenti di amministrazione di WordPress.

Personalizza con CSS Hero

Personalizza con CSS Hero

Questo ti porterà al tuo sito web con CSS Hero in esecuzione su di esso. CSS Hero utilizza un editor WYSIWYG (quello che vedi è quello che ottieni).

Quando si fa clic su qualsiasi elemento della pagina, si aprirà una barra degli strumenti a sinistra per effettuare personalizzazioni.

Anteprima dell'eroe CSS

CSS Hero preview

Quindi, fai clic sul tuo logo WordPress nella parte superiore della pagina.

Successivamente, fai clic sul collegamento “Mostra oggetti di scena avanzati”.

 Fare clic su Mostra oggetti di scena avanzati

Fai clic su Mostra oggetti di scena avanzati

Questo ti dà ancora più opzioni di personalizzazione CSS.

Quindi, individuare la casella “Misure”. Qui troverai le opzioni chiamate “Larghezza massima” e “Altezza massima”.

Si desidera modificare le dimensioni dell’immagine preferite. Se si desidera che l’immagine mantenga le stesse dimensioni, modificare solo l’altezza o la larghezza.

 Definire logo larghezza e altezza

Definisci larghezza e altezza del logo

Le modifiche apportate verranno visualizzate automaticamente sulla tua pagina.

Una volta che hai finito di cambiare la dimensione del tuo logo, devi fare clic su “Salva e pubblica” per rendere le tue modifiche live.

Speriamo che questo articolo ti abbia aiutato a cambiare la dimensione del tuo logo WordPress. Si consiglia inoltre di vedere le nostre scelte di esperti per il miglior software di chat dal vivo per le piccole imprese, e la nostra lista dei must have plugin WordPress per i siti web aziendali.

Se ti è piaciuto questo articolo, allora si prega di iscriversi al nostro canale YouTube per WordPress video tutorial. Potete anche trovarci su Twitter e Facebook.

Leave a Reply

Il tuo indirizzo email non sarà pubblicato.