Elemento Carrossel

Sobre o elemento carrossel

O processo de Elemento carrossel refere-se a um recurso ou widget específico que permite aos usuários criar e exibir um carrossel de produtos, imagens ou conteúdo promocional em seu site. Aqui estão vários recursos e benefícios principais do elemento Carrossel:

• Mostra do produto: Carrosséis de e-commerce geralmente exibem produtos do estoque de uma loja. Cada slide pode exibir um produto diferente com seu título, imagem, preço e, possivelmente, uma breve descrição.
• Banners promocionais: O elemento Carrossel também pode exibir banners promocionais ou anúncios de vendas, descontos ou novidades.
• Layout personalizável: Os usuários geralmente podem personalizar o layout do carrossel, ajustando aspectos como o número de itens visíveis por slide, os efeitos de transição entre os slides e o estilo geral para combinar com a estética de sua marca.
• Controles de navegação: Isso normalmente inclui controles de navegação, como setas ou pontos, para permitir que os usuários naveguem manualmente pelos slides do carrossel.
• Design Responsivo: Assim como outros elementos do design moderno da web, os elementos de carrossel em criadores de páginas de comércio eletrônico são projetados para serem responsivos, garantindo que sejam exibidos corretamente em vários dispositivos e tamanhos de tela.

Adicione o elemento Carrossel no GemPages v7

Etapa 1: No Painel GemPages, selecione a página onde você deseja adicionar o elemento Carrossel. 

Etapa 2: Procure por Elemento Carrossel, selecione o tipo desejado e arraste-o para a posição preferida na página.

Etapa 3: Drag e solte quaisquer elementos do GemPages (texto, imagem, botão, produto, etc.) para construir seu layout livremente.

Para acessar o painel de configurações do Carrossel, basta clicar no elemento.

A barra lateral esquerda irá então revelar o Configurações e Avançado abas, permitindo que você personalize seu comportamento e aparência.

Configurar a guia Configurações

Itens por slide

Esta configuração controla quantos itens são exibidos em cada slide do carrossel. Você pode escolher entre as opções de layout predefinidas ou definir um número personalizado para atender às suas necessidades de design.

• Layouts predefinidos: Selecione rapidamente de 1 a 5 itens por slide usando as opções de grade disponíveis.
• Valor customizado: Se você deseja exibir mais de 5 itens, Clique no ⚙️ Ícone de configurações e insira o número exato que você preferir. Isso é especialmente útil para carrosséis de produtos que exibem vários itens em uma única exibição.

Ecrã

Esta seção permite que você ajuste como os itens são exibidos em cada slide do carrossel para obter o layout e o espaçamento ideais para seu design.

• Itens máximos: Defina o número máximo de itens que podem aparecer no seu carrossel. Você pode exibir até itens 12 por slide.
• Espaçamento: Controle o espaço entre cada item. Aumentar o espaçamento cria um layout mais arejado, enquanto reduzi-lo ajuda a encaixar mais conteúdo em designs mais compactos.
• Espiada: Ative esta opção para revelar uma pequena parte do slide seguinte ou anterior. Essa indicação visual ajuda a indicar que seu carrossel contém mais itens que os usuários podem explorar.

Gerenciamento de Itens

Esta seção permite que você gerencie seus itens no carrossel, incluindo adicionar/remover slides e reorganizar sua ordem como preferir:

• Ao passar o mouse sobre um item, você pode rebatizar, duplicar o item, ou delete .

• Para adicionar mais itens, clique em “+ Adicionar item” botão.

Espaçamento de itens

Você pode ajustar o espaçamento entre os itens (espaços) no seu carrossel. Por padrão, o espaçamento é definido como 16 px.

Estilo do item

Esta seção permite que você personalize como cada item (ou slide) dentro do seu carrossel.

Essas configurações ajudam a manter a consistência visual e melhorar o apelo geral do seu carrossel.

• padding: Ajuste o espaçamento interno de cada item do carrossel. Você pode definir valores diferentes para a parte superior, inferior, esquerda e direita para garantir que seu conteúdo não toque as bordas do item.

• Fundo: Defina o plano de fundo de cada item do seu carrossel. Você pode:
  • Selecione um cor sólida (usando o seletor de cores ou inserindo um código HEX).
  • Faça upload de um fundo da imagem se você quiser que cada item tenha um design visual único.
• Fronteira: Adicione ou personalize bordas para os itens do seu carrossel. Você pode modificar a largura, a cor e o estilo das bordas (sólido, tracejado, etc.) para combinar com o estilo da sua marca.
• Corner: Arredonde os cantos de cada item do carrossel para criar uma aparência mais suave. O valor (em px) determina o quão curvos os cantos serão.
• Shadow: Aplique uma sombra projetada aos itens do carrossel para destacá-los do fundo. Ajuste o tamanho da sombra, o desfoque, a cor e a opacidade para obter o efeito de profundidade desejado.

Navegação

Nesta seção, você pode personalizar como os usuários se movem pelo seu carrossel usando as setas de navegação.

Posição: Escolha se deseja colocar os botões de navegação dentro ou fora da área do carrossel.

Ícone de navegação: Selecione o estilo do ícone para seus botões de navegação, incluindo:

• Ícone: A opção padrão é a seta, mas você pode alterá-la para outros ícones que se ajustem melhor ao seu design.
• Tamanho do ícone: ajuste o tamanho do ícone usando os botões de mais ou menos ou digite um valor exato para um controle preciso.
• Cor do ícone: escolha uma cor para os ícones de navegação para garantir que eles se destaquem no fundo do carrossel.

Botão de navegação: Modifique os botões de navegação (as setas para a esquerda e para a direita) para combinar com o estilo da sua página e melhorar a visibilidade.

• Tamanho do botão: Clique em Editar para expandir todas as configurações e ajustar a largura e a altura do botão de navegação. Aumentar o tamanho pode melhorar a acessibilidade em dispositivos móveis.
• Plano de fundo: adicione uma cor de fundo ao botão para melhor contraste com o conteúdo do carrossel.
• Borda: Aplique uma borda para destacar o botão. Você pode personalizar seu estilo, largura e cor.
• Canto: Arredonde os cantos dos botões de navegação para obter um estilo mais suave ou em formato de pílula.
• Distância até a borda: controle a distância entre o botão de navegação e a borda do carrossel.
• Mostrar ao passar o mouse: escolha se os botões de navegação ficarão sempre visíveis (Não) ou só aparecerão quando os clientes passarem o mouse sobre o carrossel (Sim).

dots

O processo de dots A seção permite que você personalize os pontos de navegação exibidos na parte inferior do seu carrossel, ajudando os visitantes a identificar qual slide estão visualizando no momento.

• Posição: Escolha onde os pontos aparecem em relação ao carrossel. Você pode colocá-los dentro or lado de fora os slides, dependendo do layout do seu design.
• Cor ativa: Selecione a cor do ponto que representa o atual (visível) deslizar.
• Cor inativa: Escolha uma cor diferente para os pontos que representam escondido slides.
• Tamanho dos pontos: Ajuste o tamanho dos pontos usando os botões mais/menos ou digite um valor exato para precisão de pixels.
• Lacuna até a borda: Defina o espaçamento entre os pontos e a borda do carrossel. Aumentar esse valor pode ajudar a melhorar a visibilidade ou equilibrar o espaçamento entre diferentes tamanhos de tela.

Interação

Personalize a interação no elemento carrossel:

• Autoplay: Ative esta chave para avançar os slides automaticamente. Para funcionalidade ideal, combine a reprodução automática com o recurso Loop. Com ambas as funções habilitadas, os slides progredirão automaticamente e retornarão ao primeiro slide.
• Demora: Defina a duração (em ms) antes de alternar os slides.
• Pausar ao passar o mouse: Pare a reprodução automática quando os usuários passarem o mouse sobre o carrossel.
• Direção do slide: Escolha o movimento de deslizar para a esquerda ou para a direita.
• Loop Infinito: Ative esta opção para permitir que o carrossel repita desde o início após atingir o slide final. 
• Arrastar/deslizar: Habilite esta opção para permitir que os clientes deslizem para a próxima imagem usando o mouse. 
• Velocidade do slide: Editar a velocidade dos slides no carrossel
• Animação: Escolha o efeito de animação, como Aproximação, Afastamento e Aproximação e Afastamento. Você pode visualizar o efeito de animação ao aplicá-lo no elemento carrossel.

Dimensões: 

Personalize a largura e a altura do elemento do carrossel de acordo com sua preferência. Você pode definir o carrossel de largura total seguindo estes passos:

• Conjunto Largura para 100% or Largura total.
• Acesse Configurações > Alinhar e selecione Centralização de or Stretch.

Certifique-se de que a seção ou linha do contêiner do carrossel também esteja definida como largura total na estrutura do layout.

Contexto

Personalize o plano de fundo geral do seu carrossel para combinar com o design da sua loja. Você pode: escolha uma cor sólida/gradiente or carregar uma imagem para usar como plano de fundo do carrossel.

Para mais detalhes sobre a personalização do plano de fundo, consulte Este artigo.

Shape 

Nesta seção, você pode ajustar a aparência geral do seu carrossel personalizando-o fronteira, raio de canto e efeito de sombra. Essas configurações ajudam seu carrossel a se integrar perfeitamente ao layout da sua loja ou a se destacar como uma seção destacada.

• Fronteira: Adicione ou modifique a borda ao redor do carrossel. Você pode definir sua espessura, estilo (sólido, tracejado, pontilhado) e cor para combinar com o estilo da sua marca.
• Corner: Ajusta a raio de canto para tornar as bordas do carrossel arredondadas ou mais nítidas. Por exemplo, valores maiores criam um visual mais suave e moderno.
• Shadow: Aplicar um sombra projetada para dar ao seu carrossel uma sensação de profundidade e separação visual do fundo da página. Você pode ajustar a sombra compensar, borrão e cor para efeitos sutis ou dramáticos.

Consulte Este artigo para obter orientação completa sobre como modificar a forma com configurações de borda, canto e sombra.

Alinhar

Nesta seção, você pode escolher entre três opções: alinhado à esquerda, centralizado, ou alinhado à direita.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em esse neste artigo.

O elemento Carrossel é uma ferramenta versátil para adicionar visuais dinâmicos e interativos à sua loja Shopify. Com o GemPages v7, você tem controle total sobre o estilo, a animação e o layout de cada item, facilitando a criação de vitrines de produtos atraentes ou histórias da marca que engajam os visitantes em todos os dispositivos.

Por exemplo, para adicionar um Efeito de Transição para o seu carrossel, no Configurações avançadas No elemento Carrossel, você pode alternar do padrão. slide transição para um Efeito de esmaecimento Para um visual mais suave e elegante.

Para aplicar, acesse o Avançado guia, localize o Animação seção e selecione Desvanecer a partir do menu suspenso do tipo de transição.

O efeito de desvanecimento funciona perfeitamente com Autoplay e laço, permitindo que cada slide entre e saia de cena automaticamente.

Perguntas frequentes sobre o elemento Carrossel

1. Por que meu carrossel não está sendo exibido em largura total?

Para exibir um carrossel de largura total na sua página, tente o seguinte:

• Verifique se o largura está definido para 100% Configurações > Tamanho.
• Certifique-se de que o carrossel esteja colocado em uma seção ou linha que também abrange toda a largura.
• Conjunto Alinhar = Centralizar ou Esticar in Configurações > Alinhar.
• Evite colocar o carrossel dentro de colunas estreitas ou seções aninhadas.

2. Por que meu carrossel não reproduz automaticamente?

Para definir a reprodução automática do seu carrossel, siga estas etapas:

• Acesse Configurações > Interação e certifique-se Autoplay está ativado.
• Para mantê-lo em loop, ative também Loop Infinito.

3. Posso exibir produtos dinamicamente no Carrossel?

No GemPages, o Carrossel não extrai automaticamente dados de produtos do Shopify como o elemento Lista de Produtos. Portanto,você precisa arrastar manualmente os módulos do produto no carrossel para controle personalizado.

4. Por que as imagens parecem cortadas ou desalinhadas?

Caso suas imagens pareçam cortadas no carrossel:

• Verifique o Proporção da imagem, Acolchoamento, ou Largura do slide configurações.
• Uso Ajustar Imagem em vez de Preencher imagem se manter a proporção da tela for uma prioridade.

5. O GemPages Carousel suporta um efeito de transição de desvanecimento?

Sim. Travas deslizantes portáteis No GemPages v7, o elemento Carrossel inclui um Efeito de esmaecimento para Configurações avançadas > Animação. Habilitar Autoplay e Loop Infinito para transições de desvanecimento contínuo entre os slides.

6. Como faço para alterar o tempo de deslizamento do carrossel?

Acesse Configurações > Interação.

• Adjust Demora para controlar por quanto tempo cada slide permanece visível.
• Adjust Velocidade do slide para controlar a velocidade da transição de slides.

7. Posso arrastar e soltar elementos em um carrossel?

8. Por que as imagens do meu carrossel não estão aparecendo?

Se as imagens do seu carrossel não estiverem sendo exibidas, verifique o seguinte:

• Certifique-se de ter adicionado um elemento de imagem dentro de cada item do carrossel.
• Verifique se a imagem foi carregada corretamente e se não está corrompida ou ausente.
• Verifique as configurações de visibilidade para garantir que a imagem não esteja oculta em dispositivos específicos.
• Verifique se o item do carrossel não está vazio ou foi excluído acidentalmente.
• Clique Economize e Publicar Para aplicar as alterações mais recentes.

Se o problema persistir, tente reenviar a imagem ou atualizar o editor.

9. Como faço para substituir um vídeo no carrossel?

Para substituir um vídeo no carrossel, abra o editor do GemPages e selecione o item do carrossel que contém o vídeo. Clique no elemento Vídeo e, em seguida, carregue um novo vídeo ou atualize o URL do vídeo no painel de configurações.