Como adicionar controle deslizante de produto no WooCommerce usando Elementor (7 layouts)

Publicados: 2024-10-09

Os controles deslizantes de produtos são uma excelente maneira de mostrar uma variedade de produtos de uma maneira visualmente atraente e organizada, especialmente ao trabalhar com WooCommerce no WordPress.

Ao utilizar o Elementor, um construtor de páginas popular, junto com o complemento Elemento, você pode adicionar facilmente controles deslizantes de produtos que elevam a experiência de compra.

Neste guia, exploraremos como adicionar um controle deslizante de produto com sete opções de layout diferentes usando o complemento Elementor.

Por que devemos adicionar um controle deslizante de produto no WooCommerce?

Índice

Alternar
product slider 5941

Antes de prosseguirmos, vamos entender as vantagens do controle deslizante de produto:

Os controles deslizantes melhoram o apelo visual e dão à sua loja uma aparência profissional. Os visitantes podem navegar rapidamente por vários produtos sem percorrer listas extensas. E destaque produtos populares, novos ou com desconto para aumentar as vendas.

Explore diversos layouts para controles deslizantes de produtos

Elemento Addon oferece sete layouts versáteis de controle deslizante de produto para combinar com a estética do design da sua loja. Aqui está uma olhada em cada um:

1. Controle deslizante avançado

advance Slider

O layout Advanced Slider é perfeito para exibir imagens de produtos de alta qualidade com animações adicionais. Você pode destacar seus principais produtos com recursos visuais atraentes e sobreposições de texto.

Características :

  • Oferece transições suaves
  • Texto personalizável e
  • Os botões guiarão os usuários diretamente às páginas dos produtos.

Uso : Ideal para produtos em destaque ou novas coleções.

Demonstração ao vivo: explore o controle deslizante avançado

2. Slide de produto avançado

advance product slide

O Slide de Produto Avançado é um layout simples e eficaz que permite exibir seus produtos em um controle deslizante de rolagem horizontal. Você pode adicionar imagens de produtos, títulos, preços e até emblemas de venda.

Características

  • Rolagem horizontal
  • Velocidade personalizável
  • Exibição dinâmica de informações do produto.

Uso :

  • Perfeito para best-sellers ou ofertas por tempo limitado.

Demonstração ao vivo: explore o slide avançado do produto

3. Controle deslizante de categoria de produto

product category 1

O controle deslizante de categoria de produto permite apresentar categorias de produtos em vez de produtos individuais.

Esse layout funciona excepcionalmente bem para lojas com diversas linhas de produtos, ajudando os usuários a navegar pelas categorias sem esforço.

Características :

  • Imagens de categoria,
  • Títulos e suporte para descrição.

Uso :

  • Ótimo para lojas com várias categorias de produtos.

Demonstração ao vivo: explore o controle deslizante de categoria de produto

4. Controle deslizante de produto

Product slider 2

O clássico controle deslizante de produtos oferece uma maneira simples, mas eficaz de exibir vários produtos em formato de controle deslizante horizontal.

Esse layout é altamente personalizável, permitindo ajustar tudo, desde o número de produtos visíveis até a aparência do controle deslizante.

Características :

  • Exibição de vários produtos
  • Colunas personalizáveis
  • Efeitos de transição.

Uso :

  • Adequado para promover coleções e novidades.

Demonstração ao vivo: explore o controle deslizante do produto

5. Lista deslizante de produtos

Product slider list

O layout Lista de controles deslizantes de produtos exibe seus produtos em formato de lista dentro de um controle deslizante. Esta opção é ótima para usuários que preferem ver informações mais detalhadas sobre cada produto, mantendo uma interface deslizante.

Características :

  • Visualização de lista com detalhes do produto
  • Transições suaves de controle deslizante.

Uso :

  • Ideal para lojas com descrições e especificações detalhadas de produtos.

Demonstração ao vivo: explore a lista do controle deslizante de produtos

6. Lista vertical de produtos

verticle product list

A lista vertical de produtos adiciona um toque único à exibição do seu produto. Em vez de um controle deslizante horizontal tradicional, esse layout apresenta seus produtos em formato de rolagem vertical, tornando-o perfeito para barras laterais ou seções estreitas.

Características :

  • Rolagem vertical
  • Elementos de lista personalizáveis.

Uso :

  • É mais adequado para widgets laterais ou espaços estreitos na página inicial da sua loja.

Demonstração ao vivo: explore a lista vertical de produtos

7. Controle deslizante de produto de grade

grid product

O Grid Product Slider é perfeito para exibir produtos em um layout de grade. Este design oferece uma apresentação mais estruturada e uniforme, permitindo que vários produtos sejam exibidos ao mesmo tempo, sem rolagem.

Características :

  • Layout de grade com colunas ajustáveis
  • navegação fácil
  • Exibição dinâmica de informações do produto.

Uso :

  • Excelente para lojas com muitos produtos que precisam ser expostos simultaneamente.

Demonstração ao vivo: Explore o controle deslizante do produto Grid

Como adicionar um controle deslizante de produto no WooCommerce usando o complemento Elementor.

Para adicionar um controle deslizante de produto usando um desses layouts, siga estas etapas:

  • Instale e ative os plug-ins necessários : certifique-se de ter Elementor, WooCommerce e o complemento Elemento instalados e ativados.
  • Editar página com Elementor : Navegue até a página onde deseja adicionar o controle deslizante de produtos e clique em “Editar com Elementor”.
  • Adicionar widget deslizante de produto : No editor Elementor, procure o widget deslizante de produtos do complemento Elemento (por exemplo, controle deslizante avançado, controle deslizante de produto em grade, etc.) e arraste-o para a seção desejada na página.
  • Personalize o controle deslizante : escolha seu layout preferido, selecione os produtos ou categorias a serem exibidos e ajuste configurações como velocidade de transição, colunas de grade e elementos de design.
  • Visualizar e publicar : depois de personalizar o controle deslizante de acordo com sua preferência, visualize suas alterações para garantir que tudo pareça perfeito e publique a página.

Consulte este vídeo abaixo para obter assistência com a ativação do complemento Elemento.

Você pode encontrar os complementos relevantes aqui.

Perguntas frequentes

P: Posso personalizar o design do controle deslizante do produto?

Resposta: Sim! Elementor permite ampla personalização, incluindo ajuste de configurações de layout, tipografia, cores e efeitos de foco para combinar com a marca do seu site.

P: É possível exibir categorias específicas de produtos no controle deslizante?

Resposta: Sim, muitos widgets de controle deslizante de produto permitem filtrar produtos por categorias, tags ou atributos como parte das configurações do controle deslizante.

P: Posso adicionar animações ao controle deslizante do produto?

Resposta: Sim, o Elementor oferece suporte a várias opções de animação que podem ser aplicadas aos controles deslizantes do produto para uma experiência do usuário mais envolvente.

Conclusão

Com o complemento Elemento para Elementor, crie facilmente controles deslizantes de produtos impressionantes para sua loja WooCommerce.

Selecione entre uma variedade de controles deslizantes de produtos com diversos layouts e opções de personalização para combinar com sua marca.

Eleve a experiência de compra do seu cliente com esses displays envolventes.

Se você achar este artigo útil, compartilhe-o com seus amigos. Se você tiver alguma dúvida sobre isso, não hesite em comentar abaixo. Nós o ajudaremos a resolver seu problema. Obrigado por ler este blog.

Esperamos que este artigo ajude você a encontrar o melhor controle deslizante de produto para exibir seus produtos.

Inscreva-se em nosso canal no YouTube , também carregamos ótimos conteúdos lá e também siga-nos no Facebook e Twitter

Descubra mais artigos:

  • 6 melhores complementos Elementor para sites WooCommerce
  • Como criar páginas WooCommerce: página de carrinho, página de loja, página de checkout e página de minha conta
  • Complementos Elemento para Elementor para aprimorar sua experiência de design de site

Tags: controle deslizante de produto, controle deslizante woo, WooCommerce, WordPress