Como usar o Divi para guiar as pessoas por diferentes etapas fixas
Publicados: 2021-01-03Ao tentar convencer os visitantes a entrarem em contato por meio do seu site, dar a eles os incentivos certos é fundamental. Ao pensar em incentivos, apelos à ação claros e irresistíveis surgem imediatamente. Mas os CTAs geralmente são a última parte do processo de aquisição. Você provavelmente construirá seu caminho mostrando o valor da sua empresa. Uma das melhores maneiras de fazer isso é compartilhando sua abordagem e proposta de valor exclusiva. Se você está procurando uma maneira fácil de projetar sua abordagem, vai adorar este tutorial. Hoje, mostraremos como incluir diferentes etapas fixas que mudam enquanto as pessoas navegam e lêem. Você também poderá baixar 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 Sticky Steps GRATUITAMENTE
Para colocar suas mãos no layout de etapas aderentes gratuitas, 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.
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.
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!
1. Criar Projeto de Seção
Adicionar seção regular
Fundo Gradiente
Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações dessa seção e aplique um fundo gradiente:
- Cor 1: #ffffff
- Cor 2: # e5e5e5
- Tipo de gradiente: Linear
- Direção do gradiente: 150deg
Imagem de fundo
Faça upload de uma imagem de plano de fundo a seguir. Você pode encontrar o que estamos usando ao longo deste tutorial na pasta de download que você encontra no início deste post. Você pode usar a imagem de fundo gratuitamente e sem quaisquer restrições.
- Tamanho da imagem de fundo: Ajustar
- Posição da imagem de fundo: canto superior esquerdo
Espaçamento
Remova o preenchimento inferior padrão da seção adicionando “0px”.
- Preenchimento inferior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando a primeira linha à seção usando a seguinte estrutura de coluna:
Cor de fundo
Sem adicionar módulos ainda, abra as configurações de linha e altere a cor de fundo.
- Cor de fundo: rgba (130,100,239,0,09)
Dimensionamento
Vá para a guia de design da linha e modifique as configurações de dimensionamento de acordo:
- Equalize Alturas de Coluna: Sim
- Alinhamento de linha: centro
Espaçamento
Aplique alguns valores de espaçamento personalizados também.
- Margem superior: 5%
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Fronteira
Em seguida, vá para as configurações de borda e use alguns cantos arredondados.
- Todos os cantos: 10px
Transbordamentos
Estamos alterando o estouro de linha para visível também. Isso garantirá que tudo o que ultrapassar o contêiner de linha não será ocultado.
- Excesso horizontal: visível
- Estouro vertical: visível
Configurações da coluna 1
Espaçamento
Em seguida, abra as configurações da coluna 1 e adicione algum preenchimento personalizado superior e inferior.
- Enchimento superior: 5%
- Estofamento inferior: 5%
Configurações da coluna 2
Fundo Gradiente
Continuando, vamos adicionar um fundo gradiente à coluna 2.
- Cor 1: # 7b47ff
- Cor 2: # 6929aa
- Tipo de gradiente: Linear
- Direção do gradiente: 158 graus
Espaçamento
Adicionaremos um preenchimento personalizado a essa coluna também.
- Enchimento superior: 5%
- Estofamento inferior: 5%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Fronteira
Junto com alguns cantos arredondados.
- Todos os cantos: 10px
Escala de transformação
E aumentaremos o tamanho da coluna nas configurações de transformação, aplicando os seguintes valores de escala de transformação:
- Ambos: 107%
Adicionar Módulo de Texto à Coluna 1
Adicionar conteúdo H3
É hora de adicionar módulos, começando com um Módulo de Texto na coluna 1. Insira algum conteúdo H3 de sua escolha.
Configurações de texto H3
Vá para a guia de design do módulo e altere as configurações de texto H3 de acordo:
- Fonte do título 3: Poppins
- Cor do texto do título 3: # 6929aa
- Tamanho do texto do título 2: 35px
- Cabeçalho 3 espaçamento entre letras: -1 px
Adicionar Módulo Divisor à Coluna 1
Visibilidade
A seguir, iremos um Módulo Divisor para a coluna 1. 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 a cor da linha.
- Cor da linha: # f5ca4e
Dimensionamento
Modifique as configurações de dimensionamento também.
- Peso do divisor: 6px
- Largura: 20%
- Altura: 6px
Fronteira
Conclua as configurações do módulo, incluindo alguns cantos arredondados nas configurações de borda.
- Todos os cantos: 20px
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo
Na coluna 2, o único módulo de que precisamos é um Módulo de Texto com algum conteúdo de descrição.
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:
- Fonte do texto: Playfair Display
- Tamanho do texto: 16px
- Altura da linha de texto: 2.1em
Espaçamento
Conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados.
- Enchimento superior: 5%
- Estofamento inferior: 5%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Clone a linha inteira quantas vezes forem necessárias
Depois de concluir a primeira linha, você pode cloná-la quantas vezes quiser, dependendo de quantas informações deseja compartilhar sobre sua primeira etapa.
Alterar todas as cópias
Certifique-se de alterar todas as cópias em linhas duplicadas.
2. Adicionar Step Row Bar to Bottom of Section
Adicionar nova linha
Estrutura da Coluna
Agora que temos todas as linhas explicativas no lugar, podemos adicionar nossa barra de linha de etapa fixa. Adicione uma nova linha usando a seguinte estrutura de coluna:
Fundo Gradiente
Abra as configurações de linha e use um fundo gradiente.
- Cor 1: # ffdf51
- Cor 2: # e5ac49
- Tipo de gradiente: Linear
- Direção do gradiente: 150deg
Dimensionamento
Vá para a guia de design da linha e altere as configurações de dimensionamento da seguinte forma:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Equalize Alturas de Coluna: Sim
- Alinhamento de linha: centro
Espaçamento
Aplique alguns valores de espaçamento personalizados a seguir.
- Margem superior: 5%
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Fronteira
Em seguida, vá para as configurações de borda e adicione alguns cantos arredondados.
- Todos os cantos: 10px
Sombra da caixa
Aplique a seguinte sombra de caixa também:
- Força do desfoque de sombra da caixa: 50 px
- Cor da sombra: rgba (0,0,0,0.13)
Transbordamentos
Em seguida, navegue até a guia avançada e defina os transbordamentos como visíveis.
- Excesso horizontal: visível
- Excesso vertical: Visível
Espaçamento da coluna 2
Em seguida, abra as configurações da coluna 2 e use algum preenchimento personalizado superior e inferior.
- Enchimento superior: 1%
- Estofamento inferior: 1%
Espaçamento da coluna 3
Estamos adicionando algum preenchimento personalizado superior e inferior à coluna 3 também.
- Enchimento superior: 2%
- Estofamento inferior: 2%
Adicionar Módulo de Texto à Coluna 1
Adicionar conteúdo
É hora de adicionar módulos à nossa barra de linha de etapas fixas. Adicione um Módulo de texto à coluna 1 e mencione a etapa na caixa de conteúdo.
Fundo Gradiente
Em seguida, aplique um fundo gradiente.
- Cor 1: # 7b47ff
- Cor 2: # 6929aa
- Tipo de gradiente: Linear
- Direção do gradiente: 158 graus
Configurações de texto
Vá para a guia de design do módulo e estilize o texto de acordo:
- Fonte do texto: Poppins
- Peso da fonte do texto: negrito
- Cor do texto: #ffffff
- Tamanho do texto: 27 px
Dimensionamento
Faça algumas alterações nas configurações de dimensionamento também.
- Largura: 60%
- Alinhamento do Módulo: Centro
Espaçamento
Em seguida, adicione um pouco de preenchimento personalizado superior e inferior às configurações de espaçamento.
- Enchimento superior: 20 px
- Preenchimento inferior: 20 px
Fronteira
Adicione alguns cantos arredondados às configurações de borda a seguir.
- Todos os cantos: 10px
Sombra da caixa
Também estamos usando uma sombra de caixa sutil.
- Cor da sombra: rgba (0,0,0,0.3)
Transformar Traduzir
E concluiremos as configurações do módulo reposicionando ligeiramente o módulo usando as configurações de conversão de transformação do Divi.
- Certo: -20px
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo H2
Na coluna 2, estamos adicionando um Módulo de texto com algum conteúdo H2 descrevendo a etapa em que estamos.
Configurações de texto H2
Vá para a guia de design do módulo e defina o estilo das configurações de texto H2 da seguinte maneira:
- Fonte do título 2: Poppins
- Peso da fonte do cabeçalho 2: médio
- Alinhamento de texto do título 2:
- Desktop: Esquerda
- Tablet e telefone: centro
- Cor do texto do título 2: # 6d40ed
- Cabeçalho 2 espaçamento entre letras: -1 px
Espaçamento
Adicione um pouco de preenchimento personalizado superior e inferior também.
- Enchimento superior: 5%
- Estofamento inferior: 5%
Adicionar Módulo de Texto à Coluna 3
Adicionar conteúdo
Passe para a próxima e última coluna. Adicione um Módulo de Texto com algum conteúdo de descrição.
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto de acordo:
- Fonte do texto: Playfair Display
- Peso da fonte do texto: negrito
- Cor do texto: rgba (109,64,237,0,46)
- Tamanho do texto: 20px
- Alinhamento de texto:
- Desktop: Esquerda
- Tablet e telefone: centro
3. Aplique efeitos pegajosos à barra de fileira da etapa
Configurações de linha fixa
Agora que nosso design de barra de fileira de degraus fixos foi concluído, é hora de fazê-lo aderir à parte inferior. Abra as configurações de linha, vá para a guia avançada e aplique as seguintes configurações de posição fixa:
- Posição pegajosa: grudar no fundo
- Deslocamento inferior aderente: 1px
- Limite de aderência superior: Seção
- Compensação dos elementos aderentes circundantes: Sim
- Estilos padrão de transição e fixos: Sim
Filtro de linha aderente
Em um estado padrão, não queremos que a barra de linha fique visível. Assim que ficar pegajoso, no entanto, queremos que apareça. Para que isso aconteça, vamos modificar o filtro de opacidade nas configurações de filtros:
- Padrão: 0%
- Pegajoso: 100%
4. Reutilize a seção inteira para as próximas etapas
Clonar seção quantas vezes forem necessárias
Agora que nossa primeira seção, que é dedicada à etapa 1, foi criada, podemos reutilizar toda a seção com base no número de etapas que temos.
Alterar todas as cópias em seções duplicadas
Certifique-se de alterar todas as cópias nas seções duplicadas. É isso!
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 ser criativo com o design da abordagem do seu site. Mais especificamente, mostramos como usar as opções adesivas do Divi para criar diferentes barras de etapas adesivas que ajudarão seus visitantes a navegar por diferentes partes de sua abordagem. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à 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.