Links de Whatsapp personalizados
Chat de atendimento on-line no seu site
Diminua o tamanho de suas imagens
Ferramenta de dados estruturados
<i class="bi bi-arrow-down-square-fill" style="font-size: 3rem; color:#0d9688;"></i>
<i class="fas fa-photo-video fa-5x" style="color:#000"></i>
Cole o código abaixo no rodapé do site. Para alterar o esquema de cores, mude "02.css" para até "15.css"
<script> var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '../assetsmaster/css/themas/02.css'; document.getElementsByTagName('head')[0].appendChild(link); </script>
São 14 opções de cores:
Não temos 01.css, pois este é o mesmo que um tema sem folha de estilo.
Exemplo de variações:
02.css; 02s.css
Gatilho de escassez: ANO/MÊS/DIA
<i class="bi bi-alarm-fill" style="font-size: 3rem; color:#ffd94d"></i>
<h2 class="tipo2 color2" data-countdown="2021/07/10"></h2>
Espaçamento em monitores maiores
<div class="d-none d-md-block" style="height: 150px;"></div>
GTM Exemplo link
<a href="https://wa.me/55" target="_blank">
<p><em class="GTMpixelLink">Call to action</em></p>
</a>
GTM Exemplo cta alternado
<div class="py-2">
<div class="d-block d-sm-none">
<a href="tel:" target="_blank"><h2 class="tipo2 GTMpixelwhatsappLinkmobile">Lição em Mobile</h2></a>
</div>
<div class="d-none d-md-block">
<a href="https://wa.me/55" target="_blank"><h2 class="tipo2 GTMpixelwhatsappLinkdesktop">Whatsapp em Desktop</h2></a>
</div>
</div>
CTA Ligação somente em mobile
<div class="d-block d-sm-none"><a class="btn btn-success my-1 rounded-0 shadow-sm py-2 m-1" href="tel:">Ligue Agora</a></div>
CTA Whatsapp
<a target="_blank" rel="noopener noreferrer" class="whatsapp-plug-icon GTMpixelwhatsappRodape" href="https://api.whatsapp.com/send?phone=55"></a>
Imagem via link
<img alt="..." title="..." width="100%" class="img-fluid" src="...">
FORM1: E-mail
<form class="CardForm" id="form01">
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido:" required>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">CADASTRAR <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span></button>
</form>
FORM2: Nome e e-mail
<form class="CardForm" id="form02">
<div class="RowForm">
<label>Nome Completo</label>
<input type="text" id="inputNome" autocomplete="off" placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">CADASTRAR <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
FORM3: Nome, e-mail e mensagem
<form class="CardForm" id="form03">
<div class="RowForm">
<label>Nome Completo:</label>
<input type="text" id="inputNome" autocomplete="off" placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<div class="RowForm">
<label>Breve Mensagem:</label>
<textarea type="text" id="inputMensagem" placeholder="Mensagem" required></textarea>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">ENVIAR MENSAGEM <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
FORM4: Nome, e-mail e telefone
<form class="CardForm" id="form04">
<div class="RowForm">
<label>Nome Completo</label>
<input type="text" id="inputNome" autocomplete="off"placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<div class="RowForm">
<label>Telefone com DDD</label>
<input type="tel" id="inputTelefone" autocomplete="off" placeholder="(00) 00000-0000" required>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">CADASTRAR <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
FORM5: Nome, e-mail, telefone e mensagem
<form class="CardForm" id="form05">
<div class="RowForm">
<label>Nome Completo:</label>
<input type="text" id="inputNome" autocomplete="off" placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<div class="RowForm">
<label>Telefone com DDD:</label>
<input type="tel" id="inputTelefone" autocomplete="off" placeholder="(00) 00000-0000" required>
</div>
<div class="RowForm">
<label>Breve Mensagem:</label>
<textarea type="text" id="inputMensagem" placeholder="Mensagem" required></textarea>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">ENVIAR MENSAGEM <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
FORM6: Nome, e-mail, telefone, mensagem e pesquisa
<form class="CardForm" id="form06">
<div class="RowForm">
<label>Nome Completo:</label>
<input type="text" id="inputNome" autocomplete="off" placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<div class="RowForm">
<label>Telefone com DDD:</label>
<input type="tel" id="inputTelefone" autocomplete="off" placeholder="(00) 00000-0000" required>
</div>
<div class="RowForm">
<label>Breve Mensagem:</label>
<textarea type="text" id="inputMensagem" placeholder="Mensagem" required></textarea>
</div>
<div class="RowForm">
<label>Como nos conheceu?</label>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioGoogle" value="google">
<label for="radioGoogle">Google</label>
</div>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioFacebook" value="facebook">
<label for="radioFacebook">Facebook</label>
</div>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioIndicacao" value="indicacao">
<label for="radioIndicacao">Indicação</label>
</div>
</div>
<button id="btnEnviar" class="BtnForm" type="submit">ENVIAR MENSAGEM <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
FORM7: Nome, e-mail, telefone, data, mensagem e pesquisa
<form class="CardForm" id="form07">
<div class="RowForm">
<label>Nome Completo:</label>
<input type="text" id="inputNome" autocomplete="off" placeholder="Nome completo" required>
</div>
<div class="RowForm">
<label>E-mail Válido:</label>
<input type="email" id="inputEmail" autocomplete="off" placeholder="E-mail válido" required>
</div>
<div class="RowForm">
<label>Telefone com DDD:</label>
<input type="tel" id="inputTelefone" autocomplete="off" placeholder="(00) 00000-0000" required>
</div>
<div class="RowForm">
<label>Agende uma reunião:</label>
<input type="date" id="inputData" max="2030-12-31" required>
</div>
<div class="RowForm">
<label>Breve Mensagem</label>
<textarea type="text" id="inputMensagem" placeholder="Mensagem" required></textarea>
</div>
<div class="RowForm">
<label>Como nos conheceu?</label>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioGoogle" value="google">
<label for="radioGoogle">Google</label>
</div>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioFacebook" value="facebook">
<label for="radioFacebook">Facebook</label>
</div>
<div class="RadioGroup">
<input type="radio" name="radio" id="radioIndicacao" value="indicacao">
<label for="radioIndicacao">Indicação</label>
</div>
</div>
<button class="BtnForm" class="BtnForm" type="submit">ENVIAR MENSAGEM <span id="spinner" class="fas fa-spinner fa-spin" hidden="true"></span> </button>
</form>
NAVBAR: Exemplo de menu offcanvas
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand" href="index.php">Seja bem vindo!</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <a class="nav-link" href="index.php">HOME</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">EMPRESA</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">CONTATO</a> </li>
</ul>
</div>
</div>
</nav>
<div class="jstffcnvs"></div>
MODAL: Exemplo de popup modal
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModalPromo"> Oportunidade! </button>
<div class="modal fade" id="ModalPromo" tabindex="-1" aria-labelledby="ModalPromoLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<p class="tipo2" style="color:#000">Título... </p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mini" style="color:#000">Contéúdo... </p>
</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Depois</button> </div>
</div>
</div>
</div>
<script> setTimeout(function(){$('#ModalPromo').modal('show')}, 4000); </script>
ACCORDION: Exemplo de accordion
<div class="accordion my-2" id="accordionAtendimento1">
<div class="accordion-item">
<div class="accordion-header my-1" id="headingUm1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUm1" aria-expanded="false" aria-controls="collapseUm1"> Pergunta 01 </button>
</div>
<div id="collapseUm1" class="accordion-collapse collapse" aria-labelledby="headingUm1" data-bs-parent="#accordionAtendimento1">
<div class="accordion-body">
<strong>Exemplo de texto em negrito</strong>
<br>
Conteúdo escrito...
<br>
<a href="#" target="_blank" rel="noopener noreferrer">Exemplo de link externo</a>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header my-1" id="headingDois2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDois2" aria-expanded="false" aria-controls="collapseDois2"> Pergunta 02 </button>
</div>
<div id="collapseDois2" class="accordion-collapse collapse" aria-labelledby="headingDois2" data-bs-parent="#accordionAtendimento1">
<div class="accordion-body">
<strong>Exemplo de texto em negrito</strong>
<br>
Conteúdo escrito...
<br>
<a href="#" target="_blank" rel="noopener noreferrer">Exemplo de link externo</a>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header my-1" id="headingTres3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTres3" aria-expanded="false" aria-controls="collapseTres3"> Pergunta 03 </button>
</div>
<div id="collapseTres3" class="accordion-collapse collapse" aria-labelledby="headingTres3" data-bs-parent="#accordionAtendimento1">
<div class="accordion-body">
<strong>Exemplo de texto em negrito</strong>
<br>
Conteúdo escrito...
<br>
<a href="#" target="_blank" rel="noopener noreferrer">Exemplo de link externo</a>
</div>
</div>
</div>
</div>
CSS: Ajustes com css
Textura no fundo do site "01.png" a "16.png"
<style>
body {background-image: url("../assetsmaster/assets/textura/01.png")}
</style>
Cor em uma faixa
<style>
#Faixa2 {background-color: #000;color: #fff!important}
</style>
Forçar cor no Banner
<style>
#Recebe-Banner {background-color: #000;}
</style>
Ocultando partes do layout
<style>
#Recebe-Banner,
#Faixa1,
#Faixa2,
#Faixa3,
#Faixa4,
#Rodape {display: none!important}
</style>
Faixa ocupando 100% de espaço horizontal
<style> .Faixa4 .layout { margin: 0!important} </style>