Les 9

(Pdf-versie)

Oefeningen

Frontpage

  1. Met onze inhoud van de werkmaterialen gaan we een nieuwe frontpage aanmaken. Hierin zitten een hele hoop blokken en extra's.
  2. Maak eerst een nieuwe node aan van het type Artikel. Geef deze zelf een alias /werk
  3. Geef als titel 'Tools @ Work Frontpage'
  4. Plaats onderstaande tekst in de body:

Welk merk of type gereedschap je ook zoekt, de kans is groot dat je het bij Tools @ Work gaat vinden en in de meeste gevallen ook voor de beste prijs. Wij bieden je een assortiment dat zowel informatief, prijstechnisch en kwalitatief in evenwicht is. Je vindt bij ons niet alleen de bekende merken gereedschap zoals Bosch, Makita, Dewalt, Hitachi, Milwaukee en Festool, maar ook de minder bekende merken. Voor iedere professional en klusser proberen we een aansluitend aanbod te bieden.

  1. Normaal zouden we nu deze node kunnen instellen als Standaard Voorpagina. In deze oefening gaan we dat niet doen. We wensen de huidige voorpagina te behouden. Leg daarom een link in het menu naar deze node. Vanaf nu zullen we steeds verder bouwen op deze URL.
  2. In mijn geval wordt er rechtsboven nog een voorstelling gedraaid van boeken. Schakel dit blok uit voor deze pagina.
  3. De titel van deze node mag niet zichtbaar zijn, zorg dat deze is uitgeschakeld op deze pagina.
  4. Maak nu een nieuw blok aan dat je straks boven de node plaatst ter vervanging van de titel. Gebruik als tekst 'Welkom bij Tools @ Work'. Zorg er vervolgens voor dat volgende opmaak wordt toegepast:
    1. Gecentreerd
    2. 50pt groot
    3. Kleur: #3333a5
    4. Lettertype: monospace
    5. Gestippelde rand
    6. afgeronde hoeken van 20pt
    7. onderaan een marge van 15pt

d

  1. Zorg ook voor een passende opmaak van de body, zodanig dat:
    1. Er een afstand tot de rand is van 15pt
    2. De achtergrondkleur Powderblue is
    3. De afstand tot andere objecten is 15pt
    4. De tekengrootte is 1,5 keer zo groot
    5. De tekst staat in het midden
    6. De tekst staat vetgedrukt
    7. Regelafstand is 35pt

a

Promoblok

We willen een opvallend blok die de promo geeft. Hierop zullen we een effect naar keuze plaatsen.

  1. Maak een nieuw inhoudstype aan: promotie
  2. Enkel een afbeeldingsveld is nog nodig om toe te voegen
  3. Voeg nu inhoud toe van het type Promotie
  4. Tekst in de body: -15% op al onze Troffels
  5. Afbeelding: deze
  6. Maak een nieuw overzicht aan. Kies een onopgemaakte lijst van velden, het inhoudstype hier is Promotie
  7. Kies voor een blok
  8. Voeg het veld afbeelding en body toe
  9. Het veld titel kan je uitsluiten van weergave
  10. Herschrijf de velden zodanig dat het effect Romeo toegepast wordt
  11. Wanneer je klikt op het blokje dan krijg je alle troffels te zien
  12. Om dit goed te laten werken zal je hard moeten werken aan de code!
  13. Uiteindelijk moet het blok centraal onder de main content komen te staan.

--> Gebruik hiervoor het reeds gemaakte overzicht rond de vogels om die code te herwerken.

g     

--> --> --> -->

 h

View van taxonomietermen

  1. Download eerst DEZE afbeeldingen
  2. De woordenlijst brand pas je zodanig aan dat het bijhorende logo ook kan worden opgeroepen. Hiervoor zal je een veld moeten toevoegen bij die woordenlijst.
  3. Met het materiaal dat je nu hebt kan je een overzicht maken van de verschillende logo's. Klik je op een logo, dan verschijnen alle producten van dat merk.
  4. Ik plaats dit blok in de content suffix
  5. Zorg er ook voor dat dit blok een titel krijgt in de vorm van een kop, met dezelfde opmaak als de titel van de pagina (zie hoger)
  6. Klik je op een merk, dan zie je alle producten van dat merk. Zorg ervoor dat bij deze weergave ook de afbeelding van de tool te zien is. Ik wil ook geen 'lees meer' zien staan. Het logo van het merk mag gerust iets kleiner worden getoond.
  7. In diezelfde weergave hoef je ook geen paginatitel te zien. Het logo op zich is duidelijk genoeg.

egrege

 

wera

Tot slot

Maak een slideshow van de afbeeldingen van alle werkmateriaal en plaats deze op een fijne plaats op de pagina.

gfjk

Extra

Wanneer je klikt op een merk dan zie je alle merken, inclusief een foto. Zorg ervoor dat wanneer je over de foto gaat hooveren dat deze licht wordt ingezoomd.

Ik heb mijn inspiratie gehaald op deze site:

https://codepen.io/nxworld/pen/ZYNOBZ