News Box

Reiter Newsquelle

Mit der Newsquelle legst du fest, ob du alle Newsbeiträge anzeigen lassen möchtest, die Auswahl auf News einiger bestimmter Newskategorien beschränken willst oder du wählst gezielt einzelne Newsbeiträge aus.

Mit der Auswahl Aktuelle Newskategorie kannst du alle Beiträge der aktuellen Newskategorie darstellen lassen. Diese Option greift in der Newsübersicht und auch in der Newsdetailansicht deines JTL-Shops.

Beachte: wenn du die aktuelle Newskategorie als Newsquelle in der Newsübersicht wählst, haben die JTL-Shop Optionen zur Filterung/Sortierung keinen Einfluss auf deine News Box. Auch solltest du die Anzahl der darzustellenden Newsbeiträge in diesem Fall nicht beschränken.

In der Detailansicht wird deine News Box mit anderen Newsbeiträgen der Kategorie des aktuell angezeigten Newsbeitrages befüllt. Ist dein Newsbeitrag mehreren Kategorien zugeordnet, werden auch News aus all diesen Kategorien in deiner News Box angezeigt.

Auch die maximale Anzahl der anzuzeigenden Beiträge und die Art der Sortierung kannst du ebenfalls im Reiter "Newsquelle" bestimmen.

Reiter Darstellung

Im Reiter Darstellung kannst du zunächst aus zwei grundlegenden Templates für deine News Box wählen: Flex Box oder Slider.

Flex Box Template

Das Flex Box Template ordnet deine News Beiträge in einem responsiven Grid an. Die News Box versucht dabei immer, die gesamte Breite an der Einfügeposition einzunehmen und die Elemente dann gleichmäßig zu verteilen.

Mit der Zielbreite eines Newsbeitrages legst du die ungefähre Breite eines Eintrages (in Pixel) fest und bestimmst so gleichzeitig, auf wie viele Spalten deine Einträge verteilt werden sollen. Nachfolgend eine Beispielausgabe in einem Evo Template auf verschiedenen Geräten mit einer Zielbreite von 350px.

Wie du im Beispiel siehst, kann es gerade bei Umbrüchen dazu kommen, dass deine Newselemente verschiedene Breiten erhalten und dabei ggf. deutlich von der Zielbreite abweichen. Dadurch stellen wir sicher, dass auch auf verschiedenen Gerätegrößen eine harmonische Optik erhalten bleibt.

Weiterhin hast du die Möglichkeit, den Außenabstand eines Eintrages (= Abstand zu den Nachbarelementen) sowie den Innenabstand (= Abstand zum Inhalt) festzulegen und kannst bestimmen, ob du einen Rahmen um den Newsbeitrag anzeigen lassen möchtest.

Slider Template

Mit dem Slider Template stellst du deine News Beiträge als horizontalen Slider dar. Wählst du dieses Template, werden einige zusätzliche Optionen eingeblendet.

Neben der Zielbreite eines Newsbeitrages kannst du hier auch die Anzahl der Newsbeiträge nebeneinander definieren. Beachte dabei, dass beide Werte aufeinander abgestimmt sein sollten: eine Zielbreite von 1000px wird auf üblichen Endgeräten nur ausreichen, um ein Beitrag gleichzeitig im Slider darzustellen.

Ebenfalls kannst du festlegen, ob deine News Box eine Navigation anzeigen oder automatisch Sliden soll, die Verzögerung der Slidewechsel in Millisekunden und die Anzahl der auf einmal wechselnden Newsbeiträge bestimmen.

Reiter Newsbeiträge

Im Reiter Newsbeiträge kannst du die Anzeige der verbleibenden (Text-) Komponenten der News Box Einträge steuern. Folgende Komponenten deiner Newsbeiträge kannst du hier (de-) aktivieren:

• Den Titel des Beitrages
• Das Datum der Veröffentlichung
• Einen Auszug aus dem Beitrag (Vorschautext)
• Den Link zum Beitrag selbst

Den Auszug (Vorschautext des Newsbeitrages) und den Titel kannst die über zusätzliche Optionen auf eine bestimmte Zeichenanzahl einkürzen.

Wenn du das Datum bzw. den Link anzeigen lässt, beachte bitte die entsprechenden Sprachvariablen des Drops!

Reiter Vorschaubilder

Wählst du die Option Vorschaubild anzeigen, so erscheinen weitere Optionen: du kannst fehlende Vorschaubilder durch das erste Bild im entsprechenden Newsbeitrag ersetzen und die maximale Höhe deiner Vorschaubilder bestimmen.

Die Einstellung zum Textfluss um das Vorschaubild kann besonders dann hilfreich sein, wenn die Seitenverhältnisse deiner Vorschaubilder stark variieren oder du eher quadratische Vorschaubilder verwendest.

Wählst du die Option Text auf Hintergrund platzieren, wird dein Vorschaubild als Hintergrundbild verwendet. Um den Kontrast der Texte auf dem Hintergrundbild zu verbessern, kannst du bei Wahl dieser Option auch eine Overlayfarbe und Textfarbe bestimmen.

Beachte gerade bei der Overlayfarbe, dass du hier auch RGBA Werte inkl. Opacity (Deckkraft) wie rgba(51,51,51,0.8) verwenden kannst. In modernen Browsern schimmert so das Hintergrundbild durch.