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:
**COMO FAZER AMIGOS**
**E INFLUENCIAR PESSOAS**
**DALE CARNEGIE**
**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.**
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
Cadastre-se e adquira
**)
**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.**
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
Comprar agora
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
Cadastre-se e adquira
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 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
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 [email protected].