Come inserire lo sfondo in html

Tramite: O2O 14/07/2018
Difficoltà: media
17
Introduzione

Per migliorare ulteriormente la progettazione delle tue campagne di marketing, puoi aggiungere un'immagine di sfondo ad un codice del tuo modello in Template Builder di MailChimp.
I modelli HTML personalizzati sono una funzionalità avanzata e sono consigliati agli utenti che hanno familiarità con la codifica personalizzata. Contatta il tuo sviluppatore o contatta un esperto MailChimp se hai bisogno di assistenza. In questo articolo, imparerai come inserire un'immagine di sfondo al tuo modello HTML personalizzato.

27
Occorrente
  • Connessione Internet
  • PC
  • HTML
  • MailChimp
  • Imgur
37

Impostare la risoluzione

Immagini di grandi dimensioni possono far sì che le campagne vengano visualizzate in modo errato nella posta in arrivo dei tuoi destinatari. Per risultati ottimali, impostare la risoluzione su 920 x 1080 px o meno e comprimere l'immagine. Ospita le tue immagini su un server pubblico o utilizza un servizio gratuito come Imgur o Flickr e utilizza un percorso file assoluto che punta direttamente alla posizione del file nel codice. Si noti che se si ospitano le proprie immagini su un server privato, i destinatari senza accesso al server non saranno in grado di vedere l'immagine.
MailChimp può anche ospitare le immagini per te in Content Manager se sono inferiori a 10 MB.

47

Aggiungere un'immagine

Puoi anche aggiungere un'immagine di sfondo a una campagna normale. Questo processo utilizza CSS, HTML e VML per visualizzare un'immagine di sfondo e un colore. Incolla il codice di esempio nel modello e cambia l'immagine del segnaposto e il colore di sfondo secondo le tue specifiche. Per aggiungere un'immagine di sfondo a un modello HTML personalizzato, attieniti alla seguente procedura. Passare alla pagina Modelli. Fai clic su Crea modello. Fai clic sulla scheda Codice personale e seleziona Incolla nel codice. Nell'editor di codice, inserisci il codice opportuno subito dopo il tag di apertura per aggiungere l'immagine di sfondo e il colore del segnaposto.

Continua la lettura
57

Inserire il codice

Inserisci il codice seguente appena prima del tag di chiusura:
. Sostituisci o modifica il codice della campagna rimanente con il tuo codice HTML personalizzato.
Quando hai finito di modificare il codice, fai clic su Salva. Fai clic su Salva ed esci .Nel modal di popup Salva modello, assegna un nome al modello. Fai clic su Salva. È possibile accedere al nuovo modello nel Generatore di campagna o sulla pagina Modelli. L'immagine di sfondo non verrà visualizzata se le immagini sono disattivate nella Posta in arrivo del destinatario. Per questo motivo, assicurati di scegliere un colore di sfondo che visualizzi correttamente il testo se l'immagine non viene caricata. Quando modifichi il tuo CSS, assicurati di non avere altre proprietà di background nel codice, perché possono sovrascrivere l'immagine di sfondo. Quando si lavora nell'Editor dei modelli, i tag di unione non verranno visualizzati nelle anteprime o nelle e-mail di prova.

67
Guarda il video
77
Consigli
Non dimenticare mai:
  • Nell'editor di codice, inserisci il codice opportuno subito dopo il tag di apertura per aggiungere l'immagine di sfondo e il colore del segnaposto.
Alcuni link che potrebbero esserti utili:
Potrebbe interessarti anche
Naviga con la tastiera

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come mappare un'immagine con l'HTML

In Informatica, grazie ad un linguaggio di formattazione di dominio pubblico, è possibile gestire la struttura, la visualizzazione grafica, di un contenuto web. In questa guida vi illustreremo come "mappare", nello specifico, un'immagine con il linguaggio...
Programmazione

Come convertire un testo Word in HTML

Convertire un testo da file formato word a HTML, senza possedere una minima e rudimentale preparazione di base sulla scrittura informatica, sarebbe stato difficoltoso anche solamente 5 o 6 anni fa. Oggi, fortunatamente, è diventato molto più facile...
Programmazione

Come iniziare a programmare in HTML 5

Prima di iniziare è bene precisare che con la parola "programmare" riferita al linguaggio HTML 5 è usata in modo improprio. Infatti l'HTML serve a programmare poco e nulla, per le programmazioni e più utile usare i PHP, Javascript, asp ecc.Fatta questa...
Programmazione

Come creare app in HTML5

Un'applicazione Web è alimentata da un browser tramite Internet e viene generalmente creata utilizzando HTML, CSS e JavaScript e può essere servita tramite un browser desktop o mobile. Un'applicazione web può essere costruita per imitare la funzionalità...
Programmazione

Come inserire un banner su Facebook

Quando il social network Facebook fu lanciato, nel 2004, l’intenzione di Mark Zuckerberg e degli altri sviluppatori era essenzialmente quella di mettere in contatto amici e conoscenti, vicini e lontani, al fine di accorciare le distanze tra le persone....
Programmazione

Inserire elementi in una lista in C++

Molti programmatori Java o utenti principianti, trovano il linguaggio C++ uno tra i più ostici nel suo utilizzo. Java, noto per la sua semplicità, offre dei costrutti utili per gestire e manipolare una struttura dinamica quali una Lista di oggetti....
Programmazione

Come realizzare un menu a discesa orizzontale con il CSS

Nella seguente pratica e rapida guida che vi esplicherò nei passaggi successivi, vi spiegherò specificatamente come si deve realizzare un menu a discesa orizzontale, soltanto utilizzando il foglio di stile (CSS) per il vostro bellissimo sito internet....
Programmazione

Come installare Bootstrap 4

Bootstrap è il framework di sviluppo front-end più popolare al mondo e la sua ascesa è in costante aumento. Nel corso degli anni si è tuttavia evoluto, ed oggi la versione 4 rappresenta il top di questa funzionale applicazione web. Inoltre va aggiunto...