docla nostra Guida HTML
download 
Reclamo Transcript
la nostra Guida HTML
Guida all'utilizzo Creazione template con linguaggio html per Editor Drag&drop Documento: documento.pdf Data ult. rev.: 27/11/2015 Mobyt S.p.A. Via Aldighieri, 10 44121 Ferrara – Italy Tel. +39 0532 207296 - Fax +39 0532 242952 E-mail: [email protected] Web: www.mobyt.it P.IVA/C.F. 01648790382 Mobyt® - messaging services www.mobyt.it 2 Guida templates html Di seguito il codice HTML necessario per creare dei template compatibili con l’editor email Drag&Drop di Mobyt. Contenitore dei template Questo il codice necessario per creare la struttura base di un template vuoto, al’interno del quale poter inserire strutture ed elementi di contenuto come descritto in seguito. <!DOCTYPE html> <html> <head> <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible"> <title>Empty Template</title> </head> <body> <!-- BODY --> <table class="body"> <tr> <td align="center" class="center" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="600" class="outlook" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table align="center" style="width: 100%"> <tr> <td class="rc" valign="top"></td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> </table><!-- BODY --> </body> </html> www.mobyt.it 3 Guida templates html 1 Strutture Queste strutture devono essere inserite all’interno della <table class="body"> e più precisamente nella cella contraddistinta dalla classe “rc”: <td class="rc" valign="top"></td> 1 COLONNA 100% <!-- ROW --> <table align="center" class="row column center"> <tr> <td class="sc" valign="top"> <!-- 100% COLUMN --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="600"><![endif]--> <div class="twelve col"> <table align="center" class="center" width="100%"> <tr> <td class="cell" valign="top"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- 100% COLUMN --> </td> </tr> </table><!-- ROW --> www.mobyt.it 4 Guida templates html 2 COLONNE 50% / 50% <!-- ROW --> <table align="center" class="row center two_columns"> <tr> <td class="sc" valign="top"> <!-- TWO COLUMNS 50% - 50% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="300"><![endif]--> <div class="six col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="300" cellpadding="0"><![endif]--> <div class="six col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- TWO COLUMNS 50% - 50% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 5 Guida templates html 2 COLONNE 75% / 25% <!-- ROW --> <table align="center" class="row center two_columns7525"> <tr> <td class="sc" valign="top"> <!-- TWO COLUMNS 75% - 25% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="450"><![endif]--> <div class="nine col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- TWO COLUMNS 75% - 25% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 6 Guida templates html 2 COLONNE 25% / 75% <!-- ROW --> <table align="center" class="row center two_columns2575"> <tr> <td class="sc" valign="top"> <!-- TWO COLUMNS 25% - 75% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="150"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="450" cellpadding="0"><![endif]--> <div class="nine col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- TWO COLUMNS 25% - 75% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 7 Guida templates html 2 COLONNE 25% / 75% <!-- ROW --> <table align="center" class="row center two_columns2575"> <tr> <td class="sc" valign="top"> <!-- TWO COLUMNS 25% - 75% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="150"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="450" cellpadding="0"><![endif]--> <div class="nine col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- TWO COLUMNS 25% - 75% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 8 Guida templates html 3 COLONNE 33% / 33% / 33% <!-- ROW --> <table align="center" class="row center three_columns"> <tr> <td class="sc" valign="top"> <!-- THREE COLUMNS 33% - 33% - 33% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="200"><![endif]--> <div class="four col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="200" cellpadding="0"><![endif]--> <div class="four col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="200" cellpadding="0"><![endif]--> <div class="four col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- THREE COLUMNS 33% - 33% - 33% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 9 Guida templates html 3 COLONNE 25% / 25% / 50% <!-- ROW --> <table align="center" class="three_columns252550 row center"> <tr> <td class="sc" valign="top"> <!-- THREE COLUMNS 25% - 25% - 50% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="150"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="300" cellpadding="0"><![endif]--> <div class="six col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- THREE COLUMNS 25% - 25% - 50% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 10 Guida templates html 3 COLONNE 50% / 25% / 25% <!-- ROW --> <table align="center" class="row center three_columns502525"> <tr> <td class="sc" valign="top"> <!-- THREE COLUMNS 50% - 25% - 25% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="300"><![endif]--> <div class="six col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- THREE COLUMNS 50% - 25% - 25% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 11 Guida templates html 4 COLONNE 25% / 25% / 25% / 25% <!-- ROW --> <table align="center" class="four_columns row center"> <tr> <td class="sc" valign="top"> <!-- FOUR COLUMNS 25% - 25% - 25% -25% --> <table align="center" class="container" width="600"> <tr> <td align="center" class="center f0" valign="top"> <!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" width="150"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td><td width="150" cellpadding="0"><![endif]--> <div class="three col"> <table align="center" class="center" width="100%"> <tr> <td class="cell"></td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </td> </tr> </table><!-- FOUR COLUMNS 25% - 25% - 25% -25% --> </td> </tr> </table><!-- ROW --> www.mobyt.it 12 Guida templates html 2 Elementi di contenuto Gli elementi di contenuto vanno inseriti all’interno della struttura nella posizione (<TD>) contraddistinta dalla class “cell”: <td class="cell"></td> TESTO <!-- TEXT --> <table class="ec text" data-linktype="web" data-padding-collapsed="true"> <tbody> <tr> <td class="tdec center"> <table class="e ebg"> <tbody> <tr> <td class="eb ep" style="padding: 5px ! important;"> <p class="eta efs eff etc elh content elk" style="color: rgb(34, 34, 34);"> $$TEXT$$<br> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table><!-- TEXT --> www.mobyt.it 13 Guida templates html IMMAGINE <!-- IMAGE --> <table class="ec image empty"> <tbody> <tr> <td class="tdec center"> <table class="e eam ebg" style="max-width: 600px;width:100%"> <tbody> <tr> <td class="ep ebr iea center f0" style="lineheight:0"> <a> <img class="ebr" src="" style="width: 100%;"> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table><!-- IMAGE --> www.mobyt.it 14 Guida templates html BOTTONE <!-- BUTTON --> <table class="ec button" data-border-collapsed="true" data-br-collapsed="true" data-linktype="web"> <tbody> <tr> <td class="tdec ea center"> <table bgcolor="#FF2700" class="e ew eam btnebg ebg ebr" style="background-color: rgb(255, 39, 0) ! important; width: 50% ! important; min-width: 50% ! important; border-radius: 5px ! important;"> <tbody> <tr> <td class=" eb ep eta ebr center" style="border: 0px none ! important; border-radius: 5px ! important;"> <a class="efs eff etc elh" href="#" style="color: rgb(255, 255, 255) ! important; line-height: 20px ! important;fontweight:normal !important"> $$BUTTON$$ </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table><!-- BUTTON --> www.mobyt.it 15 Guida templates html DISISCRIZIONE <!-- UNSUBSCRIBE --> <table class="ec unsubscribe"> <tr> <td class="tdec ea center"> <table class="e ew eam ebg"> <tr> <td class=" eb ep center"> <a class="efs eta eff etc elh" href="[_UNSUBSCRIBE_LINK_]">$$UNSUBSCRIBE$$</a> </td> </tr> </table> </td> </tr> </table><!-- UNSUBSCRIBE --> DIVISORIO <!-- DIVIDER --> <table class="ec divider" data-linktype="web"> <tr> <td class="tdec ea center"> <table class="e ew eam ebg"> <tr> <td class=" eb ep center" style="padding-top:5px;paddingbottom:5px"> <hr> </td> </tr> </table> </td> </tr> </table><!-- DIVIDER --> www.mobyt.it 16 Guida templates html SOCIAL <!-- SOCIAL --> <table class="ec social" data-theme="tipo1" style="width: 100%;"> <tbody> <tr> <td style="text-align: center;display:block"> <p style="text-align:center;width:100%;line-height:0"> <a data-social="facebook" href="https://www.facebook.com/" style="padding: 5px;" title="Facebook"> <img height="32" src="$$ASSETS$$social/tipo1/facebook.png" style="width: 32px; display: inline" width="32"> </a> <a data-social="twitter" href="https://www.twitter.com/" style="padding: 5px;" title="Twitter"> <img height="32" src="$$ASSETS$ $social/tipo1/twitter.png" style="width: 32px; display: inline" width="32"> </a> <a data-social="google" href="https://plus.google.com/" style="padding: 5px;" title="Google+"> <img height="32" src="$$ASSETS$ $social/tipo1/googleplus.png" style="width: 32px; display: inline" width="32"> </a> </p> </td> </tr> </tbody> </table><!-- SOCIAL --> www.mobyt.it 17 Guida templates html
