Configurazione annunci nativi
Creazione di una annuncio nativo la zona è semplice ma estremamente personalizzabile. È possibile utilizzare processi leggermente diversi per configurare una zona di annunci nativi a seconda delle proprie esigenze:
Scenario A: vuoi semplicemente configurare una zona pubblicitaria, scegliere il rapporto d'aspetto delle immagini della zona di annunci nativi e poi impostare sul tuo sito la dimensione della zona pubblicitaria corrispondente.
Scenario B: vuoi configurare la zona pubblicitaria in modo che corrisponda a una dimensione o a un rapporto personalizzato dell'immagine, in modo che la zona pubblicitaria abbia lo stesso aspetto del tuo sito e si integri perfettamente.
Scenario C: hai una zona sul tuo sito di una dimensione specifica e vuoi creare una zona pubblicitaria che si adatti e abbia un bell'aspetto.
Qualunque scenario tu scelga, la prima cosa da fare è creare una zona di annunci nativi.
Creazione di una zona di annunci nativi
Quando sei connesso come editore, fai clic su Siti e zone, Nuova zona, ed espandi la Nativo sezione, seleziona il formato Annuncio nativo Widget di raccomandazione e fai clic su Avanti.
Compila i dettagli della zona e fai clic su Avanti.
In questo scenario, imposti il rapporto d'aspetto delle immagini nel Pannello di amministrazione e non è necessario impostare la dimensione totale della zona pubblicitaria. Quando si utilizza il Layout rapido, la zona pubblicitaria che crei si adatterà automaticamente alle dimensioni del contenitore in cui la inserisci.
Passo 3
Una volta scelto il rapporto d'aspetto, usa la casella di controllo per scegliere se desideri mostrare il testo o meno, quindi decidi dove visualizzarlo.
Questo testo consiste in un Titolo e una Descrizione. Puoi attivarli e disattivarli singolarmente nelle sezioni Titolo e Descrizione se lo desideri.
Controlla l'anteprima sulla destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.
Passo 5
Controlla l'anteprima sia per Desktop e Mobile sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa Punto di interruzione mobile di Opzioni avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non responsivo. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop.
Quando sei soddisfatto dell'anteprima, fai clic su Crea.
In questo scenario, vuoi poter modificare la dimensione dell'immagine e la spaziatura dell'annuncio per adattarle al tuo sito. Lo faresti se vuoi davvero che gli annunci nativi sembrino parte del contenuto editoriale del tuo sito.
Passo 2
Nel Impostazioni immagine menu a discesa, seleziona Dimensione personalizzata e imposta la larghezza e l'altezza delle immagini in modo che corrispondano al tuo sito. Se il sito contiene un meta tag ed è responsivo, quando il sito viene visualizzato anche le immagini si adatteranno man mano che la dimensione dello schermo diminuisce. Le informazioni su Dimensione del widget e Dimensione immagine verranno visualizzate nell'angolo in alto a destra sopra l'anteprima.
Passo 3
Una volta impostata la dimensione dell'immagine, scegli se desideri mostrare il testo o meno usando la casella di controllo Testo e scegli dove visualizzarlo.
Controlla l'anteprima sulla destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.
Passo 6
Controlla l'anteprima sia per Desktop e Mobile sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa Punto di interruzione mobile di Opzioni avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non responsivo. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop.
Quando sei soddisfatto dell'anteprima, fai clic su Crea.
In questo scenario, vuoi poter impostare la dimensione della zona pubblicitaria in modo che corrisponda alle esigenze del tuo sito e modificare le impostazioni per assicurarti che gli annunci vengano visualizzati correttamente.
Passo 5
Controlla l'anteprima sia per Desktop e Mobile sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa Punto di interruzione mobile di Opzioni avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non responsivo. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop.
Quando sei soddisfatto dell'anteprima, fai clic su Crea.
Selezione di Non responsivo nel punto di interruzione mobile
Quando il Punto di interruzione mobile è impostato su Non responsivo in Opzioni avanzate, sullo schermo apparirà la finestra modale seguente.
Facendo clic su CONTINUA nella finestra modale verrà mostrato il layout desktop per gli annunci su tutti i dispositivi, inclusi mobile e tablet.
Il layout mobile non sarà più modificabile dall'utente quando è selezionato Non responsivo.
Le impostazioni dell'immagine vengono aggiornate alla dimensione personalizzata predefinita (larghezza - 200px e altezza - 200px) se non salvate in precedenza.
Uso del CSS personalizzato con gli annunci nativi
Nel CSS personalizzato sezione, puoi aggiungere CSS personalizzato per assicurarti che la zona pubblicitaria venga visualizzata correttamente sul tuo sito. Le classi CSS più importanti sono fornite come punto di partenza. Scopri di più sul CSS qui.
Classi CSS per gli annunci nativi
All'inizio nella casella sono fornite cinque classi CSS, e puoi incollare altri stili come preferisci. Queste cinque classi CSS definiscono i seguenti elementi più importanti dell'annuncio nativo:
.msg-native-widget-outer-container
Definisce l'intero contenitore del widget.
.msg-native-widget-item
Definisce i contenitori dei singoli elementi.
.msg-native-widget-item-image
Definisce l'immagine.
.msg-native-widget-item-title
Definisce il testo del titolo.
.msg-native-widget-item-text
Definisce il testo della descrizione
Classi CSS aggiuntive
Puoi anche definire lo stile dell'annuncio nativo usando queste classi CSS aggiuntive:
.msg-native-widget
Racchiude l'intero widget.
.msg-native-widget-header
Racchiude gli elementi dell'intestazione.
.msg-native-widget-outer-container
Racchiude tutti gli annunci.
.msg-native-widget-item-container
Racchiude il riquadro dell'annuncio.
.msg-native-widget-item-image-wrapper
Racchiude l'immagine nel riquadro dell'annuncio.
.msg-native-widget-item-image-ratio
Imposta il rapporto d'aspetto dell'immagine dell'annuncio.
.msg-native-widget-item-content
Racchiude tutto il testo del riquadro dell'annuncio.
.msg-native-widget-item-content-box
Racchiude il titolo, la descrizione e il brand del contenitore dell'annuncio.
.msg-native-widget-item-brand
Definisce lo stile del brand dell'annuncio.
Esempi
I seguenti esempi mostrano come gli editori possono adattare gli stili CSS nella configurazione della zona di annunci nativi in base alle proprie esigenze.
Ultimo aggiornamento
È stato utile?