Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
A tecnologia Flexbox (abreviadamente chamada de “flex”) é um módulo de layout CSS para organizar itens em seções e colunas, permitindo que eles se flexionem (aumentem ou diminuam) e se alinhem perfeitamente dentro de um contêiner. Isso permite que você crie seções responsivas e perfeitas em pixels que se adaptam a qualquer tamanho de telaSe você estiver usando o Editor Clássico, poderá entrar no modo flexível para projetar com a tecnologia flexbox. Se você estiver usando o Editor 2.0, você usa a tecnologia flexbox por padrão
Dica
Cursos recomendados da Duda Academy:
-
Princípios básicos de design. Saiba mais sobre os quatro pilares do design (marca, tipografia, cor
-
Tamanho e unidades. Saiba mais sobre as unidades de diferentes tamanhos no painel de design e quando usá-las.
-
Fundamentos do layout. Saiba mais sobre colunas e colunas internas e como alinhar e dimensionar elementos dentro delas.
-
Layouts com grades avançadas. Aprenda a criar layouts complexos com grades avançadas
O painel de design é exibido no lado direito do modo flexível e contém suas propriedades de design para o elemento selecionado (seção, coluna, widget, coluna interna ou grade avançada). Cada elemento tem propriedades diferentes que podem ser ajustadas no painel de design, o que significa que as propriedades de design são diferentes dependendo do elemento selecionado. As propriedades do design incluem alinhamento, layout, espaçamento, dimensionamento e muito mais, dependendo do
Para abrir o painel de design, clique em um elemento no modo flexível e, em seguida, clique em Editar design (você só precisa estar no modo flexível se estiver usando o editor clássico). O painel de design se abre no lado direito do modo flexível para que não interfira na sua capacidade de visualizar e editar seu design. Depois de fechar o painel de design, você pode abri-lo novamente clicando no ícone do painel de design no canto superior direito.
O painel de design é composto por 5 seções: Alinhamento, Layout, Espaçamento, Tamanho e Animação e Plano de Fundo. Veja a seguir uma descrição de cada seção e o que você pode realizar
Disponível para elementos únicos dentro de uma coluna ou coluna interna. Elementos únicos dentro de uma coluna ou coluna interna vertical com layout automático vertical podem ser alinhados à esquerda, ao centro, à direita ou esticados horizontalmente para caber em 100% da largura do contêiner
Os elementos também podem ser alinhados a partir do menu flutuante clicando no Alinhar ícone ().
Predefinições
Selecione elementos dentro de uma seção a partir de um layout predefinido. As opções incluem alinhamento vertical ou horizontal
Itens por linha
Se seu conteúdo abranger mais de uma linha, você poderá usar o menu suspenso para selecionar quantos itens aparecerão por linha.
Itens adequados
Aparece quando você tem linhas de conteúdo e permite definir como os itens se encaixam nas linhas. Isso pode ser útil se você tiver um número ímpar de itens
Largura total
Anteriormente chamada de “sangria total”, a largura total está disponível somente para seções e só pode ser alterada a partir do ponto de interrupção principal do desktop. Quando alternado paraLigado, permite que o conteúdo se estenda por toda a largura da tela. Quando ativada para Desativado, a largura do conteúdo pode abranger no máximo 1920 pixels. Por padrão, a configuração de largura total é alternada para Desativado. Para saber mais sobre pontos de interrupção, consulte Tamanhos de tela e dispositivos.
Alinhamento de conteúdo
Permite alinhar vertical ou horizontalmente vários elementos em uma coluna ou coluna interna de uma só vez. No editor clássico, os elementos só podem ser alinhados individualmente e horizontalmente. Para obter mais informações, consulte Alinhamento e espaçamento.
Alinhar linhas
Permite definir o alinhamento das linhas dentro de uma coluna ou coluna interna. Essa configuração não afeta o alinhamento dos elementos dentro das linhas, apenas as próprias linhas
Para saber mais sobre espaçamento, confira o vídeo a seguir:
Espaço entre os itens
Permite definir o espaço entre colunas ou widgets uma vez e se aplica a todas as colunas em uma seção ou a todos os widgets em uma coluna. Para colunas, se a propriedade de layout automático estiver definida como vertical, o espaço entre os widgets será medido em pixels. Se o layout automático for horizontal, o espaço entre os widgets será medido em porcentagens. Essa propriedade não se aplica a elementos dentro de colunas internas ou grades avançadas
Definir margens e preenchimento
As margens são o espaço entre a borda do elemento e a borda da seção, coluna, coluna interna ou grade avançada em que ele está contido. Por padrão, os valores da margem horizontal e do espaçamento estão vinculados. Se você ajustar o valor à esquerda, o valor do lado direito será atualizado automaticamente para corresponder. Se você não quiser que os valores sejam vinculados, clique no ícone do link.
Observe que as margens embutidas para elementos dentro de colunas ou colunas internas podem ser ajustadas diretamente na tela. Para saber mais, consulte Espaçamento externo e interno.
preenchimento é o espaço interno do elemento. Clique na margem ou no número de preenchimento para digitar um novo valor e, em seguida, use o menu suspenso para selecionar a unidade em que o espaço é medido (px,%, vh, vw ou A). Por padrão, o espaçamento horizontal é medido em porcentagens e o espaçamento vertical é medido
Por exemplo, se você selecionar uma coluna e definir o espaçamento esquerdo para 5 px, ele adicionará 5 px de espaço entre a borda esquerda da coluna e a borda externa dos elementos dentro da coluna. Se, para essa mesma coluna, você definir a margem esquerda para 5 px, ela adicionará 5 px de espaço entre a borda da coluna e a borda da seção que a contém.
Redefinir preenchimento ou margem
Quando clicado no painel de design ou no menu flutuante, ele redefine o espaçamento ou as margens do elemento selecionado para zero.
Dependendo do elemento selecionado, você pode ajustar a altura e a largura e os valores máximo e mínimo. No modo flexível, a altura pode ser medida em px, vh, porcentagem e A. No entanto, a altura das colunas flexíveis e o espaço entre as colunas só podem ser medidos em porcentagem. Para saber mais sobre unidades de tamanho, consulte Unidades de tamanho.
As unidades de tamanho padrão são diferentes para cada elemento. Por exemplo, por padrão, as caixas de texto têm 100% de largura, os botões têm 280 px
Para seções, você só pode alterar a altura. A largura da seção é definida pelo dispositivo, enquanto a largura do conteúdo na seção é definida pela configuração Largura do conteúdo no Tema do site. Para colunas, você só pode alterar a largura e a altura definida pela altura da seção ou por seus elementos internos. Para colunas internas e widgets, você pode definir a altura e a largura, junto com os valores mínimo e máximo de cada um. Qualquer tamanho de unidade pode ser usado.
As propriedades de animação e plano de fundo no modo flexível são semelhantes às do editor clássico. Para saber mais sobre propriedades de animação e plano de fundo, consulteAdicionar animaçõesePersonalizar plano de fundo.
Nota
Parallax está disponível para todos os widgets e contêineres e pode ser aplicado em todos os tamanhos de tela. Para ativar a paralaxe, clique na imagem e selecione Editar design, vá até o Plano de fundo seção do painel de design e abra o Posição da imagem menu.
A opção de manter uma imagem de fundo estática não está disponível para tablet, celular e Mac OS devido a uma limitação do iOS.
As grades avançadas têm propriedades de painel de design que não estão disponíveis para outros tipos de elementos devido à capacidade de criar composições de estilo livre e elementos sobrepostos. Recomendamos que você revise seu design em diferentes pontos de interrupção
Alinhar
Elementos únicos em uma grade avançada podem ser alinhados e esticados em qualquer direção, pois não são restringidos pelo layout automático.
Pedido
Na seção Arranjo do painel de design, essa propriedade só pode ser usada quando há vários elementos dentro de uma grade avançada. Permite que você traga um elemento selecionado para frente, para frente, para trás ou para trás. Para obter mais informações, consulte Criar elementos sobrepostos.
Reorganizar o layout
Permite selecionar como as colunas e as linhas são organizadas na grade avançada para criar um layout.
Personalizar o layout
Permite selecionar como as colunas e as linhas são organizadas na grade avançada para criar um layout.
Alfinete
Permite definir a posição do elemento na grade. Uma vez definido, o elemento permanecerá na mesma posição mesmo quando o tamanho da grade mudar.
Localização da grade
Disponível para elementos dentro de grades avançadas que foram divididos em colunas e/ou linhas para criar um layout. Mostra onde o elemento está na grade.
Mantenha proporções
Quando alternado para Ligado, ele garante que os elementos dentro de uma grade avançada mantenham suas proporções mesmo quando o tamanho da grade muda.
O widget de imagem também contém um Mantenha a proporção alternar, que mantém suas proporções originais.
Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
Compreender e utilizar com eficácia as unidades de tamanho é crucial para criar layouts que não sejam apenas visualmente atraentes, mas também responsivos em vários dispositivos e tamanhos de tela. O painel de design, localizado no lado direito da tela do editor no Editor 2.0 ou no modo Flex no Editor Clássico, serve como centro de controle para propriedades de design de elementos selecionados, incluindo seções, colunas, widgets, colunas internas e grades avançadas. Este artigo analisa as unidades de tamanho disponíveis no painel de design e oferece exemplos práticos de seu uso.
Além disso, o Editor 2.0 permite que os usuários configurem unidades de tamanho a partir do ponto de interrupção principal (desktop), garantindo escalabilidade em todos os tamanhos de tela. Os usuários podem ajustar as unidades de tamanho nos pontos de interrupção do tablet e do celular sem afetar outros pontos de interrupção. Para obter mais informações, consulteTamanhos de tela e dispositivos.
Dica
Curso recomendado da Duda Academy:
-
Unidades de tamanho. Saiba mais sobre as unidades de diferentes tamanhos no painel de design e quando usá-las.
porcentagem (%) é uma unidade de tamanho dinâmico que determina a proporção do contêiner (seção, coluna, coluna interna ou grade avançada) ocupado pelo elemento em vários tamanhos de tela. Normalmente, as larguras dos elementos flexíveis são padronizadas como porcentagens. É recomendável usar porcentagens para manter a consistência do design em todos os tamanhos de tela sem a necessidade de ajustes manuais de pixels em cada ponto de interrupção
Por exemplo, definir as duas colunas em um layout de duas colunas com 50% de largura garante que elas sejam automaticamente dimensionadas para 50% em todos os tamanhos de tela.
As porcentagens são benéficas para preservar os tamanhos relativos dos elementos em diferentes dimensões de tela. Isso significa que os elementos são dimensionados proporcionalmente ao contêiner principal (seção ou coluna), garantindo uniformidade na
Por exemplo, uma imagem definida com 50% de largura dentro de uma coluna sempre ocupará metade da largura da coluna, independentemente do tamanho da tela. Consequentemente, embora a coluna e a imagem possam parecer mais estreitas em dispositivos móveis em comparação com desktops, a imagem mantém sua largura proporcional. Da mesma forma, definir o espaçamento entre as colunas para 4% garante um espaçamento consistente em relação às colunas e outros elementos da tela, adaptando-se a diferentes tamanhos de
pixels (px) fornecem uma unidade fixa de medida que não é afetada pelas variações de tamanho do dispositivo. Por exemplo, um botão definido como 250 px mantém seu tamanho em dispositivos móveis, tablets e desktops
No entanto, confiar apenas nos pixels para dimensionar pode prejudicar a capacidade de resposta, exigindo ajustes manuais em cada ponto de interrupção. Portanto, embora os pixels garantam a consistência no tamanho do elemento, é recomendável utilizar porcentagens para promover um design responsivo. Essa abordagem minimiza a necessidade de ajustes individuais de pixels nos pontos de interrupção, simplificando o processo de design e aprimorando a capacidade de resposta geral
largura da janela de visualização (Vw) ajusta dinamicamente os elementos com base na largura da tela (janela de visualização), garantindo uma escala proporcional em diferentes dispositivos. Por exemplo, atribuir 50 Vw a um elemento aloca metade da largura da tela
altura da janela de visualização (Vh) dimensiona dinamicamente os elementos em relação à altura da tela (janela de visualização). Por exemplo, designar 25 Vh para um elemento reserva um quarto da altura da tela para esse elemento. Isso é especialmente benéfico para fundos de tela cheia (100% Vh) ou elementos que precisam ser sincronizados com a altura
A unidade automática se ajusta dinamicamente com base na altura do conteúdo, tornando-a adequada para blocos de texto e alturas de colunas, garantindo que eles sejam redimensionados de acordo com o conteúdo. Normalmente, os blocos de texto usam como padrão unidades automáticas. Esse recurso permite que os elementos se expandam ou se contraiam sem problemas, mantendo o design proporcional do layout
[en] Fill sets an element to take up the space left over in its container, along its width or height. Use Fill when you want an element to adapt to whatever space is left, instead of a set proportion (%) or the size of its content (A).
[en] For example, in a section with two columns, if one column's width is 50% and the other's is Fill, the second column takes the remaining width. An image with its height set to Fill stretches to the height of the column it's in.
[en] Fill is available on the Width and Height settings for some elements, such as column width and image height, but not on minimum or maximum values. Inner column width doesn't offer it.
O conceito pai-filho governa a organização dos elementos, com elementos primários, como cabeçalhos, corpos, menus e rodapés, contendo pelo menos uma seção. Cada seção, por sua vez, abriga pelo menos uma coluna, servindo como um contêiner para vários elementos, como texto, imagens ou widgets, como colunas internas e grades avançadas
Os elementos principais mantêm suas configurações de design, permitindo um controle centralizado sobre sua aparência. No entanto, se uma seção dentro de um elemento principal tiver configurações de cor de fundo específicas, o plano de fundo do elemento pai pode não refletir essa personalização. Essa estrutura hierárquica garante uma abordagem sistemática à organização do site, facilitando fluxos de trabalho de design eficientes e
A hierarquia dos elementos segue uma estrutura padrão: as seções contêm colunas e as colunas contêm widgets. Essa organização hierárquica garante que você não possa adicionar um widget diretamente a uma seção sem que ele esteja aninhado em uma coluna. Há várias maneiras de selecionar um elemento (seção, coluna ou widget)
-
Seleção direta de objetos na tela do editor: Os usuários podem interagir diretamente com os elementos na tela do editor, facilitando a identificação e a modificação de componentes específicos sem a necessidade de navegação extensiva por painéis ou menus. Ao selecionar um objeto, o painel de design com todas as opções de design relevantes para esse elemento aparecerá no painel de design à direita.
-
Pão ralado do menu flutuante: Os usuários podem navegar de volta aos contêineres principais usando breadcrumbs no menu flutuante. Ao selecionar um elemento específico, os usuários podem simplesmente clicar nas migalhas de pão azuis na parte superior do elemento para retornar ao contêiner principal
-
Parte superior do painel de design Breadcrumbs: O painel de design também inclui opções de navegação na parte superior na forma de migalhas de pão. Essas migalhas de navegação permitem que os usuários saltem rapidamente entre diferentes seções ou elementos dentro da tela
-
Painel de camadas: Quando um elemento é selecionado, o painel de camadas destaca as camadas associadas a esse elemento. Simultaneamente, o editor fornece feedback visual, auxiliando na navegação na tela
As seções flexíveis são linhas com duas colunas flexíveis padrão que criam um layout básico. Depois de adicionar uma seção, você pode adicionar, remover ou reorganizar colunas adicionais, colunas internas ou grades avançadas para criar o layout desejado. Em seguida, você pode adicionar widgets a esse layout
Para adicionar uma seção:
-
Passe o mouse entre as linhas e clique em +Adicionar seção. Ou clique com o botão direito do mouse para abrir o menu de contexto, clique em Adicionare, em seguida, selecione Seção Flex.
-
No painel lateral, clique em Seções flexíveis.
-
Selecione a seção flexível desejada.
-
Clique Salvar.
Nota
-
A opção de manter a imagem de fundo estática não está disponível para tablets e celulares devido a uma limitação do iOS.
-
Você também pode criar uma seção flexível com IA. Para obter instruções detalhadas sobre como criar seções flexíveis com IA, consulteCrie uma seção flexível com IA.
Para salvar uma seção:
-
Passe o mouse sobre a seção desejada e clique em Seção Flex no canto superior esquerdo da seção.
-
Clique Salvar como seção, em seguida, clique em Selecione somente essa linha.
-
Digite o nome da seção, selecione a categoria na qual a seção será salva e selecione as permissões para a seção.
-
Clique Comece a criar.
-
Clique Feito.
Você pode facilmente redefinir o espaçamento e os elementos de uma seção para seus estilos de tema. Os elementos que podem ser redefinidos incluem texto, botões, imagens, planos de fundo, largura e espaçamento da seção e de suas colunas, além de widgets como acordeão avançado, guias avançadas e repetidor
Para redefinir o espaçamento da seção ou os elementos da seção para estilos de tema, clique na seção para abrir a barra flutuante. Clique no ícone de três pontos e selecione Redefinir para o tema do site. A partir daqui, você pode clicar Redefinir espaçamento da seção ou Redefinir o estilo de todos os elementos da seção.
Nota
configurações específicas do ponto de interrupção (tamanho da tela) são preservadas. Isso significa que se você redefinir o espaçamento das seções ou os elementos para estilos de tema no desktop, os pontos de interrupção do celular e do tablet não serão afetados
Depois de adicionar uma seção ao seu site, você pode adicionar colunas para conter widgets dentro da seção. Todas as seções contêm colunas por padrão, mas você ainda pode adicionar outras colunas.
Observe que o número máximo de colunas é 8.
Nota
Quando você adiciona um elemento a uma coluna, a posição é determinada pelas configurações automáticas de layout. Para alterar a direção do layout automático, abra o painel de design e, na seção Layout, selecione horizontal ou vertical para o layout automático.
Você pode duplicar uma coluna e ela será adicionada à direita do cartão original. Você não pode adicionar colunas que excedam 100% da largura.
Para duplicar uma coluna:
-
Clique para selecionar uma coluna.
-
No menu flutuante, clique no Duplicado ícone. Ou você pode clicar com o botão direito na coluna para abrir o menu de contexto e selecionar Duplicado.
É possível alterar a largura de uma coluna arrastando sua borda na tela ou definindo-a no painel de design.
Para ajustar o tamanho de uma coluna:
-
Clique para selecionar a coluna.
-
Arraste uma das alças quadradas na borda da coluna.
Você também pode definir uma largura exata na seção Tamanho do painel de design.
A alça arredondada na borda de uma coluna ou widget altera sua margem (espaçamento externo), e não seu tamanho. Para saber mais, consulte Espaçamento externo e interno.
Nota
A soma das larguras das colunas de uma seção não pode ultrapassar 100% da largura da seção. Se uma coluna não puder ficar mais larga, primeiro reduza a largura de uma coluna vizinha.
Você pode excluir uma coluna para removê-la da seção. No entanto, cada seção deve conter pelo menos uma coluna, o que significa que você não pode excluir a última coluna de uma seção.
Para excluir uma coluna:
-
Clique para selecionar a coluna.
-
No menu flutuante, clique no Excluir ícone. Ou você pode clicar com o botão direito na coluna para abrir o menu de contexto e selecionar Excluir.
Você pode adicionar widgets a colunas, colunas internas ou grades avançadas de várias maneiras diferentes. Se você já estiver no modo flexível, você pode adicionar widgets diretamente do painel lateral clicandoWidgetse, em seguida, selecionando o widget desejado.
Nota
Se você estiver usando o modo flexível no Editor Clássico, não poderá arrastar e soltar um widget em uma coluna flexível do painel lateral.
Para adicionar um widget:
-
Clique em uma coluna, coluna interna ou grade avançada para selecioná-la.
-
Clique no ícone de adição no meio da coluna, da coluna interna ou da grade avançada. Ou clique no ícone de adição no menu flutuante.
-
Selecione um widget.
Você também pode adicionar widgets do painel de camadas.
Para adicionar um widget do painel de camadas:
-
Clique para selecionar uma coluna.
-
No painel de camadas, passe o mouse sobre a coluna, coluna interna ou grade avançada à qual você deseja adicionar um widget e clique no ícone de adição.
-
Selecione um widget.
O alinhamento e o espaçamento podem ser usados juntos para ajudá-lo a realizar seus projetos.
Para saber mais sobre alinhamento, confira o vídeo a seguir:
Ao projetar com o Flex, você pode economizar tempo alinhando vários elementos na mesma seção, coluna ou coluna interna ao mesmo tempo.
Para alinhar vários elementos:
-
Selecione a seção, coluna ou coluna interna e clique no ícone de alinhamento (
) no menu flutuante.
-
Selecione o alinhamento desejado.
O painel de design oferece opções adicionais de alinhamento, como alterar a direção do layout automático, alongamento e muito mais.
Para alinhar elementos do painel de design:
-
Clique com o botão direito na seção, coluna ou coluna interna desejada e selecione Editar design.
-
Na seção Layout do painel de design, em Alinhamento de conteúdo, selecione o alinhamento de conteúdo vertical e horizontal desejado.
Ao alinhar o texto do menu flutuante ou do painel de design, ele alinha o texto e o div etiqueta.
Embora seja possível alinhar vários elementos ao mesmo tempo, às vezes você só precisa alterar o alinhamento de um elemento dentro de uma coluna flexível sem afetar os outros elementos.
Para alinhar um único elemento:
-
Selecione o elemento desejado.
-
No menu flutuante, clique no ícone de alinhamento (
Espaço entre elementos
Você pode definir a quantidade de espaço horizontal ou vertical entre as colunas dentro da mesma seção flexível ou widgets dentro de uma coluna, coluna interna ou grade avançada.
Para definir o espaçamento entre os elementos:
-
Clique com o botão direito na seção, coluna, coluna interna ou grade avançada desejada e selecione Editar design.
-
Na Espaçamento seção do painel de design abaixo Espaçamento entre elementos, digite ou use o controle deslizante para definir o valor percentual do espaço horizontal ou o valor em pixels do espaço vertical que você deseja que exista entre os elementos na Espaçamento entre itens campo.
Você pode redefinir o espaçamento das seções e das colunas clicando no Redefinir preenchimento ícone no menu flutuante.
As seções flexíveis criam um layout e alinham objetos automaticamente, o que ajuda você a criar seções bonitas com facilidade e rapidez. No entanto, quando você tem um design mais complexo com objetos sobrepostos ou composição de estilo livre, você precisa usar uma grade avançada. As grades avançadas permitem que você coloque elementos em uma composição de estilo livre sem layout automático. Por isso, recomendamos que você verifique seu design em todos os pontos de interrupção
Aprenda a criar elementos sobrepostos assistindo ao vídeo a seguir ou seguindo as instruções abaixo.
Para criar elementos sobrepostos:
-
Clique para selecionar uma coluna flexível.
-
No menu flutuante ou na coluna flexível, clique no ícone de adição (
).
-
Na seção de elementos flexíveis, selecione Grade avançada (anteriormente denominados contêineres). Para garantir que você siga as melhores práticas, arraste as bordas da grade avançada para que ela abranja toda a largura da coluna flexível
-
Na seção Layout do painel de design, selecione uma grade predefinida de Reorganizar o layout. Ou se você quiser criar sua própria grade, use o Colunase Linhasmenus suspensos de Personalize o layout para adicionar colunas e/ou linhas.
-
No menu flutuante, clique no ícone de adição, selecione os widgets desejados e organize-os na grade avançada.
-
Clique para selecionar um elemento e, na seção Organizar do painel de design, selecione Trazer para a frente, Apresente, Enviar para trás, ou Enviar para trás.
Recomendamos verificar seu design em cada ponto de interrupção ao usar grades avançadas. Com elementos sobrepostos, talvez seja necessário ajustar o design em determinados
No web design, a escolha do sistema de layout apropriado influencia significativamente a experiência do usuário, especialmente ao integrar elementos do layout do widget, como coluna interna e grade avançada, em um site.
Dica
Cursos recomendados da Duda Academy:
-
Elementos de layout. Uma introdução de 2 minutos às colunas internas e grades avançadas, e como elas contêm e organizam outros widgets.
-
Fundamentos do layout. Saiba mais sobre colunas e colunas internas e como alinhar e dimensionar elementos dentro delas.
-
Layouts com grades avançadas. Aprenda a criar layouts complexos com grades avançadas
O widget de coluna interna é recomendado para:
-
Layouts modulares: Perfeito para criar layouts modulares em que o conteúdo flui linearmente, tornando-os ideais para menus de navegação, cartões ou layouts semelhantes a listas.
-
Design responsivo: se destaca na criação de designs responsivos que se adaptam perfeitamente a vários tamanhos de tela e dispositivos, garantindo alinhamento e legibilidade ideais.
-
Conteúdo dinâmico: Adequado para lidar com conteúdo dinâmico que pode variar em comprimento ou tamanho, permitindo que os designers controlem dinamicamente o comportamento e o tamanho dos itens em um contêiner.
-
Layouts aninhados: Os recursos de aninhamento de colunas internas os tornam adequados para criar layouts aninhados complexos. Os designers podem agrupar mais colunas internas no contêiner externo conforme necessário, fornecendo flexibilidade e adaptabilidade na organização das hierarquias de conteúdo. Da mesma forma, o Advanced Grid oferece a capacidade de aninhar widgets, colunas internas e até mesmo grades avançadas adicionais em sua estrutura de layout
O widget de grade avançado é recomendado para:
-
Estruturas de layout complexas: Indispensável para criar layouts complexos com várias linhas e colunas, fornecendo controle preciso sobre o posicionamento e o dimensionamento dos elementos.
-
Projetos não lineares: Perfeito para criar layouts não lineares em que os elementos precisam ser posicionados independentemente da ordem de origem para composições criativas e arranjos assimétricos. Isso significa que os elementos podem ser colocados e organizados com base nos requisitos do projeto.
-
Web Design responsivo: Embora exija um planejamento cuidadoso, o Advanced Grid fornece ferramentas robustas para criar designs responsivos. Os designers podem definir ajustes específicos de layout, como reordenação de colunas, abrangência de itens e lacunas na grade em diferentes tamanhos de janelas de visualização, garantindo uma apresentação ideal
Quando devo usar um widget de coluna interna versus um widget de grade avançado?
As colunas internas são mais adequadas para layouts modulares, especialmente quando você precisa de controle preciso sobre itens individuais em uma seção ou quando deseja um layout automático. No entanto, observe que, embora as colunas internas mantenham a integridade da seção, mover widgets dentro delas é menos flexível em comparação com as grades avançadas
As colunas internas permitem o controle sobre linhas ou colunas individualmente, ideais para layouts unidimensionais. O Advanced Grids permite a manipulação de linhas e colunas simultaneamente, fornecendo controle abrangente sobre toda a estrutura do layout, ideal para layouts bidimensionais
Advanced Grid (CSS Grid) pode ter uma vantagem marginal no tratamento de layouts complexos, otimizando a estrutura do DOM, a eficiência da renderização, o carregamento de recursos, a capacidade de resposta e minimizando as solicitações HTTP. As colunas internas, embora eficazes, podem envolver mais elementos HTML aninhados, potencialmente levando a tempos de renderização um pouco mais lentos em comparação às grades avançadas
Você também pode usar o widget de coluna interna e o widget de grade avançado na mesma seção e em todo o site para obter os designs desejados. Isso envolve encontrar um equilíbrio entre a estrutura geral do layout e os detalhes mais sutis da organização do conteúdo
Compreender as relações entre pais e filhos é fundamental para aproveitar as colunas internas e as grades avançadas de forma eficaz. Nesses sistemas de layout, os elementos de alojamento da coluna atuam como pais, enquanto os elementos internos, como widgets adicionais, são considerados filhos. Essa relação determina como os elementos são posicionados e alinhados dentro do layout, garantindo coerência e integridade estrutural
É importante observar que nem sempre é necessário adicionar colunas internas. Muitas vezes, uma única coluna pode ser suficiente para muitos casos de uso. A coluna interna permite a fácil colocação de elementos na horizontal ou na vertical. Os requisitos incluem uma seção para atuar como contêiner flexível e uma coluna para abrigar colunas internas, com os dois tipos de colunas servindo como itens flexíveis, representando o elemento pai e filho
Advanced Grid permite a colocação de elementos nas direções vertical e horizontal. Os requisitos incluem uma seção para atuar como um contêiner e uma grade avançada para declarar o layout da grade no elemento ou contêiner pai, fazendo com que todos os seus filhos se tornem itens da grade.