qtranslate.php needs to contain the following statements:
// qTranslate Editor will only activated for the given version of WordPress.
// Can be changed to use with other versions but might cause problems and/or data loss!
define(‘QT_SUPPORTED_WP_VERSION’, ‘3.9.1’);
define(‘QT_STRING’, 1);
define(‘QT_BOOLEAN’, 2);
define(‘QT_INTEGER’, 3);
Good luck!!
Bedrijven kunnen op het web gemakkelijk nieuwe markten aanboren. Het web kent namelijk geen grenzen. Wanneer je winkel 24 uur per dag open is, heb je geen huis-aan-huisfolders meer nodig, of callcenters. Kortom, een webshop kan dé boost voor je bedrijf betekenen!
Maar, bezint eer ge begint. Je hebt genoeg knopen door te hakken voordat je een webshop start. Het is niet zo simpel als het aanslingeren van wat webshopsoftware en een aantal producten in je database plempen. Je kunt in ieder geval wel, met de kracht van CSS3, heel eenvoudig gave én gebruiksvriendelijke webshopelementen maken.
De producten moeten nu eenmaal in de schijnwerpers staan en belangrijke knoppen als ‘Voeg toe aan winkelwagentje’ moeten prominent aanwezig zijn en er ook nog eens goed uitzien. Denk vooraf na over de vormgeving van klantrecensies, de prijs en productomschrijvingen. Alles moet met CSS3 op te maken zijn. We maken in deze workshop interactieve webshopelementen met de power van CSS3. Laten we snel beginnen!
Eerst moeten we een nieuw HTML5document aanmaken, met in de head een link naar de stylesheet. Daarna maken we binnen de body-tag twee div’s met de klassenamen ‘container’ en ‘block’. Let op dat je de afsluitende tags tussen commentaren zet voor een betere leesbaarheid.
|
1
2
3
4
5
6
|
<body><div class=”container”><div class=”block”></div><!-- END block --></div><!-- END container --></body> |
Nu gaan we de productafbeelding en wat knoppen toevoegen. Eerst maken we een div met de klassenaam ‘product’. We halen de afbeelding op en voegen twee knoppen toe. Een van die knoppen is de ‘Voeg toe aan winkelwagentje’knop met de klassenaam ‘buy’ en de ander is de ‘Bekijk product’knop met de klassenaam ‘preview’.
|
1
2
3
4
5
6
7
8
|
<div class=”product”><img src=”images/placeholder.png”><div class=”buttons”><a class=”Koop nu” href=”#”>Voeg toe aan winkelwagentje</a><a class=”preview” href=”#”>Bekijk product</a></div></div><!-- END product --> |
Nu gaan we productinformatie toevoegen. Eerst maken we een div met de klassenaam ‘info’ en voegen we een producttitel in, binnen een h4-headerelement. Daarna voegen we een tekst in die ons product omschrijft en maken het af met de prijs en een ‘Koop nu’-knop.
In het laatste stukje HTML voegen we sterren toe, die plaatsen we onder het productgebied. We voegen simpelweg een
|
1
2
3
4
5
6
7
8
9
10
11
|
<div class=”details”> <span class=”time”>12 hours ago</span> <ul class=”rating”> <li class=”rated”></li> <li class=”rated”></li> <li class=”rated”></li> <li class=”rated”></li> <li></li> <li></li> </ul> </div><!-- END details --> |
Open een CSS-bestand en begin met de opmaak. Eerst voeg je wat standaard stijlen toe binnen de bodyselector. Wij gebruiken het font Arial, een lichtgrijze kleur en een achtergrondpatroon. Sluit af met een breedte en marge voor de ‘container’-div.
|
1
2
3
4
5
6
7
8
9
10
|
body {font-family: Arial, sans-serif;color: #aaaeb2;background: #f1f1f1 url(“../images/bg.png”);}.container {width: 900px;margin: 0 auto;} |
Het ziet er allemaal nog niet best uit, tijd voor het design! Door naar de ‘block’-klasse te verwijzen, geven we de body van het productgebied vorm en voegen we mooie subtiele effecten toe via de ‘border-radius’ en ‘box-shadow’-eigenschappen. We zetten de positie op relatief, zodat we andere elementen absoluut
kunnen positioneren – net zoals de knoppen.
|
1
2
3
4
5
6
7
8
9
|
.block {margin: 30px 0;display: block;position: relative;width: 300px;border-radius: 5px;background: #fff;box-shadow: 0 3px 8px rgba(0, 0, 0, .2);} |
Nu voegen we wat stijlen toe aan onze productafbeelding. Let op dat de afbeelding ingesteld staat op block, met een relatieve positie. Daarna stellen we de width in op 100% en we maken het af door de bovenste hoeken dezelfde radius als het block te geven.
|
1
2
3
4
5
6
7
8
9
10
|
.product {display: block;position: relative;}.product img {width: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px;} |
Nu gaan we de producttekst en informatie vormgeven. Eerst target je de ‘info’-klasse, die de producttitel en omschrijving bevat. Daarna scheiden we de ‘details’-sectie – de sterren – door een bovenrand toe te voegen en maken het af met wat padding.
|
1
2
3
4
5
6
7
8
9
10
|
.info {display: block;position: relative;padding: 20px;}.details {border-top: 1px solid #e5e5e5;padding: 18px 20px;} |
De grote jongens zijn ‘Voeg toe aan winkelwagentje’ en ‘Bekijk product’. Die plaatsen we in het midden van de productafbeelding. Daarna verstoppen we ze, totdat de gebruiker over een productafbeelding beweegt. De knoppen zijn nog niet mooi, maar dat komt straks.
Hier geven we de knoppen een basisopmaak. Omdat we de ‘.product’-klasse op relatief instellen, kunnen we makkelijk een absolute positionering toepassen. Zo krijgen we volledige controle over de positie van de knoppen. We geven de knoppen mooie, afgeronde hoeken en verstoppen ze met de ‘opacity: 0’.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.buttons a {display: block;position: absolute;left: 50px;width: 115px;border-radius: 2px;padding: 18px 10px 15px 65px;font-family: Helvetica, sans-serif;font-size: 14px;font-weight: bold;text-transform: uppercase;color: #fff;text-decoration: none;opacity: 0;text-align: center;} |
Hier bepalen we de opmaak van de icoontjes. Die worden in de volgende stap toegevoegd aan de grote knoppen. Laat de content leeg en stel een hoogte en breedte in. Daarna deel je het gebied op door een rand van 1 pixel aan de rechterkant toe te voegen. Vervolgens voeg je een subtiele dropshadow toe.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.buttons a::after{ content: “”; display: block; position: absolute; height: 48px; width: 50px; border-right: 1px solid rgba(0, 0, 0,.25); box-shadow: 1px 0 0 rgba(255, 255, 255,.17); top: 0; left: 0; z-index: 1; } |
Nu focussen we ons op de knop ‘Voeg toe aan winkelwagentje’. Na deze 20% van boven te positioneren, geven we hem een donkere achtergrondkleur. Daarna geven we de knop een subtiele transitie en verlagen de dekking tijdens een mouseover. Uiteindelijk voegen we het icoontje toe dat links wordt gepositioneerd.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
a.buy {top: 20%;background: #414141;background: rgba(0, 0, 0, .85);transition: background .2s ease-in;}.buy:hover {background: #515151;background: rgba(45, 45, 45, .85);}.buy::after {background: url(“../images/cart.png”);background-repeat: no-repeat;background-position: 16px 18px;} |
Nu is het tijd voor de knop ‘Bekijk product’. Deze komt onder de knop ‘Voeg toe aan winkelwagentje’ en we geven deze een blauwe kleur met een lineair verloop. Daarna geven we de knop een subtiele slagschaduw en maken deze af met een transitie van twee seconden tijdens de hover.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
a.preview {bottom: 20%;text-shadow: 0 -1px 1px rgba(0, 0, 0,.4);background: #286398;background: -webkit-lineargradient(bottom, #1d4970, #639ed3);background: -moz-lineargradient(bottom, #286398, #639ed3);background-position: 0 -15px;background-size: 400px 80px;background-repeat: no-repeat;box-shadow: 0 2px 0 #165181;transition: background-position .2s ease-in;}.preview:hover, .buy_now:hover {background-position: 0 0;} |
Hier voegen we een simpele actieve status toe aan de ‘Bekijk product’-knop. We hoeven hier alleen de knop twee pixels naar beneden te schuiven via de ‘translateY’-aarde van de transform-eigenschap wanneer we op de knop klikken. In de volgende regel voegen we het icoontje toe, net zoals we eerder deden.
|
1
2
3
4
5
6
7
8
9
10
|
.preview:active, .buy_now:active {transform: translateY(2px);box-shadow: none;}.preview::after {background: url(“../images/eye-icon.png”);background-repeat: no-repeat;background-position: 16px 17px;} |
We gaan een pijl maken die naar de productafbeelding wijst, net boven de producttitel. Dit is een eitje. Maak een wit vierkant van 25x25px, positioneer deze absoluut met een rotatie van 45 graden. Daarna verschuiven we deze naar beneden via ‘top -12px’, zodat we een van de hoeken kunnen zien.
|
1
2
3
4
5
6
7
8
9
10
|
.info::after {display: block;position: absolute;top: -12px;left: 23px;content: “”;height: 25px;background: #fff;transform: rotate(45deg);transform: rotate(45deg); |
In deze simpele stap passen we wat stijlen toe op de producttitel. De positie stel je in op relatief en ook geef je wat padding en margin in. Daarna stel je de font-family, font-weight en size in. Maak het geheel af door alle letters een negatieve waarde te geven.
Alles begint nu mooi te worden en nu is het tijd voor de productomschrijving. Eerst voegen we een blauwe lijn van twee pixels dik toe, net onder de titel. Lijnen kun je gemakkelijk in hoogte aanpassen, ideaal. Daarna gaan we de productomschrijving opmaken.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.info h4::after {display: block;position: absolute;bottom: 0px;content: “”;width: 40px;height: 2px;background: #3b86c4;}.info .description {display: block;padding-bottom: 20px;font-family: Arial, sans-serif;font-size: 14px;font-weight: 600;color: #5f5f5f;} |
De productomschrijving is bijna af. Nog twee belangrijke dingen: je product een prijs geven en deze vormgeven. Experimenteer met stijlen; soms werkt een groot font beter, of een andere kleur.
De ‘Koop nu’-knop is de laatste stap in het voltooien van de productomschrijving. We floaten deze naar rechts met een relatieve positie. Verder gebruiken we dezelfde opmaak als bij de ‘Bekijk product’-knop. Maak alles af met een mooie transitie en slagschaduw.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.buy_now {float: right;position: relative;top: -5px;display: block;padding: 10px 10px;border-radius: 3px;font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;color: #fff;font-weight: bold;text-decoration: none;font-size: 15px;text-shadow: 0 -1px 1px rgba(0, 0, 0,.4);background: #286398;background: -webkit-linear-gradient(bottom, #1d4970, #639ed3);background: -moz-linear-gradient(bottom, #286398, #639ed3);background-position: 0 -15px;background-size: 400px 80px;background-repeat: no-repeat;transition: background-position .2s ease-in;box-shadow: 0 2px 0 #165181;} |
We leggen de laatste hand aan de sterren. We positioneren de ongeordende lijst aan de rechterkant en resetten iedere standaard margin en padding. Nu wordt het blok korter en vallen onze opsommingstekens weg. Dit lossen we zo op:
|
1
2
3
4
5
6
7
|
.rating {position: relative;top: 2px;float: right;margin: 0;padding: 0;} |
In deze laatste CSS-regel gaan we onze sterren toevoegen. We hebben een png-bestand genaamd ‘stars.png’ op de cd en website staan die je kunt gebruiken. We gebruiken de afbeelding als CSS-sprite en plaatsen eerst de groene sterren met de klassenaam ‘.rates’ binnen het li-item.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.rating li {float: left;display: block;height: 16px;width: 16px;margin-left: 5px;background: url(“../images/stars.png”) no-repeat 0 0;}.rating li.rated {background-position: 0px -16px;} |
E-commerce groeit continu en je kunt steeds makkelijker gave en functionele webelementen ontwerpen met CSS3. Experimenteer wat af en bekijk de mogelijkheden!