Editor X: definir o tamanho do elemento
5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
Usando as opções no painel Inspetor, você pode definir o tamanho do seu elemento exatamente como deseja. Insira valores fixos de largura e altura para obter uma precisão perfeita ou use medidas fluidas para que seu elemento se ajuste perfeitamente a qualquer tamanho de tela.
Neste artigo, saiba mais sobre como dimensionar seus elementos no Editor X:
Quer saber mais?
Confira nossa aula sobre dimensionamento na Editor X Academy (em inglês).
Estruturar um site responsivo
Antes de adicionar conteúdo ao seu site, é importante criar uma estrutura e construir suas camadas de acordo com essa lógica. Suas camadas são organizadas em um modelo de herança, o que significa que a camada superior atua como o pai (parent) da camada inferior.
Confira um exemplo
O tamanho de um elemento pai (parent element) pode afetar seus elementos filhos (child elements), pois eles são redimensionados em relação ao pai. Para garantir que seu design permaneça responsivo, defina o tamanho e o posicionamento de suas camadas de cima para baixo.
Trabalhando com breakpoints:
Você pode definir diferentes opções de dimensionamento para seus elementos em cada breakpoint.
Dimensionamento fixo vs. fluido
Ao dimensionar um elemento, você pode escolher se deseja usar o dimensionamento fixo ou fluido no painel Inspetor:
- Fixo: essa opção mantém a largura do elemento a mesma em todas as janelas de visualização. Ele não diminui ou aumenta de acordo com o tamanho da tela.
- Fluido: essa opção ajusta a largura, e às vezes a altura, dos elementos dependendo do tamanho da tela.
- Dimensionar proporcionalmente: marque essa caixa de seleção para que a altura e a largura do seu elemento mantenham uma proporção quando redimensionado. Quando essa opção não está selecionada, isso significa que a largura do seu elemento é ajustada de acordo com o tamanho da tela enquanto sua altura permanece a mesma.
Dica:
Você também pode arrastar as alças ao redor do seu elemento para alterar suas dimensões.
Unidades de medida disponíveis
No Editor X, você pode usar uma variedade de unidades de medida CSS para dimensionar seus elementos. O tipo de medidas que você deseja usar depende de como você deseja que os elementos sejam redimensionados à medida que a largura da janela de visualização muda.
Clique abaixo para saber mais sobre cada unidade de medida e quando usá-la:
Auto
Pixels (px)
Porcentagem (%)
Largura da janela (vw)
Altura da janela (vh)
Valores mínimo e máximo
Conteúdo máx. (max-c)
Usar o cálculo para determinar o tamanho dos seus elementos
O cálculo é uma ferramenta útil quando você precisa dimensionar com precisão um elemento ao usar unidades de medida fluidas. Usando princípios matemáticos, você pode escrever uma "fórmula" que determina a largura ou a altura de um elemento. Você pode até combinar diferentes medidas nesse cálculo (por exemplo: vh e px).
Confira como
na parte superior do Editor X.Por exemplo, use o cálculo para criar um cabeçalho (100px) e uma seção que, juntos, ocupam a altura exata da janela de visualização (100vh) em cada tamanho de tela. Você pode definir a altura da seção para (100vh - 100px), para que o cabeçalho seja sempre levado em consideração no cálculo (100px).
Esticar um elemento
Estique seu elemento para cobrir todo o background do parent container. Ao usar grades, você pode esticar o elemento para cobrir uma célula específica ou toda a área da grade.
Esticar um elemento define sua largura e altura como Auto para que o elemento e seu contêiner sejam redimensionados de acordo com a janela de visualização. Como o elemento é esticado, seus valores de largura e altura seriam os mesmos que seu parent container.
Saiba mais:
Leia mais sobre como criar um site responsivo usando as ferramentas do Editor X:
Esse artigo foi útil?
|