Kennisbank: Website uiterlijk
Uw webwinkel omzetten naar responsive

Wij ondervinden dat het vaak erg lastig is om de webwinkel responsive te maken. (voor mobiele apparaten geschikt) Hieronder een uitleg hoe u de homepagina en informatiepagina's responsive kunt maken.
Vaak wordt er een tabel layout gemaakt voor de indeling van de webwinkel. Hier kunt u lezen hoe u dit kunt omzetten.

Let op: Dit is een erg technisch artikel.

stap 1: standaard layout

Als u gaat naar een informatiepagina en u dan naar beschrijving ziet u helemaal rechtsbovenaan een kopje broncode.

Elke kolom staat gelijk aan 1 div. Dus als uw tabel 3 kolommen heeft, moet u 3 divs aanmaken.

Deze komen er zo uit te zien:

html divisions

Zoals u ziet op de achtergrond van de afbeelding, staan deze divs nu onder elkaar. Daarom heb ik 2 "classes" meegegeven. floatleft en breedtePercentage.

Deze kan ik onder "website uiterlijk > css aanpassen" gebruiken.
Een class kan u hier aanroepen door gebruik te maken van een punt en dan de naam van de class.

"float:left" betekent dat de browser ze naast elkaar probeert te zetten op het moment dat de onderdelen de totale breedte niet overschrijden.
"width:30%" betekent dat alle onderdelen met deze class een breedte hebben van 30% van de totale breedte.

Op de webwinkel komt dit er op de volgende manier dan uit te zien. Dit is vergelijkbaar met de colommen die een tabel heeft.

U kunt de naam "breedtepercentage" altijd aanpassen door een naam naar keuze en hier een bepaalde breedte aan hangen. Let wel op dat deze altijd in percentages moet. Het totaal hoeft geen 100% te zijn.

 

stap 2: extra styling

We gaan nu een afbeelding en wat tekst toevoegen aan de webwinkel. Hiervoor ga ik terug naar een layout met 2 kolommen. De afbeelding dient te worden geupload op het formaat waarop deze op de webwinkel getoond moet worden. deze wordt dan automatisch aangepast naar de juiste grootte voor mobiele apparaten.

Vervang de tekst links door een afbeelding en de tekst rechts door een korte beschrijving. Pas de css verder niet aan.


Daarnaast zijn er nog 2 trucs die u kunt gebruiken om het uiterlijk van de webwinkel te verbeteren. De eerste is "tekst-align" en de tweede is "padding"

Stel dat u de afbeelding in het midden van de kolom wilt, kunt u gebruik maken van "text-align:center;"
Stel dat u de tekst aan de rechterkant meer naar een bepaalde kant wilt verplaatsen kunt u gebruik maken van padding. Dit is op de volgende manier opgebouwd: "padding:boven rechts onder links;" Dit kunt u ook terugzien in de schermafbeeldinging hieronder.

Ik heb een extra class toegevoegd aan de div en gebruik deze nu om daar stijlregels op toe te voegen.

Mocht u naast deze kolommen ook nog extra rijen willen toevoegen, met bijvoorbeeld een andere hoeveelheid kolommen. Dan kunt u dit doen door het volgende stukje code toe te voegen helemaal onderaan en vanaf daar weer te beginnen vanaf stap 1. <div class="clear"></div>

stap 3: Voor alle apparaten geschikt.

Nu duidelijk is hoe de webwinkel er naar wens uit moet komen te zien op het grote scherm, moeten we deze nu goed maken voor het de mobiele apparaten. Dat kan met deze css code. Deze kunt u gewoon toevoegen in "Website Uiterlijk > css aanpassen"

Zoals u ziet worden hier voor verschillende groottes van het scherm verschillende stijlregels toegevoegd. Dit is relatief eenvoudig. U past gewoon het breedtepercentage aan. Naar mate het formaat van het scherm afneemt, zal het breedtepercentage toenemen.

Stel u heeft 4 kolommen en u wilt op de Ipad twee kolommen naast elkaar laten zien en daarmee 2 onder elkaar, dan moet u het breedtepercentage aanpassen (voor ipad: 725-963). Zou u drie kolommen naast elkaar willen en één daaronder, dan moet u dit aanpassen naar 33%. Alle 4 zullen dan 33% zijn. Wilt u de laatste wel over de hele breedte moet u hier een aparte class voor maken en deze een breedte van 100% geven.


Daarnaast heb ik de padding ook gereset zodat het allemaal netjes onder elkaar komt te staan.

 

(2 beoordeling(en))
Dit artikel heeft me geholpen
Dit artikel heeft me niet geholpen

Reacties (0)