Stap 8

Stap 8

We gaan door het gebruik te maken van de verschillende blokken van ons thema, css en javascripts het uitzicht van onze homepage volledig wijzigen.

Het resultaat van deze stap vind u hier.

 

 

voorbereiding.png VOORBEREIDING:

  • Installeer en activeer volgende module(s):
  • Download hier de nodige code
  • Maak 2 nieuwe Afbeeldingsstijlen aan:
    • crop 350:
      • Bewerking: Focuspunt schalen en uitsnijden 350×350
    • 400 x 300 crop:
      • Bewerking: Focuspunt schalen en uitsnijden 400×300

 

Algemeen:

Blokgebieden

Het huidige thema dat we gedurende al onze vorige stappen gebruikt hebben heeft meer toeters en bellen dan we vermoeden.

Er is namelijk een verschil tussen de beschikbare blokgebieden van de frontpagina t.o.v. de andere pagina's lesfiche

 

 

instructions.png INSTRUCTIES:

Aanpassen Frontpagina

1. Hoofding:

lesfiche

  • Site info

Op de Frontpagina moet de site info rechts staan en op alle andere pagina's willen we deze op de linkerkant.

 

  • Achtergrond hoofding

We veranderen de achtergrondafbeelding

  • Slideshow hoofding

Op de frontpagina komt een kleine slideshow met daarin de afbeeldingen van de schilders en schilderijen.

Deze slideshow wordt niet getoond op de andere pagina's.

 

  • Menu met hoover effects

Het menu op de frontpagina ziet er anders uit dan op de andere pagina's.

2017-04-21 10 04 03-Welkom   Drupal

 

2. Linken naar de verschillende items

Boven de inhoud van de welkomstpagina zetten we een 3 afbeeldingen en een titel die linken naar de verschillende onderdelen: schilders, schilderijen en musea. Ook zorgen we voor een andere achtergrond lesfiche.

2017-04-21 10 05 20-Welkom   Drupal

 

3. Schilderijen met hover effects

Onder de inhoud van de welkomspagina plaatsen we een afbeelding van schilderijen met hun titel. Als we over de afbeelding hoveren wordt een foto van de schilder en zijn naam zichtbaar lesfiche.

2017-04-21 10 06 08-Welkom   Drupal

 

4. Schilders met hover effects

We plaatsen de foto's van de schilders waarbij tijdens het hoveren een andere foto zichtbaar wordt lesfiche.

2017-04-21 10 06 42-Welkom   Drupal

 

5. Musea met hover effects

De afbeeldingen van de musea met een  mouse-over effect: afbeelding vergroot lesfiche.

2017-04-21 10 06 53-Welkom   Drupal

 

6. GMap

Onder de frontpagina plaatsen we een Google kaart met de locatie van het Louvre lesfiche.

2017-04-21 10 08 15-Welkom   Drupal