Het eerste block aanmaken - Block designer

Volgen

Informatie vooraf
In de Block Designer kunt u uw webshop aankleden. Denk hierbij aan advertenties, tekstblokken of demonstratie video's. Zo kunt u bijvoorbeeld voor iedere afdeling een andere banner gebruiken of specifieke landingspagina’s per gebruikersgroep instellen. Voor meer informatie over de Block Designer klikt u hier

Een Block aanmaken

  1. Klik op Toevoegen rechts bovenaan om een nieuw block aan te maken.
  2. Vul de gegevens bij Block details in.
  3. De locatie van het block selecteert u door op de desbetreffende locatie te klikken. Er komt nu een ster bij te staan.
  4. Geef groepen rechten om het block te zien door onder Condities de juiste rechtengroep aan te vinken.
  5. Door onder Condities talen aan te vinken, zijn de blocken in verschillende talen zichtbaar (let op: het block is nu nog niet vertaald!).
  6. Klik op Toevoegen onder Catalogus locatie (of kies een systeemlocatie onder Systeemlocaties)
  7. Selecteer nu de locatie waar het block zichtbaar moet zijn in de catalogus.
  8. Zet een vinkje bij Inclusief alle onderliggende niveaus wanneer het block getoond moet worden bij alle onderliggende niveaus in de catalogus.
  9. Klik op OK.
  10. Plaats nu de content in het content veld (klik hier voor meer informatie over het vullen van de content).

Hieronder een toelichting op de velden onder Block details.

Veld

Toelichting

Naam

De naam van het block.

Titel

De titel van het block.

Omschrijving

De omschrijving van het block.

Zichtbaarheid

Block zichtbaar of niet zichtbaar in de webshop (live of niet).

Decoratie

Wel of geen kader om het block.

Prioriteit

Geef een prioriteit mee aan het block. Dit bepaald de volgorde wanneer er meerdere blocks op dezelfde pagina op dezelfde locatie ingesteld zijn. Een block met prioriteit 1 wordt hoger op de pagina getoond als een block met prioriteit 2.


LET OP: Op elke locatie waar een block geplaatst kan worden, kunnen meerdere blocks geplaatst worden behalve op de plaats van de Banner. Hier kan maar één block getoond worden, dit is degene met de hoogste prioriteit.
 

Content
Wanneer u een nieuw block heeft aangemaakt moet dit block gevuld worden.

  1. Zoek naar het block dat u wilt vullen met content of maak een nieuw block aan.
  2. Open het block door op de naam van het block te klikken.
  3. Kies een type content (lees hieronder meer).
  4. Vul de content in in het witte vlak.
  5. Klik op Opslaan als u klaar bent met vullen.

Verschillende typen content
Er zijn verschillende typen waarin u uw content kunt weergeven. Hieronder worden de verschillende typen toegelicht.

Type content

Toelichting

HTML tekst

Het is aan te raden dit type te gebruiken. Dit geeft u de meeste controle en vrijheid. Hiervoor is wel de nodige HTML-kennis vereist.

HTML design

Hier kunt u gebruik maken van een tekst editor. Gebruik dit type alleen voor simpele content (een stuk tekst).

Image

U kunt hier de URL van een afbeelding invullen.

Slideshow

U kunt een keuze maken uit de beschikbare sets die aan te maken zijn in de Flash Editor.

Prezi presentatie

U kunt hier de embedded code invoegen die u meekrijgt van de Prezi.com website.Prezi is een tool om online presentaties te maken.

Issuu publicatie

U kunt hier de embedded code invoegen die u meekrijgt van de Issuu.com website.Issuu is een gratis tool om een online catalogus te maken die u het gevoel geeft dat u door een echte catalogus bladert.

Cooliris afbeeldingenlijst

U kunt hier de embedded code invoegen die u meekrijgt van de Cooliris.com website.

Tips & Trucs
HTML voorbeelden
Hieronder ziet u voorbeelden van HTML die u in blocks kunt plaatsen.

Standaard afmetingen webshop
Hieronder vindt u afbeelding waarin de standaard afmetingen op de webshop in pixels zijn aangegeven.



 

Om een afbeelding in te voegen gaan we deze eerst uploaden in de Media Library. Als dat gebeurd is, kunnen we de naam van de afbeelding kopieren en deze gebruiken in het onderstaande stukje code:Afbeeldingen toevoegen
 <img src="webfiles/webshop_library/overig/[AFBEELDING]" />

Waarbij [AFBEELDING] wordt vervangen door de naam van het afbeeldingsbedstand. in de Media Library.

Verwijzen naar een block
Om een verwijzing te maken naar een contentpagina kan de onderstaande link gebruikt worden. Door een stukje tekst toe te voegen aan de link kunt u bepalen wat de weergave is van het contentblock; in het midden, links uitgelijnd of over de volle pagina. 

www.[WEBADRES].nl/Blockcontent.aspx?blockname=[NAAM VAN HET BLOCK][LAYOUTTYPE]
 
Layouttypes:
&layout=full
&layout=left
&layout=middle

 

Zoekwoorden-wolk
Om een zoekwoorden-wolk na te bootsen met eigen zoektermen kan het volgende stukje code worden gebruikt:
 <a href="''[UWDOMEIN]/assortiment.aspx?action=search&q=[ZOEKWOORD]&page=1''" style="font-size: 0.5em">Klein Woord</a>
 
 <a href="''[UWDOMEIN]/assortiment.aspx?action=search&q=[ZOEKWOORD]&page=1''" style="font-size: 1em">Normaal Zoekwoord</a>
 
 <a href="''[UWDOMEIN]/assortiment.aspx?action=search&q=[ZOEKWOORD]&page=1''" style="font-size: 2em">Groot Zoekwoord</a>

Waarbij [ZOEKWOORD] de term is waar u op wilt zoeken zodra er op de link geklikt wordt, en [UWDOMEIN] het complete adres naar uw website (dus inclusief 'http://' en 'www')

 

Bedrijfsinformatie
Een eenvoudig blok met bedrijfsinformatie maakt u alsvolgt: U upload uw logo in de Media Library, en kopieert weer zoals in het eerste voorbeeld de bestandsnaam van de afbeelding. Deze plaatst u op de plaats van [AFBEELDING]. Verder vult u uw gegevens naar eigen inzicht in.
 <img src="webfiles/webshop_library/overig/[AFBEELDING]" />
 Bedrijfsnaam B.V.
 Adres Straatnaam 123

 

Een link met afbeelding
 <a href="[LINK]"><img src="webfiles/webshop_library/overig/[AFBEELDING]" /></a>

Waarbij [AFBEELDING] vervangen wordt door de naam van het bestand in de Media Library, en [LINK] door het adres waar je naartoe wilt linken. Omdat bij een link in combinatie met een afbeelding vaak een rand om het plaatje wordt getoond, en niet iedereen dat wil, hieronder de code om een plaatje met link zonder rand te tonen:

 <a href="[LINK]"><img src="webfiles/webshop_library/overig/[AFBEELDING]" style="border: none;" /></a>

 

Een midden-block met twee kolommen

Dit voorbeeld maakt duidelijk hoe je een block maakt in het midden-gedeelte met twee kolommen.

<table cellpadding="0" cellspacing="0"><tr><td width="[BREEDTE-1]">Inhoud, tekst, afbeeldingen.</td><td width="[BREEDTE-2]">inhoud, tekst, afbeeldingen.</td></tr></table></nowiki>
 
Waarbij [BREEDTE-1] en [BREEDTE-2] moeten worden vervangen voor de breedtes van de kolommen. Als je bijvoorbeeld wilt dat beide kolommen de helft van de pagina beslaan kun je het volgende stukje gebruiken,
 
 <nowiki><table cellpadding="0" cellspacing="0"><tr><td width="50%">Inhoud, tekst, afbeeldingen.</td><td width="50%">inhoud, tekst, afbeeldingen.</td></tr></table></nowiki>
 
Of als je graag wilt dat de linker-kolom een kwart van de breedte beslaat, en de rechter de rest, dan gebruik je:
 
 <nowiki><table cellpadding="0" cellspacing="0"><tr><td width="25%">Inhoud, tekst, afbeeldingen.</td><td width="75%">inhoud, tekst, afbeeldingen.</td></tr></table>


Afbeeldingen kunnen links of rechts worden uitgelijnd, zodat ze ingesprongen naast de tekst komen te staan. Dit werkt bijzonder goed bij wat smallere afbeeldingen tot ongeveer 40 pixels breed.

 

Een afbeelding links uitlijnen
 <img src="webfiles/webshop_library/overig/[AFBEELDING]" style="float: left;" />

 

Een afbeelding rechts uitlijnen
 <img src="webfiles/webshop_library/overig/[AFBEELDING]" style="float: right;" />
 

 

 

 


 

Hebben de voorgestelde antwoorden uit de Knowledge Base u niet geholpen? Stuur dan een incident in.

Stuur een incident in
Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen