SLIDER COMO ADICIONAR E CONFIGURAR NO WORDPRESS

Você está aqui:

Como Adicionar Smart Slider no WordPress

Smart Slider 3

Como Adicionar Smart Slider ao Seu Site 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!

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Acessando Menu do Smart Slider 3

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Criar 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.

Como Adicionar Smart Slider ao Seu Site WordPress - Configuracoes Basicas

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Criando Slides

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Conteudo do Slide

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

Como Adicionar Smart Slider ao Seu Site WordPress - Configurando 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.

Como Adicionar Smart Slider ao Seu Site WordPress - Adicionando Texto ao Slide

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Configurando Texto do Slide

Você pode configurar as cores e fontes:

Como Adicionar Smart Slider ao Seu Site WordPress - Opcao de Configuracao para Cores e Fontes

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

Como Adicionar Smart Slider ao Seu Site WordPress - Opcao de Configuracao para Alinhamento e Margens


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:

Como Adicionar Smart Slider ao Seu Site WordPress - Adicionando Botao ao Slide

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

Como Adicionar Smart Slider ao Seu Site WordPress - Botao no Slide

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Opcao de Configuracao do Botao

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

Como Adicionar Smart Slider ao Seu Site WordPress - Salvar Configuracoes

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Configurando Aparencia do Slider

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

Como Adicionar Smart Slider ao Seu Site WordPress - Setas do Slider

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Bullets

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Outras Configuracoes

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

Como Adicionar Smart Slider ao Seu Site WordPress - Shortcode e Insercao em Paginas

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.

Como Adicionar Smart Slider ao Seu Site WordPress - Slider Em Pagina Especifica

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:

Como Adicionar Smart Slider ao Seu Site WordPress - Exibicao do Slider

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.

Was this article helpful?
Dislike 0