Hoe u uw WordPress Logo grootte te veranderen (werkt met een thema)
onlangs vroeg een van onze lezers of het mogelijk was om uw logo grootte te veranderen in WordPress?
uw websitelogo is een belangrijk onderdeel van uw merk. Afhankelijk van het WordPress thema dat u gebruikt, soms is het niet duidelijk over hoe u uw logo grootte te veranderen om het groter of kleiner te maken.
in dit artikel laten we u stap voor stap zien hoe u eenvoudig de grootte van het WordPress-logo kunt wijzigen.
waarom de grootte van het Logo in WordPress veranderen?
wanneer u uw logo uploadt naar WordPress, is het misschien niet altijd de juiste grootte.
een te klein logo zal niet opvallen. Terwijl, een logo dat is te groot kan uiteindelijk een negatieve invloed op het ontwerp van uw website.
als u hebt geïnvesteerd in een aangepast logo ontwerp, dan wilt u ervoor zorgen dat uw logo verschijnt als de juiste grootte in uw website header.
voor degenen die nog in het logo ontwerp proces, zie onze picks van de beste gratis logo makers.
dit gezegd zijnde, laten we u een paar verschillende manieren zien die u kunt gebruiken om de grootte van het logo in WordPress te veranderen.
de methode die u kiest is afhankelijk van het WordPress thema dat u gebruikt, en uw comfortniveau met het bewerken van CSS-code.
- verander de grootte van het WordPress-logo met WordPress customizer
- Verander de grootte van het WordPress-logo door CSS-code
- Verander de grootte van het WordPress-logo zonder CSS-code
Methode 1. Verander de grootte van het WordPress Logo met WordPress Customizer
de eenvoudigste en eenvoudigste manier om de grootte van het logo in WordPress te veranderen is met behulp van het thema customizer. Echter, deze methode werkt alleen als uw WordPress thema ondersteunt.
veel populaire thema ‘ s zoals Divi, Astra, Ultra en anderen hebben een ingebouwde logogrootte-wisselaar.
wanneer u uw logo uploadt in WordPress, maken deze thema ‘ s het eenvoudig om het logo aan te passen met een eenvoudige schuifregelaar die u kunt gebruiken om de breedte en hoogte aan te passen.
Opmerking: uw logo grootte zal alleen zo groot zijn als de afbeelding die u uploadt, dus u wilt ervoor zorgen dat u een grotere logo afbeelding uploadt, als uw doel is om het groter te maken.
omwille van de tutorial, zullen we laten zien hoe u uw logo te veranderen in Divi, Astra, en Ultra thema, maar de methode is vergelijkbaar voor de meest populaire WordPress thema ‘ s. Als uw thema heeft deze optie niet, dan moet u de methode 2 of 3 van deze tutorial te gebruiken.
Wijzig de grootte van het WordPress-Logo in Divi WordPress Theme
ga eerst naar Divi “Theme Customizer en klik op de menuoptie ‘header & navigatie’.
daarna klikt u op de keuzelijst ‘primaire menubalk’.
Hier kunt u de grootte van uw logo wijzigen.
eerst moet u de instelling ‘Menuhoogte’ aanpassen. Dit bepaalt de hoogte van uw gehele navigatiemenu en bepaalt hoe groot u uw logo kunt maken.
daarna kunt u de instelling ‘Logo Max Height’ wijzigen, wat een percentage is van de totale menuhoogte.
u kunt de schuifregelaar ‘Logo Max Height’ op en neer aanpassen totdat u het perfecte logo formaat voor uw WordPress blog vindt.
klik op de knop ‘Publiceren’ om uw wijzigingen op te slaan voordat u het scherm verlaat.
Wijzig de grootte van het WordPress-Logo in Astra WordPress Theme
het eerste wat u moet doen is navigeren naar uiterlijk ” aanpassen en klik vervolgens op de menu-optie ‘Header’.
klik daarna op de menuoptie’ Site Identity’.
Hier kunt u eenvoudig de grootte van uw logo aanpassen.
het enige wat u hoeft te doen is de schuifregelaar ‘Logo Width’ naar links of rechts verplaatsen.
u kunt automatisch zien dat de grootte van uw logo verandert in real time, terwijl u de schuifregelaar verplaatst.
als u tevreden bent met de grootte van uw logo, klikt u op ‘publiceren’ voordat u de pagina verlaat.
Wijzig de grootte van het WordPress-Logo in Ultra WordPress Theme
om de grootte van het logo in Ultra theme aan te passen, navigeert u naar uiterlijk ” aanpassen, en klikt u op het navigatie-item ‘Site Logo & Tagline’.
klik daarna op de’ Site Logo ‘ drop down.
selecteer vervolgens de keuzerondje’ Logo afbeelding ‘ die verschijnt.
nu kunt u de grootte van het logo wijzigen door nieuwe afmetingen in te voeren in de vakken rechts van uw logo afbeelding. Als u de afbeelding wilt schalen op basis van de oorspronkelijke grootte, voer dan alleen nieuwe logo-afmetingen in één doos.
u kunt de breedte wijzigen met het kader aan de linkerkant, en de hoogte met het kader aan de rechterkant.
Als u nieuwe afmetingen invoert, ziet u de grootte van uw logo in real time veranderen.
Als u klaar bent met het aanpassen van de grootte van uw logo, klik dan op de knop ‘Publiceren’.
als uw thema hierboven niet is gemarkeerd, dan is er nog steeds een kans dat u de grootte van uw logo kunt aanpassen met behulp van de WordPress customizer.
ga gewoon naar uiterlijk ” aanpassen op welk thema u ook gebruikt en zie welke aanpassingsopties beschikbaar zijn voor uw logo of header.
Methode 2. Verander de grootte van het WordPress Logo door CSS
te bewerken als uw WordPress thema geen ondersteuning biedt voor het wijzigen van de grootte van het logo met behulp van de WordPress theme customizer, dan kunt u de grootte wijzigen door aangepaste CSS toe te voegen.
het eerste wat u moet doen is naar de homepage van uw website navigeren.
klik vervolgens met de rechtermuisknop ergens op de pagina en selecteer de optie ‘inspecteren’. Dit zal een inspecteer menu dat alle code voor de pagina toont.
daarna moet u op het pictogram ‘Selecteer een element’ klikken dat eruit ziet als een muisaanwijzer.
Hiermee kunt u het logo-element van uw website selecteren en de code bekijken.
ga vervolgens met de muisaanwijzer over uw website-logo totdat de CSS-klasse verschijnt. Het zal lijken op de afbeelding hieronder.
u gebruikt deze CSS-klasse om de grootte van uw WordPress-logo aan te passen. Schrijf dit op in een teksteditor zoals Kladblok.
nu kunt u terug naar uw WordPress admin dashboard en navigeer naar uiterlijk ” aanpassen. U moet klikken op de’ extra CSS ‘ menu optie.
dit geeft een vervolgkeuzelijst weer waarin u aangepaste CSS-code kunt toevoegen.
voeg gewoon de CSS-klasse toe die u eerder hebt gevonden en geef de nieuwe afbeeldingsafmetingen op. U kunt de onderstaande CSS code als voorbeeld gebruiken.
img.custom-logo { max-height: 100px !important;}
u moet de img.custom-logo CSS-klasse hierboven wijzigen in de CSS-klasse die uw thema gebruikt.
u kunt de max-height ook wijzigen naar de gewenste grootte.
hier is hoe het eruit ziet in de WordPress customizer.
zodra u uw wijzigingen hebt aangebracht, klikt u op de knop ‘Publiceren’ om uw wijzigingen live te maken.
Methode 3. Wijzig de grootte van het WordPress-Logo zonder CSS
te bewerken als u niet comfortabel bent om themabestanden te bewerken of aangepaste CSS toe te voegen, dan is deze methode iets voor u.
door gebruik te maken van een WordPress styling plugin, kunt u visuele wijzigingen aanbrengen aan uw site, vergelijkbaar met het gebruik van een drag and drop Page builder.
we raden aan CSS Hero te gebruiken. Het is een styler plugin waarmee je bijna elke CSS-stijl op uw WordPress site te bewerken zonder het schrijven van een enkele regel van CSS-code.
Deal: WPBeginner reader ‘ s kan krijgen een 34% korting via onze CSS Hero coupon code.
het eerste wat u moet doen is de plugin installeren en activeren. Voor meer informatie, zie onze stap voor stap handleiding over het installeren van een WordPress plugin.
na activering moet u op de knop ‘Doorgaan naar Product Activatie’ klikken om de plugin te activeren. Het bevindt zich recht boven uw lijst met geïnstalleerde plugins.
dit brengt u naar een scherm waar u uw gebruikersnaam en wachtwoord kunt invoeren. Volg gewoon de instructies op het scherm en u wordt teruggestuurd naar uw site zodra uw account is geverifieerd.
klik daarna op de knop’ aanpassen met CSS Hero ‘ bovenaan uw WordPress admin werkbalk.
dit brengt u naar uw website met CSS Hero die erop draait. CSS Hero gebruikt een WYSIWYG (What You See is What You Get) editor.
wanneer u op een element van uw pagina klikt, verschijnt er een werkbalk aan de linkerkant om aanpassingen te maken.
klik vervolgens op uw WordPress logo bovenaan de pagina.
klik daarna op de link ‘Geavanceerde rekwisieten tonen’.
dit geeft u nog meer CSS-aanpassingsopties.
Zoek vervolgens het vak ‘maatregelen’. Hier vindt u opties genaamd ‘Max Width’ en ‘Max Height’.
u wilt deze wijzigen naar de afbeeldingsgrootte die u verkiest. Als u wilt dat de afbeelding dezelfde afmetingen behoudt, verander dan alleen de hoogte of de breedte.
de wijzigingen die u aanbrengt zullen automatisch op uw pagina verschijnen.
Als u klaar bent met het wijzigen van de grootte van uw logo, klikt u op ‘Opslaan en publiceren’ om uw wijzigingen live te maken.
we hopen dat dit artikel u heeft geholpen uw WordPress-logo te veranderen. U kunt ook willen zien onze deskundige picks voor de beste live chat software voor kleine bedrijven, en onze lijst van de must-have WordPress plugins voor zakelijke websites.
als u dit artikel leuk vond, abonneer u dan op ons YouTube-kanaal voor WordPress video tutorials. U kunt ons ook vinden op Twitter en Facebook.