Frontend (pagina)

Als we kijken naar de demo op de frontend van Lara CMS, dan vinden we daar een pagina ('about') met allerlei componenten.

1. - Hero

Een grote afbeelding die over de volle breedte onder het menu, en boven de titel geplaatst is, noemen we een 'hero'.

2. - Broodkruimel

Vlak boven de titel van de pagina wordt meestal een zogenaamde broodkruimel ('breadcrumb') geplaatst. Deze geeft het 'pad' aan van de pagina.

3. - Titel

De titel is van groot belang voor de vindbaarheid van de pagina. In de template wordt deze titel in H1 tags gezet, zodat zoekmachines de titel kunnen identificeren. Kies een duidelijk en krachtige titel, maar maak hem niet te lang.

4. - Featured Image en/of Video

Featured image

Elke pagina in Lara CMS kan één featured image hebben. Dit is de hoofdafbeelding van de pagina. De positie op de pagina wordt door de template bepaald. Zie opmerking over inline images hieronder.

Video

Als een pagina een video bevat, dan wordt deze op de positie van de featured image geplaatst.

Featured image + Video

Als een pagina zowel een featured image als een video bevat, dan kan de featured image als 'video still' gebruikt worden. Zie de afbeelding hierboven.

Inline images: in de tijd dat er nog geen smartphones en tablets waren, en elke webpagina dus op een desktop getoond werd, werkten webmasters veel met zogenaamde inline images. De afbeelding werd door de webmaster binnen de editor in de tekst geplaatst, en uitgelijnd. De webmaster kon dus zelf de opmaak bepalen. Images en responsive design: Met de komst van smartphones en tablets werd er ineens veel meer eisen gesteld aan een goede opmaak van een webpagina. Elke pagina moest er goed uitzien op een kleine smartphone, een tablet, maar ook op een grote desktop. De oplossing was responsive design. Dit was tevens het einde van de inline image. Een template bouwer kan geen goede responsive pagina maken als de webmaster inline images in de tekst zet. Binnen een modern systeem met professioneel responsive design bepaalt de template bouwer dus de positie en de opmaak van de afbeeldingen.

Inline Images in Lara CMS: Lara CMS biedt de webmaster wél de mogelijkheid om een inline image in de tekst te voegen. We raden echter elke webmaster sterk af om hier gebruik van te maken.

5. - Body tekst

Dit is de hoofdtekst van de pagina. Deze wordt opgemaakt in de zogenaamde WYSIWYG editor. Deze editor geeft de webmaster ruime mogelijkheden om de pagina op te maken.

6. - Gerelateerde pagina's

Hier worden de relevante gerelateerde pagina's getoond die door de webmaster toegevoegd zijn. Het gebruik van gerelateerde pagina's in plaats van hard gecodeerde links in de tekst voorkomt dode links.

7. - Gerelateerde documenten

Hier worden de relevante gerelateerde documenten getoond die door de webmaster toegevoegd zijn.

8. - Gallery

Alle extra foto's worden in de gallery geplaatst. De foto's in de gallery zijn clickable en worden dan in een zogenaamde gallery lightbox getoond (fullscreen slideshow).

9. - Blokken (widgets)

De webmaster kan via de backend één of meer blokken toevoegen aan de pagina. In het voorbeeld is een blok met testimonials toegevoegd aan de 'over ons' pagina.