Lettergrootte aanpassen in Wordpress 💥
Werken met de Gutenberg-editor is een ramp, dus het is het gemakkelijkst om met een goede paginabuilder te werken. Ik raad Elementor aan, het is perfect om snel en professioneel websites te bouwen. Maar of we nu werken met Elementor of Gutenberg maakt niet uit. De beste plaats om de lettergrootte te wijzigen, zijn de thema-instellingen, omdat dit voor de hele site zorgt.
Advertisement
LETTERTYPE WIJZIGEN MET ONS THEMA
Alle goede thema's werken samen met de Wordpress Customizer, dus daar gaan we in de eerste plaats naartoe. Ga in je back-end naar "Appearance" >> "Customize" zoals hieronder in de afbeelding wordt getoond.
Nu krijg je het volgende scherm. Het is afhankelijk van het thema hoe de menu's zijn opgezet, maar ze werken allemaal erg op elkaar. Ik gebruik hier het "Phlox-thema" (afbeelding hieronder), maar elk ander thema heeft ook typografische instellingen. Het zal voor 90% zeker in het algemene hoofdstuk staan of misschien is er zelfs een typografiehoofdstuk vanaf het begin in het menu van de Customizer.
Hier kunnen alle fonts bewerkt worden, van het body font, en h1 t/m h6. Niet alleen de lettergrootte kan worden gewijzigd, maar ook de lettertypefamilie, letterstijl en lettergewicht. Het is het meest logisch om de dingen hier precies zo in te stellen als u wilt.
LETTERGROOTTE WIJZIGEN MET ELEMENTOR
Elke pagina begint met de titel. Het is het beste om de normale paginatitel weer te geven en deze niet te laten controleren door Elementor. Het is het beste omdat de datum, auteur en meer informatie normaal gesproken net onder de paginatitel staan en dat zal niet langer het geval zijn als Elementor de controle overneemt. De rest van de pagina zal worden gebouwd met Elementor en we zullen de typografie beheren met Elementor. Met andere woorden, de lettergrootte kan met Elementor worden bewerkt voor alle ondertitels en het hoofdlettertype. Open eerst een bericht of pagina met Elementor zoals hieronder weergegeven door op "bewerken met Elementor" te klikken.
Deze link verschijnt alleen voor berichten/pagina's die zijn gemaakt met Elementor. Nadat u op de link heeft geklikt, klikt u op het hamburgermenu in de linkerbovenhoek en kiest u "Site-instellingen" uit het menu. Daarna ziet u de volgende volgorde zoals hieronder in de afbeelding. Zoals je kunt zien lijkt het erg op de mogelijkheden met de Customizer, alleen heeft Elementor meer instellingen voor Fonts.
LETTERGROOTTE AANPASSEN MET GUTENBERG
Ik raad het ten zeerste af om met Gutenberg te werken, maar voor degenen die het wel een fijne editor vinden, geef ik hier de manier om de lettergrootte aan te passen.
Dit zijn de stappen om lettergroottes te wijzigen met de Gutenberg Editor.
- Selecteer de pagina of het bericht dat je wilt bewerken.
- Klik op het tekstblok dat u wilt bewerken en selecteer vervolgens handmatig het nummer.
LETTERGROOTTE VERANDEREN MET AANGEPASTE CSS
Het wijzigen van de CSS is zeker niet mijn favoriete oplossing, maar het is zeker een optie die we moeten bespreken. Voor deze methode zullen we ook de hieronder getoonde Wordpress Customizer openen.
Dit keer kiezen we voor de optie "Custom CSS" of "Additional CSS" die je onderaan het menu kunt vinden. Hier gaan we onze aangepaste CSS toevoegen om de lettergroottes te bewerken.
Om het hele lettertype te wijzigen:
body {
font-size: 15px;
}Om het alinealettertype te bewerken:
p {
font-size: 23px;
}Om een bepaalde koplettertype te wijzigen:
h2 {
font-size: 2.4em;
}Het lettertype van de zijbalk wijzigen:
.sidebar li {
font-size: 12px;
}Responsieve lettertypen wijzigen:
html {
font-size: 16px;
}
@media (min-width: 920px) {
html {
font-size: 21px;
}
}Om het lettertype van de voettekst te wijzigen:
.footer {
font-size: 130%;
}Advertisement