Hoe werkt de website
Elementor - Basics
User Interface
Het is je waarschijnlijk al opgevallen maar zodra je over 1 van de rows gaat met je muis in het bewerk venster kom dit vlaggetje die hier links te zien is tevoorschijn. Hier worden drie dingen weergeven. Het “+” icoon leg ik hier onder uit. De 6 puntjes in het midden zorgt ervoor dat je de gehele row kan verplaatsen. Als je hier met je rechtermuisknop op drukt komen er meer opties beschikbaar. Bijvoorbeeld de mogelijkheid om de gehele row te dupliceren. En met het “x” kan je de row volledig sluiten.
Zoals hier rechts en hier onder te zien is zijn er twee knoppen. Zodra je op de rode knop drukt kan je een kolom keuze maken en daar in widgets slepen maar daar komen we zometeen op. Als je op de grijze knop drukt kan je opgeslagen opstellingen toevoegen aan de website. Al zouden jullie deze knop waarschijnlijk weinig gebruiken.
Hier onder zie je een preview van de daadwerkelijke indeling van de eerste 5 structuren.
1 Koloms
2 Koloms
2 Koloms
3 Koloms
3 Koloms
3 Koloms
4 Koloms
4 Koloms
4 Koloms
4 Koloms
25% Kolom
75% kolom
Zodra je een kolom hebt uitgekozen krijg je het het bovenstaande vakje te zien met een grijs plusje.
Zodra je op dit plusje drukt veranderd de balk aan de linker kant. Hier komen bepaalde widgets/elementen te voorschijn. Deze kan je gemakkelijk op zoon vakje slepen met een plusje.
Hiernaast zie je het menu dat dan openklapt. Je kunt uit verschillende onderdelen kiezen en deze weer aanpassen. Als je bepaalde dingen opslaat als GLOBAAL komen ze in het tabblad daarnaast te staan. Probeer het hierboven maar uit op de manier die hier is aangegeven. Je pakt de widget en sleept deze op de rand van een andere widget/elementen. Dit kan zowel onder als boven. (De iconbox hieronder is dezelfde als die gebruikt word op de website. Sleep deze vanuit GLOBAAL.
ps. als je de tekst van het globale widget veranderd verander deze dus globaal op je site. Om dit te voorkomen druk je op de rode knop unlink nadat je de widget geplaatst hebt.)
Nu je dit hier boven hebt gelezen ben je vast benieuwd wat je nu allemaal hier mee kan doen. Je kan heel veel experimenteren hiermee dus ik raad je ook zeker aan om dit te doen. Druk op bewerken met elementen als je nog niet in het bewerk menu was en probeer het hieronder uit! (vergeet het niet daarna weer leeg te halen zodat je hulp pagina netjes blijft.
Nu je dit hier boven hebt gelezen ben je vast benieuwd wat je nu allemaal hier mee kan doen. Je kan heel veel experimenteren hiermee dus ik raad je ook zeker aan om dit te doen. Druk op bewerken met elementen als je nog niet in het bewerk menu was en probeer het hieronder uit! (vergeet het niet daarna weer leeg te halen zodat je hulp pagina netjes blijft.
Elementor - next level
style'n van widgets/elementen
Zodra je eenmaal een widget heb uitgekozen wil je deze natuurlijk in je eigen style brengen. In dit geval de Bennebroecks huisstijl. Maar zeg dat jullie zelf een row willen aanmaken met jullie eigen kolommen erin precies gestyled zoals jullie willen. Dan kan je bijvoorbeeld van een kop (zie links in het blauw) iets maken zoals hier rechts onder in het zwart.
Voeg je koptekst hier toe
Voeg je koptekst hier toe
Dit doe je doormiddel van een widget aan te klikken en dan naar het tabblad “stijl” te gaan. Hier is het mogelijk om je tekst op verschillende manieren uit te lijnen. Waaronder links, midden rechts of uitgevuld. Probeer de allemaal maar een keer uit op dit tekst vlak.
(tip: als je een widget wil bewerken kan je er gewoon op klikken maar het is ook mogelijk om op het pennetje te drukken. Persoonlijk vind ik dit fijner aangezien ik dan zeker weet dat ik de goede widget heb.)
Geavanceerde instellingen voor widgets/elementen
Het is je vast opgevallen dat er ook een tabblad is die “geavanceerd” heet. We gaan daar nu iets dieper op induiken en welke dingen hiervan voor jullie van belang kunnen zijn.
De belangrijkste opties voor jullie zullen voornamelijk “bewegingseffecten” en “achtergrond” zijn. Bij bewegingseffecten kan je iets naar binnen laten zweven/animeren zoals je met deze tekst zojuist zag gebeuren. Bij achtergrond kan je een kleur of achtergrond geven aan je widget. Al zou ik het zelf sneller aan je kolom zelf geven is dit wel een optie. Als je dit bij je kolom wilt doen werkt dit precies het zelfde.
Je kan kiezen uit verschillende opties. Scrolling effects is wanneer je de pagina op scrolled dat de widget of kolom naar binnen animeert. Maar Mouse Effects kunnen weer hele andere dingen. Hiernaast is een voorbeeld van een Mouse Effect. Hierin zijn twee opties geactiveerd. 3D tilt en Mouse tracking. Het spreekt eigenlijk wel voorzich wat deze twee opties doen.
Wil je overigens je kolom bewerken en niet je widget. Hover over je kolom heen en je zult een grijs vakje te zien krijgen. Zodra je hier op klikt kun je je kolom zelf wijzigen.
Ook is je misschien opgevallen dat al m’n tekst in het midden is uitgelijnd. Dit is gedaan in het tabblad style. Dit kan dus bij alle elementen/widgets. Maar op ze volledige gecentreerd te krijgen in je kolom moet je dit aangeven in je kolom.
Woocommerce
Dashboard
Dit is het dashboard van WooCommerce. Deze is te vinden in het hoofdmenu van WordPress. Hierin kan je je bestellingen en klanten zien maar ook je kortingsbonnen aanmaken.
Zodra je bestellingen uitklapt zie je direct welke bestellingen er zijn bij gekomen en wat de status is van hun bestelling.
Hierna krijg je een overzicht van alle gegevens van deze bestelling te zien. Ook staat hier de status van de bestelling. Zodra je op afgerond drukt bij de status kan je rechtsboven bij bestelling acties er voor kiezen of ze hierover een update ontvangen. Ook kan je voor jezelf notities toevoegen als er iets is met de bestelling en je dat niet los op een kladblaadje wil schrijven. Zorg er dan wel voor dat deze notitie op privénotitie staat. Anders gaat dit bericht wel naar de klant.
Coupons/Kortingscodes
Zoals ik al eerder verteld heb kon je hier ook je kortingscodes aanmaken. Dit is eigenlijk heel erg makkelijk. Je klikt gewoon op kortingsbon toevoegen en vult daarna de gegevens in.
Hier links zie je dat je zelf de code kan aanmaken of een code kan genereren. Ook is het mogelijk om een beschrijving erbij te doen. Dit is optioneel en vaak handig als je gebruikslimieten eraan doet. Of “bij aankoop van …” acties. Jullie moeten zelf maar even kijken welke beperkingen er beschikbaar zijn en welke daarvan voor jullie van toepassing zijn.
En zo komt het dan eruit te zien in het overzicht nadat je een coupon hebt aangemaakt!
Product beheer
Als je producten aan klikt krijg je een geheel overzicht te zien van welke producten je allemaal hebt. Hierbij staan de prijzen, voorraad en categorieën.
Zodra je over 1 van de producten zweeft met je muis komen er gegevens tevoorschijn. Hiermee kan je een product heel gemakkelijk kopiëren, bewerken of snel bewerken. Met snel bewerken kan je bijvoorbeeld een typ fout uit de naam heel gemakkelijk bewerken of toch nog even de prijs aan te passen.
Boven aan deze pagina vind je de optie om een nieuw product toe te voegen.
Hier rechts is de product pagina als je op bewerken zou drukken of als je een nieuw product toevoegt. Natuurlijk zijn alle vakjes leeg als je een nieuwe toevoegt vandaar dat we aanraden om altijd te kopiëren zodat je ook alle eigenschappen meeneemt maar jullie zullen zometeen zien waarom dat wel handig is.
Als eerste zie je dat je een title kan invullen en gewoon wat standaar gegevens. Rechts kan je de categorie selecteren tot waar dit product zich toebehoort.
Bij algemeen kan je de prijs invoeren maar ook de actieprijs. Deze wordt dan automatisch afgetrokken van het totaal bedrag met afrekenen ook en hoeven jullie dus daarna verder niet naar om te kijken.
Zoals je hier rechts ziet kan je de eigenschappen van het bier wijzigen. Hierbij kun je denken aan ingrediënten biersoorten maar ook alcohol percentage. Vandaar dat het makkelijker is om te kopiëren. Hierdoor hoef je niet zelf al deze eigenschappen los erin te zetten. Dan hoef je alleen maar de waardes van deze eigenschappen aan te passen.
Onder aan de pagina bij het bewerken is het mogelijk om je productafbeelding toe te voegen. Dit is belangrijk want anders krijg je alleen een grijs vak te zien. Hou er rekening mee dat jullie foto’s zo identiek mogelijk zijn zodat het verschil tussen de foto’s niet storend gaat worden.
Tot slot
Heel veel plezier en succes met het experimenteren met WooCommerce en Elementor. Als je helemaal vrij uit wil oefen en experimenteren hiermee maakt dat gewoon een nieuwe pagina aan en probeer verschillende widgets uit. Ook zijn er een aantal YouTube kanalen die dit ook super kunnen uitleggen als je verder ergens niet uit zou komen. Maar wij denken dat jullie met deze info genoeg kunnen doen om de site te onderhouden en bij te kunnen werken zoals jullie zelf willen.
Heel veel succes en groetjes van Creative Bape