Osenhor sabia que um website intuitivo e de fácil utilização é capaz de aumentar as taxas de conversão? É por isso que o UX ou a experiência do usuário desempenha um papel tão importante nestes dias. Para isso, os controles deslizantes são ferramentas úteis tanto para a navegação, quanto, sobretudo, para causar uma boa primeira impressão nos visitantes. Portanto, este artigo tratará de um elemento essencial da página inicial: um Silder que, na maioria dos casos, se encontra logo após o menu de navegação. Na verdade, é a segunda parte, após o menu de navegação, que os visitantes entrarão em contato e seu impacto na decisão de continuar a visita é grande. O senhor não deve, portanto, descuidar de sua criação e eu o orientarei “passo a passo” ao longo de todo o processo. Além disso, não hesite em consultar o vídeo que acompanha este artigo e que apóia os passos nele descritos.
O deslizador da Revolução
Hoje, apresento-lhe em meu vídeo
como criar e montar um deslizador de revolução. Vou fazê-lo como parte da criação de meu website para minha agência de SEO Twaino:O que é uma revolução deslizante?
Uma barra deslizante é uma funcionalidade que permite ao senhor exibir várias informações em loop ou não. Essas informações podem ser compostas de textos, imagens, vídeos, links, etc., e são agrupadas por “slide”.
Assim, um deslizador pode incluir um ou mais slides cujos elementos multimídia podem ser animados ou interativos para reagir às ações do usuário.
Há várias ferramentas disponíveis para criar um deslizador, mas neste guia usaremos a Revolução dos Deslizadores. Trata-se, na verdade, de um plugin WordPress muito poderoso e popular, com mais de 4 milhões de usuários. Este plugin está integrado ao tema Avada de graça quando o senhor o adquire.
As diferentes opções de controles deslizantes
Há vários estilos de deslizamento à escolha e há principalmente três. Observe que a escolha de um ou de outro depende muito dos produtos ou serviços que o senhor deseja expor em seu site.
Imagem com sobreposição de texto
Geralmente, esse estilo de deslizamento inclui visuais que combinam uma imagem grande, uma mensagem clara e concisa, e um apelo à ação. É o estilo mais comum, pois permite que o senhor mantenha as informações essenciais que deseja destacar.
Portanto, é bem adequado a um website que queira apresentar um produto ou serviço de referência, ou que esteja fazendo uma oferta ou promoção de tempo limitado.
Pessoalmente, prefiro esse tipo de controle deslizante, que é muito econômico em termos de recursos e, portanto, permite que o senhor tenha um website rápido e eficiente.
O slideshow ou carrossel
Muitos websites optam por esse estilo, que tem um certo dinamismo. É muito fácil, portanto, pensar que é a melhor escolha para oferecer aos usuários uma bela interface. Além disso, essa opção oferece a possibilidade de se poder destacar várias informações.
Por outro lado, os números mostram que esta não é a solução ideal, já que apenas 1% dos usuários clicam em slideshows ou carrosséis. Esta observação foi feita após um estudo sobre o Universidade ND com base em 3.755.297 visitas à página inicial.
Além disso, 89,1% dos que clicaram fizeram isso apenas na primeira página. Essas estatísticas indicam que o carrossel não é a melhor opção para aumentar as conversões.
Recomendo, portanto, que o senhor só o escolha se achar relevante para seu website e para o que deseja destacar. Para ter sucesso, escolha um máximo de três slides e tenha o cuidado de classificá-los de acordo com sua prioridade.
Além disso, escolha um carrossel de rolagem manual para permitir aos usuários a escolha de seus slides ou não. Mas não espere que os usuários estejam realmente interessados nos últimos slides.
Vídeo
Essa opção está se tornando cada vez mais popular porque, ao contrário dos slideshows, os vídeos criam um impacto muito forte imediatamente e têm uma taxa de conversão muito maior. É por isso que cada vez mais companhias estão escolhendo essa opção para destacar um produto inovador e sofisticado ou uma oferta especial. É provável que isso atraia rapidamente o interesse dos visitantes.
Para isso, o senhor precisa se certificar de que tenha uma seqüência de vídeo que se encaixe perfeitamente com sua marca e que seja de qualidade profissional. Não hesite em usar um fotógrafo que tenha um grande domínio dos vídeos ou aprenda a fazê-lo você mesmo.
Melhores práticas para a criação de uma boa revolução deslizante
Tenha em mente que o senhor precisa destacar os pontos mais relevantes quando projetar sua página inicial, pois a atenção dos usuários é muito limitada. Qualquer que seja seu objetivo, o senhor deve usar seu silder para direcionar a atenção deles depois que aterrissarem em seu website.
Escolha os visuais certos
Quase todos os websites usam imagens, ilustrações ou vídeos para comunicar o que oferecem de maneira visual. O senhor precisa ter certeza de que os visuais que usa para o desenho de seu slider fazem exatamente isso e que eles são de alta qualidade.
Para isso, sugiro que o senhor não se limite à beleza de seus visuais, mas os escolha porque eles representam o que o senhor quer que os visitantes compreendam num relance, quando chegarem a seu site.
Limitar informações e animações
Não confunda os visitantes, sobrecarregando seu deslizador com muitas informações. Se estiverem confusos, poderão deixar rapidamente seu website. Portanto, prefira uma mensagem clara e precisa, com um botão que chame à ação.
Sugiro ao senhor que dedique um tempo para pensar cuidadosamente e identificar as mensagens mais relevantes para seus negócios. Além disso, esteja ciente de que assim como muita informação pode afastar as pessoas, muito pouca informação pode, às vezes, ter o mesmo resultado.
De fato, muito espaço livre sem visuais e sem uma mensagem forte não atrai o interesse dos visitantes que podem deixar seu website.
Por outro lado, recomendo ao senhor que faça uso razoável das animações de seu filho e que não as use em excesso, para que os visitantes possam encontrar rapidamente o que procuram em seu site.
Criação de uma resolução passo-a-passo Slider
Dado o modelo do meu site que tive a oportunidade de criar, tive a oportunidade de mostrar ao senhor, em meu último artigo, como criar um menu de navegação. Depois disso, vou agora criar um deslizador de revolução na página inicial que incluirá apenas o cardápio.
Para fazer isso, usaremos o plugin Slider Revolution, que oferece uma série de opções para a criação de controles deslizantes. No entanto, gostaria de adverti-lo de que não é fácil de usar e que é preciso ter prática para encontrar rapidamente o seu caminho.
Há quatro etapas principais na criação de um deslizador:
- Escolher a localização do deslizador e fazer as configurações;
- Configuração dos visuais: cor de fundo, textos, botões, imagens;
- Redimensionamento do controle deslizante;
- Otimização do deslizador para diferentes meios de comunicação.
Entrar na conta “Admin” de seu site
Antes de começar a criar o controle deslizante, o senhor deve primeiro entrar na conta do administrador de seu site. Para fazer isso, basta acrescentar “…./wp-admin” ao URL de seu website. Na interface que aparece, preencha as caixas com seus identificadores e valide para acessar o “Dashboard” do WordPress.
Escolher a localização da barra deslizante e fazer as configurações
1) Alterar a página inicial
Uma vez que o senhor tenha entrado em seu Painel, irei à página inicial de meu site Twaino.com, pois é aqui que quero integrar meu deslizador
Em seguida, clique na janela “Edit Page” com o ícone do lápis na parte superior, logo após “+ Create”.
Na interface que aparece, sob o título “Builder” de “Fusion Builder”, o senhor tem a “Slider Revolution”, que lhe permitirá inserir seu Slider. Observe que o senhor pode acrescentar Sliders a algumas ou a todas as suas páginas, dependendo de suas necessidades.
Se o senhor tem vários controles deslizantes em páginas diferentes, pode acessar todos eles diretamente, indo à seção “Revolução dos controles deslizantes” da barra lateral esquerda do painel de instrumentos e clicando na opção com o mesmo nome.
2) Ir para a interface de configuração do Slider
Na seção “Builder”, intitulada “Slider Revolution”, clique no botão azul “Edit Slider” para entrar na área de configuração do slider.
A página que aparece oferece as opções na janela com o título “Param”. Slider”, clique na primeira janela à esquerda, “All Sliders”.
3) Duplicar o silder padrão
Para tornar as coisas mais rápidas, recomendo a duplicação do deslizador padrão para fazer as mudanças necessárias. O senhor não só poupará tempo, como também evitará que se perca nas diferentes configurações da ferramenta.
Para isso, pressione a seta para baixo ao lado do nome de seu deslizador, a minha se chama “1# avada-seo-hero”.
Em seguida, selecione a opção “Duplicata” para ter uma cópia do deslizador.
Digite o título da barra deslizante duplicada na caixa de diálogo que aparece, eu digito “Twaino Home Page”.
Em seguida, pressione o botão “Duplicate” para validar a duplicação.
4) A interface de configuração do controle deslizante
Uma vez concluída a duplicação, clique na cópia que o senhor acaba de fazer para fazer as modificações. Na interface de configuração, o senhor verá na primeira posição o número de slides, eu tenho três no meu nível.
Na segunda posição, há diferentes opções:
- Antecedentes / Imagem principal;
- URL externo
- Transparente ;
- Colorido ;
- Vídeo do YouTube ;
- Vídeo Vimeo ;
- Vídeo HTML5.
Essas diferentes opções permitem ao senhor escolher o tipo de visual que deseja colocar no slide. No meu nível, “Colorido” é selecionado e, modificando-o, noto que o fundo do meu primeiro slide muda de cor.
Na terceira posição, há uma projeção do slide que mostra diretamente como ele se parece após cada modificação. Logo abaixo, há os ajustes para os diferentes elementos que serão dispostos de acordo com suas necessidades e o momento que o senhor quiser.
Se pressionar o botão “Play”, o senhor terá uma prévia das animações que estão sendo preparadas. O senhor pode mudar os horários para o segundo à vontade, mas eu pessoalmente opto por não fazer isso agora, porque é um ajuste muito demorado para se estabelecer corretamente.
5) Eliminar os slides desnecessários
No meu nível, tenho três slides quando quero ter apenas um e, para fazer isso, vou apagar os dois últimos.
Para fazer isso, vá até os slides em questão e arraste para baixo para escolher “Delete” no menu suspenso.
Em seguida, o senhor pode salvar, clicando no botão verde com o ícone de salvar. Sugiro que o senhor economize com freqüência para validar suas mudanças.
Quanto ao próximo passo, já tenho o modelo do meu website que me mostra o resultado que pretendo alcançar. Só tenho que usá-lo para obter o resultado final e aconselho vivamente o senhor a fazer o mesmo.
Configuração dos visuais: cor de fundo, textos, botões, imagem
1) Mudar a cor do fundo
Para fazer isso, copiarei o código de cores que quero usar diretamente no Adobe Illustrator
Se o senhor também tiver o modelo de seu website e não souber necessariamente o código de cores que deseja usar, basta perguntar a seu desenhista gráfico. Esse código é geralmente composto de 6 caracteres, incluindo números e letras.
Em seguida, clique na área colorida da opção “Colorido” que mencionei no ponto 4. Aqui o senhor pode escolher uma cor sólida ou um gradiente de cor, de acordo com seus desejos e necessidades.
Este é um gradiente de duas cores em meu nível, por isso seleciono “Gradient Color” (Cor do Gradiente) e faço duplo clique em cada seta na parte inferior do gradiente para inserir meus códigos de cores.
2) Inserir texto no slide
A seguir, quero inserir no slide o texto “Deseja aumentar seu tráfego orgânico? Para fazer isso, clique no texto padrão que é “Nós prestamos os melhores serviços Seo”.
O senhor vai notar que o mesmo teste aparece em um retângulo preto no topo e que o texto no slide está emoldurado, o que mostra que eu posso modificá-lo.
Portanto, copie seu texto e cole-o no retângulo preto em vez do outro texto. O senhor vai notar que seu texto agora aparece no slide.
Se o senhor vê a palavra
“”, deve saber que se trata de uma etiqueta que lhe permite ir paraa fila.
No retângulo preto, tenho meu texto que se parece com este:
“O senhor quer aumentar seu tráfego orgânico?
Mas o que parece que eu quero que fique no slide:
“O senhor quer aumentar seu tráfego orgânico?
seu tráfego orgânico?
Quando o senhor clicar no texto, verá que há opções de texto que aparecem na parte superior do campo de configuração. Para mudar a fonte deste texto, digite o nome da fonte que o senhor deseja na caixa apropriada. No meu caso, entrei em “Gudea” ao invés de “Source sans pro”.
Também mudei o tamanho para o senhor, fixei-o em “55” para este texto. Faço o mesmo para acrescentar o segundo texto: “Descubra nossa metodologia e nossos conselhos para aumentar sua visibilidade”. Exceto que desta vez a fonte é “Dosis” e o tamanho é “25”.
3) Modificar os botões do slide
3-1) Modificar o texto e dar ao botão sua primeira cor
Para modificar os botões do slide, o senhor precisa proceder em duas etapas:
- Substitua o texto;
- Mude a cor do botão.
Para o primeiro passo, o senhor deve clicar sobre o texto do botão. O senhor encontrará o retângulo preto com o texto padrão. Eu a mudo escrevendo “BLOG” em seu lugar e para o segundo botão “SERVIÇOS”.
Para obter a cor exata que está no modelo, copie o código a partir dele. Em seguida, clique no próprio botão e o senhor terá várias opções no topo do campo, uma das quais é “Background”, localizada à direita da “Font”. Selecione o código e escolha a cor desejada ou cole o código para ter uma determinada cor.
Aproveito também a oportunidade para mudar a fonte e o tamanho do texto do menu no topo do menu “Background”, com “Gudea” como o personagem e “15” como o tamanho.
3-2) Dar uma segunda cor interativa aos botões dos slides
Depois de ter dado uma cor aos botões, vou acrescentar um segundo que será exibido quando um usuário pairar sobre o botão. Para fazer isso, vá para “Overview” que está na mesma linha do “Background” e completamente à direita.
O senhor terá então o menu “Resumo”, que inclui também “Fonte”, “Antecedentes” e outras opções. Em seguida, clique em “Fundo” e “Cor” para escolher o tipo de cor desejada. O senhor também pode mudar a fonte do texto, como eu fiz com o meu.
Em seguida, volte ao menu “Ocioso” que está ao lado de “Visão Geral” para voltar aos ajustes anteriores.
Guarde as mudanças e, quando o senhor passar por cima do botão, verá que ele muda de cor.
Depois disso, faço exatamente a mesma coisa para o segundo botão “SERVIÇOS”.
4) Mude a imagem de seu slide
Para mudar a imagem, basta clicar duas vezes sobre a imagem padrão para acessar a “Biblioteca da Mídia”.
Em seguida, pressione “Upload Files”, o que lhe permite carregar sua imagem com a opção “Select Files”.
Por isso, importo minha imagem e tomo o cuidado de nomeá-la.
Note que, de antemão, olhei para o tamanho da imagem padrão para adaptar o tamanho da minha. Para fazer isso, o senhor pode ir à seção “Mídia” da barra lateral esquerda do painel de instrumentos e depois à “Biblioteca”.
Isso lhe dará uma galeria com todas as imagens do site e tudo o que o senhor tem a fazer é procurar a imagem em questão e depois clicar sobre ela para ver seus detalhes.
Para o meu, tenho as dimensões de 613 x 650 pixels.
5) Ligar o novo deslizador à página da direita
As mudanças anteriores não aparecerão diretamente na página de sua casa quando o senhor for para lá. Para ver o que parece, o senhor associará o deslizador que acaba de criar com a página de entrada em questão.
Primeiro, vá para a página inicial e clique na janela “Edit Page” com o ícone do lápis na parte superior.
O senhor tem então as configurações do Fusion Builder e desce ao menu “Sliders” em “Fusion Slider Options”
Clique na barra suspensa “Select Slider Revolution Slider” e selecione o nome de seu tema. Escolho “Twaino Home Page (#4)” e clico no botão azul “Update”, no canto inferior direito, para salvar a mudança.
Clique diretamente em “Preview” que se encontra ao lado de “Update” para ver como fica a página inicial.
As mudanças estão refletidas em minha página, mas meu deslizador tem muito espaço desnecessário, que vou reduzir.
Redimensionamento do deslizador
1) Reduzir o tamanho do slide
Vá para a seção “Revolução deslizante” na barra lateral do painel de instrumentos e depois para o “Parâmetro”. Janela “Slider”.
O senhor terá então diferentes configurações, incluindo :
- Fonte Centent ;
- Slider Title & ShortCode;
- Selecione um tipo de Slider;
- Esquema de deslizamento ;
- Customize, Buil & Implement;
O ajuste “Select Slider Type” permite que o senhor tenha o tipo de controle deslizante que deseja. Escolho o deslizador que não tem uma seta “Hero Scene” para ter meu único deslize.
O parâmetro “Slider Layout” permite que o senhor modifique o tamanho do slide.
Antes de mais nada, há o esquema “Full Width”, que já me convém muito bem. Bem no fundo são as dimensões que eu vou mudar, mas preciso saber pelo menos a largura do meu site para fazer isso.
Para saber qual é essa largura, vá a suas opções temáticas.
Portanto, clico em “Avada” e depois em “Opções temáticas” e em “Layout” o senhor encontrará “Largura do site”, que é a largura de seu site.
Copie a dimensão que o senhor encontra logo na frente da opção “largura do local”, a minha é “1260 px”.
Depois, basta colá-lo no parâmetro “Slider Layout” e precisamente no primeiro retângulo logo abaixo do desenho da tela do computador com as palavras “Desktop Large”.
Também diminuo a altura do escorrega, de modo que mudo o padrão “820 px” para “600 px”. Faço o mesmo com a tela da direita marcada “Laptop”, tendo o cuidado de colar a largura na caixa apropriada e de escrever “600 px” na segunda caixa.
Observe que o senhor pode mudar essas dimensões a qualquer momento, de acordo com sua conveniência. Depois, salve suas modificações para validá-la e, uma vez na página inicial, vejo que as novas dimensões foram levadas em conta.
No entanto, o senhor precisa agora reorientar os textos e a imagem do slide.
2) Reorientar o conteúdo de seu filhote
Vá à seção “Slider Revolution” na barra lateral do painel de instrumentos e depois à janela do “Slide Editor”. Neste momento, basta clicar em cada elemento e movê-lo para cima.
Guarde essa modificação e vá para a página inicial para apreciar o resultado.
Aconselho o senhor a ir e vir várias vezes, se necessário, para obter o ajuste correto.
Note que isso é para uma tela grande e que a apresentação pode diferir de um meio de comunicação para outro.
Otimização do deslizador para diferentes mídias
Os deslizadores não são exibidos da mesma maneira nos computadores que nos celulares ou nas placas. Para fazer isso, vá até a janela do “Slide Editor” de “Slider Revolution” e uma vez no campo de configuração, o senhor encontrará três ícones no canto superior direito, simbolizando o desktop, laptop e telefone celular.
Clique em cada um desses ícones para ver como seu website fica nesses diferentes meios de comunicação. No meu caso, o primeiro mostra bem meu website, ao contrário dos dois últimos ícones, onde o conteúdo ainda não está centralizado e algumas partes dos textos estão cortadas.
1- Otimizar a exibição em um laptop
Para centralizar novamente o conteúdo de seu slide no laptop, clique no ícone em questão e suba cada elemento, como na etapa anterior.
O senhor também pode alterar o tamanho do texto, se assim o desejar.
Observe, entretanto, que essas mudanças não afetam em nada os outros tipos de exibição.
2- Otimizar a exibição em telefones celulares
Para telefones celulares, clique no ícone correspondente para prosseguir com a otimização.
Noto que há duas linhas que emolduram o meu deslizador.
Na verdade, eles delimitam a área de exposição e qualquer elemento que esteja fora deles não aparece no suporte.
Para fazer isso, reduzo o tamanho do meu texto transbordante e aumento o tamanho do meu segundo texto. Recomendo que o senhor faça os botões um pouco maiores e, para isso, clique em cada um deles para obter as diferentes opções que estão bem no topo do campo de configuração.
Portanto, mude o tamanho do texto depois de esticar o botão. Lembre-se também de centralizar o texto, clicando na seta no botão azul “Style” no canto superior esquerdo e depois na janela “Space”.
Em seguida, pressione o menu suspenso “Herdar” e escolha “Centro”.
Por outro lado, há também a imagem que vou re-centrar, tendo o cuidado de reduzir um pouco seu tamanho para um bom ajuste.
Guardo as mudanças e, ao minimizar meu navegador para simular a exibição do meu site em um telefone celular, vejo que tudo está bem.
Verifique as mudanças uma última vez
Este último passo é verificar a exibição final de seu website em todos os meios de comunicação para ver como ele se apresenta. Para isso, sinta-se à vontade para usar também seu smartphone, bem como seu tablet e qualquer outro tipo de mídia para fazer a verificação.
É isso aí! Acabamos de criar o slider de página inicial.
Em outro artigo, vou mostrar-lhe como associar os botões deslizantes com URLs ou páginas específicas para facilitar a navegação.
Conclusão
Depois de criar o menu de navegação do site, o próximo passo normalmente é criar um deslizador para sua página inicial. E como já mencionei, o senhor tem várias opções em termos de visuais, inclusive imagens estáticas, slideshows e vídeos. No entanto, o senhor precisa escolher um deslizador que combine um bom desenho com uma velocidade de carregamento extremamente rápida. Pela simples razão de que o deslizador é um dos primeiros elementos que serão apresentados aos visitantes e que tem um enorme impacto sobre sua decisão de continuar ou não a navegação em seu website. Portanto, sugiro que o senhor use a revolução deslizante, que é uma ferramenta poderosa e eficiente, mas que pode ser bastante complexa de usar e demorada. Espero que os passos apresentados acima o ajudem muito, para que o senhor se torne muito mais rápido com a ferramenta.
Até breve!
