Auto CSS-sjablonen

Lichtgewicht CSS-sjablonen voor auto's

Twee standaard lay-outs kunnen identieke content bevatten en er toch totaal anders uitzien. Het verschil zit hem in de stylesheet: hoeveel ruimte er rond een prijs is, of een 'verkocht'-badge opvalt of juist subtiel is, en wat een specificatieregel doet wanneer de waarde uit drie woorden bestaat. CSS-sjablonen voor auto's bundelen deze beslissingen voor de componenten die een autowebsite honderden keren herhaalt.

Componenten die een stylesheet echt beheert

Het zichtbare oppervlak van een autolay-out komt neer op een kleine set herhaalde onderdelen:

1. Voertuigkaarten, waarbij de beeldverhouding, randen en gelijke hoogtes binnen een rij bepalen of een lay-out er verzorgd of willekeurig uitziet.

2. Prijs- en financieringslabels, die voldoende grootte en dikte moeten hebben om op te vallen naast een drukke foto.

3. Specificatieregels voor kilometerstand, versnellingsbak en bouwjaar, zo uitgelijnd dat twee auto's in één oogopslag vergeleken kunnen worden.

4. Statusbadges zoals 'beschikbaar', 'gereserveerd' of 'verkocht', die leesbaar zijn zonder twee keer gelezen te hoeven worden.

Zodra die regels in gedeelde klassen zijn opgenomen, erft elke nieuwe auto die regels in plaats van dat ze handmatig worden gestyled.

Problemen die echte voorraad met zich meebrengt

Drie problemen in de autobranche duiken op bij bijna elk dealerproject:

1. Modelnamen verschillen enorm in lengte, dus kaarttitels moeten een regelafbreking en een voorspelbare hoogte hebben.

2. Foto's komen binnen in verschillende verhoudingen van telefoons, leveranciers en fabrikanten, dus een vaste verhouding met gecontroleerde uitsnijding voorkomt dat een rij er slordig uitziet.

3. Prijzen concurreren met afbeeldingen om de aandacht, dus breedte en afstand moeten het werk doen dat kleur alleen niet kan.

Dealers die hun eigen foto's maken, lopen het eerst tegen het tweede probleem aan, meestal in de winter, wanneer de helft van de voorraad onder een grijze hemel wordt gefotografeerd en de kaarten er ongelijkmatig uit beginnen te zien.

Op een smal scherm veranderen dezelfde componenten van vorm. Naarmate de specificaties zich opstapelen, wordt de galerij veegbaar en blijft de contactknop binnen handbereik onderaan de kaart.

Aangekochte CSS-regels veilig aanpassen

Nicepage ondersteunt aangepaste CSS-code voor toegewezen klassen en regels. De documentatie over aangepaste CSS laat zien hoe deze regels worden toegepast via instellingen en klassenamen. Dit is de praktische manier om een gekochte stylesheet voor auto's aan te passen: een breder prijskaartje, een rustigere, meer ingetogen uitstraling en meer ruimte voor een lange titel, allemaal zonder de onderdelen die al goed werken te verstoren.

Het kopen van een stylesheet betekent ook dat je de gewoonten ervan overneemt. Het is daarom handig om te zien hoe de stylesheet een kaart zonder foto behandelt. Beoordeel een CSS-template voor auto's op basis van je slechtste content, niet op basis van de beste demo. De langste naam, de donkerste foto en de auto met veertien specificatieregels vertellen je wat je moet weten.