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

Il logo del tuo sito web è una parte importante del tuo marchio. A seconda del tema WordPress che utilizzi, a volte non è chiaro come modificare le dimensioni del logo per ingrandirlo o rimpicciolirlo.

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

Perché cambiare la dimensione del logo in WordPress?

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

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

Se hai investito in un design del logo personalizzato, quindi assicurati che il tuo logo appaia della dimensione corretta nell’intestazione del tuo sito web.

Per coloro che sono ancora nel processo di progettazione del logo, guarda le nostre scelte di i migliori creatori di loghi gratuiti.

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

Il metodo che scegli dipenderà dal tema WordPress che stai utilizzando e dal tuo livello di comfort con la modifica del codice CSS.

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

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

Un sacco di temi popolari come Divi, Astra, Ultrae altri hanno uno strumento di modifica delle dimensioni del logo integrato.

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

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

Per motivi di tutorial, mostreremo come cambiare il tuo logo nel tema Divi, Astra e Ultra, ma il metodo è simile per la maggior parte temi WordPress popolari. Se il tuo tema non ha questa opzione, devi utilizzare il metodo 2 o 3 di questo tutorial.

Modifica la dimensione del logo WordPress nel tema Divi WordPress

Per prima cosa, vai a Divi » Personalizzatore di temi e fai clic sull’opzione di menu “Intestazione e navigazione”.

Seleziona il personalizzatore del tema Divi

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

Qui puoi modificare le dimensioni del tuo logo.

Seleziona la barra dei menu principale Divi

Innanzitutto, è necessario regolare l’impostazione “Altezza menu”. Questo controlla l’altezza dell’intero menu di navigazione e definirà quanto grande puoi realizzare il tuo logo.

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

Regola l'altezza del logo

Puoi regolare il cursore ‘Logo Max Height’ su e giù fino a trovare la dimensione del logo perfetta per il tuo blog WordPress.

Assicurati di fare clic sul pulsante “Pubblica” per salvare le modifiche prima di uscire dalla schermata.

Modifica la dimensione del logo WordPress nel tema Astra WordPress

La prima cosa che devi fare è navigare su Aspetto » Personalizza e quindi fare clic sull’opzione di menu “Intestazione”.

Personalizza il tema Astra

Successivamente, fai clic sull’opzione di menu “Identità del sito”.

Qui puoi facilmente regolare le dimensioni del tuo logo.

Fare clic sull'identità del sito in Astra

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

Puoi vedere automaticamente le modifiche alle dimensioni del tuo logo in tempo reale, mentre muovi il cursore.

Cursore larghezza logo Astra

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

Modifica la dimensione del logo WordPress nel tema Ultra WordPress

Per personalizzare la dimensione del logo in Tema ultra, navigare verso Aspetto » Personalizzae fai clic sulla voce di navigazione “Logo del sito e slogan”.

Logo e slogan del sito ultra clic

Successivamente, fai clic sul menu a discesa “Logo del sito”.

Quindi, seleziona il pulsante di opzione “Immagine logo” che appare.

Pulsante logo sito ultra clic

Ora puoi modificare le dimensioni del logo inserendo nuove dimensioni nelle caselle a destra dell’immagine del tuo logo. Se desideri che l’immagine venga ridimensionata in base alle dimensioni originali, inserisci solo le nuove dimensioni del logo in una casella.

Puoi modificare la larghezza con il riquadro a sinistra e l’altezza con il riquadro a destra.

Modifica l'altezza e la larghezza del logo

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

Una volta che hai finito di personalizzare le dimensioni del tuo logo, assicurati di fare clic sul pulsante “Pubblica”.

Se il tuo tema non è evidenziato sopra, c’è ancora la possibilità che tu possa personalizzare le dimensioni del tuo logo usando il Personalizzatore WordPress WordPress.

Vai semplicemente a Aspetto » Personalizza su qualunque tema tu stia utilizzando e guarda quali opzioni di personalizzazione sono disponibili per il tuo logo o intestazione.

Metodo 2. Modifica la dimensione del logo WordPress modificando CSS

Se il tuo tema WordPress non supporta la modifica delle dimensioni del logo utilizzando il personalizzatore del tema WordPress, puoi modificare le dimensioni aggiungendo CSS personalizzati.

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

Quindi, fai clic con il pulsante destro del mouse in qualsiasi punto della pagina e seleziona l’opzione “Ispeziona”. Questo farà apparire un menu Ispeziona che mostra tutto il codice per la pagina.

Ispezione tasto destro

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

Ciò ti consentirà di selezionare l’elemento del logo del tuo sito Web e visualizzare il codice.

Fare clic sull'icona seleziona un elemento

Successivamente, passa semplicemente il mouse sopra il logo del tuo sito Web fino a quando non viene visualizzata la classe CSS. Sarà simile all’immagine qui sotto.

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

Logo CSS classe

Ora puoi tornare alla dashboard di amministrazione di WordPress e accedere 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

Aggiungi semplicemente la classe CSS che hai trovato in precedenza e specifica le nuove dimensioni dell’immagine. Puoi utilizzare il codice CSS di seguito come esempio.


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

Devi cambiare il img.custom-logo Classe CSS sopra alla classe CSS utilizzata dal tuo tema.

Puoi anche cambiare il max-height a qualsiasi dimensione tu voglia.

Ecco come appare all’interno del personalizzatore di WordPress.

Personalizzatore CSS aggiuntivo per WordPress

Una volta apportate le modifiche, è sufficiente fare clic sul pulsante “Pubblica” per rendere attive le modifiche.

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

Se non ti senti a tuo agio nel modificare i file del tema o nell’aggiungere CSS personalizzati, allora questo metodo fa per te.

Utilizzando un plugin per lo stile di WordPress, puoi apportare modifiche visive al tuo sito in modo simile all’utilizzo di a trascina e rilascia il generatore di pagine.

Si consiglia di utilizzare Eroe CSS. È 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.

Affare: I lettori di WPBeginner possono ottenere uno sconto del 34% tramite il nostro Codice coupon CSS Hero.

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

Dopo l’attivazione, è necessario fare clic sul pulsante “Procedi all’attivazione del prodotto” per attivare il plug-in. Si trova proprio sopra l’elenco dei plug-in installati.

Attiva il plugin CSS Hero

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

Successivamente, fai clic su “Personalizza con” Eroe CSS‘ nella parte superiore della barra degli strumenti di amministrazione di WordPress.

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 (What You See Is What You Get).

Quando fai clic su qualsiasi elemento della tua pagina, verrà visualizzata una barra degli strumenti a sinistra per effettuare personalizzazioni.

Anteprima CSS Hero

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

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

Fare clic su mostra oggetti di scena avanzati

Questo ti offre ancora più opzioni di personalizzazione CSS.

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

Vuoi cambiarli nella dimensione dell’immagine che preferisci. Se vuoi che l’immagine mantenga le stesse dimensioni, cambia solo l’altezza o la larghezza.

Definisci larghezza e altezza del logo

Le modifiche apportate verranno visualizzate automaticamente sulla tua pagina.

Una volta che hai finito di modificare le dimensioni del tuo logo, devi fare clic su “Salva e pubblica” per rendere attive le modifiche.

Speriamo che questo articolo ti abbia aiutato a cambiare la dimensione del tuo logo WordPress. Potresti anche voler vedere le nostre scelte di esperti per il miglior software di chat dal vivo per le piccole imprese, e il nostro elenco dei deve avere plugin WordPress per siti web aziendali.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Ci trovi anche su Twitter e Facebook.



Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.