Revolução dos controles deslizantes: o guia definitivo

Slider Revolution é literalmente um dos plugins WordPress mais populares atualmente. Com mais de 400 mil vendas e uma classificação média de 4,75 o plugin provou sua eficácia e grandeza.

Revolution Slider: O que torna o plugin tão bom

Revolução Slider foi desenvolvido pela Themepunch. Este plugin é um construtor para criar conteúdo rico e dinâmico para páginas da web. A ênfase está no “dinâmico”, pois permite que você construa slides emocionantes adicionando movimento às páginas.

O plugin é fornecido com um construtor fácil de usar e toneladas de opções. Pacotes de configurações bem elaborados permitem que o usuário ajuste cada detalhe do controle deslizante e permite trabalhar com tipos absolutamente diferentes de conteúdo. Sliders podem ser criados para posts separados, para as páginas inteiras e suas pequenas partes. Para ser mais preciso com o plugin, você pode criar:

• controles deslizantes de imagem e carrosséis
• controles deslizantes de postagens em destaque
• feeds de mídia social
• galerias de mídia
• blocos de heróis e primeiras páginas

Razões pelas quais você deve usar o Slider Revolution com seu site

Você não pode errar com Slider Revolution. Um plug-in abrangente com ferramentas fáceis de usar é uma solução perfeita para criar belos sliders, e aqui estão os motivos.

Plug-in empacotado

Hoje, quase todos os temas do WordPress vêm com um plugin Slider Revolution. Normalmente, o pacote de temas inclui a versão gratuita do plugin. O plug-in incluído é limitado a recursos muito básicos, mas ainda assim é muito conveniente obter o tema junto com o construtor de controles deslizantes.

No entanto, se você quiser acessar muitos recursos do plug-in, você tem a opção de comprar o plug-in independente. A licença regular custará US $ 29 e você pode obtê-la no mercado Codecanyon.

Para a licença estendida, você terá que pagar cerca de US$ 150 e obter um ano de suporte técnico por apenas US$ 9.

Sim, o plugin pode custar algum dinheiro, mas você ainda pode criar ótimos sliders mesmo com a licença regular do plugin.

Modelos

O incrível plugin não apenas impressionará você com as ferramentas e recursos, mas também possui uma coleção de layouts pré-fabricados de boa aparência. Uma maravilhosa coleção de modelos pré-fabricados e a biblioteca de objetos de mídia gratuitos que você pode usar em seu slide simplificará e acelerará a criação do slide. Você pode selecionar o modelo para qualquer projeto seu e, em vez de criar um controle deslizante do zero, pode economizar tempo e seguir em frente com o layout pré-criado.

Basta importar o modelo que você escolheu e começar a criar imediatamente.

Além disso, você terá acesso à grande biblioteca gratuita de diferentes objetos, como ícones de fonte, imagens de fundo, objetos PNG transparentes, SVG e outros. Você pode usá-los e inseri-los facilmente em seus slides.

Editor visual

Slider Revolution é fornecido com um editor WYSIWYG incrível que torna muito simples criar e modificar modelos de slider. Muitos proprietários de sites acham difícil escrever códigos complexos ou contratar uma equipe separada para essa tarefa. Graças ao editor de slides, você pode economizar seu tempo e aproveitar o recurso de arrastar e soltar para criar slides incríveis.

O plug-in de controle deslizante permite que você seja mais criativo com os controles deslizantes que você cria e os apresenta facilmente em seu site. Você terá várias opções personalizadas, como criar uma localização personalizada do slider, escolher o atraso do slider, adicionar transições, adicionar camadas de mídia e assim por diante. isso pode ser feito rapidamente usando a lista suspensa. Além disso, o plug-in possui muitos recursos de navegação que permitem alterar o estilo de navegação e adicionar setas, marcadores, guias e miniaturas.

Desempenho de alta velocidade

Slider Revolution está bem codificado para carregar rapidamente. Todos os aspectos dos controles deslizantes são otimizados e ele usa opções avançadas de depuração para resolver quaisquer problemas, carrega arquivos principais automaticamente e escala com os recursos usados. Ele também emprega carregamento lento inteligente e é otimizado para SEO.

Layouts responsivos

Um dos maiores problemas que muitos desenvolvedores da web enfrentam é que os controles deslizantes não têm capacidade de resposta. Como resultado, esses controles deslizantes não funcionam bem em dispositivos pequenos ou não são exibidos. A capacidade de resposta é um componente essencial da experiência do usuário. Com a enorme quantidade de tráfego proveniente de celulares, será uma pena que seus controles deslizantes não tenham um bom desempenho em outros dispositivos.

Slider Revolution não é apenas um simples controle deslizante. O plug-in é responsivo, portanto, sejam quais forem os slides que você criar, você pode ter certeza de que eles serão otimizados para qualquer dispositivo em que serão usados.

O Slider Revolution certificou-se de definir os pontos de interrupção responsivos para cada controle deslizante, tornando qualquer design ótimo em diferentes dispositivos e telas pequenas. Seja qual for a opção que você escolher - controle deslizante único, carrossel ou padrão, você pode ter certeza de que ficará perfeito em qualquer dispositivo.

Opções de personalização

Outra vantagem do plugin Slider Revolution são suas diversas opções de personalização. Você pode definir atrasos de slides, escolher setas de navegação, fundos de paralaxe, adicionar camadas de mídia, inserir botões, definir fontes personalizadas, adicionar margens e muitos outros.

O plugin Slider Revolution permite que você personalize qualquer coisa. Para economizar tempo, você pode salvar predefinições para usá-las posteriormente nas transições de slides, estilos de fonte e animações de camada.

Complementos de revolução deslizante

Quer tornar seus controles deslizantes mais complexos e diversificados com efeitos de transição, animações?

Você está pronto para ir! Slider suporta diferentes tipos de conteúdo, como postagens de blog e postagens atuais, permite que você use feeds de plataformas sociais como Twitter, Facebook, Vimeo, YouTube e Instagram. Você pode adicionar links, vídeos, imagens e texto rapidamente. Com a ajuda do recurso Variações, você pode criar um slide rico em recursos e repleto de informações que os visitantes podem usar.

Segurança

A segurança é um dos aspectos mais significativos quando se trata de sites. Você pode ouvir que há vulnerabilidade de guerra afetada pelo Slider Revolution há alguns anos. Desde então, o Themepunch aumentou a proteção do software e agora está usando uma organização terceirizada para auditar os problemas do plug-in regularmente. Assim, você pode ter certeza de que o plugin é altamente seguro.

Suporte técnico

O plug-in vem com a documentação detalhada e uma grande seção de perguntas frequentes com as perguntas mais populares sobre o plug-in. É por isso que é muito fácil começar com a revolução do controle deslizante, mesmo que você não tenha experiência em trabalhar com ela. A disponibilidade dos tutoriais detalhados simplifica a criação do slide para o site para todos.

Fontes de conteúdo

Plugin lida com sucesso com a criação de controles deslizantes para várias fontes de conteúdo. Seja um produto WooCommerce ou um post comum, o Slider Revolution tem as ferramentas.

Recursos poderosos tornam este plugin a escolha número 1 para todos. Sua principal vantagem é que apresenta a categoria de uma solução tudo-em-um. Você não precisa de nenhum plugin extra, tudo está dentro do plugin.

Também devemos mencionar que é acessível. A licença regular custará US $ 26. Considerando o número de recursos que você obtém pelo preço, o Slider Revolution é o plug-in deslizante mais acessível do setor.

Neste guia final, abordaremos tudo, desde a instalação do plug-in até a adição de um novo slide e a colocação no site.

Instalação do plugin e configuração primária

Muitos dos desenvolvedores de temas incluem o Slider Revolution no pacote dos temas.

Se você comprou um dos temas premium do WordPress da StylemixThemes, não precisa instalar o plugin manualmente. Slider Revolution será instalado automaticamente com a importação de demonstração.

Se o pacote do tema que você está usando não inclui o plugin, você precisa baixá-lo e instalá-lo manualmente. Para obter uma cópia do Slider Revolution, siga este link .

Você precisará comprar o plugin. Faça login na sua conta Envato e faça sua compra. Depois disso, faça o download do arquivo - selecione a opção de download para "Somente arquivo instalável do WordPress".

Agora você precisa adicionar um novo plugin ao seu site. Vá para o seu painel — Plugins > Adicionar novo . Quando a instalação estiver concluída, ative o plugin.

Parabéns, está tudo pronto e você pode começar a criar seu primeiro controle deslizante!

Como atualizar o Slider Revolution

Themepunch lança atualizações regulares do plugin do slider. Para atualizá-lo, abra o Slider Revolution no seu painel e siga a guia Atualizações. Nesta página você pode encontrar uma pequena seção com o título “Atualizações de Plugins”. Aqui é especificado qual versão do plugin está atualmente instalada em seu site e uma versão disponível para atualização.

Além disso, você pode usar o caminho padrão e ir para Dashboard > Updates e instalar a nova versão do plugin a partir daí.

Revolução do Slider: Começando

Se você estiver usando o controle deslizante pela primeira vez, pode não estar claro o suficiente com toda a terminologia usada nele. Existem três elementos principais com os quais você pode ser confundido. São módulos, slides e camadas. Cada um deles pode fazer parte de outro, bem como trabalhar individualmente.

Por exemplo, você pode criar um módulo projetado para funcionar como um controle deslizante e conterá slides. Além disso, você pode criar módulos como menus de navegação ou cabeçalhos, que não são sliders, mas ainda conterão slides. A razão para isso é que o Slider Revolution foi criado inicialmente como um construtor de slides, no entanto, agora também é usado como um editor de sites completo. Então, com a ajuda dele, você é capaz de construir muito mais do que simples slides.

Relação entre módulos, slides e camadas

Módulos são contêineres para Slides que são contêineres para Camadas.

Os módulos existem para conter slides. Cada módulo deve ter pelo menos um slide. Quando você cria um módulo em branco, um slide vazio é adicionado automaticamente. Você pode criar slides adicionais ou adicionar tudo a um único slide. Depende totalmente do tipo de conteúdo que você está criando.

O Slide é um contêiner para camadas. Cada slide deve ter pelo menos uma camada. Quando um novo slide é criado, uma camada de fundo é adicionada automaticamente. Esta camada está sempre lá, pode ser renomeada e tornada invisível, mas não pode ser removida. Esta área de fundo pode ser preenchida com camadas.

As camadas contêm itens visuais, de áudio ou de layout e são adicionadas aos slides. Texto, botão, imagem, áudio, vídeo, grupo e linha são todos tipos de camadas. Cada camada representa uma única peça de mídia. As camadas podem ser animadas de uma maneira que melhor represente sua ideia.

Como usar o Slider Revolution: configurações globais

Como já mencionamos, o Slider Revolution tem muitas opções, e isso não é exagero. É por isso que, antes de começar a construir o controle deslizante, recomendamos que você examine primeiro as configurações globais e aprenda os principais princípios de trabalho com o plug-in.

Se você clicar no Slider Revolution no seu painel, poderá abrir a tela de configuração do plug-in.

Tela de configuração

Na parte superior da tela você encontra a aba com as seguintes opções:

Módulos, Atualizações, Ativação, Notícias, Globais, Perguntas Frequentes, Suporte.

Nesta fase, trabalharemos apenas com os dois: Módulos — para criar um novo e Globals — para ver as configurações globais do plug-in.

Configurações globais

Começaremos com os Globais . As configurações globais são divididas principalmente em várias seções de:

• Em geral
• Pontos de interrupção de grade de layout padrão
• Fontes
• Diversos

Essas configurações são responsáveis ​​pelas opções de grade responsiva padrão que se aplicam ao criar um novo controle deslizante, carregamento de fonte personalizada, criação de banco de dados e muito mais.

Existem apenas várias opções nas quais você precisará se concentrar. Primeiro, é a capacidade de resposta, para garantir que seus futuros controles deslizantes fiquem bem em qualquer dispositivo. Aqui está um guia rápido sobre dispositivos e seus tamanhos.

Na seção Ponto de interrupção da grade de layout padrão , você pode definir a largura em pixels para diferentes tipos de dispositivos: desktop, notebook, tablet e celular.

Desde que cada dispositivo tenha seu próprio tamanho, insira a largura exata de cada tipo para garantir a exibição correta de um controle deslizante.

• Os monitores de desktop padrão têm uma largura de 1920px.
• Os dispositivos de notebook, que incluem todos os laptops, MacBooks e tablets orientados horizontalmente, têm cerca de 1600px de largura.
• Os tablets orientados verticalmente têm uma largura não superior a 778px (com base no iPad).
• E dispositivos móveis. Esta é uma parte importante, pois hoje em dia mais da metade de todo o tráfego da Internet é gerado por meio de dispositivos móveis e não será satisfatório se os usuários não puderem ver os controles deslizantes em seu site corretamente. No entanto, isso pode ser confuso, e a razão para isso é que os smartphones modernos têm tamanhos absolutamente diferentes. Sugerimos que você use o número, não acima de 500px.

A segunda coisa que você pode querer controlar é o acesso ao controle deslizante. A opção Permissão permite que você negue o acesso ao plugin para outros usuários, exceto para administradores e editores.

Agora você pode começar a construir seus controles deslizantes! Existem três opções que você pode usar. Você pode começar do zero e criar um novo controle deslizante, exportar um arquivo dos modelos Slider Revolution ou importar controles deslizantes de amostra incluídos no seu tema.

Em nosso artigo, revisaremos a primeira opção e criaremos um novo controle deslizante do zero. Isso nos permitirá explorar mais possibilidades de plugins.

Criando um novo controle deslizante

Agora, quando terminarmos com algumas configurações primárias, podemos prosseguir para criar um novo slide. Abra as configurações do Slider Revolution e clique em New Blank Module.

Você será oferecido para passar pelo guia rápido. Clique no Guia de início se quiser fazer uma pequena aula. Ou saia do guia para pular esta etapa.

Sua tela será dividida em várias áreas: da esquerda há um quadro onde todo o conteúdo é exibido, da direita — é um espaço de trabalho com seções e configurações.

Opções gerais

Vamos começar com as Opções Gerais . Clique no ícone de engrenagem para abrir as configurações. Primeiro de tudo, precisamos nomear nosso módulo. Na seção Título digite o nome e duplique-o para o Alias ​​em letras minúsculas e com traços entre as palavras em vez de espaços.

O alias é necessário para adicionar o controle deslizante a uma página. Você também pode usar o shortcode fornecido copiando-o e colocando-o na página ou postagem que deseja exibir seu controle deslizante.

Depois disso, podemos personalizar o tipo e a altura e largura da área da camada da área de trabalho. Essas configurações estão localizadas na guia Layout.

Para o tipo , você tem três opções para escolher:

• Slider — vários slides animados que giram para serem exibidos um por um.
• Cena — um único slide que pode ser usado como módulo de conteúdo.
• Carrossel — muitos slides com vários visíveis ao mesmo tempo.

A próxima configuração que precisamos especificar é dimensionamento. Há também três opções disponíveis:

Auto — este é o parâmetro padrão que estende seu controle deslizante para a largura do contêiner principal, conforme definido pelo seu tema WordPress.

Largura total — uma opção de controle deslizante de largura total se estende da esquerda para a direita (você ainda precisa definir a altura)

Tela cheia — para controles deslizantes grandes preenchendo a tela inteira, independentemente do tamanho do seu navegador ou dispositivo.

Com o plug-in Slider Revolution, você pode animar todas as partes da página do site. Por favor, considere que, ao fazer isso, o peso da sua página será aumentado e, portanto, levará mais tempo para carregar sua página. Como resultado, pode afetar negativamente o ranking de SEO.

Redimensionar configurações

O redimensionamento clássico ou linear garante que seu controle deslizante seja compactado de acordo depois de definir as configurações de tamanho da tela principal (por exemplo, um controle deslizante de 1000x400px será compactado em um controle deslizante de 500x200px com as fontes, imagens e outros elementos do controle deslizante).

A herança inteligente permite a criação automatizada de tamanhos de dispositivos com base nas configurações da área de trabalho que você escolher, com a opção de ajuste.

A configuração personalizada ou manual permite definir o tamanho do controle deslizante usando pixels exatos, com a capacidade de definir os tamanhos do controle deslizante em diferentes larguras de tela - desktop, laptop, tablet e telefone.

Capacidade de resposta dos slides

Se movendo. Ainda não terminamos com a capacidade de resposta. Há um tamanho de área de camada onde você pode especificar a largura do navegador.

Normalmente, as opções são definidas por padrão para Tamanhos Automáticos e apenas os parâmetros da área de trabalho são especificados. Você pode fazer o mesmo para outras opções, ativando-as.

Além disso, se você ligar o dispositivo específico, sua área de trabalho (contêiner de slides) será ajustada aos parâmetros do dispositivo selecionado, o que significa que você pode controlar a exibição do slider para o dispositivo de concreto.

Para cada dispositivo, haverá tamanhos de grade especificados nas configurações globais. A grade é a área na qual as camadas do controle deslizante estão localizadas. Não há números estritos que você deve inserir. Você descobrirá o que funciona melhor para você depois de tentar explorar várias opções.  

Este foi apenas o começo, algumas opções gerais que facilitarão seu trabalho adicional com o controle deslizante. E assim que terminar esta parte, você pode passar para a próxima etapa.

Um olhar mais atento às opções

Além das opções Gerais, existem outras três abas com as quais você irá interagir bastante. Queremos guiá-lo através das principais configurações com as quais você operará. Basicamente, a criação dos slides considera vários componentes que estão envolvidos no processo. Estas são opções gerais, configurações de navegação, opções de slides e camadas.

Não estávamos brincando ao dizer que o Slider Revolution tem muitas opções. Há muitos elementos para cobrir, vamos descrevê-los um pouco e depois revisar de forma mais detalhada os mais importantes.

1. Opções gerais

Já tocamos em alguns elementos das Opções Gerais como Título e Layout. No entanto, além destes, há outras coisas que você precisa ajustar.

Em suma, as opções gerais permitem que você configure o seguinte:

Título — para fornecer o nome do controle deslizante.
Layout — selecione o tipo de controle deslizante (slider, cena ou carrossel) e o tamanho (automático, largura total ou tela inteira). Isso ajuda a editar as larguras e alturas da área da camada, a posição do seu módulo, uma cor ou imagem de fundo padrão e muito mais.
Conteúdo — identifica a maneira de adicionar o conteúdo ao controle deslizante. Você pode escolher entre 9 fontes de conteúdo.

• Padrões — aqui sugerimos concentrar-se em um parâmetro importante — Duração do slide (quanto tempo cada slide vai durar).
• Geral — esta seção inclui configurações de apresentação de slides para rotação automática, parada ao passar o mouse, slides em loop e seleção de um primeiro slide designado. Aqui também você pode ocultar ou desativar seu controle deslizante no celular ou em larguras de pixel especificadas.
• On Scroll — este permite que os usuários selecionem efeitos de rolagem como paralaxe, profundidades 3D, linha do tempo, fade, blur, tons de cinza e muito mais. Todos os efeitos vão com configurações personalizáveis.
• Spinner — ou pré-carregador, e o plugin tem 15 opções de spinner para escolher.
• As opções avançadas permitem que você ative o carregamento lento, selecione uma imagem de fallback ou simplifique seu controle deslizante em navegadores antigos.
• CSS/jQuery — aqui você pode adicionar seu próprio código personalizado aos controles deslizantes. Observe que este é melhor para ser usado por profissionais ou usuários familiarizados com o conceito de programação e codificação.
• Como Modal — essa opção específica é necessária caso você queira criar um controle deslizante que apareça como um pop-up ou lightbox e forneça as opções de posição do controle deslizante, cor da capa e o código de acesso a ser usado ao inserir seu controle deslizante modal nas páginas.
• Skin — skin apresenta a predefinição que você pode criar e atribuir a camadas de texto (especifica a cor do destaque, título, texto do conteúdo).

Complementos — aqui você encontrará complementos (observação – os complementos só estão disponíveis se você comprou sua própria licença de controle deslizante).

2. Opções de navegação

Se você planeja incluir mais de um slide, as opções de navegação o ajudarão a adicionar ferramentas de navegação ao controle deslizante, como marcadores, setas e botões.

Todas as opções incluem configurações fáceis de personalizar para posição/alinhamento, dimensionamento, visibilidade e estilo/predefinições globais.

Os elementos de navegação incluem:

• Progresso — barra de progresso ou círculo que visualiza o progresso atual do slide.
• Setas — tornam mais fácil para os visitantes clicarem nos seus slides.
• Marcadores — 14 estilos de pontos de navegação para adicionar ao seu slide.
• Abas — muito útil para controles deslizantes de conteúdo onde a navegação por abas é necessária.
• Thumbs — é necessário para exibir uma imagem em miniatura como uma opção de navegação. Existem 5 opções disponíveis.
• Tamanho anterior — especifica o tamanho da imagem de visualização.
• Toque — inclui opções para rolagem de blocos, velocidade e direção.
• Teclado — você pode ativar a navegação pelo teclado (recomendado para acessibilidade).
• Mouse — ativa o controle do mouse, como uma função de carrossel ou rolagem reversa.
• Editor de navegação — esta seção é para personalizar setas, marcadores, guias ou polegares com seu próprio código personalizado.

3. Opções de slides

A próxima parte das configurações está relacionada às opções do slide.

• Plano de fundo: escolha o plano de fundo do seu slide. Escolha entre transparente, colorido (você pode adicionar um gradiente), imagem, imagem externa ou um vídeo (YouTube, Vídeo ou HTML5).
• Miniatura: Defina a miniatura visível pelo administrador e a miniatura usada para navegação.
• Animação: escolha a animação de transição para seus slides.
• Filtros — 22 de filtros diferentes para adicionar aos seus slides.
• Progresso — permite personalizar a duração do slide, pausa e visibilidade em um slide.
• Regras de publicação — controle se seu slide será publicado ou não.
• Tags e link — ajuda a adicionar dados personalizados de classe, ID e HTML para seu slide, bem como um link.
• Parâmetros — adicione até 10 parâmetros personalizados para usar em seus slides e navegação.
• Camadas de loop — gerencie as configurações de loop se seu controle deslizante tiver apenas um slide.
• Na rolagem — personalize seus efeitos de paralaxe e rolagem por slide.

Adicionando novos slides

Depois de terminar de configurar o controle deslizante e ajustar todas as opções, é hora de adicionar um novo slide ao projeto. Você pode ver o quadro, que exibe o conteúdo do slide quando você o adiciona. Agora é transparente. Você pode alterar a opção de plano de fundo e adicionar uma imagem ou definir a cor.

Você pode fazer upload de uma imagem do seu computador ou usar uma fonte externa (adicionando um link). Além disso, você pode definir a cor como plano de fundo em vez de uma imagem. Isso pode ser feito com bastante facilidade.

Basta selecionar a opção Colorido no menu suspenso Tipo no painel Origem e clicar no botão BG Color para escolher sua cor. Se você quiser usar o vídeo basta adicionar a fonte.

Adicionando uma nova camada ao slide

Na parte superior da tela, você encontrará a opção +Adicionar camada . Use-o para adicionar uma nova camada ao slide. São 8 opções diferentes.

As opções mais populares, no entanto, são imagens e textos com suporte de botões caso você precise adicionar algumas ferramentas de navegação ao controle deslizante.

Opções de camada: como usar

A flexibilidade do Slider Revolution é baseada na disponibilidade de várias opções e na capacidade de configurar cada detalhe separadamente, bem como ajustar todo o projeto do slider. As camadas não são uma exceção. Toda vez que você adiciona uma nova camada ao slide, você pode controlar todas as opções para ela. No exemplo de adicionar uma nova imagem ao slide, revisaremos todos os parâmetros que as opções de camada permitem alterar.

Quando você quiser adicionar uma camada de imagem ao seu slide, basta clicar em Imagem no menu suspenso Adicionar camada . Em seguida, carregue a imagem desejada.

Ao lado do quadro, você encontrará várias opções de camada (Conteúdo, Estilo, Tamanho e Pos, etc.).

O conteúdo da camada exibe algumas informações básicas sobre a camada. Você pode definir o carregamento lento e alterar seu tipo de origem.

Usando as opções de estilo da camada , você poderá adicionar um plano de fundo colorido.

A próxima opção é o Espaçamento . O espaçamento nos ajuda a mover a camada de cima para baixo, da esquerda para a direita, de baixo para cima e da esquerda para a direita. Eles são marcados com a letra 'M'.

Pos e Tamanho. Defina o alinhamento, bem como a posição e o tamanho da camada da imagem. Tanto o alinhamento vertical quanto o horizontal podem ser alterados facilmente, basta clicar em um dos ícones de alinhamento.

Depois disso, você pode definir a posição com as opções Vertical Offset from Aligned Position. Brinque com os parâmetros X e Y para mover sua camada no slide.

Opções avançadas de camada

As opções de estilo avançado permitem girar uma camada horizontalmente, verticalmente e centralmente e permitem adicionar sombras às camadas.

Opções de animação de camada

A animação é a principal opção no Slider Revolution. A ideia principal do plugin é adicionar ao seu site elementos animados em vez de visuais estáticos e padrão.

As opções de animação adicionam movimento aos seus slides, usando esta ação você pode animar os slides e definir animações de exibição e saída.

Existem duas linhas para opções de aparecer e sair: IN e OUT.

Cada linha é fornecida com um menu suspenso com diferentes tipos de animações. Por padrão, a opção fade-in é definida para todas as camadas. Experimente algumas animações para ver como fica no seu slide e escolha a melhor.

A seção abaixo é usada para a duração da animação, atenuação da animação e para definir o início da animação . A Duração define quanto tempo leva para a animação terminar, a opção Iniciar define a duração de tempo após a qual a animação começará assim que o slide for carregado. A atenuação define a velocidade na qual a animação irá progredir.

Linha do tempo de animação

Se você tiver várias camadas adicionadas ao seu slide, provavelmente não deseja que todas apareçam ao mesmo tempo. A linha do tempo de animação de revolução do slider pode ajudá-lo a lidar com esse problema. Ele está localizado logo abaixo da nossa estrutura de trabalho.

O início de quadro padrão para cada camada é definido como 0 milissegundos, o que significa que as camadas aparecerão na tela após 0 milissegundos do carregamento. A duração do aparecimento é geralmente definida para 3 segundos, o que significa que uma camada se torna totalmente visível em 3 segundos. Para alterar as opções, escolha a camada e edite-a especificando um valor diferente.  

Certifique-se de definir valores diferentes para diferentes camadas, para que eles não apareçam de uma só vez e pareçam confusos.

Agora, vamos dar uma olhada nas opções de Timeline

1. Visualização de lista

Esses ícones podem ser usados ​​para ocultar ou mostrar as Camadas e ocultar ou mostrar as Linhas com base no alinhamento vertical. Apenas o administrador do site tem acesso a essas opções.

2. Duração do cronograma
A duração total da Timeline é definida em Module General Options > Defaults. Além disso, ele pode ser definido individualmente em Opções de slide > Progresso.

Ao arrastar o bloco na Linha de tempo para a esquerda e para a direita, você pode ajustar facilmente o comprimento do slide. Outra opção que você pode fazer é clicar no ícone do relógio e editá-lo em porcentagem.

3. Visualizar Cronograma

Para visualizar a linha do tempo, você precisa clicar no ícone Reproduzir ou simplesmente arrastar o bloco ocioso.

4. Renomeie as Camadas

Para renomear a camada, clique duas vezes no texto da camada na Linha de tempo e renomeie-a. Além disso, você pode editar o título da camada na parte superior central do Editor.

5. Índice z de camadas / Ordem de empilhamento

Para definir a ordem de z-index/empilhamento, basta arrastar as camadas na linha do tempo.

6. Animações

Para cada camada, há uma animação de entrada e saída e animações de quadro-chave adicionais. Todas as animações são apresentadas na linha do tempo.

Arraste um bloco de animação para ajustar o ponto inicial da animação na Linha de tempo. E edite a duração da animação arrastando o ponto final do bloco

Opções de loop de camada

A guia Loop permite criar animações em loop. Você pode escolher um tipo de animação, definir a velocidade e a atenuação do loop e definir um horário de início e término para o loop.

Existem 8 tipos que você pode escolher: Custom, Pendulum Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover e Pulse. Cada animação em loop tem seu próprio conjunto de opções.

O pêndulo faz sua camada balançar de um lado para o outro. Entre as opções que você pode configurar está o grau final e inicial — isso identifica os graus entre os quais a animação ocorrerá e o ponto de origem X e Y — este parâmetro determina o ponto do eixo a partir do qual a camada irá girar, você pode especificá-lo em porcentagens.

Loops de efeito permitem que você escolha entre várias opções - Tons de cinza, Pisca, Plano e Lithing. Todos os efeitos parecem diferentes, por isso recomendamos que você veja todas as opções para escolher qual é a melhor para você.

A animação Wave faz sua camada girar em um movimento semelhante ao da onda. Ele gira em torno de um eixo fora da camada. Você pode definir um ponto X e Y de rotação para determinar a posição do eixo em torno do qual a camada irá girar, um ângulo inicial para identificar a posição inicial da animação e um raio para a órbita da rotação.

O loop Wiggle fará sua camada balançar de um lado para o outro – de cima para baixo, da esquerda para a direita e vice-versa. Use o menu suspenso para escolher a opção desejada.

O loop Rotating faz sua camada girar em torno do ponto do eixo definido. A camada irá girar e fazer um círculo completo se você escolher o primeiro item da lista suspensa Girar – o item Girar.

Para fazer sua camada se mover da esquerda para a direita, da direita para a esquerda, de cima para baixo, na diagonal, você pode usar a animação Slide and Hover. Você pode definir uma posição inicial e final para a animação.

A animação Pulse faz com que sua camada aumente e diminua continuamente o zoom. Especifique o início do zoom e o fim do zoom. Os valores padrão aqui são 1 para início e fim. Isso significa que a camada permanecerá em 100% do seu tamanho. Em outras palavras, não vai animar. Se você inserir 0,5 para o início do zoom, sua camada começará em 50% do tamanho e aumentará o zoom para 100% do tamanho, depois voltará para 50%, etc.

Opções de Passagem de Camada

Os efeitos de foco são os grampos de um bom UX. Os efeitos de foco geralmente indicam que a ação é necessária ou executada, especialmente porque esse método é usado ativamente com os controles deslizantes. Com o Slider Revolution, você pode fazer com que camadas, textos e imagens mudem ao passar o mouse.

Adicionando Efeitos Hover no Slider Revolution

Primeiro, você precisa ativar o foco da camada. Selecione a camada à qual deseja adicionar o efeito e clique em Passe o mouse em Opções de camada. Clique no Enabled para ativá-lo.

Na parte inferior, você encontrará todas as opções necessárias para definir o comportamento da camada ao passar o mouse. Se você deixar tudo como está, a camada não mostrará nenhuma alteração.

Configurações de foco

A primeira coisa que você pode definir aqui é o Cursor. No menu suspenso, você pode encontrar diferentes opções para o Cursor. Automático e Padrão executam as mesmas funções e não refletirão nenhuma diferença. A mira e o ponteiro definem a forma do cursor do mouse na tela.

Existem ainda mais estilos de cursor aqui. Alguns deles são bastante incomuns, porém, a maioria deles indica a ação que a camada tem quando acionada. Por exemplo, se você estiver vinculando a camada ao centro de suporte, poderá escolher o cursor de Ajuda.

Pointer Event por padrão é definido como Auto. A opção Nenhum é usada quando não há conteúdo vinculado. Esta seção permite que você escolha a aparência do cursor ao passar o mouse sobre a camada, ative a animação e configure-a.

Animação ao passar o mouse

Em seguida, há uma Animação Hover que você pode definir dependendo de suas preferências. Há várias coisas que você deve estar ciente. Primeiro, não parece bom quando a camada muda ao passar o mouse e a transição acontece em um momento. Sempre melhor quando a transição acontece com o atraso. . Por padrão, o atraso é definido para 300ms, deixe assim se for conveniente para você ou altere o valor.

Além disso, você pode definir o easing para a transição. Você tem várias opções para escolher.

Filtro

Para sua camada, você pode adicionar Filter. Em outras palavras, você pode borrar a lira até certo ponto. A opção é expressa em pixels. Quanto maior o valor, mais “espesso” o desfoque.

Estilo

Há também uma parte de estilo onde você pode configurar a cor de fundo e ajustar a borda, ou seja, alterar sua cor e selecionar o estilo da borda.

Nas opções de camada de rolagem

As opções de rolagem permitem que o slide se mova na rolagem do mouse. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Como criar um efeito de paralaxe com revolução deslizante

Parallax é um dos efeitos mais populares que tornam o site mais impressionante e dinâmico. Você provavelmente já viu muitos sites e temas integrados com esse efeito específico. E agora vamos mostrar como você pode construir um por conta própria usando o plugin Slider Revolution.

O que é Paralaxe?

O efeito de paralaxe pode ser definido como um efeito onde os elementos em segundo plano e os elementos em primeiro plano se movem em velocidades diferentes e criam a ilusão de profundidade. Normalmente, os elementos do plano de fundo se movem mais devagar

Existem diferentes maneiras de como você pode obter esse efeito em seu site. Felizmente para nós, o Slider Revolution tem todas as funcionalidades para ajudá-lo a obter o efeito de paralaxe.

Criando Parallax na Revolução do Slider

Primeiro ligue a paralaxe . Vá para Module General Options > On Scroll > Scroll Based Features > Parallax e gire a chave Parallax Enabled para On .

Existem muitos valores de profundidade que o plugin oferece. Selecione o que for melhor para você. Você também pode inserir seus próprios valores.

Adicionando Paralaxe às Imagens de Fundo

Para adicionar o efeito de paralaxe à sua imagem de fundo, vá para Opções de slide > Ao rolar > Configurações de paralaxe e 3D e escolha a profundidade preferida no menu suspenso.

Existem regras rígidas ao selecionar a profundidade. É melhor se você tentar valores diferentes e ver qual deles funciona melhor com seu controle deslizante. Profundidades diferentes afetam diretamente e criam efeitos diferentes. É por isso que recomendamos que você experimente para ver o resultado.

Adicionando paralaxe às camadas

No Slider Revolution, o efeito de paralaxe pode ser adicionado não apenas às imagens de fundo, mas também às camadas individuais. O que é ótimo sobre esse efeito é que ele dá aos usuários uma ilusão se eles controlarem as partes do controle deslizante na página apenas movendo o mouse. Isso parece muito bom no site e, além disso, é muito fácil de configurar.

Selecione sua camada, vá para Opções de camada > Na rolagem > guia Paralaxe e 3D e escolha o nível de profundidade desejado.

Como resultado, você obterá a camada com paralaxe que é ativada no movimento do mouse.

Seja uma imagem de fundo ou uma camada individual, adicionar o efeito de paralaxe Slider Revolution é extremamente fácil. Embora nem todo controle deslizante precise de paralaxe. Use-o principalmente para controles deslizantes simples, pois os dinâmicos com muita animação provavelmente se sairão melhor sem esse efeito.

Adicionando uma camada de botão

Com o Slider Revolution, você pode criar e projetar o botão para adicionar ao seu controle deslizante para navegação. Para fazer isso, primeiro, precisamos adicionar uma camada de botão ao quadro de trabalho do controle deslizante.

Quando você adiciona o botão ele aparecerá no formulário de texto, você só precisa personalizá-lo. No lado direito da tela, você pode encontrar muitas opções de botões pré-projetados. Você pode selecionar um deles para o seu botão.

Além disso, você pode optar por algo original, pois existem variações de botões de reprodução, alternadores e outros. Além disso, é possível adicionar um efeito de sombra e tornar o botão mais interessante.

Depois de escolher o estilo, você pode alterar as configurações avançadas e personalizar sua aparência. Todas as configurações podem ser encontradas na guia Opções de camada.

Você pode alterar a aparência inicial do botão, alterar o texto, alterar sua exibição ao passar o mouse e configurar animações.

Como tornar o controle deslizante responsivo

No início, já configuramos alguns parâmetros para tornar nossos slides responsivos. Isso não é suficiente. Para isso, você também precisa garantir que cada camada em cada um de seus slides se adapte perfeitamente a todos os dispositivos e tamanhos de tela.

Assim, depois de adicionar todos os slides e camadas ao controle deslizante, é hora de ajustá-los para todos os outros dispositivos disponíveis.

Ao editar slides no quadro de trabalho, você os configura principalmente para que tenham uma boa aparência em dispositivos desktop. Quando tiver certeza de que tudo parece perfeito na área de trabalho, você pode começar a brincar com os layouts de outros dispositivos.

Agora você pode escolher o dispositivo que deseja emular na lista suspensa. Ligue o dispositivo que você deseja verificar a exibição do controle deslizante. Os dispositivos disponíveis são: Desktop, Notebook, Tablet, Celular.

Você pode modificar tudo para cada dispositivo. Por exemplo, para camadas de texto, você pode definir diferentes tamanhos de fonte, altura de linha, espessura de fonte e cor, tudo dependendo do dispositivo em que seu controle deslizante é visualizado. Para a camada de imagem, para alterar o tamanho da mesma, você precisa adicionar uma largura diferente e a altura da imagem será ajustada automaticamente de acordo com a largura.

Preste atenção às bordas da grade azul. Eles definem as bordas do dispositivo com o qual você está trabalhando no momento. Portanto, se alguma de suas camadas se estender para fora das bordas, certifique-se de alterar as configurações dessas camadas.

Por fim, salve seu controle deslizante e confira como ele fica ao vivo.

Adicionando o controle deslizante à página

Você fez um bom trabalho e agora é hora de ver como seu controle deslizante fica na página. Para fazer isso, use o código de acesso Slider Revolution que você criou anteriormente. Este código de acesso pode ser encontrado na guia Título da seção Opções Gerais.

Ou se você abrir o Slider Revolution em seu painel. Encontre o módulo atual e selecione a opção Incorporar.

Na janela pop-up, selecione a opção Para as páginas e postagens e copie o código de acesso.

O shortcode deve se parecer com [rev_slider alias=”title”][/rev_slider] com o “title” baseado no alias que você deu ao slider.

Exibindo Slider com Elementor

Usar o método shortcode para exibir o controle deslizante na página é bastante simples. No entanto, existe uma maneira que pode ser ainda mais fácil. Todos os controles deslizantes que você cria com o plug-in Slider Revolution podem ser inseridos na página usando o widget Elementor. Selecione a página na qual você deseja exibir o controle deslizante e abra-o por meio do editor Elementor. Em seguida, basta arrastar e soltar o elemento no quadro de trabalho. No painel de widgets, procure o widget Slider Revolution 6 e adicione à página. Ao arrastar o widget, você precisará escolher o controle deslizante que deseja usar.

Use essa maneira como uma alternativa ao shortcode, pois alguns proprietários de sites acham mais fácil trabalhar com widgets de construtor de páginas.

Como exportar controles deslizantes

Para exportar o controle deslizante, vá para Slider Revolution clicando na guia relevante no menu do painel. Todos os controles deslizantes que você importou ou criou serão exibidos lá.

Passe o mouse sobre a miniatura do módulo que deseja exportar. Clique na pequena seta no canto inferior direito. Entre todas as opções apresentadas selecione a opção Exportar e clique nela.

Você verá a caixa de diálogo de confirmação que o notificará de que a exportação pode levar algum tempo. Clique em 'Sim, Exportar Slider' e o download começará. Quando o download terminar, você terá um arquivo .ZIP do seu controle deslizante.

Concluir

Quase todos os temas desenvolvidos pela StylemixThemes incluem o plugin Slider Revolution no pacote. Adoramos este software poderoso que nos dá a chance de tornar os sites mais atraentes, atraentes e interativos.

Esperamos que nosso guia tenha ajudado a entender melhor o processo de construção do controle deslizante com este incrível plugin. Se você estiver procurando por mais informações, siga a página principal do Slider Revolution.