Block Designer: Tips & Trucs

Volgen
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