Revolução Slider WordPress Plugin Review & Como Guia

Slider Revolution é um slider premium disponível como um plugin para WordPress, jQuery e Joomla. Ele ganhou enorme popularidade na comunidade WordPress devido à enorme variedade de recursos e facilidade de uso.


Nesta visão geral, abordaremos apenas os principais recursos do Revolução Slider WordPress Plugin, e depois mostraremos como é fácil criar seus próprios controles deslizantes do zero.

Obtenha a Revolução Slider gratuitamente! O plug-in Slider Revolution está incluído gratuitamente na compra do nosso Tema Total WordPress, para além de obter um plugin incrível, você também obterá o tema Total e o plugin Visual Composer, que também está incluído gratuitamente!

Obter Revolução Slider

Revolução Slider: O que torna este plugin WordPress 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 responsivos

O plug-in está pronto para responder e inclui várias opções de layout deslizante para facilitar sua vida. Primeiro, escolha o seu tipo de controle deslizante: controle deslizante padrão, cena do herói (slide único) ou controle deslizante de carrossel. Em seguida, selecione um layout: automático, largura total ou tela cheia.

o layout automático A opção 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 (desktop, laptop, tablet e telefone). Se você deixar essa opção na configuração padrão, ela estenderá o controle deslizante para a largura do contêiner principal, conforme definido pelo tema do WordPress.

o layout de largura total é exatamente o que parece – uma opção de controle deslizante de largura total que se estenderá da esquerda para a direita. Você ainda precisará definir a altura do seu controle deslizante.

A opção de layout mais exclusiva é tela cheia. Com essa opção, você pode criar controles deslizantes fantásticos que literalmente preenchem toda a tela, independentemente do tamanho do seu navegador ou dispositivo (você pode até usar essa opção para adicionar controles deslizantes de tela cheia com vídeos para obter ainda mais impacto).

Múltiplas fontes de conteúdo

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

No momento da redação deste post, o Slider Revolution suporta conteúdo com base em posts do blog, posts específicos, no post / página atual (ótimo se você deseja adicionar um slider em destaque ao post do blog ou ao item do portfólio), Flickr, Instagram, WooCommerce, Twitter, Facebook , YouTube, Vimeo ou o controle deslizante padrão (faça upload de suas próprias imagens / vídeo).

Opções fáceis

A Revolução Slider facilita a criação de sliders personalizados, adicionando opções para praticamente tudo. Escolha o atraso do slide, as setas de navegação, as fontes personalizadas, adicione fundos de paralaxe, localização do slider (adicione margens), adicione camadas de mídia, insira botões, selecione transições de slide 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 fácil.

Suporte de mídia

Adicione texto, links, imagens e vídeos com apenas alguns cliques do mouse. Isso permite 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, tempos e estilos exclusivos que você define usando as super opções do Slider Revolution.

Instalação da Revolução Slider

Primeiro, você precisa 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

Faça o download do plug-in Revolução Slider

Se você comprou sua própria cópia do Slider Revolution da CodeCanyon, 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 o seu nome de usuário). Em seguida, localize sua cópia do Slider Revolution e selecione a opção de download para “Somente arquivo instalável do WordPress”.

Carregar o arquivo zip do plug-in

Em seguida, faça login no seu site WordPress e navegue até Plugins> Adicionar novo e 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 plug-in e você estará pronto para começar a criar controles deslizantes!

Descompacte a pasta do plugin para fazer o upload via FTP

Nota: Você também pode instalar seu plugin via FTP fazendo login no servidor e fazendo o upload do plug-in 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, será necessário fazer referência à documentação do seu tema. Mas a maioria dos desenvolvedores faz o possível para facilitar esse processo.

Total de plugins recomendados

Por exemplo, se você estiver usando o tema Total WordPress, verá um prompt na tela que recomenda a instalação do Slider Revolution (e outros plugins incluídos no tema). Basta clicar no link para começar a instalar e depois ative o plugin.

Instale Revolução Slider com Total

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ê deverá instalar o plug-in, como visto acima.

Importar controles deslizantes Revolução Slider com Total

Em seguida, verifique se a opção “Importar controles deslizantes” está selecionada e o tema importará automaticamente quaisquer controles deslizantes personalizados da demonstração. Fácil!

Guia da Revolução Slider

Depois de instalar o plug-in, ele deve adicionar um item de menu ao seu painel principal do WordPress. Clique aqui para ser levado à página principal de gerenciamento do slider Revolution.

Configurações da Revolução do Slider Principal

A partir daqui, você pode criar ou editar controles deslizantes, ativar sua licença se tiver adquirido sua própria cópia do plug-in (se o controle deslizante tiver sido incluído no seu tema, você poderá ignorar esta seção) e ver se sua cópia do plug-in está atualizada.

Configurações Globais da Revolução Slider

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

slider Revolution Global Settings

Existem várias opções importantes aqui para configurações de grade responsiva padrão (que são aplicadas na criação de novos controles deslizantes), URL de carregamento de fonte personalizado, criação de banco de dados para o plug-in e muito mais. Mas existem duas opções, recomendamos que você ajuste.

A primeira opção que você deve considerar editar é Ver permissão de plug-in 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 desativar é a Ativar notificações opção. Se você estiver usando uma cópia do Slider Revolution que foi incluída com um tema premium, poderá ver avisos “atualizar” ou “inserir sua licença” quando não houver necessidade. Simplesmente desative esta opção para ocultar avisos. Em seguida, salve 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 controles deslizantes de amostra incluídos no seu tema.

Importar um controle deslizante de amostra

Slider Revolution Amostras de controles deslizantes

Se você optar por importar um controle deslizante de amostra do Slider Revolution exemplos de uso primeiro baixe o arquivo deslizante do site deles e depois volte para o WordPress, clique no Controle deslizante de importação opção. A partir daqui, procure o arquivo de amostra que você baixou e clique em Envio. Isso deve adicionar o controle deslizante de amostra e todas as configurações para que você possa usá-lo como base para um novo controle deslizante.

Criar um novo controle deslizante

Se você estiver criando um controle deslizante do zero, clique no New Slider opção. Agora comece do topo

Revolução Slider Fonte de Conteúdo

Selecione uma fonte de conteúdo: escolha como você gostaria de adicionar conteúdo ao seu controle deslizante. Existem 11 fontes de conteúdo para escolher, mas na maioria das vezes você deseja selecionar o padrão opção.

Slider Revolution Título e Código Curto

Adicionar título e código de acesso deslizante: Selecione um nome para o controle deslizante que o ajudará a lembrar o que ele contém ou em que página está sendo usado. Também é aqui que você encontrará o código de acesso fácil para o seu controle deslizante inseri-lo em postagens e páginas.

Tipo de revolução do slider

Selecione um tipo de controle deslizante: Escolha um tipo de controle deslizante e selecione uma predefinição para carregar as predefinições incluídas no plug-in.

Layout da Revolução Slider

Escolha um layout de slide: Selecione o layout e a grade do controle deslizante (em pixels). Você pode definir tamanhos de grade personalizados com base no tamanho da tela, embora a tela inteira preencha toda a tela do navegador. Independentemente da opção escolhida, você precisará adicionar uma largura e altura da grade que determinem o tamanho do seu contêiner de camada.

Em seguida, role de volta para o topo da tela para começar a editar as configurações gerais do seu controle deslizante.

Configurações do controle deslizante

À direita, você verá várias opções de controle deslizante.

Configurações Gerais: Defina as opções de apresentação de slides, defina a duração padrão do slide (por quanto tempo o slide é exibido), edite transições / animações e planos de fundo padrão, ative a barra de progresso (e edite a posição e o estilo), edite as configurações do 1º slide, ative o próximo slide em foco e desativar o desfoque.

Layout & Visual: Edite sombras, sobreposições, fundo principal do controle deslizante, ative o controle giratório do carregador, desative o controle deslizante no celular (ou em larguras específicas) e selecione uma posição do controle deslizante na página.

Navegação: Personalize opções e configurações para flechas, marcadores, guias e miniaturas. Ative também a navegação por toque, deslize, navegação pelo teclado e rolagem do mouse.

Parallax & 3D: Ative o suporte de paralaxe e / ou 3D, além de editar a sensibilidade do mouse e os níveis de profundidade de paralaxe.

Desempenho e SEO: Habilite carregamento lento e monitore o desempenho do controle deslizante.

Manipulação de Problemas: Ative fallbacks e solucione problemas de erros do slider.

Fontes do Google: Carregue famílias personalizadas de fontes do Google especificamente para o controle deslizante (adicione as fontes que você desejar ou precise adicionar camadas de texto que correspondam ao restante do site nos slides).

Importar / Exportar / Substituir: Importe modelos personalizados, exporte seu controle deslizante atual para reutilizá-lo em outro site e use opções para substituir URLs no controle deslizante.

Funções da API: Edite métodos e eventos da API (recomendamos que você ignore essa guia, a menos que seja um desenvolvedor avançado).

Links rápidos para Slider Revolution

Depois de concluir as seleções, clique no ícone arquivo verde na parte superior da tela para salvar suas alterações. Depois disso, clique no lápis azul para começar a editar slides!

Adicionar ou editar slides

Adicionar ou editar slides de revolução do slider

Agora você começa a adicionar seus slides. Existem duas ou três opções de slide, dependendo se você está começando do zero ou usando um controle deslizante de amostra: Camadas estáticas / globais, quaisquer slides já criados e Adicionar slide.

Camadas estáticas / globais será visto como uma sobreposição nos slides que você criar. Essa é uma ótima maneira de adicionar um logotipo ou marca d’água, incluir um botão “Comprar agora” para o seu produto ou até mesmo um link para assinar sua newsletter..

Escolha um saindo do slide para fazer alterações em um slide que você criou ou importou anteriormente como parte de um controle deslizante de amostra. Esta é uma das maneiras mais fáceis de começar com o Slider Revolution, se você é novo no plug-in, pois os controles deslizantes de amostra mostram como usar corretamente vários recursos do plug-in para criar controles deslizantes impressionantes.

Clique em Adicionar slide para começar a criar um slide do zero.

Revolução Slider: Definir fundo do slide

Primeiro, use o Histórico Principal opções para selecionar o plano de fundo do slide: imagem, URL externo, transparente (note – se você definir um plano de fundo principal do slider nas configurações gerais do slider, ele será visível), cor sólida ou vídeo. Em seguida, use opções para configurações de fonte de mídia, filtros, nível de paralaxe (%) e Ken Burns (um efeito de panorâmica e zoom animado) se desejar personalizar ainda mais seu slide.

Revolução do Slider: Definir configurações gerais do slide

Próximo passo para o Configurações Gerais. É aqui que você pode definir um atraso no slide, se não desejar que o slider seja animado assim que carregar, editar opções de loop de slide ou adicionar uma data de validade (ótimo se você criar um slider para um feriado ou promoção). Outro recurso útil nessa guia é a capacidade de definir seu Estado do slide para não publicado – dessa forma, você pode continuar editando o slide e visualizando-o no back-end do site, sem que o novo slide fique visível para os visitantes do site..

Se você estiver usando uma navegação em miniatura para seu controle deslizante, o Miniatura A guia oferece opções para selecionar uma imagem e dimensões personalizadas do slide. Mas se você optou por não usar esse estilo de navegação, pode pular esta guia.

Revolução Slider: Definir animação de slides

Com isso feito, você pode mudar para o Animação de slides para personalizar sua animação de transição deslizante. Existem mais de 80 animações para escolher, além de opções de rotação, duração e facilidade.

O Revolution Slider também oferece opções para Link e SEO definições, Informações do slide (parâmetros e descrição personalizados) e Substituição de navegação para adicionar setas de navegação personalizadas, marcadores ou miniaturas especificamente ao seu slide.

Agora é um ótimo momento para clicar nesse arquivo verde ícone na parte superior da tela para salvar suas configurações antes de adicionar camadas e estilos ao seu slide.

Adicionar camadas de slides

Revolução Slider: Adicionar Camadas Slider

Ao adicionar ou editar slides, o Slider Revolution vem com opções e elas continuam chegando. Você pode escolher entre 8 diferentes Adicionar Camada opções:

  • Texto / HTML as camadas são perfeitas para adicionar cabeçalhos, descrições ou até links. Adicione o que você quer dizer no seu slide.
  • Imagens são ótimos para inserir seu logotipo, adicionar profundidade em slides de paralaxe, inserir conjuntos de antes / depois e muito mais.
  • Áudio e Vídeo as camadas são bastante diretas. Escolha a mídia que você deseja inserir e selecione um arquivo da sua biblioteca de mídia ou insira um link (YouTube, SoundCloud etc.). Em seguida, adicione configurações para ativar o loop, a reprodução automática, o próximo slide no final, o volume base, o início / fim do segmento e o pré-carregamento. Esta é uma maneira fácil de adicionar depoimentos reais ao seu controle deslizante, um vídeo de introdução ou um tutorial.
  • Botão as opções de camada incluem 21 combinações de tamanho e raio da borda nas quais você pode editar a cor, o plano de fundo, a cor da borda, o ícone, a fonte, o estado de foco e o texto. Além disso, existem vários pré-ajustes úteis para links sociais, ícones animados de rolagem do mouse, menu de hambúrguer ou até reproduzir / pausar.
  • Formas pode ser usado 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.
  • Objeto camadas podem ser usadas para inserir um png, jpg, svg ou ícone da biblioteca de recursos gratuitos do ThemePunch.
  • Importar para copiar uma camada ou slide de outro controle deslizante da sua biblioteca. Rápido e simples!

Clique no botão azul “Adicionar camada” para começar e use as opções para realmente personalizar ou colocar em camadas.

Opções de camada

Se você olhar ao norte da seção principal de visualização do controle deslizante, verá uma barra branca com várias opções que você pode usar para editar e personalizar suas camadas à medida que as adiciona.

Estilo da camada de revolução do controle deslizante

Use o Estilo opções para editar suas fontes, cores e localização da camada. Isso inclui tudo, desde uma fonte personalizada do Google, tamanho da fonte, altura da linha, cor do texto, plano de fundo da camada, preenchimento / margem, perspectiva, pairar, alternar e muito mais.

Slider Revolution Layer Animation

o Animação A guia é exatamente como você esperaria – ela contém a opção de adicionar e personalizar as animações de entrada e saída da sua camada. Selecione um modelo de animação predefinido, adicione um facilitador e edite o tempo de duração da animação.

Slider Revolution Layer Loop

Ciclo as configurações são simples: deixe desativado para que sua camada simplesmente carregue com a animação que você já selecionou ou ative o loop selecionando o tipo. Escolha entre pêndulo, rotação, inclinação lateral, pulso e onda para dar à sua camada uma animação constante e em loop.

Visibilidade da camada de revolução do controle deslizante

As configurações para celular são encontradas em Visibilidade. A partir daqui, você pode especificar se uma camada deve estar visível em dispositivos específicos, ocultos sob uma largura definida ou aparecer apenas ao passar o mouse..

Comportamento da camada de revolução do slider

Comportamento inclui algumas opções úteis para personalizar suas configurações de camada. A primeira é uma configuração para permitir a resposta automática da camada e a resposta do elemento filho. Por padrão, as camadas do slide diminuem à medida que a janela do navegador diminui, desative essas configurações para manter o tamanho da camada. Você também pode editar o alinhamento da camada e o deslocamento responsivo a partir daqui.

Ações da camada de revolução do slider

Use o Ações para adicionar configurações personalizadas da camada ao clicar, entrar ou sair do mouse. As ações incluem rolagem, alternância, reprodução de mídia, pausa, tela cheia, mudo e muito mais.

Atributos da camada de revolução do controle deslizante

Para usuários avançados ou desenvolvedores, o Atributos A seção pode ser usada para adicionar seu próprio ID, classes e wrappers ao destino com código personalizado.

Slider Revolution Layer Parallax / 3D

E por último, o Parallax / 3D oferece um seletor suspenso para escolher o “nível” de efeito de paralaxe que você deseja adicionar a uma camada. Quanto maior a porcentagem, mais sua camada se moverá.

Tempos de quadro da camada

Seguindo em frente, abaixo da visualização do controle deslizante, você verá um horário. A partir daqui, você pode editar o atraso para quando suas camadas serão animadas no seu slide. Você também pode ver um cronograma visual mostrando o tempo da camada em comparação com a duração geral do slide. A seção bloqueada é o tempo de animação da camada e a barra colorida mais clara é o período inteiro em que a camada fica visível.

Slider Revolution Layer Timing

Para editar a duração geral do seu slide, basta clicar e arrastar a etiqueta azul no canto superior direito da tabela.

Depois de adicionar várias camadas, você também pode usar esta seção para reorganizar suas camadas, editando o número da posição, o horário de entrada ou arrastando e soltando as camadas em ordem. Além disso, você pode usar esta seção para reproduzir seu slide e visualizar seu tempo ao fazer edições.

Salve seu slide

O passo mais importante é salvar o seu slide! Salve ou atualize seu slide depois de fazer as alterações. Se você sair do slide (mesmo que seja para outro slide), poderá perder todo o seu trabalho duro. Portanto, certifique-se de salvar, salvar, salvar!

Após salvar, você pode seguir em frente e trabalhar em outros slides ou controles deslizantes.

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. Esse código de acesso pode ser encontrado clicando no item de menu Revolução Slider no seu painel. O código abreviado deve se parecer com [alias rev_slider] com base no alias que você deu ao controle deslizante quando o criou.

Basta colar o código abreviado no conteúdo de sua postagem ou página. Ou se o seu tema oferecer suporte a locais adicionais do controle deslizante, você poderá adicionar o código curto também. Alguns temas do WordPress ainda incluem módulos especiais para o controle deslizante. Por exemplo, o Tema WordPress Multipurpose Total inclui o Revolução Slider e, com o construtor de páginas interno, você pode adicionar controles deslizantes a qualquer postagem ou página simplesmente inserindo um módulo Revolução Slider. Tudo o que você precisa fazer é adicionar o módulo, selecionar um controle deslizante no menu suspenso (ele exibirá uma lista de todos os controles deslizantes que você já criou), inserir e arrastar e soltar o controle deslizante no lugar. Fácil né?

Empacotando

Acreditamos que o Slider Revolution é um dos plugins premium de slider mais fáceis de usar, especialmente porque eles oferecem vários modelos gratuitos (e ainda mais modelos premium se você comprar sua própria licença para o plug-in), um editor visual fácil de usar e muito mais. de recursos internos para que você não precise conhecer CSS para estilizar seus slides (botões, fontes, cores e mais já estão lá!). Ficam 5 estrelas sólidas e, em nossa opinião, você terá dificuldade em encontrar um plug-in deslizante melhor.

Esperamos que nosso guia tenha ajudado você a iniciar o processo, mas para saber mais (ou pegar sua própria cópia), visite a página principal da Slider Revolution do ThemePunch. Eles mostram ótimos exemplos de seu slider, bem como um link para as demos ao vivo, nas quais você pode ver o que o Slider Revolution pode fazer.

Mais sobre Revolução Slider

Mas adoraríamos ouvir você. Deixe-nos saber o que você pensa sobre Slider Revolution nos comentários abaixo ou fique à vontade para nos perguntar qualquer dúvida que possa ter. Estamos felizes em ajudar!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me