Wix: Snel uw eigen site!

Een website maken schrikt veel gebruikers af, want geen kennis van html of xml, of van een programmataal als Java(script) of php. Dankzij wysiwyg-editors (what you see is what you get) is die kennis helemaal niet vereist. Eigenlijk hoeft u nauwelijks meer te doen dan de gewenste inhoud naar de juiste plaats te verslepen. Wix is precies zo’n editor en u hoeft er zelfs niets voor te betalen. Wilt u naderhand toch die advertenties kwijt, verkiest u een eigen domeinnaam voor uw site, hebt u onbeperkte opslagruimte nodig of overweegt u een webwinkel, dan kunt u altijd nog overstappen naar een ‘Premium-plan’. In deze workshop gaan we alvast van start met een gratis account.

Surf naar www.wix.com waar u allereerst een account aanmaakt: klik op Login/Sign up en vervolgens op Create New Account. U hoeft alleen uw e-mailadres en een wachtwoord in te vullen. Zodra u met Go bevestigt, bent u bij Wix aangemeld. Voor u met het bouwen van een site begint, doet u er goed aan even langs My Account, Settings te gaan. U zal merken dat u daar een gebruikersnaam hebt gekregen. Dat wordt meteen ook het adres van uw website(s) (http://<gebruikersnaam>.wix.com/<sitenaam>). Die naam kunt u echter (één keer) wijzigen. Bevestig uw eventuele aanpassingen met Update Personal Details (en verwijder desgewenst het vinkje bij Keep me updated about new features and tips).

U bent nu klaar voor uw eerste ontwerp. Klik op Start creating en selecteer een geschikt sjabloon (template). Kies All (bovenaan links) om zowel de ontwerpen in Flash als in html5 te zien. De vele tientallen sjablonen zich gelukkig wel afbakenen tot een bepaalde categorie, zoals Photography, Music en Facebook Pages. Een compleet leeg sjabloon (Blank Template) zit er eveneens bij, maar wij kiezen hier voor Photography 01. Hebt u een leuk sjabloon gevonden, druk dan op de bijhorende knop Edit. Wix laadt meteen het sjabloon en is zo galant u met een videotutorial op weg te zetten. Overigens vindt u nog meer instructieve videoclips op de Wix-site.

Afhankelijk van het gekozen sjabloon presenteert Wix standaard de module WixExpress. Die laat u toe in een handvol stappen uw (eerste) website op te zetten. Open dus maar de eerste stap (Site Details). Hierin kunt u de sitetitel kwijt. In stap 2 (Customize Design) legt u de achtergrondkleur vast en/of kiest u een geschikt plaatje. Dat laatste doet u met de knop Replace waarbij u zowel uit een online galerij kunt putten als eigen foto’s kunt uploaden (via My Images, Upload Image). Over naar stap 3 (Manage Pages), dat u een overzicht geeft van de pagina’s van uw site. Die kunt u uiteraard geheel volgens eigen inzicht aanpassen…

In ons sjabloon vinden we standaard vier pagina’s terug: Home, About, Portfolio en Contact. Wilt u zo’n pagina liever niet, dan volstaat het de muisaanwijzer even boven die paginatitel te houden en het vuilnisbak-pictogram aan te klikken. Minder drastisch is te pagina onzichtbaar te maken (via het oog-pictogram): die kunt u dan altijd opnieuw zichtbaar maken. Klik op de zwarte pijlpunt als u de pagina een andere naam wil geven. Uiteraard is het ook mogelijk de inhoud van zo’n pagina aan te passen: zodra u de paginanaam aanklikt, verschijnt een paneel waar u, afhankelijk van de pagina, tekst, foto’s of eventuele andere inhoud kunt wijzigen. Nieuwe pagina’s toevoegen kan ook: klik op Add Page en kies een geschikte lay-out uit het aanbod, of start van de grond af door (helemaal onderaan) Blank te kiezen. Bevestig met OK. Verder in deze workshop tonen we u wel hoe u zo’n (lege) pagina verder vorm geeft.

Bent u klaar, druk dan op Save, kies een naam voor uw site en bevestig met OK. Controleer met Preview of alles er goed uitziet. Klik dan op Back to Editing en maak uw site toegankelijk via Publish.

Onderaan links vindt u de knop Go to Editor terug. Die brengt u naar een heuse online bewerkingsmodule waar u alle details van uw site kunt afregelen zonder enige kennis van

html – hoewel het via de knop Add, Widgets, html wel degelijk mogelijk is html-code in te voeren. Als het goed is krijgt u nu de site te zien die u zonet hebt gecreëerd. Toch niet? Dan vindt u die altijd nog terug via My Account.

Bovenaan de editor treft u een knoppenbalk aan. Niet onbelangrijk: hier bevindt zich ook een pijltje (Undo) waarmee u ongewenste handelingen alsnog ongedaan maakt. Handig zijn ook de zoomknoppen en de mogelijkheid om pixel-linialen toe te voegen voor nauwkeuriger positioneringen. Standaard krijgt uw site een vaste grootte mee. Die kunt u echter aanpassen. Klik in knoppenbalk op Settings en kies Appearance, waar u bij Site dimensions de pixelgrootte invult. Bij Viewing mode legt u vast hoe uw site in browsers te zien is: exact in de door u vastgelegde grootte (True Size), geschaald overeenkomstig het browservenster (Best fit) of  aangepast aan de horizontale grootte van de browser (Fit to width).

Via WixExpress kon u weliswaar al de paginaopbouw van uw site aanpassen, maar de editor biedt duidelijk meer mogelijkheden, met name via het paneel Page Manager. Zo kunt u de paginatitels eenvoudigweg verslepen om de volgorde te wijzigen. Klikt u het pijltje rechts van zo’n paginanaam aan, dan krijgt u toegang tot de intussen bekende mogelijkheden: Rename, Hide en Delete. Van hieruit is het echter ook mogelijk een (sub)pagina te creëren (Add Page) of een pagina met behulp van een wachtwoord af te schermen (Password). De bovenste pagina is de master page. Die kunt u zien als de framepagina waarbinnen al uw pagina’s een plaatsje krijgen. Voegt u objecten aan deze pagina toe (zoals een afbeelding of een menu: zie ook verder), dan duiken die in alle pagina’s op (binnen die master pagina). Misschien hebt u behoefte aan meerdere master pagina’s, bijvoorbeeld voor een meertalige site. In dat geval klikt u op Add Master Page, onderaan de Page Manager, of klikt u op u op het pijltje achter de master page en kiest u Duplicate. Op deze manier maakt u namelijk een exacte kopie van uw huidige master page.

U hebt nu al de site-opbouw voor elkaar, inclusief master page en alle gewenste subpagina’s. Laten we nu even inzoomen op een van uw pagina’s, want die kunt u natuurlijk geheel naar wens aanpassen en opvullen. Als voorbeeld nemen we de Home-pagina. Die bevat al een aantal objecten. Zodra u zo’n object aanklikt, verschijnt een kader dat u toelaat het object te verplaatsen, te schalen en te roteren. Tegelijk verschijnt een aangepast contextmenu, dat u toegang geef tot een hele reeks eigenschappen. Van hieruit past u onder meer het lettertype, -kleur en grootte aan, of selecteert u een of ander effect of animatie. Klik op Preview om het resultaat te zien.

U hoeft zich uiteraard niet te beperken tot de objecten die u toevallig in de sjabloonpagina’s terugvindt. Immers, de Add-knop (in het linkerpaneel) biedt u een waaier aan mogelijkheden: van tekst over foto’s en menu’s, tot video’s, muziek en widgets (met onder meer Google Maps, contactformulieren en rss-feeds). We beperken ons hier noodgedwongen tot een paar voorbeelden. Vertrekt u van een lege pagina, dan doet u er goed aan eerst een paar ‘gebieden’ te definiëren waarbinnen u dan concrete objecten kwijt kunt. Klik hiervoor op Add en kies Page Parts, Areas. Kies bijvoorbeeld voor Round. Versleep het gebied vervolgens naar een geschikte plaats en geef die een passende grootte mee. Hoe gaat u nu te werk als u daar een foto wil zien? Open opnieuw Add en kies deze keer Pics. Haal een geschikte plaatje op en versleep het naar dat gebied. U zult zien: de foto blijft netjes binnen de (afgeronde) contouren. Uw eigen creativiteit doet de rest. Veel plezier met Wix!

Tekst: Toon van Daele