Startseite mit animiertem Slider

So binden Sie einen animierten Slider mit wechselnden Bildern und Text auf der Startseite 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 sollte 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>

Tipp

  • 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. 🙂