Como criar um tablet de visualização de texto com rolagem com Divi
Publicados: 2017-08-08No tutorial de hoje, mostraremos como criar um tablet de visualização de texto rolável em seu site. A visualização do texto será representada em um tablet onde os visitantes podem rolar dentro do tablet para ler alguns dos capítulos que estão sendo compartilhados.
Adicionar um tablet de visualização de texto ao seu site é uma excelente forma de provocar seus visitantes. Você está dando a eles a chance de explorar uma parte do conteúdo que você criou. Depois de ler o conteúdo e ficar intrigado com ele, é mais provável que queiram ler o resto também. Usar um tablet de visualização de texto pode ser interessante nos seguintes casos, por exemplo:
- Ao vender um livro
- Ao compartilhar um e-book gratuito com seus visitantes e desejar incentivá-los a baixar a versão completa (por meio de assinatura)
- Ao compartilhar estudos de caso ou depoimentos
Para mostrar o que queremos dizer exatamente, criamos um exemplo que mostraremos como recriar passo a passo:
Você pode adicionar tanto conteúdo quanto desejar ao tablet. A barra de rolagem permitirá que seus visitantes percorram o conteúdo facilmente.
Como criar um tablet de visualização de texto com rolagem com Divi
Inscreva-se no nosso canal no Youtube
Criar e modificar a seção
A primeira coisa que precisaremos para recriar o exemplo que fizemos é uma seção. Para facilitar, vamos adicionar esta seção a uma nova página e mudar para o Visual Builder para explicar todas as etapas que estão sendo usadas para criar o resultado.
Adicionar uma nova página
Para adicionar uma nova página, vá para o Painel do WordPress> Páginas> Adicionar novo . Depois de adicionar a nova página, ative o Divi Builder e mude para o Visual Builder imediatamente.
Adicionar uma seção com linha de duas colunas
Para o exemplo que estamos recriando, precisaremos apenas de uma seção. Adicione uma seção padrão e, dentro dessa seção, crie uma linha de duas colunas. Precisaremos da coluna da esquerda para colocar o tablet de visualização de texto e da segunda coluna para fornecer informações e colocar uma frase de chamariz.
Adicionar o fundo gradiente
A próxima etapa que iremos explicar é o fundo gradiente. Optamos por algo realmente simples, mas que agrega valor à seção. Para recriar o gradiente de fundo, vá para as configurações de sua seção. Em seguida, use as duas cores a seguir para seu plano de fundo gradiente na subcategoria de plano de fundo:
- # e02b20
- # f2f2f2
As configurações que usamos para o fundo gradiente são as seguintes:
- Tipo de gradiente: Linear
- Direção do gradiente: 143 graus
- Posição inicial: 28%
- Posição final: 28%
Primeira coluna: adicione o módulo de código e o tablet de visualização de texto
Para a primeira coluna, vamos adicionar o módulo de código com o tablet de visualização de texto. Para completar o tablet de visualização de texto, precisaremos fazer três coisas; adicione o módulo de código, adicione as linhas de código HTML dentro do Módulo de Código e adicione as linhas de código CSS necessárias à própria página. Você também pode adicionar as linhas de código CSS às Opções de tema ou Personalizador de tema. Mas como isso não é necessário neste caso, iremos apenas adicioná-lo à página que criamos.
Adicione o Módulo de Código
Comece adicionando um Módulo de Código à primeira coluna da linha que você criou.
Adicione o código HTML
Em seguida, abra esse Módulo de Código e adicione as seguintes linhas na Caixa de Conteúdo:
<div id="tab-container"> <div class="tablet"> <div class="tab"> <h1 class="title">Chapter 1</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <h1 class="title">Chapter 2</h1> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <footer> 2017 *Author* </footer> </div> </div> </div>
Você notará que há três partes em nossa visualização do texto; o título, os parágrafos e o rodapé. Você pode fazer a visualização do texto tão longa quanto desejar. Para este exemplo, adicionamos dois capítulos que são representados por um título e um parágrafo cada. Você pode, é claro, adicionar vários parágrafos e títulos onde quiser no tablet.
Adicione o código CSS necessário
Depois de ajustar o código HTML às suas necessidades, você pode adicionar o código CSS que faz com que seu tablet tenha a aparência que você deseja. Visto que só vamos precisar desse tablet na página que estamos criando; vamos adicionar o código à página diretamente. No Visual Builder da sua página, clique no ícone de configurações:
Em seguida, vá para a guia CSS e cole as seguintes linhas de código CSS no campo CSS personalizado:
*{ box-sizing: border-box; }
.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}
@media only screen and (max-width:768px) {
height: 400px;
}
.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}
.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}
.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}
footer {
background: black;
color: white;
margin-bottom: 8px;
}
Você pode alterar todas as coisas de acordo com sua necessidade dentro dessas linhas de código CSS. Como você pode notar nas linhas de código, há cinco partes principais nas quais você pode alterar a aparência do seu tablet de visualização de texto.
- A aparência externa do tablet
- A aparência interna do tablet
- O título
- Os parágrafos
- O rodapé
Você pode fazer o tablet se ajustar a qualquer tipo de página à qual está integrando o tablet de visualização de texto.
Segunda coluna: adicionar dois módulos de texto e um CTA
A última coisa que vamos fazer é adicionar os módulos à coluna certa. É importante informar às pessoas o que elas vão ler no tablet de visualização de texto. É também a oportunidade ideal para fazer uso de um CTA. Quanto mais próximo o CTA estiver do tablet de visualização de texto real, e quanto mais perceptível ele for, maior será a probabilidade de as pessoas agirem depois de ler a visualização de texto.
Módulo de Primeiro Texto
Comece adicionando o primeiro Módulo de Texto à segunda linha. Abra as configurações e anote um título na caixa de conteúdo dentro da subcategoria Texto do conteúdo. Além disso, vá para a guia Design e faça as seguintes alterações na subcategoria Texto:
- Fonte do texto: Dancing Script
- Estilo da fonte do texto: negrito e itálico
- Tamanho da fonte do texto: 40 (desktop), 35 (tablet), 30 (telefone)
- Cor do texto: # 1c1c1c
- Altura da linha de texto: 1,7em
Role para baixo na mesma guia e adicione '40% 'à margem superior.
Segundo Módulo de Texto
Além disso, adicione o segundo módulo de texto. Comece adicionando o texto na caixa Conteúdo na guia Conteúdo e vá para a guia Design. Na guia Design, faça os seguintes ajustes na subcategoria Texto:
- Fonte do Texto: Arimo
- Tamanho da fonte do texto: 14
- Altura da linha de texto: 1,7em
Módulo de Botão
Por último, também precisaremos adicionar um Módulo de botão à segunda coluna. Combinamos as cores do CTA com o fundo gradiente. Em primeiro lugar, adicione o Módulo de Botão e abra as Configurações. Em seguida, adicione o CTA e o URL na guia Conteúdo. Continue indo para a guia Design e fazendo os seguintes ajustes na subcategoria Botão:
- Use estilos personalizados para botão: Sim
- Texto do tamanho do botão: 14 (desktop e tablet), 12 (telefone)
- Cor do texto do botão: # f9f9f9
- Cor de fundo do botão: # e02b20
- Largura da borda do botão: 0
- Raio da borda do botão: 3
- Fonte do botão: Arimo
Dica: se você estiver promovendo seu e-book por meio da visualização do texto, também poderá vincular um formulário de ativação do Gatilho no Click Bloom, conforme explicado na postagem a seguir.
O resultado
Se você seguiu todas as etapas desta postagem, deve ter obtido o seguinte resultado para a visualização do livro:
Empacotando
Com o módulo de código, você pode ser tão criativo quanto desejar. Este post foi um exemplo de como você pode tornar seu site Divi diversificado se integrar alguns elementos de sua preferência pessoal. Se você seguiu esta postagem passo a passo, deve ter conseguido recriar a visualização do livro e usá-la em seu site. Não apenas você pode usar a visualização do livro para sites de autores, mas também pode usá-la para visualizar um e-book que você criou e a partir do qual deseja construir sua lista de e-mail. Se você tiver dúvidas ou sugestões; sinta-se à vontade para nos deixar um comentário na seção de comentários abaixo!
Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!