Invito all’azione call-to-action
Il pannello Invito all'azione viene visualizzato al termine del video e mostra tutti i campioni interattivi associati a quel particolare video.
Il pannello è costituito da un’area di intestazione che mostra il titolo del video, un pulsante di riproduzione nell’angolo in alto a destra e campioni interattivi effettivi visualizzati come griglia scorrevole. Puoi disattivare il pannello utilizzando callToActionRecap attributo di configurazione.
Il pannello di invito all’azione occupa sempre l’intera area di visualizzazione disponibile.
Il seguente selettore di classe CSS controlla l’aspetto del colore di sfondo nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction
Proprietà CSS del colore di sfondo del pannello di invito all’azione css-properties-of-the-background-color-of-the-call-to-action-panel
Esempio example
Per impostare un pannello di invito all’azione con sfondo grigio scuro:
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto dell’intestazione nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7header
Proprietà CSS dell’intestazione del pannello di invito all’azione css-properties-of-the-call-to-action-panel-header
Esempio example-1
Per impostare un'intestazione alta 70 pixel, con uno sfondo grigio scuro e un bordo grigio leggermente più chiaro di due pixel lungo il fondo:
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto del titolo dell’intestazione nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
Proprietà CSS del titolo dell’intestazione nel pannello di invito all’azione: css-properties-of-the-header-title-in-the-call-to-action-panel
Esempio example-2
Per impostare un titolo video con un'altezza della linea di 70 pixel, una dimensione del carattere di 25 pixel, un colore bianco e un allineamento a sinistra:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
Il seguente selettore di classe CSS controlla l’aspetto del pulsante Chiudi nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7closebutton
Proprietà CSS del pulsante Chiudi nel pannello di invito all’azione: css-properties-of-the-close-button-in-the-call-to-action-panel
state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.Esempio example-3
Per impostare un pulsante di riproduzione di 28 x 28 pixel. Il pulsante deve essere posizionato a 20 pixel dal bordo superiore e da quello destro dell’intestazione. Inoltre, deve visualizzare un’immagine diversa per ciascuno dei quattro diversi stati dei pulsanti; prende il disegno dall’immagine di sprite del componente:
.s7interactivevideoviewer .s7calltoaction .s7closebutton {
top: 20px;
right: 20px;
background-size: 336px;
width: 28px;
height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
background-position: -0px -1232px;
}
Il seguente selettore di classe CSS controlla l’aspetto della visualizzazione della griglia delle miniature nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview
Proprietà CSS della visualizzazione griglia miniature nel pannello invito all’azione: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel
Esempio example-4
Per impostare un'area delle miniature con uno sfondo grigio scuro:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
Il seguente selettore di classe CSS controlla l’aspetto della cella miniatura nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
Proprietà CSS della cella miniatura nel pannello di invito all’azione: css-properties-of-the-thumbcell-in-the-call-to-action-panel
Esempio example-5
Per impostare la spaziatura orizzontale di 24 pixel e la spaziatura verticale di 18 pixel:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
Il seguente selettore di classe CSS controlla l’aspetto della miniatura nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumb
Proprietà CSS della miniatura nel pannello di invito all’azione: css-properties-of-the-thumbnail-in-the-call-to-action-panel
state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected"
corrisponde alla miniatura dell'immagine attualmente selezionata; state="default"
corrisponde al resto delle miniature; state="over"
al passaggio del mouse.Esempio example-6
Per impostare miniature di 94 x 100 pixel:
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
Il seguente selettore di classe CSS controlla l’aspetto dell’etichetta di miniatura nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7label
Proprietà CSS dell’etichetta di miniatura nel pannello di invito all’azione: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel
Esempio example-7
Per impostare le etichette che utilizzano un colore bianco, allineate al centro di 15 pixel e utilizzate un carattere Arial®:
.s7interactivevideoviewer .s7calltoaction .s7label {
text-align: center;
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
}
Se sono presenti più miniature di quelle che possono essere visualizzate verticalmente, le miniature eseguono il rendering di una barra di scorrimento verticale a destra. Per impostazione predefinita, il pannello di invito all’azione esegue il rendering di una piccola barra verticale senza pulsanti di scorrimento e miniatura. Tuttavia, è possibile personalizzare la barra modificando il CSS del visualizzatore.
Il seguente selettore di classe CSS controlla l’aspetto dell’area della barra di scorrimento nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar
Proprietà CSS dell’area della barra di scorrimento nel pannello di invito all’azione: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel
Esempio example-8
Per impostare una barra di scorrimento larga 22 pixel e priva di margini nella parte superiore, destra o inferiore dell'area delle miniature:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
La traccia della barra di scorrimento è l'area compresa tra i pulsanti della barra di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia.
Il seguente selettore di classe CSS controlla l’aspetto della traccia della barra di scorrimento nel pannello di invito all’azione:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
Proprietà CSS della barra del brano di scorrimento css-properties-of-the-scroll-track-bar
Esempio example-9
Per impostare una traccia della barra di scorrimento larga 22 pixel e di colore grigio:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente; tuttavia, l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto.
Il seguente selettore di classe CSS controlla l’aspetto dell’altezza del pollice e di altro tipo:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
Proprietà CSS dell’altezza del pollice nel pannello di invito all’azione: css-properties-of-the-thumb-height-in-the-call-to-action-panel
state
selettore di attributi, che può essere utilizzato per applicare skin diversi ai seguenti stati miniatura: "up"
, "down"
, "over"
, e "disabled"
.Esempio example-10
Per impostare una barra di scorrimento di 6 x 167 pixel con tre angoli arrotondati di pixel e un colore grigio:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
width:6px;
height:167px;
background-color:#666666;
background-image:none;
border-radius:3px 3px 3px 3px;
}
Il seguente selettore di classe CSS controlla l'aspetto dei pulsanti di scorrimento superiore e inferiore:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS superiore, sinistra, inferiore o destra; la logica di visualizzazione li posiziona automaticamente. Il pannello di invito all’azione nel visualizzatore video interattivo non utilizza questi pulsanti nella barra di scorrimento, pertanto le loro dimensioni sono impostate su 0 pixel nel CSS predefinito.
Proprietà CSS dei pulsanti di scorrimento superiore e inferiore nel pannello di invito all’azione: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel
state
selettore di attributi, che può essere utilizzato per applicare skin diversi ai seguenti stati miniatura: "up"
, "down"
, "over"
, e "disabled"
.Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente.
Esempio example-11
Disattivare i pulsanti di scorrimento impostandone le dimensioni su 0 e nasconderli:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}