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)