Adicionar uma seção de ebooks ou planos em destaque no Widget
Neste artigo vamos te mostrar como destacar um Ebook ou um Plano na seção de Widgets da loja.
Se você precisa destacar um ebook ou um plano, promover o lançamento de um livro ou uma pré-venda, você pode colocar um anúncio na seção de Widgets junto com um texto informativo, uma imagem e um botão de compra ou assinatura. Isso ajudará a captar a atenção dos seus usuários e permitirá que você realize vendas em poucos cliques.
Vamos te mostrar como adicionar um banner na seção de Widgets da loja como este:
⚠️ Tenha em mente que, se você já tiver componentes na seção de Widgets, poderá definir a ordem deles, considerando que o código inserido no início da caixa será o que aparecerá primeiro.
1. Copie o seguinte código:
<div class="container mt-5 mb-4 pb-5">
<link
href=" <https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap> "
rel="stylesheet"
/>
<div class="row custom-landing">
<div class="col-12">
<div class="row">
<div class="col-12 p-0 p-md-3 col-sm">
<div>
<h1 class="text-uppercase font-weight-bold"> COMO FAZER AMIGOS </h1>
<h2 class="mb-4 text-uppercase font-weight-bold">
E INFLUENCIAR PESSOAS
</ h2>
<h4 class="my-3 text-uppercase font-weight-light">
DALE CARNEGIE
</h4>
</div>
<div class="my-5">
<p>Dale Carnegie escreveu este livro como complemento ao seu curso de Oratória e Relações Humanas e jamais imaginou que se tornaria um best-seller e que as pessoas o leriam, criticariam e viveriam segundo suas regras. Carnegie entrevistou muitas pessoas renomadas para extrair exemplos de suas vidas. Entre elas estão Edison, Franklin D. Roosevelt e James Farley.
</p>
</div>
<div class="d-none d-md-block">
<article
data-id=" 264286 "
class="Issue Issue-button mt-5 mb-3"
<button
type ="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
Ler agora
<
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
Comprar agora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
Cadastre-se e adquira
</button>
</article>
</div>
</div>
<div class="col-12 col-sm ml-auto mr-auto text-center">
<div class= "cover m-auto">
<img
class="img-fluid truncate"
/>
</div>
</div>
</div>
<div class="my-5">
<p>Dale Carnegie escreveu este livro para ser um complemento ao seu curso de oratória e relações humanas, e jamais imaginou que se tornaria um best-seller e que as pessoas o leriam, criticariam e viveriam segundo suas regras. Carnegie entrevistou muitas pessoas renomadas para extrair exemplos de suas vidas. Entre elas estão Edison, Franklin D. Roosevelt e James Farley.
</p>
</div>
<div class="d-md-none text-center m-auto">
<article data-id=" 264286 " class="Issue Issue-button my-4">
<button
type ="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
Ler agora
</button>
<
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
Comprar agora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
Cadastre-se e adquira
</button>
</article>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var classesList = document.querySelector(
'article[data-id=" 264286 "]:not(.Issue-button)'
);
var IssueCustomButton = document.querySelectorAll(
'article[data-id=" 264286 "].Issue-button'
);
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--visible');
});
if (classesList && classesList.classList.contains('Issue--canBeRead')) {
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--canBeRead');
});
}
});
</script>
Tenha em mente que você deve modificar o que está em negrito, inserindo:
- Título do Ebook ou Plano
- Autor ou subtítulo
- Descrição
- [data-id] *
( * ) Em [data-id="..."] você deve colocar o data-id da publicação ou plano que você escolher destacar.
Para saber essa informação, você deve buscar o ebook ou o plano na seção principal da loja e clicar com o botão direito sobre ele para abrir as ferramentas de desenvolvedor.
Escolha a opção Inspecionar ou Inspect.
Acima da linha da tag article, você encontrará o atributo data-id que deve ser colocado no código que compartilhamos acima:
2. Após adicionar os dados no código, cole o código em Painel de Controle > Configurações > Widgets e clique em Salvar.
3. Agora vamos adicionar os estilos. Vá para Painel de Controle > Configurações > Avançado e cole o código que compartilhamos abaixo em Custom before </body> code :
<style>
.custom-landing.custom-landing {
font-family: 'Montserrat', Raleway, sans-serif;
}
.Header.navbar > div:first-of-type,
.Library.Library-container,
.Footer > div:first-of-type {
max-width: 1400px;
margin: auto;
}
.Widget {
background: url("https://i.ibb.co/bm34ZXt/img.jpg") no-repeat top center;
background-size: cover;
padding: 2rem 0;
color: white;
font-size: 1.25rem;
background-attachment: fixed;
margin-top: -5px;
position: relative;
}
.Widget .container {
max-width: 1400px;
}
.Widget:after {
content: '';
position: absolute;
opacity: .5;
background-color: rgb(0, 0, 0); width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.Widget > div:first-of-type {
position: relative;
z-index: 200;
}
.Widget ul,
.Widget li {
list-style: none;
font-size: 1.1875rem;
}
.Widget h4 {
color: #50b033;
font-size: 1.5rem;
}
.Widget h1 {
font-size: 3rem;
}
@media screen and (max-width: 578px) {
.Widget h1 {
font-size: calc(1.875rem / 0.6);
}
}
.Widget .cover {
max-width: 390px;
}
.Widget img {
border-radius: 3px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.Widget article.Issue {
width: 100%;
max-width: 412px;
}
.User-ID-null .Widget .Issue-button .canBeRead,
.User-ID-null .Widget .Issue-button .canBeSubscribe {
display: none;
}
.library:not(.User-ID-null) .Widget .Issue-button .canBeRead,
.library:not(.User-ID-null) .Widget .Issue-button .canBeRegister {
display: none;
visibility: hidden;
}
.library:not(.User-ID-null) .Widget .Issue-button .canBeSubscribe {
visibility: hidden;
}
.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeRegister,
.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeSubscribe {
display: none;
}
.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeRead {
display: block;
visibility: visible;
}
.library:not(.User-ID-null) .Widget .Issue-button.Issue--visible .canBeRead,
.library:not(.User-ID-null) .Widget .Issue-button.Issue--visible .canBeSubscribe {
visibility: visible;
}
.Slider-cell article[data-id="36106"].Issue {
display: none;
}
.Template-books .Issue-status-bottom {
display: inline-block;
}
.Template-books .Issue-status-bottom .Issue-status-text {
position: relative;
}
</style>
Você pode modificar a cor do texto e a cor de fundo adicionando o código HTML de cada cor em background-color (cor de fundo) e color (cor do texto). Você também pode colocar uma imagem de fundo como no exemplo, alterando a URL em negrito.
👉Se você tiver o campo CSS Personalizado , pode colocar o código lá removendo as tags <style></style> do início e do fim do código.
Clique em Salvar.
Pronto! Você já tem seu anúncio disponível na loja.
Se quiser modificar ainda mais a personalização, você precisará ter conhecimento em HTML , CSS e JavaScript ou pode consultar um especialista.
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.
Atualizado em: 11/05/2026
Obrigado!