Editor do Wix Studio: escolher entre ferramentas baseadas em caixa flexível e grade

O Editor do Wix Studio oferece ferramentas de layout poderosas para organizar elementos, cada uma adaptada às necessidades de design específicas. Essas ferramentas são baseadas em duas tecnologias CSS comuns: Grade e Caixa flexível. Entender essa diferença pode ajudar você a planejar os melhores layouts responsivos para mostrar o conteúdo do seu cliente. 

Neste artigo, detalharemos as ferramentas de layout por tipo, explicaremos seus principais recursos e ajudaremos você a decidir qual é a melhor para o seu negócio.

As grades são um modelo CSS bidimensional que usa linhas e colunas para organizar elementos dentro de células predefinidas. Elas são particularmente eficientes para criar layouts responsivos e modulares com controle preciso.

As seções em branco vêm com uma grade integrada, que contém uma única célula (abrigando a seção inteira). Divida a grade em mais células conforme necessário para dar uma estrutura responsiva ao conteúdo. Após decidir seu layout para desktop, você pode escolher um diferente para breakpoints menores.

Uma grade CSS avançada oferece total liberdade para criar layouts complexos em grades de seção, contêineres, janelas, caixas flexíveis e itens de repetidor. Você pode definir o tamanho exato de cada célula, em cada breakpoint, usando medidas responsivas (por exemplo: fr, mín/máx, %). 

Melhor para: layouts complexos que exigem ajustes dos mínimos detalhes.

Um contêiner é uma ferramenta de layout simples, mas essencial. Quando você anexa elementos à caixa contêiner, ela se torna automaticamente seu elemento pai e define sua estrutura. 

Melhor para: layouts autônomos e isolados dentro de seções. 

A caixa flexível é um modelo CSS unidimensional otimizado para layouts em que os elementos precisam se ajustar dinamicamente dentro de um contêiner pai. Com as ferramentas de caixa flexível, os elementos são "dobrados" perfeitamente para se ajustar ao espaço atribuído, seja ao expandir, diminuir ou agrupar.

Uma pilha é um contêiner flexível invisível que garante o alinhamento vertical ou horizontal dos elementos.  O empilhamento mantém as margens entre os elementos intactas e evita que os elementos se sobreponham em telas menores.

Além disso, você pode definir a ordem dos elementos da pilha por breakpoint para garantir que o layout tenha uma aparência refinada em todos os tamanhos de tela. 

Melhor para: layouts autônomos e isolados dentro de uma seção, em que os elementos precisam de alinhamento preciso ao longo de um único eixo horizontal ou vertical. 

Uma caixa flexível é um layout flexível pronto em que os itens são ajustados automaticamente para caber em todas as telas. Ela é composta de contêineres responsivos, com vários tipos de exibição para se adequar ao seu conteúdo específico (por exemplo: mosaico, slider, colunas). 

Você pode escolher um tipo de exibição diferente para cada janela de visualização (por exemplo: layouts do slider funcionam muito bem para dispositivos móveis) e também definir uma ordem de itens específica.

Melhor para: organizar um grande conteúdo em um layout limpo e conveniente. 

Um repetidor é uma lista de itens que têm o mesmo design e layout, mas conteúdo diferente em cada um. As alterações no layout e design são aplicadas automaticamente, garantindo a uniformidade visual." 

O que torna os repetidores únicos é a capacidade de conectá-los às suas coleções de conteúdo. Isso permite que você gerencie e atualize o conteúdo do back-end sem afetar o design real, tornando-o a melhor ferramenta de layout baseada em dados. 

Melhor para: listas ou qualquer conteúdo que você deseja organizar em itens com um visual perfeitamente consistente.

Antes de selecionar uma de nossas ferramentas, planeje o layout desejado para cada tamanho de tela. Em seguida, você pode escolher uma ferramenta de layout que inclui o que você precisa.

Cada ferramenta de layout foi projetada para acomodar diferentes quantidades e tipos de conteúdo. Por exemplo, um contêiner funciona bem para conteúdo menor e focado, enquanto uma grade de seção grande é mais adequada para organizar layouts complexos. 

Da mesma forma, embora caixas flexíveis e repetidores sejam excelentes para apresentar grandes quantidades de conteúdo de forma organizada, eles servem a propósitos diferentes. Os repetidores simplificam a consistência ao aplicar o mesmo layout e design em todos os itens, enquanto as caixas flexíveis dão a você liberdade para personalizar cada item individualmente.

Os elementos caixa flexível e grade são diferentes na forma como o conteúdo se ajusta a diferentes tamanhos de tela. As grades mostram um número diferente de linhas e colunas para caber em telas menores. Nas ferramentas baseadas em caixa flexível, o conteúdo ajusta e/ou reordena automaticamente para caber na tela do visitante.

Apenas repetidores são compatíveis com essa opção, então escolha essa ferramenta se precisar mostrar conteúdo de coleções do CMS. 

Como alternativa, você pode conectar elementos específicos (por exemplo: texto, imagem) à coleção e adicioná-los a um contêiner ou pilha para manter o layout organizado.