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:

• Baixe e instale o Slider Revolution
• Como entender a UI inicial do Slider Revolution
• Como configurar uma apresentação de slides no Slider Revolution

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

Como começar a usar o 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 ".

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 10 plug-ins WordPress que permitem que você avalie suas postagens de blog

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

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).

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).

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.

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 a uma cena

A primeira coisa que você vai querer fazer primeiro é adicionar um plano de fundo ao nosso slide. Aqui você pode escolher entre: Uma imagem de fundo (da sua biblioteca de mídia), uma URL externa que aponta para uma imagem, um 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 ".

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

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

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 ".

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.

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

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

Agora o Snoopy é assim, é mais adequado. Você também pode virar uma imagem usando o indicador localizado no canto superior direito de cada imagem, como este:

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.

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

Como adicionar animação

Existem 3 tipos de animações 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 ".

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 após o ícone do homem em execuçã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:

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.

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 Snoopy flutua:

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, certifique-se de que está desativado:

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.

Como criar acionadores personalizados em um elemento

Ações permitem associar gatilhos a ações específicas. Para adicionar um gatilho, clique na guia Opções »Em seguida, no botão« + ».

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

Como usar o Slider Revolution TimeLine

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

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.

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

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 outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio 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

Disco de áudio é outro WordPress Plugin que o ajudará a exibir um reprodutor de áudio diretamente em seu site com apenas o pressionar de um botão. O layout do reprodutor de áudio é totalmente responsivo, para que os usuários móveis possam aproveitar seus recursos sem problemas.

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 que você visualize 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 WordPress Plugin 100% responsivo, fácil de personalizar e dedicado à gestão de reservas em qualquer site, que ofereça seus serviços na área 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 na web 

3. Social Share & Locker Pro

A extensão Social Share & Locker Pro foi projetada para ajudar seu site a ser mais visível nas redes sociais. Com apenas alguns cliques, você pode definir a posição de seus ícones sociais ou bloquear seu conteúdo solicitando o compartilhamento em uma das redes sociais oferecidas 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á exibir o nome completo das redes sociais ou apenas o ícone. Dependerá do seu projeto, do espaço disponível ou dos seus desejos.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

• Como se tornar um blogueiro de sucesso e ganhar dinheiro com o WordPress
• Como integrar o Google Forms WordPress
• Como criar uma política de privacidade no WordPress
• Plugins 6 WordPress para garantir a conformidade RGPD de um blog

Conclusão

Aqui está ! É isso neste guia. Esperamos que este tutorial tenha fornecido a você o básico para a criação de uma apresentação de slides com o Slider Revolution em um blog ou site 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. 

...