Baixe uma visualização do livro GRÁTIS Divi Layout da página de destino, incluindo links de âncora e CTAs

Quer você esteja vendendo um livro físico ou um e-book, ter uma página de destino eficaz para ele pode fazer maravilhas. Você pode abordar essa página inicial da maneira tradicional ou transformá-la em uma página inicial de visualização do livro. Uma página inicial de visualização do livro permite que as pessoas leiam certas partes ou capítulos do seu livro com antecedência. Também é equipado com links de âncora que tornam a navegação pelas diferentes partes ou capítulos ininterrupta. Para finalizar, você também deseja colocar um CTA no centro das atenções que direcionará o tráfego para onde quer que você esteja vendendo seu livro.

Neste tutorial, vamos recriar uma página inicial de visualização de livro impressionante do zero com Divi. Você também poderá baixar o layout JSON gratuitamente se quiser adicioná-lo ao seu site imediatamente.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout da página inicial da visualização do livro GRATUITAMENTE

Para colocar as mãos no layout da página de destino da visualização gratuita do livro, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vamos começar a recriar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção regular

Espaçamento

Comece criando uma nova página e adicione uma seção regular a ela. Abra as configurações da seção e remova todo o preenchimento personalizado superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Fundo Gradiente da Coluna 3

Adicione um fundo gradiente à terceira coluna também.

• Cor 1: # 6a30ff
• Cor 2: # a202ff
• Tipo de gradiente da coluna 3: Linear
• Direção do gradiente da coluna 3: 166 graus

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e permita que a linha ocupe toda a largura da tela, adicionando as seguintes configurações de dimensionamento:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Passe para as configurações de espaçamento e remova o preenchimento personalizado superior e inferior da linha. Adicione alguns valores de preenchimento à primeira e à terceira colunas também.

• Enchimento superior: 0vw
• Preenchimento inferior: 0vw
• Preenchimento superior da coluna 1: 15vw (desktop), 10vw (tablet e telefone)
• Preenchimento inferior da coluna 2: 15vw (desktop), 10vw (tablet e telefone)
• Preenchimento esquerdo da coluna 1: 7vw

Coluna 2 CSS ID

Como você pode notar na prévia deste post, há uma barra de rolagem anexada à segunda coluna. Se você quiser estilizar esta barra de rolagem mais tarde na postagem, vá em frente e adicione um ID CSS à segunda coluna.

• Coluna 2 CSS ID: style-scrollbar

Elemento Principal da Coluna 2

A próxima coisa que faremos é permitir que a coluna seja rolável adicionando as seguintes linhas de código CSS ao elemento principal da coluna 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

Agora que modificamos todas as configurações de linha, podemos começar a adicionar os módulos! Comece com um Módulo de Texto na coluna 1 e adicione algum conteúdo de sua escolha.

Configurações de texto

Vá para as configurações de texto do módulo e faça algumas alterações.

• Fonte do texto: Lato
• Cor: # 666666
• Tamanho do texto: 1.6vw (desktop), 3vw (tablet), 4vw (telefone)
• Altura da linha de texto: 2vw

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O próximo módulo que adicionaremos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor.

• Cor: # 5802ed

Dimensionamento

Brinque com os valores de dimensionamento também.

• Peso do divisor: 4px
• Largura: 3vw (desktop), 6vw (tablet), 9vw (telefone)
• Altura: 0 px

Espaçamento

E adicione um pouco de preenchimento personalizado na parte superior e inferior para criar espaço.

• Margem superior: 1vw (desktop), 3vw (tablet), 4vw (telefone)
• Margem inferior: 7vw

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Passe para o terceiro módulo, que é outro Módulo de Texto. Aqui, adicionamos um símbolo (►) seguido pelo título do primeiro capítulo à caixa de conteúdo.

Adicionar Link

Estamos vinculando todo este módulo a um ID de âncora que adicionaremos mais tarde neste post.

• URL do link do módulo: https://yourwebsite.com/pagetitle/#chapter-1

Configurações de texto

Continue indo para as configurações de texto e estilize o conteúdo exatamente da maneira que você deseja.

• Fonte do texto: Lato
• Peso da fonte do texto: leve
• Cor do texto: # 666666
• Tamanho do texto: 1,3vw (desktop), 2vw (tablet), 3,3vw (telefone)

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw

Clonar Módulo de Texto # 2 Duas Vezes

Quando terminar de modificar o Módulo de Texto, clone-o duas vezes (ou até quantos capítulos desejar compartilhar).

Mudar o Conteúdo

Modifique o conteúdo de cada uma das duplicatas.

Mudar links

Junto com o ID da âncora no final do URL do link do módulo. Nesse caso, isso significa adicionar '# capítulo-2' à primeira duplicata e '# capítulo-3' à segunda.

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Vá para a próxima coluna, que é rolável. Aqui, vamos usar os Módulos de texto para adicionar diferentes páginas da visualização do livro. Comece adicionando o primeiro Módulo de Texto com algum conteúdo de sua escolha.

Cor de fundo

Em seguida, vá para as configurações de fundo e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Configurações de texto

Modifique as configurações de texto também.

• Fonte do texto: Lato
• Tamanho do texto: 0.8vw (desktop), 1.6vw (tablet), 2.1vw (telefone)
• Altura da linha de texto: 1.7vw (desktop), 3.3vw (tablet), 3.8vw (telefone)

Configurações de texto H2

Brinque com as configurações de texto H2 também.

• Fonte do título 2: Lato
• Peso da fonte do cabeçalho 2: pesado
• Cor do texto do título 2: # 5802ed
• Tamanho do texto do título 2: 2vw (desktop), 2,5vw (tablet), 2,9vw (telefone)
• Altura da linha do título 2: 2.3vw

Espaçamento

Continue acessando as configurações de espaçamento e adicionando a seguinte margem personalizada e valores de preenchimento:

• Margem superior: 2vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem inferior: 2vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem esquerda: 5vw
• Margem direita: 5vw
• Acolchoamento superior: 6vw
• Preenchimento inferior: 6vw
• Preenchimento esquerdo: 6vw
• Preenchimento direito: 6vw

Sombra da caixa

Modele o Módulo de Texto adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.09)

ID CSS

Continue adicionando um ID CSS ao Módulo de Texto. Certifique-se de que está usando o mesmo CSS ID que aquele para o qual você estava vinculando na primeira coluna da linha.

• ID CSS: capítulo-1

Clonar Módulo de Texto Duas Vezes

Depois de definir o estilo do Módulo de texto, clone-o quantas vezes desejar.

Mudar o Conteúdo

Altere o conteúdo de cada duplicata do Módulo de Texto.

Alterar IDs CSS

Junto com os IDs CSS.

• ID CSS: capítulo 2
• ID CSS: capítulo 3

Adicionar Módulo de Texto à Coluna 3

Adicionar conteúdo

Vamos para a próxima e última coluna! Adicione um Módulo de Texto com algum conteúdo de sua escolha.

Configurações de texto

Em seguida, vá para a guia de design e altere as configurações de texto.

• Fonte do texto: Lato
• Peso da fonte do texto: pesado
• Cor do texto: #ffffff
• Tamanho do texto: 2vw (desktop), 3vw (tablet), 4vw (telefone)
• Altura da linha de texto: 2vw
• Orientação do Texto: Centro

Espaçamento

Adicione um pouco de preenchimento personalizado à esquerda e à direita a seguir.

• Esquerda: 2vw
• Direito: 2vw

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Continue adicionando um Módulo de Botão à terceira coluna com alguma cópia de sua escolha.

Alinhamento

Altere o alinhamento do botão a seguir.

• Alinhamento do botão: Centro

Configurações de botão

Modifique as configurações do botão também.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 1,5vw (tablet), 2,4vw (telefone)
• Cor do texto do botão: # 5802ed
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 10vw
• Espaçamento entre letras dos botões: 0 px
• Peso da fonte: ultra negrito
• Estilo da fonte: maiúsculas

Espaçamento

E adicione alguns valores de margem e preenchimento personalizados para estilizar e posicionar o módulo.

• Margem superior: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 7vw (tablet), 9vw (telefone)
• Preenchimento direito: 3vw (desktop), 7vw (tablet), 9vw (telefone)

Barra de rolagem de estilo

Abra as configurações da página

A última parte deste tutorial é dedicada a estilizar a barra de rolagem da segunda coluna. Se você definir o estilo da barra de rolagem da coluna ou não, depende inteiramente de você. Não estilizar não muda nada sobre a funcionalidade. Se você decidir estilizar a barra de rolagem, abra as configurações da página.

Adicionar código CSS

Em seguida, vá para a guia avançada e adicione algum CSS personalizado à caixa CSS personalizado e pronto!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar uma página inicial de visualização de livro impressionante e eficaz com links âncora para diferentes partes ou capítulos de seu livro e um CTA que se destaque. Também compartilhamos o layout JSON gratuitamente para que você possa começar a adicioná-lo a qualquer site que estiver criando imediatamente! Se você tiver dúvidas ou sugestões, certifique-se de deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.