Aprenda publicar e alterar o conteúdo do seu site:

 Tutorial em vídeo

Dica: Cole o código abaixo no rodapé do site. Para alterar o esquema de cores, mude apenas "01.css"

<script> var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'css/themas/01.css'; document.getElementsByTagName('head')[0].appendChild(link); </script>
01.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/advocacia_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/advocacia_img2.webp)!important;} </style>
02.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/bolos_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/bolos_img2.webp)!important;} </style>
03.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/c_civil_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/c_civil_img2.webp)!important;} </style>
04.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/c_japonesa_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/c_japonesa_img2.webp)!important;} </style>
05.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/clinica_dental_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/clinica_dental_img2.webp)!important;} </style>
06.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/confeitaria_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/confeitaria_img2.webp)!important;} </style>
07.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/doces_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/doces_img2.webp)!important;} </style>
08.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/eletricista_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/eletricista_img2.webp)!important;} </style>
09.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/financeiro_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/financeiro_img2.webp)!important;} </style>
10.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/hamburguer_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/hamburguer_img2.webp)!important;} </style>
11.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/manicure_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/manicure_img2.webp)!important;} </style>
12.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/motoboy_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/motoboy_img2.webp)!important;} </style>
13.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/pizzaria_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/pizzaria_img2.webp)!important;} </style>
14.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/restaurante_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/restaurante_img2.webp)!important;} </style>
15.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/decoracao_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/decoracao_img2.webp)!important;} </style>
16.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/conteudo_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/conteudo_img2.webp)!important;} </style>
17.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/oftalmologia_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/oftalmologia_img2.webp)!important;} </style>
18.css

<style> #recebe-slide1 {background-image: url(assets/img/repositorio/webp/sofa_img1.webp)!important;} #recebe-slide2 {background-image: url(assets/img/repositorio/webp/sofa_img2.webp)!important;} </style>

Dica: Espaçamento em monitores maiores

<div class="d-none d-md-block" style="height: 150px;"></div>

Dica: Ocultar cor da caixa de texto

<style>.destaquetexto {background-color: transparent!important;}</style>

Dica: Utilidades

<div class="hr-separador"></div>
<div class="alerta-black"></div>
<div class="alerta-white"></div>
<div class="cartoes-black"></div>
<div class="cartoes-white"></div>
<div class="delivery-black"></div>
<div class="delivery-white"></div>
<div class="ifood-black"></div>
<div class="ifood-white"></div>

Dica: Utilidades

<div class="live"></div>
<div class="live-black"></div>
<div class="live-white"></div>
<div class="mentoria"></div>
<div class="mentoria-black"></div>
<div class="mentoria-white"></div>

Dica: 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:11955555555">Ligue Agora</a></div>

Dica: Gatilho Mental da Escassez (ANO/MÊS/DIA)

<h2 class="tipo2" data-countdown="2021/01/1"></h2>

Dica: CTA Whatsapp (simples)

<a target="_blank" class="whatsapp-plug-icon" href="https://api.whatsapp.com/send?phone=5511955555555"></a>

Dica: CTA Whatsapp (avançado)

<a target="_blank" rel="noopener noreferrer" href="https://api.whatsapp.com/send?phone=5511955555555"> <img class="animate__animated animate__bounce efectloop" src="assets/img/whats.png" style="height:50px; position:fixed; bottom: 70px; right: 23px; z-index:99999;"> </a>

Dica: CTA Ligação mobile

<a class="d-block d-sm-none" href="tel:1195555555"> <img class="animate__animated animate__bounce efectloop" src="assets/img/phone.png" style="height:50px; position:fixed; bottom: 70px; right: 23px; z-index:99999;"> </a>

Dica: Imagem via link

<img alt="..." title="..." width="100%" class="img-fluid" src="...">

Dica: Menu básico

<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" title="Seja bem vindo!" href="index.php">Seja bem vindo!</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMy" aria-controls="navbarMy" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarMy"> <ul class="navbar-nav mr-auto"> <!-- 'mr-auto' ou 'ml-auto' --> <li class="nav-item"> <a class="nav-link" href="index.php">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="pg-empresa.php">Empresa</a> </li> <li class="nav-item"> <a class="nav-link" href="pg-servico.php">Serviço</a> </li> <li class="nav-item"> <a class="nav-link" href="pg-contato.php">Contato</a> </li> </ul> </div> </div> </nav>

Dica: Exemplo de slider (carousel)

<div id="sliders2" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#sliders2" data-slide-to="0" class="active"></li> <li data-target="#sliders2" data-slide-to="1"></li> <li data-target="#sliders2" data-slide-to="2"></li> <li data-target="#sliders2" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="assets/img/repositorio/webp/thumbs/advocacia_img1.webp" class="d-block w-100"> </div> <div class="carousel-item"> <img src="assets/img/repositorio/webp/thumbs/bolos_img1.webp" class="d-block w-100"> </div> <div class="carousel-item"> <img src="assets/img/repositorio/webp/thumbs/c_civil_img1.webp" class="d-block w-100"> </div> <div class="carousel-item"> <img src="assets/img/repositorio/webp/thumbs/c_japonesa_img1.webp" class="d-block w-100"> </div> </div> </div>

Dica: CCS 3 (Web Master)

<style> #recebe-slide1 {background-image: url(...)!important;} #recebe-slide2 {background-image: url(...)!important;} @media (min-width:576px) {.destaquetexto {background-color: #1d3349d9;}} .navbar.bg-dark, .destaque.bg-dark, #rodape.bg-dark {background-color: #1d3349!important;} .navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link {color: #fff!important;} .navbar-dark .navbar-toggler {color: #fff!important;border-color: #fff!important;} .navbar-toggler {border-radius: 0!important;} .destaque.text-white, #rodape.text-white, .destaque a, .destaque a:link, .destaque a:focus, .destaque a:visited, .destaque a:active, .destaque a:disabled, .destaque a:hover, #rodape a, #rodape a:link, #rodape a:focus, #rodape a:visited, #rodape a:active, #rodape a:disabled, #rodape a:hover {color: #fff!important;} a, a:link, a:focus, a:visited, a:active, a:disabled, a:hover {color: #17a2b8;} em {font-style: normal;background-color:#1d3349; color:#fff; padding:6px; margin:6px;letter-spacing: 0.1em;line-height: 2.1;} .destaque em, #rodape em {background-color:#192633;} </style>

CONTAS PREMIUM: e-mail

<form id="form01" class="p-2"> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">CADASTRAR <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome e e-mail

<form id="form02" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">CADASTRAR <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome, e-mail e mensagem

<form id="form03" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <div class="py-2"> <label>Breve Mensagem</label> <label>Mensagem</label> <textarea type="text" id="inputMensagem" class="form-control estilo-input rounded-0" placeholder="Mensagem" required></textarea> </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">ENVIAR MENSAGEM <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome, e-mail e telefone

<form id="form04" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <div class="py-2"> <label>Telefone com DDD</label> <input type="tel" id="inputTelefone" class="form-control estilo-input rounded-0" placeholder="(00) 00000-0000" required> </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">CADASTRAR <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome, e-mail, telefone e mensagem

<form id="form05" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <div class="py-2"> <label>Telefone com DDD</label> <input type="tel" id="inputTelefone" class="form-control estilo-input rounded-0" placeholder="(00) 00000-0000" required> </div> <div class="py-2"> <label>Breve Mensagem</label> <label>Mensagem</label> <textarea type="text" id="inputMensagem" class="form-control estilo-input rounded-0" placeholder="Mensagem" required></textarea> </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">ENVIAR MENSAGEM <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome, e-mail, telefone, mensagem e pesquisa

<form id="form06" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <div class="py-2"> <label>Telefone com DDD</label> <input type="tel" id="inputTelefone" class="form-control estilo-input rounded-0" placeholder="(00) 00000-0000" required> </div> <div class="py-2"> <label>Breve Mensagem</label> <label>Mensagem</label> <textarea type="text" id="inputMensagem" class="form-control estilo-input rounded-0" placeholder="Mensagem" required></textarea> </div> <div class="py-2"> <label>Como nos conheceu?</label><br> <input type="radio" name="radio" id="radioGoogle" value="google"><span class="checkmark"></span>Google <input type="radio" name="radio" id="radioFacebook" value="facebook"><span class="checkmark"></span>Facebook <input type="radio" name="radio" id="radioIndicacao" value="indicacao"><span class="checkmark"></span>Indicação </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">ENVIAR MENSAGEM <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>

CONTAS PREMIUM: nome, e-mail, telefone, data, mensagem e pesquisa

<form id="form07" class="p-2"> <div class="py-2"> <label>Nome Completo</label> <input type="text" id="inputNome" class="form-control estilo-input rounded-0" placeholder="Nome completo" required> </div> <div class="py-2"> <label>E-mail Válido</label> <input type="email" id="inputEmail" class="form-control estilo-input rounded-0" placeholder="E-mail" required> </div> <div class="py-2"> <label>Telefone com DDD</label> <input type="tel" id="inputTelefone" class="form-control estilo-input rounded-0" placeholder="(00) 00000-0000" required> </div> <div class="py-2"> <label>Agende uma reunião</label> <input type="date" id="inputData" class="form-control estilo-input rounded-0" max="2030-12-31" required> </div> <div class="py-2"> <label>Breve Mensagem</label> <label>Mensagem</label> <textarea type="text" id="inputMensagem" class="form-control estilo-input rounded-0" placeholder="Mensagem" required></textarea> </div> <div class="py-2"> <label>Como nos conheceu?</label><br> <input type="radio" name="radio" id="radioGoogle" value="google"><span class="checkmark"></span>Google <input type="radio" name="radio" id="radioFacebook" value="facebook"><span class="checkmark"></span>Facebook <input type="radio" name="radio" id="radioIndicacao" value="indicacao"><span class="checkmark"></span>Indicação </div> <button id="btnEnviar" class="btn btn-info rounded-0 my-3" type="submit">ENVIAR MENSAGEM <span id="spinner" class="spinner-border spinner-border-sm" role="status" hidden="true"></span> </button> </form>