fbpx

SÓ HOJE 10% DE DESCONTO

USE O CUPOM: SABADO.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como criar um slider dinâmico no WordPress

Você está em:

Como criar um slider dinâmico no WordPress
Como criar um slider dinâmico no WordPress

Se você estiver compilando uma lista dos recursos do site que farão com que seu site WordPress se destaque, um controle deslizante estará no topo da lista. Mas se você realmente deseja um site personalizado impressionante, precisará de um controle deslizante com recursos de conteúdo dinâmico.

O que é conteúdo dinâmico?

Conteúdo dinâmico é o conteúdo que muda em uma página da web dependendo dos dados do site ou do comportamento do usuário.

O oposto do conteúdo dinâmico é o conteúdo estático. Com conteúdo estático, essa página da web permanecerá exatamente a mesma, independentemente do usuário ou do tempo.

Um bom exemplo de onde você costuma encontrar conteúdo estático é nas páginas de destino que geralmente exibem exatamente o mesmo título, descrição e call to action, independentemente de quem clica nele.

Abaixo você pode ver uma página de destino para baixar o WordPress. Independentemente de como você chega a essa página, você verá exatamente as mesmas informações porque é estática.

Página estática do WordPress

No entanto, há momentos em que o conteúdo estático não funcionará. Por exemplo, se você administra um blog, provavelmente deseja que a postagem mais recente apareça no topo. Se o conteúdo fosse estático, seu blog sempre exibiria a mesma postagem no topo. No entanto, se for dinâmico, cada vez que você publicar uma nova postagem, o pedido será alterado automaticamente (ou dinamicamente).

Abaixo está o blog WPExplorer. Cada vez que o WPExplorer publica uma nova postagem no blog, ela aparece automaticamente como a postagem mais recente no canto superior esquerdo.

Página dinâmica do WordPress

Existem outros exemplos de quando você pode precisar de conteúdo dinâmico. Se você administra um site de viagens que vende pacotes turísticos, você desejará um tipo de postagem personalizado para seus passeios, com cada passeio exibido em seu próprio post.

Agora você pode projetar individualmente cada posto de turismo, mas isso levaria tempo e esforço. E o que acontece se você quiser mudar o layout do tour? Você teria que editar individualmente cada tour para que eles tenham a mesma estrutura. Novamente, você estaria criando trabalho desnecessário para si mesmo.

Tipos de postagem personalizados dinâmicos

A melhor solução é criar um modelo para exibir seus posts personalizados . Neste modelo, você pode adicionar conteúdo dinâmico ao título do post, imagens, preço e muito mais. Isso significa que agora, quando você clicar em cada postagem de tour diferente, o conteúdo mudará. Por exemplo, um post de turismo sobre Semuc Champey conterá conteúdo sobre Semuc Champey, enquanto um post de turismo sobre O Vale dos Reis… bem, você entendeu.

Que tipo de controles deslizantes dinâmicos existem?

Existem dois tipos de controles deslizantes dinâmicos que aprimorarão seu site personalizado.

1. Controle deslizante de imagem dinâmica

Controle deslizante de imagem dinâmica

Um controle deslizante de imagem dinâmica é um controle deslizante de imagem que você pode adicionar uma vez ao seu modelo e exibirá imagens diferentes do banco de dados, dependendo de qual postagem você clicar.

Por exemplo, em um site de academia, você pode ter um tipo de postagem personalizado para suas academias que conterá várias postagens de academias. Em cada postagem da academia, você desejará exibir um controle deslizante de imagem com imagens dessa academia. Portanto, as imagens serão diferentes para cada uma das postagens de academias em que você clicar.

A maneira mais fácil de fazer isso é criando um controle deslizante de imagem dinâmico. Enquanto um controle deslizante de imagem estática exibiria as mesmas imagens se você clicou em “Downtown Fitness Center” ou “Balance Gym”, um controle deslizante de imagem dinâmica mostra as imagens que você adicionou a cada uma dessas postagens no back-end.

2. Controle deslizante de conteúdo dinâmico de postagem

Controle deslizante de conteúdo de postagem dinâmica

Às vezes, os controles deslizantes contêm mais do que apenas imagens. De fato, muitos dos controles deslizantes que você pode encontrar nas páginas iniciais conterão mais informações relacionadas às imagens.

Por exemplo, em um site de academia, você pode criar um controle deslizante com três imagens, cada uma exibindo uma academia diferente. O problema é que se você apenas exibir as imagens, como o usuário saberia como se chama a academia, seu preço de adesão e as instalações disponíveis? A solução mais fácil é adicionar um controle deslizante com conteúdo de postagem dinâmico com base em campos personalizados.

Você deve estar se perguntando por que esse conteúdo precisa ser dinâmico? Pense em cada slide em nosso controle deslizante como uma página. À medida que você vira a “página” de cada controle deslizante, deseja que o conteúdo mude para exibir as informações sobre uma academia diferente.

Claro, se esse conteúdo fosse estático, ele não mudaria e você simplesmente exibiria a mesma imagem de fundo, título do post, chamada para ação etc. Mas com conteúdo dinâmico, você garantirá que cada slide exiba as informações de cada academia.

Quais são os melhores plugins para criar sliders dinâmicos?

Existem vários plugins de controle deslizante excelentes que garantem que você possa incluir os dois tipos de controles deslizantes dinâmicos, independentemente da sua capacidade de codificação.

1. Conjunto de ferramentas

Conjunto de ferramentas

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

O primeiro plugin é um dos recursos mais versáteis para construir sites personalizados, o Toolset.

A Toolset criou o Toolset Blocks , uma extensão do Gutenberg , especializada em tornar mais fácil para os usuários do WordPress de todos os níveis de experiência exibir conteúdo personalizado, como controles deslizantes, mas também campos personalizados, modelos de design, arquivos e muito mais sem codificação.

Em vez de PHP, você pode usar o conjunto exclusivo de blocos do Toolset que vem pronto para conteúdo dinâmico. Uma das grandes vantagens do Toolset é sua funcionalidade. Além dos controles deslizantes, você pode criar vários outros recursos importantes, como pesquisa, formulários front-end e mapas.

2. Revolução deslizante

Revolução deslizante

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

Slider Revolution é um excelente plugin se você quiser o maior número possível de opções para personalizar seus controles deslizantes. Uma dessas opções são controles deslizantes dinâmicos.

No entanto, embora você possa criar controles deslizantes dinâmicos, não pode criar os campos personalizados dos quais deseja desenhar o conteúdo. Você precisará escolher um tema que inclua campos personalizados integrados ou codificá-los você mesmo.

O Slider Revolution oferece mais de 200 modelos para que você possa criar instantaneamente sites contendo sliders.

3. Controle deslizante inteligente 3

SmartSlider3

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

O Smart Slider 3 permite que você crie sliders dinâmicos com conteúdo gerado a partir de várias fontes, incluindo postagens e páginas do WordPress, produtos WooCommerce e canais de mídia social, incluindo o Facebook.

Com a versão pro do Smart Slider 3, você pode importar seus exemplos de sliders predefinidos e também pode extrair de 20 fontes no WordPress.

Como criar um controle deslizante de imagem dinâmico

Agora que você tem uma ideia do que os sliders dinâmicos podem adicionar ao seu site e os melhores plugins, mostrarei como criá-los. Para este exemplo, usarei o Toolset e seus blocos Gutenberg.

Para um tutorial em vídeo passo a passo detalhado, você pode conferir o guia do Toolset para controles deslizantes dinâmicos para modelos .

Usarei o site de referência de academias gratuitas do Toolset e adicionarei meu controle deslizante de imagem dinâmica ao seu tipo de postagem de academias. Cada uma das minhas academias conterá um controle deslizante de imagem dinâmica exibindo suas imagens.

1. Crie um tipo de postagem personalizado com campos personalizados

Antes de adicionar o slider em si, precisamos adicionar as informações que exibiremos dentro do slider e também construir a estrutura na qual ele aparecerá.

Precisamos criar duas partes de conteúdo personalizado – o tipo de postagem personalizado e os campos personalizados.

Abaixo, você pode ver como criar um tipo de postagem personalizado com o Toolset simplesmente adicionando seu nome.

Tipo de postagem personalizado com campos personalizados

Depois de ter seu tipo de postagem na academia, você precisa adicionar o conteúdo. Para isso você precisa configurar a estrutura de cada post criando campos personalizados.

Para um controle deslizante de imagem dinâmico, você precisará de um campo personalizado para imagens. Obviamente, o controle deslizante de imagem conterá mais de uma imagem, mas os campos personalizados geralmente armazenam apenas um dado. Então, como você adiciona mais?

Com o Toolset, você pode criar campos personalizados repetidos que armazenam vários dados. Nesse caso, poderemos armazenar várias imagens e exibi-las em nosso controle deslizante de imagem dinâmica.

Para criar um campo personalizado repetindo tudo o que você precisa fazer é selecionar a caixa relevante ao criar o campo. Você pode ver abaixo como eu fiz minha “Galeria de Fotos do Ginásio” repetindo.

campo personalizado repetindo

Como você pode ver, já tenho vários campos personalizados para minha postagem de academias, incluindo uma classificação, endereço e horário de funcionamento.

Campos personalizados de ginásio

2. Adicionar mídia às postagens

Agora que temos nosso campo personalizado para nosso controle deslizante, precisamos adicionar a mídia que queremos exibir na forma de imagens. Para fazer isso, vamos a cada uma de nossas postagens e clicamos para adicionar as imagens, assim como você faria para uma imagem em destaque.

Basta clicar no botão “+” para fazer upload de imagens.

Adicionar mídia às postagens

Essas imagens agora servirão como “fonte” para o controle deslizante dinâmico. O que significa que cada postagem da academia exibirá as imagens adicionadas à sua “Galeria de fotos da academia” no front-end.

3. Adicione um controle deslizante

Com seu campo personalizado pronto e conteúdo adicionado, agora você pode usá-los para criar um controle deslizante dinâmico. Antes de criar um controle deslizante dinâmico, você já deve ter criado um modelo para suas postagens.

Para começar, insiro o bloco Image Slider do Toolset no template. Como já carregamos nossas imagens na Galeria de Fotos do Ginásio, podemos selecionar Fontes Dinâmicas e escolher o campo personalizado do qual queremos extrair as imagens.

Adicionar controle deslizante e escolher fonte dinâmica

Seu controle deslizante exibirá as imagens que você enviar para o campo personalizado.

Controle deslizante de origem dinâmica

Você pode verificar se o controle deslizante está realmente exibindo conteúdo dinâmico alternando entre as postagens usando o menu suspenso na parte superior do editor. Depois de selecionar uma nova postagem, ele carregará o conteúdo dessa postagem – incluindo o controle deslizante de imagem dinâmica.

Enquanto o exemplo acima usa o Toolset, a maioria dos sliders do WordPress com uma opção de conteúdo dinâmico funciona da mesma maneira. Na maioria dos casos, você precisará criar seu conteúdo primeiro e, em seguida, selecionar uma fonte “dinâmica” ao adicionar seu controle deslizante a uma postagem, página ou modelo.

Como criar um slider com conteúdo dinâmico de postagem

Além de apenas imagens, você também pode adicionar vários campos ao controle deslizante (incluindo campos personalizados, como preço, classificação, botão, trecho etc). Toolset também oferece um vídeo passo a passo completo para criar sliders personalizados .

1. Crie um tipo de postagem personalizado com campos personalizados

Assim como com um controle deslizante de imagem dinâmica, você precisa primeiro criar um tipo de postagem personalizado com campos personalizados. Vou reutilizar o tipo de post de academias.

2. Adicione fontes dinâmicas ao controle deslizante

No entanto, ao contrário do controle deslizante de imagem dinâmica, você usará o bloco Views do Toolset. Isso permite carregar postagens do banco de dados e exibi-las como listas – inclusive como um controle deslizante.

Bloco de visualizações do conjunto de ferramentas

Depois de inserir o bloco View, use o assistente para definir os parâmetros do seu controle deslizante. Por exemplo, abaixo eu adicionei paginação para que o usuário possa alternar entre os slides e deixei o estilo como não formatado.

Assistente de bloco de visualizações do conjunto de ferramentas

Você também precisa selecionar o tipo de postagem que será a fonte do seu conteúdo.

Você acabou de criar sua Visualização. Há várias edições que você pode fazer na barra lateral direita do seu controle deslizante. Você primeiro precisa selecionar o bloco Exibir na opção de navegação do bloco no canto superior esquerdo.

Blocos de conteúdo dinâmico do controle deslizante

Com a estrutura definida para o controle deslizante, você pode inserir um bloco de contêiner para adicionar conteúdo. Por exemplo, você pode adicionar um plano de fundo, imagens, texto, preços, avaliações – praticamente qualquer coisa para a qual você adicionou um campo personalizado. Ao inserir elementos, basta selecionar Fontes Dinâmicas e escolher seu campo personalizado de acordo, depois personalizar para atender às suas necessidades (alterando cores, fontes, posicionamento etc.).

3. Use seu controle deslizante

Agora podemos salvar o controle deslizante e verificá-lo no front-end. Com base no que você adicionou, você verá um controle deslizante de conteúdo dinâmico impressionante.

Controle deslizante de conteúdo dinâmico

Assim como os controles deslizantes de imagem dinâmicos, quando se trata de controles deslizantes de conteúdo dinâmico, a maioria dos controles deslizantes do WordPress inclui opções semelhantes. O Toolset oferece uma caixa de seleção de fonte de conteúdo dinâmico, o Slider Revolution inclui módulos de conteúdo dinâmico integrados, etc. Na maioria das vezes, você precisará inserir o módulo de conteúdo de sua escolha para adicionar conteúdo dinâmico aos seus controles deslizantes.

Comece a construir seus sliders dinâmicos hoje!

Agora que você viu como é fácil para os usuários do WordPress de todas as experiências criar controles deslizantes, é hora de tentar. Escolha o seu plugin deslizante e mãos à obra!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$300,00 para liberar o Cupom Secreto
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(