Ir para o conteúdo principal

Revolução de controle deslizante: configurando um controle deslizante no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Envie de configurer le plugin WordPress Slider Revolution ?

Desde o início desta série de tutoriais dedicada ao plugin WordPress  Slider Revolução, aprendemos a faça o download e instale o plugin. Em seguida, descobriu sua interface e suas diferentes funcionalidades. Agora, vamos em frente mostrando as configurações de um “Slider”.

Se você é iniciante e procura recursos para começar; você vai encontrar aqui tudo que você precisa para começar. E se você descobrir a criação do blog, leia Como criar um blog WordPress facilmente: Guide & Tuto

Dito isso, vamos descobrir o que é um controle deslizante.

O que é um controle deslizante na prática?

Um controle deslizante é um componente HTML. Sim, eu sei, dizê-lo, não adianta muito. Portanto, um controle deslizante é um recurso que permite exibir informações diversas vagamente (ou não). Esta informação é agrupada por " slide ", Que é uma entidade de um" controle deslizante "e pode consistir em imagem, texto de vídeo, links, etc.Slider revolution - plugin WordPress Slider Revolution

O " deslizante "Portanto contém" diapositivos (Pelo menos 1) e esses slides contêm elementos de multimídia (imagens, vídeo, música, texto) que podem ser animados ou interativos (reagir às ações do usuário).

Observação : Você pode traduzir " sliders Em " slides interativos e dinâmicos ".

O Slider Revolution permite que façamos isso e começaremos sem mais demora.

Se você ainda não criou um site e está procurando um tema WordPress que integre nativamente este poderoso plugin WordPress, esta lista de temas premium do WordPress será perfeita.

Criação de um controle deslizante: primeiras configurações

Para começar, você deve clicar no menu " Slider Revolução No seu painel do WordPress.

Revolução controle deslizante wordpress

Agora clique no item novo Slider E você chegará à interface de configuração do controle deslizante.

nova-slider-slider-revolução-tutorial

A interface de configuração do controle deslizante pode ser intimidante, mas se você voltar, entenderá melhor sua funcionalidade. Você pode notar que esta interface consiste em duas seções. O primeiro à esquerda consiste em 5 áreas diferentes e o segundo à direita consiste em 6 pequenas áreas. Logo acima, você tem a barra de ferramentas, que permite:

  • Voltar à lista de controles deslizantes « Todos os Sliders »
  • Acesse as configurações do controle deslizante (esta é a janela em que você está)
  • A interface de edição de slides
  • Um botão de backup
  • Um botão de edição de slides
  • Um botão de visualização deslizante
  • Um botão de remoção deslizante
  • Um botão para voltar (bis) Para a lista de sliders

bar de ferramentas-revolução-slider

Agora vou explicar cada seção na coluna da esquerda.

Este plugin do WordPress manipula muitas imagens, o que pode retardar o carregamento do seu site. Descobrir Por que você precisa começar a otimizar seu blog WordPress por imagens

a seção “Fonte de conteúdo”

conteúdo de código-fonte revolução-slider

Esta seção permite que você configure a origem do controle deslizante. Na verdade, aqui você pode decidir criar:

  • Um controle deslizante clássico, no qual você terá que configurar todas as animações
  • Um controle deslizante de artigos, no qual seu espaço de manobra é bastante limitado
  • Um controle deslizante de artigos específicos que você pode escolher
  • Um controle deslizante do feed de notícias do Flickr
  • Um controle deslizante do feed do Instagram
  • Um slider em produtos WooCommerce
  • Um controle deslizante no feed do Twitter
  • Um controle deslizante nas postagens do Facebook
  • Um controle deslizante na Publicações do YouTube
  • E um slider nas publicações do Vimeo

Deve-se notar de passagem que: Slider Revolution é um plugin poderoso que permite destacar produtos em uma loja online. Descubra o Temas WordPress 10 para criar uma loja online e mostrar suas roupas

Dito isto, teremos o prazer de apresentar como criar um controle deslizante clássico, porque é o mais usado, o mais difícil de dominar e o mais extraordinário em seus efeitos. Com a prática, você conseguirá fazer suas próprias configurações em outros controles deslizantes. Em caso de problemas, não hesite em voltar e deixar um comentário aqui. Então deixe a opção " Controle deslizante padrão »Ativo.

A seção Título e código do controle deslizante

Você provavelmente adivinhou. Esta seção permite que você defina o título do controle deslizante e o código de acesso que o acompanhará (nada muito complicado).

título e código abreviado-du deslizante

A seção “Selecione um tipo de controle deslizante”

seleccione-a-tipo-de-slider-slider-revolução

Esta seção permite definir a estrutura básica do controle deslizante. Na verdade, você tem à sua disposição 3 opções para escolher, as quais permitem:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

  • Para a primeira opção, defina um controle deslizante padrão com larguras adaptadas ao espaço disponível e com elementos básicos, como botões de navegação.
  • Para a segunda opção, você pode decidir aplicar um estilo dinâmico e interativo, sem botão de navegação e muito mais imponente do que a opção anterior. Esta opção é chamada de “cena do herói” porque aqui você colocará mais ênfase nas animações e na interação.
  • A última opção, oferece um estilo muito mais clássico, com uma rolagem simplificada de imagens da esquerda para a direita em uma variedade de animações.

Observação : Sempre que você escolhe uma opção, você tem uma seção "Carregar uma predefinição deste tipo de controle deslizanteO que oferece variações avançadas do tipo de controle deslizante que você escolheu.

mudar-of-tipo-de-slider

Não poderei explicar todas as variações, mas você poderá tirar conclusões das imagens disponíveis. Por exemplo, para o tipo de controle deslizante " Standard Você tem como quarta variação " Polegares inferior auto ", Que permite criar um controle deslizante com miniaturas na parte inferior e possui uma animação de rolagem automática.

polegares para baixo auto-controle deslizante-revolução-tutorial

A seção “Layout do slide”

deslizante-disposição-revolução-slider

Esta seção permite definir um layout para o seu controle deslizante. Então você pode sair ' Revolução Slider »Escolha automaticamente as larguras que serão aplicadas ao controle deslizante, escolha aplicar toda a largura ao controle deslizante ou use o controle deslizante no modo de tela cheia.

Dependendo da opção escolhida, o Slider será diferente em alguns dispositivos. Você tem abaixo uma seção de configuração da grade de acordo com os dispositivos (móvel, desktop, etc..). Lembre-se de que a configuração da grade permite alterar as margens internas de cada controle deslizante.

Leia também Dicas 6 para otimizar o design móvel do seu blog

Na parte inferior desta seção, você pode optar por ativar a visibilidade do estouro, ativar a retenção da aparência do rádio e definir uma altura mínima.

A seção “Personalizar, construir e implementar”

Esta seção não tem realmente uma opção para o plugin. Ele oferece alguns links rápidos para seções importantes.

personalizar-build-Implementar

Agora continuaremos com a segunda coluna à direita.

A seção Configurações Gerais

Esta seção oferece algumas configurações que serão aplicadas ao controle deslizante. É assim que você pode:

Na guia "Slideshow"

  • Desativar controle deslizante no viaduto
  • Pare o controle deslizante após um número definido de rolagens
  • Mostrar slides aleatoriamente
  • Loop the slide
  • Desativar ou parar o controle deslizante em determinado tamanho do dispositivo
  • A última opção "Esperar por revapi.revstart ()" não será útil para você.

Na guia "Falhas"

Você pode definir:

  • O caractere selecionável das camadas
  • Defina o identificador do controle deslizante (isso é feito automaticamente)
  • A duração mínima entre slides
  • O tempo limite antes da inicialização
  • A transição entre as lâminas
  • A duração da transição expressa em microssegundos
  • O tamanho da imagem
  • A posição CSS da imagem de plano de fundo
  • Repetindo a imagem de fundo, se essa imagem não for grande o suficiente
  • Ativação da opção " vídeo Muette O que permite definir o tipo de animação, as posições em um XY (sim, o que você aprende quando precisa desenhar funções matemáticas) e outros elementos.

A guia da barra de progresso

Todas as opções nesta seção são para a barra de progresso, que você pode ativar e personalizar.

A guia 1er slide

Esta seção permite ativar um primeiro slide alternativo. Isso permitirá que " deslizante Para carregar um " slide De sua escolha primeiro. Lembre-se disso " diapositivos São elementos que podem ser identificados.

A seção "Layout e visual"

layout e-visual

A guia "Aparência"

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Esta seção permite configurar a aparência do controle deslizante. Em particular, você pode definir para exibir uma sombra sob o controle deslizante (muito útil se você escolher o controle deslizante padrão, com uma margem baixa significativa).

Você também pode optar por exibir uma sobreposição coberta com pontos transparentes (isso tornará o controle deslizante muito original, mas se você quiser exibir informações que precisam ser lidas com atenção, terá que ficar sem).

Depois, você tem o plano de fundo do controle deslizante, a margem interna e a imagem em segundo plano (o que você precisa saber aqui é que uma imagem de plano de fundo nesse nível será exibida em todas as suas diapositivos).

a guia "Spinner"

Essa guia permite definir uma animação ao carregar o controle deslizante, nada mais.

a guia "Celular"

Essa guia permite gerenciar a exibição do controle deslizante no celular. Você deve saber que o tráfego móvel é importante e, portanto, não deve negligenciá-lo. Você terá a possibilidade de ocultar o controle deslizante se as dimensões do celular (largura) forem menores que uma figura que você determinou (em pixels).

a guia "Posição"

Isso permite determinar a posição do controle deslizante em relação à página. Eu tenderei a dizer, em relação ao local onde está localizado. Esta opção não precisa ser modificada, porque suponho que todos queremos que o controle deslizante seja centralizado.

Seção "Navegação"

Esta seção permite que você ative os botões de navegação entre os slides em seu "controle deslizante". Você tem 6 opções de navegação:

  • Setas
  • pulgas
  • abas
  • thumbnails
  • O efeito do touchdown em dispositivos móveis
  • E navegar com as setas

Cada opção, quando ativada, permitirá que você configure a posição dos elementos de navegação ou seu princípio operacional (configurações padrão são geralmente suficientes).

configuração de navegação-revolução-slider

Seção "Configurações do carrossel"

parâmetro-du seção de carrossel-revolução-slider

Esta seção aparece apenas quando você escolhe o tipo " Carousel Slider », E permite configurar suas opções. Você poderá:

  • Ativar rolagem infinita
  • Defina um espaço entre os slides, se você não quiser que os slides toquem
  • Definir uma borda arredondada em pixel
  • Defina uma margem superior alta (padding-top)
  • Defina uma margem superior baixa (padding-bottom)
  • O número de elementos visíveis por "slide"
  • "elemento strech", Permite esticar o elemento para que ocupe toda a largura do" deslizante »

A segurança é um elemento importante no tempo de atividade do seu site e uma das técnicas que irão protegê-lo contra quaisquer ataques sérios ou bugs é fazer backups regulares do seu blog. Descubra nosso 5 WordPress Blog Plugins de Backup

Seção "Paralaxe e 3D"

Aqui você pode ativar a opção " 3D No seu controle deslizante.

Seção "Problema e Tratamento"

Esta seção permite gerenciar a compatibilidade com dispositivos antigos. Você pode simplificar o controle deslizante em " IOS4 e Internet Explorer 8 ".

Caso contrário, você pode optar por exibir uma imagem alternativa, quando o navegador não suportar o controle deslizante.

Seção "Fontes do Google"

Esse recurso permite gerenciar as fontes do Google que você baixou e aplicá-las ao controle deslizante.

Depois de definir os parâmetros de seu controle deslizante. Tudo que você precisa fazer é clicar no botão Gravar.

Save-A-slider-slider-revolução

 

Se o plugin WordPress Slider Revolution não é o seu favorito quando se trata de criar sliders em sites WordPress, aqui oferecemos duas alternativas capazes de oferecer funcionalidade semelhante.

1. LayerSlider

LayerSlider é um plugin premium de animação multiuso para WordPress. Dá a você a opção de criar apresentações de slides e galerias de imagens com efeitos impressionantes, páginas de destino e blocos de páginas lindamente animadas ou até mesmo um site completo.Plugin Layerslider wordpress criar controle deslizante 1

É uma das alternativas capazes de competir de perto com o Slider Revolution. Seu editor visual de arrastar e soltar torna muito intuitivo para qualquer pessoa começar a usá-lo. Nenhuma habilidade técnica ou de codificação é necessária. Sua seleção cada vez maior de modelos importáveis ​​é um ponto de partida ideal para novos projetos e abrange todos os casos de uso comuns. Eles são feitos com cuidado e podem ser facilmente personalizados para atender a todas as necessidades.

Excelente suporte e atualizações frequentes garantem o máximo proveito de sua compra.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Vá mais longe com este poderoso plugin WordPress lendo este artigo Layer Slider: um plugin do WordPress para criar um controle deslizante

Descarregar | Demo | hospedagem na web

2. Controlador WP1

O WP1 Slider é um plugin versátil do WordPress. É fácil de usar e possui todos os recursos úteis necessários para criar belas apresentações de slides. A maioria dos plug-ins de slider é muito técnica e precisa de muito tempo para configurá-los, mas o WP1 Slider foi desenvolvido para não programadores e oferece opções incríveis.Plug-ins Wp1 slide pro wordpress criar apresentações de slides slides do site

Entre estes você encontrará: oupport de efeitos de Kenburn, Diferentes modelos de transições de slider, oupport de códigos de acesso, um cintrodução de slides arrastando e soltando, o cassédio rápido e excelente SEO, osuporte para compartilhamento em diversas redes sociais, o iintegração de vídeos do YouTube e Vimeo, um layout etotalmente responsivo, o apoio de WooCommerce e outros.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Voila! Isso é tudo nesta apresentação sobre a configuração do plugin WordPress Revolução Slider. Continuaremos em um tutorial futuro, onde discutiremos o design dos slides.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas, se você tiver algum comentário ou sugestão sobre o assunto, ela será bem-vinda na seção de comentários. Compartilhe especialmente este artigo com diferentes redes sociais.

Este artigo contém comentários 29

  1. Olá, criei 2 modelos diferentes. Agora quero mudar do meu cursor online atual. Eu realmente não posso fazer isso. Alguém pode dar conselhos sobre magia? Agradeço antecipadamente!

  2. Criei um slider4 e coloquei 3 diaspositivos neste slider. Mas na minha página inicial, a revolução do controle deslizante mostra apenas um slide e não mostra o resto. Ele exibe apenas o primeiro slide. Quando trago, por exemplo, o último slide para o primeiro lugar, a revolução do controle deslizante exibe este último e deixa os outros

    1. Bonsoir,

      Você pode compartilhar uma captura de tela de suas configurações? Ou exporte o slide e restaure as configurações do controle deslizante de revolução.

  3. Bom Dia,

    Eu gostaria de fazer um controle deslizante dinâmico, você tem algum arquivo referente à criação de um controle deslizante com os efeitos ao passar o mouse.

    obrigado

  4. Olá, baixei o template de um slider, consegui modificar os textos e imagens, estou no slider Revolution premium, porém: podemos ver o texto “a Slider Revolution…” + os links para suas redes sociais no slide pff. E não consigo encontrar ou remover este texto. desde já, obrigado

  5. olá tenho um probleminha quando faço um controle deslizante e quero modificá-lo no celular os textos que já adicionei ao controle deslizante não aparecem no controle deslizante do celular por que (ao modificar) ???

  6. Bom Dia,
    Estou tendo um problema com o Revolution Slider. Não consigo encontrar uma solução para que minhas fotos não sejam cortadas verticalmente.
    Ele deve ter uma caixa de seleção?
    Obrigado pelo seu retorno
    Norbert

  7. Bom Dia,
    na revolução do controle deslizante Gostaria que meu slide fosse iniciado somente quando o mouse ou rolagem o acionasse. É possível?
    Qual parâmetro no controle deslizante é ativado?
    Muito obrigado.

    podemos fazer ambos, ou seja, iniciar um controle deslizante com o mouse / rolar e também colocar um atraso de inicialização que eu vi nos parâmetros gerais para lidar com todos os casos possíveis simultaneamente e ter certeza o visitante do site vê este controle deslizante

    merci beaucoup

  8. Olá,

    na revolução do controle deslizante Gostaria que meu slide fosse iniciado somente quando o mouse ou rolagem o acionasse. É possível?
    Qual parâmetro no controle deslizante é ativado?
    Muito obrigado.

    Podemos fazer as duas coisas, ou seja, iniciar um controle deslizante com o mouse / rolar e também colocar um atraso de inicialização que eu vi nos parâmetros gerais para lidar com todos os casos possíveis simultaneamente e ter certeza que o visitante do site veja este controle deslizante

  9. Olá, boa noite, tenho uma dúvida.
    Tenho várias imagens na revolução do Slider e quero ocultá-las na versão móvel menos a primeira. Vi que o mesmo plugin tem a capacidade de ocultar as imagens que você deseja em diferentes dispositivos, mas o problema é que ele só oculta a imagem porque fica detectando que existem vários elementos porque a barra o tempo continua a carregar e deixa a tela em branco quando o primeiro pula. Como posso realmente ocultar as imagens?

    Muito obrigado

    1. Bom Dia,

      Você já tentou entrar em contato com o suporte para o plug-in do controle deslizante Revolution? Você encontrará rapidamente uma solução.

  10. Oi, eu queria perguntar-lhe como colocar o cursor sob a barra de menu da barra de navegação horizontal como acontece no site Apple.com, onde o menu acima e logo abaixo do cursor está localizado (o menu parece ser transparente
    obrigado
    Andrea

  11. Bom Dia,

    Quero fazer um controle deslizante que contenha 2 ou 3 imagens nas quais as citações sejam escritas. Meu problema é que, quando escrevo, a citação é muito longa e sobressai da foto, por isso não aparece por extenso. No entanto, há espaço em toda a imagem. Como fazer?

    Um título para cada slide é obrigatório. Por padrão, coloco “citação 1” e assim por diante. Mas os títulos são exibidos nos slides ... Por exemplo, “Citação 1” é exibido na pequena direita no meu primeiro slide. Como evito que os títulos apareçam?

    Agradeço antecipadamente por suas respostas, você ajudaria os alunos para um projeto tutorado!

  12. Bom Dia,

    Eu encontro um pequeno problema com este controle deslizante e apesar de muitas pesquisas, não encontrei a solução. Talvez você possa me salvar? 😉
    Configurei o controle deslizante na minha página inicial, ele está impecável, é muito bom EXCETO que quando o mouse está posicionado nele fica impossível rolar. Tenho que tirar o mouse do slide para poder rolar para baixo (aparentemente funciona para cima). Isso me incomoda um pouco porque temo que algumas pessoas não entendam que é preciso remover o mouse do slide para fazer isso .. (www.sarah-scaniglia.com). Pesquisei todas as configurações, mas não consegui encontrar ... e não sou um especialista em web.

    Se você encontrar a solução você é excelente

    1. Bom Dia,

      você tentou isso?

      1. Desative outros plugins, exceto Revolution Slider e teste novamente.

      2. Ative o tema padrão do WordPress e teste

      Isso permitirá que você saiba se o problema é com o tema ou um conflito com outro plugin.

      Verifique também se você possui a versão mais recente do plugin.

  13. Bom Dia,

    Você pode me explicar como fazer um “Slider” com apenas um slide dentro porque quando tento tudo desaparece no final da animação. Coloquei "sem transmissão" em "animação de slide", mas nada ajuda ...
    Merci par avance despeje votre aide.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
10 ações
ação2
chilrear1
Enregistrer7