Utilisation du composant d'élément de widget promotionnel
Ajoutez un composant à n'importe quelle section de page dans le XML, soit au niveau de Lithium Quilt, soit dans les zones de contenu personnalisé de la page qui s'affichent dans votre Lithium Quilt. Les paramètres doivent être inclus. Les instances sans aucun paramètre ne s'afficheront pas.
<@component id = "jmp.PromoWidgetItem" paramètres />
Étiquette d'activation de la promotion
Les promotions sont considérées comme inactives et n'apparaîtront pas dans les rotations jusqu'à ce que l'étiquette de l'article promo_active lui est assigné.
Paramètres au niveau de l'instance de composant
Ces configurations sont effectuées au niveau XML. Les paramètres sont additifs, donc Étiquettes + Mots clés + promoïde inclurait tout des promotions qui correspondent tout des termes inclus sauf ceux que vous avez exclus en utilisant le exclure paramètre.
Listes de plus d'une valeur de paramètre, c'est-à-dire labels = "label1, label2" sont tournés au hasard une fois pour chaque actualisation de la page, pas par Javascript.
Paramètre
|
Description et exemple
|
|---|
promoïde
|
Affiche l'annonce avec l'ID de lithium entré ici, c'est-à-dire "134". Il peut s'agir d'une liste séparée par des virgules d'une ou plusieurs annonces à faire pivoter de manière aléatoire pour chaque page vue (lors de l'actualisation).
<@component id = "jmp.PromoWidgetItem" promoid = "134" />
<@component id = "jmp.PromoWidgetItem" promoid = "134, 718, 401" />
|
Étiquettes
|
Affiche les annonces de manière aléatoire à l'aide des libellés répertoriés ici, séparés par des virgules, un ou plusieurs.
<@component id = "jmp.PromoWidgetItem" labels = "Godzilla" />
<@component id = "jmp.PromoWidgetItem" labels = "Godzilla, Superman" />
|
Mots clés
|
Affiche les annonces de manière aléatoire à l'aide des balises répertoriées ici, séparées par des virgules, une ou plusieurs.
<@component id = "jmp.PromoWidgetItem" tags = "Chèvres" />
<@component id = "jmp.PromoWidgetItem" tags = "Chèvres, oiseaux, vaches" />
|
début
|
Affiche les annonces sélectionnées à partir de la date saisie ici. Doit être au format AAAAMMJJ. Si cela n'est pas configuré, l'annonce sera immédiatement diffusée si elle est indiquée par d'autres configurations.
<@component id = "jmp.PromoWidgetItem" start = "20180214" />
|
fin
|
L'annonce ne s'affichera pas après la date saisie ici. Doit être au format AAAAMMJJ. Si ce n'est pas configuré, il n'y a pas de date de fin.
<@component id = "jmp.PromoWidgetItem" end = "20180315" />
|
exclure
|
Une liste d'identifiants de lithium à exclure de la baie. Par exemple, vous pouvez souhaiter toutes les promotions dont le libellé "humour" est exclu des identifiants "123" et "456".
<@component id = "jmp.PromoWidgetItem" labels = "humour" exclude = "123,456" />
|
Configurations au niveau des articles promotionnels
Ces configurations sont effectuées au niveau de l'annonce promotionnelle, dans le corps du texte (et l'image de couverture, le cas échéant). Séparé en sections, contenu, bouton, couleurs, image en ligne, image de fond.
IMPORTANT: Lors du collage, veuillez utiliser "coller en texte brut" ou "coller et faire correspondre le style" ou similaire en fonction de votre plate-forme. Si vous écrasez accidentellement la zone de saisie, appuyez simplement sur UNDO. Le contenu qui ne se trouve pas dans les zones de saisie appropriées ne sera pas rendu.
Contenu
Doit être du texte uniquement. Aucun HTML ou autre style dans ces derniers.
| Nom |
La description |
Défaut |
|---|
Gros titre
|
Premier texte le plus grand |
"texte"
|
Sous-titre
|
Deuxième texte plus petit |
"texte"
|
Message
|
Corps du texte, le plus petit |
"texte"
|
Action / Bouton
Les couleurs doivent être définies en utilisant uniquement des valeurs de couleur hexadéciques, c'est-à-dire # cc6600 ou le mot-clé CSS transparent .
| Nom |
La description |
Défaut |
|---|
Lien
|
URL cible vers laquelle les utilisateurs accèdent lorsqu'ils cliquent sur l'annonce |
"http://www.jmp.com"
|
Texte du bouton
|
Texte du bouton |
"Apprendre encore plus"
|
Bouton bg couleur
|
Couleur principale du bouton |
# cc6600 (JMP orange)
|
Couleur du texte du bouton
|
Couleur du texte du bouton |
#ffffff (blanc)
|
Couleurs
Les couleurs doivent être définies en utilisant uniquement des valeurs de couleur hexadéciques, c'est-à-dire # cc6600 ou le mot-clé CSS transparent .
| Nom |
La description |
Défaut |
|---|
Couleur du texte
|
Couleur du titre, du sous-titre et du texte du message |
#ffffff (blanc)
|
Couleur de l'arrière plan
|
Fond de couleur promo. (Les images d'arrière-plan auront une opacité de 30% par défaut pour afficher la couleur à travers elles). |
# cc6600 (JMP orange)
|
Couleur de la bordure
|
Bordure de l'annonce pour différencier l'arrière-plan de l'annonce et l'arrière-plan de la page. |
#dddddd (gris moyen)
|
Image de fond
Définissez l'image d'arrière-plan à l'aide de la photo de couverture de Lithium dans la barre latérale droite (exemple illustré à droite). La taille d'image recommandée est de 1900 px x 500 px afin de pouvoir afficher de manière prévisible à toutes les tailles d'écran.
L'image sélectionnée sera automatiquement placée en arrière-plan et son opacité sera réglée à 30% par défaut.
Si vous souhaitez modifier l'affichage de l'image d'arrière-plan, le css de l'image opacité et position les propriétés sont configurables:
| Nom |
La description |
Défaut |
|---|
Opacité de l'image
|
0-100. 0 est entièrement transparent et n'affichera que la couleur d'arrière-plan, 100 est entièrement opaque et n'affichera que l'image d'arrière-plan. |
30
|
Position de l'image
|
Valeurs de position d'arrière-plan CSS, c'est-à-dire «gauche», «centre», «droite» et «haut», «centre», «bas». Utilisez n'importe quel deux, par exemple, "en haut à gauche". Doit toujours être l'axe des x suivi de l'axe des y, c'est-à-dire "en haut à gauche" |
centre centre
|
Image en ligne
Non recommandé, mais il peut y avoir un appel pour cela dans certaines circonstances, comme un tir à la tête à gauche ou autre.
| Nom |
La description |
Défaut |
|---|
Image
|
Une image à mettre avant ou après tout le texte. Restez simple, voire pas du tout. Suivez les instructions lors de la création d'une annonce. Placez le curseur dans le champ photo, puis utilisez le bouton Photos dans le panneau de texte. |
nul
|
Position de l'image
|
L'image doit-elle être avant le texte (verticalement) ou après, et à gauche ou à droite du texte? Les valeurs sont avant, après, gauche, droite, deux à la fois. |
avant de partir
|
