Controle de coluna

As colunas são um dos principais elementos estruturais dentro do Blocs aplicação, junto com linhas e Bloc containers eles formam a base sobre a qual o layout do seu site é construído. As colunas têm várias opções que permitem que você personalize seus tamanho, compensar, ordem e alinhamento de conteúdo. Todas as opções podem ser ajustadas por ponto de interrupção, o que significa que você pode personalizar layouts de coluna com base no tamanho da tela em que estão sendo exibidos, para uma experiência de usuário móvel ideal.

Dica para iniciantes

Uma linha principal de colunas não podes existir sem conter pelo menos uma coluna, isso significa que é impossível excluir a última coluna de uma linha. Quando a última coluna de uma linha é excluída, outra vazia é adicionada automaticamente.

Selecionando uma coluna

Como o conteúdo aninhado em uma coluna pode ocupar todo o espaço de uma coluna, pode ser complicado selecioná-lo diretamente na tela de design. A maneira mais fácil de selecionar uma coluna é usando a árvore de camadas.

Largura da coluna

As colunas têm várias configurações de largura que podem ser aplicadas usando os controles da tela ou os controles do inspetor da barra lateral. A maneira mais fácil de redimensionar uma coluna é selecioná-la na tela de design e simplesmente arrastar a alça de redimensionamento localizada no lado direito do marcador de seleção da coluna.

Tamanho fixo

A grade de layout dentro Blocs está dividido em colunas 12 que são dimensionados uniformemente para preencher o disponível recipiente do site principal espaço. Uma coluna pode ter um tamanho fixo de 1 a 12, quando uma coluna tem um tamanho fixo, ela só ocupará espaço suficiente para preencher a porcentagem correta de espaço permitido quando este espaço for dividido em 12 colunas. Por exemplo, se uma coluna tem uma largura de 6, ocupará metade de 12, o que significa que ocupará 50% do espaço da tela.

Tamanho herdado

Se uma coluna tem seu tamanho definido para herdar ∞ em todos os pontos de interrupção, ele não será mais corrigido e, em vez disso, definirá automaticamente seu tamanho com base no número de colunas na linha pai, para criar uma cobertura uniforme do espaço disponível. Por exemplo, se você tiver colunas 2 definido para herdar, cada coluna ocupará 50% do espaço disponível.

Dica para iniciantes

Ao usar a opção de tamanho herdado, é importante lembrar que a coluna não deve ter nenhum outro valor de largura definido em pontos de interrupção inferiores, caso contrário, a largura da coluna herdará o valor de largura de ponto de interrupção inferior mais próximo.

Deslocamento de coluna

O deslocamento da coluna permite definir o espaço de deslocamento encontrado à esquerda da coluna, pode ser usado para centralizar as colunas horizontalmente ou para criar espaço entre as colunas. A maneira mais fácil de definir o deslocamento de uma coluna é selecioná-la na tela de design e arrastar a alça de deslocamento localizada no lado esquerdo do marcador de seleção da coluna.

Dica para iniciantes

Quando você altera o deslocamento de uma coluna, ele também empurra ou puxa as colunas para a direita dela e, em alguns casos (se não houver espaço horizontal disponível suficiente), as moverá para uma nova linha.

Ordem da coluna

Os controles de ordem das colunas podem ser um pouco confusos ao usá-los pela primeira vez. Isso ocorre porque pode parecer que as configurações não têm efeito, se não forem configuradas corretamente. Os controles de ordem das colunas permitem definir a ordem de uma coluna dentro da linha pai, por padrão as colunas são ordenadas da esquerda para a direita na ordem em que existem fisicamente (dentro da árvore DOM).

Compreender a ordem das colunas

Quando uma coluna tem seu valor de pedido personalizado, ele sempre será exibido após todas as colunas que não ter um pedido personalizado aplicado. Então se você tem colunas 2 e defina a primeira coluna para pedido 1 ele se moverá para trás da segunda coluna em vez de permanecer na mesma primeira posição. Isso ocorre porque, embora a coluna seja definida para ser posicionada primeiro, as outras colunas na linha pai não têm uma configuração de ordem personalizada, portanto, são exibidas antes daquelas com valores personalizados. Se você aplicar uma ordem personalizada ao que era a segunda coluna, mas agora é a primeira e definir sua posição de ordem para 1, verá que agora ela se move para o final das colunas e fica atrás da coluna com a ordem personalizada de 2

Você pode descobrir mais sobre a ordem das colunas e como ela funciona no Bootstrap 4 plítica de privacidade .

Alinhamento da coluna

Os controles de alinhamento da coluna permitem que você alinhe de forma rápida e fácil uma coluna ao topo, meio or fundo da linha pai. Esses controles também permitem que você force todos os elementos de uma coluna a se esticarem até a altura total da coluna pai, o que pode ser útil quando você deseja um cartão Brics para ter um tamanho uniforme em altura.

Alinhamento de conteúdo

Os controles de alinhamento do conteúdo da coluna permitem alinhar rápida e facilmente o conteúdo de uma coluna ao esquerda, Centro or certo.

Dica para iniciantes

Os controles de coluna segmentada encontrados no inspetor da barra lateral podem ser ajustados rapidamente simplesmente passando o mouse sobre a seção de dígitos encontrada entre as setas esquerda e direita e deslizando para a esquerda ou direita em seu mouse mágico (x1 dedo) ou trackpad (x2 dedos).

WordPress loop

Quando um projeto tem seu Opção CMS definido como WordPress, um conjunto adicional de controles estará disponível no inspetor da barra lateral que permite a configuração de loops de conteúdo do WordPress.

Formato

Esta opção é usada para definir a variável de tipo para o loop:

Publique

Esta coluna se tornará o modelo para o item de pós-loop, todos os elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo.

PÁGINAS

Esta coluna se tornará o modelo para o item de loop de página, todos os elementos dentro dos feeds de dados da página do WordPress serão preenchidos de acordo.

Conteúdo

Esta coluna se tornará o modelo para o item de loop de conteúdo (os itens de loop de conteúdo são normalmente encontrados nos modelos de arquivo, autor, categoria, tag e página de resultados de pesquisa), quaisquer elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo.

Todos os Produtos

Esta coluna se tornará o modelo para a postagem padrão, página e todos os itens de loop de tipo de postagem personalizada, quaisquer elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo. Isso produzirá todos os tipos de postagem e o tipo de página padrão.

Todos os tipos de postagem

Esta coluna se tornará o modelo para a postagem padrão e todos os itens de loop de tipo de postagem personalizada. Todos os elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo. Isso gerará todos os tipos de postagem que o tema suporta.

Todos os tipos de postagem personalizados

Esta coluna se tornará o modelo para todos os itens de loop de tipo de postagem personalizado, todos os elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo. Isso gerará todos os tipos de postagem personalizados que o tema suporta.

Tipos personalizados Correios

Esta coluna se tornará o modelo para o item de loop de tipo de postagem personalizado relevante, todos os elementos dentro dos feeds de dados de postagem do WordPress serão preenchidos de acordo.

Dica para iniciantes

Tipos de postagem personalizados adicionais adicionados por meio do Gerenciador de dados personalizados do WordPress será adicionado às opções de tipo.

Autor

Esta opção é usada para definir a variável do autor para o loop:

Todos os Produtos

O loop retornará postagens de todos os autores.

Post Autor

O loop retornará postagens do autor da postagem atual.

Usuário atual

O loop só retornará postagens para o usuário conectado no momento.

Postagens por página

O número inserido neste campo será usado como o limite máximo do loop. Se você inserir 6, os resultados do pós-loop serão paginados em grupos de 6 itens por página.

IDs de categoria

O loop será filtrado para incluir postagens com esses IDs de categoria (separe vários valores com vírgulas).

Tags de categoria

O loop será filtrado para incluir postagens com essas tags de categoria (separe vários valores com vírgulas).

Excluir IDs de postagem

O loop será filtrado para excluir postagens com esses IDs (separe vários valores com vírgulas).

Atualizado em 26 de abril de 2022

Esse artigo foi útil?

Artigos Relacionados