Tire dúvidas através dos vídeos abaixo de como criar novos universo no site!
Como migrar posts de outro site para este:
Neste Tutorial vai aprender como migrar ou clonar um post de um site para dentro do site da zona. Isso será feito de forma manual ou seja, feito um por um.
Como criar um post no site e usar template:
Como colocar novas categorias :
Como modificar a capa principal:
Como colocar post nas categorias:
Como adicionar link botões:
Como adicionar link em imagens:
Como personalizar página elementor:
Como personalizar Post Blog:
Criar uma página do zero c/ elementor:
Como puxar titulos para uma sessão:
Como trocar banners:
Como configurar o blog
Como puxar títulos para sessões:
Como adicionar tabelas, Carrosel e Botão HTML
Códigos simples de HTML, funcionalidades:
Botão HTML "VOLTAR"
<button onclick=”if (document.referrer) { window.location.href = document.referrer; } else { history.back(); }” class=”btn-voltar”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”14″ height=”14″ fill=”white” viewBox=”0 0 16 16″>
<path fill-rule=”evenodd” d=”M15 8a.75.75 0 0 1-.75.75H3.56l3.72 3.72a.75.75 0 0 1-1.06 1.06l-5-5a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 1.06L3.56 7.25H14.25A.75.75 0 0 1 15 8z”/>
</svg>
VOLTAR
</button>
<style>
.btn-voltar {
background-color: #2A2B2C; /* Fundo solicitado */
color: #fff;
border: 2px solid #54595F; /* Contorno solicitado */
padding: 10px 22px;
font-size: 14px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.btn-voltar svg {
flex-shrink: 0;
}
/* Hover com efeito pulsar */
.btn-voltar:hover {
background-color: #333; /* Leve clareada no hover */
border-color: #888;
animation: pulse 0.6s ease infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Clique (active) */
.btn-voltar:active {
background-color: #FF9600; /* Cor ao clicar */
border-color: #FF9600;
animation: none; /* pausa o pulsar quando clicar */
}
</style>
BOTÃO HTML "PRÓXIMA PÁGINA".
<button onclick=”history.forward()” class=”btn-proximo”>
PRÓXIMA
<svg xmlns=”http://www.w3.org/2000/svg” width=”14″ height=”14″ fill=”white” viewBox=”0 0 16 16″>
<path fill-rule=”evenodd” d=”M1 8a.75.75 0 0 0 .75.75h10.69l-3.72 3.72a.75.75 0 1 0 1.06 1.06l5-5a.75.75 0 0 0 0-1.06l-5-5a.75.75 0 1 0-1.06 1.06l3.72 3.72H1.75A.75.75 0 0 0 1 8z”/>
</svg>
</button>
<style>
.btn-proximo {
background-color: #2A2B2C;
color: #fff;
border: 2px solid #54595F;
padding: 10px 22px;
font-size: 14px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.btn-proximo svg {
flex-shrink: 0;
}
/* Hover com efeito pulsar */
.btn-proximo:hover {
background-color: #333;
border-color: #888;
animation: pulse 0.6s ease infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Clique (active) */
.btn-proximo:active {
background-color: #FF9600;
border-color: #FF9600;
animation: none;
}
</style>
CÓDIGO PARA LINKAR CARROSEL
PARA LINKAR MAIS IMAGENS BASTA DUPLICAR O LINK :
“https://seusite.com/link-da-primeira”, // 1ª imagem
e adicionar o link abaixo, exemplo:
“https://seusite.com/link-da-primeira”, // 7ª imagem
O codigo funciona como uma lista, então ele vai puxar de acordo com as imagens por ordem de upload.
——————————————————
<script>
// Espera o site carregar
document.addEventListener(“DOMContentLoaded”, function () {
// Seleciona todas as imagens do carrossel (ajuste o seletor se necessário)
let imagens = document.querySelectorAll(“.elementor-swiper-button-next ~ .swiper-container img”);
// Lista dos links, na ordem das imagens
let links = [
“https://seusite.com/link-da-primeira”, // 1ª imagem
“https://seusite.com/link-da-segunda”, // 2ª imagem
“https://seusite.com/link-da-terceira”, // 3ª imagem
“https://seusite.com/link-da-quarta” // etc.
];
imagens.forEach((img, i) => {
if (links[i]) {
// Cria um <a> em volta da imagem
let link = document.createElement(“a”);
link.href = links[i];
link.target = “_blank”; // abre em nova aba
img.parentNode.insertBefore(link, img);
link.appendChild(img);
}
});
});
</script>