Elementor: een WordPress-thema aanpassen

Wilt u weten hoe u een WordPress-thema kunt aanpassen met de Plug-in Elementor ?

Het aanpassen van uw WordPress-thema is een van de belangrijkste taken bij het bouwen van WordPress-websites. Omdat ze het ontwerp van een website beheert, brengen veel professionals hier de meeste tijd door.

Om een ​​aangepast WordPress-thema te maken, moet u meestal met de themabestanden en een code-editor werken. Wijzigingen in de lay-out gebeuren in sjabloonbestanden, ontwerpwijzigingen via CSS. U moet ook het browservenster constant vernieuwen om uw aanpassingen weer te geven, wat een beetje omslachtig kan zijn.

Gelukkig met Elementor, dit proces wordt buitengewoon eenvoudig, dus misschien wil je het eens proberen.

Maar laten we eerst samen ontdekken Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog.

Ga dan terug naar waarom we hier zijn.

Wat is een WordPress-thema

Een WordPress-thema is in wezen een verzameling sjablonen die het uiterlijk van een WordPress-website bepalen.

Het WordPress-thema omvat alles dat van invloed is op het ontwerp van een website, van kop- en voetteksten tot kleurenschema, lay-out en meer.

Er zijn tal van thema's beschikbaar, zowel gratis als premium, die passen bij bijna elke branche, zoals fotografie websites, sportschool club websites, kapsalon websites, wet websitesEn nog veel meer.

Waarom een ​​WordPress-thema aanpassen?

Een van de belangrijkste redenen voor het maken van een website is om uw bedrijf te promoten. Wat is een betere manier om dat te doen dan om maak een website uniek dat de stijl en het ontwerp van het bedrijf bevordert.

Kun je je voorstellen dat Amazon, eBay of Google zijn wat ze zijn zonder hun unieke ontwerp?

Natuurlijk niet, en dat is een van de redenen waarom we een WordPress-thema willen aanpassen. We willen het uniek maken en ons aanpassen aan de boodschap van ons bedrijf.

Soms, of liever gezegd, kom je ook door een WordPress-thema dat wordt geplaagd door een slecht ontwerp, kleuren die niet goed bij elkaar passen of een thema dat te zwaar is en alleen de prestaties van de site beïnvloedt. web. WordPress-thema kan krachtig zijn, behalve dat ding dat u dwarszit. Pas het aan en verander dit ding kan al uw problemen oplossen en creëren betere gebruikerservaring.

Hoe u een WordPress-thema kunt aanpassen

Er zijn verschillende methoden om een ​​WordPress-thema aan te passen.

1. Handmatig via de WordPress-aanpasser
2. Met code
3. Met Elementor

Hoe u een WordPress-thema handmatig kunt aanpassen

U kunt het WordPress-thema van uw keuze aanpassen via de ingebouwde WordPress Customizer. Als je het zonder code doet, ben je vaak beperkt in wat je kunt veranderen. Sommige WordPress-thema's premium biedt u meer aanpassingsopties, maar in wezen zijn er niet veel ontwerpopties voor u.

Voordat we dieper op dit gebied ingaan, willen we u erop wijzen dat wanneer u een bestaand WordPress-thema aanpast, u het beste kunt gebruiken een child-thema en niet het hoofdthema.

WordPress kindthema

Een child-thema is een WordPress-thema dat exact dezelfde functies en kenmerken heeft als een ander WordPress-thema, het hoofdthema. Het child-thema wordt gebruikt om het thema veilig aan te passen en aan te passen, zonder het hoofdthema te beïnvloeden en zonder de mogelijkheid te verliezen om het bij te werken. 

WordPress thema-aanpasser

Nu we weten dat het het beste is om met een child-thema te werken, gaan we kijken hoe we een thema kunnen aanpassen met de WordPress Customizer. Om toegang te krijgen, gaat u naar uw dashboard en klikt u op Apparence aan de linkerkant en kies Personaliseer.

De belangrijkste functies die u met deze Customizer kunt wijzigen, zijn als volgt:

Een website titel, logo en pictogram toevoegen

Om uw titel, logo of pictogram toe te voegen of te wijzigen, gaat u gewoon naar het Identiteitspaneel van de website. en kies elk van deze elementen om ze te wijzigen.

De kleuren van het WordPress-thema wijzigen

sommige WordPress-thema's kunt u hun kleurenschema's wijzigen, maar niet allemaal, en dat is meestal het geval WordPress-thema's premie. Als u met uw WordPress-thema het kleurenschema kunt wijzigen, ziet u deze optie wanneer u de Aanpasser opent.

Navigatiemenu's toegevoegd

Met de Customizer kunt u ook eenvoudig uw websitenavigatiemenu's toevoegen en wijzigen.

Hoe u een WordPress-thema aanpast met code

U zult merken dat u op het tabblad Uiterlijk de optie hebt om de thema-editor te kiezen. Als u erop klikt, wordt u begroet met een venster met de themacode. Deze optie vereist een goed begrip van CSS-codering en wordt niet aanbevolen voor beginners.

Hier heb je toegang tot bestanden zoals style.css, functies.php, en dit is precies het scenario waarvoor je een child-thema nodig hebt, zodat je je website niet kapotmaakt.

De andere manier om uw thema aan te passen door te coderen, is door bestanden te uploaden met een FTP-oplossing. Het proces omvat het maken van FTP-inloggegevens via uw hostingprovider, het downloaden en installeren van een FTP-oplossing (zoals FileZilla), het inloggen op uw account en het bewerken van uw bestanden, die u vervolgens via hetzelfde account uploadt. FTP-oplossing.

Ontdek onze gids op WordPress installeren met FileZilla

Tenzij u bekend bent met coderen, raden we deze optie niet aan.

Pas eenvoudig een WordPress-thema aan met Elementor

U kunt dit rechtstreeks vanuit de gebruikersinterface doen. U hoeft geen enkele regel code te wijzigen of een browservenster opnieuw te laden, zelfs niet één keer.

Met Elementor kunt u elk element van de website snel en gemakkelijk wijzigen met een paar muisklikken en u kunt deze functies zelfs optimaliseren voor het mobiele platform.

Elementor maakt dit proces veel gemakkelijker door dynamische inhoud te gebruiken en u een voorbeeld van uw pagina's te laten zien. Op deze manier kunt u direct zien hoe de ontwerpwijzigingen uw daadwerkelijke website en inhoud zullen beïnvloeden.

Pas de kop- en voettekst aan

Elementor biedt u volledige flexibiliteit als het gaat om het ontwerpen van uw kop- en voetteksten. We weten allemaal hoe saai het kan zijn, dat je een WordPress-thema hebt en dat je geen enkel aspect van het ontwerp van de koptekst of voettekst kunt wijzigen. Je hebt gespecialiseerde thema's, plug-ins, etc. nodig

Met Elementor is het eenvoudig.

1. Maak een koptekstsjabloon

Configureer eerst een nieuwe header-sjabloon. Ga hiervoor naar Elementor> Mijn sjablonen.

Hier kunt u beginnen door bovenaan op de knop Nieuw toevoegen te klikken. Gebruik in het volgende scherm het vervolgkeuzemenu om Koptekst te selecteren als het type sjabloon dat u wilt ontwerpen.

U kunt dit scherm ook bereiken door in het vorige scherm op het tabblad Koptekst te klikken en vervolgens op de grote groene knop te drukken die verschijnt.

Het zal de koptekst vooraf selecteren als het sjabloontype. Hoe dan ook, u moet een geschikte naam voor de sjabloon toevoegen (zodat u later weet wat het is) en vervolgens doorgaan door op Sjabloon maken te klikken.

Het brengt je hier.

Met Elementor Pro kunt u kiezen uit vooraf ontworpen headerblokken. Dit zijn ontwerpsjablonen die u kunt gebruiken als uitgangspunt voor uw eigen ontwerp, wat we in dit geval gaan doen.

Wanneer u de muisaanwijzer over een headerblok beweegt, klikt u op Invoegen stelt u in staat om het onmiddellijk te ontwerpen. Klik anders eerst op de afbeelding om een ​​grotere versie te bekijken. Dan kun je altijd op drukken Invoegen bovenaan.

Als u helemaal opnieuw wilt beginnen, sluit u het venster door op te klikken X in de rechterbovenhoek.

2. Wijzig het basisontwerp van de koptekst

Na het invoeren van de nieuwe header, is het eerste dat opvalt dat het logo en het menu dat we eerder hebben geconfigureerd er al zijn.

Dit is precies de reden waarom we ze in elkaar hebben gezet en we gaan praten over hoe we ze kunnen aanpassen. Laten we echter eerst kijken hoe u de koptekstsectie zelf kunt aanpassen.

Om dit te doen, plaatst u de muisaanwijzer erop en klikt u bovenaan op de knop Bewerken. Dit opent een lijst met bewerkingsopties aan de linkerkant.

Dit is wat u kunt bedienen in de verschillende menu's:

• Layout - Beheer de breedte van de sectie, de grootte van de ruimte tussen de kolommen, de hoogte, de verticale kolom en de positionering van de inhoud, de toegewezen HTML-tag en de algemene structuur.
• Style - Hier kunt u de achtergrondkleur wijzigen, inclusief de hover effecten, zelfde voeg afbeelding of video toe Voeg desgewenst overlay-, rand- en verdelereffecten toe en wijzig typografische instellingen.
• Geavanceerd - Met dit deel kun je CSS-attributen toevoegen, zoals marge en z-index, animaties, ID's en klassen. Het stelt je ook in staat om de sectie plakkerig te maken en de instellingen responsief te regelen en er enkele toe te voegen Aangepaste CSS.

Al het bovenstaande spreekt voor zich en u krijgt snel wat u wilt.

3. Pas de koptekstelementen aan

U kunt echter niet alleen de koptekst als geheel bewerken, maar ook de items die erin zijn opgenomen. Om bijvoorbeeld het logo van de website aan te passen, klikt u erop. Ook dit geeft u aan de linkerkant bewerkingsopties.

In het geval van het logo geeft dit u de volgende mogelijkheden:

• Content - Wijzig de afbeeldingsgrootte, uitlijning en de plaats waaraan het is gekoppeld.
• Style - Regel de breedte en hoogte, voeg CSS-effecten en hover-effecten toe, voeg rand en schaduw toe als je wilt.
• Geavanceerd - Hier vindt u in wezen dezelfde opties als voor de koptekstsectie.

Gebruik de instellingen om het logo aan te passen zoals u wilt dat het goed in de koptekst wordt weergegeven. Merk ook op dat elk item zijn eigen type opties heeft, dus zorg ervoor dat u ze allemaal bekijkt.

4. Voeg items toe

Met Elementor kun je natuurlijk ook items aan de koptekst toevoegen. Klik gewoon op het symbool rechtsboven om te zien wat er beschikbaar is.

Bij het bewerken van een koptekstsjabloon toont Elementor automatisch de relevante blokken bovenaan de lijst, wat onder de gegeven omstandigheden het meest logisch is. In dit geval zijn dit zaken als het logo van de website, het navigatiemenu en de titel van de website.

Als u bijvoorbeeld de titel van de website naast het logo wilt toevoegen, hoeft u deze alleen maar te slepen en neer te zetten. Met de koptekstsjabloon die we momenteel hebben gekozen, kunnen we deze echter boven of onder het logo toevoegen. Maar het is een probleem dat gemakkelijk kan worden opgelost.

Plaats in een dergelijk geval de muisaanwijzer op de koptekst en gebruik het plusteken -+-om een ​​sectie hierboven toe te voegen.

Klik hier op de paarse knop om een ​​ontwerp met drie kolommen te kiezen.

Sleep vervolgens de elementen van het bestaande koptekstgedeelte naar het nieuwe gedeelte en voeg de titel van de website in het midden toe.

Maar wacht, de stijl is totaal anders! geen probleem. Klik met de rechtermuisknop op de bestaande koptekst en selecteer Teksten. Klik vervolgens met de rechtermuisknop op de nieuwe sectie en klik hier op Stijl plakken. Elementor past dan de stijl van de bestaande sectie toe, die u later kunt sluiten. 

U kunt hetzelfde proces uitvoeren met elk van de andere header-elementen en natuurlijk met alle andere elementen in Elementor.

Pas een unieke postsjabloon aan

In Elementor kunt u ook een enkele postsjabloon aanpassen. Hier is hoe :

1. Maak een nieuw model

Het maken van een sjabloon werkt op de gebruikelijke manier. Kies deze keer echter Enkele als het modeltype. Kies vervolgens hieronder de unieke sjabloon die u wilt bewerken. In dit voorbeeld is dat van Post.

Als je een nieuw paginaontwerp wilt maken, bewerk dan je 404-pagina (daarover later meer) of bewerk een aangepast berichttype in het bijzonder zou je iets anders kiezen. Voer in beide gevallen een naam in en ga verder.

In het volgende scherm kunt u zoals gewoonlijk kiezen uit de voorgedefinieerde sjablonen. In dit geval willen we echter vanuit het niets een nieuw model maken. Klik dus rechtsboven op de X om dit venster te sluiten.

2. Configureer het voorbeeld

Stel vervolgens het voorbeeldvenster in op een bestaand bericht. U kunt dit doen door op het oogpictogram onder aan de editoropties te klikken Instellingen.

In het menu dat wordt geopend, onder Voorbeschouwing dynamische inhoud, kies Publiceren. Daarna kunt u op de volgende regel een bestaand bericht op naam zoeken en kiezen.

Als je dat eenmaal hebt gedaan, tik je op Solliciteer & Voorbeschouwing. Hoewel je op dit moment niets kunt zien (omdat er niets op de pagina staat), zal Elementor de gegevens in dit bericht vanaf nu vertellen. Je zult snel zien wat dit betekent.

3. Laten we de sectie hierboven maken 

Eerst maken we de bovenstaande sectie. Hier vind je meestal zaken als de titel van het bericht en metagegevens zoals auteur, datum en categorie.

De eerste stap is om op het bord te klikken + en het creëren van een enkele kolomsectie.

Als je dat doet, heb je in het lay-outgedeelte de mogelijkheid om de breedte, hoogte, positionering en stijl te bepalen. In dit geval is er hier niet veel te doen. Maak u ook geen zorgen, u kunt altijd teruggaan en later wijzigingen aanbrengen.

Sleep vervolgens de titelwidget van het bericht naar de nieuwe sectie.

Zorg ervoor dat u alle beschikbare opties gebruikt om het ontwerp en de lay-out naar wens aan te passen. Dit zijn bijvoorbeeld mijn instellingen om dit te doen:

Er is ook een leuke functie die u moet leren. Wanneer u op het sleutelsymbool van de titel van het bericht klikt, kunt u statische inhoud voor en na uw dynamische gegevens toevoegen.

Als u bijvoorbeeld een sjabloon maakt voor een bepaalde berichtcategorie, zoals nieuws of recepten, kunt u deze als volgt aan de titel van het bericht toevoegen:

Op die manier zouden die gegevens voor elk bericht in die categorie worden weergegeven. Ik ga dit op dit moment niet gebruiken, maar dacht dat het een belangrijke kanttekening voor je was.

Onder de titel van het bericht zullen we de Post Info widget om de metadata van het bericht te bekijken.

Dit zijn de instellingen die ik gebruik:

Daarnaast heb ik de stijlopties gebruikt om het ontwerp op de rest van de pagina te laten passen. Zorg ervoor dat u hetzelfde doet.

4. Stel het paallichaam in

Na de koptekst is het tijd om de hoofdtekst van de pagina te maken. Als u wilt dat dit onderdeel een ander ontwerp heeft dan de koptekst, moet u een nieuwe sectie aanmaken. Ik houd het echter simpel, dus dat hoeft niet.

Het eerste dat we willen invoegen, is de uitgelichte afbeelding. Om dit te doen, kunt u de widget met dezelfde naam plaatsen onder wat al op de pagina staat.

Ik heb in feite geen van de instellingen gewijzigd, maar alles gelaten zoals het is.

Dan is het tijd om de inhoud te plaatsen. Ook hier heb je een bijbehorend blok.

U zult merken dat Elementor voor uitgelichte afbeeldingen en postinhoud automatisch haalt wat er al op de website staat. Pas het ontwerp van het nieuwe blok aan wat je nodig hebt, bijvoorbeeld door te spelen met de typografische instellingen.

Anders dan dat, dat is alles. Hier is niet teveel werk te doen, zodat we door kunnen naar het laatste deel.

5. Configureer de voettekst

In dit geval willen we dat de voettekst het profiel van de auteur, opties voor delen en opmerkingen van de lezer weergeeft. Om dit te doen, moeten we allereerst een nieuwe sectie met twee kolommen maken. Om meer ruimte voor het auteursprofiel te creëren, kunt u dit instellen op een 66.33-indeling.

Plaats daarna de widget Auteur Box in het linkergedeelte.

Zorg ervoor dat u de stijl aan uw behoeften aanpast. Ik heb een beetje achtergrondkleur toegevoegd en de typografie-instellingen enigszins aangepast.

Daarna is het tijd om het Share Buttons-blok aan de rechterkant toe te voegen.

Je kunt mijn instellingen zien in de bovenstaande schermafbeelding.

Daarna hoef je alleen nog een sectie nog een kolom lager te maken en de widget Postreacties erin te slepen en neer te zetten.

(Als u overigens ooit problemen ondervindt bij het vinden van een van deze widgets, gebruikt u gewoon de zoekfunctie).

Breng eventuele aanpassingen aan in het opmerkingengedeelte dat u nodig acht (ik heb het gelaten zoals het is) en u bent klaar om te posten. Hier is het voltooide ontwerp:

Pas de archiefsjabloon aan

1. Configureer uw WordPress-archiefsjabloon

U kent inmiddels de oplossing al voor het maken van nieuwe modellen. Het enige verschil is dat u in dit geval kiest Archief als het modeltype.

Daarna krijg je zoals gewoonlijk een aantal blokken om uit te kiezen of je kunt ook je eigen model helemaal opnieuw maken. Voor archieven heb je er echter grofweg twee widgets Elementor die hoe dan ook belangrijk zijn.

2. Definieer de titel van het archief

Het eerste blok waar ik het over wil hebben, is de archieftitel Archieftitel.

Naast de gebruikelijke instellingen onder Stijl en geavanceerdkun je een belangrijke optie vinden als je op het sleutelsymbool onder klikt Titel.

Hier kunt u in- en uitschakelen of Elementor het archieftype op de pagina toont, zoals het gedeelte waar Auteur: hieronder staat. Dit gebeurt via de knop onder Inclusief context. 

Overigens kunt u zoals gewoonlijk een voorbeeld van verschillende archieven bekijken met behulp van de voorbeeldinstellingen (Oogsymbool> Instellingen). Op deze manier kunt u het ontwerp zien voor unieke categorieën, tags, auteurs en meer. Houd het in gedachten.

3. Gebruik het archiefpublicaties blok

De tweede belangrijke widget voor archieven is Archive Posts. Dit brengt alle berichten die bij een archief horen op één pagina. Als je een sjabloon kiest, staan ​​ze er al, maar je kunt ze ook gemakkelijk zelf toevoegen met dit blok.

Laten we eens kijken naar de opties die het u biedt om uw archiefpagina's aan te passen:

• Huid - Kies ervoor om uw berichten weer te geven in een klassiek of kaartachtig ontwerp.
• columns - Bepaalt het aantal kolommen waarin uw berichten worden weergegeven.
• Toon afbeelding - Activeer aanbevolen afbeeldingen op archiefpagina's
• Metselwerk – Toont items in metselwerkontwerp of niet.
• Beeld maat - De grootte van de afbeelding die Elementor moet gebruiken op archiefpagina's.
• Titel - Wil je berichttitels weergeven of niet?
• Titel HTML-tag - Zo ja, welke HTML-tag moet er dan omheen worden gewikkeld?
• Uittreksel - Voeg fragmenten uit uw berichten toe of toon alleen de titel.
• Uittreksel lengte - Bepaal de lengte van de uittreksels.
• Metadata - Definieert de metagegevens van de post die beschikbaar zijn voor bezoekers.
• Scheidingsteken tussen - Scheidingsteken tussen metadata-informatie.
• Lees meer - Voeg een "lees meer" -link toe, ja of nee?
• insigne - Hiermee kunt u meer informatie aan berichten toevoegen, zoals categorieën en tags.
• Taxonomie-badge - Hier kunt u beslissen welke informatie u wilt opnemen.
• avatar – Hiermee kun je de profielfoto van de auteurs van de artikelen wijzigen

Naast het bovenstaande heb je nog een paar opties. Onder Oproepen, u kunt bepalen hoe archiefoproepen moeten worden afgehandeld. Bijvoorbeeld hoe u het weergeeft, het aantal pagina's dat u wilt opnemen en de uitlijning van de tekst.

Eindelijk, Geavanceerd stelt u in staat om het bericht in te stellen dat wordt weergegeven wanneer een bezoeker op een leeg archief terechtkomt. Al het andere moet bekend zijn. Houd er rekening mee dat de stijlopties veranderen afhankelijk van de skin die u hebt gekozen.

4. Beheer het aantal publicaties per archief

Een korte opmerking over archiefsjablonen. Om het aantal berichten dat in een archief (of op je blogpagina) verschijnt te wijzigen, moet je dit doen in WordPress onder Instellingen> Lezen. 

Voer hier het aantal berichten in dat uw bezoekers moeten zien.

Gepersonaliseerd gemakkelijk WordPress-thema met Elementor

Het aanpassen van WordPress-thema's is het brood en de boter van veel professionals. Hoewel dit meestal veel coderen en bewerken van de bestanden met zich meebrengt, is dit met Elementor niet meer nodig.

Zoals je hierboven hebt gezien, is de plug-in een volwaardige WordPress-thema-editor. Hiermee kunt u elk onderdeel ervan aanpassen vanuit de gebruikersinterface. U kunt de koptekst, voettekst, pagina- en postsjablonen, archiefsjablonen en meer van de website bewerken.

Met de mogelijkheid om dynamische inhoud te gebruiken en een voorbeeld van elk deel van uw website te bekijken, kunt u alle trendy aanpassingen implementeren

Kortom, Elementor maakt het gemakkelijk om uw WordPress-thema aan te passen. In plaats van met tientallen bestanden en honderden regels code moeizaam wijzigingen aan te brengen, kunt u dit snel allemaal op één plek doen.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een WordPress-thema kunt aanpassen met de Page Builder Elementor. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...