Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como criar um tour de produto impressionante com o SlideDeck 2 no WordPress

Atualmente, os controles deslizantes de conteúdo são comuns no WordPress, mas normalmente só são usados em um conjunto muito limitado de circunstâncias – normalmente, eles estão localizados em páginas iniciais, para mostrar publicações recentes ou galerias de imagens. Uma nova tendência está se desenvolvendo, na qual os sites do WordPress estão usando o potencial e a flexibilidade dos controles deslizantes de conteúdo para contar histórias interessantes que motivam os visitantes a agir, ou seja, na forma de tours de produtos.

O uso de um controle deslizante de conteúdo para o tour do produto no WordPress pode ajudá-lo a vender melhor os produtos, orientando os usuários pelos pontos principais em seu próprio ritmo – isso é melhor do que simplesmente usar um vídeo, pois eles podem pular para trás/para frente para pontos específicos e definidos, em vez de ter que adivinhar um código de tempo. Além disso, o uso de um controle deslizante 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 o usuário a assistir passivamente a um vídeo.

Até pouco tempo atrás, era necessário saber codificar para criar qualquer coisa, exceto os tours de produtos com controle deslizante de conteúdo mais simples, mas estamos usando um incrível plug-in de controle deslizante chamado SlideDeck 2, que muda tudo isso.

Esse poderoso plug-in torna super simples a criação de controles deslizantes incríveis em minutos, sem a necessidade de uma única linha de código. Abordamos um dos outros recursos robustos do SlideDeck 2 em um post anterior, mas a atualização mais recente permite que você crie controles deslizantes de conteúdo personalizado e personalize o conteúdo de cada slide para criar apresentações atraentes que motivem seus visitantes a agir. Elaboramos este guia rápido para mostrar a você como criar um tour de produto atraente para seu site WordPress usando o SlideDeck 2.

Compra e instalação do plug-in

Primeiro, o mais importante: Os slides de conteúdo personalizado são um recurso premium do SlideDeck 2, portanto, você terá que comprá-lo para usá-lo em seu site. Recomendamos que você acesse o site do SlideDeck e adquira o plug-in – pelo poder que ele contém, é bem barato e você pode facilmente fazer upgrade para obter recursos melhores e usá-lo em mais sites.

Para desbloquear o recurso Custom Content, você precisará adquirir o pacote Professional ou Developer e, em seguida, instalar o plug-in e um “Addon” que desbloqueia os recursos adicionais.

Para instalar o plug-in, você pode seguir nosso prático Guia passo a passo para instalar um plug-in do WordPress.

Terminologia

Antes de começarmos, há alguns termos que devemos explicar:

  • SlideDecks de conteúdo personalizado – Os SlideDecks de conteúdo personalizado permitem que você crie seus controles deslizantes um slide de cada vez. Eles são mais adequados para contar histórias visuais ou se você tiver uma ação específica que deseja que os usuários realizem – neste caso, um tour pelo produto. Se você deseja criar controles deslizantes usando fontes de conteúdo externas, como o Flickr ou o YouTube, criamos um guia de instruções separado especificamente para SlideDecks de fontes dinâmicas.
    • Tipo de slide – Há quatro tipos diferentes de slides, cada um projetado para acomodar um tipo específico de conteúdo: imagem, vídeo, texto e HTML.
    • Lente – As lentes são como temas para o seu controle deslizante de conteúdo. Elas controlam a aparência e o comportamento do controle deslizante, bem como a forma como o conteúdo é apresentado na página. Assim como acontece com os temas do WordPress, a aplicação de uma lente diferente ao seu conteúdo leva apenas alguns segundos e pode gerar uma aparência significativamente diferente para o seu controle deslizante.

    Ok, agora que o jargão está fora do caminho, vá em frente e ative o SlideDeck 2, e vamos começar!

    Como criar um SlideDeck de conteúdo personalizado

    Vamos mostrar a você como criar um controle deslizante de conteúdo de tour de produto que combina quatro tipos diferentes de conteúdo, usando o recurso Conteúdo personalizado do SlideDeck. Comece clicando em “Manage” (Gerenciar) para acessar o painel principal. Essa tela permite que você crie novos SlideDecks e classifique os SlideDecks existentes.

    SlideDeck Manage Screen for Custom SlideDeck

    Na seção Custom Content (Conteúdo personalizado), clique no botão azul “Create SlideDeck” (Criar SlideDeck). Você será levado à tela do Custom Content Editor para criar seu primeiro slide. Quando chegar ao Custom Content Editor, comece nomeando seu SlideDeck. Você perceberá que seu primeiro slide foi criado e que poderá escolher entre três ou quatro tipos de slides diferentes, dependendo do pacote do SlideDeck 2 que estiver usando – os usuários do pacote Professional terão acesso aos tipos de slides de imagem, vídeo e texto; os usuários do pacote Developer poderão escolher o tipo de slide HTML, além desses três.

    SlideDeck Custom Slide Type

    Abaixo desse menu suspenso está um dos recursos mais exclusivos do SlideDeck 2 – a janela de visualização ao vivo (esse é um dos motivos pelos quais o SlideDeck 2 é um plugin recomendado para WordPress no WPBeginner’s Blueprint). Aqui, você vê a atualização do seu controle deslizante em tempo real à medida que o edita.

    Começando com um slide de imagem

    Vamos começar com um slide de imagem – algo que dê aos visitantes uma visão geral rápida e visualmente atraente do passeio que estão prestes a fazer. Clique no tipo de slide “Image Slide” (Slide de imagem). O menu suspenso será atualizado para mostrar todas as opções pertinentes à criação de um slide de imagem:

    SlideDeck Image Slide

    Carregar uma imagem | Especificar um URL – Escolha se deseja carregar a imagem na Galeria de Mídia do WordPress ou simplesmente cole um URL, se ela estiver hospedada em outro local.
    Legenda | Corpo do texto | Nenhum – Informe ao SlideDeck se você deseja que uma legenda de texto seja sobreposta à imagem ou que um breve corpo de texto a acompanhe. Como alternativa, você pode simplesmente mostrar a imagem inteira, sem nenhum texto associado.
    Link do slide – Especifique um URL a ser visitado, se o usuário clicar em qualquer lugar do slide.
    Título – Dê ao slide um título a ser mostrado nas áreas de legenda ou de corpo de texto.
    Descrição – Digite a cópia da descrição do slide. Você pode inserir rich-text aqui!
    Caption Position (Posição da legenda) – Determina a posição da sobreposição de texto no slide. As legendas podem ficar na parte superior/inferior, e o corpo do texto pode ficar à esquerda/direita.

    Depois de configurar o slide da maneira que desejar, basta clicar no botão “Apply” (Aplicar) e a área Live Preview (Visualização ao vivo) será atualizada para mostrar o primeiro slide. Em nosso exemplo, criamos nosso slide especificando um URL, com uma legenda na parte inferior e nenhum link para o slide.

    SlideDeck Image Slidetype Example

    Assim, criamos nosso primeiro slide de conteúdo personalizado – fácil, certo? Agora, adicionaremos um segundo para adicionar um vídeo mostrando a demonstração do nosso produto.

    Criação do 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 é carregar o vídeo de demonstração do nosso produto em um desses serviços e, em seguida, colar o URL da página do vídeo e clicar em “Atualizar”.

    SlideDeck Video Slide Type

    Assim como no tipo de slide Imagem, você pode optar por adicionar um título e uma breve legenda ou parágrafo de texto para dar aos visitantes uma ideia do que eles verão no vídeo. Por padrão, o SlideDeck 2 extrairá o conteúdo da legenda que você tem na 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 dê um clique rápido no controle deslizante – agora você poderá alternar entre os slides de imagem e de vídeo.

    Criação de 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. Em casos como esse, podemos usar o tipo de slide de texto.

    SlideDeck Text Slide Type

    Esse é um tipo de slide muito simples, com apenas algumas opções a serem consideradas:

    Layout – O layout básico simplesmente coloca o título na parte superior do slide, com o texto fluindo por baixo. Multi-column (Várias colunas) oferece um formato mais parecido com o de um jornal, envolvendo automaticamente o texto em duas colunas. O Block Quote permite que você destaque um pequeno trecho de texto com tipografia grande e em negrito. Como antes, clique em Aplicar para adicionar o slide ao seu SlideDeck.

    Reorganização de slides

    A essa altura, você deve estar pensando que gostaria de começar com o slide de vídeo em vez da imagem, para que os usuários interajam e se envolvam com o tour imediatamente. 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!

    SlideDeck Drag and Drop Slides

    Mais detalhes – usando o tipo de slide HTML

    O tipo de slide HTML é uma poderosa adição ao pacote Developer do SlideDeck 2, que permite que você insira seu próprio código HTML em um slide. Ele é perfeito para layouts mais complexos do seu conteúdo ou para adicionar interações mais poderosas ao seu controle deslizante de conteúdo. Por exemplo, você pode incorporar um formulário de inscrição, para que os clientes possam optar por receber um boletim informativo por e-mail no final do tour do produto – uma poderosa chamada para ação, se é que existe uma!

    Selecione o tipo de slide HTML para exibir o editor HTML no menu suspenso.

    SlideDeck HTML Slide

    No campo Inserir HTML, você pode colar seu código personalizado. Você notará que ele codifica automaticamente por cores as diferentes tags para ajudá-lo a se certificar de que ele está 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 serão aplicadas a todos os slides do SlideDeck
    • Como a Visualização ao vivo do SlideDeck não é capaz de prever como os estilos do seu tema podem interagir com o controle deslizante de conteúdo, no caso de estilos complexos, você terá uma visualização mais precisa se o visualizar na página em que pretende publicar o SlideDeck.

    Com o código no lugar, clique em Aplicar e o slide será adicionado à rotação.

    Configuração da lente

    Agora você criou seu primeiro SlideDeck de conteúdo personalizado! Reserve alguns minutos para clicar nos slides na visualização ao vivo e se deliciar com o brilho de um trabalho bem feito.

    Agora, é hora de fazer com que ele tenha uma aparência perfeita em seu site, configurando suas lentes. O SlideDeck contém uma grande 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? Verifique. Tema atraente escolhido e personalizado? Sim. Parece que você está pronto para publicar o tour do seu novo produto e converter seus visitantes em clientes!

    O SlideDeck oferece três maneiras de incorporar seus controles deslizantes ao site do WordPress: inserindo-os em uma página existente ou no conteúdo de uma postagem, criando uma nova página ou postagem com o controle deslizante incorporado e, por fim, inserindo-os no modelo de página, que provavelmente é a melhor opção se você quiser adicionar o tour pelo produto à sua página inicial.

    Concluindo

    Embora os controles deslizantes de conteúdo geralmente sejam usados apenas para galerias de imagens ou postagens em destaque, o SlideDeck 2 oferece muita flexibilidade para explorar o potencial dos controles deslizantes de conteúdo e criar experiências atraentes que mantêm seus visitantes envolvidos e retornando. Nós da WPBeginner recomendamos fortemente que você dê uma olhada! Um exemplo ao vivo de como estamos usando um SlideDeck personalizado pode ser visto em nossa página Free WordPress Blog Setup.

    Tem um exemplo de SlideDeck que gostaria de compartilhar? Conte-nos nos comentários! Além disso, confira a primeira parte desta série, na qual mostramos como criar SlideDecks de origem dinâmica.

    Os controles deslizantes 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.

    Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

    Avatar

    Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

    O kit de ferramentas definitivo WordPress

    Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

    Reader Interactions

    Comentários

    1. Parabéns, você tem a oportunidade de ser o primeiro comentarista deste artigo.
      Tem alguma dúvida ou sugestão? Deixe um comentário para iniciar a discussão.

    Deixe uma resposta

    Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.