Ejemplos de correos electrónicos AMP

En este artículo, veremos ejemplos de código para crear una plantilla de correo electrónico con diferentes elementos interactivos: preguntas frecuentes, control deslizante de tarjetas de productos y reseñas.

Ten en cuenta que deberás confirmar tu dirección de remitente en Gmail antes de poder enviar un correo electrónico AMP. Lee más: Cómo Enviar Correos AMP.

Correos electrónicos con el elemento AMP "FAQ"

Una lista desplegable de preguntas y respuestas.

<!doctype html>
<!-- This tells everyone that this is an AMPHTML email. `<html amp4email>` works too. -->
<html amp4email>
<!-- ## Head -->
<!-- -->
<head>
 <!-- The charset definition must be the first child of the `<head>` tag. -->
 <meta charset="utf-8">
 <!-- The AMP runtime.-->
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

 <style amp4email-boilerplate>body {
 visibility: hidden
 }</style>
<style amp-custom>
 body {
 background-color: #ffffff;
 font-size: 18px;
 color: #333333;
 font-family: 'Segoe UI', Segoe, 'Open Sans', sans-serif;
 width: 100%;
 height: 100%;
 Margin: 0;
 padding: 0
 }
.main-body {
 max-width: 600px;
 margin: 0 auto;
 }
.main {
 padding: 0 30px;
 }
.header {
 padding: 30px 0 25px 0;
 border-bottom: solid 1px #D6E3E3;
 margin-bottom: 40px;
 }
.header .logo {
 display: block;
 margin: 0;
 padding: 0;
 border: 0 none;
 }
.logo, .headers {
 font-size: 22px;
 line-height: 40px;
 margin: 0 0 10px;
 color: #666a6c;
 font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
 text-transform: uppercase;
 display: block;
 padding: 30px 0;
 font-weight: lighter;
 }
p {
 font-family: 'Segoe UI', Segoe, 'Open Sans', sans-serif;
 font-weight: normal;
 font-size: 16px;
 line-height: 24px;
 color: #333333;
 padding: 0;
 margin: 0 0 10px 0;
 }
.text-strong {
 font-weight: bold;
 }
a {
 color: #009fc1;
 text-decoration: underline;
 }
.accordion-header {
 padding: 20px;
 color: #333;
 font-size: 18px;
 font-weight: normal;
 background-color: #fafafa;
 border: 1px solid #ddd;
 }
.accordion-info {
 padding: 20px;
 border: 1px solid #ccc;
 text-align: left;
 color: #666;
 line-height: 1.4em;
 font-size: 15px;
 }
.center {
 text-align: center;
 padding-bottom: 20px
 }
.footer {
 padding: 30px 0 25px 0;
 border-top: solid 1px #D6E3E3;
 margin-top: 40px;
 }
.location {
 border: 1px solid #ddd;
 }
.space {
 margin-bottom: 30px;
 }

 </style>
</head>
<body>
<div class="main-body">
 <div class="main">
 <header class="center header">
 <div class="logo"><span>Your company name </span></div>
 </header>
 <section>
 <p class="text-strong"> Hello</p>
 <p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you
 AMP
 version of emails.</p>
 <p class="text-strong">
 This is important for us. Check out how we implement AMP elements below.
 </p>
 <div class="space"></div>
<p>Thank you for your interest in our hotel. If you have any questions, we will be pleased to answer
 them.</p>
<p> Find the answers to frequently asked questions below.</p>
<h2 class="headers center">FAQ </h2>
 <amp-accordion class="sample" expand-single-section>
 <section>
 <h4 class="accordion-header">Room types</h4>
 <p class="accordion-info">Superior rooms — 27 square metres<br>
 Studio rooms — 36 square metres<br>
 Suites and Panthouses — 55-112 square metres<br>
 </p>
 </section>
 <section>
 <h4 class="accordion-header">Accessibility features</h4>
 <p class="accordion-info">We understand that accessibility is important to our guests. That's why
 our hotel has rooms that include
 amenities such as braille lifts, roll-in shower, wheelchair available
 on request.
 </p>
 </section>
 <section>
 <h4 class="accordion-header">What to see nearby</h4>
 <p class="accordion-info">Situated opposite Big Ben and the Houses of Parliament, our hotel places
 guests at the heart of central London.
 The London Eye, the London Aquarium and the city’s finest theatres, restaurants and bars are
 just steps away.</p>
 </section>
 <section>
 <h4 class="accordion-header">Contact details</h4>
 <p class="accordion-info">ADDRESS:<br>
 365 Westminster Bridge Road<br>
 London SE1 7UT, United Kingdom<br>
RESERVATIONS:<br>
 +44 (0) 333 499 6114 (Hotel Direct)<br></p>
 </section>
 </amp-accordion>
<div class="bg-gray"><h2 class="headers center">Our location:</h2></div>
<div>
 <amp-img class="location"
 src="https://highthemes.com/wp-content/uploads/2017/12/google-map.png"
 width="540" height="380"></amp-img>
 </div>
 <div class="bg-gray"></div>
 </section>
<footer class="footer">
 <p>Best regards, {{sender_name}}</p>
 <p>{{email}}</p>
 <p>{{sender_phone}}</p>
 </footer>
 </div>
</div>
</body>
</html>

Correos electrónicos con el elemento AMP "Deslizador"

Desplázate por las imágenes utilizando las flechas de desplazamiento.

<!doctype html>
<html amp4email>
<head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

 <style amp4email-boilerplate>body {
 visibility: hidden
 }</style>

 <style amp-custom>
 body {
 background-color: #ffffff;
 font-size: 16px;
 color: #333333;
 font-family: 'Segoe UI', 'Avenir Next', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 width: 100%;
 height: 100%;
 Margin: 0;
 padding: 0
 }
.main-body {
 max-width: 600px;
 margin: 0 auto;
 }
.main {
 padding: 0 30px;
 }
.header {
 padding: 30px 0 25px 0;
 border-bottom: solid 1px #D6E3E3;
 margin-bottom: 40px;
 }
p {
 font-family: 'Segoe UI', 'Avenir Next', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 font-weight: normal;
 font-size: 16px;
 line-height: 24px;
 color: #333333;
 padding: 0;
 margin: 0 0 10px 0;
 }
.text-strong {
 font-weight: bold;
 }
a {
 color: #009fc1;
 text-decoration: underline;
 }
.images {
 background: #f1f2f4;
 padding: 30px 20px;
 }
.btn {
 color: #fff;
 background: #009fc1;
 text-align: center;
 padding: 10px 35px;
 border: none;
 border-radius: 3px;
 line-height: 28px;
 text-decoration: none;
 font-size: 22px;
 }
.center {
 text-align: center;
 padding-bottom: 20px
 }
.footer {
 padding: 30px 0 25px 0;
 border-top: solid 1px #D6E3E3;
 margin-top: 40px;
 }
.amp-carousel-button:hover {
 cursor: pointer;
 }
 </style>
</head>
<body>
<div class="main-body">
 <div class="main">
 <header class="header">
 <span>{{webversion}}</span>
 </header>
 <section>
 <p class="text-strong"> Hello</p>
 <p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you AMP
 version of emails.</p>
 <p class="text-strong">
 This is important for us. Check out how we implement AMP elements below.
 </p>
<h2> Best trip photos of summer 2019</h2>
 <div class="images">
 <amp-carousel width="800" height="900" layout="responsive" type="slides">
 <amp-img
 src="https://images.pexels.com/photos/1974856/pexels-photo-1974856.jpeg?auto=compress&amp;cs=tinysrgb&dpr=1&w=500"
 width="500" height="715" alt="a sample image"></amp-img>
 <amp-img
 src="https://images.pexels.com/photos/2422265/pexels-photo-2422265.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 width="500" height="715" alt="a sample image"></amp-img>
 <amp-img
 src="https://images.pexels.com/photos/2402799/pexels-photo-2402799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 width="500" height="715" alt="a sample image"></amp-img>
 <amp-img
 src="https://images.pexels.com/photos/2422487/pexels-photo-2422487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 width="500" height="715" alt="a sample image"></amp-img>
 <amp-img
 src="https://images.pexels.com/photos/1001780/pexels-photo-1001780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 width="500" height="715" alt="another sample image"></amp-img>
 </amp-carousel>
 </div>
 <div class="center "><a href="https://sendpulse.com" class="btn">Join us right now</a></div>
 </section>
 <footer class="footer">
 <p>Best regards, {{sender_name}}</p>
 <p>{{email}}</p>
 <p>{{sender_phone}}</p>
 </footer>
 </div>
</div>
</body>
</html>

Correos electrónicos con el elemento AMP "Deslizador de grupo de productos"

Desplázate por varias tarjetas de productos y amplía las imágenes.

<!doctype html>
<html ⚡4email>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

    <style amp4email-boilerplate>body {
        visibility: hidden
    }</style>


    <style amp-custom>
        body {
            background: #ffffff;
            font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
            font-size: 16px;
            color: #333;
            line-height: 21px;
        }

        .bg-gray {
            background: #fff;
            padding: 20px 0;
            clear: both;
        }

        .wrapper {
            background: #fff;
            width: 600px;
            margin: 0 auto;
        }

        .preheader {
            color: #000;
            padding: 20px;
            background: #0b0b0b;
        }

        .menulist li {
            float: left;
            padding: 0px 10px;
            list-style: none;
            font-size: 18px;
        }

        .center {
            text-align: center;
            padding-bottom: 20px
        }

        input[type="text"],
        input[type="email"] {
            padding: 7px;
            border-radius: 3px;
            border: 1px solid #ddd;
            margin-left: 10px;
            margin-bottom: 10px;
        }

        textarea {
            width: 450px;
            height: 120px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .wrap p {
            padding: 20px;
        }

        .preheader a {
            color: #fff
        }

        .logo, .headers {
            font-size: 22px;
            line-height: 40px;
            margin: 0 0 10px;
            color: #666a6c;
            font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
            text-transform: uppercase;
            display: block;
            padding: 30px 0;
            font-weight: bold;
            font-style: italic;
            font-weight: lighter;
        }

        .menulist li {
            float: left;
            padding: 16px;
            font-size: 16px;
        }

        .describe {
            font-size: 14px;
            color: #808080;
        }

        .price {
            font-size: 18px;
            color: #ef291f;
        }

        .strike {
            font-size: 18px;
            text-decoration: line-through;
            margin-right: 20px;
        }

        .content-cell p, .content-cell h3, .content-cell h4 {

            margin: 0 0 9px 0;

        }

        input {
            border: 1px solid #ccc;
            padding: 7px 3px;
            margin-bottom: 10px;

        }

        label {
            padding: 0 15px;
        }

        .social img {
            margin: 0 10px;
            width: 32px;
            height: 32px;
        }

        .dress_caption {
            padding: 0 20px 20px;
        }

        amp-image-lightbox {
            background: rgba(0, 0, 0, 0.75);
        }

        amp-image-lightbox > div > div {
            top: 50%;
        }

        amp-image-lightbox .describe {
            color: #f2f2f2
        }

        .lightbox-item amp-img:hover {
            cursor: pointer;
        }

        .text-strong {
            font-weight: bold;
        }
        .amp-carousel-button:hover {
            cursor: pointer;
        }

    </style>
</head>

<body>

<div class="wrapper">
    <header class="header preheader center">
        <span>{{webversion}}</span>
    </header>

    <div class="center">
        <span class="logo">Your logo company </span>
        <hr>
    </div>

    <div class="emailbody">

        <p class="text-strong"> Hello</p>
        <p>This is a test email %company-name%. Please add this address to your whitelist so we can send you AMP version
            of emails.</p>
        <p class="text-strong">
            This is important for us. Check out how we implement AMP elements below.
        </p>

        <div class="bg-gray center"><h1 class="headers"> Weeks Sale </h1>
            <p>Shop new arrivals every week with new trends and styles for work or weekends.</p></div>

        <div>
            <amp-carousel height="600" layout="fixed-height" type="carousel">
                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/709802/pexels-photo-709802.jpeg?auto=format%2Ccompress&amp;cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span
                                class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>
                    </div>
                </div>

                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/1384219/pexels-photo-1384219.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span
                                class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>
                    </div>
                </div>

                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/914472/pexels-photo-914472.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>
                    </div>
                </div>

                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/1390600/pexels-photo-1390600.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>
                    </div>
                </div>

                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/1620827/pexels-photo-1620827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>

                    </div>
                </div>

                <div class="lightbox-item">
                    <amp-img
                             src="https://images.pexels.com/photos/982585/pexels-photo-982585.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"
                             width="300" height="450"></amp-img>
                    <div class="dress_caption">
                        <h3><span><strong>Red Pleated Wrap</strong></span></h3>
                        <p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
                        </p>
                        <p><span class="strike">$25</span> <span class="price">$22.85</span></p>
                    </div>
                </div>
            </amp-carousel>
        </div>


        <div class="bg-gray"><h2 class="headers center">Our location:</h2></div>

        <div>
            <amp-img
                    src="https://highthemes.com/wp-content/uploads/2017/12/google-map.png"
                    width="600" height="450"></amp-img>
        </div>
        <div class="bg-gray"></div>

        <footer class="footer">
            <p>Best regards, {{sender_name}}</p>
            <p>{{email}}</p>
            <p>{{sender_phone}}</p>
        </footer>


    </div>


</div>

</body>
</html>

Correos electrónicos con el elemento AMP "Retroalimentación Dinámica"

Ve la reseñas que se muestran en el correo electrónico.

<!doctype html>
<!-- This tells everyone that this is an AMPHTML email. `<html amp4email>` works too. -->
<html amp4email>
<!-- ## Head -->
<!-- -->
<head>
 <!-- The charset definition must be the first child of the `<head>` tag. -->
 <meta charset="utf-8">
 <!-- The AMP runtime.-->
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

 <style amp4email-boilerplate>body {
 visibility: hidden
 }</style>
<style amp-custom>
 body {
 background-color: #eee;
 font-size: 16px;
 font-weight: lighter;
 color: #666666;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 width: 100%;
 height: 100%;
 Margin: 0;
 padding: 0
}
.bg-white {
 background: #fff;
 padding: 40px 20px 0;
}
.main-body {
 max-width: 600px;
 margin: 0 auto;
 }
.main {
 padding: 0 30px;
 }
.header {
 padding: 30px 0 25px 0;
 border-bottom: solid 1px #D6E3E3;
 margin-bottom: 40px;
 }
p {
 font-family: 'Helvetica Neue', Arial, sans-serif;
 font-weight: lighter;
 font-size: 16px;
 line-height: 24px;
 color: #666;
 padding: 0;
 margin: 0 0 10px 0;
 }
.text-strong {
 font-weight: bold;
 }
a {
 color: #ac7dff;
 text-decoration: underline;
 }
.btn {
 background: #ac7dff;
 color: #fff;
 text-align: center;
 padding: 7px 20px;
 border: none;
 line-height: 22px;
 font-size: 16px;
 font-weight: lighter;
 }
.btn:hover {
 cursor: pointer;
 }
.center {
 text-align: center;
 padding-bottom: 20px
 }
.testimonials {
 padding: 30px;
 }
.dash {
 color: #999999;
 }
.circle-img {
 border-radius: 50px
 }
.footer {
 padding: 30px 0 25px 0;
 border-top: solid 1px #D6E3E3;
 margin-top: 40px;
 }

 </style>
</head>
<body>
<div class="main-body">
 <div class="main">
 <header class="header">
 <span>{{webversion}}</span>
 </header>
 <section>
 <p class="text-strong"> Hello</p>
 <p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you AMP
 version of emails.</p>
 <p class="text-strong">
 This is important for us. Check out how we implement AMP elements below.
 </p>
<section class="bg-white">
 <p> You viewed this room earlier. Check out the reviews about it on our website. </p>
<div>
 <amp-img
 src="https://images.pexels.com/photos/1571468/pexels-photo-1571468.jpeg?auto=compress&amp;cs=tinysrgb&dpr=1&w=500"
 width="500" height="340"></amp-img>
 </div>
 </section>
 <section class="testimonials bg-white">
 <br>
 <div [hidden]="testimonial1" class="center">
 <amp-img
 aria-describedby=""
 src="https://img.stat-pulse.com/9dae6d62c816560a842268bde2cd317d/files/emailservice/userfiles/e87c2cc59bdd62b30b9245c0a00c5c32366067/20747/userpic.jpg"
 width="74" height="74"></amp-img>
 <p><span class="dash">&mdash;</span> <strong>Nemanja Sisakovic</strong> <span
 class="dash">&mdash;</span></p>
 <p class="center">
 Stayed here with my family, beautiful view. The room was nice a bit dated but perfect for what we
 needed. Thanks for a lovely stay!
 </p>
 <button class="btn" on="tap:AMP.setState({ testimonial1: true, testimonial2: false, testimonial3: true })">
 Another review
 </button>
 </div>
<div hidden [hidden]="testimonial2" class="center">
 <amp-img class="circle-img"
 aria-describedby=""
 src="https://images.pexels.com/photos/936229/pexels-photo-936229.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200"
 width="100" height="100"></amp-img>
<p><span class="dash">&mdash;</span> <strong>Espeka Zambia</strong> <span
 class="dash">&mdash;</span></p>
 <p class="center">The balcony overlooking the street and with a glimpse of the Tower Bridge, although small, really made the room.
 </p>
 <button class="btn" on="tap:AMP.setState({ testimonial1: true, testimonial2: true, testimonial3: false })">
 Another review
 </button>
 </div>
<div hidden [hidden]="testimonial3" class="center">
 <amp-img class="circle-img"
 aria-describedby=""
 src="https://i.otzovik.com/2016/08/avatar/882187.jpg"
 width="100" height="100"></amp-img>
<p><span class="dash">&mdash;</span> <strong>Lucy</strong> <span class="dash">&mdash;</span></p>
 <p class="center">Our room had a fabulous view of Tower Bridge.
 The room was spotlessly clean & had everything expected (except pen & pad by phone). <br>
 Breakfast was amazing. We opted to have it in our room. Will happily stay again.
 </p>
 <button class="btn" on="tap:AMP.setState({ testimonial1: false, testimonial2: true, testimonial3: true })">
 Another review
 </button>
 </div>
 </section>
</section>

 <footer class="footer">
 <p>Best regards, {{sender_name}}</p>
 <p>{{email}}</p>
 <p>{{sender_phone}}</p>
 </footer>
 </div>
</div>
</body>
</html>
    Califica este artículo sobre "Ejemplos de correos electrónicos AMP"

    Opinión de los usuarios: 5 / 5 (4)

    Anterior

    Cómo Enviar Correos AMP

    Siguiente

    Planificador

    Popular en nuestro blog

    Pruebe SendPulse hoy mismo gratis