Wie man einen Produkt-Slider in Squarespace erstellt (Design Hack)
Möchten Sie einen professionell aussehenden Produktslider für Ihren mit Squarespace erstellten Online-Shop? Mit unserem Design-Hack können Sie einen Produkt-Slider hinzufügen, den Ihre Kunden schätzen werden.
Ein Produkt-Slider erleichtert Ihren Kunden das Durchsuchen Ihres Inventars. In diesem Artikel erfahren Sie, wie Sie einen Produktslider zu Ihrem E-Commerce-Shop auf Ihrer Squarespace-Website hinzufügen können. Glücklich starten.
Wir müssen zugeben, dass es toll wäre, wenn Squarespace bereits eine Produkt-Slider-Option auf der Startseite anbieten würde. Aber auch wenn die Plattform dies nicht tut, funktioniert unser manueller Workaround gut und bietet Ihnen viel Flexibilität.
Inhaltsverzeichnis im Detail Ausblenden
Wie Sie einen Abschnitt für Ihre Produkte erstellen
Um zu beginnen, gehen Sie zur Startseite und einen Abschnitt erstellen für Ihre Produkte. Ziel ist es, einige der Produkte, die Sie führen, hervorzuheben.
Klicken Sie auf der Startseite auf Bearbeiten
Erstellen Sie auf der Startseite einen neuen Abschnitt, indem Sie auf "Abschnitt hinzufügen" klicken.
Erstellen Sie innerhalb des Abschnitts eine Liste
Wählen Sie aus dem Menü eine der Listenvorlagen aus, die einen Buchstaben "i" in der oberen rechten Ecke des Elements haben - dies bietet Ihnen die größte Kontrolle und Flexibilität
Als Nächstes fügen Sie Ihre vorgestellten Produkte in die Inhaltsblöcke der von Ihnen ausgewählten Listenvorlage ein.
Im Wesentlichen verwenden Sie eine Vorlage, die Squarespace für die Erstellung von listenartigen Abschnitten zur Verfügung stellt, und ändern sie so ab, dass sie zu einem Slider für eine Auswahl Ihrer Produkte wird.
Wie man den Produktinhalt bearbeitet
Als Nächstes gehen Sie in den Listenbereich und passen ihn an, indem Sie den Inhalt bearbeiten:
Klicken Sie auf "Inhalt bearbeiten".
Sie können die Elemente so belassen, wie sie bereits eingestellt sind
Gehen Sie zu Inhalt und passen Sie den Titel des Abschnitts an (z. B. "Unsere Produkte")
Entfernen Sie die Musterelemente aus der Vorlage
Wählen Sie das erste "Neue Listenelement" und bearbeiten Sie es, indem Sie ein Bild eines Ihrer Produkte hinzufügen, das vorgestellt werden soll, den Titel bearbeiten und eine Beschreibung schreiben.
Bearbeiten Sie den Button-Text für Ihr Produkt und fügen Sie einen Link zur Produktseite hinzu
Wenn Sie ein Produktbild in ein neues Listenelement einfügen, können Sie auf "Bilder suchen" klicken. Dadurch wird Ihre Bibliothek mit Bildern aufgerufen, aus der Sie ein Produktbild auswählen können.
Vervollständigen Sie den Produktsatz
Sobald Sie Ihr erstes Produkt in die Rubrik eingefügt haben, machen Sie weiter!
Fügen Sie mehrere hinzu und achten Sie darauf, dass Sie jedes Listenelement anpassen, indem Sie ein einzigartiges Produktbild hinzufügen, den Titel bearbeiten, eine Beschreibung schreiben (diese kann kurz sein), den Schaltflächentext bearbeiten und die Schaltfläche mit der entsprechenden Produktseite verknüpfen.
Sobald Sie drei oder mehr Produkte zu dem von Ihnen erstellten Abschnitt hinzugefügt und den Produktinhalt für jeden Artikel bearbeitet haben, haben Sie ein Produktset manuell erstellt und können mit der Layoutgestaltung beginnen.
Gestalten Sie das Seitenlayout
Nachdem Sie Ihre Bilder manuell eingegeben und den Inhalt für jeden Artikel geschrieben haben, können Sie nun an den Designelementen Ihres aus dem Abschnitt gedrehten Produkt-Sliders arbeiten.
Zunächst sollten Sie wissen, dass Sie Ihren neuen Abschnitt zwar als einfache Liste erstellt und bearbeitet haben, ihn aber direkt in Ihrem Editor ändern können.
Zur Erinnerung: Sie haben die Elemente so belassen, wie sie sind. Sie haben den Inhalt so angepasst, dass er Ihre Produkte widerspiegelt. Jetzt werden Sie den Design-Aspekt Ihres Abschnitts anpassen. Für die Struktur können Sie eine der folgenden Möglichkeiten wählen:
Einfache Liste
Banner Diashow
Karussell
Wählen Sie Banner-Diashow. Sie werden sehen, dass es Optionen für die Layoutbreite (voller Anschnitt, voll, eingefügt), die vertikale Auffüllung (S, M, L), die Ausrichtung (links, zentriert, rechts) usw. gibt.
Wenn Sie über Designkenntnisse verfügen, haben Sie eine Vorstellung davon, wie Ihr Produkt-Slider aussehen soll, und können diesen Prozess effizient durchführen. Wenn Sie ein Neuling im Bereich Design sind, sollten Sie sich etwas Zeit nehmen, um es richtig hinzubekommen.
Nachdem Sie Änderungen am Design vorgenommen haben, sollten Sie überprüfen, wie die Ergebnisse auf Mobil-, Tablet- und Desktop-Bildschirmen aussehen.
Wenn Sie Carousel als Design-Struktur für Ihren Produkt-Slider wählen, erzeugen Sie einen unendlichen Scroll-Effekt, den Sie vielleicht ansprechend finden.
Weitere Gestaltungselemente, mit denen Sie experimentieren können, sind:
Max Spalten
Bildausschnitt
Nebeneinanderliegende Folien anzeigen
Stil (Karte, Füllung, Hintergrund, usw.)
Größe und Raum
Und mehr
Nachdem Sie die Möglichkeiten von "Inhalt bearbeiten" erkundet haben, klicken Sie auf das Bleistiftsymbol oben rechts in dem Abschnitt, den Sie erstellen.
Wenn Sie auf das Stiftsymbol klicken, um den Abschnitt zu bearbeiten, können Sie das gesamte Erscheinungsbild des Abschnitts ändern, indem Sie die Ränder heller oder dunkler machen und andere Aspekte ändern.
Achten Sie bei jedem Schritt darauf, dass Sie Ihre Änderungen speichern!
Fahren Sie fort und blättern Sie durch den Abschnitt, den Sie gerade erstellt haben. Sie werden sehen, dass Sie trotz einiger manueller Arbeit nicht allzu lange gebraucht haben, um einen schönen, auffälligen Produktschieber zu erstellen, den Ihre Kunden zu schätzen wissen.
Mehr erfahren
Wenn Ihnen unser Design-Hack für die Erstellung eines Produkt-Sliders in Ihrem Squarespace E-Commerce-Shop gefallen hat, werden Ihnen auch die anderen Tipps und Tricks gefallen, die Sie bei Launch Happy finden.
Registrieren Sie sich für unser Newsletter voller Insider-Tipps zur Entwicklung, die Ihren Website-Erstellungsprozess optimieren.
Blättern Sie durch unsere umfangreiche Bibliothek von Squarespace und SEO-Leitfäden für hilfreiche, kostenlose Informationen.
Und schauen Sie unbedingt unter unsere Dienstleistungen wenn Sie nicht weiterkommen und Expertenhilfe benötigen.
