Het template Shopik is een voorbeeld van een TOWeb 13-site waarin een afbeelding in 3 stukken lijkt te zijn geknipt, terwijl het in werkelijkheid één en dezelfde afbeelding is die 3 keer wordt hergebruikt. Hoe voegt u dit soort effect toe aan uw website zonder per se dat template te gebruiken? Dat leggen we u in deze handleiding uit, zodat u hetzelfde resultaat bereikt met uw eigen afbeeldingen op elke pagina van uw site.
- Situatie 1: als uw site is gebouwd op basis van het template Shopik en u alleen de afbeelding van de startpagina door uw eigen afbeelding wilt vervangen, selecteert u eenvoudig een voor een elk van de 3 paragrafen van de startpagina en voegt u telkens hetzelfde bestand van uw afbeelding als achtergrond toe met de knop "Afbeelding wijzigen". Dat is alles!
Let op: het is belangrijk dat telkens precies dezelfde foto wordt toegevoegd, zonder enige bewerking, bijsnijding of de kleinste wijziging van uw kant.
- Situatie 2: als uw site niet is gebouwd op basis van het template Shopik en/of u wilt dat uw afbeelding niet in 3 maar bijvoorbeeld in 2 of 4 delen wordt opgesplitst, eventueel ook op een andere pagina, gaat u als volgt te werk:
- Begin met het toevoegen van een paragraaf met heel weinig inhoud, bijvoorbeeld zonder titel, maar alleen een paar woorden en/of een link in een knop
- Geef deze paragraaf na het aanmaken een breedte van 4 op 12, dus elk 1/3 van de paginabreedte als u een opsplitsing in 3 delen wilt zoals in Shopik (of stel de breedte in op 3 op 12, dus 1/4 van de paginabreedte, als u een opsplitsing in 4 delen wilt)
- Selecteer daarna bij "Achtergrond" de optie "Afbeelding" om uw foto toe te voegen
- Schakel vervolgens de opties "Volledige hoogte" en "Parallax-effect" in. Deze 2 opties samen zijn nodig om het opsplitseffect te krijgen.
- Gebruik tot slot de knop "dupliceren" om uw paragraaf zo vaak als nodig te kopiëren en zo de breedte van uw pagina te vullen.
En klaar: u hoeft alleen nog de tekst van elke paragraaf te vervangen door de tekst van uw keuze (bijvoorbeeld links in knoppen zoals in het template Shopik), eventueel met een andere tekstkleur en/of een effect "Dekking" afhankelijk van uw foto, zodat uw teksten goed leesbaar zijn op de achtergrondafbeelding. Als de opsplitsing met tussenruimte u niet bevalt, kunt u tot slot het vakje "Geen marge" aanvinken om uw volledige achtergrondafbeelding te krijgen met de teksten van uw paragrafen erbovenop.
Om uw teksten passend en altijd leesbaar te houden op alle soorten apparaten (vooral tablets en smartphones), moet u de inhoud van uw paragrafen beperken tot slechts een paar woorden en/of geen te grote lettergrootte gebruiken. En als u later alleen de achtergrondafbeelding wilt wijzigen, hoeft u alleen de vervangingen uit te voeren zoals beschreven in situatie 1.
Opmerkingen:
- Gebruik een foto met een voldoende hoge schermresolutie, want afhankelijk van de apparaten die uw website bezoeken, worden mogelijk alleen bepaalde delen weergegeven en kan uw achtergrondafbeelding aan scherpte verliezen als de resolutie onvoldoende is. Om te voorkomen dat uw achtergrondafbeelding te veel wordt uitgerekt/vergroot, raden we bovendien aan een site met vaste breedte te gebruiken: zo wordt uw achtergrondafbeelding niet wazig op grote schermen met een hogere resolutie dan de breedte van uw foto.
- Om een afbeelding die al in uw site staat opnieuw te gebruiken, kunt u CTRL ingedrukt houden terwijl u op de knop voor het toevoegen van een afbeelding klikt.