Utilizzo del componente oggetto del widget promozionale
Aggiungi un componente a qualsiasi sezione di pagina nell'XML, a livello di trapunta di litio o nelle aree di contenuto personalizzato della pagina che vengono visualizzate nella trapunta di litio. I parametri devono essere inclusi. Le istanze senza parametri non verranno visualizzate.
<@component id = "jmp.PromoWidgetItem" parameters />
Etichetta di attivazione promozionale
Le promozioni sono considerate inattive e non verranno visualizzate nelle rotazioni fino all'etichetta dell'articolo promo_active è assegnato ad esso.
Parametri a livello di istanza dei componenti
Queste configurazioni vengono effettuate a livello XML. I parametri sono additivi, quindi etichette + tag + promoid includerebbe tutti promo che corrispondono qualunque dei termini inclusi tranne quelli che hai escluso utilizzando il escludere parametro.
Elenchi di più di un valore di parametro, ovvero etichette = "label1, label2" vengono ruotati in modo casuale una volta per ogni aggiornamento della pagina, non da Javascript.
Parametro
|
Descrizione ed esempio
|
|---|
promoid
|
Visualizza l'annuncio con l'ID al litio immesso qui, ad esempio "134". Può essere un elenco separato da virgole di uno o più annunci da ruotare in modo casuale per ogni visualizzazione di pagina (all'aggiornamento).
<@component id = "jmp.PromoWidgetItem" promoid = "134" />
<@component id = "jmp.PromoWidgetItem" promoid = "134, 718, 401" />
|
etichette
|
Visualizza in modo casuale gli annunci utilizzando le etichette elencate qui, separate da virgole, una o più.
<@component id = "jmp.PromoWidgetItem" labels = "Godzilla" />
<@component id = "jmp.PromoWidgetItem" labels = "Godzilla, Superman" />
|
tag
|
Visualizza in modo casuale gli annunci utilizzando i tag elencati qui, separati da virgole, uno o più.
<@component id = "jmp.PromoWidgetItem" tags = "Goats" />
<@component id = "jmp.PromoWidgetItem" tags = "Goats, Birds, Cows" />
|
inizio
|
Visualizza gli annunci selezionati a partire dalla data inserita qui. Deve essere nel formato AAAAMMGG. Se non è configurato, l'annuncio verrà visualizzato immediatamente se indicato da altre configurazioni.
<@component id = "jmp.PromoWidgetItem" start = "20180214" />
|
fine
|
L'annuncio non verrà visualizzato dopo la data inserita qui. Deve essere nel formato AAAAMMGG. Se non è configurato, non esiste una data di fine.
<@component id = "jmp.PromoWidgetItem" end = "20180315" />
|
escludere
|
Un elenco di ID Lithium da escludere dall'array. Ad esempio, potresti volere tutte le promozioni con l'etichetta "umorismo" ma escludere ID "123" e "456".
<@component id = "jmp.PromoWidgetItem" labels = "humor" exclude = "123,456" />
|
Configurazioni a livello di articolo promozionale
Queste configurazioni vengono effettuate a livello di annuncio promozionale, nel corpo del testo (e nell'immagine di copertina, se applicabile). Separato in sezioni, Contenuto, Pulsante, Colori, Immagine in linea, Immagine di sfondo.
IMPORTANTE: Quando incolli, utilizza "incolla in testo normale" o "incolla e abbina stile" o simili a seconda della piattaforma. Se sovrascrivi accidentalmente l'area di input, premi semplicemente UNDO. Il contenuto che non si trova nelle aree di input appropriate non verrà visualizzato.
Soddisfare
Dovrebbe essere di solo testo. Nessun HTML o altro stile in questi.
| Nome |
Descrizione |
Predefinito |
|---|
Titolo
|
Primo, testo più grande |
"testo"
|
Sottotitolo
|
Secondo, testo più piccolo |
"testo"
|
Messaggio
|
Corpo del testo, il più piccolo |
"testo"
|
Azione / pulsante
I colori devono essere impostati utilizzando solo valori di colore esadecici, ad esempio # cc6600 o la parola chiave CSS trasparente .
| Nome |
Descrizione |
Predefinito |
|---|
Link
|
URL di destinazione a cui andranno gli utenti quando fanno clic sull'annuncio |
"http://www.jmp.com"
|
Testo del pulsante
|
Testo del pulsante |
"Per saperne di più"
|
Bottone bg color
|
Colore principale del bottone |
# cc6600 (JMP arancione)
|
Colore del testo del pulsante
|
Colore del testo del pulsante |
#ffffff (bianca)
|
Colori
I colori devono essere impostati utilizzando solo valori di colore esadecici, ad esempio # cc6600 o la parola chiave CSS trasparente .
| Nome |
Descrizione |
Predefinito |
|---|
Colore del testo
|
Colore per titolo, sottotitolo e testo del messaggio |
#ffffff (bianca)
|
Colore di sfondo
|
Sfondo di colore promozionale. (Le immagini di sfondo avranno l'opacità impostata al 30% per impostazione predefinita per mostrare il colore attraverso di esse). |
# cc6600 (JMP arancione)
|
Colore del bordo
|
Bordo dell'annuncio per differenziarlo dallo sfondo dell'annuncio e dallo sfondo della pagina. |
#dddddd (grigio medio)
|
Immagine di sfondo
Imposta l'immagine di sfondo utilizzando la foto di copertina di Lithium nella barra laterale destra (esempio mostrato a destra). La dimensione dell'immagine consigliata è 1900px x 500px per poter essere visualizzata in modo prevedibile su tutte le dimensioni dello schermo.
L'immagine selezionata verrà automaticamente posizionata sullo sfondo e la sua opacità sarà impostata al 30% per impostazione predefinita.
Se desideri modificare la modalità di visualizzazione dell'immagine di sfondo, il file CSS dell'immagine opacità e posizione le proprietà sono configurabili:
| Nome |
Descrizione |
Predefinito |
|---|
Opacità dell'immagine
|
0-100. 0 è completamente trasparente e mostrerà solo il colore di sfondo, 100 è completamente opaco e mostrerà solo l'immagine di sfondo. |
30
|
Posizione dell'immagine
|
Valori di posizione dello sfondo CSS, ad esempio "sinistra", "centro", "destra" e "in alto", "centro", "in basso". Utilizzane due qualsiasi, ad esempio "left top". Deve sempre essere l'asse x seguito dall'asse y, ad esempio "in alto a sinistra" |
centro centro
|
Immagine in linea
Non consigliato, ma in alcune circostanze potrebbe esserci una richiesta, come un colpo alla testa a sinistra o simili.
| Nome |
Descrizione |
Predefinito |
|---|
Immagine
|
Un'immagine da mettere prima o dopo tutto il testo. Mantenerlo semplice, se non del tutto. Segui le indicazioni durante la creazione di un annuncio. Posiziona il cursore nel campo della foto, quindi utilizza il pulsante Foto nel pannello di testo. |
nullo
|
Posizione dell'immagine
|
L'immagine dovrebbe essere prima del testo (verticalmente) o dopo ea sinistra oa destra del testo? I valori sono prima, dopo, sinistra, destra, due alla volta. |
prima di sinistra
|
