Introductie Oxygen builder

De WordPress Oxygen Builder is een pagebuilder die speciaal ontwikkeld is voor webdesigners die unieke, op maat gemaakte websites willen bouwen. In tegenstelling tot standaard WordPress-thema's is Oxygen een volledige vervanging van een standaard thema, waardoor gebruikers vanaf de grond af aan volledig unieke sites kunnen ontwerpen, zonder de beperkingen van een thema.

Een van de grootste voordelen van Oxygen is dat het een ongelooflijk flexibele visual builder is die je in staat stelt om bijna elk aspect van een website's design en functionaliteit aan te passen zonder dat je code hoeft te schrijven (hoewel kennis van HTML en CSS het gebruik veel gemakkelijker maakt). Oxygen biedt een brede reeks van tools voor styling, lay-out en andere visuele elementen en ondersteunt andere plugins en tools zoals WooCommerce.

Het is wel belangrijk om te vermelden dat er een leercurve aan verbonden is. Oxygen is minder 'instapvriendelijk' vergeleken met andere visuele builders zoals Elementor of Divi en is vooral gericht op ontwikkelaars en ervaren gebruikers die veel vrijheid in hun websiteontwerp willen.
Dit maakt het voor leken toch wat moeilijker om in te werken. Vandaar deze handleiding, waarin we de eigenaren van Oxygen-websites op wel helpen met het doen van kleine, inhoudelijke aanpassingen in bestaande pagina's.

1. Het openen van de builder

Om de builder te openen log je eerst in op je WordPress-website. Hierna ga je naar de voorkant van de website naar de pagina die je wil bewerken. Hier zie je aan de bovenkant het woord 'Oxygen' staan, op het moment dat je hier met je muis overheen gaat verschijnt er 'Edit with Oxygen'. Wanneer je hierop klikt kom je uit in de builder en kun je de pagina bewerken.

2. Het aanpassen van de standaard elementen

Het aanpassen van verschillende standaard elementen is best eenvoudig, maar je moet even weten hoe het moet. Hieronder vind je verschillende elementen om aan te passen met ene korte uitleg.

2.1. Titels

Om een titel aan te passen kun je op de titel zelf klikken of aan de rechterkant op het juiste element klikken. Nadat je op een van beide hebt geklikt, verschijnt er aan de linkerkant een 'Content Box', hier kun je je titel in aanpassen naar hetgeen wat het moet zijn.

Aan de linkerkant kun je hier ook de 'H tag' aanpassen, dit is het soort heading. Zo kun je kiezen uit de volgende opties:

• H1
• H2
• H3
• H4
• H5
• H6

Een H-tag geeft de soorten kopteksten aan, zo is een H1 een titel en een H2 een subtitel.

2.2. Tekst

Voor het aanpassen van een stuk 'Rich Text' selecteer je eerst het element aan de rechterkant of aan het midden. Nadat je dit hebt aangeklikt kun je dubbel klikken op het element in het midden, hierdoor opent zich een tekst bewerker (WYSIWYG) en kun je de tekst erin zetten die je graag wil. Na het invullen van de juiste tekst moet je wel nog eronder op 'Save & Close' klikken.

2.3. Afbeeldingen

Voor het aanpassen van een afbeelding klik je aan de rechterkant op het juiste element of je klik op de afbeelding zelf. Hierna kun je aan de linkerkant klikken op 'Browse', hierdoor opent zich de mediabibliotheek en kun je een afbeelding kiezen/uploaden.

3. Stappenplan

Hieronder bevind zich een stappenplan, van begin tot eind. Hoe je een nieuwe pagina aanmaakt, hoe je deze vervolgens vult en waar je ervoor zorgt dat het online komt.
Let er op, dat Oxygen relatief fout gevoelig is. Voel je je niet zeker in het maken van een nieuwe pagina, vraag dan jouw webbouwer om hulp!

In Oxygen heb je pagina's en templates, die je beide vanuit de Oxygen builder kan wijzigen. Een pagina is een specifieke webpagina die je ontwerpt voor unieke content, zoals een aparte landingspagina. Dit biedt vrijheid om elk ontwerp toe te passen dat je nodig hebt voor die specifieke inhoud. Een template daarentegen, is een herbruikbaar ontwerp dat je kunt toepassen op meerdere pagina's of berichttypes. Templates zijn handig voor consistentie over je site, zoals het standaardiseren van de look van blogposts of bijvoorbeeld vacatures die je elk in dezelfde opmaak wilt hebben. Dit is ook balgrijk om op te letten, wanneer je een pagina gaat bewerken!

3.1. Een nieuwe pagina maken of bewerken

Ga naar 'Pagina's' in je WordPress-dashboard en klik op 'Nieuwe toevoegen' of kies een bestaande pagina om te bewerken. Eenmaal in de editor, selecteer je 'Edit with Oxygen' om de pagina in Oxygen Builder te openen.

3.2. Het structuurpaneel gebruiken

Aan de rechterkant van het Oxygen-interface vind je het structuurpaneel. Hier kun je nieuwe secties, rijen, of andere structurele elementen toevoegen door ze naar je pagina te slepen. Dit paneel toont ook de hiërarchie van de elementen op je pagina, wat handig is voor het navigeren en organiseren van je lay-out.

3.3. Elementen bewerken

Klik op een element in je pagina of in het structuurpaneel om het te selecteren. Aan de linkerkant verschijnt een paneel met instellingen waar je de eigenschappen van het element kunt aanpassen, zoals afmetingen, marges, padding, lettertype, kleuren, en andere stijlopties.

Belangrijk: De website is opgebouwd uit elementen waar een CLASS en ID aan is toegekend. Dit zijn bekende termen uit HTML. Een CLASS is een benaming voor een element, die op meerdere plekken in de website terugkomt. Wijzig je iets in die opmaak? Dan heeft dat invloed op alle elementen met die CLASS, waardoor je gauw grote stylingissues kan veroorzaken. Pas daarom bij voorkeur geen opmaak aan of wijzig linksboven naar de ID. Dan is de opmaak namelijk alleen van toepassing op dat element.

3.4. Responsive design instellen

Oxygen maakt het eenvoudig om je ontwerp aan te passen voor verschillende schermformaten. Klik op de responsive modus-icoontjes bovenaan het scherm om tussen desktop, tablet, of mobiele weergaven te schakelen en pas je ontwerp aan voor elk apparaat.

3.5. Wijzigingen opslaan en publiceren

Nadat je de nodige aanpassingen hebt gemaakt, klik je op 'Save' in de bovenste rechterhoek van de interface om je wijzigingen op te slaan. Om de pagina live te zetten, ga je terug naar je WordPress-dashboard en klik je op 'Publiceren' of 'Bijwerken' bij je pagina-instellingen.

4. Videouitleg voor de Oxygen Builder

In de video hieronder gaan ze dieper in op de Oxygen Builder en leggen ze je alles uit wat je erin kan. Ben jij benieuwd hoe je andere dingen doet binnen de builder of wil je zelf erachter komen of je een website maken door middel van deze builder? Bekijk dan de video hieronder:

Mochten er nog vragen zijn of kom je ergens niet uit? Neem dan contact met ons op via onze contactpagina, wij kijken graag met jullie mee of pakken zaken voor jullie op!