Como Adicionar Smart Slider no WordPress

Smart Slider 3

No momento em que estou escrevendo esse post o Smart Slider encontra-se em sua 3a versão. E a cada nova versão esse plugin para WordPress fica ainda melhor!

O Smart Slider é um plugin que possui versão FREE e PRO – aqui vamos falar apenas da versão gratuita. É um dos mais baixados e utilizados pela comunidade WordPress, somando um número de mais de 200 mil downloads e avaliação de 5 estrelas. Dá para escolher e estilizar o estilo do slider, bem como devem ser os controles para navegação entre as imagens do slider.

Esse plugin é extremamente simples de configurar e criar conteúdos para seu slider, além de ser 100% responsivo. Com o Smart Slider você consegue definir fontes escolhendo algumas que já vêm com o plugin, escolher posicionamento de texto, botões, grades e ainda definir classes CSS para tornar ainda mais avançado o seu controle sobre a estilização dos slides.

Criando Seu Primeiro Slider

Depois de ter instalado o plugin Smart Slider 3 e ativado o mesmo em seu WordPress, vamos dar início as configurações de comportamento, aparência e criação dos slides que você quer exibir.

Assim que o Smart Slider 3 é ativado um novo item de menu será adicionado à barra do Dashboard do WP. Então, clique para acessar.

Quando a página principal do Smart Slider 3 for carregada, você verá que já existe um slider criado e pré-configurado. O plugin traz esse slider para a demonstração de alguns recursos e para ajudar na criação de novos sliders.

Configurações Iniciais

Nós vamos criar um novo slider do zero. Para isso, você deve clicar na opção NOVO SLIDER.

Uma janela será exibida, permitindo que você configure dimensões e escolha o tipo de slider que deseja criar. Para esse tutorial nós vamos criar um slider do tipo full width, ou seja, um slider que pega a largura completa da tela.

Então faça o seguinte: dê um nome para o seu slider, mantenha as dimensões trazidas como padrão e escolha a opção de slider Largura completa. Depois, clique no botão Criar.

Adicionando Slides (Imagens e Texto)

Já na página de criação de conteúdo para seu slider, você pode escolher se quer criar slides arrastando e soltando imagens ou clicando em Adicionar Slide.

Para esse tutorial eu vou escolher arrastar e soltar uma imagem. Essa imagem corresponde ao background do slide. Depois iremos adicionar textos e botões.

Assim que você soltar a imagem de background do seu slide para a respectiva área, um slide será criado. Clique nele para configurar o conteúdo.

A primeira configuração que vamos realizar é referente ao comportamento da imagem de fundo (background).

Clique na opção Fundo e logo depois em Preencher. Isso garante que a imagem preencha todo espaço reservado para o slider e não fique com tamanho diferente, pois ela vai sempre se manter encaixada. Existem outras opções e posteriormente você pode testá-las e escolher aquela que funciona melhor para você.

Rolando a página mais para baixo você verá a área onde conseguiremos adicionar textos e botões ao nosso slide.

Vamos adicionar primeiro uma camada tipo cabeçalho. Então clique no ícone H.

Uma janela flutuante será exibida e você deve digitar um texto ali. Nessa mesma janela você tem diversas opções de configuração para a aparência do seu texto.

Você pode configurar as cores e fontes:

E também o alinhamento, margens e adicionar uma classe CSS – caso queira:

Finalizando as configurações para o texto. Clique no X para fechar a janela flutuante.

Agora a gente vai adicionar um botão ao nosso slide e ele terá um link. Dessa forma, quando o botão receber um clique haverá um redirecionamento.

Para adicionar um botão ao slide, clique no ícone referente à camada de botão, como mostro abaixo:

Ao clicar para adicionar um botão, automaticamente ele será adicionado logo abaixo do texto.

Na janela flutuante de configurações, as opções são basicamente as mesmas que vimos antes para o texto.

Adicione um texto para o botão e no campo Link, o endereço do site ou de alguma página para que o visitante seja redirecionado ao clicar.

Faça também as suas configurações de cores e alinhamento.

Para finalizar, clique no botão SALVAR que fica localizado na barra flutuante que fica no topo da página.

Configurações de Aparência do Slider

Bom, agora que temos pelo menos 1 slide adicionado e configurado, recomendo que você crie outros para que o nosso Slider tenha bastante conteúdo.

Fora essa parte de popular o slider, nós também vamos realizar algumas configurações referentes a aparência do mesmo, como navegação e reprodução automática.

Precisaremos voltar a página principal do nosso slider para realizar configurações. Para isso, basta clicar na opção SLIDER no início da página.

Já na página principal do nosso slider, role o scroll até encontrar as opções de Setas e Navegação.

Para esse tutorial nós vamos adicionar apenas setas e bullets para controle da navegação. Então, na opção de Setas você deve escolher o estilo que deseja utilizar e seu posicionamento.

Para habilitar os bullets (bolinhas), você deve acessar a opção Navegação. Aqui você praticamente terá apenas de escolher a localização dos bullets no slider. Dá também para customizar as cores das bolinhas, clicando em estilo.

Caso você queira habilitar a Reprodução Automática ou alterar outras configurações de funcionamento do slider, basta acessar a área que vem antes das setas e bullets.

É nessa mesma área, na opção Publicar, que você encontra o shortcode para adicionar o slider ao seu site.

Caso queira adicionar o slider a uma página ou post específico, basta acessar a determinada página e clicar no ícone do Smart Slider.

Assim que você adicionar o slider ao seu site, corre para ver como ficou a imagem, texto e os botões de navegação. Se tiver que fazer algum ajuste, é só voltar lá no painel, mexer no que for preciso e salvar.

Olha só como ficou o meu:

Conclusão

Você pode obter o Samrt Slider 3 gratuitamente – que é o link que você encontra aqui no post -, ou adquirir a versão paga no site oficial do plugin. Como disse antes, eu uso esse ferramenta para criação de sliders responsivos há um tempo e sempre na versão FREE. Então, vale a pena fazer alguns testes e ver qual seria a melhor escolha para seu você.

Acompanhando esse tutorial você conseguiu ver como criar slides e escolher as configurações de aparência, botões e setas. Dá para fazer muita coisa legal e bonita com o Smart Slider 3. Escolha bem as imagens de background e alinhe os textos e botões de forma organizada, permitindo uma boa leitura e usabilidade.