Erscheinungsbild (nur Web-Smart Content)
Pfeile (nur für Website-Smart Content)
Schaltfläche „Zum Einkaufswagen hinzufügen“ (nur für Website-Smart Content)
Hinweis: Die meisten dieser grafischen Parameter gelten nur für „Web“ Smart Content. Für „E-Mail“-Smart-Content können Sie Ihren Smart-Content visuell erstellen.
Allgemein
Anzeige Ein/Aus
„Anzeige Ein/Aus“ aktiviert und deaktiviert die Sichtbarkeit des Smart Content. Es gibt zwei mögliche Einstellungen:
| Grafikeinstellung | Erklärung |
|---|---|
|
Der Smart Content wird auf Ihrer Website ausgeblendet. Er wird nicht angezeigt und nimmt 0 Pixel in der Breite und Höhe ein. |
|
Der Smart Content ist aktiviert und wird auf Ihrer Website überall dort angezeigt, wo ein div des Smart Content platziert wird. Alle Einstellungen, die Sie konfiguriert haben, werden angewandt. |
Wenn Sie einen mehrsprachigen Katalog konfiguriert haben, wird eine graue Schaltfläche mit dem Titel „Nach Sprache/Ort“ angezeigt. Dies ermöglicht Ihnen das Konfigurieren der Einstellung für das Anzeigen/Ausblenden für jede Version Ihrer internationalen Website. Wenn Sie zum Beispiel eine Website haben, die mit Belgien als Standort und drei Sprachen (FR, EN, DE) konfiguriert ist, und Sie nur denSmart Content für Websites in den Sprachen FR und DE (und nicht in EN) anzeigen möchten, würde Ihre Einstellung wie folgt aussehen:
Um diese Einstellung zu verwenden, muss die globale Einstellung „Anzeige Ein/Aus“ auf „Dargestellt“ eingestellt werden.
Smart Content-ID
Die ID des Smart Content, die von Recommendations verwendet wird, um den Smart Content zu finden und auf einer Webseite oder in einer E-Mail zu platzieren. Diese ID kann nur Buchstaben, Zahlen oder das Unterstrich-Zeichen (_) enthalten.
Warnung:
Wenn Sie bereits Smart Content auf Ihrer Website eingerichtet haben und die Smart Content-ID ändern, wird der Smart Content nicht mehr angezeigt, da das platzierte <div> immer noch die alte Smart Content-ID hat.
Smart Content-Name
Der Name des Smart Content wird im Recommendations Dashboard verwendet, um den Smart Content zu identifizieren. Anders als Smart Content-ID kann der Smart Content-Name jedes beliebige Zeichen, ohne Einschränkung, enthalten.
Erscheinungsbild (nur Web-Smart Content)
Smart Content-Format
Der Typ definiert den allgemeinen grafischen Stil und die Ausrichtung des Smart Content. Die verfügbaren Smart Content-Typen werden in der folgenden Tabelle beschrieben.
| Typname | Beschreibung |
|---|---|
| Horizontal Modern |
Dies ist das am häufigsten verwendete Smart Content-Format. Es zeigt Produkt in einer Zeile an. Es passt gut zu allen Arten von Seiten (Start, Kategorien, Einkaufswagen, Produkte) :
Wenn die Breite auf -1 (automatisch) eingestellt ist, wird der Smart Content an den verfügbaren horizontalen Platz angepasst. Wenn die Höhe auf -1 eingestellt ist, wird die Höhe des Smart Content automatisch angepasst, um sicherzustellen, dass der gesamte Inhalt sichtbar ist. |
| Horizontal |
Dies ist ein horizontaler Smart Content, der „Horizontal Modern“ ähnlich ist. Seine Besonderheit ist, dass er alte Webtechnologien (kein CSS3) verwendet, wodurch er mit allen Browsern ab IE7 kompatibel ist. Der Nachteil der Verwendung dieses Smart Content ist, dass einige grafische Aspekte und Effekte (z. B. Schiebeeffekt) weniger reibungslos sind. Wenn Sie gezwungen sind, alte Webtechnologien zu unterstützen, benötigen Sie diesen Typ. Wenn nicht, sollten Sie den Smart ContentTyp „Horizontal Modern“ verwenden. |
| Vertikal |
Dies zeigt Produkte in einer Spalte statt in einer Zeile an. Diese Art von Smart Content wird hauptsächlich in Seitennavigationsleisten verwendet. Das Schieben von Produkten erfolgt vertikal. Wenn beim Konfigurieren des vertikalen Typs keine Produkte in der Vorschau angezeigt werden, liegt dies wahrscheinlich daran, dass Sie die Höhe des Smart Content vergrößern oder die Größe der Bilder reduzieren müssen.
|
| Raster |
Dieser Smart Content-Typ zeigt eine Tabelle von Produkten mit mehreren Zeilen und Spalten an. Er ist responsiv und passt sich an die Größe des Bildschirms an. Für diesen Smart Content gibt es kein Schiebeverhalten.
|
Breite
Die Breite des Smart Content in Pixeln. Sie kann auf jeden nicht negativen Wert oder auf -1 gesetzt werden, was bedeutet, dass die Breite des Smart Content an den verfügbaren Platz angepasst wird.
Hinweis: Wenn Sie eine spezifischen relativen Wert einstellen möchten, zum Beispiel: „75 % der verfügbaren Breite“, müssen Sie das div des Smart Content in ein übergeordnetes div setzen, für das Sie die Breite auf 75 % einstellen:
<div style="width: 75%;">
<div class="thRecommendations" data-widgetid="my-widget"></div>
</div>
Höhe
Die Höhe des Smart Content in Pixeln. Sie kann auf jeden nicht negativen Wert oder auf -1 gesetzt werden, was bedeutet, dass der Smart Content automatisch um seinen Inhalt herum umgebrochen wird.
Titelbox-Erscheinungsbild
Die grafische Form des rechteckigen Bereichs, der den Titel des Smart Content enthält.
| Parameter-Wert | Details |
|---|---|
| Standard |
Die Titelbox erstreckt sich über die gesamte Smart Content-Breite. Zusammen mit den Änderungen in der Titelbox-Kategorie können Sie einen Titel erhalten, der wie folgt aussieht:
Dieses Design wurde konfiguriert mit Titelbox-Rahmengröße=2, Titelbox-Hintergrundfarbe=000000, Titelbox-Schriftfarbe=FFFFFF, Titelbox-Ausrichtung=center |
| Tabulator-ähnlich |
Die Titelbox erstreckt sich nicht über den gesamten Smart Content und hat nur die Breite des Textes, der sich darin befindet. Mit dem tabulatorähnlichen Erscheinungsbild, aber demselben Satz von Titelbox-Parametern, würde der Smart Content wie folgt aussehen:
|
Anzahl der Produkte
Die maximale Anzahl der Produkte, die im Smart Content angezeigt werden. Wenn die konfigurierte „Anzahl der Produkte“ die Menge von Produkten übersteigt, die im Smart Content (aufgrund seiner Breite) angezeigt werden kann, können die Pfeile zum Schieben durch die verfügbaren Produkte verwendet werden.
Meistens ist die Anzahl der Produkte gleich dem Parameter „Anzahl der Produkte“. Jedoch ist es je nach Algorithmus-/Filterkonfiguration möglich, dass die Anzahl der tatsächlich angezeigten Produkte geringer ist als der Parameter. Dies kann zum Beispiel passieren, wenn die konfigurierten Filter zu restriktiv sind.
Wenn es zum Beispiel im Katalog nur 3 Produkte mit einem Preis unter 10 gibt und der verwendete Filter „Der Preis des Produkts im Smart Content muss geringer sein als 10“ ist, ist die Anzahl der Produkte, die im Smart Content angezeigt werden, 3 (maximal), auch wenn die tatsächlich konfigurierte „Anzahl der Produkte“ 10 ist.
Rahmenfarbe
Die Farbe des Rahmens rund um den Smart Content. Der Wert kann jede Farbe im Format XXXXXX sein, zum Beispiel: 000000 oder FFBA0F oder das Wort „transparent“ (für einen transparenten Rahmen). Ein grafisches Beispiel sehen Sie für den Parameter „Titelbox-Erscheinungsbild“ oben.
Rahmengröße
Die Größe des Rahmens rund um das Smart Content in Pixeln. Ein grafisches Beispiel mit einer Rahmengröße von 2 Pixeln sehen Sie für den Parameter „Titelbox-Erscheinungsbild“ oben.
Rahmenradiusgröße
Die Rahmenradiusgröße entspricht der CSS-Eigenschaft „border-radius“. Sie wird verwendet, um runde Ecken in den vier Ecken des Smart Content hinzuzufügen.
Derselbe Smart Content mit dem Standard-Erscheinungsbild, das in „Titelbox-Erscheinungsbild“ verwendet wurde, mit einer „Rahmenradiusgröße“ von 10 würde wie folgt aussehen (beachten Sie die runden Ecken):
Titelbox
Text
Der über dem Smart Content anzuzeigende Titeltext. Wenn dieser Text leer ist, wird überhaupt keine Titelbox angezeigt.
Für eine Website, für die ein mehrsprachiger Katalog eingerichtet ist, wird eine Schaltfläche „Übersetzungen“ angezeigt :
Klicken Sie auf die Schaltfläche und eine Overlay-Lightbox erscheint, wo Sie Übersetzungen in allen konfigurierten Sprachen einrichten können :
Hintergrundfarbe
Die Hintergrundfarbe der Titelbox im Hexadezimalformat 'XXXXXX' (zum Beispiel : 000000 für schwarz, FFFFFF für weiß), oder der Wert „transparent“ für einen transparenten Hintergrund. Unter dem Parameter „Titelbox-Erscheinungsbild“ finden Sie ein Beispiel mit einer schwarzen Hintergrundfarbe und andere Varianten von Smart Content-Rahmen und -Typ.
Schriftartfamilie
Dieser Parameter stellt die für die Titelbox verwendeten Schriftarten dar. Wenn Sie auf das Feld klicken, wird ein Dropdown-Feld mit Schriftarten angezeigt, die Ihnen zur Verfügung stehen.
Wenn Sie sicherstellen möchten, dass die Schriftart korrekt wiedergegeben wird, sollten Sie eine der im Dropdown-Feld angezeigten Schriftarten auswählen.
Wenn Sie eine benutzerdefinierte Schriftart verwenden möchte, die im Feld ‚Custom HTML‘ definiert ist, können Sie eine beliebige Kombination kommagetrennter Schriftartnamen verwenden (dieses Schriftartfamilienfeld steuert die CSS-Eigenschaft „Schriftfamilie“). Schriftartnamen, die Leerzeichen enthalten, müssen in doppelte Anführungsstriche gesetzt werden (z. B. "Times New Roman", Georgia, Serif).
Schriftarten sind allgemein ein komplexes Thema, da die korrekte Anzeige von Schriftarten vom Browser und Betriebssystem Ihrer Besucher abhängt. Es gibt eine Menge Dokumentation im Internet und Sie können eine Menge „websichere“ Schriftarten finden, die Sie als Werte für diesen Parameter verwenden können. Hier ist eine kurze Liste.
Wenn Sie Ihre eigenen Schriftarten hinzufügen möchten, achten Sie auf den Parameter „Custom HTML“.
Schriftgröße
Die Größe der Schriftart in pt. Zum Beispiel: 14 oder 20.
Schriftfarbe
Die Farbe der Schriftart im Hexadezimalformat (XXXXXX). Eine schwarze Schriftart hätte den Wert 000000. Wenn Sie den Eindruck haben, dass Ihr Text nicht angezeigt wird, stellen Sie sicher, dass die Schriftartfarbe des Texts nicht gleich der Schriftartfarbe des Hintergrunds ist.
Schriftartgewicht
Dies ist das Gewicht der Schriftart. Dafür wird die CSS-Eigenschaft „font-weight“ verwendet.Sie können fett, normal, heller oder Zahlen wie 100, 200, 300 usw. verwenden.
Schriftart-Zeichenabstand
Dieser Parameter definiert den Abstand zwischen Zeichen im Titeltext. Dafür wird die CSS-Eigenschaft „letter-spacing“ verwendet. Die Werte sind in Pixel (positiv oder negativ), zum Beispiel: -1, 3, 0.1
Text-Padding
Dieser Parameter definiert den Platz (in Pixel) zwischen dem Titeltext und dem Rand der Titelbox.
Dieser Smart Content hat ein Text-Padding gleich 6 :
Derselbe Smart Content mit einem Text-Padding gleich 24 :
Ausrichtung
Dieser Parameter definiert, wie der Titeltext ausgerichtet ist: Links, Mitte oder Rechts Dieser Parameter gilt nur, wenn der Smart Content-Typ auf „Standard“ eingestellt ist. Wenn der Typ „Tabulatorähnlich“ ist, hat die Einstellung keine Wirkung.
Titellink
Wenn der Titel ein anklickbarer Link sein soll, können Sie eine URL in diesen Parameter einfügen. Der Link ist derselbe für alle Besucher, jedes Mal wenn der Smart Content angezeigt wird.
Dieser Parameter wird hauptsächlich beim Konfigurieren eines Smart Content mit einem kategoriespezifischen Filter verwendet. Mit einem Titel wie Unsere beliebtesten Produkte in Kategorie X können Sie einen Link zu Kategorie X im Titellink hinzufügen.
Produktbild
Verhältnis von Bildbreite zu Bildhöhe (nur für Website)
Die Größe der Produktbilder (in Pixel) ist hier definiert. Die Breite des Bildes ist obligatorisch, die Höhe ist optional. Bei Änderung der Größe des Bildes wird das Seitenverhältnis beibehalten.
Die endgültigen Bildabmessungen hängen von den Abmessungen des Originalbildes ab:
- Wenn nur die Breite eingegeben und die Höhe leer gelassen wird, wird die Größe des Bildes proportional an die gewünschte Breite angepasst.
- Wenn sowohl die Breite als auch die Höhe eingegeben werden, wird die Größe des Bildes proportional an das längste Maß des Originalbildes angepasst. Wenn in den Parametern zum Beispiel „100“ für beide Abmessungen eingegeben wurde und das Originalbild 400 breit mal 260 hoch war, wäre die neue Bildgröße 100 breit mal 65 hoch.
| Eingestellte Bildbreite
|
Eingestellte Höhen | Tatsächliche Bildbreite | Tatsächliche Bildhöhe | Result |
|---|---|---|---|---|
| 100px | 90px | 75px | 100px | Die Größe des Bildes wird zu einer Höhe von 90 Pixeln geändert. Die Breite wird unter Berücksichtigung des Seitenverhältnisses geändert und zentriert. |
| 100px | 100px | 150px | 120px | Die Größe des Bildes wird zu einer Breite von 100 Pixeln geändert und die Höhe wird unter Berücksichtigung des Seitenverhältnisses geändert und zentriert. |
| 100px | no value | 150px | 200px | Obwohl die Breite kleiner ist als die Höhe, wird die Größe des Bildes auf Basis des eingegebenen Breitenmaßes geändert. Das Ergebnis ist ein Bild mit einer Breite von 100 Pixeln. Die Höhe folgt der Größenänderung unter Beibehaltung des Seitenverhältnisses. |
Wenn das „Bildhöhenverhältnis“ auf „Relativ“ mit einer Breite von 100 Pixeln eingestellt ist, hat das Bild immer eine Breite von 100 Pixeln und die Verhältnisse (und damit die Höhe) werden beibehalten. Diese Einstellung garantiert die Platzierung anderer Grafikblöcke nicht, die Bilder werden jedoch größer. Anpassungen können im Parameter „Custom CSS“ vorgenommen werden.
Bildrahmen, Farbe und Größe
Diese Parameter fügen einen Rahmen zu Produktbildern in Smart Content hinzu. Die "Rahmengröße" definiert die Größe des Rahmens in Pixeln und die "Rahmenfarbe" definiert die Farbe im Hexadezimalformat (XXXXXX). Bei einer ‚Rahmengröße‘ von 5 Pixeln und einer ‚Rahmenfarbe‘ von 000000 (schwarz) würde das Ergebnis bei zwei Bildern beispielsweise so aussehen:
Bildzoom
Wenn dies auf Ein eingestellt ist, werden die Produktbilder gezoomt (vergrößert), wenn Sie mit der Maus über das Bild gehen.
Pfeile (nur für Website-Smart Content)
Pfeiltyp
Die verschiedenen Arten von Pfeilen. Alle Pfeile passen sich automatisch an den allgemeinen Smart Content-Typ an: nach oben/nach unten für Smart Content des Typs „Vertical“, nach links/nach rechts für Smart Content des Typs „Horizontal/Horizontal Modern“.
Sie können auch ein benutzerdefiniertes Pfeilbild verwenden, wenn Sie das Feld „Custom CSS“ so einrichten, dass die vorhandenen, von Recommendations bereitgestellten ersetzt werden. Hier ist ein Beispiel (Sie müssen die URLs ersetzen, damit es funktioniert):
.arrow-img.arrow-next {background: url('https://www.my-shop1.com/arrow_right.png') 22px 0 no-repeat;}
.arrow-img.arrow-prev {background: url('https://www.my-shop1.com/arrow_left.png') no-repeat;}Pfeilgröße
Die Größe der Pfeile, die durch Recommendations bereitgestellt werden:
- Große Pfeilvarianten 40x40px
- Kleine Pfeilvarianten 20x20px
Dies sind die realen Größen der Bilder, die angezeigt werden. Sie können die Größe dieser Bilder selbstverständlich mit „Custom CSS“ ändern, wenn Sie die Breite/Höhe der Pfeile auf das Pixel feineinstellen möchten.
Anfängliche Pfeilopazität
Die anfängliche Opazität der Pfeile ist ein Dezimalwert zwischen 0 und 1, der den Transparenzgrad definiert. Hier ist ein Beispiel, bei dem der Parameter auf 0,4 und 1 eingestellt ist:
Pfeilopazität beim Darübergehen
Dies ist dasselbe wie die ‚anfängliche Pfeilopazität‘, aber dieser Parameterwert wird dynamisch eingestellt, wenn Sie über den Pfeil gehen.
Pfeilhintergrundtyp
Dies ist das Format des Bereichs/Hintergrunds hinter dem Pfeilsymbol.
| Wert | Beschreibung | Abbildung |
|---|---|---|
| Keine | Es wird kein Hintergrund angezeigt. |
|
| Rund | Es wird ein Kreis um den Pfeil angezeigt. |
|
| Quadratisch | Es wird ein Quadrat um den Pfeil angezeigt. |
|
Pfeilhintergrundfarbe
Die Farbe des Hintergrunds hinter dem Pfeil im hexadezimalen Format (z. B. 000000 für schwarz, FFFFFF für weiß). Hier ist eine Beispielkonfiguration für diesen Parameter sowie für alle mit dem Hintergrund verbundenen Parameter :
Und so sieht es aus. Der linke Screenshot zeigt den anfänglichen Zustand, während der rechte den Zustand beim Darübergehen mit der Maus zeigt.
Pfeilhintergrund-Rahmenfarbe
Dieser Parameter definiert die Rahmenfarbe des Hintergrunds hinter dem Pfeil (im Hexadezimalformat XXXXXX). Wenn der Pfeilhintergrundtyp auf „Keine“ eingestellt ist, hat dieser Parameter keine Wirkung.
Im vorherigen Beispiel war dieser Parameter auf „000000“ eingestellt.
Pfeilhintergrund-Padding
Dieser Parameter stellt den Abstand (in Pixel) zwischen dem Pfeil selbst und dem Hintergrundrahmen dar. Dieser Wert ist im vorherigen Beispiel auf 10 eingestellt.
Anfängliche Pfeilhintergrundopazität
Dieser Parameter ist ein Wert zwischen 0 und 1 (zum Beispiel 0,4, wie im vorherigen Beispiel), der den Transparenzgrad des Hintergrunds definiert. Wie Sie im Beispiel sehen können, ist der anfänglich pinkfarbene Hintergrund (ffc0c0) etwas blasser als die Version beim Darübergehen.
Pfeilhintergrundopazität beim Darübergehen
Bei diesem Parameter handelt es sich um einen Wert zwischen 0 und 1, der den Transparenzgrad des Hintergrunds definiert, wenn man mit dem Mauszeiger über den Pfeil fährt.
Invertierte Farben
Der Parameter „Invertierte Farben“ invertiert alle Hexadezimalfarben, die für Pfeile und Hintergrund definiert sind. Da Pfeilbilder standardmäßig dunkel sind, ist dies eine gute Möglichkeit, um helle Pfeile auf einem dunklen Hintergrund zu erhalten. Das vorherige Beispiel mit pinkfarbener Hintergrundfarbe sieht wie folgt aus, wenn „Invertierte Farben“ auf „Ein“ eingestellt ist:
Automatischer Schieber
Wenn der Parameter ‚Automatischer Schieber‘ auf EIN gesetzt ist, werden die Smart Contents vom Typ ‚Horizontal‘, ‚Horizontal Modern‘ und ‚Vertikal‘ mithilfe der Timer- und Intervalleinstellungen automatisch verschoben.
Ist er auf AUS gesetzt, haben dieser Parameter sowie der ‚Starttimer des automatischen Schiebers‘ und das ‚Wiederholungsintervall des automatischen Schiebers‘ keine Wirkung. Wenn die ‚Anzahl der Produkte‘ kleiner oder gleich der Anzahl der Produkte ist, die unter Berücksichtigung der Breite tatsächlich in den Smart Content passen, hat der ‚Automatische Schieber‘ keine Wirkung, auch wenn er auf EIN gestellt ist.
Starttimer des automatischen Schiebers
Dieser Parameter definiert die Anzahl der Sekunden, nach denen der Schieber seinen ersten Schiebebewegung durchführt.
Wiederholungsintervall des automatischen Schiebers
Dieser Parameter definiert die Anzahl der Sekunden, die der Schieber zwischen jedem Schiebebewegung nach dem ersten wartet.
Pfeilschaltflächen-Überlagerung
Dieser Parameter gibt an, wie die Pfeile in Smart Content integriert werden. Wenn dies auf „Ein“ eingestellt ist, nimmt das Produkt die volle Länge des Smart Content ein, während die Schaltfläche dies überlagert, wie in diesem Beispiel:
Bei der Einstellung AUS nehmen die Pfeile je nach Pfeiltyp 20 Pixel oder 40 Pixel an jeder Seite des Produkts ein. Dies sieht für dasselbe Smart-Content-Beispiel wie folgt aus:
Der Unterschied ist offensichtlich, insbesondere an der linken Seite des Smart Content, wo Sie sehen, dass der Pfeil seinen eigenen horizontalen Platz vor dem ersten Produkt hat.
Beschreibungstext
Schriftart der Beschreibung
Dieser Parameter stellt die für Produktbeschreibungen verwendete Schriftart dar. Dies ist der gesamte Text, der unter den Produktbildern angezeigt wird. Nähere Informationen über die erlaubten Schriftarten finden Sie unter dem Parameter „Schriftartfamilie“ oben.
| Schriftart : Georgia |
|---|
|
| Schriftart : Helvetica |
|---|
|
Schriftgröße der Beschreibung
Die Größe der Schriftart, die im Text verwendet wird, der unter dem Produktbild erscheint, in pt. Zum Beispiel: 14 oder 20.
Schriftfarbe der Beschreibung
Die Farbe der Schriftart, die für den Parameter ‚Verkaufspreis‘ unter dem Produktbild verwendet wird, ausgedrückt im Hexadezimalformat (XXXXXX). Eine schwarze Schriftart hätte den Wert 000000.
Ausrichtung der Beschreibung
Dieser Parameter definiert, wie der Textblock unter dem Produktbild ausgerichtet wird: Links, Mitte oder Rechts Dieser Block beinhaltet den Produkttitel, Beschreibung, Preis und andere Parameter, die mithilfe des Parameters „Angezeigte Felder“ aktiviert werden.
Titel beim Darübergehen unterstreichen
Wenn dies auf „Ein“ eingestellt ist, unterstreicht dieser Parameter den Produkttitel (unter dem Produktbild), wenn Sie darüber gehen. Wenn dies auf „Aus“ eingestellt ist, hat dieser Parameter keine Wirkung. Dieser Parameter ist standardmäßig auf „Ein“ eingestellt.
Beim Darübergehen anzeigen
Wenn dies auf „Aus“ eingestellt ist (standardmäßig), wird der Textblock (der Titel, Beschreibung, Preis und andere Parameter enthält, die mithilfe des Parameters „Angezeigte Felder“ aktiviert werden) unter dem Produktbild angezeigt.
Wenn dies auf „Ein“ eingestellt ist, wird dieser Textblock über dem Produktbild angezeigt, während das Produktbild mit einer halbtransparenten dunklen Überlagerung verdeckt wird.
Hier ist ein Beispiel :
| Beim Darübergehen anzeigen auf AUS eingestellt | Beim Darübergehen anzeigen auf EIN eingestellt | Beim Darübergehen anzeigen auf EIN eingestellt, mit „Custom CSS“ |
|---|---|---|
|
|
|
Die Opazität des Überlagerungsfelds sowie andere Parameter können mithilfe des Parameters „Custom CSS“ eingestellt werden. Die dritte Spalte zeigt ein Beispiel dafür, was Sie mit „Custom CSS“ und „Custom JS“ tun können (für das Starten eines Filmtrailers direkt von einer benutzerdefinierten Schaltfläche aus).
Preis
Schriftart des Preises
Dieser Parameter stellt die Schriftart dar, die für den "Preis" und "Verkaufspreis", die unter dem Produktbild angezeigt werden, verwendet wird. Nähere Informationen über die erlaubten Schriftarten finden Sie unter den Parametern „Schriftart der Beschreibung“ und "Schriftartfamilie".
Schriftgröße des Preises
Die Größe der Schriftart, die im „Preis“ und „Verkaufspreis“ verwendet wird, die unter dem Produktbild erscheinen, in pt. Zum Beispiel: 14 oder 20.
Schriftfarbe des Preises
Die Farbe der Schriftart, die für den Parameter „Preis“ unter dem Produktbild verwendet wird, ausgedrückt im Hexadezimalformat (XXXXXX). Eine schwarze Schriftart hätte den Wert 000000.
Schriftgewicht des Preises
Dieser Parameter stellt das Gewicht der Schriftart des Preises ein. Unter dem Parameter Schriftartgewicht finden Sie eine Liste möglicher Werte und mehr Informationen zu deren Verwendung.
Preispräfix
Dieser Parameter kann eine Reihe von Zeichen enthalten, die vor dem „Preis“ und „Verkaufspreis“ im Textblock unter dem Produktbild angezeigt werden. Dieser Parameter wird häufig verwendet um ein Präfix „Ab“ für Produkte mit variablen Preisen hinzuzufügen (z.B. Marktplätze mit verschiedenen Anbietern, Produkte mit verschiedenen Optionen).
Schriftgröße des Preispräfix
Die Schriftgröße des Präfix in pt. Zum Beispiel: 10 oder 11 (normalerweise kleiner als der "Preis"/"Verkaufspreis" selbst). Wenn kein Preispräfix eingestellt ist, hat diese Einstellung keine Wirkung.
Schriftfarbe des Preispräfix
Die Farbe des "Preispräfix", das links vom Preis/Verkaufspreis angehängt wird. Dies muss im Hexadezimalformat (XXXXXX) sein. Eine hellgraue Schriftart hätte den Wert EAEAEA (das Präfix ist normalerweise heller als der Preis/Verkaufspreis).
Schriftfarbe des Verkaufspreises
Die Farbe der Schriftart, die für den Parameter ‚Verkaufspreis‘ unter dem Produktbild verwendet wird, ausgedrückt im Hexadezimalformat (XXXXXX). Eine schwarze Schriftart hätte den Wert 000000.
Dezimaltrennzeichen des Preises
Dieser Parameter legt die Art des Trennzeichens fest, das für Dezimalpreise verwendet wird. Der Preis €2,99 wird als €2,99 angezeigt, wenn dieser Parameter auf „Komma“ eingestellt ist, und als €2.99, wenn dieser Parameter auf „Punkt“ eingestellt ist.
Entfernen nachgestellter Nullen im Preis
Wenn dieser Parameter auf ‚Ja‘ gesetzt ist, entfernt er die Nullen hinter einem Preis, wenn dieser Preis eine Ganzzahl ist, aber im Dezimalformat geschrieben wird.
Zum Beispiel würde statt „29,00“ „29“ angezeigt werden.
Wenn dieser Parameter auf ‚Nein‘ gesetzt ist, wird der Preis 29,00 weiter als 29,00 angezeigt. ‚Nein‘ ist die Standardeinstellung.
Schaltfläche „Zum Einkaufswagen hinzufügen“ (nur für Website-Smart Content)
Die Schaltfläche „Zum Einkaufswagen hinzufügen“ kann ganz einfach ohne Codierung hinzugefügt werden, wenn Ihre Website einen direkten Link zum Hinzufügen eines bestimmten Produkts zum Einkaufswagen angibt. Hier ist ein Beispiel, das zeigt, wie eine Schaltfläche „Zum Einkaufswagen hinzufügen“ unter jedem Produkt in Recommendations Smart Content eingerichtet wird.
Das Ergebnis kann wie folgt aussehen, wobei die grünen Schaltflächen zu einer Einkaufswagenhinzufügung des obigen Produkts verlinken:
Dies ist die Konfiguration, die zum Einrichten der Schaltfläche verwendet wird:
Mit einigen Custom CSS für den Stil der Schaltfläche ‚Zum Einkaufswagen hinzufügen‘:
Custom CSS
.item-col .bottom-btn {
cursor: pointer;
background: #4da50b;
color: #ffffff;
width: 100%;
}- Der Aktionstyp der Schaltfläche „Zum Einkaufswagen hinzufügen“ muss auf „Hyperlink“ eingestellt werden. Das bedeutet, dass die Aktion, die ausgelöst wird, wenn jemand auf die Schaltfläche klickt, darin besteht, einem Link zu folgen, der in den Feldern ‚Hyperlink Base URL‘ und ‚Link Zum Einkaufswagen hinzufügen‘ definiert ist.
- Der Schaltflächen-Titeltext definiert den Text, der auf der Schaltfläche erscheint. Wenn Ihre Website nur in einer Sprache ist, ist dies das einzige Textfeld, das Sie ausfüllen müssen. Wenn für Ihre Website ein mehrsprachiger Katalog eingerichtet ist, klicken Sie auf die Schaltfläche „Übersetzungen“ und es erscheint der folgende Bildschirm, auf dem Sie eine Übersetzung für jede Sprache, die Sie einrichten, angeben können :
- Die Hyperlink-Basis-URL ist der erste Teil der URL, die aufgerufen wird, wenn der Besucher auf die Schaltfläche „Zum Einkaufswagen hinzufügen“ klickt. Wenn Sie keinen mehrsprachigen Katalog haben, stellen Sie diesen Parameter einfach auf den Anfang der URL ein, die aufgerufen werden soll, ohne die variablen Parameter, die vom spezifischen Produkt abhängen, das der Benutzer anklickt (z. B. http://www.myshop1.com/cart). Wenn Ihr Katalog mehrsprachig ist, klicken Sie auf die Schaltfläche „Übersetzungen“ und füllen Sie die verschiedenen Basis-URLs aus, die sich wahrscheinlich für jede eingerichtete Sprache unterscheiden.
Der Link zur Schaltfläche „Zum Einkaufswagen hinzufügen“ ist der zweite Teil der URL, der zum vorherigen Parameter „Hyperlink-Basis-URL“ hinzugefügt wird. Dieser Parameter ist eine Vorlage, die Variablen enthält, die automatisch durch produktspezifische Parameter ersetzt wird. Verwenden Sie die folgende Notation für Produktfelder :
| Parameter-Name | Vorlagennotation |
|---|---|
| Ihre Hyperlink-Basis-URL | #{base_url} |
| Eindeutige ID | #{item_pid} |
| Seiten-URL | #{item_url} |
| Bild-URL | #{image_url} |
| Titel | #{title} |
| Untertitel | #{subtitle} |
| Beschreibung | #{description} |
| Preis | #{price} |
| Verkaufspreis | #{sale_price} |
| Kategorie | #{category} |
| Menge | #{quantity} |
| Typ | #{type} |
| Marke | #{brand} |
| Verfügbarkeit | #{availability} |
| Bedingung | #{condition} |
| Farbe | #{color} |
| Alle benutzerdefinierten Eigenschaften, z. B. Produktkategorie | #{productCategory} |
| Tracking-Link Follow-URL (*) | #{follow_url} |
(*) Die Follow-URL wird benötigt, um das Conversion-Tracking zu generieren. Datenerkenntnisse liefern dann Conversion-Informationen.
Im obigen Beispiel ist der Link zur Schaltfläche Zum Einkaufswagen hinzufügen eingestellt auf:
#{base_url}?add=1&id_product=#{item_pid}
In den meisten Fällen beginnt der „Link zur Schaltfläche Zum Einkaufswagen hinzufügen“, mit #{base_url} und enthält Ihre übersetzte Hyperlink-Basis-URL. Fügen Sie dann einfach den zweiten Teil Ihrer direkten URL für das Hinzufügen zum Einkaufswagen hinzu, indem Sie die produktspezifischen Parameter durch das richtige Vorlagenfeld ersetzen, wie in der obigen Tabelle gezeigt.
Sehen wir uns ein Beispiel mit den folgenden Hypothesen an:
- Wir betrachten eine Produktseite, in die unser Smart Content eingefügt ist.
- Smart Content ist mit den vorherigen Parametern zum Hinzufügen einer Schaltfläche „Zum Einkaufswagen hinzufügen“ konfiguriert.
- Die Seite, die wir betrachten, ist in französischer Sprache.
- Wir klicken auf die Schaltfläche „Zum Einkaufswagen hinzufügen“ unter dem Produkt mit PID 1234.
Dies ist der Link, zu dem wir weitergeleitet werden:
http://www.myshop.fr/panier?add=1&id_product=1234
Die „Hyperlink-Basis-URL“ für eine Seite in französischer Sprache ist „http://www.myshop.fr/panier“ und der Teil, der die produktspezifischen Parameter enthält, ist: „?add=1&id_product=1234“ für ein Produkt mit einer eindeutigen ID gleich 1234.
Schaltfläche „Mehr erfahren“
Die Schaltfläche Mehr erfahren ist viel einfacher als die Schaltfläche „Zum Einkaufswagen hinzufügen“. Der einzige Parameter, den Sie einrichten müssen, ist der Titeltext der Schaltfläche, der einfach der Text ist, der auf der Schaltfläche angezeigt wird. Die Schaltfläche leitet den Besucher beim Anklicken immer zur Seiten-URL des Produkts weiter. Falls der Katalog ein mehrsprachiger Katalog ist, müssen Sie Übersetzungen hinzufügen, indem Sie auf die Schaltfläche „Übersetzungen“ klicken.
Das Ergebnis kann wie folgt aussehen (einschließlich der Schaltflächen ‚Mehr erfahren‘ und ‚Zum Einkaufswagen hinzufügen‘):
Mit etwas Custom CSS für die Schaltfläche ‚Mehr erfahren‘ (unten links bei jedem Artikel) und die Schaltfläche ‚Zum Einkaufswagen hinzufügen‘ (unten rechts bei jedem Artikel):
Custom CSS
.item-col .bottom-btn, .item-col .bottom-half-left-btn {
cursor: pointer;
background: #e5e0e0;
color: #0091c9;
}
.item-col .bottom-btn, .item-col .bottom-half-right-btn {
cursor: pointer;
background: #4da50b;
color: #ffffff;
}Verschiedenes
Schriftfarbe der Marke
Die Farbe des „Markennamens“, der unter dem Titel-/Beschreibungs-/Preisblock angezeigt wird, wenn der Parameter „Marke“ konfiguriert und in der Katalogaktualisierung richtig analysiert wird. Dies muss im Hexadezimalformat (XXXXXX) sein.
Produkthintergrundfarbe
Die Farbe des Hintergrunds des Smart Content, in dem die Produkte angezeigt werden. Dies muss im Hexadezimalformat (XXXXXX) sein oder auf den Wert „Transparent“ eingestellt werden, wenn der Hintergrund transparent sein soll.
Im folgenden Beispiel ist der Hintergrund auf hellgrau (fafafa) eingestellt:
Hintergrundfarbe des Artikelcontainers
Die Farbe des Hintergrunds, in der jedes individuelle Produkt angezeigt wird. Dies muss im Hexadezimalformat (XXXXXX) sein oder auf den Wert „Transparent“ eingestellt werden, wenn der Hintergrund transparent sein soll.
Im folgenden Beispiel wird derselbe Smart Content verwendet wie im obigen Beispiel für die „Produkthintergrundfarbe“. Der einzige geänderte Parameter ist „Hintergrundfarbe des Artikelcontainers“, der auf eine hellblaue Farbe (cddbff) eingestellt ist.
Farbe und Größe des Bildspaltenrahmens
Diese zwei Parameter stellen die Farbe und Größe des Rahmens rund um jedes Produkt ein. Im Smart Content, der für das Beispiel der „Produkthintergrundfarbe“ verwendet wird, wurde die „Rahmenfarbe“ auf ein mittleres Hellgrau (cecece) und eine „Rahmengröße“ von 1 eingestellt. Dadurch wird ein grauer Rahmen rund um jedes Produkt erstellt.
Darüber hinaus wurden einige „Custom CSS“ hinzugefügt, um Rahmen rund zu machen, und ein Schatteneffekt rund um jedes Produkt (neben anderen grafischen Effekten) :
#recList .item-col {
border-radius: 5px;
box-shadow: rgb(0 0 0 / 35%) 5px 5px 5px;
}Oberes Padding der Produktliste
Dieser Parameter stellt einen Abstand in Pixel zwischen der „Titelbox“ und dem Block ein, der alle Produkte enthält. Im vorherigen Beispiel war dieser Parameter auf 4 eingestellt.
Platzierung der Artikel nebeneinander
Standardmäßig werden Produkte durch einen Leerraum mit variabler Größe voneinander getrennt, der je nach Größe des Bildschirms angepasst wird. Dies ist für die Anzeige von Smart Content auf Mobilgeräten hilfreich, da Sie nichts ändern müssen, um die Anzahl der auf der jeweiligen Bildschirmgröße angezeigten Produkte anzupassen.
Es kann Fälle geben, in denen Sie Ihre Produkteeines neben dem anderen ohne irgendeinen Rand oder mit einem hartcodierten Rand platzieren möchten. Hier ist ein Beispiel dafür, wie ein solcher Smart Content aussehen kann :
Falls Sie nicht möchten, dass die Artikel einander berühren, können Sie einige „Custom CSS“ hinzufügen, um automatisch einen Rand rechts von jedem Produkt hinzuzufügen. Hier ist der Code, den Sie zum Hinzufügen eines Rands von 8 Pixeln rechts von jedem Produkt verwenden würden :
#recList .item-col {
margin-right: 8px !important;
}Textdaten ganz oben
Wenn dies auf „Ein“ eingestellt ist, setzt dieser Parameter den Textblock (der Titel, Beschreibung, Preis, Marke und alle Eigenschaften, die im Parameter „Angezeigte Felder“ aktiviert sind, enthält) über das Produktbild. Standardmäßig ist dieser Parameter auf „Aus“ eingestellt.
| AUS — Textdaten unter dem Produktbild | EIN — Textdaten über dem Produktbild |
|---|---|
|
|
Artikelcontainer-Padding
Dieser Parameter definiert den Platz zwischen dem Rand des Produktbildes und dem Rand des gesamten Produktcontainers in Pixeln.
| Artikelcontainer-Padding von 4 Pixeln |
|---|
|
| Artikelcontainer-Padding von 20 Pixeln |
|---|
|
Hier ist ein Screenshot der verschiedenen Optionsparameter, die verwendet wurden, um den vorherigen Smart Content zu konfigurieren (mit einem Padding von 4 Pixeln):
Angezeigte Felder
Dieser Parameter aktiviert die Anzeige optionaler Produktparameter. Diese Parameter stammen von der Konfiguration, die Sie in Ihrem Katalogimport einrichten.
Für jeden Parameter wird, wenn das entsprechende Kontrollkästchen markiert und der Parameter für das spezifische angezeigte Produkt verfügbar ist, der Parameter angezeigt. Wenn der Parameter nicht verfügbar ist (nicht konfiguriert oder konfiguriert, aber für das spezifische Produkt nicht importiert), wird der Parameter nicht angezeigt, ohne irgendein grafisches Artefakt. Zum Beispiel ist im obigen Konfiguration-Screenshot die Optionen „Marke“ und „Verkaufspreis“ markiert, aber nicht verfügbar.
„Custom HTML“ für jedes Produkt
Wenn die Produktparameter, die Sie für jedes Produkt anzeigen möchten, im Parameter „Angezeigte Felder“ nicht verfügbar sind, können Sie sie über den Parameter „Custom HTML“ hinzufügen.
Dieser Parameter ist eine Vorlage, in die Sie HTML-Code eingeben können, der produktspezifische Parameter enthält. Diese Parameter werden in der Form #{parameter} geschrieben und durch den Wert dieses Parameters für dieses spezifische Produkt ersetzt, wenn der Smart Content wiedergegeben wird.
Folgender Code ist ein Beispiel dafür, was Sie in Ihr Feld „Custom HTML“ eingeben könnten :
<a href="#{manufacturer_url}" class="highlight-link">#{manufacturer}</a>Wenn der Parameter „manufacturer_url“ des Produkts gleich „https://www.selligent.com“ ist und der Parameter „manufacturer“ gleich „Selligent“ ist, wird der folgende HTML-Code unter jedem Produktbild wiedergegeben :
<a href="https://www.selligent.com" class="highlight-link">Selligent</a>Hinweis: Damit dies funktioniert, müssen Sie außerdem zwei benutzerdefinierte Felder mit dem Namen „manufacturer“ und „manufacturer_url“ in Ihrer Katalogimportkonfiguration konfigurieren.
Diese Funktion ermöglicht Ihnen die Konfiguration erweiterter Grafik für jedes Produkt. Auch wenn es immer einfacher ist, den grafischen Konfigurator Ihres Dashboards zu verwenden, kann es sein, dass einige spezifische Funktionen, die Sie implementieren möchten, nicht unterstützt werden. „Custom HTML“ für jedes Produkt ermöglicht Ihnen eine weitere individuelle Anpassung. Das folgende Beispiel zeigt, was Sie tun können, und den „Custom HTML“-Code der dafür verwendet wurden.
| Ergebnis | „Custom HTML“-Code |
|---|---|
|
|
Keine |
|
|
<a href="#{item_url}" class="info" target="_top">
|
In der letzten Zeile der oben stehenden Tabelle wurde ein System implementiert, um einen Trailer zu starten, wenn jemand auf die Schaltfläche „Abspielen“ klickt, die über dem Miniaturbild eines Films erscheint. Um den Trailer zu starten, sendet der Smart Content einen Trigger an das Recommendations-Tag, das wiederum eine vorhandene Javascript-Funktion auf der übergeordneten Seite aufruft. Im folgenden Abschnitt wird die Funktionsweise genau erklärt.
In „Custom HTML“ enthält eine Trailer-Schaltfläche eine spezielle Recommendations-Klasse namens „custom-action-btn“. Wenn Sie diese Klasse zu einem HTML-Element im Smart Content hinzufügen, wird „setReceiveDataFunction“ aufgerufen, wenn der Benutzer auf dieses Element klickt. Dieser Aufruf hat ebenfalls einen Parameter: alle Daten, die im Parameter „data-obj“ des HTML-Elements enthalten sind, das ein Objekt „stringified“ sein muss.
Die Funktion „setReceiveDataFunction“, das aufgerufen wird, wenn ein Benutzer auf den Trailer klickt, ist im Tag definiert. Das „Custom HTML“ startet den Trailer nur, wenn das Recommendations-Tag die Funktion„setReceiveDataFunction“ deklariert :
<script type="text/javascript">
var _thq=_thq||[];
_thq.push(['setId','CustomerX']);
_thq.push(['trackPageView']);
_thq.push(['trackEvents']);
_thq.push(['detectChanges']);
_thq.push(['setReceiveDataFunction', function(data){launchTrailer(data);}]);
(function(){
var th=document.createElement('script');
th.type='text/javascript';
th.async=true;
th.src=('https:'==document.location.protocol?'https://':'http://')+'www..com/static/th.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(th,s);
}) ();
</script>Es ruft ein Klick auf die Trailer-Schaltfläche im Smart Content die folgende Funktion auf, die auf der übergeordneten Seite definiert werden muss, die der Smart Content enthält.
launchTrailer({
"trailer": "#{trailer}",
"popin":"#{item_pid}",
"name": "#{title}",
"videotype":"#{video_type}",
"cover":"#{image_url}"
});„Custom HTML“ im head des Smart Content eingefügt
Dieser Parameter ermöglicht Ihnen das Einfügen einer statischen HTML im Abschnitt head-/head des Smart Content. Dieser HTML-Code wird vor dem „Custom CSS“-Code und allen Ihren Standard-Grafikparametern geladen.
Recommendations stellt standardmäßig eine begrenzte Anzahl von Schriftarten bereit (wie im Abschnitt „Titel-Schriftartfamilie“ beschrieben). „Custom HTML“ für head wird häufig für das Hinzufügen benutzerdefinierter Schriftarten und das erneute Verwenden dieser Schriftarten in Ihren grafischen Parametern (Schriftart des Titels oder Schriftart der Beschreibung) verwendet.
So verwenden Sie eine benutzerdefinierte Schriftart, die auf Ihren Servern gehostet wird (wir verwenden myshop.com als Beispiel-Domain):
<style type="text/css">
@font-face{
font-family:"Helvetica Neue Std";
src:url('//www.myshop.com/static/fonts/helveticaneue.ttf') format('truetype'),
url('//www.myshop.com/static/fonts/helveticaneue.woff') format('woff'),
url('//www.myshop.com/static/fonts/helveticaneue.svg') format('svg'),
url('//www.myshop.com/static/fonts/helveticaneue.eot') format('embedded-opentype')
}
</style>Dieser Code wird unverändert in den Abschnitt head/head eingefügt:
Custom CSS
Dieser Parameter funktioniert genauso wie das vorherige „Custom HTML“ head, ist aber für den CSS-Code spezifisch. Jegliches „Custom CSS“, das in diesem Feld hinzugefügt wird, setzt alle vorher definierten CSS-Eigenschaften außer Kraft (gemäß CSS-Standardregeln).
Hier ein Beispiel, um sicherzustellen, dass die Reihenfolge der Einfügung der verschiedenen benutzerdefinierten Parameter im HTML-Code klar ist :
<html>
<head>
[**Custom HTML**]
[Smart Content default CSS]
[**Custom CSS**]
</head>
<body>
[Smart Content HTML]
[**Custom JS**]
</body>
</html>Wenn Sie einen linken Rand von 20 Pixeln zu Ihrem Smart-Content-Titel hinzufügen und die Schriftart auf ‚Helvetica Neue Std‘ einstellen möchten, die in Ihrem Parameter „Custom HTML“ hinzugefügt wurde, würden Sie Folgendes in Ihre „Custom CSS“ schreiben:
.rec_title {
left-margin: 20px;
font-family: "Helvetica Neue Std";
}Hinweis:Um den Namen der HTML-Elemente und CSS-Klassen zu erhalten, die im Smart Content verwendet werden, klicken Sie mit der rechten Maustaste auf einen Smart-Content-Block und wählen Sie die Option „Element prüfen“ in der Dropdown-Liste aus (in der Dashboard-Vorschau oder bei einem der Smart-Content-Blöcke, die bereits auf Ihrer Website angezeigt werden), wenn Sie Google Chrome als Ihren Browser verwenden.
Wenn Sie keine Vorstellung davon haben, wie CSS funktioniert, lesen Sie diese Einführung in CSS.
Custom JS
Dieser Parameter funktioniert genauso wie der vorherige Parameter „Custom CSS“. Er wird am Ende des Elements <body></body> platziert und ausgeführt, nachdem das Standard-Javascript des Smart Content ausgeführt wurde.
Dieses Feld wird häufig verwendet, um einen Google Analytics Tracking-Code in einem Smart Content hinzuzufügen. Da dies Ihnen das Ausführen unerwünschter JS in der Domäne Recommendations.com ermöglicht, muss unser Team den in das Feld eingegebenen Code prüfen, bevor er in Smart Content aktiviert werden kann. Wenn Sie JS-Code schreiben und Ihre Konfiguration speichern, sieht das Feld wie folgt aus, mit einer Quickinfo „Validierung ausstehend“.
Sobald er von unserem Team validiert wurde, wird derselbe Parameter mit der Quickinfo ‚Gültig und aktiviert!‘ angezeigt:
Sollten bei diesem Validierungsvorgang Probleme auftreten, können Sie uns gerne über den Live-Chat oder per E-Mail kontaktieren.
Warnung: Das folgende „Custom JS“-Beispiel ist nur für fortgeschrittene Benutzer. Sie sollten es nur verwenden, wenn Sie genau wissen, was Sie tun.
Derselbe Parameter „Custom JS“ kann zum Bearbeiten von Inhalt im Smart Content verwendet werden.
Wenn Sie zum Beispiel absolut möchten, dass der Smart Content-Titel auf zwei Zeilen angezeigt wird, wobei jede Zeile eine andere Schriftart und Schriftgröße hat, ist dies nur mit „Custom CSS“ nicht leicht durchführbar. Sie müssen etwas wie Folgendes in Ihrem „Custom JS“ konfigurieren, um die einzelne Zeile in zwei aufzuteilen:
var t = document.querySelectorAll('.rec_title');
if (t.length && t[0].innerHTML.length) {
var ar = t[0].innerHTML.split(' ');
var i1;
if (ar.length < 4) {
i1 = 2;
} else {
i1 = 4;
}
var t1 = ar.slice(0,i1).join(' ');
var t2 = ar.slice(i1,ar.length).join(' ');
var parent = t[0].parentNode;
parent.innerHTML = '<div class="rec_title"><div class="rec_title_top">'
+ t1 +'</div><div class="rec_title_bottom">' + t2 + '</div></div>';
}Auf Basis dieser neuen HTML können Sie „Custom CSS“ für die neu erstellten Elemente hinzufügen :
#top_bar {
height: 80px;
}
.rec_title_top {
font-family: Economica, Verdana, Arial, sans-serif;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 3px;
height: 10px;
}
.rec_title_bottom {
font-family: CheddarJack, Verdana, Arial, sans-serif;
font-size: 34px;
text-transform: lowercase;
}
Verwandte Themen