Como criar um Banner profissional e atraente no Wix

Neste tutorial, apresento uma novidade da galeria de aplicativos do Wix App Market, o Revolution Slider, um poderoso aplicativo que permite criar banners e apresentações com imagens, textos e vídeos.

Ele exibe o conteúdo em um formato diferente, atraente e inovador. Tem várias opções de controle e pode ser redimensionado facilmente para caber em qualquer template.

Clique aqui para visualizar as maravilhas que o Revolution Slider é capaz de fazer no plano Premium (R$ 10,00/mês).

Veja mais um exemplo, aqui.

Aplicativo brevemente apresentado, está na hora de aprender a configurá-lo e conhecer melhor seus recursos. Acompanhe o passo a passo e crie você também um banner elegante e atraente para seu site Wix.

Para adicionar, clique no botão Wix App Market do Menu de Edição e selecione o Revolution Slider:

como criar um banner

Após, clique sobre ele e selecione “Configurações do App“. O Painel de Edição do Revolution Slider irá abrir. Ainda não há a necessidade de configurar nada por aí, vamos dar prioridade às imagens que serão usadas no banner.

O Painel exibe 3 slides como padrão, delete todos eles, clicando no botão vermelho “delete“.

como criar um banner animado

Agora, vamos adicionar 1 novo slide, clicando no botão azul “New Slide“:

como criar um banner online

Com novo slide adicionado, clique no  botão “Change Image“, para adicionar a  imagem do slide:

como criar um banner com efeitos

Na janela que abrir, clique no botão “Upload Image” para enviar uma imagem do seu computador. Obs: não é possível usar uma imagem que já tenha sido enviado para o Wix:

como criar um banner profissional

Após carregar a imagem, clique sobre ela para adicionar ao Slide.

Feito isso, vamos aplicar os efeitos e textos ao Slide. Para isso, clique no botão azul “Edit Slide“:

como criar um banner gratis

Será aberto um Painel de Edição de Slides. Vamos conhecer o significado de cada opção (clique na imagem para melhor visualização) :

1º bloco:

como criar um banner bonito

Transition – Tipo de efeito entre a transição de um slide e outro. Recomendo que deixe em “Random“, para que todos os efeitos sejam exibidos aleatoriamente.

Delay – Tempo de duração do Slide medido em MS, 1000 ms = 1 segundo. Deixe este campo vazio para aplicar o Delay que será configurado nas opções gerais do aplicativo. (veremos mais abaixo).

Link To Page – A página que será aberta quando o usuário clicar no Slide.

Preview Slide – Pré-visualizar o Slide.

Add Layer – Adicionar texto no Slide.

Add Layer Image – Adiciona outra imagem dentro do Slide.

Add Layer Video – Adiciona um vídeo do Youtube ou Vimeo no Slide. Basta copiar a URL do  vídeo, colar no campo “Enter Youtube ID or Url:” e clicar em Search. Em seguida, inserir o vídeo clicando em Add This video.

Delete Layer – Exclui a camada que estiver selecionada.

Delete All Layers – Exclui todas as camadas (textos, imagens e vídeos).

2º bloco:

como criar um banner bom

Style – Estilo de texto e fundo pré-configurados. Ao clicar irá surgir uma pequena tela com estilos padronizados e estilizados.

T – Cor do Texto; B – Cor do fundo; TS; Tamanho da fonte.

Text/HTML – Texto que aparecerá no Slide. Repare que é possível inserir códigos HTML, personalizando o texto do slide.

Animation – Tipo de efeito que será aplicado ao texto. Escolha um efeito e pré-visualize, faça isso até encontrar algum que lhe agrade.

Easing – Tipo de efeito que acompanhará o Animation, principalmente quando for finalizado. Ex: O easing EaseInOutBack, criar um efeito suave de freagem brusca.

Speed – tempo de execução do efeito Animation. Quanto menor o valor, mais rápido o efeito será processado, quanto maior, mais lentamente será exibido.

Layers Sorting

Nesta parte, dê importância ao campo “By Time“, ele será responsável pela velocidade de início de execução da camada.

No exemplo acima, a camada “Projeto Arquitetura” será executada imediatamente, assim que o Slide aparecer. Já a camada “Projetos com estudo…’, será executada com um atraso de 1200ms (1,2 segundos).

Essa função é muito útil para programar a sincronização dos objetos.

Note! In the free version only 2 first layers will be visible in the slide. Aviso de que na versão grátis do aplicativo só serão exibidas as 2 primeiras camadas, tanto faz se for texto, imagem ou video, apenas 2 elementos serão exibidos.

Agora que você se familiarizou com as funções do Editor de Slide, ficou muito mais fácil criar o banner, basta configurar, salvar e pré-visualizar, fazendo isso até ficar do jeito que você quer. Não tem erro, basta ver a descrição de cada opção e aplicar a configuração.

Concluída esta parte, clique no botão “Save and Close“. Você agora tem opção de adicionar um novo Slide ou duplicar o slide já configurado, mudando apenas a imagem principal e os textos das camadas. Recomendo esta prática já que o Slide vai estar pré-configurado e seguirá um estilo padronizado de efeitos.

Para duplicar um slide, clique no botão “duplicate“:

como criar um banner facilmente

Agora vamos conhecer as configurações gerais do aplicativo. Para isso, clique no botão azul “To Slider Settings“:

como criar um banner atraenteNa janela que abrir, serão apresentadas algumas opções:

Slider Settings

criar um banner

Delay – Duração dos Slides, essa configuração valerá para TODOS os Slides.

Stop On Mouseover – Escolha se você quer pausar o Slide quando o usuário passar o mouse pela apresentação.

Shuffle Mode – Mistura a ordem de apresentação dos Slides.

Appearance

como criar um banner para site

Shadow Type – Largura da sombra.

Timer Line – Posição da barra que carrega cronologicamente com o slide. Escolha a opção “No timer Line”, para desabilitar essa opção.

Background color – cor de fundo do app.

Border Size – Largura da borda.

Navigation

como criar um banner online grátis

Show Navigation Arrows – Escolha se deseja habilitar as setas de navegação no Banner.

Bullets – Escolha se deseja mostrar bolinhas de navegação na parte inferior do Banner.

Always show Navigation – Escolha se deseja mostrar as setas de navegação sempre ou somente quando o usuário passar o mouse por cima do Banner.

As configurações serão aplicadas imediatamente.

Prontinho! Agora você sabe como inserir um Banner bonito e atraente no seu site Wix.

Conclusão e considerações

O Revolution Slider é um poderoso aplicativo recém incorporado à loja do Wix App Market. Uma novidade incrível, com recursos impressionantes e com uma facilidade de uso a nível didático. Em alguns minutos é possível criar uma apresentação 100% personalizada, atraente e profissional, apenas arrastando e soltando elementos. Sua criatividade e um pouco de dedicação é que vai definir a elegância do seu Banner.

O Revolution possui uma versão Grátis e outra Premium, a gratuita impõe algumas limitações realmente inconvenientes, como anúncios e quantidade de elementos., como no caso do número de Slides, apenas os 3 primeiros são apresentados.

Recomendo ao usuário fazer o Upgrade deste aplicativo, pois realmente vale a pena. Por R$ 10,00 mensais, você poderá criar um Banner incrível, sem propagandas, com quantos elementos quiser (texto+imagem+vídeo). Isso certamente trará um profissionalismo admirável ao seu site e chamará a atenção de visitantes e clientes.

Para sabe como fazer Upgrade dos aplicativo do Wix App Market, clique aqui.

Consideração Importante: Como o Revolution Slider não exige criação de conta para usá-lo, não há backup do projeto. Não precisa se preocupar, sempre que você abrir seu Editor do Wix, ele estará lá como você o deixou. Porém, cuidado quando for fazer algo e usar a opção Recortar (Ctrl+X), você perderá todo o projeto, mesmo restaurando no Wix. O aplicativo não restaura dados, portanto, muita atenção quando for mover o aplicativo dentro da página, use o mouse para arrastá-lo e nunca a opção de recortar.

É Isso!

Se você gostou, compartilhe com seus amigos.

Saiba mais sobre este projeto, aqui.

5 comentários para “Como criar um Banner profissional e atraente no Wix”

  1. Por Patrícia Mendes de Oliveira

    Responder

    • Por Gabriel Martins

      Responder

  2. Por Valeria

    Responder

    • Por Gabriel Martins

      Responder

  3. Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

X

65 milhões de pessoas, ONGs e empresas já criaram seus sites no Wix. Crie o seu AQUI

¤
Leia mais:
mark
Ferramentas importantes para utilizar no Marketing Digital

Fechar