Hoe WordPress Theme Customizer als een professional te gebruiken (Ultimate Guide)

Wist je dat WordPress wordt geleverd met een ingebouwde thema-aanpasser waarmee je eenvoudig in realtime wijzigingen kunt aanbrengen in het ontwerp van je website.


Hoewel elk thema enige mate van ondersteuning biedt voor de standaardaanpasseropties, bevatten veel thema’s extra tabbladen en opties voor de WordPress-themaaanpasser, zodat u uw thema eenvoudig kunt aanpassen zonder kennis van codering.

In dit artikel zullen we je door de standaardpanelen leiden en je laten zien hoe je de WordPress-thema-aanpasser als een professional kunt gebruiken.

Hoe WordPress Theme Customizer Ultimate Guide te gebruiken

Toegang krijgen tot de WordPress Theme Customizer

Theme customizer is een standaard WordPress-functie en maakt deel uit van elke WordPress-website.

U kunt er toegang toe krijgen door u aan te melden bij uw WordPress-beheergebied en vervolgens naar te gaan Verschijning » Aanpassen vanaf de linkerzijbalk van uw WordPress-beheerderspaneel. Hierdoor wordt de Customizer-interface geopend met uw huidige thema.

Toegang krijgen tot WordPress Customizer

U kunt ook de WordPress-thema-aanpassingspagina gebruiken voor alle geïnstalleerde thema’s op uw website, zelfs als ze niet actief zijn.

Hierdoor kunt u een live voorbeeld van dat thema zien en wijzigingen aanbrengen voordat u het activeert.

Om dat te doen, moet je naar toe gaan Verschijning » Thema’s bladzijde.

Beweeg vervolgens uw muiscursor over een geïnstalleerd thema en klik op Live voorvertoning knop om de pagina voor het aanpassen van het WordPress-thema te openen.

Optie voor live voorbeeld van WordPress-thema

Hoe de WordPress Theme Customizer te gebruiken

Nadat je de WordPress-thema-aanpasser hebt geopend, zie je alle aanpassingsinstellingen aan de linkerkant van je scherm en de live preview van je website aan de rechterkant.

WordPress Theme Customizer

WordPress-thema-aanpasser wordt geleverd met een set standaardpanelen, ongeacht het thema dat u gebruikt.

U moet op de afzonderlijke panelen klikken om er wijzigingen in aan te brengen. U kunt ook op een van de blauwe potloodpictogrammen aan de rechterkant van uw scherm klikken om de instellingen voor dat specifieke item te openen.

Notitie: geavanceerde WordPress-thema’s voegen extra instelpanelen toe voor extra aanpassingsmogelijkheden (hierover later meer).

Laten we eens kijken naar de standaardopties die beschikbaar zijn in de WordPress-thema-aanpasser.

Site-identiteitspaneel: voeg titel, logo en favicon toe

De Site-identiteit deelvenster in de WordPress-thema-aanpassing kunt u de titel en slogan van uw website toevoegen of wijzigen.

Standaard voegt WordPress “Just Another WordPress Site” toe als de slogan van de site.

Het wordt aanbevolen om dit te wijzigen nadat u WordPress op uw site heeft geïnstalleerd. Je kunt het ook zo leeg houden als je wilt.

Site-identiteitsinstellingen om de sitetitel, slogan, logo en favicon te wijzigen

Site Identity-paneel in de WordPress-thema-aanpasser stelt u ook in staat om uw sitelogo toe te voegen. Klik gewoon op de Selecteer logo mogelijkheid om het logo van uw website te uploaden.

Wilt u een favicon aan uw site toevoegen? U kunt dat doen door op de te klikken Selecteer sitepictogram keuze. Voor gedetailleerde instructies kunt u onze gids volgen over het maken en toevoegen van een favicon aan uw site.

WordPress Theme Customizer: verander kleuren op uw website

De bediening op de Kleuren paneel zal meestal variëren, afhankelijk van het WordPress-thema dat u gebruikt.

Met het Twenty Seventeen-thema kunt u bijvoorbeeld de tekstkleur van de koptekst kiezen en een kleurenschema voor uw hele website selecteren.

Verander kleuren op uw website

Andere WordPress-thema’s kunnen verschillende kleuropties bieden voor site-elementen zoals: koppen, links, hoofdtekst, achtergrond van uw website, enz.

Navigatiemenu’s toevoegen in Theme Customizer

De Menu’s paneel kunt u navigatiemenu’s maken en hun locatie op uw website beheren.

Op dit tabblad vind je alle bestaande WordPress-menu’s die je eerder hebt gemaakt. U kunt op de knop “Alle locaties weergeven” klikken om de beschikbare menulocaties te controleren die uw thema ondersteunt.

Menu's paneel in Theme Customizer

Om een ​​nieuw menu te maken, moet u op de klikken Maak een nieuw menu knop.

Daarna moet u een naam aan uw menu geven, zodat u het later gemakkelijk kunt beheren. U kunt ook de menulocatie selecteren en vervolgens op klikken De volgende verder gaan.

Maak een nieuw navigatiemenu

Om items aan dit menu toe te voegen, moet u op de klikken Items toevoegen knop om een ​​nieuw paneel te openen. U kunt nu aangepaste links, pagina’s, berichten, categorieën en tags toevoegen als menu-items.

Voeg items toe aan het navigatiemenu

Om de artikelen opnieuw te bestellen, kunt u op de knop klikken Nabestellen koppeling en gebruik vervolgens de pijlpictogrammen om de menu-items aan te passen.

Beheer widgets op uw website in Theme Customizer

De Widgets paneel kunt u de widgets op uw site toevoegen en beheren.

Als u erop klikt, ziet u de verschillende locaties waar u widgets kunt toevoegen. Dit is afhankelijk van het thema dat je gebruikt.

Het Twenty Seventeen-thema biedt bijvoorbeeld 3 widgetlocaties, terwijl het Twenty Seventeen-thema slechts één locatie heeft.

Deelvenster Widgets

Wanneer je op een van deze klikt, zie je de widgets die je eerder aan die locatie hebt toegevoegd.

Om een ​​nieuwe widget toe te voegen, moet u op de knop “Een widget toevoegen” klikken. Hierdoor wordt een nieuw paneel geopend waarin u een lijst met alle beschikbare widgets ziet.

Voeg widgets toe aan uw site

U moet op degene klikken die u wilt toevoegen. U kunt ook wijzigingen aanbrengen in de nieuw toegevoegde widgets en de positie ervan aanpassen door ze omhoog of omlaag te slepen.

Paneel voor startpagina-instellingen in Theme Customizer

WordPress geeft standaard de nieuwste blogposts op uw startpagina weer.

Voor zakelijke websites gebruiken gebruikers echter liever een aangepaste startpagina. Hiermee kunt u een goede bestemmingspagina hebben waarop uw producten en services worden weergegeven.

Om een ​​aangepaste startpagina te gebruiken, moet u het keuzerondje “Een statische pagina” selecteren op de Startpagina-instellingen paneel.

Startpagina-instellingen in thema-aanpasser

Dit opent twee nieuwe vervolgkeuzemenu’s die u kunt gebruiken om een ​​pagina voor uw startpagina te selecteren en een andere voor het weergeven van uw blogposts.

Als u de pagina’s niet op uw site heeft, kunt u een nieuwe maken door op de link ‘+ Nieuwe pagina toevoegen’ onder het dropdown-menu te klikken. Hierdoor wordt een lege pagina gemaakt met de naam van uw keuze.

Extra CSS-paneel voor het toevoegen van aangepaste CSS

Wilt u aangepaste CSS-code toevoegen om uw website te stylen? U kunt dat doen in de Extra CSS paneel.

Gevorderde en gevorderde WordPress-gebruikers passen hun site vaak aan door CSS-code rechtstreeks toe te voegen aan het style.css-bestand van hun thema. Dit voegt extra stappen toe, zoals FTP-toegang tot uw WordPress-hosting, het wijzigen van themabestanden, enz.

Een eenvoudigere oplossing voor beginners is om uw aangepaste CSS-code toe te voegen aan het paneel Extra CSS in de WordPress-thema-aanpasser. Hiermee kunt u wijzigingen aan uw site aanbrengen en deze live aan de rechterkant van uw scherm bekijken.

Voeg aangepaste CSS-code toe aan het extra CSS-paneel;

Wanneer u begint met het schrijven van wat CSS-code, zal WordPress automatisch attributen aan u voorstellen op basis van de letters die u typt. Er worden ook foutmeldingen weergegeven als u geen goede CSS-instructie hebt geschreven.

Opmerking: blijf lezen als u uw website wilt aanpassen zonder code te schrijven. We zullen twee beginnersvriendelijke opties delen waarmee u uw thema eenvoudig kunt aanpassen en zelfs een aangepast WordPress-thema kunt maken.

Andere opties voor thema-aanpassing

Sommige gratis en premium thema’s bieden meer opties voor het aanpassen van thema’s.

Afhankelijk van het thema dat u gebruikt, kunt u mogelijk de tekenstijl wijzigen, een achtergrondafbeelding toevoegen, de lay-out wijzigen, kleuren wijzigen, willekeurige kopafbeeldingen toevoegen en nog veel meer.

U kunt ook specifieke functies aan uw thema-aanpasser toevoegen met behulp van plug-ins. U kunt bijvoorbeeld aangepaste lettertypen in WordPress toevoegen met de Easy Google Fonts-plug-in.

Bekijk een voorbeeld van uw website op verschillende schermresoluties

Het is belangrijk voor elke website-eigenaar om ervoor te zorgen dat zijn website mobiel reageert en er goed uitziet op alle schermformaten.

Dankzij de WordPress thema-aanpasser kun je eenvoudig zien hoe je website eruitziet op verschillende schermformaten.

Onderaan het paneel voor thema-aanpassing vindt u drie pictogrammen en de link ‘Besturingselementen verbergen’.

Bekijk een voorbeeld van de website met verschillende schermresoluties

Met deze pictogrammen kunt u uw site testen op verschillende schermresoluties zoals desktop, tablet en mobiele apparaten.

De Besturingselementen verbergen link is handig voor het verbergen van het WordPress Customizer-paneel, zodat u uw site correct kunt bekijken in de desktopmodus.

Publiceer, bewaar of plan uw aanpassingsinstellingen

Nadat u de nodige wijzigingen heeft aangebracht, moet u deze op uw site toepassen. Anders gaat al je harde werk verloren.

Ga je gang en klik op de Publiceren knop om de wijzigingen toe te passen. Als u klaar bent, kunt u op de sluitknop klikken, aanwezig in de linkerbovenhoek van uw scherm, om de thema-aanpasser af te sluiten.

Publiceer WordPress Customizer-instellingen

Wat als u meer tijd nodig heeft om uw nieuwe ontwerp af te ronden? In dat geval kun je het als concept opslaan en zelfs je nieuwe ontwerp met iemand delen zonder hem of haar toegang te geven tot je beheerdersgedeelte.

Om dat te doen, moet je op het tandwielpictogram naast de klikken Publiceren knop. Dit opent het actiepaneel.

WordPress Customizer Save Draft-optie

Hier vind je drie opties: Publiceren, Concept opslaan en Planning.

U moet de selecteren Concept opslaan keuzerondje op het actiepaneel en klik vervolgens op Concept opslaan knop om uw wijzigingen op te slaan.

U kunt nu de voorbeeldlink kopiëren en deze met anderen delen om feedback te krijgen.

Aan de andere kant is de Schema optie kunt u uw wijzigingen op een specifieke datum en tijd publiceren. U kunt deze optie gebruiken om te plannen dat uw themawijzigingen live gaan op het moment dat u het minste verkeer ontvangt.

Plan Customizer-instellingen op een specifieke datum

Als u ten slotte de niet-gepubliceerde wijzigingen wilt resetten, klikt u op Veranderingen ongedaan maken koppeling op het actiepaneel.

Bekijk verschillende thema’s zonder live te gaan

Er zijn momenten waarop u wilt controleren hoe een nieuw thema eruit zou zien op uw site. Je wilt ze echter niet activeren op je live website.

In dat geval kun je de WordPress Customizer openen om nieuwe thema’s te testen zonder live te gaan.

In het Customizer-paneel vind je de naam van je actieve thema en de Verandering knop.

Verander WordPress Theme van Customizer

Als u op die knop klikt, zal WordPress al uw geïnstalleerde thema’s aan de rechterkant van de pagina weergeven.

Om een ​​bepaald thema te controleren, moet u op de klikken Live voorvertoning knop.

Voorbeeld geïnstalleerde thema's op Theme Customizer

U kunt ook een voorbeeld bekijken van thema’s uit de WordPress Themes Repository. Om dat te doen, moet u het selectievakje “WordPress.org-thema’s” in het linkerdeelvenster selecteren.

Dit toont thema’s uit de WordPress.org-directory. U kunt klikken op de “Installeren & Preview ”knop om het thema dat je leuk vindt te controleren.

Directory met WordPress-thema's

U kunt de thema’s ook filteren door op de te klikken Filter thema’s knop aanwezig in de rechterbovenhoek van uw scherm.

Notitie: we raden aan om een ​​WordPress staging-website te gebruiken om nieuwe thema’s te testen in plaats van de customizer op een live site te gebruiken.

Instellingen voor thema-aanpassing importeren of exporteren

Wist je dat je de instellingen van je thema-aanpasser kunt importeren en exporteren?

Dit is uiterst handig wanneer u wijzigingen aanbrengt in uw thema op uw lokale server of een staging-site. In plaats van de instellingen handmatig naar uw live website te kopiëren, kunt u de instellingen voor thema-aanpassing eenvoudig exporteren om tijd te besparen.

Voor gedetailleerde instructies kunt u onze gids volgen over het importeren en exporteren van instellingen voor thema-aanpassingen in WordPress.

Alternatieven voor WordPress Theme Customizer

Hoewel u met WordPress Customizer wijzigingen op uw site kunt aanbrengen, is het aantal bedieningselementen afhankelijk van het thema dat u gebruikt.

Wat als je je thema leuk vindt, maar zou willen dat het extra aanpassingsmogelijkheden had?

In dat geval is de beste oplossing om een ​​van de twee aanpassingsplug-ins te gebruiken die naast de WordPress-thema-aanpasser werken.

CSS Hero

CSS Hero-plug-in

CSS Hero is een WordPress-plug-in waarmee u uw site kunt aanpassen zonder een enkele regel code te schrijven. U heeft de vrijheid om elk element van uw site probleemloos vorm te geven.

Wil je de inlogpagina van je WordPress-site aanpassen? Met CSS Hero kun je dat binnen een paar minuten doen.

U kunt de wijzigingen in de frontend ook bewerken en bekijken om ervoor te zorgen dat uw ontwerp er op elk apparaat perfect uitziet.

Beaver Builder

Beaver Builder-plug-in

Beaver Builder is een van de beste plug-ins voor WordPress-paginabuilder op de markt. Hiermee kunt u verbluffende pagina’s voor uw site maken met behulp van een interface met slepen en neerzetten.

Het beste is dat Beaver Builder met bijna elk WordPress-thema werkt. Hierdoor kun je het gebruiken met je huidige thema.

Beaver Builder ondersteunt het gebruik van shortcodes en widgets. Het biedt ook verschillende soorten modules die u kunt gebruiken om uw website gemakkelijk te stylen. Zie onze gids over het maken van aangepaste lay-outs in WordPress voor gedetailleerde instructies.

Je kunt Beaver Builder ook gebruiken om een ​​volledig aangepast WordPress-thema te maken zonder code te schrijven.

We hopen dat deze gids je heeft geholpen om te leren hoe je de WordPress Theme Customizer als een professional kunt gebruiken. Misschien wilt u ook onze gids bekijken over de beste WordPress-plug-ins en tools voor uw website.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map