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

background-color
Colore di sfondo del pannello di invito all’azione.

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

background-color
Colore di sfondo dell’intestazione.
height
Altezza dell'intestazione.
border-bottom
Bordo inferiore dell’intestazione.

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

color
Colore del testo all'interno del banner.
font-size
Dimensione font.
line-height
Altezza riga.
font-family
Famiglia di caratteri.
text-align
Allineamento del testo nel banner.
padding-left
Margine sinistro.
padding-right
Spaziatura interna a destra per consentire lo spazio per il pulsante Ripeti.

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

top
Posizione dalla parte superiore dell’intestazione, inclusa la spaziatura.
destra
Posizione a destra dell'intestazione, inclusa la spaziatura.
width
Larghezza pulsante.
height
Altezza pulsante.
background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

Posizione all'interno dello sprite del disegno, se vengono utilizzati sprite CSS.

Consulta Spunti CSS.

NOTE
Questo pulsante supporta 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

background-color
Colore di sfondo dell'area delle miniature.

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

margine

Dimensioni del margine orizzontale e verticale intorno a ciascuna miniatura.

La spaziatura effettiva delle miniature orizzontali è uguale alla somma dei margini sinistro e destro impostati per .s7thumbcell . La stessa regola si applica anche alla spaziatura verticale.

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

width
Larghezza della miniatura.
height
Altezza della miniatura.
bordo
Bordo della miniatura.
NOTE
La miniatura supporta 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

color
Colore del testo dell’etichetta.
text-align
Allineamento orizzontale dell’etichetta.
font-family
Nome font.
font-size
Famiglia di caratteri.

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

width
Larghezza della barra di scorrimento.
top
Scostamento della barra di scorrimento verticale dalla parte superiore dell'area delle miniature.
bottom
Scostamento della barra di scorrimento verticale dalla parte inferiore dell'area delle miniature.
destra
Scostamento della barra di scorrimento orizzontale dal bordo destro dell'area delle miniature.

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

width
Larghezza della barra del brano di scorrimento.
background-color
Colore di sfondo della barra dei brani.

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

width
Larghezza del pollice.
height
Altezza del pollice.
riempimento superiore
Spaziatura verticale tra la parte superiore del brano.
padding-bottom
Spaziatura verticale tra la parte inferiore del brano.
border-radius
Raggio del bordo.
background-color
Colore del pollice.
background-image
Immagine visualizzata per un determinato stato del pollice.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

NOTE
Il miniatura supporta 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

width
Larghezza del pulsante.
height
Altezza pulsante.
background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

NOTE
Questi pulsanti supportano 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8