Så här ändrar du din WordPress-Logotypstorlek (fungerar med alla teman)
nyligen frågade en av våra läsare om det var möjligt att ändra din logotypstorlek i WordPress?
din webbplats logotyp är en viktig del av ditt varumärke. Beroende på vilket WordPress-tema du använder är det ibland inte klart hur du ändrar din logotypstorlek för att göra den större eller mindre.
i den här artikeln visar vi dig hur du enkelt ändrar WordPress-logotypstorleken steg för steg.
varför ändra storleken på logotypen i WordPress?
när du laddar upp din logotyp till WordPress kanske den inte alltid har rätt storlek.
en logotyp som är för liten sticker inte ut. Medan en logotyp som är för stor kan hamna negativt påverka utformningen av din webbplats.
om du har investerat i en anpassad logotypdesign vill du se till att din logotyp visas som rätt storlek i din webbplatshuvud.
för dem som fortfarande är i logotypdesignprocessen, se våra val av de bästa gratis logotyptillverkarna.
med det sagt visar vi dig några olika sätt som du kan använda för att ändra logotypstorleken i WordPress.
metoden du väljer beror på WordPress-temat du använder och din komfortnivå med redigering av CSS-kod.
- ändra WordPress-logotypstorleken med WordPress customizer
- ändra WordPress-logotypstorleken genom att redigera CSS-kod
- ändra WordPress-logotypstorleken utan att redigera CSS-kod
Metod 1. Ändra WordPress-Logotypstorleken med WordPress Customizer
det enklaste och enklaste sättet att ändra logotypstorleken i WordPress är att använda temaanpassaren. Denna metod fungerar dock bara om ditt WordPress-tema stöder det.
många populära teman som Divi, Astra, Ultra och andra har ett inbyggt verktyg för logotypstorlek.
när du laddar upp din logotyp i WordPress gör dessa teman det enkelt att justera logotypen med en enkel skjutreglage som du kan använda för att justera bredd och höjd.
Obs: din logotypstorlek blir bara lika stor som bilden du laddar upp, så du vill se till att du laddar upp en större logotypbild om ditt mål är att göra den större.
för handledningens skull visar vi hur du ändrar din logotyp i Divi, Astra och Ultra-tema, men metoden är liknande för de flesta populära WordPress-teman. Om ditt tema inte har det här alternativet måste du använda metoden 2 eller 3 i denna handledning.
ändra WordPress-Logotypstorleken i Divi WordPress Theme
navigera först till Divi ”Theme Customizer och klicka på menyalternativet ”Header & Navigation”.
klicka sedan på rullgardinsmenyn ’primär menyrad’.
här kan du ändra storleken på din logotyp.
först måste du justera inställningen ’Menyhöjd’. Detta styr höjden på hela navigeringsmenyn och definierar hur stor du kan göra din logotyp.
därefter kan du ändra inställningen ’Logo Max Height’, som är en procentandel av den totala menyhöjden.
du kan justera skjutreglaget ’Logo Max Height’ upp och ner tills du hittar den perfekta logotypstorleken för din WordPress-blogg.
se till att klicka på ’Publicera’ – knappen för att spara dina ändringar innan du lämnar skärmen.
ändra WordPress-Logotypstorleken i Astra WordPress-temat
det första du behöver göra är att navigera till Utseende ”Anpassa och klicka sedan på menyalternativet ”Header”.
klicka sedan på menyalternativet ’Site Identity’.
här kan du enkelt justera storleken på din logotyp.
allt du behöver göra är att flytta skjutreglaget ’Logotypbredd’ till vänster eller höger.
du kan automatiskt se din logotyp storlek ändras i realtid, när du flyttar reglaget.
när du är nöjd med storleken på din logotyp, se till att klicka på ’Publicera’ innan du lämnar sidan.
ändra WordPress-Logotypstorleken i Ultra WordPress-temat
för att anpassa logotypstorleken i Ultra-temat, navigera till Utseende ”Anpassa och klicka på navigeringsobjektet” Site Logo & Tagline”.
därefter klickar du på rullgardinsmenyn ’Webbplatslogotyp’.
välj sedan alternativknappen ’logotypbild’ som visas.
nu kan du ändra storleken på logotypen genom att ange nya dimensioner i rutorna till höger om din logotyp bild. Om du vill att bilden ska skala baserat på originalstorleken anger du bara nya logotypdimensioner i en ruta.
du kan ändra bredden med rutan till vänster och höjden med rutan till höger.
när du anger nya dimensioner ser du storleken på din logotyp i realtid.
när du är klar med att anpassa storleken på din logotyp, se till att klicka på ’Publicera’ – knappen.
om ditt tema inte är markerat ovan finns det fortfarande en chans att du kan anpassa storleken på din logotyp med hjälp av WordPress customizer.
gå bara till Utseende ” Anpassa på vilket tema du använder och se vilka anpassningsalternativ som finns tillgängliga för din logotyp eller rubrik.
Metod 2. Ändra WordPress-Logotypstorleken genom att redigera CSS
om ditt WordPress-tema inte stöder att ändra logotypstorleken med WordPress theme customizer kan du ändra storleken genom att lägga till anpassad CSS.
det första du behöver göra är att navigera till din webbplats hemsida.
högerklicka var som helst på sidan och välj alternativet ’inspektera’. Detta kommer att visa en Inspektionsmeny som visar all kod för sidan.
därefter måste du klicka på ikonen ’Välj ett element’ som ser ut som en muspekare.
detta låter dig välja logotypelementet på din webbplats och visa koden.
håll sedan muspekaren över din webbplatslogotyp tills CSS-klassen dyker upp. Det kommer att se ut som bilden nedan.
du använder den här CSS-klassen för att anpassa storleken på din WordPress-logotyp. Så skriv ner detta i en textredigerare som anteckningsblock.
nu kan du gå tillbaka till din WordPress admin dashboard och navigera till Utseende ” Anpassa. Du måste klicka på menyalternativet ’ytterligare CSS’.
detta kommer att ta upp en rullgardinsmeny där du kan lägga till anpassad CSS-kod.
lägg bara till CSS-klassen du hittade tidigare och ange de nya bilddimensionerna. Du kan använda CSS-koden nedan som ett exempel.
img.custom-logo { max-height: 100px !important;}
du måste ändra img.custom-logo CSS-klassen ovan till CSS-klassen som ditt tema använder.
du kan också ändra max-height till vilken storlek du vill.
så här ser det ut i WordPress customizer.
när du har gjort dina ändringar klickar du bara på knappen Publicera för att göra dina ändringar live.
Metod 3. Ändra WordPress-Logotypstorleken utan att redigera CSS
om du inte är bekväm att redigera temafiler eller lägga till anpassad CSS, är den här metoden för dig.
genom att använda ett WordPress-stylingplugin kan du göra visuella ändringar på din webbplats som att använda en dra-och-släpp-sidbyggare.
vi rekommenderar att du använder CSS Hero. Det är ett styler-plugin som låter dig redigera nästan alla CSS-stilar på din WordPress-webbplats utan att skriva en enda rad CSS-kod.
Deal: WPBeginner läsare kan få en 34% rabatt genom vår CSS Hero kupongkod.
det första du behöver göra är att installera och aktivera plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.
vid aktivering måste du klicka på knappen ’Fortsätt till produktaktivering’ för att aktivera plugin. Det ligger precis ovanför din lista över installerade plugins.
detta tar dig till en skärm där du kan ange ditt användarnamn och lösenord. Följ bara instruktionerna på skärmen, och du kommer att omdirigeras tillbaka till din webbplats när ditt konto har verifierats.
klicka sedan på knappen ’Anpassa med CSS Hero’ högst upp i verktygsfältet WordPress admin.
detta tar dig till din webbplats med CSS Hero som körs ovanpå den. CSS Hero använder en WYSIWYG (vad du ser är vad du får) redaktör.
när du klickar på något element på din sida kommer det att visa ett verktygsfält till vänster för att göra anpassningar.
klicka sedan på din WordPress-logotyp högst upp på sidan.
klicka sedan på länken ’Visa avancerade rekvisita’.
detta ger dig ännu fler CSS-anpassningsalternativ.
Leta sedan upp rutan ’åtgärder’. Här hittar du alternativ som kallas ’Max Width’ och ’Max Height’.
du vill ändra dessa till den bildstorlek du föredrar. Om du vill att bilden ska behålla samma dimensioner, ändra bara höjden eller bredden.
ändringarna du gör visas automatiskt på din sida.
när du är klar med att ändra storleken på din logotyp måste du klicka på ’Spara och publicera’ för att göra dina ändringar live.
vi hoppas att den här artikeln hjälpte dig att ändra din WordPress-logotypstorlek. Du kanske också vill se våra expertval för den bästa chattprogramvaran för småföretag, och vår lista över måste ha WordPress-plugins för företagswebbplatser.
om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.