Auto CSS-sjablonen

Lichtgewicht Auto-CSS-Templates

Twee voorraadrasters kunnen identieke inhoud bevatten en er toch totaal verschillend uitzien. Het verschil zit in het stylesheet: hoeveel witruimte er rond een prijs staat, of een verkocht-badge opvalt of subtiel blijft, wat een specificatierij doet wanneer de waarde uit drie woorden bestaat. Auto-CSS-templates bundelen die beslissingen voor de componenten die op een automotive-website honderden keren terugkomen.

Componenten die een stylesheet daadwerkelijk beheert

Het zichtbare oppervlak van een automotive-layout komt neer op een klein aantal herhaalde onderdelen:

1. Voertuigkaarten, waarbij beeldverhoudingen, kaders en gelijke hoogtes binnen een rij bepalen of een raster er verzorgd of willekeurig uitziet.
2. Prijs- en financieringslabels, die voldoende grootte en gewicht nodig hebben om leesbaar te blijven tegen een drukke foto op de achtergrond.
3. Specificatierijen voor kilometerstand, transmissie en bouwjaar, zodanig uitgelijnd dat twee auto's in één oogopslag kunnen worden vergeleken.
4. Statusbadges zoals beschikbaar, gereserveerd of verkocht, die direct leesbaar zijn zonder een tweede blik.

Zodra die regels zijn opgenomen in gedeelde klassen, erft elk nieuw binnengekomen voertuig deze vormgeving in plaats van handmatig te worden gestyled.

Problemen die echte voorraad veroorzaakt

Drie knelpunten duiken in vrijwel elk dealerproject op:

1. Modelnamen variëren enorm in lengte, waardoor titels van kaarten een regelbeperking en een voorspelbare hoogte nodig hebben.
2. Foto's worden aangeleverd in uiteenlopende verhoudingen via telefoons, toeleveranciers en fabrikanten; een vaste verhouding met gecontroleerd bijsnijden voorkomt dat een rij er slordig uitziet.
3. Prijzen concurreren met beeldmateriaal om aandacht, waardoor letterdikte en tussenruimtes het werk moeten doen dat kleur alleen niet aankan.

Dealers die hun eigen foto's maken, lopen meestal in de winter als eerste tegen het tweede probleem aan, wanneer de helft van de voorraad onder een grijze hemel is vastgelegd en de kaarten er onevenwichtig beginnen uit te zien.

Op een smal scherm passen dezelfde componenten zich aan. Terwijl de specificaties onder elkaar worden geplaatst, wordt de galerij veegbaar en blijft de contactknop onderaan de kaart binnen handbereik van de duim.

Veilig gekochte regels aanpassen

Nicepage ondersteunt Custom CSS Code voor toegewezen klassen en regels, en de Custom CSS-documentatie laat zien hoe die regels via instellingen en klassenamen worden toegepast. Dat is de praktische route om een aangeschaft automotive-stylesheet aan te passen: een bredere prijsbadge, een rustigere gereserveerd-status en meer ruimte voor een lange titel, allemaal zonder de onderdelen te verstoren die al goed werken.

Een stylesheet aanschaffen betekent ook de vaste gewoontes ervan overnemen; daarom is het verstandig om te bekijken hoe een kaart zonder enige foto wordt getoond. Beoordeel een auto-CSS-template op uw meest veeleisende content, niet op het beste van de demo. De langste naam, de donkerste foto en de auto met veertien specificatieregels vertellen u precies wat u moet weten.