how to insert html code without losing styles in an email

Navigation
0
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body style="font-family:'Open Sans', Helvetica; display:block; color:#666666;">

    <div style="max-width: 600px; min-width: 434px; height:auto; padding-top:20px; padding-bottom:20px; padding-right:30px; padding-left:30px; border:none; box-shadow: 0 1px 10px rgba(0,0,0,.35); ">

        <article style="background-color:#ffffff; border:none;">
            <img src="https://www.bidmail.com/kbimages/285/logo.png" style="margin-bottom:20px; display:block; margin: auto; padding-bottom:20px;">
            <div style="font-size:13px; color:#666666;">
                <div style="padding-bottom:40px; text-align:center;">
                    <span style="font-size:28px; font-weight:600; color:#024D6D; word-wrap:break-word; margin-bottom:20px; text-align:center;"> Profile Change Verification</span>
                </div>
                <div style="padding-bottom:20px;">
                    <span style="line-height:1.54;"> Hi contact first name,</span>
                </div>
                <div style="padding-bottom:10px;">
                    <span> Changes to your profile are pending. Click the link below to apply your changes.</span>
                </div>
                <button type="button" style="width: 200px; height:40px; font-size: 16px; color:#FFFFFF; background-color:#0099FF; border: 1px solid #0066FF; margin-bottom:25px;">Apply Profile Changes</button>
                <div>
                    <span> If you did not make profile changes, you can ignore this email and changes will be descarded.</span>
                </div>
            </div>
            <div style="color:#FFF140; height:10px;">

            </div>
        </article>
    </div>


</body>
</html>
    
asked by joselar 14.06.2018 в 15:50
source

1 answer

0

I personally use images, I make the template in image and the parts that are dynamic I put them in plain text, then to link buttons use tag map to map the image, I use this web to make it easier link , send this code to yourself by mail and you tell me how it goes 

<table width="750" align="center" height="400" style="background-image: url(https://preview.ibb.co/eNi7QJ/fondo.png);
    background-size: 90%;
    height: 395px;
    background-position: center;
    background-repeat: no-repeat;">
    <tbody>
    	<tr>
    		<td>
    			<table width="600" align="center">
    				<tbody>
    					<tr>
    						<td>
    							<img src="https://image.ibb.co/eMxqed/imagen1.jpg" usemap="#image-map">
    							<map name="image-map">
    								<area target="_blank" alt="" title="" href="https://www.google.es/" coords="178,5,438,44" shape="rect">
    							</map>
    						</td>
    					</tr>
    					<tr>
    						<td>
    							<span style="margin-left: 10px;
    							color: #666;
    							font-family: sans-serif;
    							font-size: 13px;">Hi contact first name,</span>
    						</td>
    					</tr>
    					<tr>
    						<td height="10"></td>
    					</tr>
    					<tr>
    						<td>
    							<img src="https://image.ibb.co/jOQyXy/imagen2.jpg" usemap="#image-map2">
    							<map name="image-map2">
    								<area target="_blank" alt="" title="" href="https://www.wikipedia.org/" coords="9,32,208,72" shape="rect">
    							</map>
    						</td>
    					</tr>
    				</tbody>
    			</table>
    		</td>
    	</tr>
    </tbody>
    </table>
    
answered by 14.06.2018 в 16:28
Multidomain and multi-language in Wordpress How to add custom properties to the JWT Sprint Java payload