Ir para o conteúdo principal

Smart Slider 3: um plugin WordPress para criar sliders

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]

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 várias redes sociais (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube e mais).
  • Controles deslizantes personalizáveis
  • Animações deslizantes em segundo plano (Ken Burns)

Livre vs Premium

Se tudo que você quer é um controle deslizante básico, Smart Slider 3 está disponível no WordPress.org no diretório plugins. Até a versão gratuita é impressionante e especial em comparação com outros controles deslizantes.

Uma licença pessoal de site único 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 um editor de imagens
  • Demonstrações de controle deslizante 43

Tutorial: Criando um controle deslizante básico

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 plugin WordPress Slider Smart coloca seu próprio menu na parte inferior do painel de administração do WordPress.

Se você nunca instalou um plugin do WordPress, descubra Como instalar um plugin no WordPress

Clique no menu Smart Slider, a interface principal é aberta onde a primeira opção que você vê é 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 daí, você pode nomear seu controle deslizante e escolher um estilo geral. Existem muitos estilos para escolher (como largura total, página inteira, carrossel, miniatura e muito mais), mas vamos usar um controle deslizante de bloco com base no layout do site existente.

Clique "Criar" 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 desses 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ê precisa fazer é clicar no botão verde Adicionar slides Imagem "(n ° 2 abaixo) e sua biblioteca de mídia será aberta. A partir daqui, você pode selecionar quantas imagens quiser ou começar com apenas uma e clicar em " Selecionar Na janela Biblioteca de mídia.

Smart-Slider-Nova Slides

Nota: Você não está limitado a imagens quando seleciona seu slide. Você também pode usar um vídeo ou artigos, além de criar slides vazios, estáticos ou 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 iniciar a personalização. No entanto, se eu publicar minha apresentação de slides, ela funcionará bem, mas não é exatamente o que eu estava procurando, como você pode ver na imagem abaixo.

Para corrigir isso, fui ao menu "Tamanho" e eu andei até a seção modo responsivo. A seleção foi "Largura total", então eu escolhi "Auto" e salvou meu progresso. A partir daí, voltei para a guia " geral "e um alinhamento central seleccionado.

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]

Smart-Slider-Tamanho-Change

Quando falo sobre usabilidade aqui, tenha em mente que todo esse processo levou menos de 10 minutos para o meu primeiro tentativa.

Agora é hora de trabalhar no próprio slide. Quando você passa o mouse sobre os slides na janela de exibição, notará que uma caixa verde aparece no canto superior esquerdo. Como você deve ter adivinhado, clicando em você marca este slide como o primeiro da 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 conteúdo e transições. Para executar esta etapa, basta clicar no slide que deseja editar que me direciona na seção de camadas.

Existem muitas 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 no seu slide.

Smart-Slider-Elements

A criação desses slides é outra escola. Existem tantas opções disponíveis. Para ter uma idéia da flexibilidade desse plug-in, considere o que cada elemento pode trazer para o 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
  • O espaçamento de letras e palavras
  • Configurações de edição de texto
  • A sombra de 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 exibição de elementos individuais e a duração de suas animações usando barras deslizantes 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 no lugar e o plano de fundo instalado, é hora de apresentar algumas diferentes elementos e camadas. Começaremos adicionando uma imagem de um boneco de neve no slide. Para fazer isso, eu vou ao menu Camadas e clique em "Imagem". Isso colocará uma imagem fictícia no slide.

Descubra também Como configurar o plugin WordPress Slider Revolution

A partir daí, você pode clicar na imagem fictícia no canto inferior esquerdo e selecionar e redimensionar a imagem na biblioteca de mídia.

Smart-Slider-Imagem-Elemento Resize

Depois de escolher, inserir e redimensionar minha imagem, é hora de adicionar uma animação básica que pode ser realizada em algumas etapas.

O primeiro é selecionar a guia «Animações» como pode ser visto abaixo. Uma vez feito isso, vamos clicar no botão verde animação "In".

Smart-Slider-Animations

A próxima tela é onde posso escolher minha animação e ajustar o calendário. Neste slide em particular, apresento uma animação "DIREITA" 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 300 ms. Na parte inferior desta tela, há uma opção para ter um evento específico e acionar essa animação, como passar o mouse sobre o mouse ou clicar no slide. Não vou complicar as coisas com esses parâmetros para este exemplo.

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]

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. Digitei o texto e depois 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 excelente exemplo dos tipos de recursos que tornam este plug-in tão flexível e fácil de usar.

Em alguns "outros" controles deslizantes, eu teria que usar uma consulta de mídia e um CSS personalizado.

Smart-Slider-text-Layer-Options

Finalmente, adiciono mais duas camadas. O primeiro é uma camada de texto e o segundo é uma camada de imagem. Mais uma vez, sou exatamente o mesmo processo que o acima, mas mantive o tempo da animação um pouco mais. 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 vai mudar alguns prazos lindas animações selecionadas que eu montei meticulosamente.

Voila! Depois de experimentar muitos plugins WordPress Slider, gratuito e premium, posso dizer honestamente que este é um dos melhores que já testei. Não é apenas um recurso específico que o torna único. É uma combinação de coisas que mostram o quão impressionante é.

É importante observar que eu não cobri cada recurso individual.

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

Tenho certeza de que se eu gastar um pouco mais de tempo trabalhando com este plugin, encontrarei algumas coisas que gostaria de mudar e talvez até alguns bugs. Eu acho que a facilidade de uso mantém as pessoas por tempo suficiente para que elas possam tirar o máximo proveito da infinidade de recursos disponíveis. E acredite em mim, há muitos.

Baixar Smart Slider 3

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

1. Construtor de Páginas WooCommerce

O WooCommerce Page Builder é um plugin WordPress muito popular que oferece um número bastante grande de códigos de acesso e permite criar vários tipos de páginas personalizadas (produto, carrinho, caixa, "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 exclusivo usando qualquer tema do WordPress, e você ganha muito dinheiro.

Descarregar | Demo | hospedagem na web

2 Elementor

Originalmente lançado no 2016, o plugin do WordPress Elementor é um dos mais jovens construtores desta lista. Apesar de seu início tardio, a Elementor acumulou rapidamente mais instalações ativas do 1 000 000 no WordPress.org, tornando-o um dos mais rápidos Construtores visuais das páginas mais populares do WordPress.


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 vendas de 30 000 e uma classificação de estrelas 4,4, o Ninja Popups é um dos plugins WordPress mais populares disponíveis no Canyon Code.

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]

Além de uma ampla gama de modelos para uma variedade de usos, também possui vários recursos, como: um construtor visual de pop-up, 10 diferentes posições de exibição pop-up, diferentes efeitos de animação 74, suporte à tecnologia antibloqueio para ignorar bloqueadores de publicidade, uma variedade de opções de segmentação, estatísticas no painel de instrumentos, bloqueio de conteúdo para inclusão de e-mail ou compartilhamento em redes sociais, inúmeras integrações com serviços de marketing por e-mail e muito mais.

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! Isso é tudo para este tutorial e espero que ajude você a criar facilmente controles deslizantes ou slides com graça em Plugin WordPress Smart-Slider. Se 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 o seu Comentários e sugestões na seção dedicada.

...

Este artigo contém comentários 2
  1. Bom Dia,
    Obrigado por suas explicações detalhadas sobre o controle deslizante inteligente 3.
    Depois de criar meu controle deslizante, inseri este em um artigo. O tamanho do controle deslizante não é mais o que eu defini com a ferramenta. Ocupa toda a largura do contêiner. Como podemos adaptá-lo ao formato predefinido em uma página ou artigo?
    cordialmente

    1. Bom Dia,

      Eu nunca testei no seu tema, desculpe. Convido você a ler a documentação do plugin ou entrar em contato com o desenvolvedor.

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