Como revelar uma coluna CTA em um estado pegajoso com Divi

Em um determinado ponto ao criar um design de página, você pode encontrar uma lista de serviços, cursos ou algo semelhante que deseja compartilhar de forma interativa. O design que você está usando para o conteúdo da lista desempenha um papel muito importante na forma como os visitantes digerem o conteúdo. E com a maioria das listas, você também vai querer incluir uma frase de chamariz que conecte os pontos. Se você está procurando uma maneira criativa de fazer isso, vai adorar este tutorial.

Hoje, mostraremos como revelar uma coluna CTA em um estado pegajoso com Divi. Assim que o CTA toca o final da coluna, o efeito pegajoso para, o que proporciona uma experiência fácil em que as pessoas podem continuar lendo os itens da lista e decidirem agir sempre que quiserem, sem ter que rolar para cima ou para baixo para encontrar o CTA . Também compartilharemos o arquivo JSON gratuitamente!

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 seção CTA da coluna adesiva GRATUITAMENTE

Para colocar as mãos no layout da seção CTA da coluna adesiva grátis, 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!

Adicionar nova seção

Cor de fundo

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e aplique uma cor de fundo branca.

• Cor de fundo: #ffffff

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique alguma margem inferior.

• Margem inferior: 5%

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

Adicione um Módulo de Texto com algum conteúdo H2 de sua escolha.

Configurações de texto H2

Vá para a guia de design do módulo e altere as configurações de texto H2 de acordo:

• Fonte do título 2: Alata
• Peso da fonte do cabeçalho 2: negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2:
  • Desktop: 55px
  • Tablet: 40px
  • Telefone: 30px

Adicionar Módulo Divisor à Coluna

Visibilidade

Logo abaixo do Módulo de Texto, adicione um Módulo Divisor e certifique-se de que a opção “Mostrar Divisor” esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design do módulo e altere as configurações de linha da seguinte forma:

• Cor da linha: # 3a7a84
• Estilo de Linha: Duplo

Dimensionamento

Conclua as configurações do módulo, modificando as configurações de dimensionamento de acordo:

• Peso do divisor: 10px
• Largura: 8%
• Alinhamento do Módulo: Centro
• Altura: 10px

Adicionar linha # 2

Estrutura da Coluna

Continue adicionando outra linha logo abaixo da anterior usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Equalize Alturas de Coluna: Sim
• Largura: 95%
• Largura máxima: 2580 px

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

Configurações da coluna 1

Imagem de fundo

Em seguida, abra as configurações da coluna 1 e aplique uma imagem de fundo.

• Tamanho da imagem de fundo: capa

Fronteira

Vá para a guia de design da coluna e aplique alguns cantos arredondados.

• Todos os cantos: 20px

Adicionar Módulo Blurb à Coluna 2

Adicionar conteúdo

É hora de adicionar módulos, começando com um Módulo Blurb na coluna 2. Adicione algum conteúdo de sua escolha.

Selecione o ícone

Selecione um ícone a seguir.

Cor de fundo

Em seguida, aplique uma cor de fundo branca.

• Cor de fundo: #FFFFFF

Configurações de ícone

Vá para a guia de design do módulo e altere as configurações do ícone de acordo:

• Cor do ícone: # 3a7a84
• Posicionamento de imagem / ícone: esquerda

Configurações de texto do título

Em seguida, defina o estilo das configurações de texto do título.

• Nível do título do título: H3
• Fonte do título: Alata
• Peso da fonte do título: negrito
• Cor do texto do título: # 000000
• Tamanho do texto do título:
  • Desktop: 35px
  • Tablet: 30px
  • Telefone: 20px

Configurações do corpo do texto

Faça algumas alterações nas configurações do corpo do texto também.

• Fonte do corpo: Karla
• Tamanho do corpo do texto:
  • Desktop: 17px
  • Tablet: 15px
  • Telefone: 14px
• Altura da linha corporal: 2,5em

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Largura do conteúdo: 100%

Espaçamento

E aplique alguns valores de preenchimento personalizados às configurações de espaçamento.

• Enchimento superior: 20%
• Estofamento inferior: 20%
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Fronteira

A seguir, adicionaremos alguns cantos arredondados às configurações de borda.

• Todos os cantos: 20px

Sombra da caixa

E incluiremos uma sombra de caixa sutil.

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

Animação

Continue removendo a animação padrão do Módulo Blurb nas configurações de animação a seguir.

• Animação de imagem / ícone: sem animação

Blurb Title CSS

E conclua as configurações do módulo adicionando uma linha de código CSS à caixa CSS do título do blurb na guia avançada.

margin-bottom: 20px;

Clonar módulo do Blurb duas vezes

Depois de concluir o primeiro Módulo Blurb, clone o Módulo Blurb quantas vezes você precisar.

Mudar o Conteúdo

Altere o conteúdo em cada módulo duplicado.

Adicionar Módulo CTA à Coluna 1

Adicionar conteúdo

Na coluna 1, o único módulo de que precisamos é um Módulo de Chamada para Ação. Adicione algum conteúdo de sua escolha.

Adicionar link de botão

Adicione um link de botão a seguir.

Fundo Gradiente

Em seguida, aplique um fundo gradiente.

• Cor 1: rgba (59,120,130,0,53)
• Cor 2: # 112730
• Tipo de gradiente: Linear
• Direção do gradiente: 161deg

Configurações de texto do título

Vá para a guia de design do módulo e faça as seguintes alterações nas configurações de texto do título:

• Nível do título do título: H3
• Fonte do título: Alata
• Peso da fonte do título: negrito
• Cor do texto do título: #ffffff
• Tamanho do texto do título:
  • Desktop: 50px
  • Tablet e telefone: 30px

Configurações de botão

Defina o estilo do botão a seguir.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 20px
  • Tablet: 17px
  • Telefone: 15px
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Alata
• Peso da fonte do botão: negrito

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px
• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 3px
• Cor da sombra: #ffffff

Dimensionamento

Passe para as configurações de dimensionamento do módulo e aplique as seguintes alterações:

• Largura:
  • Desktop: 95%
  • Tablet e telefone: 100%
• Alinhamento do Módulo: Centro

Espaçamento

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

• Enchimento superior: 150px
• Preenchimento inferior: 150 px

Fronteira

Inclua também alguns cantos arredondados.

• Todos os cantos: 20px

Transformar Traduzir

Conclua as configurações do módulo aplicando as seguintes configurações de conversão de transformação:

• Direito:
  • Desktop: -25px
  • Tablet e telefone: 0px

Aplicar efeito aderente ao módulo CTA

Configurações fixas

Agora que todos os elementos estão no lugar, é hora de aplicar o efeito adesivo. Abra o Módulo CTA e aplique as seguintes configurações fixas:

• Posição pegajosa:
  • Desktop: Fique no topo
  • Tablet e telefone: não cole
• Deslocamento superior fixo: 50px
• Limite inferior de aderência: coluna
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Opacidade

Agora que o módulo está fixo, podemos aplicar estilos fixos. Vá para as configurações de filtros e aplique as seguintes configurações de filtro de opacidade:

• Opacidade padrão:
  • Desktop: 0%
  • Tablet e telefone: 100%
• Opacidade pegajosa: 100%

Transição

Por último, mas não menos importante, vamos alterar as configurações de transição na guia avançada. É isso!

• Duração da transição: 800ms
• Curva de velocidade de transição: facilidade

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

Neste post, mostramos como ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como exibir itens de lista de maneira atraente com uma CTA de coluna fixa. Esta abordagem permite que você exiba visualmente todos os itens e tenha uma chamada à ação por perto enquanto seus visitantes estão prontos por meio de seus serviços, cursos ou outros tipos de listas. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à vontade para 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.