Lay-out

 

Lay-out

Onder opmaak (lay-out) wordt verstaan hoe de opbouw van een grafisch ontwerp er visueel uit ziet. Het gaat dan de positie van bijvoorbeeld de tekst of de afbeelding op de pagina, de indeling in kolommen, waar de afbeeldingen staan, et cetera.

De kleur, lettertype en marges zitten in het thema, deze wordt gekoppeld aan de lay-out. Een goede lay-out zorgt ervoor dat de informatie gemakkelijk te herkennen en te lezen is. De opmaak wordt dus strikt onderscheiden van de inhoud (content).

Elke pagina kan één lay-out hebben. De lay-out voorziet de website van de vaste elementen. Een voorbeeld hiervan is bijvoorbeeld de voetbalk (footer) die in een website voorkomt. Als we die op veel pagina’s terug willen laten komen dan is het handig om daar een lay-out voor te maken. Die wordt dan door u gekoppeld aan de pagina die u wilt voorzien van deze informatie.

  • Kies in het hoofdmenu voor Websitebeheer 2.
  • Klik in het submenu op het item Lay-out.

Layout 001

 

IconS Plusje Toevoegen Aanmaken van een nieuwe lay-out
IconS Groen Standaard lay-out Lay-out automatisch gekoppeld aan nieuwe pagina
IconS Oog Bekijken Bekijken van de lay-out
IconS Edit Bewerken Wijzigingen aan de lay-out aanbrengen
IconS Delete Verwijderen Verwijderen van de lay-out
IconS Eigenschappen Eigenschappen Eigenschappen lay-out bewerken

Basisbegrippen lay-out

We gebruiken voor het voorbeeld een live website demo zodat te zien is wat er gebeurt in de pagina, de lay-out en de tekst. Als u in e-Captain een lay-out aanmaakt of bewerkt, zal het onderstaande scherm zichtbaar worden:

 

Layout 003

 

Navigatie

In de bovenste balk ziet u een samenvatting van uw lay-out met naam, type en breedte.

 

Layout 004

 

  • Via de knop Instellingen komt u in de lay-out instellingen.
  • In dit scherm wordt de naam van de lay-out aangegeven. Hier geeft u eveneens het standaard thema van uw website op.

 

Layout 005

Alle wijzigingen in de lay-out editor gebeuren in concept modus. Dit betekend dat een aanpassing niet direct live te zien is op de website.

  • U kunt tussentijds via de knop Bekijk concept het concept bekijken.
  • Met de knop Publiceren de pagina wijzigingen online zetten.
  • Indien u de concept aanpassingen ongedaan wilt maken kunt u op de knop Ongedaan maken klikken.

Werking lay-out scherm: Rij toevoegen

Vlak onder de navigatie balk, staat een regel met twee groene blokken, Nieuwe widget en Nieuwe rij.

 

Layout 006

 

  • Beweeg uw muis over het groene blok Nieuwe rij. U zal zien dat de muisaanwijzer verandert in een Icon versleep icoon.
  • Houd uw linkermuisknop ingedrukt en versleep het groene blok Nieuwe rij naar beneden waar u de nieuwe rij wilt hebben in uw lay-out.

 

Layout 007

  • Laat de linkermuisknop los op de locatie waar u de nieuwe rij wilt plaatsen binnen uw lay-out.
  • U zal een pop-up op het scherm krijgen waarin u kan aangeven in hoeveel kolommen de rij onderverdeeld moet worden.

 

Layout 007

 

  • In dit voorbeeld verdelen we de rij in 3 kolommen.

 

Layout 008

Werking lay-out scherm: Kolombreedte aanpassen

Op het lay-out scherm ziet u een aantal rijen. Deze rijen kunnen worden onderverdeeld in maximaal 12 kolommen. Deze opsplitsing in kolommen hoeft niet gelijk te lopen met de bovenliggende rij.

 

Layout 008

Werking lay-out scherm: Widget toevoegen

Na het aanmaken van een nieuwe lay-out, toevoegen van de rijen en koppelen van een thema, gaan we de lay-out aankleden. Dit wordt in e-Captain gedaan met behulp van widgets. e-Captain bevat vele verschillende widgets. U kunt een widget naar een kolom slepen om deze daar te plaatsen. Bijvoorbeeld als u een stuk tekst wilt schrijven, sleept u een tekst widget naar de juiste kolom en verschijnt er een tekst editor waarin u de tekst kunt schrijven. Wilt u een afbeelding in een kolom zetten dan sleept u een afbeelding widget naar de juiste plek.

Vlak onder de navigatie balk, staat een regel met twee groene blokken, Nieuwe widget en Nieuwe rij.

 

Layout 009

 

  • Beweeg uw muis over het groene blok Nieuwe widget. U zal zien dat de muisaanwijzer verandert in een Icon versleep icoon.
  • Hou uw linkermuisknop ingedrukt en versleep het groene blok Nieuwe widget naar beneden waar u de nieuwe widget wilt in uw lay-out.

 

Layout 018

  • Laat de linkermuisknop los op de locatie waar u de de nieuwe widget wilt plaatsen binnen uw lay-out.
  • U zal een pop-up op het scherm krijgen waarin u kan aangeven welke widget u wilt plaatsen in de lay-out.

 

websitebeheer-widgetscherm-nieuw

 

Klik op de widget die u wilt gebruiken in uw lay-out. In dit voorbeeld wordt er een Tekst widget toegevoegd aan de kolom.

 

Layout 012

Thema koppelen

Het thema dat u heeft aangemaakt is op dit moment gekoppeld aan de lay-out. Hierdoor wordt het thema overgenomen door de onderliggende rijen en kolommen. Het is mogelijk om aan een afzonderlijke rij of een afzonderlijke kolom binnen een rij een afwijkend thema op te geven.

Lay-out thema

Dit is het standaard thema van de lay-out dat bij het aanmaken van een nieuwe lay-out wordt opgegeven. Dit thema is daarom een verplicht veld bij het aanmaken van een nieuwe lay-out.

 

Layout 013

 

Als u van een bestaande lay-out het thema wilt wijzigen, klikt u de knop Instellingen in de navigatie balk van de lay-out.

 

Layout 005

 

Klik achter het thema dat u wilt wijzigen of toevoegen op IconS Edit icoon.

 

Layout 015

  • In het rechter gedeelte van dit scherm ziet u een voorbeeld van het geselecteerde thema.
  • Selecteer het juiste thema en klik op de knop Opslaan.
  • Het thema zal nu gekoppeld zijn aan de lay-out.

Lay-out Rij thema of Kolom thema

Om een rij/kolom binnen uw lay-out een ander thema te geven klikt u op het IconS Editicoon aan de rechter onderzijde van de desbetreffende rij.

 

Layout 016

In de pop-up die geopend wordt, ziet u afhankelijk uit hoeveel kolommen uw rij bestaat, een aantal mogelijkheden om een thema te koppelen. In het bovenstaande voorbeeld gebruiken we een rij die is onderverdeeld in 3 kolommen.

  • Door een thema te koppelen aan Thema volledige rij, wordt het thema op die afzonderlijke rij doorgevoerd.
  • Door een thema te koppelen aan Thema kolom #, wordt het thema op die afzonderlijke kolom binnen die rij doorgevoerd.

 

Layout 017

Hierdoor is het mogelijk om verschillende thema’s te gebruiken binnen de aangemaakte lay-out.

 

Verplaatsen widgets en rijen

Het is mogelijk om de afzonderlijke rijen te verplaatsen binnen de lay-out.

  • Beweeg uw muis naar de rij die u wilt verplaatsen.
  • Aan de rechter onderzijde van de rij verschijnt een menu. Cms 036a
  • Klik op het Icon versleep icoon en houd de linker muisknop ingedrukt. Nu kunt u de rij verplaatsen binnen de lay-out. Widgets die zijn geplaatst in een bestaande rij die worden mee verplaatst.
  • Laat de linkermuisknop los op de locatie waar u de rij wilt plaatsen binnen uw lay-out.

Layout 018

Eveneens kunt u widgets verplaatsen binnen de lay-out. Widgets kunnen verplaatst worden binnen de rij, maar ook naar een andere rij. Er kunnen meerdere widgets in dezelfde kolom worden geplaatst.

  • Beweeg uw muis over de widget die u wilt verplaatsen.
  • U zal zien dat de muisaanwijzer verandert in een Icon versleep icoon.
  • Hou uw linkermuisknop ingedrukt en versleep de widget naar een kolom waar u de widget wilt in uw lay-out.

Layout 019

Pagina inhoud

Bij het aanmaken van een nieuwe lay-out wordt door e-Captain een rij toegevoegd. Het gaat om de rij Systeem:pagina inhoud. De lay-out die u aanmaakt, is te koppelen aan een pagina. In deze rij komt de pagina inhoud die u kan aanmaken onder het item Pagina’s.

 

Layout 020

Voorbeeld lay-out website

In de onderstaande afbeelding (beweeg muis over afbeelding) ziet u een basis lay-out van een website. Van boven naar beneden:

  • Header / logo
  • Menu
  • Pagina / content
  • Bedrijfsinformatie /Inloggen
  • Footer / disclaimer
Layout 023a
Layout 023b
 
 
 

Haal meer uit e-Captain!

e-Captain is een zeer uitgebreid ledenadministratie pakket. Wij bieden verschillende basis trainingen aan waarbij u op toegankelijke wijze leert werken met e-Captain. De trainingen vinden plaats op ons kantoor in 's-Hertogenbosch.

Bekijk onze trainingen

 

TeamViewer

Om u optimaal support te kunnen geven is het in sommige gevallen handig als we op afstand kunnen meekijken op uw eigen computer. Hiervoor maken wij gebruik van TeamViewer. Met TeamViewer kunnen wij op afstand uw computer overnemen.

 Download TeamViewer

 

Deze pagina is voor het laatst bijgewerkt op: 6 augustus 2018