Blöcke für den Webshop erstellen

Einleitung: Was sind Blöcke?

Blöcke sind spezielle Inhaltskomponenten, die Sie im Voraus erstellen und dann auf Ihrem Webshop platzieren können. Sie sind sozusagen vorgefertigte Bausteine für Ihren Webshop. Es gibt drei Arten: Artikelblöcke (für Nachrichtenartikel oder Infos), Sortimentsblöcke (für Produktgruppen wie Angebote) und Karussellblöcke (für rotierende Banner mit Bildern).

Warum Blöcke verwenden?

Sie möchten Blöcke verwenden, weil:

• Sie komplexe Inhaltskomponenten auf verschiedenen Seiten wiederverwenden können
• Es Ihren Webshop professioneller und dynamischer macht
• Sie Produktgruppen visuell ansprechend präsentieren können
• Sie wichtige Nachrichten oder Aktionen prominent zeigen können
• Sie leicht wechseln können, was auf der Startseite steht
• Es strukturiert und übersichtlich funktioniert
• Kunden ein besseres Einkaufserlebnis bekommen

Achtung: Blöcke müssen Sie zuerst erstellen, bevor Sie sie auf Seiten verwenden können!

Drei Arten von Blöcken

Wir behandeln alle drei Arten von Blöcken:

1. Artikelblock: Für Nachrichten, Updates oder Informationsartikel
2. Sortimentsblock: Für Produktgruppen (Angebote, neue Produkte usw.)
3. Karussellblock: Für rotierende Banner mit Bildern

---

Block 1: Artikelblock

Ein Artikelblock ist eine Sammlung von kompakten Nachrichtenartikeln oder Informationsartikeln. Jeder Artikel kann zu einer Seite verlinken, ein Popup öffnen oder zu einer anderen Website weiterleiten.

Wann verwenden?

• Nachrichten auf der Startseite anzeigen
• Tipps und Tricks mit Kunden teilen
• Aktionen oder Veranstaltungen ankündigen
• Saisoninformationen teilen

Schritt 1: Artikelblock erstellen

Zum Artikelblöcke-Menü

1. Gehen Sie zu „Shop (Neu)"
2. Klicken Sie auf „Artikelblöcke"
3. Sie sehen eine Übersicht der vorhandenen Artikelblöcke (kann leer sein)

Neuen Artikelblock erstellen

1. Klicken Sie auf „Neu"
2. Füllen Sie die Einstellungen aus:

Name:

• Geben Sie dem Block einen wiedererkennbaren Namen
• Zum Beispiel: „Nachrichten Homepage" oder „Tipps und Tricks"
• Dies ist für den internen Gebrauch

Anzahl der Artikel:

• Wie viele Artikel sollen gleichzeitig im Webshop sichtbar sein?
• Zum Beispiel: 3 Artikel nebeneinander
• Den Rest können Kunden durch Scrollen sehen

„Mehr"-Schaltfläche:

• Anhaken, wenn Kunden über eine „Mehr"-Schaltfläche weitere Artikel sehen können
• Leer lassen, wenn nur diese Artikel sichtbar sind

Speichern

1. Klicken Sie auf „Speichern"
2. Der Artikelblock ist jetzt erstellt

---

Schritt 2: Artikel zum Block hinzufügen

Jetzt erstellen Sie die einzelnen Artikel, die in diesen Block kommen.

Items-Menü öffnen

1. Wählen Sie den gerade erstellten Artikelblock
2. Klicken Sie auf „Items"
3. Sie sehen nun die Optionen, Artikel hinzuzufügen

Sie haben drei Arten von Artikeln zur Auswahl:

---

Option A: Neue Seite (Artikel verlinkt zu einer Seite)

Verwenden Sie dies, wenn der Artikel zu einer separaten Seite mit mehr Informationen verlinken soll.

Seitenartikel erstellen

1. Klicken Sie auf „Mehr" → „Neue Seite"

Einstellungen ausfüllen:

Titel:

• Die Überschrift des Artikels (z. B.: „Tulpen jetzt 20 % Rabatt!")

Text:

• Eine kurze Beschreibung des Artikels
• Dies sehen Kunden in der Übersicht

Bild im Text (optional):

• Fügen Sie bei Bedarf ein Bild im Text hinzu
• Verwenden Sie den Code: ![](bildname.png)
• Siehe die frühere Anleitung zu „Texte beeinflussen"

Sichtbarkeitsdaten (optional):

• Von Datum: Ab wann ist der Artikel sichtbar?
• Bis Datum: Bis wann ist der Artikel sichtbar?
• Leer lassen: Artikel ist immer sichtbar

Beispiel: Eine Valentinstagsaktion sichtbar vom 1. Februar bis 14. Februar

Miniaturbild:

• Laden Sie ein kleines Bild hoch, das zum Artikel passt
• Dies sehen Kunden in der Übersicht
• Zum Beispiel: ein Foto von Tulpen beim Tulpenartikel

Link zur Seite:

• Wählen Sie, zu welcher Seite der Kunde geht, wenn er auf den Artikel klickt
• Dies muss eine Seite sein, die Sie zuvor erstellt haben

Position:

• Bestimmen Sie die Reihenfolge (1 = erste, 2 = zweite usw.)

Speichern

1. Klicken Sie auf „Speichern"
2. Der Seitenartikel ist hinzugefügt

---

Option B: Neues Popup (Artikel öffnet ein Popup)

Verwenden Sie dies, wenn der Artikel ein Popup mit mehr Informationen öffnen soll, ohne zu einer neuen Seite zu gehen.

Popup-Artikel erstellen

1. Klicken Sie auf „Mehr" → „Neues Popup"

Einstellungen ausfüllen:

Titel, Text, Bild, Daten, Miniatur:

• Füllen Sie diese aus wie bei „Neue Seite" oben

Popup-Text:

• Dies ist der Text, der IM Popup erscheint
• Kann ausführlicher sein als die kurze Beschreibung
• Zum Beispiel: vollständige Erklärung der Aktion mit Bedingungen

Unterstützende Bilder:

• Laden Sie zusätzliche Bilder für das Popup hoch
• Diese erscheinen, wenn das Popup öffnet
• Optional

Position:

• Bestimmen Sie die Reihenfolge im Block

Speichern

1. Klicken Sie auf „Speichern"
2. Der Popup-Artikel ist hinzugefügt

Was passiert? Wenn ein Kunde auf den Artikel klickt, öffnet sich ein Popup-Fenster mit den zusätzlichen Informationen.

---

Option C: Neue Weiterleitung (Artikel leitet zur externen Website weiter)

Verwenden Sie dies, wenn der Artikel zu einer anderen Website verlinken soll (z. B. zu Ihrem Instagram oder einem Lieferanten).

Weiterleitungsartikel erstellen

1. Klicken Sie auf „Mehr" → „Neue Weiterleitung"

Einstellungen ausfüllen:

Titel, Text, Bild, Daten, Miniatur:

• Füllen Sie diese aus wie bei den vorherigen Optionen

Link:

• Geben Sie die vollständige URL ein, wohin der Kunde geleitet werden soll
• Zum Beispiel: https://www.instagram.com/ihrunternehmen
• Oder: https://www.lieferant.de/aktion

Position:

• Bestimmen Sie die Reihenfolge im Block

Speichern

1. Klicken Sie auf „Speichern"
2. Der Weiterleitungsartikel ist hinzugefügt

Was passiert? Wenn ein Kunde auf den Artikel klickt, wird er zur externen Website weitergeleitet.

---

Schritt 3: Mehrere Artikel hinzufügen

Wiederholen Sie Schritt 2 für jeden Artikel, den Sie im Block haben möchten. Sie können verschiedene Arten mischen:

• Artikel 1: Seite (zu mehr Info)
• Artikel 2: Popup (schneller Tipp)
• Artikel 3: Weiterleitung (zu Instagram)

Fertig! Ihr Artikelblock ist nun gefüllt und einsatzbereit.

---

Block 2: Sortimentsblock

Ein Sortimentsblock zeigt eine Gruppe von Produkten in Ihrem Webshop an. Perfekt für Angebote, neue Produkte oder Saisonartikel.

Wann verwenden?

• Angebote prominent zeigen
• Neue Produkte hervorheben
• Saisonprodukte bewerben
• Bestseller zeigen

Schritt 1: Sortimentsblock erstellen

Zum Sortimentsblöcke-Menü

1. Gehen Sie zu „Shop (Neu)"
2. Klicken Sie auf „Sortimentsblöcke"
3. Sie sehen eine Übersicht der vorhandenen Sortimentsblöcke

Neuen Sortimentsblock erstellen

1. Klicken Sie auf „+ Neu"

Einstellungen ausfüllen:

Name:

• Wiedererkennbarer Name für den internen Gebrauch
• Zum Beispiel: „Angebote Homepage" oder „Neue Rosen"

Titel:

• Dieser Text wird im Webshop über dem Block angezeigt
• Zum Beispiel: „Sonderangebote diese Woche!"
• Dies sehen Kunden

Sortierung:

• Wählen Sie, wie Produkte sortiert werden
• Optionen: nach Preis, nach Name, nach Datum, neueste zuerst usw.

Anzahl der Produkte auf der Startseite:

• Wie viele Produkte sollen sichtbar sein?
• Zum Beispiel: 8 Produkte
• Rest können Kunden über die „Mehr"-Schaltfläche sehen

Mehr-Schaltfläche ausblenden:

• Nicht angehakt: Kunden sehen eine „Mehr"-Schaltfläche, um alle Produkte zu sehen
• Angehakt: Keine „Mehr"-Schaltfläche, nur diese Produkte sichtbar

Bestelltage verwenden:

• Ein: Webshop zeigt nur Produkte, die am gewählten Bestelltag geliefert werden können
• Aus: Webshop zeigt alle Produkte, unabhängig davon, ob sie gekauft werden können

Listengruppen (optional):

• Wählen Sie, aus welchen Listengruppen die Produkte kommen sollen
• Zum Beispiel: nur aus „Schnittblumen" oder „Angebote"
• Sie können mehrere Listengruppen auswählen
• Leer lassen = aus allen Listengruppen

Tags (optional):

• Wählen Sie, welches Tag ein Produkt haben muss, um angezeigt zu werden
• Zum Beispiel: nur Produkte mit Tag „Neu" oder „Angebot"
• Sie können mehrere Tags auswählen

Speichern

1. Klicken Sie auf „Speichern"
2. Der Sortimentsblock ist erstellt

Fertig! Der Block zeigt nun automatisch Produkte basierend auf Ihren Einstellungen.

---

Block 3: Karussellblock

Ein Karussellblock ist ein rotierender Banner mit Bildern. Wird oft auf der Startseite verwendet, um Aufmerksamkeit für Aktionen oder Saisons zu erregen.

Wann verwenden?

• Großer Banner auf der Startseite
• Saisonfotos zeigen
• Wechselnde Aktionsbanner
• Stimmungsbilder Ihrer Produkte

Schritt 1: Karussellblock erstellen

Zum Karussellblöcke-Menü

1. Gehen Sie zu „Shop (Neu)"
2. Klicken Sie auf „Karussellblöcke"
3. Sie sehen eine Übersicht der vorhandenen Karussellblöcke

Neuen Karussellblock erstellen

1. Klicken Sie auf „+ Neu"

Einstellungen ausfüllen:

Name:

• Wiedererkennbarer Name für den internen Gebrauch
• Zum Beispiel: „Banner Homepage" oder „Saison-Karussell"

Automatisch scrollen:

• Angehakt: Bilder wechseln automatisch
• Nicht angehakt: Kunden müssen selbst klicken, um zu wechseln

Geschwindigkeit:

• Wenn automatisches Scrollen aktiviert ist: wie schnell wechseln die Bilder?
• Zum Beispiel: alle 5 Sekunden
• In Millisekunden (5000 = 5 Sekunden)

Speichern

1. Klicken Sie auf „Speichern"
2. Der Karussellblock ist erstellt

---

Schritt 2: Bilder zum Karussell hinzufügen

Jetzt fügen Sie die Bilder hinzu, die im Karussell rotieren sollen.

Items-Menü öffnen

1. Wählen Sie den gerade erstellten Karussellblock
2. Klicken Sie auf „Items"

Neues Bild hinzufügen

1. Klicken Sie auf „+ Add Image" (oder „+ Bild hinzufügen")

Einstellungen ausfüllen:

Titel:

• Text, der über dem Bild angezeigt wird
• Zum Beispiel: „Tulpen jetzt 20 % Rabatt!"
• Optional, kann leer bleiben

Sichtbarkeitsdaten (optional):

• Von Datum: Ab wann soll dieses Bild im Karussell sein?
• Bis Datum: Bis wann soll dieses Bild sichtbar sein?
• Leer lassen: Bild ist immer sichtbar

Beispiel: Weihnachtsbanner nur im Dezember sichtbar

Foto hochladen:

1. Klicken Sie auf „Datei wählen" oder das Upload-Symbol
2. Wählen Sie Ihr Bild
3. Hochladen

⚠️ WICHTIG zu Abmessungen:

Die Breite und Höhe des Karussells werden durch das erste Bild bestimmt, das Sie hochladen!

Tipps für Bilder:

• Verwenden Sie dasselbe Format für alle Bilder
• Zum Beispiel: alle Bilder 1200x400 Pixel
• Sonst werden manche Bilder gestreckt oder abgeschnitten
• Schneiden Sie Bilder in einem Programm wie Paint.NET (kostenlos) oder Photoshop zu
• Nicht im normalen Paint, das hat zu wenige Möglichkeiten

Beispiel gute Abmessungen:

• Desktop-Banner: 1200x400 Pixel
• Mobiler Banner: 800x600 Pixel
• Quadrat: 800x800 Pixel

Position:

• Bestimmen Sie die Reihenfolge (1 = erstes Bild, 2 = zweites usw.)
• Dies ist die Reihenfolge, in der Bilder gezeigt werden

Speichern

1. Klicken Sie auf „Speichern"
2. Das Bild ist zum Karussell hinzugefügt

---

Schritt 3: Mehr Bilder hinzufügen

Wiederholen Sie Schritt 2 für jedes Bild, das im Karussell sein soll.

Beispielkarussell mit 3 Bildern:

1. Bild 1: „Frühlingskollektion" (März-Mai)
2. Bild 2: „Muttertagsangebot" (Mai)
3. Bild 3: „Allgemeiner Banner" (immer sichtbar)

Fertig! Ihr Karussellblock ist mit Bildern gefüllt.

---

Blöcke auf Seiten platzieren

Nachdem Sie Blöcke erstellt haben, müssen Sie sie auf Ihren Webshop-Seiten platzieren.

Schritt 1: Zu Seiten

Seite öffnen

1. Gehen Sie zu „(Allgemein) Seite" oder „Seiten"
2. Sie sehen eine Liste mit Seiten

Seite wählen oder erstellen

• Klicken Sie auf eine vorhandene Seite (z. B. Ihre Startseite)
• Oder erstellen Sie eine neue Seite mit „Neu"

Tipp: Geben Sie Seiten klare Namen, damit Sie später wissen, welche Seite was ist.

---

Schritt 2: Block zur Seite hinzufügen

Items-Menü öffnen

1. Klicken Sie auf die Seite
2. Gehen Sie zu „Items"
3. Sie sehen nun, was bereits auf der Seite steht

Block hinzufügen

1. Klicken Sie auf „Mehr"
2. Wählen Sie den Blocktyp, den Sie hinzufügen möchten:
   • Artikelblock: Wählen Sie welcher Artikelblock
   • Sortimentsblock: Wählen Sie welcher Sortimentsblock
   • Karussellblock: Wählen Sie welcher Karussellblock
3. Klicken Sie auf den spezifischen Block, den Sie hinzufügen möchten

Speichern

1. Vergessen Sie nicht, auf „Speichern" zu klicken!
2. Sonst verschwindet Ihre Arbeit
3. Der Block ist nun auf der Seite sichtbar

---

Schritt 3: Als Startseite festlegen (optional)

Wenn Sie diese Seite als Startseite Ihres Webshops verwenden möchten:

Startseite festlegen

1. Gehen Sie zu „(Allgemein) Konfigurationen"
2. Wählen Sie Ihre Webshop-Konfiguration
3. Suchen Sie das Feld „Startseite"
4. Wählen Sie die Seite, die Sie gerade erstellt haben
5. Klicken Sie auf „Speichern"

Ergebnis: Diese Seite mit Ihren Blöcken ist nun die Startseite Ihres Webshops.

---

Praktische Beispiele

Beispiel 1: Startseite mit Karussell und Angeboten

• Schritt 1: Erstellen Sie Karussellblock mit 3 Saisonfotos
• Schritt 2: Erstellen Sie Sortimentsblock „Angebote" mit 8 Produkten
• Schritt 3: Erstellen Sie Artikelblock „Nachrichten" mit 3 Beiträgen
• Schritt 4: Fügen Sie alle zur Startseite hinzu: zuerst Karussell, dann Angebote, dann Nachrichten
• Ergebnis: Professionelle Homepage mit visuellen Inhalten

Beispiel 2: Nachrichtenbereich mit verschiedenen Artikeln

• Artikel 1 (Seite): „Neue Gärtnerei" → verlinkt zur Seite mit ausführlichen Informationen
• Artikel 2 (Popup): „Tipps zur Tulpenpflege" → öffnet Popup mit kurzen Tipps
• Artikel 3 (Weiterleitung): „Folgen Sie uns auf Instagram" → leitet zu Instagram weiter
• Ergebnis: Verschiedene Nachrichten mit unterschiedlichen Aktionen

Beispiel 3: Saisonales Sortiment

• Block: „Frühlingsblumen"
• Listengruppe: Wählen Sie „Schnittblumen"
• Tag: Wählen Sie „Frühling"
• Sichtbarkeit: Nur März-Mai
• Ergebnis: Automatisch die richtigen Produkte in der richtigen Saison

Beispiel 4: Karussell-Abmessungen falsch

• Problem: Erstes Bild ist 1200x400, zweites ist 800x600
• Ergebnis: Zweites Bild wird gestreckt und sieht hässlich aus
• Lösung: Schneiden Sie zweites Bild in Paint.NET auf 1200x400 zu
• Ergebnis: Beide Bilder sehen gut aus

---

Wichtige Tipps

Tipp 1: Planen Sie Ihre Blöcke im Voraus

• Überlegen Sie zuerst, welche Blöcke Sie brauchen
• Machen Sie eine Liste: „Karussell Startseite", „Angebote", „Nachrichten"
• Erstellen Sie alle, bevor Sie sie auf Seiten platzieren

Tipp 2: Konsistente Karussell-Abmessungen

• Messen Sie die Abmessungen Ihres ersten Karussellbildes
• Schneiden Sie alle anderen Bilder auf genau die gleichen Abmessungen zu
• Dies verhindert gestreckte oder abgeschnittene Fotos

Tipp 3: Verwenden Sie klare Namen

• „Homepage Karussell 2025" ist besser als „Karussell1"
• Später wissen Sie noch, was es war
• Besonders praktisch, wenn Sie viele Blöcke haben

Tipp 4: Testen Sie Sortimentsblöcke

• Prüfen Sie, ob die richtigen Produkte gezeigt werden
• Passen Sie Filter an, wenn es nicht stimmt
• Testen Sie mit verschiedenen Listengruppen und Tags

Tipp 5: Verwenden Sie Daten für saisonale Inhalte

• Stellen Sie ein/aus Daten für Saisonartikel ein
• Weihnachtsbanner automatisch weg nach Weihnachten
• Spart manuelle Arbeit

Tipp 6: Vergessen Sie nicht zu speichern

• Klicken Sie immer auf „Speichern" nach Änderungen
• Sonst ist Ihre Arbeit weg
• Doppelt prüfen, bevor Sie den Bildschirm schließen

Häufig gestellte Fragen

Frage: Wie viele Blöcke kann ich erstellen?

• Unbegrenzt
• Erstellen Sie so viele wie nötig
• Aber halten Sie es übersichtlich

Frage: Kann ich denselben Block auf mehreren Seiten verwenden?

• Ja, absolut!
• Das ist gerade der Vorteil von Blöcken
• Einmal erstellen, überall verwenden

Frage: Kann ich einen Block später anpassen?

• Ja, immer
• Änderungen sind sofort auf allen Seiten sichtbar, wo der Block ist
• Dies ist praktisch für Updates

Frage: Warum sehe ich keine Produkte in meinem Sortimentsblock?

• Prüfen Sie, ob Sie Listengruppen oder Tags eingestellt haben
• Möglicherweise gibt es keine Produkte, die den Kriterien entsprechen
• Passen Sie Filter an oder lassen Sie sie leer

Frage: Meine Karussellbilder sind gestreckt, was nun?

• Alle Bilder müssen die gleichen Abmessungen haben
• Schneiden Sie sie in Paint.NET oder einem anderen Programm zu
• Verwenden Sie genau die gleichen Pixel (Breite x Höhe)

Frage: Wie entferne ich einen Block von einer Seite?

• Gehen Sie zur Seite → Items
• Wählen Sie den Block
• Klicken Sie auf Löschen
• Der Block selbst bleibt bestehen, nur der Link zur Seite ist weg

Was tun bei Problemen?

Problem: Block nicht sichtbar im Webshop

• Prüfen Sie, ob Sie den Block zur Seite hinzugefügt haben
• Prüfen Sie, ob Sie auf „Speichern" geklickt haben
• Aktualisieren Sie den Webshop-Cache
• Prüfen Sie, ob die Seite als Startseite festgelegt ist

Problem: Karussellbilder sehen seltsam aus

• Prüfen Sie, ob alle Bilder die gleichen Abmessungen haben
• Schneiden Sie sie auf genau die gleichen Pixel zu
• Laden Sie sie erneut hoch

Problem: Sortimentsblock ist leer

• Prüfen Sie Ihre Filter (Listengruppen, Tags)
• Möglicherweise gibt es keine Produkte, die entsprechen
• Entfernen Sie Filter, um mehr Produkte zu zeigen
• Prüfen Sie, ob „Bestelltage verwenden" Probleme verursacht

Problem: Artikel nicht sichtbar im Artikelblock

• Prüfen Sie die Sichtbarkeitsdaten
• Möglicherweise ist das Datum bereits abgelaufen
• Passen Sie Daten an oder lassen Sie leer für immer sichtbar

Problem: Kann Block nicht finden, um ihn zur Seite hinzuzufügen

• Prüfen Sie, ob Sie den Block nach dem Erstellen gespeichert haben
• Aktualisieren Sie die Seite
• Möglicherweise ist er in einer anderen Kategorie (Artikel/Sortiment/Karussell)

Zusammenfassung

Blöcke für Ihren Webshop erstellen Sie, indem Sie zuerst die Blöcke erstellen und sie dann auf Seiten platzieren:

Drei Arten von Blöcken:

1. Artikelblock (Nachrichten/Info):

   • Block erstellen: Artikelblöcke → Neu → Name, Anzahl der Artikel, „Mehr"-Schaltfläche → Speichern
   • Items hinzufügen: Block wählen → Items → wählen Sie Typ: Neue Seite (verlinkt zu Seite), Neues Popup (öffnet Popup), oder Neue Weiterleitung (leitet zu Website weiter)
   • Pro Item ausfüllen: Titel, Text, Miniaturbild, Daten (optional), Link/Popup/Weiterleitung, Position → Speichern

2. Sortimentsblock (Produktgruppen):

   • Block erstellen: Sortimentsblöcke → Neu → Name, Titel (sichtbar im Shop), Sortierung, Anzahl der Produkte, „Mehr"-Schaltfläche, Bestelltage (ein/aus)
   • Filter: Listengruppen (optional) und Tags (optional) bestimmen, welche Produkte gezeigt werden
   • Speichern → Produkte erscheinen automatisch basierend auf Filtern

3. Karussellblock (rotierender Banner):

   • Block erstellen: Karussellblöcke → Neu → Name, automatisch scrollen (ein/aus), Geschwindigkeit → Speichern
   • Bilder hinzufügen: Block wählen → Items → + Add Image → Titel (optional), Daten (optional), Foto hochladen
   • Wichtig: Verwenden Sie für ALLE Bilder genau die gleichen Abmessungen (Pixel), um Strecken zu vermeiden, schneiden Sie in Paint.NET zu
   • Wiederholen für jedes Bild

Blöcke auf Seiten platzieren:

• Gehen Sie zu Seiten → Seite wählen → Items → Mehr → Blocktyp wählen → spezifischen Block wählen → Speichern
• Optional: Seite als Startseite festlegen über Konfigurationen → Startseite

Achtung: Vergessen Sie nie, auf „Speichern" zu klicken, sonst ist Ihre Arbeit weg!