Editor do Wix Studio: definir o tamanho dos elementos
10 min de leitura
À medida que você cria um site, você quer ter certeza de que ele fica bom em todos os tamanhos de tela. No Editor do Wix Studio, você define o tamanho em px* e o comportamento responsivo cuida do resto.
A maioria dos elementos vem com um comportamento padrão (por exemplo: dimensionar proporcionalmente) que controla a forma como ele é redimensionado em outras telas. Você sempre pode alterar o comportamento padrão para um que melhor atenda às suas necessidades.
px* é uma unidade de tamanho fluida, relativa ao tamanho de edição.
Neste artigo, saiba como o dimensionamento funciona no Editor do Wix Studio:
Dica:
Você pode definir o tamanho do elemento e o comportamento responsivo de acordo com o breakpoint.
Redimensionar um elemento
Selecione um elemento na tela e arraste as alças laterais para alterar seu tamanho. Isso define como o seu elemento vai ficar no breakpoint atual.
No painel Inspetor, você pode verificar a largura e a altura exatas do elemento em pixels. Se necessário, você pode inserir seus próprios valores de largura/altura.
Deixe o Inspetor calcular por você:
Para sua conveniência, você pode usar adição (+), subtração (-), multiplicação (*) e divisão (/) ao digitar valores de tamanho. Por exemplo, torne um elemento 3 vezes mais largo ao adicionar *3 ao lado da largura atual.
Está enfrentando problemas com redimensionamento?
Confira este vídeo de solução de problemas (em inglês) para saber como resolver problemas com seções e contêineres que não estão sendo redimensionados.
Redimensionar elementos de mídia
Ao redimensionar um elemento de mídia, como uma imagem ou um vídeo, você pode bloquear a proporção para que a largura e a altura sempre mantenham a proporção em relação a outra.
Quais elementos de mídia incluem esta opção?
Isso significa que, quando você altera a largura, a altura se ajusta automaticamente (e vice-versa) para manter a forma original do elemento.
Para bloquear a proporção:
- Selecione o elemento de mídia relevante.
- Clique na seta Abrir inspetor
no canto superior direito.
- Clique no ícone Bloquear proporção
em Tamanho.
- Redimensione o elemento seguindo uma das etapas abaixo:
- Insira o valor de largura/altura no Inspetor (o outro valor se ajusta automaticamente).
- Arraste as alças ao redor do elemento na tela.
Observação:
Essa opção não está disponível no modo de dimensionamento avançado.
Definir o tamanho em px*
px* é uma unidade de medida fluida no Editor do Wix Studio. Ela permite que você edite o tamanho usando uma medida conhecida (pixels), enquanto a medida real nos bastidores é responsiva.
Em outras palavras, você projeta em pixels que representam o tamanho na tela e o elemento permanece responsivo. Os valores específicos e as unidades de tamanho dependem do comportamento responsivo que você escolher. Passe o mouse sobre px* para ver o cálculo e a unidade de tamanho responsiva que está sendo usada.
No exemplo abaixo, a largura do contêiner na tela atual é de 1.000 px*. A unidade real é a porcentagem, então a largura é relativa a todas as telas (79,1%).
Qual é a diferença entre px* e px?
Ambos permitem que você edite em pixels, porém:
- px* significa que o tamanho que você vê é relevante para o breakpoint em que você está trabalhando no momento.
- px significa que o tamanho é fixo nos breakpoints.
Escolher o comportamento responsivo de um elemento
Quando você adiciona um elemento à página, ele já vem com um comportamento responsivo integrado. Isso significa que você não precisa se preocupar com a aparência do elemento em telas diferentes. O comportamento responsivo garante que ele seja redimensionado.
No entanto, você pode querer mudar o comportamento responsivo, se você encontrar um que seja mais adequado para o seu design.
Qual é a diferença entre os comportamentos disponíveis?
Observação:
O comportamento responsivo selecionado afeta as unidades de tamanho em uso. Por exemplo, selecionar um comportamento responsivo Fixo altera a medida de px* para px.
Para escolher um comportamento responsivo diferente:
- Selecione o breakpoint relevante.
- Selecione o elemento.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Selecione uma opção no dropdown Comportamento responsivo.
Você está encontrando espaços indesejados no site online?
Confira este vídeo de solução de problemas (em inglês) para saber como o comportamento responsivo pode afetar, e resolver, esse problema.
Usar medidas avançadas de tamanho
O dimensionamento avançado permite uma personalização maior do tamanho do elemento por breakpoint. Em vez de trabalhar com px* e escolher um comportamento responsivo, esse modo permite que você veja as medidas que estamos usando nos bastidores (por exemplo: px, %, vh) e ajuste-os como preferir.
Quais são as medidas disponíveis?
A ativação das medidas avançadas se aplica ao elemento específico que você seleciona em todos os breakpoints. Esse modo permanece ativado para esse elemento, para facilitar o acesso, mas você pode desativá-lo a qualquer momento.
Para acessar e editar as medidas avançadas:
- Selecione o breakpoint relevante no Editor.
- Selecione o elemento.
- Clique na seta Abrir inspetor no canto superior direito.
- Clique no ícone Mais ações
ao lado de Tamanho. - Ative a alavanca Medidas avançadas.
- Edite as medidas conforme necessário: largura, altura e valores mínimo e máximo.
Dica: mude para uma unidade diferente (por exemplo: de px para %) ao clicar nela no Inspetor. Isso abre uma lista das medidas disponíveis para o elemento.
Definir a altura da seção:
Não recomendamos definir a altura em pixels, pois isso pode fazer com que os elementos não sejam exibidos como esperado. Por exemplo, eles podem transbordar ou aparecer cortados.
Definir a preferência de dimensionamento
Escolha a preferência de dimensionamento para o site que você está criando. Se você gosta de trabalhar com medidas CSS avançadas, você pode ativar o dimensionamento avançado no Editor. Como alternativa, se você preferir escolher o modo de dimensionamento por elemento, você pode manter assim.
Para definir as preferências de dimensionamento para um site:
- Clique no ícone Wix Studio
no canto superior esquerdo. - Passe o mouse sobre Visualizar.
- Passe o mouse sobre Preferência de dimensionamento.
- Escolha seu preferido:
- Sempre mostrar avançado: as medidas no Inspetor são sempre definidas como avançadas.
Observação: esse modo desativa a opção de reverter elementos específicos do dimensionamento avançado. - Definir por elemento: você define a preferência de tamanho para cada elemento.
- Sempre mostrar avançado: as medidas no Inspetor são sempre definidas como avançadas.
Perguntas frequentes
Clique nas perguntas abaixo para saber mais sobre medidas.
Eu defini uma seção para dimensionar proporcionalmente, mas os elementos não dimensionam. Por quê?
Quando devo usar as medidas avançadas?
Todos os comportamentos responsivos estão disponíveis para elementos relacionados aos apps do Wix?
Esse artigo foi útil?
|