Editor X: sobre o design responsivo

Pense em quantos dispositivos você usa para navegar na web e quantos dispositivos existem no mercado. Agora pense em todas as diferentes resoluções que esses dispositivos têm. São muitas possibilidades...

O Editor X permite que você crie sites totalmente responsivos que se ajustam automaticamente à tela ou ao dispositivo em que estão sendo visualizados para oferecer a melhor experiência ao usuário. Usando a mais recente tecnologia de design, como grades e layouts flexíveis, dimensionamento fluido e personalização por breakpoints, você pode garantir que seu site fique exatamente como você quer em qualquer dispositivo que ele seja visualizado.

Neste artigo, explicaremos os recursos do Editor X que podem ajudar você a criar um site responsivo:

O dimensionamento fluido e as unidades de medida relativas podem ajudar você a criar um design que se ajusta perfeitamente a qualquer janela de visualização. Ao fazer o design no painel Inspetor, você pode escolher entre as opções de dimensionamento Fixo e Fluido. Fixo significa que o tamanho do elemento permanece o mesmo, independentemente da janela de visualização, enquanto Fluido significa que seu elemento é redimensionado automaticamente de acordo com o breakpoint e suas preferências.

Suas camadas são estruturadas de acordo com o modelo de herança, onde a camada superior atua como uma camada pai (parent) para a camada inferior (ou seja, o filho (child)). Para garantir que seus elementos não se sobreponham tenham um bom visual em todos os tamanhos de tela, defina o tamanho das camadas de cima para baixo.

Usando medidas relativas como a porcentagem (%), você pode fazer com que os elementos filhos (child elements) sejam redimensionados em relação aos seus elementos pais (parent elements). Por exemplo, defina uma seção para ocupar 50% da largura da página, independentemente do tamanho da tela. Você pode fazer o mesmo com qualquer elemento ou contêiner dentro da seção para tornar sua página o mais responsiva possível.

Breakpoints são os pontos em que seu conteúdo muda para que seus visitantes sempre vejam a melhor versão do seu site, independentemente do dispositivo em que estão utilizando.

Seu espaço de trabalho do Editor X já inclui os breakpoints mais comuns (desktop, tablet e mobile), mas você pode adicionar até três breakpoints personalizados (para um total de seis breakpoints). Isso permite que você adapte seu site a tamanhos de tela individuais, definindo sobreposições de design. Reorganize seus layouts, escolha o que mostrar ou ocultar e personalize o design para cada tamanho de janela de visualização.

As grades CSS são um recurso de layout avançado que permite que você posicione com precisão seus elementos dentro de qualquer contêiner ou seção.

Usando grades, você não precisa se preocupar com elementos sobrepostos em diferentes tamanhos de tela. Após adicionar um elemento a uma das células, ele é automaticamente encaixado nos cantos mais próximos para que sempre fique na posição. Se necessário, você pode substituir o encaixe automático e ajustá-lo manualmente.

Você pode criar grades individuais para cada breakpoint, dando a você total liberdade para criar layouts diferentes para cada tamanho de tela.

Flexbox é um contêiner CSS criado em torno de elementos para garantir que eles sejam organizados automaticamente de acordo com o tamanho da tela. É uma ferramenta útil em design responsivo que evita que as coisas fiquem confusas, como quando os elementos se sobrepõem ou mudam sua ordem.

Use nossos recursos avançados de tecnologia Flexbox, como Layouters ou Repetidores, para ajustar automaticamente seu conteúdo para todos os tamanhos de tela, sem precisar pensar em breakpoints. Você também pode empilhar qualquer grupo de elementos para criar um contêiner flexível ao redor deles. Por definição, o contêiner é transparente, mas você pode alterar seu design conforme necessário.