Ir para o conteúdo principal

Como criar uma apresentação de slides com Slider Revolution no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

Agora podemos começar coisas sérias. A criação do controle deslizante Revolução Slider pode ser bastante entediante no começo. Você perderá o rumo, porque desejará saber onde é esse ou aquele elemento.

Você se livrará do Slider Revolution praticando com hábito e também lendo este tutorial.

Durante nossos tutoriais anteriores, descobrimos como:

E agora que configuramos nosso controle deslizante, vamos criar o diapositivos "Of" deslizante ".

Como assumir o controle do editor "Slides"

Em princípio, depois de salvar as configurações de um controle deslizante, você acessa para uma nova interface que apresenta o editor de " diapositivos ".

editor-slide-revolução-slider

Você notará no topo a mesma barra de ferramentas que permite retornar à lista de "controles deslizantes ou slides", aos parâmetros do controle deslizante e à visualização do controle deslizante, entre outros.

Descubra também o nosso Plugins 10 WordPress que permitem avaliar artigos em seu Blog

Revolution-slider-bar doutil-edição-de-slide

Na parte inferior, temos uma nova seção que permite ver as camadas globais, os diferentes "slides" e o botão para adicionar um novo " slide ".

criação-de-slide-botão-slider-revolução

Ao passar o mouse sobre o botão de um slide, você notará que novas opções são exibidas. Essas opções são bastante claras e fáceis de entender (duplicar, adicione ao modelo para reutilizá-lo mais tarde e exclua o slide).

deslizante opções de criação de slide-revolução

Ao passar o mouse sobre o botão adicionar slide, você notará outras opções que permitem adicionar um slide vazio, adicionar vários slides, adicionar um slide a partir de um modelo (modelo).

criação-de-slide-option-revolução-slider

Atualmente, você está no slide 1, e é por isso que está destacado na lista de slides. Se você criar um novo slide, ele será destacado no lugar do primeiro slide.

segunda-slide-criação-dun-slider-slider-revolução

A Revolução Slider neste nível é um painel real. Se eu explicar tudo para você, você não entenderá muito, então evitarei falar sobre recursos que podem ser confusos e não essenciais.

Leia nosso artigo sobre 6 WordPress plugins de compressão de imagem para o seu Blog

Quando você seleciona um slide, pode começar a editar na seção a seguir. Esta seção consiste em várias guias (7) que permitem acessar vários recursos.

Como adicionar uma imagem de fundo em uma cena

A primeira coisa que você deseja fazer primeiro é adicionar um plano de fundo ao nosso slide. Aqui você pode escolher entre: Uma imagem de plano de fundo (da sua biblioteca de mídia), um URL externo que aponta para uma imagem, um plano de fundo transparente que usará a cor proposta pelo tema WordPress, uma cor fixa, um vídeo do YouTube, Vimeo ou HTML5. Vamos escolher um plano de fundo " imagem ".

ANTECEDENTES imagem-exemplo

Você pode encontrar muitas imagens gratuitas na web. Basta fazer uma pesquisa no Google.

Imagem-back plano-revolução-slider

Quando você adiciona uma imagem, isso se aplica imediatamente na visualização do slide e na "cena".

szene-revolução-slider

Como adicionar um elemento em uma cena

Agora que temos uma cena bem decorada, adicionaremos um elemento. Cada elemento que você adiciona a uma cena é considerado uma camada ou camada. Esse recurso de camada ajudará você a acreditar em mim.

Para adicionar um item à cena, passe o mouse sobre add Layer ".

fly-add-layer-slider-revolução

Você notará que pode adicionar vários elementos diferentes, incluindo: texto / HTML, imagens, áudio, vídeo, um botão, uma forma, um objeto e importar um elemento.

Vamos começar adicionando uma imagem transparente de Snoopy, o cachorrinho.

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]

engraçado-snoopy-png

Em seguida, adicione esta imagem na cena e você terá algo parecido com isto:

exemplo-slider-slider-revolução

Você notará que nos quatro cantos da imagem existem pequenos quadrados. Esses quadrados nos permitem redimensionar as imagens, pois nesse caso o Snoopy ocupa muito espaço.

O redimensionamento é feito por " arrasto ". Para redimensionar mantendo as proporções, mantenha pressionado o botão " Maio Do seu teclado enquanto redimensiona.

Veja também nossa 10 WordPress plugins que farão de você um melhor Blogger

nova representação snoopy-revolução-slider

Agora o Snoopy se parece com isso, é mais apropriado. Você também pode inverter uma imagem usando a luz no canto superior direito de cada imagem como esta:

rotação de dimage-revolução-slider

Como posicionar elementos com a grade de ajuda

A grade de ajuda é um elemento valioso que ajuda a posicionar melhor os elementos. Você pode ativar a grade de ajuda na parte inferior esquerda do palco.

torradeira daide-revolução-slider

Essa grade possui ladrilhos com tamanhos diferentes, quanto menor o tamanho, mais preciso você será na colocação do elemento.

imagens de Investimento-de-

Como adicionar animação

Existem tipos de animações 3 no Slider Revolution: animações de entrada, animações durante (a existência do elemento em cena) E animações finais.

Veja também nossa 6 WordPress plugins de compressão de imagem para o seu Blog

Para adicionar uma animação a um elemento, você deve primeiro selecioná-la clicando nele (quando um elemento é selecionado, ele é enquadrado por uma linha pontilhada com cantos redimensionáveis).

Então clique em Snoopy, vá na página e clique na aba « Animação ".

animated-slider-revolução

Na imagem anterior, tenho as animações de entrada em azul e as animações de saída em vermelho.

Para alterar uma animação, clique na lista suspensa ao lado do ícone da pessoa que está executando.

animados-icon-slider-revolução

Você tem uma grande variedade de animações à sua disposição. Deixo para você escolher a animação que deseja definir para a entrada de um elemento. Da minha parte, eu escolhi " easeOutElastic Para obter este resultado:

Animação-entree-snoopy

Aqui para você nossa Plugins 4 WordPress para aumentar o rodapé do seu blog

Mais à esquerda, você pode determinar a duração da animação e o modo de animação que precisa deixar em " Sem divisão Como as outras opções se aplicam apenas ao texto, não às imagens.

-Configuration-duna animado-slider-revolução

Lire aussi Como esconder os títulos de artigos e páginas do WordPress

Agora, eu gostaria de usar o Snoopy, por isso, vá para " laço E na opção suspensa, escolha " onda ". Agora o Snoopy flutua:

snoppy-flutuante

Como configurar a visibilidade dos elementos

Meu Snoopy flutua, mas não quero que ele fique visível no celular. Então clique em " visibilidade E no ícone do Smartphone, verifique se está desativado:

visibilidade em elementos-revolução-slider

Como ajustar o comportamento dos elementos

Para otimizar o carregamento do controle deslizante, você pode atrasar o carregamento das imagens. Isso é feito na guia " comportamento Com a opção " lazy Loading ". Você pode até forçar a capacidade de resposta dos elementos.

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]

comportamento de elemento-revolução-slider

Como criar acionadores personalizados em um elemento

Ações permitem associar gatilhos a ações específicas. Para adicionar um gatilho, clique na guia Ações Então o botão "+".

adicione-a-botão do obturador

Existem tipos de gatilhos 3:

  • O clique é o ato de clicar com o mouse
  • A entrada do mouse sobre o elemento
  • O mouse sai acima do elemento

A lista de ações é bastante longa. Por exemplo, você pode redirecionar um usuário que clica no Snoopy para outra página escolhendo a ação " Fazer a ligação única O que trará novas opções.

Descubra também o nosso 10 premium WordPress plugins a partir de reservas e reservas

Management-de-gatilhos-revolução-slider

Como usar o Slider Revolution TimeLine

O Slider Revolution oferece na parte inferior uma interface de gerenciamento de tempo. Essa interface permite que você veja onde a animação de um elemento começa e onde termina.

começando-and-end-duna-filme-on-slider-revolução

Na imagem anterior, você notará duas setas azuis. O primeiro à esquerda indica o início da animação de entrada de um elemento e o segundo indica o final da animação de entrada. A cor vermelho escuro indica a vida útil do item na cena.

Lire aussi Como adicionar uma contagem regressiva em seu blog WordPress

Você encontrará um final também semelhante ao outro final de uma duração (animação de entrada, tempo de vida e animação final).

Com o " linha do tempo Você poderá controlar qual elemento é exibido antes e qual elemento desaparece primeiro. É uma ferramenta muito prática que você precisa dominar para fazer uma boa animação.

A linha do tempo também possui um player que você pode ativar para visualizar o slide.

Animação cronograma-revolução-slider

Até então, eu dei a você o básico para criar um slide. Agora salve seu controle deslizante e inicie a visualização.

Backup-and-previsulisation

Isso é tudo para este tutorial. Em um próximo artigo, falaremos sobre a exibição de um controle deslizante em um artigo e algumas operações avançadas.

Descubra também alguns temas e plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Áudio de Disco

O Disk Audio é outro plug-in do WordPress que o ajudará a exibir um reprodutor de áudio diretamente no seu site, apenas pressionando um botão. O layout do reprodutor de áudio é totalmente responsivo, para que os usuários móveis desfrutem de seus recursos sem nenhum problema.

Além disso, oferece muitas opções de personalização, incluindo esquemas de cores, aparências, imagens de fundo e opacidade. Possui várias opções para controlá-lo pelo teclado e também permite exibir sua lista de reprodução com uma barra de rolagem ajustável.

Leia também: plugins 10 WordPress para aumentar a pesquisa sobre seu blog

Você também poderá incorporar links de download no music player para mostrar aos usuários onde eles podem comprar a faixa que está sendo reproduzida em seu site.

Descarregar | Demo | hospedagem na web

2. Reserva evento Pro

Este é outro plugin responsivo do WordPress 100%, fácil de personalizar e dedicado ao gerenciamento de reservas em qualquer site, que oferece seus serviços nas áreas de eventos.

Suas principais características incluem: personalização de texto, cor, bordas e outros, suporte ao PayPal, gerenciamento de códigos e cupons de cupom, suporte para Google Maps, o suporte ao gerenciamento de e-mails, o suporte dos códigos de acesso, painel de controle intuitivo, criação fácil de eventos, controle total sobre a aparência etc.

Descarregar | Demo | Hospedagem

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. [FREE]

3. Compartilhar Social e Locker Pro

A extensão Social Share & Locker Pro foi projetada para ajudar seu site a ficar mais visível nas redes sociais. Em apenas alguns cliques, você pode definir a posição dos seus ícones sociais ou bloquear seu conteúdo exigindo o compartilhamento em uma das redes sociais propostas por você.

Você tem temas predefinidos do 10 e isso deve cobrir os desejos mais comuns. Todos os seus temas são Retina e fazem maravilhas.

coisas 30 fazer em seu blog após a sua publicação Descubra-os consultando este artigo.

Além disso, com o Social Share & Locker Pro, você poderá visualizar o nome completo das redes sociais ou apenas o ícone. Depende do seu design, espaço disponível ou dos seus desejos.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

Conclusão

Voila! Esperamos que este tutorial tenha lhe dado os conceitos básicos da criação de uma apresentação de slides com o Slider Revolution em um blog ou site do WordPress. Se você tiver alguma dúvida, sugestão ou comentário, deixe-o em nossa seção Comentários.

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.

Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.

...

Este artigo contém comentários 0

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
5 ações
ação2
chilrear
Enregistrer3