Categorieën

Producten, berichten, projecten en catalogusitems die herhaaldelijk voorkomen, hebben een voorspelbare structuur nodig die leesbaar blijft naarmate de lijst groeit. Loop HTML-templates bieden herbruikbare opmaaksecties die zich aanpassen aan zowel desktop- als mobiele lay-outs.

Soort:

No results were found.

Make sure the spelling is correct.
Please use generic terms instead of specifics such are brands, for example 'mobile phone' instead of 'iPhone'.
Also try searching by a category

Kunst ontwerp	Mode schoonheid	Reizen en hotels	Natuur
Technologie	Onderwijs	Muziek en entertainment	Onroerend goed
Zakenrecht	industrieel	Sport	Bruiloft
Eten & Restaurant	Interieur	Uitverkoop	Huisdieren
Architectuur en bouwen	Auto's en vervoer	Geneeskunde & Wetenschap	Projectpagina

Meer HTML-sjablonen uit de Architectuur en bouwen categorie

andere Architectuur en bouwen HTML-sjablonen

Loop HTML-sjablonen voor herhaalde content

Een loop HTML-sjabloon definieert één herhaalde eenheid en vult deze met dynamische content uit berichten, producten of projectrecords. Je kiest een kant-en-klaar itemblok, past dit aan de items die je publiceert, en de loop gebruikt die markup voor elk record. Niets wordt handmatig gedupliceerd, waardoor één enkel blok bepaalt hoe het hele raster eruitziet.

Waar het sjabloon eindigt en de content begint

De gebruikelijke verwarring bij loops is dat het sjabloon wordt verward met het item. Een sjabloon bevat lege plekken: vaak een afbeeldingsgebied, een koptekst en een regel met metadata. Bewerk een productnaam en één record verandert; bewerk de markup en het hele raster verschuift in één keer.

Die scheiding resulteert in drie bewegende onderdelen voor de loop:

De itemmarkup, die de hiërarchie en leesvolgorde vastlegt;
De dynamische velden, die waarden in die markup opnemen;
Het buitenste raster, dat bepaalt hoeveel items naast elkaar staan.

Die drie onderdelen bepalen of een kant-en-klaar sjabloon bruikbaar is. Een itemblok met twee velden kan geen items bevatten met vijf velden.

Veldensets verschillen per lus

Niet elke lus bevat een afbeelding, een titel en een beschrijving. De veldenset volgt het inhoudstype en bepaalt wat een lezer als eerste opmerkt.

Drie bekende voorbeelden laten zien hoe sterk die sets uiteenlopen:

Een berichtlus koppelt datum, auteur en samenvatting aan de kop, waardoor de samenvatting nooit zwaarder weegt;
Een evenementlus begint met datum en locatie, waardoor het tijdsblok meer gewicht heeft dan de afbeelding;
Een adreslijstlus bevat categorie, adres en contactgegevens, met de actieknop ernaast.

Alle drie herhalen één basisstructuur, maar het gewicht binnenin verschuift, en het matchen van een sjabloon met dat gewicht is het grootste deel van het selectiewerk. Het aanpassen van een berichtindeling voor evenementrecords betekent het herschikken van velden.

De structuur behouden op verschillende schermformaten

Herhaalde blokken lezen goed op een breed scherm, maar worden moeilijker leesbaar zodra de kolommen worden ingeklapt. Het is dan belangrijk of een record nog steeds samenhangend is: afbeelding boven de titel, prijs naast de naam, actie gekoppeld aan het betreffende item.

Voorbeeldcontent verbergt dit, omdat demo-items meestal dezelfde hoogte hebben. Problemen ontstaan wanneer een projecttitel drie regels beslaat en de volgende bijna geen beschrijving heeft. Het is de moeite waard om uw langste en kortste items in een gekozen sjabloon te laden voordat u op grote schaal publiceert.

In Nicepage plaatst het rasterelement herhaalde items in responsieve cellen; de handleiding voor responsief webdesign beschrijft de bedieningselementen hiervan.

Een HTML-sjabloon met een lus is nuttig wanneer de structuur, leesbaarheid en gegevensvolgorde behouden blijven, ongeacht het aantal records en de schermbreedte.