Categorias

Este componente permite-te adicionar vários itens ou blocos, que serão categorias da tua loja, e personalizar atributos e opções para cada um deles.

Configurações do componente

Nota: referimo-nos a Conteúdo para indicar os detalhes de uma categoria, como o seu nome/título, descrição e link do botão.

Ao clicar no nome do componente, encontrarás opções gerais para o personalizar, que determinarão o aspeto e o comportamento da secção, bem como dos seus subcomponentes (blocos). As opções disponíveis para este componente são as seguintes:

Largura

Permite definir a largura máxima que o componente ocupará na janela do navegador.

Podes ler mais sobre como esta opção afeta o componente nesta página.

Colunas no computador

Permite definir o número de blocos por linha horizontal que serão exibidos em computadores. A quantidade visível de blocos variará consoante o que tiveres definido na opção Exibição, da seguinte forma:

Carrossel

Largura do dispositivo	Quantidade de blocos
Igual ou superior a 992px	Quantidade definida
Inferior a 992px	3 blocos
Inferior a 768px	2 blocos

Grelha

Largura do dispositivo	Quantidade de blocos
Igual ou superior a 992px	Quantidade definida
Inferior a 992px	3 blocos
Inferior a 768px	2 blocos

Colunas no telemóvel

Permite definir o número de blocos que serão exibidos numa única linha horizontal para telemóveis com largura igual ou inferior a 575px.

Espaço entre

Permite definir se existirá um espaço visível entre os blocos.

Nota: esta opção só estará visível e disponível se o valor definido em Espaçamento dentro de Definições do tema > Design > Estilos do tema for diferente de Nenhum.

Exibição

Permite definir se o conteúdo do componente será exibido dentro de uma secção do tipo Carrossel ou Grelha.

Podes ler mais sobre as diferenças entre estes dois tipos nesta página.

Definições do Carrossel

Este grupo de opções ficará visível quando escolheres Carrossel e permitirá personalizar o seu comportamento.

Podes encontrar a lista completa de opções nesta página.

Opções de cabeçalho

Ao ativar esta opção, será exibida uma secção de Cabeçalho antes do conteúdo do componente. Podes consultar a lista de opções nesta página.

Opções de conteúdo

Este grupo permite personalizar o Conteúdo de cada bloco, com base nas seguintes opções:

Proporção da imagem

Permite definir as dimensões em que as imagens serão exibidas em cada bloco. Estas adaptar-se-ão ao espaço disponível, tanto na vertical como na horizontal.

Posição

Permite definir a posição em que o conteúdo dos blocos será exibido:

• Sobre a imagem: o conteúdo será exibido sobre as imagens, fazendo com que a imagem controle a altura de cada bloco.
• Após a imagem: o conteúdo será exibido abaixo da imagem.

Alinhamento

Ao escolher Após a imagem na opção anterior, serão exibidas duas opções adicionais para definir o alinhamento do conteúdo em computadores e telemóveis. Isto afetará todos os blocos da mesma forma.

Títulos

Dentro deste grupo encontrarás opções para personalizar o estilo dos títulos de todos os blocos, como o peso, espaçamento entre letras e a opção de exibi-los em maiúsculas.

Aparência

Este grupo contém as seguintes opções para personalizar o componente:

• Margem superior: permite controlar a margem superior da secção.
• Margem inferior: permite controlar a margem inferior da secção.
• Cores do conteúdo: permite escolher a Paleta para o componente.

Animações

A opção Personalizar opções permite ajustar as animações para este componente específico. Podes consultar quais estão disponíveis nesta página.

---

---

Configurações do subcomponente

O subcomponente de Categorias chama-se Bloco de categoria, e podes adicionar quantos quiseres. As opções para este subcomponente são as seguintes:

Categoria

Aqui podes escolher uma categoria para o bloco, o que adicionará automaticamente atributos como o nome/título e o link.

Título

Permite substituir o nome original da categoria selecionada, ou até definir um novo se não quiseres escolher uma categoria.

Mostrar descrição

Permite exibir a descrição da categoria selecionada após o seu nome.

Ao ativar esta opção, ficará disponível uma opção de Descrição personalizada para substituir a anterior.

Opções de link

Quando escolheres uma Categoria na primeira opção do bloco, este grupo ficará visível com as seguintes definições adicionais:

Nota: ao escolher uma categoria, toda a área do bloco será clicável e levará para a página correspondente da categoria.

Texto do link

Texto que será exibido dentro do link.

Nota: se a opção Mostrar link como texto estiver desativada, este texto continuará visível ao passar o cursor sobre o bloco.

Link externo

Se ativado, o link será aberto numa nova aba do navegador.

Mostrar seta no título

Uma seta será exibida e a sua posição dependerá do que tiveres escolhido na opção Posição nas definições do componente, da seguinte forma:

• Sobre a imagem: a seta será exibida junto ao texto do link, se Mostrar link como texto estiver ativado.
• Abaixo da imagem: a seta será exibida à direita do título.

Mostrar link como texto

Permite exibir o link como texto visível após o título e a descrição.

Opções de imagem

Nota: a primeira imagem exibida será a que pertence à Categoria selecionada no bloco, desde que esta tenha uma imagem configurada no painel de administração.

Imagem personalizada

Esta opção permite carregar uma imagem caso a categoria escolhida não tenha uma, ou substituir a existente.

Ao fazê-lo, ficará disponível uma opção adicional chamada Imagem personalizada (telemóvel) para carregar uma imagem diferente em telemóveis. Se nenhuma imagem for carregada nesta segunda opção, a primeira será usada em todos os dispositivos.

Sobreposição (Overlay)

Este elemento será visível enquanto Sobre a imagem estiver selecionado na opção Posição, dentro das definições principais do componente.

Esta opção permite controlar a opacidade (transparência). Podes ler mais sobre isto nesta página.

Nota: esta opção também será exibida se um Ícone tiver sido adicionado.

Opções de ícone

Este grupo permite exibir um ícone dentro da área da imagem do bloco. As seguintes opções estarão disponíveis consoante o que tiveres escolhido na opção Posição nas definições do componente:

Nota: recomendamos carregar ícones em formatos como .svg, .webp ou .png.

Tamanho

Permite definir o tamanho do ícone em percentagem, com base na largura do bloco. Por exemplo, se definires 50%, a largura do ícone será metade da largura total do bloco.

Cor da sobreposição

Permite escolher uma Paleta para o elemento de sobreposição quando é adicionado um Ícone.

Opções de posição

Serão exibidas duas opções para controlar e escolher a posição horizontal e vertical do ícone dentro da área da imagem.

Aparência

Este grupo de opções ficará visível quando Sobre a imagem estiver selecionado na opção Posição, dentro das definições principais do componente:

Alinhamento (computador e telemóvel)

Permite definir o alinhamento para ambos os tipos de dispositivos.

Posição vertical do conteúdo

Permite definir a posição do conteúdo no eixo vertical.

Cores do conteúdo

Permite escolher a Paleta para o bloco.