Centro de Apoio

Componentes de temas Jumpseller

Definições gerais

O que é um Componente?

Os Componentes são os blocos fundamentais dentro da estrutura de um tema. Podem incluir headers, footers, vídeos, banners, sliders, entre outros elementos e secções usadas para construir e desenhar as páginas de um site. Os componentes podem ser adicionados, editados e eliminados no painel de Componentes do Editor Visual e podem ser reutilizados em diferentes modelos e layouts para manter a consistência tanto no design como na funcionalidade.

Usando Componentes, os designers de sites podem criar layouts e funcionalidades complexas de forma eficiente, com pouco ou nenhum conhecimento de código, já que os componentes individuais podem ser facilmente manipulados e reorganizados. Isto também permite uma manutenção mais simples do site, pois as alterações num componente serão refletidas em todos os modelos onde esse componente é usado.

Podes ajustar facilmente os componentes com a ajuda do Assistente do Editor de Temas, que te permite editar definições, duplicar, ocultar, eliminar e reordenar componentes diretamente na pré-visualização em tempo real.

Também podes clicar no botão “Adicionar componente” para o adicionar no local e posição que desejares.

Cada componente tem as suas próprias definições gerais, e alguns deles têm o que chamamos de Subcomponentes, que permitem construir um segundo nível de conteúdo que também pode ser configurado e personalizado individualmente.

Todos os layouts contêm 2 componentes obrigatórios que não podem ser removidos nem ocultados: Cabeçalho e Rodapé. Estes são mostrados no início e no final de cada layout, respetivamente, e são explicados em detalhe mais abaixo nesta página.

O que é um Subcomponente?

Um Subcomponente é um item que pode ser adicionado dentro de um Componente. Por exemplo, o Subcomponente de um Slider é um Slide, enquanto o subcomponente de uma Galeria de logótipos é um Logótipo, e assim sucessivamente nos temas da Jumpseller.

Todos têm opções individuais para personalização, e podes adicionar quantos quiseres, reordenar, ocultar ou eliminar. Quando duplicas ou reutilizas um componente, os seus subcomponentes serão duplicados também.

Para perceberes melhor como geri-los, consulta a seguinte lista:

  • Alguns Componentes terão um ícone de seta à esquerda do nome. Isso significa que têm ou podem ter subcomponentes dentro.
  • Ao passar o cursor, a seta rodará, e ao clicar nela abrirá a lista de subcomponentes, permitindo-te vê-los todos.
  • Podes clicar novamente na seta para fechá-la.
  • Verás também um botão que te permite adicionar subcomponentes, como por exemplo “Adicionar novo Slide”.

Dentro de cada subcomponente, ao passar o cursor sobre o nome, aparecerão 3 opções do lado direito que te permitem realizar as seguintes ações:

Duplicar

Permite duplicar o subcomponente e criar um novo com o mesmo conteúdo e informação.

Eliminar

Permite remover o subcomponente da lista.

Nota: As alterações não serão aplicadas na loja até que guardes. Por exemplo, se eliminares um subcomponente por engano, podes clicar no botão Desfazer disponível no canto superior direito do Editor Visual para o restaurar.

Ocultar

Permite ocultar o subcomponente na loja sem necessidade de o eliminar.

Modelos de Tema

Um Modelo é o contentor onde é colocado o design completo de uma secção. Os modelos disponíveis no Jumpseller são os seguintes:

Nota: Podes ler mais sobre isto neste artigo, onde explicamos em detalhe o que são os Modelos e como os podes personalizar.

Início

É a página principal e inicial mostrada quando um visitante entra no domínio da tua loja, por exemplo o-teu-dominio.jumpseller.com ou o-teu-dominio.com.

Produto

Mostra toda a informação dos produtos da tua loja. Podes criar quantos modelos quiseres para apresentar os produtos de diferentes formas.

Categoria

Destina-se a exibir coleções de produtos pertencentes às categorias que podes criar no painel de administração da tua loja, indo a Produtos > Categorias. Aqui também podes criar novos modelos e aplicá-los a categorias específicas.

Página

Os temas Jumpseller incluem 2 modelos de página pré-instalados que podes usar. Assim como nos Produtos e Categorias, podes criar muitos mais e aplicá-los às tuas páginas.

Categoria de página

Este novo modelo permite uma utilização mais flexível do conteúdo e das páginas da tua loja, definindo a estrutura e o estilo para categorias de páginas.

Nota: Disponível apenas para temas com versão 4 ou superior.

Pesquisa

Mostra todos os produtos correspondentes quando os clientes fazem uma pesquisa na loja.

Contacto

Pode mostrar vários detalhes sobre a tua loja, como informações de contacto, links para redes sociais, localizações, um mapa e formulário de contacto.

Erro

Usado quando os visitantes acedem a uma página não disponível, como uma URL incorreta ou inexistente. Também é usado quando há um erro no processo de compra da loja.

Conceitos básicos

A seguir, explicamos alguns conceitos usados ao longo deste artigo.

Slider/Carrossel

Um Slider ou Carrossel é um tipo de elemento amplamente utilizado dentro dos Componentes. Basicamente, mostra itens ou subcomponentes numa secção, que aparecem em maior ou menor quantidade dependendo do tipo de dispositivo onde a loja é visualizada. Os elementos ocultos dentro da janela do navegador podem ser visualizados através de objetos de navegação como setas e/ou pontos, ou arrastando o conteúdo horizontalmente.

Na maioria dos Componentes do tema, encontrarás opções para personalizar Carrossels, normalmente num grupo chamado Definições do Carrossel, que inclui o seguinte:

  • Ativar autoplay: permite que o Carrossel avance automaticamente de um item para o seguinte.
    • Ativar autoplay contínuo: disponível em alguns componentes quando Autoplay está ativo e permite uma transição mais suave, sem parar em cada “bloco”.
  • Velocidade dos blocos: define o tempo necessário para a transição entre blocos.
  • Mostrar setas: mostra setas abaixo do Carrossel para controlo manual.
    • Mostrar setas ao passar o cursor: se a opção anterior estiver ativa, esta mostra as setas apenas quando o utilizador passa o cursor sobre o componente (apenas em computador).
  • Mostrar pontos: exibe pontos abaixo do Carrossel para navegação.

Nota: Em componentes como o Slider, o nome do grupo pode variar, mas as opções mantêm a mesma funcionalidade.

Paletas

A maioria dos componentes tem configurações individuais para personalização de cores. Com as Paletas, podes alterar o aspeto visual de um componente inteiro com um único clique. Afetam elementos como o fundo, textos, links e botões. Podes editar, reutilizar, clonar ou criar quantas paletas quiseres. Quando alteras uma cor dentro de uma paleta, ela aplica-se automaticamente a todos os locais onde é usada.

Nota: Nem todos os componentes estão disponíveis em todos os temas Jumpseller, e as opções podem variar. No entanto, o comportamento geral é bastante semelhante e esta documentação ajudará a configurá-los corretamente.

Dispositivos

Ao longo do artigo, encontrarás os termos Computador e Telemóvel. Embora sejam os mais referidos, é importante considerar também os Tablets.

Dispositivo Largura equivalente
Telemóvel pequeno Igual ou inferior a 414 px
Telemóvel Igual ou inferior a 575 px
Tablet Entre 575 px e 991 px
Computador Igual ou superior a 992 px
Computador grande Igual ou superior a 1200 px

Nota: Estes valores consideram a visualização vertical. Em modo horizontal, as dimensões podem variar.

Largura

Ao longo deste artigo, o termo Largura aparece frequentemente, pois vários componentes permitem ajustar essa propriedade para criar layouts dinâmicos.

Pequeno

Os temas usam um layout baseado numa grelha de 12 colunas. Pequeno significa que o conteúdo se estenderá ao espaço total disponível — as 12 colunas (aprox. 1320 px).

Navegador ou Largura total

O conteúdo ajusta-se à largura máxima da janela do navegador.

Outros tamanhos de largura

Em vários componentes, podes escolher entre:

  • Pequeno: conteúdo limitado a 6 das 12 colunas.

  • Médio: conteúdo limitado a 8 das 12 colunas.

  • Grande: conteúdo limitado a 10 das 12 colunas.

Nota: Em alguns componentes, também encontrarás a opção Extra grande, que ajusta automaticamente consoante o contexto. Em telemóveis, o conteúdo ocupa sempre toda a largura disponível.

Hover

O termo hover refere-se à ação de passar o cursor sobre um elemento.

Overlay

Em vários componentes encontrarás a opção Overlay. Este elemento é uma camada posicionada entre o conteúdo e a imagem de fundo, criando contraste visual. Está presente em componentes como Slides, Banners e Banner Grande.

Animações

Na maioria dos componentes, existe uma opção chamada Personalizar opções de animação, que permite modificar as transições aplicadas. As opções disponíveis são:

  • Tipo de animação: define a direção de onde o componente surgirá.
  • Executar animação uma vez: quando ativa, a animação ocorre apenas ao fazer scroll para baixo. Quando desativada, repete-se em ambos os sentidos.
  • Atraso da animação: define o tempo (em milissegundos) até a animação ser executada após o componente entrar em vista.

Se esta opção não estiver ativa, será usada a definição em Definições do tema > Design > Ativar animações do tema. Lê mais neste artigo.

Cabeçalhos

Na maioria dos Componentes, existe uma opção chamada Ativar cabeçalho, que exibe opções aninhadas para personalizar esta secção:

  • Subtítulo: exibido antes do Título.
  • Título: exibido entre o Subtítulo e a Descrição.
  • Descrição: exibida abaixo do Título.
  • Link: permite adicionar um link a qualquer conteúdo da loja.
  • Texto do link: texto mostrado dentro do link.

A aparência e alinhamento dos Cabeçalhos são definidos em Temas > Editor Visual > Definições do tema > Cabeçalhos. Lê mais neste artigo.

Opções de conteúdo

Em componentes como Slider, Banner Grande e Banners, encontrarás um grupo de opções para personalizar elementos como Subtítulo, Título e Descrição/Texto.

Lista de componentes

A seguir, podes encontrar a lista completa de componentes disponíveis nos temas Jumpseller.

Nota: Esta lista inclui componentes para temas com versão 4.0.0 ou superior.

Artigos Relacionados

Nesta página

Comece a sua jornada com a gente!

Teste grátis por 7 dias. Não é necessário cartão de crédito.

Criar Loja