Skip to main content

​
Allgemeine Beschreibung

Das “Blog Excerpt BETA” Portlet ermöglicht es dir, eine ansprechende Vorschau deiner neuesten Blogbeiträge direkt in deinem Onlineshop darzustellen. Meistens wird dieses Portlet in Form eines Sliders (Karussells) genutzt, um Kunden auf aktuelle News, Ratgeber oder Hintergrundgeschichten aufmerksam zu machen, ohne dass sie direkt den Blog-Bereich aufrufen müssen.

​
Einsatzmöglichkeiten (Inspiration)

  • Startseiten-News: Präsentiere deine aktuellsten Beiträge direkt auf der Startseite, um deinen Kunden Mehrwert zu bieten und deine Expertise zu unterstreichen.
  • Kaufberatung in Kategorien: Binde thematisch passende Blog-Artikel (wie z. B. Ratgeber oder Pflegehinweise) auf den jeweiligen Kategorie-Seiten ein.
  • SEO-Optimierung: Halte deine Seiten durch dynamisch nachladende Blog-Inhalte frisch und stärke die interne Verlinkung zu deinen Textinhalten.

​
Featureübersicht:

  • Flexibles Slider-Layout: Präsentiere deine Blogartikel wahlweise im klaren “Clean”-Look oder als moderne “Cards” (Karten).
  • Responsives Design: Bestimme für jede Displaygröße (vom Smartphone bis zum Desktop) ganz genau, wie viele Beiträge nebeneinander angezeigt werden sollen.
  • Exakte Textkontrolle: Schneide Titel und Beschreibungstexte nach einer bestimmten Zeichen- oder Zeilenanzahl ab, um ein absolut einheitliches Erscheinungsbild (Raster) zu gewährleisten.
  • Interaktive Bedienung: Nutze automatische Abspielfunktionen, Wischgesten (Maus-Ziehen) und klassische Pfeil-Navigationen.

​
Settings:

​
Darstellung

Image

​
Blogbeiträge

Anzahl der Blogposts: Lege hier fest, wie viele Blogartikel insgesamt aus deinem Blog geladen und in diesem Portlet angezeigt werden sollen (z. B. 5). Fixe Anzahl Titelzeilen (nur NIU Plus): Bestimme eine feste Zeilenanzahl für die Überschriften deiner Blogbeiträge. Das verhindert, dass das Layout bei unterschiedlich langen Titeln unruhig wirkt. Titel abschneiden nach x Zeichen (nur NIU Plus): Hier kannst du einstellen, nach wie vielen Zeichen die Überschrift rigoros abgeschnitten werden soll. Trägst du eine “0” ein, wird der Titel nicht nach Zeichen gekürzt. Fixe Anzahl Beschreibungszeilen (nur NIU Plus): Ähnlich wie beim Titel kannst du hier festlegen, wie viele Zeilen der Vorschautext (Excerpt) maximal einnehmen darf, um ein sauberes Raster zu bilden. Beschreibungstext abschneiden nach x Zeichen (nur NIU Plus): Definiere, nach wie vielen Zeichen der Einleitungstext deines Blogbeitrags abgeschnitten werden soll (z. B. nach 200 Zeichen). Bild Seitenverhältnis gem. CSS aspect Ratio (Format: x / y) (nur NIU Plus): Bestimme das Format deiner Vorschaubilder, um eine einheitliche Optik zu erzwingen. Nutze Formate wie 1 / 1 für quadratische Bilder oder 16 / 9 für Querformat. Abdeckverhalten des Bildes im Container gem. CSS objectFit (nur NIU Plus): Wähle hier per Dropdown aus, wie sich das Bild in dem von dir vorgegebenen Seitenverhältnis verhalten soll. Auswahl zwischen:
  • Bild passt in den Container = Das Bild wird so skaliert, dass es komplett sichtbar ist (kann zu Rändern führen).
  • Bild füllt Container aus = Das Bild füllt die Box komplett aus, dabei können jedoch Ränder des Bildes abgeschnitten werden.

​
Größe und Abstände

Image

​
Indikatoren

Vor- und Zurückbutton anzeigen?: Setze dieses Häkchen, wenn du Pfeile zur Navigation durch den Slider anzeigen möchtest. Seitenindexierung anzeigen?: Wenn aktiviert, werden kleine Punkte (Dots) unter dem Slider angezeigt, die dem Kunden zeigen, auf welcher Seite des Sliders er sich gerade befindet.

​
Slides - Darstellung

Design: Wähle die grundsätzliche Optik deiner Blog-Vorschau. Du hast die Auswahl zwischen:
  • Clean = Klares, nahtloses Design ohne abgesetzte Boxen.
  • Cards = Die einzelnen Beiträge werden visuell in Form von Karten (Cards) voneinander abgegrenzt.
Anzahl der sichtbaren Slides je Displaygröße: Lege hier für verschiedene Bildschirmgrößen fest, wie viele Blog-Beiträge gleichzeitig nebeneinander sichtbar sein sollen (z.B. 1 auf Handys “XS”, 5 auf großen Desktop-Monitoren “XL”). Anzahl der Slides um die verschoben wird: Bestimme, wie viele Beiträge beim Klick auf “Weiter” übersprungen werden sollen. Auch dies kannst du für jede Displaygröße (XS bis XL) einzeln festlegen (z. B. immer um 1 Slide weiterrutschen). Posts rechts anschneiden: Hier kannst du per Dropdown einstellen, ob der jeweils letzte sichtbare Beitrag rechts leicht abgeschnitten dargestellt werden soll. Das ist ein beliebtes Mittel, um dem Nutzer zu signalisieren, dass man hier weiter scrollen/wischen kann. Lücke zwischen Slides: Wähle hier den Abstand (den Weißraum) aus, der zwischen den einzelnen Blog-Karten gelassen werden soll (z. B. “Kein Abstand”). Abstand zwischen Pfeilen und Slidercontent: Definiere, wie viel Platz zwischen den Vor-/Zurück-Pfeilen und den eigentlichen Blog-Beiträgen liegen soll (z. B. “xl” für einen sehr großzügigen Abstand).

​
Bewegung

Image
Übergangsgeschwindigkeit in Millisekunden: Lege fest, wie schnell (oder langsam) die Animation beim Wechsel zum nächsten Slide sein soll. Ein Wert von “300” (Millisekunden) sorgt für einen flotten, flüssigen Übergang. Ziehen per Maus: Wähle aus dem Dropdown, ob Nutzer den Slider mit der Maus (bzw. auf Touchscreens mit dem Finger) hin und her wischen können. (z. B. “erlauben mit Einrastpunkten”).

​
Optionen für Automatisches abspielen

Automatisch abspielen aktivieren?: Setze hier ein Häkchen, wenn sich dein Blog-Slider von ganz allein weiterbewegen soll, ohne dass der Kunde klicken muss. Abspielintervall in Millisekunden: Falls das automatische Abspielen aktiv ist, legst du hier die Pausenzeit zwischen den Wechseln fest. “3000” entspricht dabei genau 3 Sekunden. Pausieren bei Hover?: Wenn diese Option aktiviert ist, stoppt das automatische Abspielen, sobald der Kunde mit dem Mauszeiger über einem der Blog-Beiträge steht. Das gibt ihm in Ruhe Zeit, den Text zu lesen oder auf den Artikel zu klicken.