Så här ändrar du storleken på din WordPress-logotyp (fungerar med alla teman)

Vill du lära dig hur du ändrar storleken på din WordPress logga?

Logotypen på din website är en viktig del av ditt varumärke, så du vill se till att den ser bra ut. Ibland är det dock inte clear hur man gör loggan större eller mindre.

I den här artikeln visar vi dig hur du enkelt kan ändra storleken på WordPress-logotypen i alla teman.

Varför ändra storleken på logotypen i WordPress?

Oavsett om du anlitar någon för att designa en customize-logotyp för din WordPress-webbplats eller designar en själv med hjälp av en gratis logo maker, är logotyper en viktig del av alla webbplatser.

Standardstorleken på WordPress images kanske dock inte fungerar för din logga.

En logga som är för liten kommer inte att sticka ut, medan en logga som är för stor kan distrahera visitorerna från resten av ditt content.

Även om du kan göra grundläggande image edit i WordPress, är din sites logo en viktig del av ditt varumärke så du vill se till att den ser bra ut. Med detta sagt, låt oss se hur du korrekt kan ändra storleken på logotypen i WordPress. Använd bara snabblänkarna under för att hoppa till den metod du vill använda:

Metod 1: Ändra storleken på logotypen med WordPress Customize (rekommenderas)

Det enklaste och smidigaste sättet att ändra storleken på loggan i WordPress är att använda theme customizer. Denna metod fungerar dock bara om ditt theme stöder ytterligare storlekar på images i WordPress.

Den goda nyheten är att många av de populära teman kommer med built-in tools för att resize loggan, inklusive Divi, Astra och Ultra.

Note: Din logga kommer bara att vara lika stor som den image du laddar upp, så se till att uploada en större image om du vill göra loggan större.

I den här guiden visar vi dig hur du ändrar din logga i teman Divi, Astra och Ultra, men metoden är liknande för de flesta populära teman för WordPress.

Även om vi inte täcker ditt specifika theme, är det fortfarande värt att se om du kan ändra storleken på logotypen med hjälp av WordPress customizer.

Gå bara till Appearance ” Customize och leta efter alla inställningar som är märkta Header, Site Identity, Logo eller liknande.

Om du inte ser dessa inställningar kan du alltid kontrollera dokumentationen för ditt theme eller kontakta utvecklaren för att få hjälp. För mer information om detta ämne, vänligen se vår guide om hur man korrekt ber om WordPress support och får det.

Om your theme inte har en built-in logo editor, då måste du använda metod 2 eller 3.

Ändra storleken på WordPress-logotypen i Divi WordPress Theme

Gå först till Divi ” Theme Customize och click på ’Header & Navigation’.

Därefter väljer du ”Primary Menu Bar”.

Här kan du ändra storleken på din logga. Du kan t.ex. visa den som en fullstor image.

Först måste du justera inställningen ”Menu Height”. Detta kontrollerar höjden på hela din navigation menu, som kommer att definiera hur stor du kan göra din logga.

Efter det kan du ändra inställningen ”Logo Max Height”, som är en procentandel av den totala höjden på menyn.

Du kan dra slidern ”Logo Max Height” upp och ner tills du hittar den perfekta storleken för din WordPress-blogg.

När du är nöjd med hur logotypen ser ut, se till att du klickar på ”Publicera” innan du stänger WordPress Customize.

Ändra storleken på WordPress-logotypen i Astra WordPress Theme

Om du använder Astra theme, gå till Appearance ” Customize och click the ’Header Builder’ menu option.

Efter det klickar du på alternativet ”Site Rubrik & Logo” i menyn.

Här kan du enkelt ändra storleken på din logga.

Dra helt enkelt slidern ”Logo Width” åt vänster eller höger för att göra logotypen större eller mindre.

WordPress Customize kommer att visa dessa ändringar i sin Live Preview, så att du kan prova olika storlekar för att se vad som ser bäst ut för din WordPress website.

När du är nöjd med hur logotypen ser ut klickar du på ”Publicera” för att lägga upp den på din website.

Ändra storleken på WordPress-logotypen i Ultra WordPress Theme

För att anpassa storleken på logotypen i Ultra-temat, gå till Appearance ” Customize, och click ’Site Logo & Tagline’ i den vänstra menyn.

Efter det klickar du på dropdown ’Site Logo’.

När det visas väljer du alternativknappen ”Logo Image”.

Nu kan du göra loggan större eller mindre genom att skriva in new storlekar i boxarna.

Du kan ändra bredden med hjälp av boxen till vänster och höjden med hjälp av boxen till höger.

Om du vill skala logotypen baserat på originalstorleken ändrar du bara dimensionerna i en box.

När du skriver in nya dimensioner ändras storleken på logotypen i realtid.

När you är nöjd med hur loggan ser ut, gå vidare och klicka på ”Publicera” för att göra dina ändringar live.

Metod 2: Ändra storleken på WordPress-logotypen med hjälp av hela Site Editor (endast block-baserade teman)

Om du använder ett blockbaserat theme som Hestia Pro, kan du resize images utan att förlora kvaliteten, med hjälp av hela site editor.

ändra storleken på logotypen med hjälp av hela Site Editor.

För att komma igång går du bara till Themes ” Editor i WordPress dashboard.

Som standard kommer hela Site Editor att visa ditt temas hemmamall.

Om du vill resizea din sites logo väljer du vanligtvis ”Patterns”.

Editorn kommer nu att visa en lista över alla mönster och templates som utgör ditt theme.

Klicka bara på alternativet Header, som kontrollerar layouten på din bloggs header.

WordPress kommer nu att visa alla delar av Header templates som utgör det aktuella temat. Hitta bara den Header du vill editera och ge den ett click.

Du kommer nu att se en preview av den header-mallen. För att gå vidare och edit mallen, click på den lilla penna ikonen.

När du har gjort det klickar du på för att selecta din sites logo.

I den högra menyn väljer du tabben ”Block”.

Välj sedan tabben ”Settings”.

Du kan nu göra loggan större eller mindre genom att dra i slidern ”Image Width”.

När du är nöjd med hur logotypen ser ut klickar du på knappen ”Save”.

Nu, om du besöker din website, kommer du att se den nya loggan i action.

Metod 3: Ändra storleken på WordPress-logotypen genom att editera CSS (fungerar med de flesta teman)

Om ditt WordPress-tema inte har inbyggt support för att ändra storleken på logotypen, är ett annat alternativ att lägga till custom CSS. Detta allow you att resize din logga utan att använda ett separat plugin för bildoptimering.

För att börja behöver du veta CSS-klassen för logotypen på din website. För att få den här informationen går du till en page som har logotypen, till exempel din sites homepage.

Här högerklickar du var som helst på den sidan och väljer alternativet ”Inspect”.

Då öppnas en Inspect-meny som visar all kod för homepage.

Därefter klickar du på ikonen ”Select an element”, som gillar en muspekare.

Därefter hoverar du bara musen över logotypen för din website tills CSS-klassen dyker upp.

Den kommer att se ut ungefär som på bilden under.

Du kommer att använda denna CSS-klass för att customize storleken på din WordPress-logotyp, så gör en anteckning om klassen i en textredigerare som Notepad.

I WordPress dashboard går du till Appearance ” Customize. Klicka sedan på alternativet ”Ytterligare CSS”.

Du kan nu add to customizer CSS-kod till den lilla code editor.

Lägg bara till CSS-klassen som du hittade tidigare och ange sedan de nya dimensionerna för logotypen som du vill använda.

Här är ett exempel på hur koden kommer att se ut:

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

Se till att du ändrar CSS-klassen img.custom-logo och max-höjdvärdet.

När du har gjort dina ändringar klickar du bara på knappen ”Publicera” för att göra dem live.

Metod 4: Ändra storleken på WordPress-logotypen utan att editera CSS (ingen kod)

Om du inte är bekväm med att editera temafiler eller lägga till custom CSS, kan du använda ett WordPress CSS plugin istället. Dessa tillägg tillåter dig att göra visuella ändringar på din site, på samma sätt som att använda en drag and drop page builder.

Vi rekommenderar att du använder CSS Hero eftersom det allow you att optimera images och customize nästan alla CSS-stilar utan att skriva en enda rad CSS-kod.

Erbjudande: WPBeginners läsare kan få 40% rabatt genom vår CSS Hero kupongkod.

Det första du behöver göra är att installera och aktivera pluginet. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering klickar du på knappen ”Proceed to Product Activation” för att aktivera pluginet. You will find it right above your list of installed plugins.

Detta kommer att leda dig till en vy där du kan enter ditt användarnamn och password. Följ bara instruktionerna på skärmen för att kontrollera ditt account, och du kommer att skickas tillbaka till WordPress dashboard när du är slutförd.

Därefter klickar du på knappen ”Customize with CSS Hero” i admin-verktygsfältet i WordPress.

You will now see your website with CSS Hero running on top of it.

CSS Hero använder en WYSIWYG (What You See Is What You Get) editor, så klicka bara på något element på sidan, så ser du en toolbar med alla customizers du kan göra.

Klicka bara på din WordPress logga högst upp på page.

Därefter väljer du länken ”Show Advanced Props” för att se alla ändringar du kan göra i din WordPress logga.

I boxen ”Measures” hittar du alternativen ”Max Width” och ”Max Height”.

Om du vill ändra storleken på logotypen skriver du helt enkelt in new siffror i dessa fält. Om du vill behålla de ursprungliga dimensionerna på imagen ändrar du bara höjden eller bredden.

Live Preview visar dina ändringar automatiskt. Det innebär att du kan prova olika storlekar för att se vad som ser bäst ut.

När du är nöjd med hur din logga ser ut klickar du på ”Save and Publicera” för att aktivera loggan i resize.

Vi hoppas att den här artikeln hjälpte dig att ändra storleken på din logga. Du kanske också vill se vårt expertval av de bästa WordPress-tilläggen för hantering av images, eller se vår guide om hur du väljer det bästa bildformatet för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.