Os sliders são elementos que podem ser encontrados em quase todas as páginas iniciais de sites. Deslizante Smart 3 é um poderoso plugin disponível na versão gratuita e premium.

Os principais recursos deste plugin

Como um recurso, oferece entre outros:

  • Uma interface de usuário intuitiva
  • Um construtor de páginas de vídeo de arrastar e soltar com visualização ao vivo / 8
  • Slides dinâmicos que podem ser criados usando artigos e filtrados por ID ou páginas personalizadas
  • Geração de slides (Dinamicamente) de uma variedade de redes sociais (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube e mais).
  • Controles deslizantes personalizáveis 
  • Deslizando animações em segundo plano (Ken Burns)

Livre vs Premium

Se tudo o que você está procurando é um controle deslizante básico, Smart Slider 3 está disponível em WordPress.org no diretório de plug-ins. Mesmo a versão gratuita é impressionante e especial em comparação com alguns dos outros controles deslizantes.

Uma licença de site único pessoal custa apenas $ 25 (a renovação está em 15 $).

Smart-Slider-Templates

Existem algumas diferenças importantes entre a versão gratuita e premium em termos de conteúdo e recursos. Aqui está o que você obterá com a versão premium:

  • Um gerador ilimitado de slides dinâmicos
  • Comandos avançados
  • Modo especialista
  • Animações em segundo plano
  • Um visualizador e editor de imagens
  • Demonstrações de controle deslizante 43

Tutorial: Criando um controle deslizante básica

Se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog.

Uma vez ativado, o WordPress Plugin Slider Smart coloca seu próprio menu na parte inferior do painel de administração do WordPress.

Se você nunca instalou um WordPress Plugin descobrir Como instalar um plugin no WordPress

Clique no menu Smart Slider, a interface principal é aberta, onde a primeira opção que você verá é um grande botão verde: " Criar Slider » que abre uma janela de configuração inicial como você vê abaixo.

Smart-Slider-Criar-Slider

A partir daqui, você pode nomear seu controle deslizante e escolher um estilo geral. Existem muitos estilos para escolher (como o modo de largura inteira, carrossel de página inteira, miniatura e muito mais), mas iremos com um bloco deslizante baseado na página do layout de nosso site existente.

Clique "Crio" e Slider Smart começará a projetar seu modelo básico de controle deslizante. Após alguns segundos, você se encontrará em uma página que fornece todos os detalhes básicos sobre o plugin.

Discover Como criar uma política de privacidade no WordPress

A primeira coisa a observar aqui é a seção " publicar Slider" Você precisará usar um destes três métodos (Shortcode, editor de página ou postagem ou código PHP) quando chega a hora de publicar seu slide (n ° 1 abaixo). Antes de podermos fazer isso, precisamos criar slides.

É aqui que o plugin realmente demonstra sua facilidade de uso.

Tudo que você tem a fazer é clicar no botão verde " Adicionar slides Imagem "(n ° 2 abaixo) e sua biblioteca de mídia será aberta. A partir daí, você pode selecionar quantas imagens quiser ou começar com apenas uma e clicar em " Selecionar Na janela de biblioteca de mídia.

Smart-Slider-Nova Slides

Nota: Você não está limitado a imagens ao selecionar seu slide. Você também pode usar vídeos ou artigos, bem como criar slides vazios, estáticos ou até mesmo dinâmicos.

consultar Como duplicar (copiar) suas páginas no WordPress: O tutorial

O Smart Slider carrega seu slide na interface e você está pronto para salvar e publicar ou começar a personalizar. No entanto, se eu publicar minha apresentação de slides, ela funcionará bem, mas não é bem o que eu estava procurando, como você pode ver na imagem abaixo.

Smart Slider fora do centro 1

Para corrigir isso, fui ao menu "Tamanho" e rolei para baixo até a seção modo responsivo. A seleção foi "Largura completa" Então, eu escolhi "Auto" e salvou meu progresso. De lá, voltei para a aba " geral "e um alinhamento central seleccionado.

Smart-Slider-Tamanho-Change

Quando eu falar sobre facilidade de uso aqui, tenha em mente que todo esse processo levou menos de 5 minutos para o meu primeiro tentativa.

Agora é hora de trabalhar no próprio slide. Ao passar o mouse sobre os slides na janela de exibição, você perceberá que uma caixa verde aparece no canto superior esquerdo. Como você deve ter imaginado, clicar em irá marcar este slide como o primeiro na sequência.

Veja também 5 excelente premium WordPress plugins para adicionar um controle deslizante

Com meu controle deslizante criado e o plano de fundo no lugar, era hora de adicionar algum conteúdo e transições. Para realizar esta etapa, simplesmente cliquei no slide que queria editar, que vai para a seção de camadas.

Existem várias configurações individuais no painel direito, mas se você rolar para baixo, encontrará uma imagem do seu slide. Você pode clicar em um dos itens no painel esquerdo para colocá-los em seu slide.

Smart-Slider-Elements

Criar esses slides é outra escola. Existem tantas opções disponíveis. Para lhe dar uma ideia da flexibilidade deste plugin, dê uma olhada no que cada elemento pode fazer pelo seu controle deslizante via:

  • Um item de menu
  • Entretenimento
  • Configurações de camada

Em cada um desses menus, existem vários submenus. Por exemplo, quando você cria um elemento de texto, pode ajustar configurações de fonte, como: 

  • As famílias de fontes
  • A cor do texto
  • tamanho da fonte
  • A altura da linha
  • A decoração do texto
  • Alinhamento
  • Espaçamento entre letras e palavras
  • Configurações de edição de texto
  • Sombra do texto

Cada elemento de texto no seu controle deslizante pode ter configurações exclusivas, animações exclusivas e suas próprias configurações de sincronização. Existe até uma seção para o CSS personalizado.

Ao adicionar elementos e animações ao seu slide, na versão pro você também notará uma função de calendário, que permite controlar o tempo de apresentação de elementos individuais e a duração das suas animações usando slide-bares simples.

Eu estava contando com esse recurso ao adicionar camadas diferentes para este slide um pouco mais tarde.

Smart-Slider-Timeline

Adicionando camadas e animações

Com nosso controle deslizante para cima eo fundo está instalado, é hora de apresentar algumas diferentes elementos e camadas. Vamos começar adicionando uma imagem de um boneco de neve no slide. Para fazer isso, eu ir para o menu "Camadas" e clique em " Cenário ". Isso colocará uma imagem fictícia no slide.

Descubra também Como configurar o plugin WordPress Slider Revolution

De lá você pode clicar sobre a imagem falsa no canto inferior esquerdo, em seguida, selecionar e redimensionar a imagem na biblioteca.

Smart-Slider-Imagem-Elemento Resize

Depois de escolher, inserir e redimensionar minha imagem, é hora de adicionar algumas animações básicas que podem ser realizadas em apenas algumas etapas.

O primeiro é selecionar a guia "Animações" como visto abaixo. Uma vez feito isso, clicaremos no botão verde de animação "No".

Smart-Slider-Animations

A próxima tela é onde posso escolher minha animação, bem como ajustar a programação. Para este slide em particular, apresento uma animação "CERTA" e aumento a duração para 2200 ms.

Você está procurando um ftp para gerenciar seus arquivos e pastas do WordPress, descobrir Como usar o FTP no Windows 10

Também adicionarei um atraso de 300ms. Na parte inferior desta tela existe uma opção para um evento específico e um acionamento dessa animação como sobrevoo de um mouse ou clique no slide. Não vou complicar as coisas com esses parâmetros para este exemplo.

Smart-Slider-In-Animation-Configurações

Então vou adicionar algum texto. Seguindo o mesmo processo acima, clique no item " adicionar texto E faça os ajustes necessários. Entrei no texto e fui para as configurações de fonte, onde alterei o tamanho e a cor.

Eu adiciono uma animação " Fade In E ajustou o calendário para que comece logo após a animação do boneco de neve.

Você também notará neste menu que existe a possibilidade de ter texto específico para tablets e dispositivos Móvel. Este é um ótimo exemplo dos tipos de recursos que tornam este plugin tão flexível e fácil de usar.

Em alguns "outros" controles deslizantes, eu seria forçado a usar uma consulta de mídia e CSS personalizado.

Smart-Slider-text-Layer-Options

Finalmente, adiciono mais duas camadas. A primeira é uma camada de texto e a segunda é uma camada de imagem. Novamente, estou passando exatamente pelo mesmo processo acima, mas dediquei um pouco mais de atenção ao tempo da animação. Você pode ver os resultados finais abaixo.

Em suma, a criação deste slide foi um processo de minutos 20.

Observação: Converta este slide para GIF irá modificar certos prazos das belas animações selecionadas que montei cuidadosamente.

Voila! Depois de experimentar muitos plugins WordPress do controle deslizante, gratuito e premium, posso dizer honestamente que este é um dos melhores que já testei. Não é apenas uma característica específica que o torna único. É uma combinação de coisas que mostram como ele é um plugin incrível.

É importante observar que não abordei todos os recursos individuais.

Descubra também Como saber qual tema é usado em um blog WordPress

Tenho certeza de que se eu passar um pouco mais de tempo trabalhando com este plugin, encontrarei algumas coisas que gostaria de mudar e talvez até alguns bugs. Acho que a facilidade de uso mantém as pessoas lá por tempo suficiente para que possam tirar o máximo proveito da variedade de recursos oferecidos. E acredite em mim, existem muitos.

Baixar Smart Slider 3

Descubra também alguns 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 aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Construtor de Páginas WooCommerce

O Construtor de Páginas WooCommerce é um WordPress Plugin muito popular que oferece um número bastante consistente de códigos de acesso e que permite criar vários tipos de páginas personalizadas (produto, carrinho, checkout, “minha conta”) em seu site WooCommerce. É uma extensão de Visual Composer plug-in que você deve instalar com antecedência.WooCommerce-page-builder

Graças a este plugin, você terá a possibilidade de criar sites de comércio eletrônico único usando qualquer tema WordPresse ganhar muito dinheiro.

Descarregar | Demo | hospedagem na web

2 Elementor

Lançado originalmente em 2016, o plugin Elementor WordPress é um dos mais jovens criadores de páginas desta lista. Apesar de seu início tardio, o Elementor rapidamente acumulou mais de 1 de instalações ativas no WordPress.org, tornando-o um dos Construtores visuais das páginas mais populares do WordPress.

elementor pro e1544277036401
O que torna sua reputação é sua interface visual fluida, suas diferentes opções de estilo e outros recursos poderosos, como a criação completa de Temas do WordPress.

Sua interface é dividida em duas partes principais, com uma terceira zona para determinados parâmetros. A versão gratuita do Elementor oferece widgets gratuitos do 28. A versão Pro traz outros widgets 30, um total de widgets 58 na versão Pro. A versão gratuita inclui cerca de modelos gratuitos 40, enquanto a versão Pro traz centenas de modelos adicionais.

 Descarregar | Demo | hospedagem na web

3. Popups Ninja

Com mais de 30 vendas e uma classificação de 000 estrelas, Ninja Popups é um dos WordPress plugins os mais populares disponíveis no Code Canyon.

Plug-ins Ninja Popups wordpress criar pop-up pop-up opt in

Além de uma vasta gama de modelos para uma variedade de usos, ele também vem com vários recursos, tais como: um construtor visual de pop-up, 10 posições de exibição diferentes para pop-ups, 74 efeitos de animação diferentes, suporte de tecnologia anti-bloqueio para contornar bloqueadores de anúncios, uma variedade de opções de segmentação, estatísticas no painel de instrumentos, bloqueio de conteúdo para opt-in e-mail ou compartilhamento nas redes sociais, toneladas de integrações com serviços de marketing por e-mail e muito mais.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

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

Conclusão

Aqui está ! É isso para este tutorial e espero que ele ajude você a criar controles deslizantes ou slides facilmente com a ajuda do Plugin WordPress Smart-SliderSe você gostou, não hesite em compartilhe com seus amigos em suas redes sociais favoritas

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.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...