Como impulsionar seu CTA com um efeito de rolagem de “rotação vencedora”
Publicados: 2020-05-29É sempre divertido ganhar um prêmio. É por isso que as empresas comercializam seus produtos e serviços on-line, oferecendo coisas gratuitas. Pode ser um cupom para uma sobremesa grátis com seu primeiro pedido ou um e-book grátis quando você se inscreve em uma lista de e-mail. Mas às vezes, até mesmo os brindes podem ser ignorados na web. Adicionar um elegante efeito de rolagem de “giro vencedor” pode ser uma ótima maneira de dar ao CTA a atenção que ele merece, criando uma interação envolvente para os visitantes.
Neste tutorial, mostraremos como aumentar seus CTAs com um efeito de rolagem de “giro vencedor” no Divi. À medida que um usuário rola a página para baixo, o prêmio vencedor gira à vista para revelar a oferta gratuita de uma forma única. E você pode usar isso para promover quase qualquer oferta gratuita que possa imaginar.
Vamos começar.
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs 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 da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Choose a Premade Layout”.
- Selecione o layout da página inicial da padaria e clique para usar o layout.
Depois disso, você estará pronto para começar a criar o CTA com um efeito de rolagem de “giro vencedor” no Divi.
Parte 1: Criando o efeito de rolagem "Rodada vencedora"
Para começar, implante a visualização de camadas no menu de configurações inferior do Divi Builder. Isso ajudará a manter o gerenciamento melhor de nossos elementos de design.
Adicione a seção, linha e colunas
O layout predefinido vem com várias seções com conteúdo já. Vamos adicionar uma nova seção à página onde queremos que o CTA resida. Para este tutorial, adicione uma nova seção regular diretamente na seção intitulada “Serviços”.
Dentro da seção, adicione uma linha de duas colunas.
Configurações de linha
Antes de adicionar qualquer módulo, abra as configurações de linha e atualize o seguinte:
- Largura da calha: 1
- Largura: 94%
- Preenchimento: 10px superior, 10px inferior
- Largura da borda: 1px
- Cor da borda: rgba (0,0,0,0.12)
Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal:
display:flex; align-items: center;
Borda da coluna 1
Depois de concluir as configurações de linha, abra as configurações da coluna 1 e adicione uma borda direita da seguinte maneira:
- Largura da borda direita: 1px
- Cor da borda direita: rgba (0,0,0,0.12)
Criando a seta giratória e o texto usando um módulo de blurb
Em seguida, vamos criar a seta giratória e o texto que servirá como a seta que aponta para a seleção vencedora.
Adicionar Módulo Blurb
Adicione um novo módulo blurb à coluna da esquerda.
Conteúdo do Blurb
Em seguida, atualize o conteúdo da sinopse com um novo título e ícone.
- Título: Você ganhou um
- Ícone: Seta para a direita (veja a imagem)
Blurb Design
Na guia de design, atualize o seguinte:
- Cor do ícone: # a06d51
- Posicionamento de imagem / ícone: esquerda
- Tamanho da fonte do ícone: 80 px (desktop), 50 px (tablet), 40 px (telefone)
- Fonte do título: Patua One
- Peso da fonte do título: negrito
- Tamanho do texto do título: 40 px (desktop), 25 px (tablet), 20 px (telefone)
- Espaçamento entre letras de título: 1px
- Altura da linha do título: 2em
Blurb Custom CSS
Em seguida, mude a ordem do conteúdo da sinopse para que a seta fique à direita em vez de à esquerda, adicionando o seguinte CSS personalizado ao elemento principal:
direction: rtl !important;
Em seguida, retire o preenchimento padrão sob o título do Blurb adicionando este CSS personalizado ao Título do Blurb:
padding-bottom: 0px
Criando as seleções de prêmios com vários Blurbs
Na coluna certa, vamos adicionar nossas seleções de prêmios que irão girar e, eventualmente, definir um vencedor. Para fazer isso, iremos criar e posicionar 4 módulos blurb com um título e uma imagem.
Criando o Blurb 1
Para criar nossa primeira sinopse na coluna 2, duplique a sinopse da coluna 1 e arraste-a para a coluna 2.
Abra as configurações da sinopse duplicada na coluna 2 e retire o CSS personalizado do elemento principal:
Isso trará nosso ícone de volta à esquerda.
Atualizar título e imagem
Em seguida, atualize o título e a imagem da seguinte maneira:
- Título: Cookie GRÁTIS!
- Imagem: imagem de upload (cerca de 100 por 100 pixels)
Blurb 1 Design
Em seguida, atualize as configurações de design da seguinte forma:
- Largura da imagem: 80 px (desktop), 50 px (tablet), 40 px (telefone)
- Largura do conteúdo: 92%
- Largura: 100%
Origem da transformação
Vamos girar as sinopses usando a opção de rotação de transformação, por isso é importante escolher uma origem de transformação que faça sentido para a forma como as sinopses devem ser giradas. Não vamos girar o primeiro, mas isso servirá como um bom modelo no futuro.
Atualize a origem da transformação para a sinopse da seguinte maneira:
- Origem da transformação: centro direito
Você deve remover a animação de imagem / ícone também.
Posição Absoluta
Na guia avançado, forneça a sinopse e a posição absoluta da seguinte maneira:
- Posição: Absoluta
- Localização: centro direito
Criando o Blurb 2
Para criar a segunda sinopse, duplique a sinopse 1.
Blurb rotativo 2
Em seguida, adicione uma rotação de transformação da seguinte maneira:
- Transformar rotação do eixo Z: 25deg
Você verá que a sinopse agora está girada para fora da área de visualização da linha.
Criação e rotação do Blurb 3
Para criar a terceira sinopse, duplique a sinopse 2. Em seguida, atualize a rotação de transformação da seguinte maneira:
- Transformar rotação do eixo Z: 50deg
Criando e girando o Blurb 4
Para criar a quarta sinopse, duplique a sinopse 3. Em seguida, atualize a rotação de transformação da seguinte maneira:
- Transformar rotação do eixo Z: 75deg
Atualize o título e as imagens do Blurb
Quando terminar de adicionar as 4 sinopses, volte e atualize o título e a imagem de cada uma, conforme necessário.
Rotação de rolagem da coluna
Para adicionar o efeito de rolagem, vamos girar a coluna inteira que contém os 4 anúncios girados.
Abra as configurações da coluna 2 e atualize o seguinte:
- Origem da transformação: centro direito
Na guia avançada, abra a guia do efeito de rolagem giratória e atualize o seguinte:
- Habilitar rotação: SIM
- Rotação inicial: -75% (a 15%)
Em seguida, atualize o acionador do efeito de movimento para “Parte superior do elemento”.
Atualizar linha com estouro oculto
Agora volte para as configurações de linha e oculte o estouro do conteúdo atualizando a seguinte configuração de linha:
- Excesso horizontal: oculto
- Estouro vertical: oculto
Parte 2: Criação do CTA do prêmio
Para esta última parte do tutorial, vamos criar um CTA que vai mostrar informações sobre o prêmio e um botão. E vamos adicionar um efeito de rolagem para mostrar o CTA depois que a animação do “giro vencedor” for concluída. Isso irá imitar um tipo surpreendente de efeito.
Adicione a linha
Para começar, adicione uma linha de uma coluna diretamente abaixo da linha que acabamos de criar.
Adicionar Módulo de Texto
Para adicionar o conteúdo do nosso CTA, vamos copiar um módulo de texto do layout predefinido na página. Encontre e copie o módulo de texto com o título “Loja Online”.
Em seguida, cole-o na linha que você acabou de criar.
Design de Texto
Atualize o design do texto da seguinte maneira:
- Fonte do texto: PT Sans
- Peso da fonte do texto: negrito
- Tamanho do texto do texto: 16px
- Altura da linha de texto: 2em
- Alinhamento de Texto: Centro
Adicionar botão CTA
Em seguida, encontre o botão na parte superior do layout predefinido e copie-o.
Em seguida, cole-o diretamente no módulo de texto.
Efeito de rolagem de linha
Para mostrar o CTA após a "rodada vencedora" selecionar o prêmio, abra as configurações de linha e atualize o seguinte efeito Scroll:
Na guia Fading in and Out ...
- Habilitar Fading In e Out: SIM
- Opacidade inicial: 0% (a 50%)
- Opacidade média: 100% (a 55%)
Resultado final
Pensamentos finais
Esperançosamente, esse efeito de rolagem de “giro vencedor” lhe dará algumas ideias novas sobre como criar um CTA mais envolvente em seu próprio site. Construí-lo requer um pouco de sutileza usando as opções de transformação e efeitos de rolagem do Divi. Mas, uma vez concluído, o layout é realmente fácil de atualizar com seu próprio conteúdo exclusivo.
Estou ansioso para ouvir de você nos comentários.
Saúde!