Startseite mit Slider und Parallax

So binden Sie einen animierten Slider mit drei Bildern sowie einen sogenannten Parallax mit drei Feldern vor einem beweglichen Hintergrundbild in Ihren Webshop ein:

  • Laden Sie hier den Code und die Bilddateien herunter und entpacken Sie die ZIP-Datei.
  • Klicken Sie im Admin-Bereich auf Katalog/CMS.
  • Klicken Sie auf bearbeiten bei der Site „Startseite“ mit dem Alias „frontpage“.
  • Klicken Sie auf den Button „Quellcode“ (siehe blaue Umrahmung im Bild zwei) oberhalb des Content-Feldes und fügen Sie den Code in das Feld ein. (Wenn der WYSIWYG-Funktion nicht aktiviert ist, können Sie den Code auch direkt ins Content-Feld speichern.)
  • Integrieren Sie die Bilder in Ihrer Media Library. Diese finden Sie unter Katalog/CMS. Klicken Sie auf den Ritter „Images“ und laden Sie über den „Upload“-Button die Bilder hoch.
  • Schauen Sie sich nun im Browser Ihre Startseite an – unser vorbereiteter Slider sowie der Parallax sollten im WebShop wie im Printscreen rechts aussehen.

Slider individuell anpassen

So hinterlegen Sie Ihre eigenen Bilder:

  • Erstellen Sie eigene Slider-Bilder. Die von uns integrierten Bilder verfügt über die Grösse von 1168 x 305 Pixeln. Wenn Ihre Bilder höher sind, werden diese im Shop dann einfach höher dargestellt. Wenn sie jedoch schmaler oder breiter sind, wird die Darstellung des Sliders unsauber. Speichern Sie die Bilder unter dem gleichen Namen und ebenfalls als JPG ab (slider1.jpg, slider2.jpg und slider3.jpg).
  • Gehen Sie in die Media Library, klicken Sie mit der rechten Maustaste auf die von uns angelieferte Bilder und löschen Sie diese.
  • Uploaden Sie nun Ihre Slider-Bilder in die Media Library.
  • Natürlich können Sie die Bilder auch unter anderen Namen oder in einem anderen Format wie PNG oder GIF abspeichern. Jedoch müssen Sie dann die Bildernamen im Code anpassen (siehe blaue Umrahmung in unserem Bild 4).

Code anpassen

  • Klicken Sie im Admin-Bereich auf Katalag/CMS.
  • Klicken Sie auf bearbeiten bei der Site „Startseite“ mit dem Alias „frontpage“.
  • Klicken Sie in der entsprechenden Sprache auf „Quellcode“.

So ändern Sie den Texte:

  • Sie finden den Textteil im grünen Bereiches auf dem Bild 4.
  • Die erste Zeile des Textes ist als Titelziele (h1) definiert. Tauschen Sie zum Beispiel hier den Text „Grosse Produktauswahl zu fairen Preisen“ gegen Ihren Titel aus: <h1>Grosse Produktauswahl zu fairen Preisen</h1>. Der HTML-Code <h1> und </h1> muss am Anfang und Ende Ihres Titels bestehen bleiben.
  • Hier ist der Inhalt der 2. Linie (Zusatztext) im Slider eingebettet: <p>In unserem WebShop finden Sie bis zu 250’000 Produkte.<p>
    Tauschen Sie unseren Text aus.
  • Falls Sie keinen Titel oder keinen Zusatztext wünschen, entfernen Sie einfach bei jedem Slider-Code die ganzen Textlinien von <h1> bis </h1> und von <p> bis <p>

Parallax individuell anpassen

So hinterlegen Sie Ihr eigenes Hintergrundbild:

  • Erstellen Sie ein eigenes Hintergrundbild, weil das integrierte Bild nur zu Ansichtszwecken abgegeben wird. Sie haben kein Copyright auf dieses Bild.
  • Das von uns integrierte Bild verfügt über die Grösse von 1600 x 1250 Pixeln. Wenn Ihr Bild nicht proportional zu diesem Mass erstellt wird (z.B. viel höher oder viel breiter), kann es sein, dass das Bild im Hintergrund nicht in jedem Browser sauber scrollt. Speichern Sie das Bild unter dem gleichen Namen und ebenfalls als JPG ab: parallax.jpg.
  • Gehen Sie in die Media Library, klicken Sie mit der rechten Maustaste auf das von uns angelieferte Bild und löschen Sie diese.
  • Uploaden Sie nun Ihr Bild in die Media Library.
  • Natürlich können Sie das Bild auch unter anderen Namen oder in einem anderen Format wie PNG oder GIF abspeichern. Jedoch müssen Sie dann den Bildernahmen im Code anpassen (siehe blaue Umrahmung in unserem Bild 4).

Code anpassen

  • Klicken Sie im Admin-Bereich auf Katalag/CMS.
  • Klicken Sie auf bearbeiten bei der Site „Startseite“ mit dem Alias „frontpage“.
  • Klicken Sie in der entsprechenden Sprache auf „Quellcode“.

So ändern Sie die Button-Beschriftungen:

  • Die vorgegebenen Beschriftungen der drei Buttons sind auf dem Bild 4 grün eingerahmt.
  • Diese können Sie im Quellcode direkt überschreiben.
  • Beachten Sie jedoch, dass Sie die Zeichen > und < vor und nach den Beschriftungen nicht löschen.

So tauschen Sie die Bilder in den drei Boxen aus:

  • Sie haben die Bilder mit den Namen „parallax_product1.jpg“, „parallax_product2.jpg“ und „parallax_product3.jpg“ in der Media-Library integriert.
  • Sie brauchen die drei Bilder nicht auszutauschen, da diese aus der Concerto-Datenbank sind. Sie dürfen diese in Ihrem Shop verwenden.
  • Wenn Sie trotzdem eigene Bilder verwenden wollen, sollten Sie drei Bilder unter den vorgegebenen Namen erstellen. Unsere drei Produktbilder sind 320 x 260 Pixel gross (Breite x Höhe).
  • Diese werden automatisch in den drei Boxen (links 1, Mitte 2, rechts 3) dargestellt, wenn Sie diese in die Media Library uploaden.
    Vorgängig müssen Sie jedoch die bestehenden drei Parallax-Produktbilder aus der Media Library löschen.

So ändern Sie die Links im Code:

  • Pro Produkt sind jeweils zwei Links hinterlegt: einmal auf dem Bild und einmal auf dem Button.
  • Die Links sind im Code auf dem Bild 4 rot eingerahmt und in der Reihenfolge der Kasten gelistet. Erste zwei Links für erstes Produkt, zweite zwei Links für zweites Produkt und letzte zwei Links für drittes Produkt.
  • Das ist ein vorgegebener Link zu einer Produktkategorie: href=“/de/categories/consumer-electronics/tv-geraete-empfang/tv-geraete/lcd-led-plasma-tv“
    Sie können nun hier einen Link Ihrer Wahl einsetzen. Zum Beispiel haben Sie die URL „http://meinshop.ch/de/search?q=apple“ aus dem Browser-Fenster kopiert. Wenn Sie diese URL in den Code kopiert haben, sieht dieser Codeteil dann folgendermassen aus: href=“http://meinshop.ch/de/search?q=apple“

Tipps

  • Bitte beachten Sie, dass unabsichtlich zuviel oder zuwenig gelöschte Zeichen im Quellcode Folgen haben! Tauschen Sie wirklich nur die benötigten Zeichen aus und löschen Sie z.B. keine “ “ um den Link.
  • Falls Sie nicht sicher sind, was für Auswirkungen Ihre Korrekturen haben: sichern Sie jeweils Ihren letzten Arbeitsstand, um nach neuen, erfolglosen Test wieder auf einen „funktionierenden“ Stand zurückkehren zu können.