Responsive CMS artikelen met product informatie en afbeeldingen

Responsive maken van CMS artikelen

Met behulp van horizontale of verticale blokken ben je nu in staat om content in te delen.
Deze blokken zijn al responsive ingericht en zullen in de meeste gevallen meteen werken.

Het voorbeeld hieronder bevat een indeling van 4 blokken:

• 1 blok van 100% breedte met daarin
  • Een titel met 100% breedte
  • 2 blokken van elk 50% breedte

De code hiervoor ziet er als volgt uit:

Desktop

Op de desktop zal dit als volgt worden getoond:

Mobiel

De mobiele weergave ziet er dan als volgt uit:

De blokken

Dit wordt mogelijk gemaakt door 2 nieuwe blokken.
Deze blokken zijn vrijwel identiek, het enige verschil is dat een horizontaal blok de inhoud horizontaal laat zien en een verticaal blok lijnt het verticaal uit.

• Horizontale blokken
• Verticale blokken

Horizontale blokken

Horizontale blokken worden geplaatst met de volgende code:

<blok-horizontaal>…</blok-horizontaal>

Alles in dat blok zal gegroepeerd worden en zich schalen naar dat blok.
Standaard zal een blok de volledige breedte van de pagina pakken, maar door het ingeven van een breedte ben je in staat om dit aan te passen.

<blok-horizontaal breedte:50>…</blok-horizontaal>

Meer informatie hierover bij het onderdeel “Attributen”.

Verticale blokken

Verticale blokken worden geplaatst met de volgende code:

<blok-verticaal>…</blok-verticaal>

Alles in dat blok zal gegroepeerd worden en zich schalen naar dat blok.
Standaard zal een blok de volledige breedte van de pagina pakken, maar door het ingeven van een breedte ben je in staat om dit aan te passen.

<blok-verticaal breedte:50>…</blok-verticaal>

Meer informatie hierover bij het onderdeel “Attributen”.

Samen

Met deze attributen ben je dus in staat allerlei verschillende opstellen te maken.

Opstelling van 3 kolommen (33, 33, 33)
Opstelling van 2 kolommen (25, 75)

Opstelling van 2 kolommen (50, 50)

Blok attributen

Het is mogelijk om bepaalde styling toe te voegen aan een blok met behulp van attributen.
Deze styling wordt gemaakt door Logic4 en wij zorgen ervoor dat deze er degelijk uitziet en responsive is.

Een attribuut voeg je op de volgende manier toe:

<blok-verticaal breedte:50>…</blok-verticaal>

Dus achter de naam van het element.

Breedte

Breedte attributen stellen je in staat om zelf in te stellen hoe breed een stuk tekst, afbeelding, of een product moet zijn.

Uitlijning

Uitlijning attributen stellen je in staat om cms content uit te lijnen.

Extra

Hieronder de lijst met “Extra” attributen.
Dit zijn attributen die vormgeving toevoegen die in vaak situationeel zijn.
Het “extra:witruimte” attribuut is bijvoorbeeld handig om een h2 / titel element wat extra ruimte te geven.

Plaatsen van een product

We kunnen een artikel plaatsen in een losse CMS pagina door te werken met de volgende tag:

<product>
<productcode>code-hier</productcode>
</product>

Dit artikel zal dan uit de volgende informatie bestaan:

• Artikelnaam
• Afbeelding van het artikel
• Link naar het artikel op de webshop

Om de prijs toe te voegen, voeg je de volgende code toe: <includeprice>true</includeprice>
Zorg er voor dat deze tussen de </productcode> en </product> staat!

Deze producten kunnen dan in een CMS item geplaatst worden of in een groep.

Er wordt wel gecontroleerd of de producten wel gekoppeld en zichtbaar zijn op de webshop alvorens ze getoond worden.
Zijn ze niet gekoppeld of zichtbaar op de shop dan zullen ze uit de body van de CMS worden gefilterd om zo dode links te voorkomen.
Hieronder een voorbeeld van een code en het resultaat:

Afbeeldingen toevoegen

Je bent in staat om een schaalbare, responsive afbeelding toe te voegen in een CMS item met behulp van de volgende code.

<banner>
<afbeelding>link-naar-afbeelding.jpg</afbeelding>
</banner>

Hieronder een stuk voorbeeld code met het resultaat

Voorbeelden

Hieronder enkele voorbeelden van CMS paginas die gemaakt zijn met dit systeem: