Curso de Google Ads e Adsense - #12 Página de Destino II

01/07/2022

Nesta aula vamos criar a parte visual, o template da página de destino do anúncio do Google.

Template Página de Destino

É muito importante ter uma página de destino visualmente bem feita, afinal uma boa estética pode trazer melhores conversões para o seu negócio.

index.php

Na index vamos implementar os elementos de marcação, tais como textos, imagens e formulários:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Curso de Google Planilhas - Suporte Online</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="content">
        <header>
            <img src="assets/img/suporte-google-planilhas-topo.jpg" alt="Banner Superior Google Planilhas">
        </header>

        <main>
            <div class="texto-introducao">
                A Webdesign em Foco conta com suporte online de Google Planilhas para te assessora na construção de soluções inteligentes para o seu negócio.
                <br>
                Contate agora mesmo um profissional online.
            </div>

            <div class="redes-sociais">
                <a href="https://www.youtube.com/webdesignemfocobrasil" target="_blank"><img src="https://www.webdesignemfoco.com/img/buttons/button-youtube.png" alt="Acesse nosso Youtube"></a>
                <a href="https://www.facebook.com/webdesignemfoco" target="_blank"><img src="https://www.webdesignemfoco.com/img/buttons/button-facebook.png" alt="Acesse nosso Facebook"></a>
                <a href="https://www.instagram.com/webdesignemfococom" target="_blank"><img src="https://www.webdesignemfoco.com/img/buttons/button-instagram.png" alt="Acesse nosso Instagram"></a>
                <a href="https://api.whatsapp.com/send?phone=5537999925360&text=Gostaria de saber como funciona o Suporte Premium?" target="_blank"><img src="https://www.webdesignemfoco.com/img/buttons/button-whatsapp.png" alt="Acesse nosso Whatsapp"></a>
            </div>

            <div class="formulario">
                <form name="formSuporte" id="formSuporte" method="post" action="controllers/EmailController.php">
                    <input type="text" name="nome" id="nome" placeholder="Nome:">
                    <input type="email" name="email" id="email" placeholder="Email:">
                    <input type="tel" name="telefone" id="telefone" placeholder="Telefone:">
                    <textarea id="mensagem" name="mensagem" placeholder="Mensagem:"></textarea>
                    <input type="submit" value="Enviar">
                </form>
            </div>
        </main>

        <aside>
            <img src="assets/img/suporte-barra-lateral.jpg" alt="Suporte Premium Webdesign em Foco">
        </aside>

        <footer>
            <a href="http://www.webdesignemfoco.com" target="_blank"><img src="https://www.webdesignemfoco.com/img/logo/logo-footer.png" alt="Logomarca da Webdesign em Foco" title="Logomarca da Webdesign em Foco"></a>
            Todos os direitos reservados - Webdesign em Foco. <br>
            webdesignemfoco@gmail.com | (37) 99992-5360 <br>
            CNPJ: 34.911.426/0001-19
        </footer>
    </div>

    <script src="assets/js/javascript.js"></script>
</body>
</html>

assets/css/style.css

No css iremos criar o estilo dos elementos setados no html anterior:

* {margin: 0;border: 0;box-sizing: border-box;background: #f3f3f3;font-family: Arial, sans-serif; }

img{max-width: 100%;}

@media screen and (max-width: 480px) {
    .content{}

    header{}
    header img{width: 100%; margin-bottom: 30px;}

    main{}
    .texto-introducao{width: 80%;margin: 0 auto;text-align: center;line-height: 30px;font-size: 18px;color: #444;}
    .redes-sociais{text-align: center;margin: 35px 0;}
    .redes-sociais a{margin: 0 10px;}
    .formulario{width: 70%;margin: 0 auto;}
    .formulario input[type='text'],main input[type='email'],main input[type='tel']{width: 100%;height: 40px;font-size: 17px;margin: 10px 0;border-bottom: 2px solid #ccc;padding: 0 5px;}
    .formulario textarea{width: 100%;font-size: 17px;padding: 15px;border: 2px solid #ccc;margin-top: 15px}
    .formulario input[type='submit']{background: #0D5733;font-weight: bold;color:#fff;font-size: 15px;border-radius: 3px;margin: 15px 0;padding: 10px 30px;cursor: pointer;}

    aside {display:grid;justify-content: center;margin-top: 30px;}
    aside img{border: 5px solid #fff;box-shadow: 0 10px 20px #ccc;}

    footer {grid-area: footer;margin-top: 30px;display: flex;flex-direction: column;text-align: center;width: 100%;padding: 15px 5%;color: #fff;background: #333;border-top: 5px solid white;box-shadow: 0 10px 40px #999;line-height: 35px;}
    footer a, footer img{background: #333;}
}


@media screen and (min-width: 481px) {
    .content{display:grid;grid-template-columns: 74% 25%;grid-column-gap: 1%;grid-template-areas: "header header""main aside""footer footer";}

    header{grid-area: header;}
    header img{width: 100%; margin-bottom: 30px;}

    main{grid-area: main;}
    .texto-introducao{width: 80%;margin: 0 auto;text-align: center;line-height: 30px;font-size: 18px;color: #444;}
    .redes-sociais{text-align: center;margin: 35px 0;}
    .redes-sociais a{margin: 0 10px;}
    .formulario{width: 70%;margin: 0 auto;}
    .formulario input[type='text'],main input[type='email'],main input[type='tel']{width: 100%;height: 40px;font-size: 17px;margin: 10px 0;border-bottom: 2px solid #ccc;padding: 0 5px;}
    .formulario textarea{width: 100%;font-size: 17px;padding: 15px;border: 2px solid #ccc;margin-top: 15px}
    .formulario input[type='submit']{background: #0D5733;font-weight: bold;color:#fff;font-size: 15px;border-radius: 3px;margin: 15px 0;padding: 10px 30px;cursor: pointer;}

    aside {display:grid;grid-area: aside;justify-content: center;}

    aside img{border: 5px solid #fff;box-shadow: 0 10px 20px #ccc;}

    footer {grid-area: footer;margin-top: 30px;display: flex;flex-direction: column;text-align: center;width: 100%;padding: 15px 5%;color: #fff;background: #333;border-top: 5px solid white;box-shadow: 0 10px 40px #999;line-height: 35px;}
    footer a, footer img{background: #333;}
}

controllers/EmailController.php

O controlador será responsável pelo envio do email feito pelo cliente através do formulário do site:

<?php
echo "oi";

Apesar de não ser o foco do curso, não esqueça de deixar seu site responsivo, ou seja, adaptado para telas de celulares e tablets.

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Curso de Google Ads e Adsense - #11 Página de Destino I

Na aula de hoje começamos a construir a página de destino do Google Ads. Lembrando que para cada produto é necessário uma página específica.

Curso de Google Ads e Adsense - #13 Página de Destino III

No tutorial de hoje aprenderemos como configurar o envio de emails da nossa página de destino. Além disso, publicaremos a página de destino no ar.

Google Ads