Stap 2: De template-instellingen

We gaan nu de template-instellingen invullen. Hiervoor is de breedte van de pagina erg belangrijk. Binnen die breedte kun je de content plaatsen. Buiten deze breedte kun je eventueel nog achtergrondafbeeldingen plaatsen. Voor de landingspagina die we nu gaan maken kiezen we een breedte van 800px en wit als achtergrondkleur. Ook voor de Fonts laten we de standaardinstellingen staan.

Stap 3: Het top menu

We beginnen nu aan de inhoud van de pagina. In ons voorbeeld starten we met een topmenu. Zoals je ziet is de editor gelijk aan de drag & drop-editor van het Creative Template.

Om het top menu uit het voorbeeld na te maken, kiezen we een 4-koloms lay-out. Door op het tandwieltje te klikken helemaal rechts van de lay-out, kun je de lay-out wijzigen. We gaan de 4-koloms lay-out eerst helemaal bovenaan de pagina plaatsen.

Vervolgens gebruiken we de slider in het lay-outmenu om de linkerkolom (waar het logo in komt) een breedte te geven van 40%. De overige kolommen geven we een breedte van 20% (zie onderstaande afbeelding).

Omdat we willen dat het menu op de mobiele weergave ook naast elkaar blijft staan, geven we deze lay-out de optie “fluid”. Daardoor worden de items geschaald, maar blijven ze wel naast elkaar staan. In dit geval kiezen we niet voor responsive (het onder elkaar weergeven van afbeeldingen).

We voegen nu de content toe in het topmenu. Sleep in de linkerkolom het afbeeldingenblok en voeg daar vervolgens een logo aan toe (het logo vind je in de download). Voeg in kolom 2, 3 en 4 menu-items toe. Wij hebben gekozen voor “Website”, “Over ons” en “Contact”. 

De verschillende blokken krijgen de volgende padding:
Logo: 20px, 20px, 20px, 20px
Menu: 30px, 20px, 20px, 20px

Rate this article
Negative ratePositive rate (No Ratings Yet)
Laden...