Sliders de conteúdo são comuns no WordPress hoje em dia, mas geralmente são usados em um conjunto muito limitado de circunstâncias – tipicamente, eles estão localizados em páginas iniciais, para exibir posts recentes ou galerias de imagens. Uma nova tendência está se desenvolvendo, onde sites WordPress estão usando o potencial e a flexibilidade de sliders de conteúdo para contar histórias envolventes que motivam os visitantes a agir – isso, na forma de tours de produtos.
Usar um slider de conteúdo para o seu tour de produtos WordPress pode ajudar você a vender produtos melhor, guiando os usuários pelos pontos-chave no ritmo deles – isso é melhor do que simplesmente usar um vídeo, porque eles podem pular para frente/para trás para pontos específicos e definidos, em vez de ter que adivinhar um timecode. Além disso, usar um slider de conteúdo dessa forma aproveita todos os tipos de mídia da web – o que significa que você pode incluir conteúdo interativo nos slides, em vez de forçar seu usuário a assistir passivamente a um vídeo.
Até recentemente, você precisava saber codificar para criar qualquer coisa além dos tours de produtos mais simples com slider de conteúdo, mas temos usado um plugin de slider incrível chamado SlideDeck 2, que muda tudo isso.
Este plugin poderoso torna super simples a criação de sliders incríveis em minutos, sem a necessidade de uma única linha de código. Cobrimos outro dos recursos robustos do SlideDeck 2 em um post anterior, mas a atualização mais recente permite que você crie sliders de conteúdo personalizados e adapte o conteúdo de cada slide para criar apresentações envolventes que motivam seus visitantes a agir. Preparamos este guia rápido para mostrar como criar um tour de produto bacana para o seu site WordPress usando o SlideDeck 2.
Compra e instalação do plugin
Primeiro de tudo: Slides de Conteúdo Personalizado são um recurso premium no SlideDeck 2, então você terá que comprá-lo para usá-lo em seu site. Recomendamos que você acesse o site SlideDeck e compre o plugin – pela potência que ele contém, é bem barato e você pode facilmente fazer um upgrade para obter melhores recursos e usá-lo em mais sites.
Para desbloquear o recurso de Conteúdo Personalizado, você precisará comprar o pacote Professional ou Developer, depois instalar o plugin mais um 'Addon' que desbloqueia os recursos adicionais.
Para instalar o plugin, você pode seguir nosso útil Guia Passo a Passo para Instalar um Plugin WordPress.
Terminologia
Antes de começarmos, há alguns termos que devemos explicar:
- Tipo de Slide – Existem 4 tipos diferentes de slides, cada um projetado para acomodar um tipo particular de conteúdo: imagem, vídeo, texto e HTML.
- Lente – As Lentes são como temas para o seu slider de conteúdo. Elas controlam a aparência e o comportamento do seu slider, bem como a forma como o conteúdo é apresentado na página. Assim como com os temas do WordPress, aplicar uma Lente diferente ao seu conteúdo leva apenas alguns segundos e pode resultar em uma aparência e sensação significativamente diferentes para o seu slider.
Ok, agora que a terminologia foi explicada, prossiga e ative o SlideDeck 2, e vamos começar!
Criando um SlideDeck de Conteúdo Personalizado
Vamos mostrar como criar um slider de conteúdo de tour pelo produto que mistura quatro tipos diferentes de conteúdo, usando o recurso de Conteúdo Personalizado do SlideDeck. Comece clicando em “Gerenciar” para ir para o painel principal. Esta tela permite que você crie novos SlideDecks e organize seus SlideDecks existentes.
Na seção Conteúdo Personalizado, clique no botão azul “Criar SlideDeck”. Você será levado para a tela do Editor de Conteúdo Personalizado para construir seu primeiro slide. Assim que chegar ao Editor de Conteúdo Personalizado, comece nomeando seu SlideDeck. Você notará que seu primeiro slide foi criado e você tem a opção entre três ou quatro Tipos de Slide diferentes, dependendo do pacote do SlideDeck 2 que você está usando – usuários do pacote Profissional terão acesso aos Tipos de Slide Imagem, Vídeo e Texto; usuários do pacote Desenvolvedor poderão escolher o Tipo de Slide HTML além desses três.
Abaixo deste menu suspenso está um dos recursos mais exclusivos do SlideDeck 2 – a janela de visualização ao vivo (é um dos motivos pelos quais o SlideDeck 2 é um plugin recomendado para WordPress no WPBeginner’s Blueprint). Aqui, você vê seu slider atualizado em tempo real enquanto o edita.
Começando com um slide de imagem
Vamos começar com um slide de imagem – algo que dê aos nossos visitantes uma visão geral rápida e visualmente envolvente do tour que eles estão prestes a fazer. Clique no Tipo de Slide “Slide de Imagem”. O menu suspenso será atualizado para mostrar todas as opções pertinentes à criação de um slide de imagem:
Enviar uma imagem | Especificar uma URL – Escolha se deseja enviar sua imagem para a Galeria de Mídia do WordPress, ou simplesmente colar uma URL, se ela estiver hospedada em outro lugar.
Legenda | Texto do Corpo | Nenhum – Informe ao SlideDeck se você deseja uma legenda de texto para sobrepor a imagem, ou ter algum texto breve para acompanhá-la. Alternativamente, você pode simplesmente mostrar a imagem inteira, sem texto associado.
Link do Slide – Especifique uma URL para visitar, se o usuário clicar em qualquer lugar do slide.
Título – Dê um título ao slide para ser exibido nas áreas de legenda ou texto do corpo.
Descrição – Insira o texto da descrição para o slide. Você pode inserir texto rico aqui!
Posição da Legenda – Determina a posição da sobreposição de texto no slide. As legendas podem ir em cima/embaixo, e o texto do corpo pode ir à esquerda/direita.
Depois de configurar seu slide como desejar, basta clicar no botão “Aplicar”, e a área de Visualização ao Vivo será atualizada para mostrar seu primeiro slide. Em nosso exemplo, criamos nosso slide especificando uma URL, com uma legenda na parte inferior e sem link de slide.
Então, esse é o nosso primeiro slide de Conteúdo Personalizado criado – fácil, né? Agora, adicionaremos um segundo para incluir um vídeo mostrando a demonstração do nosso produto.
Criando o slide de vídeo
O SlideDeck 2 suporta conteúdo de vídeo de três fontes – YouTube, Vimeo e Dailymotion – o que significa que tudo o que precisamos fazer é enviar o vídeo de demonstração do nosso produto para um desses serviços e, em seguida, colar a URL da página do vídeo e clicar em “Atualizar”.
Assim como no Tipo de Slide de Imagem, você pode optar por adicionar um título e uma breve legenda ou parágrafo de texto para dar aos seus visitantes uma ideia do que verão no vídeo. Por padrão, o SlideDeck 2 usará o conteúdo da legenda que você tem em sua página do YouTube/Vimeo/Dailymotion, mas você pode ajustá-lo para atender às suas necessidades para o tour do produto.
Como antes, clique em Aplicar e navegue rapidamente pelo slider – agora você poderá ir e voltar entre seus slides de imagem e vídeo.
Criando um slide de texto
Às vezes, você só precisa de espaço para algum texto – para mostrar uma lista de recursos, por exemplo, ou para compartilhar uma citação de uma avaliação positiva do produto. Nesses casos, podemos usar o Tipo de Slide de Texto.
Este é um Tipo de Slide muito direto, com apenas algumas opções a serem consideradas:
Layout – O layout básico simplesmente coloca o título no topo do slide, com o texto fluindo por baixo. Múltiplas colunas oferece mais um formato semelhante ao de jornal, quebrando automaticamente o texto em duas colunas. Citação em Bloco permite destacar um pequeno trecho de texto com tipografia grande e em negrito. Como antes, clique em Aplicar para adicionar o slide ao seu SlideDeck.
Reorganizando slides
Neste ponto, você pode estar pensando que gostaria de começar com seu slide de vídeo em vez da imagem, para que possa envolver e engajar seus usuários imediatamente no tour. O SlideDeck permite que você faça isso instantaneamente – na área do cabeçalho do slide, clique e arraste o slide de vídeo e solte-o no espaço brilhante à esquerda do slide de imagem. Super simples!
Indo além – usando o Tipo de Slide HTML
O Tipo de Slide HTML é uma adição poderosa ao pacote de Desenvolvedor do SlideDeck 2, que permite inserir seu próprio código HTML em um slide. É perfeito para layouts mais complexos do seu conteúdo, ou para adicionar interações mais poderosas ao seu slider de conteúdo. Por exemplo, você pode incorporar um formulário de inscrição, para que os clientes possam optar por receber uma newsletter por e-mail ao final do tour do produto – uma poderosa chamada para ação, se é que alguma vez houve uma!
Selecione o Tipo de Slide HTML para revelar o editor HTML no menu suspenso.
No campo Inserir HTML, você pode colar seu código personalizado. Você notará que ele codifica automaticamente as diferentes tags para ajudar a garantir que esteja estruturado corretamente. Alguns pontos importantes a serem observados:
- Você pode incluir regras de estilo CSS para o conteúdo do slide entre as tags <style></style>, e elas se aplicarão a todos os slides no SlideDeck
- Como a Visualização ao Vivo do SlideDeck não consegue prever como os estilos do seu tema podem interagir com seu controle deslizante de conteúdo, para estilização complexa, você obterá uma visualização mais precisa se visualizá-lo na página em que pretende publicar seu SlideDeck.
Com o código no lugar, clique em Aplicar, e o slide será adicionado à rotação.
Configurando a Lente
Você criou seu primeiro SlideDeck de Conteúdo Personalizado! Vá em frente e reserve alguns minutos para clicar nos slides na Visualização ao Vivo e desfrutar do brilho de um trabalho bem feito.
Agora, é hora de torná-lo perfeito com seu site, configurando sua Lente. O SlideDeck contém uma enorme quantidade de opções para controlar a aparência do seu novo tour de produto personalizando a Lente.
Salvando e Publicando Seu SlideDeck
Conteúdo incrível? Verificado. Tema bacana escolhido e personalizado? Verificado. Parece que você está pronto para publicar seu novo tour de produto e converter seus visitantes em clientes!
O SlideDeck oferece três maneiras de incorporar seus controles deslizantes ao seu site WordPress – inserindo-o no conteúdo de uma página ou post existente, criando uma nova página ou post com o controle deslizante incorporado e, finalmente, inserindo-o no seu modelo de página, que é provavelmente sua melhor opção se você quiser adicionar o tour de produto à sua página inicial.
Concluindo
Embora os sliders de conteúdo sejam geralmente usados apenas para galerias de imagens ou posts em destaque, o SlideDeck 2 oferece uma tonelada de flexibilidade para explorar o potencial dos sliders de conteúdo para criar experiências envolventes que mantêm seus visitantes engajados e retornando. Nós da WPBeginner recomendamos altamente que você confira! Um exemplo ao vivo de como estamos usando um SlideDeck personalizado pode ser visto em nossa página Configuração Gratuita de Blog WordPress.
Tem um exemplo de SlideDeck que você quer compartilhar? Conte para nós nos comentários! Além disso, confira a primeira parte desta série, onde mostramos como criar SlideDecks de Fonte Dinâmica.
Sliders com interface de toque são o futuro do web design. Obtenha o SlideDeck Agora. Use o código de cupom: WPB-SD2 para obter 20% de desconto.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.