Slider Revolution WordPress Plugin Review & How to Guide

Slider Revolution WordPress Plugin Review & How to Guide

Slider Revolution é um controle deslizante premium disponível como um plugin WordPress e extensão Magento. Ganhou enorme popularidade na comunidade WordPress devido à sua ampla gama de recursos e facilidade de uso.

Nesta visão geral, abordaremos os principais recursos do plug-in Slider Revolution WordPress e, em seguida, mostraremos como é fácil criar seus próprios controles deslizantes do zero.

Obter Revolução Slider com o seu tema!  O plug-in Slider Revolution está incluído gratuitamente na compra do nosso Tema WordPress Total como um plug-in empacotado. Portanto, você não apenas obtém um plugin incrível, mas também o tema Total, bem como o plugin do construtor de páginas WPBakery ! (Por favor, veja as notas sobre como instalar e usar seus plugins incluídos abaixo).

OBTER REVOLUÇÃO DESLIZANTE

Revolução Slider: o que torna este plugin tão bom

Existem muitos recursos excelentes incorporados ao Slider Revolution para facilitar a criação de controles deslizantes personalizados para o seu site. Aqui estão alguns dos nossos favoritos.

Layouts e capacidade de resposta

Slider Revolution mudou um pouco o foco para ser mais do que apenas um controle deslizante. Desde a atualização da versão 6, é claro que você pode criar sliders animados impressionantes, bem como carrosséis e cenas (um único slide usado como uma linha de construtor de páginas). O plugin também é responsivo com uma nova opção de herança inteligente. Portanto, em vez de seu controle deslizante simplesmente encolher em dispositivos móveis, os elementos serão redimensionados ou reduzidos para que seu controle deslizante ou módulo seja legível e otimize de acordo com o dispositivo.

Várias fontes de conteúdo

Quer criar um controle deslizante para suas postagens? Ou para seus produtos WooCommerce? Não é um problema – escolha entre 9 fontes de conteúdo diferentes ao criar seu controle deslizante.

Ao escrever este post, o Slider Revolution suporta conteúdo baseado em:

• Padrão/personalizado : faça upload de suas próprias imagens/vídeo
• Postagens : escolha entre as postagens do seu blog, tipos de postagem personalizados, IDs de postagem específicos ou use a postagem/página atual (ótimo se você deseja adicionar um controle deslizante em destaque à postagem do blog ou item do portfólio)
• WooCommerce : exiba seus produtos
• Mídias sociais : especificamente Flickr, Instagram, Twitter, Facebook, YouTube ou Vimeo

Opções fáceis

O Slider Revolution facilita a criação de controles deslizantes personalizados, adicionando opções para praticamente tudo. Escolha o atraso do slide, setas de navegação, fontes personalizadas, adicione fundos de paralaxe, localização do controle deslizante (adicione margens), adicione camadas de mídia, insira botões, selecione transições de slides e muito mais, tudo usando os menus suspensos em todo o plug-in.

Além disso, você pode personalizar praticamente tudo e até salvar suas próprias predefinições para reutilizar estilos de fonte, transições de slides, animações de camadas e muito mais.

Suporte de mídia

Adicione texto, links, imagens, vídeos e áudio com apenas alguns cliques do mouse. Isso lhe dá a capacidade de criar slides ricos em informações com os quais seus leitores e clientes poderão se identificar. Além disso, cada um desses tipos de mídia é adicionado como sua própria camada com animações, tempo e estilos exclusivos que você define usando as super opções do Slider Revolution.

Instalação de revolução deslizante

Primeiro, você precisará obter uma cópia do plug-in Slider Revolution WordPress . Existem alguns métodos diferentes para instalar o plug-in, dependendo se você comprou sua própria cópia do plug-in ou se ele foi incluído no seu tema premium.

1. Instale sua cópia do Slider Revolution

Se você comprou sua própria cópia do Slider Revolution da CodeCanyon, você mesmo precisará instalar o plugin. Para baixar os arquivos do plug-in, faça login na sua conta Envato e vá para a página de downloads (você pode acessar esta página passando o mouse sobre seu nome de usuário). Em seguida, localize sua cópia do Slider Revolution e selecione a opção de download para “Somente arquivo WordPress instalável”.

Em seguida, faça login no seu site WordPress e navegue até Plugins> Adicionar novo.

Em seguida, clique no botão “Upload Plugin” no canto superior esquerdo da tela.

A partir daqui, use o botão “Escolher arquivo” para selecionar o arquivo de plug-in que você acabou de baixar do CodeCanyon e clique no botão “Instalar agora”.

Depois disso, basta ativar o plugin e você está pronto para começar a construir sliders!

Nota: Você também pode instalar seu plugin via FTP entrando em seu servidor e carregando o plugin extraído (descompactado) para sua pasta localizada em wp-content/plugins.

2. Instale o Slider Revolution incluído com um tema premium

Muitos temas premium incluem cópias de plugins premium com o download do tema. Se é assim que você deseja instalar sua cópia do Slider Revolution, você precisará consultar a documentação do seu tema.

A maioria dos desenvolvedores de temas faz o possível para facilitar o processo de instalação do plugin incluído. Por exemplo, incluindo uma barra de aviso ou painel de ativação.

Em nosso guia, estamos usando o tema Total WordPress . Depois de instalar e ativar o Total, você verá um prompt na tela que recomenda que você instale o Slider Revolution (e outros plugins incluídos no tema).

Basta clicar no link para ir para a página de plug-ins recomendados/agregados e clicar para instalar e ativar seus plug-ins.

O Total também inclui uma opção personalizada no importador de demonstração para instalar e ativar o Slider Revolution ao importar dados de amostra. Se o Slider Revolution foi usado para criar a demonstração que você está importando, você deve ser solicitado a instalar o plug-in como visto acima.

Em seguida, certifique-se de que a opção “Import Sliders” esteja selecionada e o tema importará automaticamente quaisquer controles deslizantes personalizados da demonstração. Fácil!

Guia do usuário do Slider Revolution

Depois de instalar o plugin, ele deve adicionar um item de menu ao seu painel principal do WordPress. Clique nele para ser levado para a página principal de gerenciamento de controles deslizantes do Slider Revolution.

A partir daqui, você pode criar ou editar controles deslizantes, importar modelos, ativar sua licença se você comprou sua própria cópia do plug-in.

Ativação da licença do plug-in Slider Revolution

Se você mesmo comprou o Slider Revolution, pode ativá-lo para desbloquear todos os recursos do controle deslizante. Para localizar sua licença, você precisará voltar ao CodeCanyon e visitar a página do plug-in Slider Revolution.

A partir daqui, clique na guia “Suporte” para ver todas as suas licenças adquiridas. Copie sua chave de licença e volte para o painel do WordPress.

Clicando no ícone do sino.

Em seguida, insira sua chave de licença. Para receber suporte do autor do plug-in, bem como desbloquear os modelos e complementos do módulo Slider Revolution, você precisará comprar sua própria licença.

IMPORTANTE, Plugin empacotado: Se sua cópia do Slider Revolution foi incluída no seu tema, você pode ignorar esta seção. Não há necessidade de ativar uma licença de plug-in, pois os plug-ins agrupados não possuem uma. Em vez disso, cabe ao autor do tema garantir que sua cópia do plug-in seja atualizada nas atualizações do tema. Embora às vezes isso signifique que você pode ter que esperar um pouco por uma atualização do controle deslizante, isso garante que o plug-in seja totalmente compatível com o seu tema.

Configurações Globais do Slider Revolution

Antes de começar a construir, recomendamos visitar a opção Configurações Globais (que é um item de submenu abaixo do Slider Revolution).

Existem muitas opções importantes aqui para configurações de grade responsivas padrão (que se aplicam ao criar novos controles deslizantes), URL de carregamento de fonte personalizado, criação de banco de dados para o plug-in e muito mais. Mas há duas opções que recomendamos que você ajuste.

A primeira opção que você deve considerar editar é a Permissão que você pode usar para restringir o acesso do plug-in apenas aos administradores. Essa é uma maneira fácil de garantir que você, seu web designer ou outros administradores sejam os únicos a criar controles deslizantes em seu site (especialmente útil se você tiver autores convidados em seu blog).

A segunda opção que você pode querer editar é a opção Default Layout Grid Breakpoints . Estas são as larguras de pixel de acordo com o dispositivo para suas configurações de capacidade de resposta.

Também é aqui que você pode habilitar fontes personalizadas, carregamento lento de terceiros e forçar a criação de banco de dados (se você estiver tendo problemas com a Tabela de Revolução do Slider). Uma vez feito, certifique-se de salvar suas configurações.

Agora você pode começar a construir seus controles deslizantes! Você tem três opções – comece do zero, pegue um arquivo de exportação gratuito dos “exemplos de uso” do Slider Revolution ou importe sliders de amostra incluídos no seu tema.

Importação manual de um controle deslizante

Para importar um slider que você baixou de outro site dos exemplos de uso do Slider Revolution, primeiro baixe o arquivo do slider do site deles, depois navegue de volta ao seu WordPress e clique na  opção Import Slider . A partir daqui, procure o arquivo de amostra que você baixou e clique em Carregar . Isso deve adicionar o controle deslizante de amostra e todas as suas configurações para que você possa usá-lo como base para um novo controle deslizante.

Novo módulo do modelo

Se você comprou sua própria licença do Slider Revolution , terá acesso a todos os layouts pré-fabricados (há mais de 180 para escolher). Para usar um modelo, passe o mouse sobre o que você gosta, clique no ícone Olho para visualizar ou no ícone Mais para instalar o modelo.

Nota : Se a sua cópia do Slider Revolution foi empacotada com o seu tema, você não terá acesso a esses modelos. No entanto, muitos autores de temas incluem seus próprios modelos de controle deslizante que eles criaram para acompanhar suas demonstrações de temas que você pode importar manualmente.

Criar um novo controle deslizante

Se você estiver fazendo um slider do zero, clique na opção New Blank Module . Agora vamos trabalhar!

Primeiro, você verá uma mensagem de boas-vindas com a opção de usar o guia de início rápido. Clique para começar e acompanhe nosso passo a passo guiado abaixo.

Escolha um tipo de controle deslizante – você tem a opção de escolher seu módulo:

• Slider : exatamente o que parece, vários slides animados que giram para exibir um slide após o outro
• Cena : um único slide que pode ser usado como módulo de conteúdo (como uma linha ao usar um construtor de páginas)
• Carrossel : muitos slides com vários visíveis ao mesmo tempo

Em seguida, selecione um layout:

• Auto : esta é a configuração padrão que estenderá seu controle deslizante para a largura do contêiner principal, conforme definido pelo seu tema WordPress, mas você ainda definirá a altura.
• Largura total : exatamente o que parece – uma opção de controle deslizante de largura total que se estende da esquerda para a direita. Você ainda precisará definir a altura do seu controle deslizante.
• Tela cheia : use isso para criar controles deslizantes grandes que literalmente preenchem a tela inteira, não importa o tamanho do seu navegador ou dispositivo (você pode até usar essa opção para adicionar controles deslizantes de tela cheia com vídeos para ainda mais impacto).

E como último passo, você precisará escolher e personalizar suas configurações de responsividade ou “redimensionar”:

• Redimensionamento clássico (linear) : depois de definir as configurações de tamanho da tela principal, seu controle deslizante será compactado de acordo (assim, um controle deslizante de 1000x400px será compactado em um controle deslizante de 500x200px com as fontes, imagens e outros elementos deslizantes diminuindo proporcionalmente também).
• Herança inteligente : quatro tamanhos de dispositivo são criados automaticamente com base nas configurações da área de trabalho que você escolher, com a opção de fazer ajustes conforme necessário.
• Personalizado (manual) : permite definir o tamanho do controle deslizante usando pixels exatos, com opções adicionais para definir os tamanhos do controle deslizante em várias larguras de tela (computador, laptop, tablet e telefone).

Depois de escolher as configurações principais do controle deslizante, você será levado ao construtor Slider Revolution. É aqui que você realmente criará todos os seus slides.

Opções gerais de revolução deslizante

Antes de construir, você deve cuidar de alguns dos princípios básicos. No lado direito estão todas as configurações do controle deslizante. Começando com o ícone de engrenagem para configurações gerais, aqui está uma rápida olhada no que você encontrará.

Título : Dê um nome ao seu controle deslizante. Claro, você pode deixar o título e o alias padrão do Slider 1 , mas recomendamos alterar isso para uma convenção de nomenclatura exclusiva de acordo com a finalidade do slider. Selecione um nome para seu controle deslizante que o ajudará a lembrar o que ele contém ou em qual página você o está usando. Por exemplo , home  se você estiver usando o controle deslizante em sua página inicial. É também aqui que você encontrará o código de acesso fácil do seu controle deslizante para inseri-lo em postagens e páginas.

Layout : Escolha o tipo de controle deslizante (slider, cena ou carrossel) e dimensionamento (automático, largura total ou tela cheia). Se você usou o guia de início rápido, já selecionou isso. No entanto, também é aqui que você pode editar as larguras e alturas da sua área de camada (onde você adicionará elementos deslizantes), a posição do seu módulo (o centro é o padrão), uma cor de fundo padrão ou imagem para seu controle deslizante (observe – isso é separado dos planos de fundo de slides individuais), borda personalizada, sombra projetada e um punhado de opções avançadas (para altura máxima do wrapper, estouro, perspectiva da camada etc.).

Conteúdo : selecione como você gostaria de adicionar conteúdo ao seu controle deslizante. Existem 9 fontes de conteúdo para escolher, mas na maioria das vezes você deseja selecionar a opção Personalizada para criar seu controle deslizante (embora as opções Post-based e WooCommerce também sejam super úteis).

Padrões : A opção mais importante nesta seção é a Duração padrão do slide – que é quanto tempo cada slide durará por padrão (observação – você pode personalizar isso por slide mais tarde, mas é bom ter um padrão). Você também pode definir um atraso de inicialização, que fará com que seu controle deslizante espere um determinado período de tempo antes de animar. Existem outros padrões para ID de módulo personalizado, classes e capacidade de resposta e muito mais, mas a maioria dos usuários não precisará alterá-los.

Geral : algumas das opções que você pode querer usar nesta seção incluem 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 (se for diferente do slide que você adicionou primeiro ao criar seu controle deslizante). Também é aqui que você encontrará opções para ocultar ou desativar seu controle deslizante no celular ou em larguras de pixel especificadas.

On Scroll : Slider Revolution inclui vários efeitos de rolagem avançados, como paralaxe, profundidades 3D, linha do tempo, desbotamento, desfoque, escala de cinza e muito mais. Todos com configurações personalizáveis ​​para velocidade de rolagem, deslocamento/inclinação, etc. Não vamos nos aprofundar nisso, pois podem levar algum tempo para dominar, mas se você comprou sua própria licença de controle deslizante, recomendamos jogar com alguns das opções prontas da biblioteca de modelos para aprender como esses diferentes efeitos de rolagem se comportam.

Spinner : Este é o seu pré-carregador – assim que suas imagens e animações estiverem sendo carregadas em seu servidor, os visitantes da sua página verão o fundo do slider que você selecionou junto com o spinner que você escolheu. Atualmente, existem 15 spinners exclusivos para escolher, todos com cores personalizáveis.

Avançado : Se você deseja ativar o carregamento lento, pode fazê-lo aqui, bem como selecionar uma imagem de fallback ou simplificar seu controle deslizante em navegadores antigos (especificamente para iOS4 e IE8).

CSS/jQuery : Você pode adicionar seu próprio código personalizado aos controles deslizantes, mas por mais tentador que seja, recomendamos deixar essa opção em paz, a menos que você esteja confortável com linguagens de codificação.

Como Modal : Se você estiver criando um controle deslizante que deseja que apareça como um pop-up ou lightbox, é aqui que você encontrará opções para a posição do controle deslizante, se desejar usar uma cor de capa e o código de acesso a ser usado ao inserir seu controle deslizante modal nas páginas (observação – isso é diferente do código de acesso do controle deslizante principal, pois adiciona um atributo de uso).

Skin : A opção de skin é essencialmente uma predefinição que você pode criar e depois atribuir a camadas de texto enquanto cria slides. Esta é uma ótima ferramenta se você quiser manter sua marca igual em todas as camadas.

Complementos : Esta seção permite ativar e acessar complementos (observação – os complementos só estão disponíveis se você comprou sua própria licença de controle deslizante, eles não estão incluídos nas versões do Slider Revolution empacotadas com temas).

Opções de navegação de revolução deslizante

Em seguida, decida o que você gostaria de utilizar para navegação no ícone do teclado . Há muitas opções que você pode usar para o seu controle deslizante. Todas as opções abaixo incluem configurações fáceis de personalizar para posição/alinhamento, dimensionamento, visibilidade e estilo/predefinições globais.

• Progresso : Adicione uma barra de progresso ou um círculo que visualize o progresso atual do slide (ou o progresso completo do controle deslizante/módulo).
• Setas : adicione setas para facilitar o clique dos visitantes nos slides com sua escolha de 13 estilos diferentes (observação – o personalizado geralmente é baseado no seu tema).
• Marcadores : para adicionar pontos de navegação aos seus slides, ative os marcadores e escolha entre 14 estilos.
• Guias : se você estiver criando um controle deslizante de conteúdo com base nas postagens do seu blog, convém examinar a navegação das guias. Isso exibe uma miniatura, título e quaisquer parâmetros (conforme definido em Opções de slide) – muito semelhante a um widget de postagens recentes, por exemplo.
• Thumbs : Para exibir uma imagem em miniatura como uma opção de navegação, selecione thumbs e escolha entre 5 estilos.
• Tamanho anterior : defina o tamanho de suas imagens de visualização usadas para navegação.
• Toque : ative e personalize a navegação por toque, incluindo opções para rolagem de blocos, velocidade e direção.
• Teclado : Ative a navegação pelo teclado (recomendado para acessibilidade).
• Mouse : Edite a navegação controlada pelo mouse para usar 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. Como mencionado anteriormente, a menos que você esteja familiarizado com a codificação, recomendamos usar as opções internas do controle deslizante.

Opções de slides de revolução deslizante

E, finalmente, suas opções de slides.

• 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 : você pode adicionar filtros ao seu controle deslizante. Na minha opinião, isso faz mais sentido para slides com fundo de imagem, mas depende de você. Atualmente, existem 22 predefinições para escolher.
• Progresso : Você pode personalizar a duração do slide (tempo em ms), pausa e visibilidade slide a slide.
• Regras de publicação : defina se seu slide é publicado ou não publicado. Isso é ótimo se você estiver trabalhando em slides sazonais ou de tempo limitado que deseja criar, publicar e remover lentamente.
• Tags e link : nesta seção, você pode adicionar dados personalizados de classe, ID e HTML para seu slide, bem como ativar um link (se desejar adicionar um link a todo o slide).
• Parâmetros : adicione até 10 parâmetros personalizados para usar em seus slides e navegação.
• Camadas de Loop : Crie e personalize suas configurações de loop de slides se seu controle deslizante tiver apenas um slide (especialmente útil se você estiver usando seu controle deslizante como um tapete de boas-vindas ou uma seção de página).
• Na rolagem : Você também pode personalizar seus efeitos de paralaxe e rolagem (desbotamento, desfoque ou escala de cinza) por slide.

Como fazer um slider com o Slider Revolution

Agora que você viu os recursos (uau, são muitos!), vou dar um resumo rápido do que achamos que são as opções mais importantes. Especificamente, mostrando como construir um controle deslizante simples.

Opções gerais

Primeiro, selecionamos algumas opções gerais:

• Adicione um título e um alias personalizados na seção Título
• Personalize a altura e a largura da área da camada da área de trabalho em Layout (definimos a nossa para 1000px de largura para corresponder à largura do nosso site e 500px de altura)
• Escolha uma duração de slide padrão (usamos 5000ms, que é de 5 segundos) em Padrões
• Selecione um Spinner para usar no seu pré-carregador (somos parciais com a opção 7)

Navegação deslizante

Em seguida, escolhemos nossas opções de navegação. Em nosso exemplo, selecionamos o estilo “Urano” que são setas simples.

Adicionando slides

Isso é tudo o que queríamos definir para nosso controle deslizante, então o próximo passo é adicionar alguns slides. Ao criar um novo controle deslizante, você já está no slide nº 1 por padrão, para que possa começar a adicionar configurações e camadas imediatamente.

Você pode adicionar uma cor de fundo, imagem ou vídeo. Se você optar por adicionar uma cor, também poderá adicionar um gradiente.

Para um vídeo, basta adicionar a fonte e fazer algumas seleções. Na captura de tela acima, configuramos o slide para forçar o Cover Mode (para que o vídeo preencha todo o slider) e para retroceder no início (para que seja reproduzido desde o início sempre que o slide for iniciado).

Para nosso exemplo, adicionamos uma imagem de nossa Biblioteca de mídia. Deixamos a imagem com a configuração padrão de Capa (que estica a imagem para cobrir todo o controle deslizante, ao contrário de Conter, que reduz a imagem para caber nas restrições do controle deslizante).

Adicionando camadas

Agora para adicionar camadas! Na parte superior da tela, você notará uma opção para “+ Adicionar camada”. É aqui que você encontrará várias opções para adicionar aos seus slides. Você pode escolher entre 8 opções diferentes de Adicionar Camada :

• As camadas de texto são perfeitas para adicionar títulos, descrições ou até links simples. Adicione o que você quer dizer em seu slide.
• As imagens são ótimas para inserir seu logotipo, adicionar profundidade em slides de paralaxe, inserir conjuntos antes/depois e muito mais.
• As opções de camada de botão incluem vários combos de tamanho e raio da borda para os quais você pode editar a cor, o plano de fundo, a cor da borda, a fonte, o estado de foco e o texto. Além disso, existem várias predefinições úteis para links sociais, ícones de rolagem do mouse animados, menu de hambúrguer ou até mesmo reproduzir/pausar.
• As formas  podem ser usadas para adicionar efeitos (como pulsar ou irradiar uma cor atrás de um botão), para definir uma parte de uma camada de texto (use uma forma para destacar apenas uma palavra ou frase) ou para adicionar interesse visual. Selecione seu plano de fundo, cor/tamanho da borda, raio da borda da forma (0 para um quadrado, 100 para um círculo), tamanho da forma em pixels e preenchimento.
• As camadas de áudio e  vídeo são bastante diretas. Escolha a mídia que deseja inserir e selecione um arquivo da sua biblioteca de mídia ou insira um link (YouTube, Vimeo, SoundCloud etc.). Em seguida, adicione configurações para ativar o loop, reprodução automática, próximo slide no final, volume base, início/fim do segmento e pré-carregamento. Esta é uma maneira fácil de adicionar depoimentos reais ao seu controle deslizante, um vídeo de introdução ou um tutorial.
• Ícone / SVG são exatamente o que parecem – inclua ícones ou adicione imagens SVG personalizadas que se ajustam perfeitamente com seu controle deslizante em todos os dispositivos.
• As linhas podem ser inseridas e são como qualquer outro construtor de páginas, completas com configurações de coluna. Essa é uma ótima maneira de organizar elementos de camada ou criar um único módulo de slide.
• Grupo é usado para criar um grupo de camadas para que seja mais fácil posicionar e mover camadas relacionadas.
• Layer Library só está disponível se você tiver sua própria licença para Slider Revolution e é uma coleção de recursos prontos do ThemePunch.
• Importe  para copiar uma camada ou slide de outro controle deslizante em sua biblioteca. Rápido e simples!

Primeiro vamos adicionar uma camada de texto simples . Você terá a opção de adicionar um título ou conteúdo de estilo rápido – ambos são camadas de texto, a única diferença são as opções pré-estilizadas que você verá no lado direito. Você pode escolher um desses estilos ou clicar no X no canto superior direito para acessar as configurações da camada.

Para nosso exemplo, estas são as opções que escolhemos para nosso título, bem como um subtítulo para nosso slide:

• Adicionado nosso texto na seção Conteúdo , bem como centralizado nosso texto
• Selecionou um estilo para o tamanho da fonte, peso, altura da linha e fonte do Google
• Personalizamos o Tamanho e Pos para alterar a localização da camada em nosso contêiner deslizante (lembre-se – nosso contêiner é 1000 x 500 px)
• E por último adicionamos um efeito de animação e velocidade para o nosso texto desaparecer em 800ms (IN : Anim To) e as mesmas animações para o nosso texto sair (OUT : Anim To).

Também adicionamos um botão. Para fazer isso, passe o mouse sobre o link “+ Adicionar camada” e clique na opção do botão.

Assim como o texto, existem alguns Estilos Rápidos que você pode usar para começar.

Para o nosso botão, usamos o seguinte. Novamente, muito semelhante às opções de texto (mas com algumas diferenças importantes):

• Para o conteúdo , adicionamos o texto do nosso botão.
• Na seção Estilo , você pode adicionar cores de texto e botão, opções de fonte e adicionar espaço ao botão com preenchimento (dentro) ou margens (fora). Nosso botão usa preenchimentos esquerdo e direito para torná-lo mais largo.
• Usamos novamente as opções Tamanho e Pos para centralizar nossa camada de botão no slide.
• E adicionei uma Animação para o botão entrar e sair do slide.
• Como esta é uma camada de botão, também adicionamos um efeito Hover para que os visitantes saibam intuitivamente que existe um link. Então escolhemos uma animação e deixamos nosso botão um pouco transparente ao passar o mouse.

Para um botão ou qualquer camada à qual você deseja adicionar um link, você deve adicionar o Action . Por exemplo, adicionamos um link simples e definimos as configurações (ao clicar, a URL e um destino para abrir em uma nova janela). Mas há várias opções além de um link simples, como rolar para ID (rolagem local), pular para slide (para pular os slides), reproduzir slide (por exemplo, se você adicionou um recurso interativo), abrir um modal deslizante, reproduzir mídia (ótimo para um vídeo), etc.

Esse é o nosso primeiro slide feito! Agora vamos adicionar um segundo para mostrar mais alguns recursos.

Se você passar o mouse sobre a opção “Slides”, verá uma lista suspensa para:

• Adicionar slide(s) : clique para adicionar um novo slide em branco, slide em massa para adicionar vários slides com o mesmo plano de fundo ou importar um slide.
• Camadas globais : serão vistas como uma sobreposição em cima de qualquer slide que você criar. É uma ótima maneira de adicionar um logotipo ou marca d’água, incluir um botão “Comprar agora” para seu produto ou até mesmo um link para assinar sua newsletter.
• Todos os seus slides atuais (nosso slide finalizado é o novo slide nº 1).

Agora é só repetir o processo de construção de slides quantas vezes quiser!

Existem muitas, muitas outras opções no Slider Revolution que você pode usar para personalizar ainda mais suas camadas. Por exemplo, você pode adicionar um loop à sua camada (você pode usar isso para criar um texto de “venda” piscando), adicionar efeitos de rolagem, editar a visibilidade para ocultar em dispositivos pequenos e muito mais. Recomendamos verificar a base de conhecimento oficial do Slider Revolution para encontrar mais informações sobre os recursos disponíveis.

E, por último, quero apenas apontar mais alguns links úteis na parte superior e inferior do construtor de controles deslizantes. Começando no topo, você encontrará os seguintes links rápidos (em ordem):

• Voltar : para voltar à página principal do Slider Revolution no painel do WordPress
• Slides : para adicionar e gerenciar slides em seu controle deslizante
• Adicionar camada : para adicionar novas camadas ao seu slide atual
• O nome da camada que você selecionou
• Ícone duplicado para duplicar ou copiar sua camada atual
• Ícone de lixeira para excluir sua camada selecionada atual
• Ícone de bloqueio para bloquear sua camada para evitar edições acidentais
• Ícone de olho para mostrar ou ocultar camadas
• Setas para cima e para baixo para navegar entre as camadas
• Mais de um pouco, leve você ao Cursor para selecionar camadas
• Um ícone Retroceder para desfazer e revisar uma lista de alterações recentes
• O ícone do computador para visualizar a capacidade de resposta do seu controle deslizante em tamanhos de dispositivo padrão
• Link de ajuda do ícone de ponto de interrogação
• E, finalmente, um ícone Droplet para acessar predefinições de estilo rápido para sua camada

E abaixo da visualização do controle deslizante, você deve ver um horário. A partir daqui, você pode editar o atraso de quando suas camadas serão animadas em seu slide (para o nosso, o horário de término é 00:05:00 ou 5 segundos – basta clicar nele para editar o slide). Você também pode ver um cronograma visual mostrando o tempo da camada em comparação com a duração total do slide. As seções bloqueadas são os tempos de animação da camada que você pode simplesmente clicar e arrastar para alterar.

Depois de adicionar várias camadas, você também pode usar esta seção para reorganizar suas camadas arrastando e soltando as camadas na ordem. Além disso, no canto superior esquerdo, você pode encontrar um link útil para reproduzir seu slide e visualizar seu tempo enquanto faz edições.

Visualize e salve seu controle deslizante

Enquanto estiver trabalhando, você pode visualizar seu controle deslizante clicando no botão azul Visualizar no canto inferior direito.

E não se esqueça de salvar seus slides enquanto trabalha! Certifique-se de salvar seu slide depois de fazer qualquer alteração. Se você sair do slide (mesmo que seja para outro slide), poderá perder todo o seu trabalho duro. Então não se esqueça de salvar, salvar, salvar!

O Slider Revolution também oferece uma opção para otimizar os tamanhos dos arquivos ao salvar, oferecendo algumas recomendações de compactação e otimização do lado do servidor.

Depois de salvar, você pode seguir em frente e trabalhar em outros slides ou controles deslizantes ou usar o produto finalizado em uma página.

Usando seu controle deslizante

Para adicionar seu slider fabuloso a qualquer postagem ou página, use o código de acesso Slider Revolution que você criou anteriormente. Este shortcode pode ser encontrado clicando no item de menu Slider Revolution em seu painel.

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

Basta colar o shortcode em sua postagem ou conteúdo da página. Ou se o seu tema suportar locais de controle deslizante adicionais, você também poderá adicionar o código de acesso.

Se o seu tema usa o construtor de páginas WPBakery (por exemplo, como o Total Multipurpose WordPress Theme ), você pode usar o elemento construtor de páginas Slider Revolution incluído.

Tudo o que você precisa fazer é adicionar o módulo, selecionar um controle deslizante da grade (ele mostrará uma lista de todos os controles deslizantes que você já criou), inserir e depois arrastar e soltar o controle deslizante no lugar. Fácil né?

Considerações finais sobre a revolução do slider

Acreditamos que o Slider Revolution é um dos plugins de slider premium mais fáceis de usar, especialmente porque eles oferecem um editor visual fácil de usar e vários recursos integrados para que você não precise saber CSS para estilizar seus slides (botões, fontes, cores e mais já estão lá!). São 5 estrelas sólidas e, em nossa opinião, você terá dificuldade em encontrar um plug-in de controle deslizante melhor.

Esperamos que nosso guia tenha ajudado você a começar o processo, mas para saber mais (ou para pegar sua própria cópia), visite a página principal do ThemePunch’s Slider Revolution. Eles mostram ótimos exemplos de seu controle deslizante, bem como links para as demonstrações ao vivo, onde você pode ver o que o Slider Revolution pode fazer.

MAIS SOBRE A REVOLUÇÃO DO SLIDER

Mas adoraríamos ouvir de você. Deixe-nos saber o que você acha do Slider Revolution nos comentários abaixo, ou sinta-se à vontade para nos fazer qualquer pergunta que possa ter. Estamos felizes em ajudar!