Criação de um CTA “Primeiros passos” que revela várias opções ao passar o mouse
Publicados: 2019-06-26Muitas empresas incluirão um CTA de “primeiros passos” na página inicial. Geralmente é a principal chamada à ação na página, uma vez que conduzirá o usuário por algum tipo de processo pretendido. Pode ser um simples botão “comece agora” que leva a outra página. Ou pode ser uma seção de uma página que inclui instruções de “introdução” e / ou diferentes opções que o usuário pode tomar para iniciar o processo pretendido pela empresa.
Neste tutorial, mostraremos como criar um CTA “Primeiros passos” que revelará várias opções de “Primeiros passos” ao passar o mouse. Usando Divi, projetaremos uma seção para aparecer como um botão grande. Então, ao passar o mouse sobre o botão, as opções parecerão muito semelhantes a um controle deslizante vertical revelaria o próximo slide.
O design é elegante e a funcionalidade pode ser útil de várias maneiras.
Vamos começar.
Espiada
Aqui está uma rápida olhada no CTA “Primeiros passos” que construiremos neste tutorial.
Baixe o CTA Divi Layout “Primeiros passos” GRATUITAMENTE
Para colocar suas mãos no design deste tutorial, 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!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Implementando o design de CTA “Comece aqui” na Divi
A ideia básica por trás desse design é mover o conteúdo de uma seção para cima ao passar o mouse sobre a seção. Para fazer isso, precisamos ter certeza de que nossa seção tem uma altura fixa com o estouro oculto. Isso ocultará as opções de CTA antes do estado de foco. Em seguida, podemos usar a margem para posicionar nossos módulos e o preenchimento superior para mover o conteúdo para a visualização ao passar o mouse.
Vamos começar com a seção.
Criando a Seção
Para começar, crie uma seção regular com uma linha de uma coluna. Então, antes de adicionar qualquer módulo, vamos atualizar as configurações da seção.
Abra as configurações da seção e atualize o seguinte:
Cor de fundo: # 2b87da
Largura: 90%
Largura máxima: 1100 px
Alinhamento da seção: centro
Margem: 6vw superior, 6vw inferior (apenas para dar um pouco de espaço para respirar)
Preenchimento (desktop): 300px superior, 0px inferior
Preenchimento (tablet): 0px superior, 15% inferior
Em seguida, adicione alguns cantos arredondados. Isso criará nosso design semelhante a um botão sempre que dermos à seção uma altura máxima.
Cantos arredondados: 140 px (desktop), 20 px (pairar), 10 px (tablet)
Em seguida, dê a ele uma sombra de caixa (veja a imagem).
Não vamos adicionar todas as configurações necessárias para o design final neste momento. Precisamos voltar e dar uma altura fixa e um efeito de pairar. Mas, por enquanto, vamos adicionar o conteúdo.
Criação da primeira linha de conteúdo
Abra as configurações para a linha de uma coluna que você criou e atualize o seguinte:
Largura: 100%
Preenchimento: 0px superior, 0px inferior, 5% à esquerda, 5% à direita
Dentro da linha de uma coluna, adicione um módulo de texto.
Em seguida, adicione o seguinte cabeçalho h2 ao conteúdo do corpo.
<h2>Get Started Here...</h2>
Atualize as configurações de design da seguinte forma:
Fonte do título 2: Nunito
Peso da fonte do cabeçalho 2: negrito
Cor do texto do título 2: #ffffff
Tamanho do texto do título 2: 78 px (desktop e tablet), 46 px (telefone)
Largura máxima: 500px
Altura: 300 px (desktop), automático (tablet e telefone)
Margem: -300 px superior (desktop), 0 px superior (tablet e telefone)
Preenchimento: 7% superior
A altura de 300 px e a margem superior de -300 px trazem o módulo de texto para preencher o preenchimento superior de 300 px da seção. Posteriormente, sempre que removermos o preenchimento da seção superior ao passar o mouse, o módulo de texto rolará para cima acima da seção.
Criação da segunda linha de conteúdo
A segunda linha de conteúdo é onde adicionaremos nossas opções de CTA. Vá em frente e adicione uma nova linha com um layout de três colunas.
Em seguida, atualize as configurações de linha da seguinte forma:
Largura: 100%
Largura máxima: 100%
Preenchimento: 0 px superior, 0 px inferior
Em seguida, adicione um módulo de sinopse na coluna 1.
Em seguida, atualize as configurações de sinopse da seguinte maneira:
Retire o texto do corpo padrão e deixe o Título.
Em seguida, adicione um ícone de imagem (90 X 90). Ou você pode usar um ícone Divi normal, se desejar.
Adicione um plano de fundo e atualize o design do texto do título.
Cor de fundo: #ffffff
Fonte do título: Nunito
Peso da fonte do título: Ultra negrito
Estilo da fonte do título: TT
Alinhamento do Texto do Título: Centro
Cor do texto do título: # 2b87da
Tamanho do texto do título: 14px
Antes de tornar a sinopse circular, primeiro precisamos dar a ela uma altura e largura iguais. Então, podemos usar o espaçamento para alinhar a sinopse e o conteúdo da sinopse no centro.
Largura do conteúdo: 200 px (desktop), 250 px (tablet)
Largura: 250 px (desktop), 300 px (tablet)
Alinhamento do Módulo: centro
Altura: 250 px (desktop), 300 px (tablet)
Margem: 25px superior, 0px inferior
Preenchimento: 50 px superior (desktop), 75 px superior (tablet e telefone)
Para completar o desenho do círculo, dê à sinopse um canto arredondado e uma sombra de caixa.
Cantos arredondados: 50%
Sombra da caixa: veja a imagem
Isso resolve nossa primeira sinopse. Para criar os próximos dois. Copie a sinopse e cole nas colunas 2 e 3. Em seguida, atualize o ícone da imagem para cada uma. Deve ser parecido com o seguinte:
Toques finais para a seção
Para concluir o design do CTA “Primeiros passos”, precisamos atualizar a seção um pouco mais. Atualize as seguintes configurações de seção:
Altura: 300 px (desktop), automático (tablet e telefone)
Excesso horizontal: oculto
Estouro vertical: oculto
Isso manterá a seção com a mesma altura do conteúdo das linhas 1 e 2. Ocultar o estouro manterá o conteúdo da linha 2 oculto até que seja visualizado ao passar o mouse.
Para visualizar o conteúdo da linha 2, precisamos remover o preenchimento superior da seção ao passar o mouse.
Preenchimento (pairar): 0px no topo
Agora verifique o resultado até agora. O conteúdo irá rolar para cima para revelar o conteúdo da linha 2, que mostra as três opções de CTA.
Para fazer a seção parecer mais como um botão, podemos usar as opções de transformação para reduzi-la e, em seguida, trazê-la de volta ao tamanho normal ao passar o mouse. Atualize as seguintes opções de transformação para a seção.
Escala de transformação (desktop): 70%
Escala de transformação (pairar): 100%
Escala de transformação (tablet): 100%
Agora adicione um gráfico de imagem de fundo (500 X 500) para ocupar o tamanho certo da seção.
Imagem de fundo: inserir imagem
Tamanho da imagem de fundo: tamanho real
Posição da imagem de fundo: centro direito (desktop), canto superior direito (tablet), canto superior esquerdo (telefone)
Adicionar URLs de link aos Blurbs e dimensioná-los ao passar o mouse
Visto que nossas sinopses estão realmente servindo como botões de círculo, precisamos adicionar URLs de link de módulo a cada uma das sinopses. Obviamente, você precisará adicionar o seu próprio para atender às suas necessidades.
Como as sinopses estão ocultas no construtor visual, alterne o modo de visualização wireframe e atualize cada uma das configurações de sinopses com o URL do link do módulo.
Em seguida, permaneça no modo de visualização de wireframe e use multiselect para selecionar todas as três sinopses. E abra as configurações de uma das sinopses para atualizar as configurações do elemento para todos os três. Em seguida, atualize a opção de transformação da seguinte maneira:
Escala de transformação (pairar): 105%
É isso!
O Resultado Final
Vamos dar uma olhada no design final do CTA “Primeiros passos”.
E aqui está o design no tablet e no telefone.
Pensamentos finais
O CTA “Primeiros passos” é comum na web hoje. Esperançosamente, este tutorial o ajudará a avançar para o próximo nível. E não tenha medo de pensar em outras maneiras de usar essa funcionalidade. Pense nisso. Você pode adicionar qualquer conteúdo que quiser à seção!
Sinta-se à vontade para compartilhar suas ideias nos comentários abaixo.
Estou ansioso para ouvir de você.
Saúde!