Como adicionar CTAs da barra lateral aderente a um modelo de postagem de blog em Divi

Os CTAs da barra lateral aderente são extremamente eficazes para chamar a atenção dos visitantes sem serem arrogantes ou distrair. O truque é incluir um ou dois elementos na barra lateral que “grudam” ou ficam fixos na lateral do conteúdo da postagem conforme o usuário rola a página para baixo. Esta é uma alternativa refrescante para um layout de barra lateral tradicional porque fornece a sensação de um layout de largura total moderno (sem barra lateral) com o benefício de mostrar CTAs importantes na lateral da página quando necessário.

Neste tutorial, mostraremos como adicionar CTAs fixos da barra lateral a um modelo de postagem de blog usando o Divi Theme Builder. A aplicação desse layout é de longo alcance. Funcionará com quase qualquer página ou modelo de postagem. Além disso, você não precisa se limitar a CTAs; você pode optar por adicionar qualquer módulo Divi que desejar.

Vamos começar!

Baixe o modelo de CTA Sticky Sidebar GRATUITAMENTE

Para colocar suas mãos no modelo de postagem cta da barra lateral aderente deste tutorial, primeiro você precisará baixá-lo 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á faz parte da 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!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.

Você também precisará de pelo menos uma postagem criada com o Divi Builder para fins de teste a fim de mostrar o resultado pretendido.

Depois disso, você está pronto para ir.

Espiada

Aqui está uma rápida olhada nos CTAs da barra lateral aderentes que foram adicionados a um modelo de postagem de blog no Divi.

Como adicionar CTAs da barra lateral aderente ao modelo de postagem do seu blog em Divi

Adicionando o modelo Theme Builder

A primeira etapa inclui a importação de nosso modelo predefinido para o nosso site. Vamos usar o modelo de postagem do Divi Theme Builder Pack # 1.

Para começar, navegue até Divi> Theme Builder. Clique no ícone de portabilidade no canto superior direito da página. No modal de portabilidade, selecione a guia de importação e escolha o arquivo divi-theme-builder-pack-1-post-template.json da pasta. Caso você tenha algum modelo instalado atualmente em seu site, certifique-se de desmarcar todas as opções que podem substituir seus modelos atuais. Em seguida, clique no botão importar.

Construindo o modelo de postagem do blog

Assim que o modelo tiver sido importado, estamos prontos para começar a adicionar nossos novos CTAs da barra lateral aderente ao layout do modelo. Para fazer isso, clique no ícone de edição da área personalizada do corpo.

Adicionando um layout de barra lateral dupla para manter os CTAs da barra lateral

No Editor de layout de modelo, encontre a linha que contém o módulo de conteúdo de postagem e altere o layout da coluna para uma estrutura de coluna de um quinto três quintos um quinto (1/5 3/5 1/5). Isso nos permitirá manter a coluna centralizada para o conteúdo da postagem e, ao mesmo tempo, fornecer duas seções de cada lado para nossos CTAs da barra lateral.

Depois que a estrutura da coluna for alterada, arraste o módulo de conteúdo de postagem para a coluna central.

Atualizando as configurações de linha

Abra as configurações de linha e atualize as seguintes opções de design:

• Usar largura de calha personalizada: SIM
• Largura da calha: 2
• Largura: 100% (desktop), 90% (tablet)
• Largura máxima: 1500px

Isso nos dará o espaço de que precisamos para a configuração da barra lateral dupla.

Atualizando as configurações da coluna 1

Em seguida, abra as configurações da coluna 1 e dê à coluna uma classe CSS personalizada:

• Classe CSS: sticky-cta

Adicionando um CTA da barra lateral à coluna da esquerda

Agora estamos prontos para a primeira chamada à ação. Adicione um módulo de apelo à ação na coluna da esquerda.

Estilizando o CTA da barra lateral

Atualize as configurações da seguinte forma:

Contente

• Botão: “Clique aqui”
• Corpo: “Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. ”
• URL do link do botão: #

Design do corpo do texto

• Fonte do corpo: Montserrat
• Peso da fonte do corpo: Semi negrito
• Alinhamento do corpo do texto: direita
• Cor do corpo do texto: # 444444
• Tamanho do corpo do texto: 22 px (desktop), 18 px (tablet)
• Altura da linha corporal: 1,3em

Botão

• Tamanho do texto do botão: 14 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 6148df
• Largura da borda do botão: 0 px
• Raio da borda do botão: 80px
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: TT
• Preenchimento do botão: 12 px superior, 12 px inferior, 22 px à esquerda, 22 px à direita

Largura, Alinhamento, Preenchimento e Bordas

• Largura: 100%
• Largura máxima: 320px
• Alinhamento do Módulo: direito
• Preenchimento: 10 px à esquerda, 10 px à direita
• Largura da borda superior: 10 px
• Cor da borda superior: #eeeeee
• Largura da borda inferior: 10 px
• Cor da borda inferior: #eeeeee

Adicionando o CTA da barra lateral à coluna da direita

Para criar o CTA para a coluna certa, copie o que acabamos de criar e cole na coluna da extrema direita. Em seguida, atualize as configurações da duplicata da seguinte maneira:

• Alinhamento do corpo do texto: esquerda
• Alinhamento do Módulo: esquerda

Atualizar as configurações da coluna 3

Para este CTA na coluna da direita, vamos adicionar uma margem superior à coluna a fim de estabelecer uma posição inicial do CTA da barra lateral em um ponto mais abaixo na página.

Primeiro, abra as configurações da coluna 3 e adicione a mesma classe CSS que adicionamos à coluna 1:

• Classe CSS: sticky-cta

Em seguida, adicione o seguinte CSS personalizado ao elemento principal:

Área de Trabalho

margin-top: 50%

Tábua

margin-top: 0%

Isso nos dará um ponto de partida diferente para o CTA aderente na coluna da direita, que é igual a 50% da largura da linha. Sinta-se à vontade para ajustar esse valor conforme necessário para sua própria postagem no blog.

Adicionando o CSS personalizado ao modelo com um módulo de código

Para obter nosso posicionamento “fixo” para nossos CTAs da barra lateral, precisamos adicionar algum CSS personalizado. Para fazer isso, crie um novo módulo de código no módulo de conteúdo post (ou em qualquer lugar da página).

Em seguida, cole o seguinte CSS na caixa de código:

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

O deslocamento superior neste código é um cálculo que posiciona o CTA verticalmente centralizado na página durante a rolagem. O 50vh tem basicamente a metade da altura da janela do navegador e o 130px é quase a metade da altura do CTA. Se você tiver um CTA com altura maior / menor, será necessário ajustar 130px para cima ou para baixo.

Salvar configurações

Quando terminar, salve o layout do modelo.

Em seguida, salve as configurações do criador de temas

Resultado final

Para ver o resultado final, visite uma postagem do blog que usa o modelo.

E é assim que os CTAs da barra lateral aderentes ficarão na rolagem. Você pode ver como isso funcionaria melhor para um conteúdo de postagem mais longo.

E aqui está na tela do celular.

Pensamentos finais

Esses CTAs da barra lateral aderente são uma alternativa refrescante à barra lateral tradicional. Eles se encaixam bem no design minimalista porque são menos intrusivos e não dão à postagem uma sensação desordenada. Além disso, você pode posicionar o CTA mais abaixo na página para que apareça gradualmente e se fixe na rolagem, fazendo com que se destaque um pouco mais para os visitantes. E não se esqueça. Você pode substituir o CTA por qualquer módulo Divi ou combinação de módulos para criar praticamente qualquer coisa que você quiser. Você também pode optar por manter apenas um CTA de um lado. Parece ter muitos aplicativos.

Espero que isso ajude a melhorar a forma como você exibe CTAs em seus modelos de postagem no futuro.

Para obter mais inspiração, verifique nossas postagens semelhantes sobre elementos fixos.

Estou ansioso para ouvir de você nos comentários.

Saúde!