Webdegelijk is gestopt per december 2022. Ik ga 'ns een keer wat anders doen.
De website die je bouwt met Oxygen zal veel flexibeler zijn, wat niet alleen bij de bouw goed uitkomt maar ook een groot voordeel zal zijn bij toekomstige aanpassingen/uitbreidingen.
Een andere reden om geen premium themes te gebruiken noem ik eigenlijk ook al elders op mijn site; die themes zijn niet geprogrammeerd met 1 bepaalde website als doel, ze zijn volgestopt met allerlei handige functies zodat er allerlei websites mee gemaakt kunnen worden. Hierdoor kan er weliswaar heel snel een website gebouwd worden maar met gevolg dat zo'n 80-90% van de code niet gebruikt wordt maar wel moet worden ingeladen. Daardoor is de laadtijd erg lang en vergt de website veel onderhoud, en als je dat niet doet wordt je website kwetsbaar voor aanvallen of kunnen bepaalde functies ophouden te werken na verloop van tijd.
Als je klant toe is aan een nieuw theme, dan is het een stuk eenvoudiger en minder tijdrovend een nieuw theme te ontwikkelen in Oxygen en die vervolgens te gaan gebruiken met de bestaande content waardoor je deze content gewoon zou kunnen laten staan en niet hoeft over te hevelen naar een site waar een nieuw premium theme op geïnstalleerd staat.
Oxygen is een plugin die gebruikt wordt voor het bouwen van WordPress websites. Kennis van HTML en CSS kun je gebruiken in de visuele editor. Met Oxygen bouw je een theme(s) en pagina’s. Dat doe je m.b.v een almaar uitdijende verzameling Oxygen elementen. In feite kun je alles bouwen met Oxygen, en ook optimaliseren voor verschillende beeldschermen.
Ik tel eind 2020 meer dan 18.000 gebruikers in hun (besloten) facebook groep, in die groep zitten veelal ontwikkelaar die kennis delen over (het gebruik van) Oxygen Builder. Het daadwerkelijk aantal gebruikers zal nog wat hoger liggen. Oxygen wint snel aan populariteit.
Voor mij is Oxygen de enige tool geworden waarmee ik websites bouw.
Webdevelopers kunnen een lifetime licentie a $249,- aanschaffen, die kosten zijn wellicht een drempel voor website bouwers die gewend zijn $59,- dollar te betalen voor een premium theme. Een lifetime licentie kunnen ze echter voor al hun klanten gebruiken, een theme wordt vaak per klant aangeschaft en is dus eigenlijk juist duurder.
Stel dat je hebt gekozen voor Oxygen, dan staat je het bouwen van een maatwerk theme te wachten. Als je dit idee te overrompelend vindt zou je ook een bestaand Oxygen theme als uitgangspunt kunnen gebruiken. Direct na de installatie van Oxygen kies je dan uit een van de ca. 20 ‘design sets’, een design set is in feite een theme. Je begint meestal bovenin te bouwen. Doorgaans zet je daar het logo in. Bij het werken met een design set zul je tegen beperkingen aanlopen die je doen denken aan het werken met een premium theme. Maar als je voortaan na de installatie ‘Start from scratch’ kiest zul je volledige vrijheid hebben in welke elementen je op welke plek gebruikt, en met welke css.
Nadat je kleuren en fonts hebt gekozen kun je daar later bij het stylen van elementen, bijvoorbeeld het menu, gebruik van maken. Ben je na afloop niet tevreden over de gekozen kleuren dan hoef je die maar op 1 plek aan te passen, zo kun je efficient websites ontwikkelen.
Het aantal elementen in Oxygen is aanzienlijk, de ene zul je meer gebruiken dan de andere.
Een pagina of theme bestaat uit een verzameling divs, hoe een “div” eruit ziet hangt af van de CSS selectors die zijn toegepast op de div.
Een div kan een ID zijn, of een class. Een ID wordt aangeduid met #, een class herken je aan een . (een punt). IDs gebruik je wanneer de styling maar voor 1 specifieke div bedoeld is, terwijl classes gebruikt worden voor alle divs met de betreffende class. Zelf gebruik ik vaak een combinatie van IDs en meerdere classes, bijvoorbeeld voor een knop. Omdat ik vaak meerdere classes gebruik kan ik dus ook soms een class soms achterwege laten. Bijvoorbeeld de class voor de schaduw, zodat ik 1 bepaalde knop juist meer of minder schaduw kan geven, dat doe ik dan door niet de .schaduw class toe te passen maar de ID #schaduw-groot toe te voegen.
Voor een footer, vaak de balk onderaan de pagina, hoef je geen apart template te maken, zoals dat bijvoorbeeld moet in Elementor. In Oxygen is de footer zelfs geen apart element, en header is dat overigens wel, zie volgende paragraaf. Een footer kan eenvoudig worden opgebouwd een section, divs en de nodige elementen voor het weergeven van bijvoorbeeld contactgegevens, social media knoppen, link naar privacy voorwaarden een copyright etc.
Samen met de header zit de footer in the ‘theme’, daar tussenin bevindt zich een element dat ‘Innercontent’ heeft, daarin komt alles terecht wat je maakt voor de afzonderlijke pagina’s. Als je de homepage bijvoorbeeld begint met een slider dan zal die slider dus direct onder de header te zien zijn. (Als er een overlay is insteld zal ie er overigens letterlijk onder vallen, anders sluit de slider aan op de header.)
Om te voorkomen dat ik per ongeluk een css class aanpas terwijl ik in feite een id wil aanpassen gebruik ik soms de Class clock mogelijkheid die in Hydrogen pack zit. Daarmee voorkom ik dat ik bijvoorbeeld alle knoppen over de gehele website een andere stijl geef terwijl ik alleen 1 enkele knop wil aanpassen.
Bovenin bijna iedere website zit een header. Meestal zit daarin in ieder geval het logo en een menu. Ook komt het voor dat er contactgegevens (telefoonnummer) en/of social media buttons in te vinden zijn. Op alle pagina’s is de header te zien. Zie mijn blog artikel over de Header voor een volledige omschrijving van de Header.
Ben je ‘from scratch’ begonnen dan kun je bij een totaal gebrek aan inspiratie toch nog terugvallen op het gebruik van een bestaande header, daarvoor klik je op ‘Add’ en ga je naar de Design library, hier kunnen overigens alleen complete design sets worden geopend, dus die zou je moeten ontdoen van alles wat er onder de header staat. Zelf houd ik lijstjes bij van site onderdelen, zoals headers, die ik goed gekozen vind om daar ideeën uit te halen voor als ik inspiratie nodig heb.
Productpagina’s van WooCommerce zien er niet altijd even verrassend uit, vaak hebben ze dezelfde indeling. Een productpagina in WooCommerce op verschillende manieren aan te passen. De manier die ik hier ga toelichten is die met Oxygen. Naast een productpagina kun je ook een template maken voor specifieke productcategorieën, of een productpagina template voor specifieke producten.
Er bestaan voor het maken van o.a een productpagina, een afrekenpagina en een (categorie) overzichtspagina uiteenlopende Oxygen elementen. Die elementen zitten in de Woocommerce plugin voor Oxygen, die krijgt begin 2022 een grote update, na een periode zonder updates. De alfa versie van die update kan al gedownload worden, het wachten is dus nog op de stable release versie. Welke elementen dat precies zijn zie je in de 2 afbeeldingen hieronder.
Voor een webshop waar ik momenteel aan werk heb ik dit template voor de productpagina gemaakt:
Mocht je in het bezig zijn van een Oxyextras.com licentie (aanrader!) dan kun je aanvullend gebruik maken van twee eigenlijk onmisbare Woocommerce elementen. Dat zijn de "Cart Counter", om aan te geven hoeveel producten in de cart zitten, en de "Mini Cart". Daarmee krijgt de bezoeker snel een beknopt overzicht van de inhoud van de winkelwagen.
In Oxygen kun je naast een template voor een losse pagina ook een template maken voor een post type, dat type kan bijvoorbeeld zijn “blog artikel”.
Bij het maken van een blog template is het handig al wat berichten klaar te hebben, want in Oxygen kan de inhoud ervan direct getoond worden, als voorbeeld, terwijl je de template aan het opbouwen bent. Hierdoor gaat dat bouwen een stuk sneller.
Zoals je in de "structuur panel" in bovenstaande afbeeling kunt zien gebruik ik de volgende blog-specifieke elementen:
De volgende elementen zijn geen specifieke blog elementen maar wel gevuld met specifieke blog informatie:
Wat misschien opvalt, als je gewend bent te werken met Elementor, is dat je niet hele specifiele widgets kunt kiezen. Dus widgets als Post title, Post Excerpt, Post content, Featured image etc bestaan niet in Oxygen. Je gebruikt in plaats hiervan algemene elementen die je vult met specifieke (dynamische) data. Voordeel hiervan is dat je een ruimere keuze hebt in de data die je wilt laten zien.
Zodra je alle elementen hebt toegevoegd en de styling helemaal naar wens is begin je aan de indeling en styling voor de kleinere beeldschermen.
Zoals hierboven gemeld kun je in Oxygen ook templates maken die geladen moeten worden wanneer er een bepaald post type, category etc getoond wordt.
Voor zo’n single template hoef je niet opnieuw een header en footer te gaan maken, het volstaat om in het single template aan te geven dat er “overgeërfd” moet worden, en wel uit het basis template. Hierdoor hoef je je alleen maar bezig te houden met wat er tussen de header en de footer (de “innercontent”) moet komen. In mijn blog post over single templates geef ik voorbeelden van single templates die ik gemaakt heb, daarvan noem ik er nu 2:
Door middel van dynamische content verschijnen er automatisch de gegevens die de webmaster heeft ingevoerd in de betreffende post, eventueel aangevuld met custom fields. Voorbeeld: Bovenaan een profielpagina komt de naam te staan van de persoon. Het veld ‘Naam’ is een dynamisch veld dat is gevuld door de webmaster. In een template voor een blog pagina moet doorgaans worden aangegeven waar onderstaande gegevens terecht moeten komen:
In de meeste premium thema’s zitten custom post types voor bijvoorbeeld cases en profielen van personeelsleden. Ik raad aan zelf custom post types te maken (en pas wanneer je ze nodig hebt). Dat doe ik met CPT UI, die bevalt mij goed.
Ook kun je een template toewijzen aan bijvoorbeeld ‘Woocommerce producten'. Met Oxygen kun je zo'n template geheel naar wens indelen/stylen, dankzij de Oxygen Woocommerce plugin, zodat je niet vastzit aan de geijkte indeling van links de afbeeldingen met thumbs daaronder en rechts de tekst.
Wat ik ook vaak gebruik is een template voor zoekresultaten. Een bezoeker krijgt een zoekresultatenpagina te zien wanneer er een zoekopdracht op de website is uitgevoerd. Ook voor dit template heb je weer alle mogelijke elementen en dynamische data tot je beschikking, voor Jarabee leidde dit tot deze pagina:
Ook andere archief templates kun je maken met Oxygen, denk aan categorie pagina’s, artikelen van een bepaalde gebruiken etc.
Een template dat je toewijst aan ‘404’ wordt gebruikt wanneer er een url bezocht wordt die niet meer bestaat, bijvoorbeeld omdat je de pagina verwijderd hebt. Uiteraard kun je het beste 404 pagina’s helemaal verwijderen, bijvoorbeeld door er redirects van te maken. Maar als er dan toch nog bezoekers op een 404 terecht komen dan wil je natuurlijk dat dit er goed uitziet. Gebruik je WordPress een standaard premium theme dan zit er vaak al een rudimentaire 404 pagina in, die neit veel meer laat zien dan “Sorry, de pagina die u probeerde te bezoeken bestaat helaas niet meer”, met soms een zoekveld, die je meestal daar niet wilt hebben en een knop ‘Terug naar de homepage’. In Oxygen moet er een custom 404 pagina gebouwd worden, dus je heb alle vrijheid.
Ik gebruik cookies, wil je er meer over lezen kijk dan op Privacy pagina. Door deze website te gebruiken ga je daarmee akkoord. Meer informatie over cookies in het algemeen en het aan-/uitzetten ervan daarvan vind je op https://cookies.insites.com