GeneratePress is een thema voor WordPress (lees hier mijn uitgebreide review). Je kan binnen dit thema eenvoudig aanpassingen doen aan de website. Dit doe je door een pagina aan te maken en deze vorm te geven met GenerateBlocks of Gutenberg blocks, aanpassingen te doen via de WordPress customizer of via GeneratePress elementen. Ik gebruik voor alle websites binnen ons netwerk een combinatie van deze drie. In dit artikel bekijk ik de laatste manier van opmaken, de GeneratePress elementen (Engels: Elements). Er zijn diverse type elementen die je aan kan maken en op je website kan weergeven. Ook zijn er meerdere manieren waarop je een element kan weergeven, zoals op specifieke locaties of per schermtype. In dit hoofdstuk lees je er alles over!
GeneratePress
Snel thema
geschikt voor vrijwel alle projecten
Gratis versie beschikbaar
Wij gebruiken de Premium versie van GeneratePress voor al onze grote websites
MijnOnlineInkomen is ook gebouwd in GeneratePress
Bekijk mijn uitgebreide GeneratePress review
Wat zijn GeneratePress Elementen?
Met GeneratePress Elements kun je de lay-out van je website aanpassen en inhoud invoegen met behulp van een geavanceerd hook-systeem. De GeneratePress Elements zijn wat mij betreft de belangrijkste reden om GeneratePress Premium aan te schaffen, naast de site-library. Je kan vier type elementen aanmaken en deze weergeven op je website waar je maar wilt. Dit zijn:
- Header element: Met dit element kun je een Hero Section maken en de header samenvoegen met de pagina-hero om een overlay navigatie te creëren die over de pagina-hero zweeft.
- Layout element: Met dit element kun je de lay-out van je website aanpassen. Je kunt bijvoorbeeld de breedte van de inhoudscontainer bepalen, de weergave van de sidebar aanpassen en sommige onderdelen verwijderen met behulp van de “Disable Element” tab. Deze gebruik je niet heel vaak op een startende affiliate website.
- Hook element: Dit is een element waarmee je code kunt koppelen aan specifieke hooks binnen het thema. Hiermee kun je korte codes en PHP-snippets uitvoeren.
- Block element: Plaats normale WordPress of GenerateBlocks blokken waar dan ook op je website. Deze optie gebruik ik vaak.
Kortom: Je kan de elementen zien als een soort page builder van GeneratePress. Hoewel dit even wat tijd kost om te zien hoe dit werkt, levert het uiteindelijk wel veel op.
Locatieregels
Het bijzondere aan deze elementen is dat je heel specifiek de locatie op de website kan aangeven. Wil je bijvoorbeeld een extra bovenbalk boven het menu weergeven met een speciale aanbieding, maar dan alleen op de homepage? Dan kan je dit bij de locatieregels aangeven. Dit kan bij alle elementen ingesteld worden. Je kan kiezen uit:
- Locatie
- Uitsluiten
- Gebruikers
- Hooks
Zo heb je maximale controle over alles. Een voorbeeld zie je onderaan alle pagina’s en berichten op deze website. Daar staat de tekst: “Wij schrijven onze teksten en reviews als onafhankelijke partij. Daarbij maken we soms gebruik van affiliate links. Meer hierover lees je in ons advertentiebeleid.”
Dit heb ik in een block element geplaatst. Dit heb ik ingesteld om overal te weergeven (alle Berichten en Alle pagina’s). De homepage en blogpagina heb ik echter uitgesloten. Hier vind ik het niet zo nodig om een extra element te hebben. Als Hook heb ik after_main_content aangegeven. Nu wordt deze melding onder elke pagina en blogbericht weergeven, nadat de content zelf is ingeladen.
Header element voorbeeld
Met dit element kan je o.a. een alternatieve header opbouwen. Je ziet een goed voorbeeld van dit element in de Site Library van GeneratePress (hier te vinden). Klik vervolgens op het demothema genaamd Solo. Als je naar beneden scrolt zie je de alternatieve navigatie verschijnen. Deze heeft een contrastkleur t.o.v. de vaste menubalk.
Tip: Wil je ook hetzelfde element gebruiken? Installeer dan deze demo site op een domeinnaam (eventueel een staging website of een andere lege website). Je kan daarna dit element eenvoudig kopiëren naar de website waar je het op wilt gebruiken!
Hook element voorbeeld
Dit element is het meest geavanceerde en lastigste element van de vier. Deze gebruik je als beginner eigenlijk helemaal niet. In sommige demo websites wordt hier wel iets mee gedaan, maar dan hoef je er zelf niets in aan te passen. Je kan op deze manier wel eenvoudig een PHP code uitvoeren op specifieke locaties van je website. Alle hooks bekijk je hier. In de onderstaande video zie je meer uitleg over deze functie van de GeneratePress elementen
Layout Elements voorbeeld
Een handige tool om specifieke elementen op je website aan te passen. Wil je bijvoorbeeld de content van je website op volledige breedte maken, maar dan alleen op drie pagina’s? Dan kan je dit in de layout elements eenvoudig aangeven. Een voorbeeld zie je in de Site Library bij het Shop thema. Hier is in de lay-out aangegeven dat de footer (onderkant website) uit twee widgets naast elkaar moet bestaan.
Goed om te weten: Als je WordPress in het Nederlands hebt geïnstalleerd op je website, heet dit element meestal Indeling.
Block elements voorbeeld
Dit soort elementen ga je het vaakst gebruiken. Je kan eenvoudig een normaal WordPress block op diverse plekken weergeven op je website. Een enorm goed voorbeeld zie je bovenaan dit bericht, net onder de uitgelichte afbeelding. Daar staat een melding dat dit bericht onderdeel is van de cursus affiliate marketing. Dit bericht wordt automatisch via elementen ingeladen bij alle berichten die in de berichtcategorie Affiliate marketing cursus vallen. Bij andere berichten uit andere categorieën komt deze melding niet.
Soorten blocks
Je kan verschillende soorten block elementen aanmaken, zoals:
- Inhoud Template
- Page Hero
- Berichtnavigatie
- Dynamische blokken
- Bericht Meta Template
- Archief navigatie
- Hook
- Site Footer
- Site Header
- Archive Navigatie
- Linker zijbalk
- Rechter zijbalk
- Loop Template
Bij sommige van deze elementen heeft GeneratePress al een template toegevoegd die je eenvoudig kan inladen. Bijvoorbeeld bij berichtnavigatie:
Aan de rechterkant zie je de kant-en-klare templates die je in kan laden op de website.
Huiswerkopdracht
Het is voor nu de bedoeling dat je vertrouwd raakt met de diverse elementen. Kies of je voor nu de standaard lay-out van de customizer wilt behouden of zelf unieke elementen wilt. Je hoeft voor dit hoofdstuk nog niets te doen. Al kan het geen kwaad om alvast wat rond te klikken en te experimenteren met de elementen. Wil je jouw website alvast wat opleuken, dan kan je hier mee aan de slag gaan. Dit gaan we in deze cursus namelijk verder niet meer behandelen. Ik raad zelf aan om een goede starter site te importeren. Hier zitten bijna altijd kant-en-klare elementen bij.
