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.

image-20240112-195728.png

VocĆŖ vai ter esta opĆ§Ć£o do print. Clique nela e selecione seu arquivo. O arquivo a ser importado Ć© o compactado mesmo, o .rar.

image-20240112-200050.png

Ā 

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)