Das Template Shopik ist ein Beispiel für eine TOWeb 13-Website, in der ein Bild in 3 Teile geschnitten zu sein scheint, obwohl es sich in Wirklichkeit um ein und dasselbe Bild handelt, das 3-mal verwendet wird. Wie fügen Sie diesen Effekt in Ihre Website ein, ohne unbedingt dieses Template zu verwenden? Das erklären wir Ihnen in dieser Anleitung, damit Sie mit Ihren eigenen Bildern auf jeder Seite Ihrer Website dasselbe Ergebnis erzielen.

  • 1. Fall: Wenn Ihre Website auf dem Template Shopik basiert und Sie nur das Bild der Startseite durch Ihr eigenes ersetzen möchten, wählen Sie einfach nacheinander jeden der 3 Absätze der Startseite aus und fügen Sie jeweils dieselbe Datei Ihres Bildes als Hintergrund über die Schaltfläche "Bild ändern" hinzu. Das ist alles!
    Achtung: Es muss jedes Mal genau dasselbe Foto hinzugefügt werden, ohne jede Retusche, ohne Zuschnitt und ohne die geringste Änderung Ihrerseits.
Absatzeinstellungen in TOWeb für den Effekt „ausgeschnittenes Bild“: Bildhintergrund, volle Höhe und Parallaxeffekt
  • 2. Fall: Wenn Ihre Website nicht auf dem Template Shopik basiert und/oder Sie Ihr Bild nicht in 3, sondern zum Beispiel in 2 oder 4 Teile aufteilen möchten, eventuell auch auf einer anderen Seite, gehen Sie wie folgt vor:
  1. Fügen Sie zunächst einen Absatz mit sehr wenig Inhalt hinzu, zum Beispiel ohne Titel, nur mit ein paar Wörtern und/oder einem Link in einer Schaltfläche
  2. Sobald dieser Absatz erstellt ist, weisen Sie ihm eine Breite von 4 von 12 zu, also jeweils 1/3 der Seitenbreite, wenn Sie wie bei Shopik eine Aufteilung in 3 Teile wünschen (oder stellen Sie die Breite auf 3 von 12 ein, also 1/4 der Seitenbreite, wenn Sie eine Aufteilung in 4 Teile wünschen)
  3. Wählen Sie dann unter "Hintergrund" die Option "Bild", um Ihr Foto hinzuzufügen
  4. Aktivieren Sie anschließend die Optionen "Volle Höhe" und "Parallax-Effekt". Diese 2 Optionen zusammen sind nötig, um den Teilungseffekt zu erzielen.
  5. Verwenden Sie schließlich die Schaltfläche "duplizieren", um Ihren Absatz so oft wie nötig zu kopieren und so die Breite Ihrer Seite zu füllen.

Fertig: Jetzt müssen Sie nur noch den Text jedes Absatzes durch den Text Ihrer Wahl ersetzen (zum Beispiel Links in Schaltflächen wie im Template Shopik) und gegebenenfalls je nach Foto die Textfarbe ändern und/oder einen "Deckkraft"-Effekt anwenden, damit Ihre Texte auf dem Hintergrundbild gut lesbar sind. Wenn Ihnen die Aufteilung mit Abständen nicht zusagt, können Sie schließlich das Kästchen "Kein Rand" aktivieren, um das vollständige Hintergrundbild mit den Texten Ihrer Absätze darüber zu erhalten.

Damit Ihre Texte auf allen Gerätetypen (insbesondere Tablets und Smartphones) passend und stets lesbar bleiben, sollten Sie den Inhalt Ihrer Absätze auf wenige Wörter beschränken und/oder keine zu große Schriftgröße verwenden. Und wenn Sie später nur das Hintergrundbild ändern möchten, müssen Sie lediglich die Ersetzungen wie im 1. Fall beschrieben vornehmen.

Hinweise:

  • Verwenden Sie ein Foto mit ausreichend hoher Bildschirmauflösung, denn je nach Gerät, mit dem Ihre Website besucht wird, werden nur bestimmte Bereiche angezeigt, und Ihr Hintergrundbild kann an Schärfe verlieren, wenn seine Auflösung nicht ausreicht. Damit Ihr Hintergrundbild nicht zu stark gestreckt/vergrößert wird, empfehlen wir außerdem eine Website mit fester Breite: So wird Ihr Hintergrundbild auf großen Bildschirmen mit einer höheren Auflösung als der Breite Ihres Fotos nicht unscharf.
  • Um ein bereits in Ihrer Website vorhandenes Bild wiederzuverwenden, halten Sie CTRL gedrückt, während Sie auf die Schaltfläche zum Hinzufügen eines Bildes klicken.