2017-08-18 5 views
0

Je crée un e-mail personnalisé à l'aide de Foundation Framework. Je veux réaliser la mise en page comme indiqué dans la capture d'écran. Des conseils sur la façon de mettre en œuvre, en utilisant la Fondation (ou wether ce sera possible? Gardant à l'esprit qui est devrait fonctionner dans tous les grands mailclients)Foundation E-mail: Image sur 2 lignes

enter image description here

Merci à l'avance!

+0

Nous ne pouvons pas construire ici toute la solution. Essayez de travailler dessus et si vous êtes coincé dans votre code, alors nous pouvons vous aider, mais ne vous attendez pas à ce que les gens s'assoient et passent du temps à travailler à partir de zéro pour vous donner des solutions de construction prêtes. Partagez votre code si vous avez fait quelque chose et que vous rencontrez des problèmes. –

Répondre

1

Si vous êtes à la recherche d'une solution HTML alors ci-dessous est le code que vous pouvez utiliser.

Son rugueux mais donne une idée en utilisant votre visuel.

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td bgcolor="#17b0de" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:47px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
     <td width="55" height="190" bgcolor="#17b0de">&nbsp;</td> 
 
     <td bgcolor="#49267c" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; font-size:80px;color:#ffffff;">VISUAL</td> 
 
     <td width="55" bgcolor="#17b0de">&nbsp;</td> 
 
     </tr> 
 
    </table> 
 
     <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
      <td width="55" height="79" bgcolor="#d9ecf2">&nbsp;</td> 
 
      <td bgcolor="#49267c" style="height:10px;line-height:0px; font-size:0px;"></td> 
 
      <td width="55" bgcolor="#d9ecf2">&nbsp;</td> 
 
     </tr> 
 
    </table></td> 
 
    </tr> 
 
    <tr> 
 
    <td bgcolor="#d9ecf2" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:20px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 2</td> 
 
    </tr> 
 
</table>

Vive

0

C'est tout à fait possible mais pas super trivial. Vous pouvez construire quelque chose de similaire en utilisant une couleur d'arrière-plan sur une section ci-dessus, et la même couleur horizontalement où le visuel est.

<row> 
<row><img></row> 
<row> 

Exemple: https://codepen.io/rafibomb/pen/oeEMbO

enter image description here

enter image description here