Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Template Mailchimp
#1
Ciao Mattia,
qui di seguito il codice che ho creato per una mailing list di MailChimp.
Sono riuscito, pasticciando un pò, a renderla verosimile all'immagine che allego, anche perchè doveva farla di fretta, ma vorrei "pulirla" per le prossime volte.
questo il codice (che metto dentro ad un box di testo di Mailchimp per poterlo editare come fosse "Dreamweaver", anzichè fare un box html classico):
Codice:
<div>
<table style="background-color:#e1ded6">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="background-color:#e1ded6">
<tbody>
<tr>
<td style="text-align: justify;" valign="top">&nbsp;&nbsp;<img height="198" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/052af399-43f4-48df-a6f5-4cd3b117074e.jpg" style="border: 0px  ; width: 295px; height: 198px; float: left; margin: 0px;" width="295" /></td>
</tr>
</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: justify;" valign="top"><img height="197" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/7f963e12-e56d-4054-94c6-abf05364b70d.jpg" style="border: 0px  ; width: 295px; height: 197px; float: right; margin: 0px;" width="295" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div style="background-color: rgb(225, 222, 214); padding-left: 6px; width: 594px; column-count: 2; column-gap: 12px; text-align: justify;"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="font-size:14px; text-align:justify">Pensata per sviluppare il legame familiare,<br />
mettere il bambino al centro e permettergli<br />
di condividere la vita a tavola sin dalla nascita.<br />
<br />
<br />
<br />
<br />
Ergonomica e studiata per garantire una<br />
corretta postura. Le numerose possibilit&agrave; di<br />
regolazione del sedile e del poggiapiedi<br />
assicurano infatti il corretto sostegno alla<br />
schiena e ai piedi in base all'et&agrave;.</span></span></span></div>

<table style="background-color:#e1ded6">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="background-color:#e1ded6">
<tbody>
<tr>
<td style="text-align: justify;" valign="top">&nbsp;&nbsp;<img data-file-id="4693481" height="196" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/645e644e-cfc7-471f-a8f9-366d4cfc049a.jpg" style="border: 0px  ; width: 295px; height: 196px; float: left; margin: 0px;" width="295" /></td>
</tr>
</tbody>
</table>
</td>
<td style="text-align: left; padding-left: 10px; padding-right: 5px;" width="295"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="font-size:14px; text-align:justify">Innovativa e ideale per favorire sviluppo ed autonomia del bambino.<br />
<strong>Approvata dalla Fondazione Montessori quale espressione di un design funzionale all&rsquo;approccio pedagogico</strong> montessoriano, incentrato sulla scoperta e sulla sperimentazione infantili finalizzate all&rsquo; autoconsapevolezza.</span></span></span></td>
</tr>
</tbody>
</table>
</div>

<div style="background-color:#e1ded6">&nbsp;
<h2 class="null" style="background-color: rgb(240, 107, 51); text-align: center;"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#FFFFFF">SE VUOI SAPERNE DI PI&Ugrave; E SCOPRIRE TRIPP TRAPP PRENOTA ORA<br />
LA TUA SESSIONE DI PERSONAL SHOPPING LIVE<br />
CON IL RIVENDITORE DI ZONA.</span></span><br />
&nbsp;</h2>

<table style="background-color:#e1ded6">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="background-color:#e1ded6">
<tbody>
<tr>
<td style="text-align: left; padding-left: 6px;" width="395"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="font-size:14px; text-align:justify">Nome Rivenditore<br />
Scrivi a (numero Whatsapp),<br />
indica il tuo nome e cognome e nel corpo del testo scrivi &ldquo;Richiesta informazioni sul prodotto Stokke Tripp Trapp&rdquo;.<br />
Verrai ricontattato direttamente dal rivenditore per fissare la tua consulenza.</span></span></span><br />
&nbsp;</td>
</tr>
</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: justify;" valign="top"><img data-file-id="4694681" height="143" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/abe5cdbe-c354-4ab2-bcba-ccdfa2c80a1e.jpg" style="border: 0px  ; width: 190px; height: 143px; float: right; margin: 0px;" width="190" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div style="background-color:#e1ded6"><a href="http://www.stokke.com" target="_blank"><img align="center" data-file-id="4694709" height="74" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/b3ae434a-4602-41d8-bb5d-da3b715de0cd.jpg" style="border: 0px  ; width: 200px; height: 74px; margin: 0px; padding-left: 200px" width="200" /></a></div>

<div style="background-color: rgb(225, 222, 214); text-align: right; padding-right: 10px;"><span style="font-size:13px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><em>Grazie,<br />
Il team di Stokke</em></span></span></span></div>

<div style="background-color: rgb(225, 222, 214); padding-right: 10px; text-align: left;"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif; padding-left:10px"><span style="font-size:12px"><span style="color:#000000">Hai ricevuto questa mail&nbsp;perch&eacute;&nbsp;sei amico di Stokke!&nbsp;Altrimenti, clicca&nbsp;</span><a href="*|UNSUB|*" target="_blank"><span style="color:#000000">qui</span></a><span style="color:#000000">.</span></span></span><br />
<br />
&nbsp;</div>
</div>

Attendo tue

Grazie mille

Chand


Allegati Anteprime
   
Cita messaggio
#2
Non ho molta esperienza con Mailchimp, ma in generale per fare dei layout in HTML per le e-mail bisogna utilizzare le tabelle.

Si può iniziare creando una tabella per la struttura principale che sarà formata da una sola riga con una sola cella.
La tabella sarà allineata al centro, non avrà bordi, non avrà spazi all'interno delle celle e tra le celle, sarà larga 600 pixel (uno standard de facto), avrà lo sfondo grigio, il font che ho copiato dal tuo codice che sarà ereditato da tutto il contenuto sottostante e la grandezza del font di default.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>Contenuto della e-mail</td>
        </tr>
    </tbody>
</table>

All'interno della tabella sarà presente la prima tabella che rappresenta tutta la parte che sta al di sopra della barra arancione.
Questa sottotabella avrà tre righe e due colonne.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 1</td>
                            <td style="width:50%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Testo 1</td>
                            <td style="width:50%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Per fare la barra arancione si dovrà creare una tabella con una sola riga e con una sola cella.
Alla tabella si assegnerà lo sfondo arancione e il colore del testo bianco e alla cella si assegnerà l'allineamento al centro, la grandezza del testo più grande e il grassetto.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 1</td>
                            <td style="width:50%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Testo 1</td>
                            <td style="width:50%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:rgb(240, 107, 51);color:#FFF;">
                    <tbody>
                        <tr>
                            <td style="text-align:center;font-size:18px;font-weight:bold;">Testo</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Per la parte subito sotto alla barra arancione sarà una tabella formata da una riga e da due celle (questa volta la cella di sinistra sarà più grande di quella a destra.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 1</td>
                            <td style="width:50%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Testo 1</td>
                            <td style="width:50%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:rgb(240, 107, 51);color:#FFF;">
                    <tbody>
                        <tr>
                            <td style="text-align:center;font-size:18px;font-weight:bold;">Testo</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:80%;">Testo</td>
                            <td style="width:20%;">Immagine</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Poi ci andrà una nuova tabella con una sola riga e una sola cella per il bottone con il link.
La tabella sarà larga quanto la larghezza del bottone e la cella avrà un allineamento al centro.
Per il bottone, l'ancora sarà trasformata in un blocco, avrà dello spazio interno, un bordo, un testo più grande, in grassetto e in nero e non sarà sottolineato.
Per la seconda parte del link viene impostato il colore nero del testo e viene eliminata la sottolineatura.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 1</td>
                            <td style="width:50%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Testo 1</td>
                            <td style="width:50%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:rgb(240, 107, 51);color:#FFF;">
                    <tbody>
                        <tr>
                            <td style="text-align:center;font-size:18px;font-weight:bold;">Testo</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:80%;">Testo</td>
                            <td style="width:20%;">Immagine</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="200">
                    <tbody>
                        <tr>
                            <td style="text-align:center;">
                                <p><a href="https://www.matriz.it/" style="display:block;padding:20px;border:3px solid;font-size:18px;font-weight:bold;color:#000;text-decoration:none;">SCARICA QUI</a>
                                <a href="https://www.matriz.it/" style="color:#000;text-decoration:none;">i contenuti extra del webinar</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Per l'ultima parte dell'e-mail si dovrà aggiungere una nuova tabella formata da una riga e da una cella.
La cella sarà impostata per avere il testo allineato a destra e in corsivo.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 1</td>
                            <td style="width:50%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Testo 1</td>
                            <td style="width:50%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:rgb(240, 107, 51);color:#FFF;">
                    <tbody>
                        <tr>
                            <td style="text-align:center;font-size:18px;font-weight:bold;">Testo</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:80%;">Testo</td>
                            <td style="width:20%;">Immagine</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="200">
                    <tbody>
                        <tr>
                            <td style="text-align:center;">
                                <p><a href="https://www.matriz.it/" style="display:block;padding:20px;border:3px solid;font-size:18px;font-weight:bold;color:#000;text-decoration:none;">SCARICA QUI</a>
                                <a href="https://www.matriz.it/" style="color:#000;text-decoration:none;">i contenuti extra del webinar</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="text-align:right;font-style:italic;">Testo</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
Mattia!
Cita messaggio
#3
Grazi mille Mattia per la dritta!
Ho solo un problema, mi hanno aggiornato l'immagine come questa in allegato, per cui le immagini adesso sono separate da un bg bianco.
Cosa mi consigli di fare?

Edit. Per il momento ho risolto così (ma è sicuramente sbagliato):
Codice:
<div>
<table width="602">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: justify;" valign="top">&nbsp;&nbsp;<img data-file-id="4699529" height="193" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/b3a08b8e-0059-4e70-b7f3-3d5ef27e3791.jpg" style="border: 1px solid #e1ded6; width: 296px; height: 193px; float: left; margin: 0px;" width="296" /></td>
</tr>
</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: justify;" valign="top"><img data-file-id="4699485" height="196" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/88ca115c-713e-4b7d-bc14-151d6856212a.jpg" style="border: 1px solid #e1ded6; width: 287px; height: 196px; float: right; margin: 0px;" width="287" /></td>
</tr>
</tbody>
</table>

<div style="background-color: rgb(225, 222, 214); padding-left: 10px; width: 590px; column-count: 2; column-gap: 29px; column-rule: 15px solid white; text-align: justify;"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="border:1px solid #e1ded6; font-size:14px; text-align:justify">Pensata per sviluppare il legame familiare,<br />
mettere il bambino al centro e permettergli<br />
di condividere la vita a tavola sin<br />
dalla nascita.<br />
<br />
<br />
<br />
<br />
Ergonomica e studiata per garantire una<br />
corretta postura. Le numerose possibilit&agrave;<br />
di regolazione del sedile e del poggiapiedi<br />
assicurano infatti il corretto sostegno alla<br />
schiena e ai piedi in base all'et&agrave;.</span></span></span></div>
</td>
</tr>
</tbody>
</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

<table style="background-color:#e1ded6">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="background-color:#e1ded6">
<tbody>
<tr>
<td style="text-align: justify;" valign="top"><img data-file-id="4699369" height="196" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/a7175202-5cef-4205-928f-f753b188bf8d.jpg" style="border: 0px initial ; width: 295px; height: 196px; float: left; margin: 0px;" width="295" /></td>
</tr>
</tbody>
</table>
</td>
<td style="text-align: left; padding-left: 10px; padding-right: 5px;" width="295"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="font-size:14px; text-align:justify">Innovativa e ideale per favorire sviluppo ed autonomia del bambino.<br />
<strong>Approvata dalla Fondazione Montessori quale espressione di un design funzionale all&rsquo;approccio pedagogico</strong> montessoriano, incentrato sulla scoperta e sulla sperimentazione infantili finalizzate all&rsquo; autoconsapevolezza.</span></span></span></td>
</tr>
</tbody>
</table>
</div>

<div style="background-color:#fff">&nbsp;
<h2 class="null" style="background-color: rgb(240, 107, 51); text-align: center;"><br />
<span style="font-size:18px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#FFFFFF">SE VUOI SAPERNE DI PI&Ugrave; E SCOPRIRE TRIPP TRAPP PRENOTA ORA<br />
LA TUA SESSIONE DI PERSONAL SHOPPING LIVE<br />
CON IL RIVENDITORE DI ZONA.</span></span></span><br />
&nbsp;</h2>

<table style="background-color:#e1ded6">
<tbody>
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="background-color:#e1ded6">
<tbody>
<tr>
<td style="text-align: left; padding-left: 10px;" width="396"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><span style="font-size:14px; text-align:justify">Nome Rivenditore<br />
Scrivi a (numero Whatsapp),<br />
indica il tuo nome e cognome e nel corpo del testo scrivi &ldquo;Richiesta informazioni sul prodotto Stokke Tripp Trapp&rdquo;.<br />
Verrai ricontattato direttamente dal rivenditore per fissare<br />
la tua consulenza.</span></span></span><br />
&nbsp;</td>
</tr>
</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: justify;" valign="top">&nbsp;<img data-file-id="4694681" height="142" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/abe5cdbe-c354-4ab2-bcba-ccdfa2c80a1e.jpg" style="border: 0px  ; width: 189px; height: 142px; float: right; margin: 0px -2px 0px 0px;" width="189" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div style="background-color:#e1ded6"><a href="https://drive.google.com/file/d/12TRGO9i86IEFbO_fxk-uCBZeUOaMP8UK/view?usp=sharing" target="_blank"><img align="center" data-file-id="4694709" height="74" src="https://mcusercontent.com/639daf84bdc2128aa5dd719a6/images/b3ae434a-4602-41d8-bb5d-da3b715de0cd.jpg" style="border: 0px  ; width: 200px; height: 74px; margin: 0px; padding-left: 200px" width="200" /></a></div>

<div style="background-color: rgb(225, 222, 214); text-align: right; padding-right: 10px;"><span style="font-size:13px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#000000"><em>Grazie,<br />
Il team di Stokke</em></span></span></span></div>

<div style="background-color: rgb(225, 222, 214); padding-right: 10px; text-align: left;"><br />
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif; padding-left:10px"><span style="font-size:12px"><span style="color:#000000">Hai ricevuto questa mail&nbsp;perch&eacute;&nbsp;sei amico di Stokke!&nbsp;Altrimenti, clicca&nbsp;</span><a href="*|UNSUB|*" target="_blank"><span style="color:#000000">qui</span></a><span style="color:#000000">.</span></span></span><br />
<br />
&nbsp;</div>
</div>
Ho continuato sul mio vecchio codice solo perchè per "separare i blocchi" col bg bianco, ho trovato una soluzione per il div con le colonne e ho pensato di fare prima così, ma sicuramente mi darai una soluzione migliore.


Allegati Anteprime
   
Cita messaggio
#4
Per aggiungere quel bordo bianco, puoi creare delle celle con lo sfondo bianco.

Ho preso il codice della prima sottotabella (quella con tre righe e due colonne) e l'ho diviso in due sottotabelle.
La prima tabella avrà tre colonne (le due esterne con i contenuti e quella centrale per lo sfondo bianco) e tre righe (le prime due per i contenuti e la terza per il separatore bianco).
La seconda tabella manterrà le due colonne, ma avrà una riga in più per il separatore bianco.
Codice:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color:#e1ded6;font-family:helvetica neue,helvetica,arial,verdana,sans-serif;font-size:14px;">
    <tbody>
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:49%;">Immagine 1</td>
                            <td style="width:2%;background-color:#FFF;">&nbsp;</td>
                            <td style="width:49%;">Immagine 2</td>
                        </tr>
                        <tr>
                            <td style="width:49%;">Testo 1</td>
                            <td style="width:2%;background-color:#FFF;">&nbsp;</td>
                            <td style="width:49%;">Testo 2</td>
                        </tr>
                        <tr>
                            <td colspan="3" style="background-color:#FFF;">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:50%;">Immagine 3</td>
                            <td style="width:50%;">Testo 3</td>
                        </tr>
                        <tr>
                            <td colspan="2" style="background-color:#FFF;">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:rgb(240, 107, 51);color:#FFF;">
                    <tbody>
                        <tr>
                            <td style="text-align:center;font-size:18px;font-weight:bold;">Testo</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="width:80%;">Testo</td>
                            <td style="width:20%;">Immagine</td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="200">
                    <tbody>
                        <tr>
                            <td style="text-align:center;">
                                <p><a href="https://www.matriz.it/" style="display:block;padding:20px;border:3px solid;font-size:18px;font-weight:bold;color:#000;text-decoration:none;">SCARICA QUI</a>
                                <a href="https://www.matriz.it/" style="color:#000;text-decoration:none;">i contenuti extra del webinar</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td style="text-align:right;font-style:italic;">Testo</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
Mattia!
Cita messaggio
#5
Perfetto, ha funzionato perfettamente!
Grazie mille Smile

Chand
Cita messaggio


Vai al forum:


Utenti che stanno guardando questa discussione: 2 Ospite(i)