Criação de CTAs deslizantes com configurações de alinhamento e animação de linha de Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível. Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar CTAs slide-in com o alinhamento de linha do Divi e configurações de animação usando o Cleaning Company Layout Pack.

Para ajudar a fazer isso, começaremos removendo todas as animações que já estão lá. Dessa forma, podemos destacar as frases de chamariz que aparecem no slide.

Vamos lá!

Antevisão

Vamos dar uma olhada nos três exemplos diferentes que vamos tratar neste artigo:

Carregar página inicial da empresa de limpeza

Adicionar nova página e mudar para o Visual Builder

Conforme mencionado antes, usaremos o Cleaning Company Layout Pack para criar este tutorial, mas sinta-se à vontade para usar essa abordagem para qualquer site que estiver construindo. Adicione uma nova página, insira o título da página e mude para o Visual Builder imediatamente.

Carregar página inicial da empresa de limpeza

Depois de fazer isso, você verá três opções aparecerem na tela. Você pode começar a construir do zero, escolher um layout predefinido ou clonar uma página existente. Escolha a segunda opção.

Pesquise o pacote de layout da empresa de limpeza, selecione o layout da página de destino e carregue-o em sua página.

Removendo todas as configurações de animação na página

Localizar seção na página

Depois que o layout for carregado em sua página, vá em frente e localize a seção a seguir.

Remover Animação

Abra suas configurações e remova a animação que já está lá.

Estenda o estilo a todas as seções

Para economizar tempo, vamos estender esse estilo de animação a todos os elementos de design da página. Começaremos com as seções em nossa página clicando com o botão direito, selecionando 'Estender estilos de animação'. Aplique-o a todas as seções da página e clique em 'Estender'.

Estender estilo para todas as linhas

Repita as mesmas etapas, mas em vez disso, aplique-as a todas as linhas da página.

Estender estilo a todos os módulos

Por último, aplique-o também a todos os módulos da página.

Criando CTA # 1

Adicionar nova linha

Localização

Vamos começar a criar o primeiro CTA de slide! Adicione uma nova linha na parte inferior da seguinte seção:

Estrutura da Coluna

Escolha a seguinte estrutura de coluna para a linha que você acabou de adicionar:

Alinhamento de linha

Vamos empurrar a linha para a esquerda para ajudar a criar o efeito deslizante.

• Alinhamento de linha: esquerda

Dimensionamento

Também diminuiremos a largura de nossa linha.

• Usar largura personalizada: Sim
• Largura personalizada: 500px

Espaçamento

E para se livrar do espaço em branco desnecessário, remova o preenchimento superior e inferior da linha.

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

Adicionar módulo de apelo à ação

Adicionar cópia

Agora podemos adicionar nosso Módulo de Chamada para Ação! Adicione algum conteúdo de sua escolha.

Adicionar Link

Em seguida, adicione um link ao seu Módulo CTA. Se você ainda não tem um link para redirecionar, pode simplesmente inserir '#'. Sem adicionar algo a esta caixa, você não conseguirá ver o botão, então certifique-se de não o deixar vazio.

Remover cor de fundo

O Módulo CTA tem por padrão uma cor de fundo. Vá em frente e remova-o nas configurações de fundo.

Copiar Gradiente de Seção

Abra a seção que contém o fundo gradiente azul. Sem alterar nada sobre isso, clique com o botão direito e copie as configurações.

Colar gradiente no módulo CTA

Cole este fundo gradiente no Módulo CTA.

Configurações de texto do título

Abra as configurações do Módulo CTA novamente, vá para as configurações de texto do título e faça algumas alterações para corresponder ao pacote de layout:

• Fonte do título: Ubuntu
• Peso da fonte do título: negrito
• Tamanho do texto do título: 24px (desktop e tablet), 16px (telefone)
• Altura da linha de título: 1,2em

Configurações do corpo do texto

Altere o peso da fonte do corpo também.

• Peso da fonte do corpo: Semi negrito

Configurações de botão

Altere as configurações do botão a seguir.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 18 px
• Cor do texto do botão: # 557df3
• Cor de fundo do botão: #FFFFFF
• Largura da borda do botão: 10 px
• Cor da borda do botão: #FFFFFF
• Raio da borda do botão: 0 px
• Fonte do botão: Ubuntu
• Intensidade da fonte: Negrito

Espaçamento

Aumente o preenchimento do módulo também.

• Enchimento superior: 80px
• Preenchimento inferior: 80 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

Em seguida, adicione um pouco de raio de borda superior direito e inferior direito nas configurações de borda.

• Superior direito: 100px
• Inferior direito: 100px

Sombra da caixa

Para criar mais profundidade, vamos adicionar uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 71 px
• Força de propagação da sombra da caixa: -5px

Animação

Por último, mas não menos importante, dê ao seu Módulo CTA um efeito de animação.

• Direção da animação: direita
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Linear

Criando CTA # 2

Clonar linha da CTA # 1 e fazer alterações

Clone Row

Para criar o segundo exemplo, vá em frente e clone a primeira linha.

Arraste para a seção

Role a página para baixo e coloque a duplicata bem aqui:

Remover o acolchoamento superior da seção

Abra as configurações da seção em que você colocou a linha e remova o preenchimento superior.

• Preenchimento superior: 0 px

Remover o raio da borda superior esquerda da seção

Vá para as configurações de Borda a seguir e remova o raio da borda superior esquerda também.

Remover o raio da borda superior direita da CTA

Em seguida, abra o Módulo CTA e remova o raio da borda superior direita para permitir que a seção e o módulo se misturem.

Alterar Animação

Para este slide-in CTA, vamos usar uma animação diferente. Sinta-se à vontade para brincar com outras opções de animação também.

• Direção da Animação: Centro
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Linear

Criando CTA # 3

Clonar linha da CTA # 1 e fazer alterações

Clone Row

Para criar o último exemplo, vamos clonar a linha mais uma vez.

Arraste para a seção

Coloque a duplicata na seguinte seção:

Alterar alinhamento de linha

Abra as configurações de linha do módulo e altere o alinhamento para a direita.

• Alinhamento de linha: direita

Remover fundo gradiente de CTA

Remova o fundo gradiente do módulo também.

Em vez disso, use a cor de fundo

Use uma cor de fundo.

• Cor de fundo: # f2835a

Alterar a cor do texto do botão

Para corresponder à cor de fundo, altere também a cor do texto do botão.

• Cor do texto do botão: # f2835a

Remover CTA Border Radius

Estamos transformando o Módulo CTA em um quadrado, removendo todo o raio da borda que foi fornecido.

Alterar Animação

Altere as configurações de animação a seguir.

• Direção da animação: baixo
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Linear

Remover o acolchoamento inferior da seção

Por último, mas não menos importante, vamos empurrar o módulo para a parte inferior da seção removendo o preenchimento inferior da seção em que está colocado e pronto!

• Preenchimento inferior: 0 px

Antevisão

Vamos dar uma olhada final nos três exemplos de CTAs slide-in que criamos.

Pensamentos finais

Nesta postagem, mostramos como criar CTAs de slides usando o pacote de layout da empresa de limpeza da Divi. Começamos removendo as animações que já estão presentes na página. Depois disso, criamos três CTAs slide-in para chamar a atenção. Esta postagem do blog é parte de nossa iniciativa de design Divi, onde tentamos colocar algo em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!