Manual Slider Revolution (pré-configurado)

No Sistema Datacake, atualmente o plugin usado para a construção de carrosséis de banners é o Slider Revolution 6.

https://www.sliderrevolution.com/

O Slider Revolution 6 é um plugin bastante completo, com muitas ferramentas e possibilidades. E isso pode deixar um pouco perdido(a) no meio da aplicação. Então nós da Datacake criamos um template de carrossel, pré-configurado com as melhores opções para os usos mais cotidianos!

OBS: Antes de começarmos a configurar nosso carrossel, você já deve ter previamente subido as imagens na Mídia do seu site.

OBS: Recomendamos que leia este manual por completo antes de começar a seguir o passo a passo, e interagir com o Slider Revolution e seu carrossel pré-configurado. Isso vai te dar uma familiaridade maior, e te ajudar a se localizar melhor no plugin.

Manual Import

Antes de tudo, precisamos importar o modelo para o seu site.

Vá na coluna da esquerda, na opção “Slider Revolution“, e clique nela.

Você vai ter esta opção do print. Clique nela e selecione seu arquivo. O arquivo a ser importado é o compactado mesmo, o .rar.

Editando o módulo.

Um módulo é um carrossel, um conjunto de imagens. Pouse seu mouse sobre o módulo que quer editar, e clique no lápis.

Nomeando e identificando seu carrossel

Na coluna da direita, você verá a maioria das ferramentas do Slider Revolution. Primeiramente vamos nomear o carrossel, pois dessa forma ficará mais fácil de inseri-lo em uma página de testes, e ver os resultados finais.

Para nomear, siga o caminho indicado no print:

Title: É o nome de seu carrossel. Pode inserir os caracteres que quiser.

Alias: é o nome de identificação do seu slider. A forma recomendada de se nomear é com letras minúsculas, números, e separar as palavras com traços. Evite o uso de letras acentuadas (á, é, ç…), e caracteres especiais ($, %, &…)

Shortcode: é uma outra forma de implementar o carrossel nas páginas. Não a usaremos neste tutorial.

Camadas

Primeiramente vamos entender o conceito de camadas para nosso carrossel. Olhando na região de baixo, você verá a seguinte configuração:

Esta configuração significa que, em uma mesma unidade do banner, temos duas fotos, uma sobreposta à outra (logo, duas camadas). A camada “Dt“ é a adequada para desktop (computadores de mesa) e notebooks, enquanto a camada “Mb“ é adequada para tablets e mobile (celulares).

Trocando as imagens para as camadas

Vamos agora trocar as imagens de nossas camadas.

Para a camada “Dt“, escolha a imagem de seu banner adequada para desktop (desktop e notebooks), e para a camada “Mb“, use a imagem adequada para celulares (tablet e mobile).

Clique na camada “Dt“, e na lateral direita, será exibido este menu.

Será exibido o painel de mídia do seu site. Escolha a imagem desejada, e clique em “Ok“.

Repita os passos acima para definir o banner para mobile / tablet.

Definindo tamanhos para as camadas

Este carrossel pré-configurado já terá sua responsividade (adaptação do banner para tamanhos de telas diferentes) ajustada em certa parte, mas muito provavelmente o banner usado por você será de tamanho diferente do pré-configurado. Esta medida será aplicada para todos os banners deste carrossel. Vamos corrigir essas medidas.

A correção será feita pela medida do banner de desktop; o banner mobile já será ajustado automaticamente.

Para corrigirmos os tamanhos do banner, siga o caminho do print.

Troque os valores de comprimento ou largura (W) e altura (H) pelos do seu banner desktop.

Adaptando tamanhos para a responsividade

Conforme foi dito anteriormente, responsividade é a capacidade do recurso (no caso, banner) se adaptar, responder, ao tamanho de tela. Vamos agora corrigir a responsividade dos banners, que são as figuras nas camadas.

Siga o caminho do print abaixo.

Todas as medidas devem ser inseridas manualmente:

Desktop: insira as medidas do seu banner desktop. São as mesmas da configurada no tópico anterior.

Notebook: proporcional às medidas usadas na parte de desktop. Para configurar essas medidas, basta usar uma regra de 3 simples, e arredonde valores decimais para cima (ex.: 371,14px viram 372px).

Tablet: insira as medidas do seu banner mobile.

Mobile / Celular: proporcional às medidas usadas na parte de tablet. Para configurar essas medidas, basta usar uma regra de 3 simples, e arredonde valores decimais para cima. Faça esta medida antes da medida do tablet, pois o uso de celulares pelas pessoas é maior. Então vamos garantir que a medida do banner para celular estará adequada, e então, faça as medidas proporcionais para tablet.

Você pode ver que os valores de notebook (W: 856px H: 286px) são proporcionais às medidas de desktop (W: 1920px H: 640px), e que as proporções de mobile (W: 480px H: 640px) são proporcionais às medidas de tablet (W: 778px H: 1038px).

Feito isso, seu carrossel deve estar da seguinte forma: os banner estarão com o pontilhado em sua borda, sem cortar a imagem; a camada “Dt“ terá o banner mais adequado para desktop e notebook, e a camada “Mb“ estará com o banner mais adequado para tablet e mobile. Vamos à próxima etapa.

Inserção de link

Às vezes você pode desejar que seus banners tenham um link, como por exemplo: vincular o link de um produto à um banner promocional.

Para inserir um link no slide, siga o caminho do print abaixo.

Se a chave do passo 3 estiver desativada, ative-a.

E então, é só inserir o link que você deseja. Na opção destacada você pode definir se o link abrirá na mesma aba que a pessoa está atualmente (_self), ou se será aberta em uma nova página (_blank).

Agora uma das grandes vantagens de se usar Slider Revolution:

Se você quer que seu carrossel tenha mais de uma imagem, vá na lateral esquerda. Pouse seu mouse na opção desejada, e clique no ícone de copiar.

Ao copiar este slide, ele vai duplicar o atual, com todas as configurações de altura, largura, camadas, link e enfim.

À partir deste momento, você pode continuar editando seus slides.

Quando finalizar, clique em “Salvar“, no canto inferior direito.

Inserindo o carrossel em uma página.

(CONTINUAR)

Manual Slider Revolution (pré-configurado)

Related content