Módulo de contentor

Artigo
05/30/2024

Isto artigo aborda os módulos de contentores e descreve como adicioná-los às páginas do site Microsoft Dynamics 365 Commerce.

Um módulo de contentor é um módulo que aloja outros módulos no seu interior. O principal objetivo de um módulo contentor é definir, através das propriedades que lhe são atribuídas, a disposição dos módulos que contém. Por exemplo, esses módulos podem aparecer lado a lado num esquema de duas colunas, três colunas, quatro colunas ou seis colunas. Também podem ser limitados à largura do contentor ou podem preencher o ecrã. Também pode ser adicionado um título a cada módulo de contentor.

São suportados três módulos de contentor: contentor, contentor com 2 ranhuras e contentor com 3 ranhuras. Podem ser colocados módulos de qualquer tipo dentro destes contentores.

Nota

Recomendamos que coloque sempre os módulos dentro de um módulo de contentor, para que possam ser limitados à largura do contentor.

Exemplos de módulos de contentores no comércio eletrónico

O autor de um sítio pretende um esquema de três colunas, em que três módulos aparecem lado a lado. Por conseguinte, o autor do sítio utiliza um módulo de contentor do tipo contentor com 3 ranhuras.
O autor de um sítio pretende um esquema de seis colunas, em que seis módulos aparecem lado a lado. Por conseguinte, o autor do sítio utiliza um contentor do tipo contain que tem seis colunas no seu interior.
O autor de um site quer colocar um módulo numa página, mas não quer que ele preencha o ecrã. Por conseguinte, o autor do sítio adiciona o módulo a um módulo de contentor e define a propriedade Width do contentor como Fit container.

A imagem seguinte mostra um exemplo de um módulo de contentor que contém um módulo de carrossel no Commerce site builder. Neste exemplo, a propriedade Width do módulo de contentor é definida como Fill Screen.

Exemplo de um módulo de contentor.

Propriedades do módulo de contentor

Nome da propriedade	Valores	Descrição
Título	Texto do título e etiqueta de título (H1, H2, H3, H4, H5, ou H6)	Pode ser fornecido um título opcional para o contentor. Por predefinição, a etiqueta de título H2 é utilizada para o título. No entanto, a etiqueta pode ser alterada para cumprir os requisitos de acessibilidade.
Largura	Encaixar o contentor ou Encher o filtro	Se o valor for definido para Fit container (o valor predefinido), os módulos dentro do contentor estão limitados à largura do contentor. Se o valor for definido para Preencher ecrã, os módulos não estão limitados à largura do contentor, podendo preencher o ecrã.
Número de colunas	1, 2, 3, 4, 6, ou 12	Esta propriedade define o número de colunas no contentor. Um contentor pode ter até 12 colunas.

Contentor com 2 ranhuras

O tipo de contentor com 2 ranhuras está optimizado para um esquema de duas colunas. Isto tipo de contentor tem duas ranhuras para permitir a visualização lado a lado dos módulos que se encontram no seu interior.

Podem ser utilizadas propriedades adicionais para otimizar o esquema para diferentes portas de visualização (dispositivos móveis, tablets, computadores, etc.). Para cada porta de visualização, pode ser definida a largura de cada coluna. Estão disponíveis as seguintes definições de largura de coluna:

75%/25% - O primeiro módulo tem uma largura de coluna de 75% e o segundo módulo tem uma largura de coluna de 25%. Também está disponível uma opção 25%/75% .
50%/50% - Ambos os módulos têm a mesma largura de coluna.
67%/33% - O primeiro módulo tem uma largura de coluna de 67% e o segundo módulo tem uma largura de coluna de 33%. Também está disponível uma opção 33%/67% .
100% - Ambos os módulos têm uma largura de coluna inteira. Por conseguinte, os módulos são empilhados verticalmente numa única coluna. Embora esta disposição de coluna única vá contra a intenção do tipo de contentor com 2 ranhuras, pode ser preferível para algumas portas de visualização (por exemplo, portas de visualização muito pequenas, como as dos dispositivos móveis).

Contentor com propriedades de 2 ranhuras

Nome da propriedade	Valores	Descrição
Título	Texto de título e etiqueta de título	Pode ser fornecida uma opção para o contentor.
X-Small view configuração da porta	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67%, ou 100%	Esta propriedade define a disposição das portas de visualização muito pequenas.
Configuração da porta de visualização pequena	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67%, ou 100%	Esta propriedade define o esquema para portas de visualização pequenas, como os dispositivos móveis.
Configuração da porta de visualização média	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67%, ou 100%	Esta propriedade define o esquema para portas de visualização médias, como os tablets.
Configuração da porta de visualização ampla	25%/75%, 75%/25%, 50%/50%, 67%/33%, 33%/67%, ou 100%	Esta propriedade define a disposição das portas de visualização de grandes dimensões, como os computadores.

Contentor com 3 ranhuras

O tipo de contentor com módulos de 3 ranhuras está optimizado para uma disposição em três colunas.

Podem ser utilizadas propriedades adicionais para otimizar o esquema para diferentes portas de visualização. Para cada porta de visualização, pode ser definida a largura de cada coluna. Estão disponíveis as seguintes definições de largura de coluna:

33%/33%/33% - Os três módulos têm a mesma largura de coluna.
50%/25%/25% - O primeiro módulo tem uma largura de coluna de 50% e cada um dos restantes dois módulos tem uma largura de coluna de 25%. Também estão disponíveis as opções 25%/50%/25% e 25%/25%/50% .
16%/16%/67% - Cada um dos dois primeiros módulos tem uma largura de coluna de 16% e o terceiro módulo tem uma largura de coluna de 67%. Também estão disponíveis as opções 16%/67%/16% e 67%/16%/16% .

Contentor com propriedades de 3 ranhuras

Nome da propriedade	Valores	Descrição
Título	Texto de título e etiqueta de título	Pode ser acrescentado um título opcional ao contentor.
X-Small view configuração da porta	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16%, ou 67%/16%/16%	Esta propriedade define a disposição das portas de visualização muito pequenas.
Configuração da porta de visualização pequena	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16%, ou 67%/16%/16%	Esta propriedade define o esquema para portas de visualização pequenas, como os dispositivos móveis.
Configuração da porta de visualização média	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16%, ou 67%/16%/16%	Esta propriedade define o esquema para portas de visualização médias, como os tablets.
Configuração da porta de visualização ampla	33%/33%/33%, 50%/25%/25%, 25%/50%/25%, 25%/25%/50%, 16%/16%/67%, 16%/67%/16%, ou 67%/16%/16%	Esta propriedade define a disposição das portas de visualização de grandes dimensões, como os computadores.

Adicionar um módulo de contentor a uma página

Para adicionar um módulo de leitor de contentores a uma nova página e definir as propriedades necessárias, siga estes passos.

Aceda a Templates e seleccione New para criar um novo modelo.
Na caixa de diálogo New template , em Template name, introduza Container template e, em seguida, seleccione OK.
Na ranhura Corpo , seleccione as reticências (...) e, em seguida, seleccione Adicionar módulo.
Na caixa de diálogo Select modules , seleccione o módulo Default Page e, em seguida, seleccione OK.
Seleccione Guardar, seleccione Terminar edição para verificar o modelo e, em seguida, seleccione Publicar para o publicar.
Aceda a Pages e seleccione New para criar uma nova página.
Na caixa de diálogo Criar uma nova página , em Nome da página, introduza Página de contentor e, em seguida, seleccione Seguinte.
Em Escolha um modelo, seleccione o modelo de contentor que criou e, em seguida, seleccione Next.
Em Escolha uma apresentação, seleccione uma apresentação de página (por exemplo, Apresentação flexível) e, em seguida, seleccione Next.
Em Rever e terminar, rever a configuração da página. Se for necessário editar as informações da página, seleccione Back. Se as informações da página estiverem correctas, seleccione Criar página.
Na ranhura Main da nova página, seleccione as reticências (...) e, em seguida, seleccione Add module.
Na caixa de diálogo Select modules , seleccione o módulo Container e, em seguida, seleccione OK.
No painel de propriedades do módulo de contentor, defina a propriedade Number of columns para 1 e a propriedade Width para Fill container.
Na ranhura Container , seleccione as reticências (...) e, em seguida, seleccione Adicionar módulo.
Na caixa de diálogo Select modules , seleccione o módulo Content block e, em seguida, seleccione OK.
No painel de propriedades do módulo de bloco de conteúdo, configure o título, a imagem e o esquema.
Seleccione Guardar e, em seguida, seleccione Pré-visualizar para pré-visualizar a página. Deve ver um módulo de características que se encaixa na largura do módulo de contentor.
No painel de propriedades do módulo de contentores, altere o valor da propriedade Number of columns para 3.
Adicione mais dois módulos de blocos de conteúdo ao módulo de contentor e configure-os.
Seleccione Guardar e, em seguida, seleccione Pré-visualizar para pré-visualizar a página. Deve agora ver três módulos de blocos de conteúdo que aparecem lado a lado.
Depois de obter o esquema pretendido, seleccione Terminar edição para verificar a página e, em seguida, seleccione Publicar para a publicar.