Editor do Wix Studio: solução de problemas com diferenças entre o editor e o site online
5 min
Neste artigo
- Corresponder os tamanhos do breakpoint e da janela de visualização
- Alinhar unidades de margem
- Alinhar comportamentos responsivos
- Verifique a visibilidade do elemento
Ao visualizar a versão publicada de um site do Studio Editor, você pode notar que ele parece diferente do que aparece no seu editor. Essas diferenças geralmente são mínimas, mas podem fazer com que elementos pareçam desalinhados ou cortados.
Geralmente, essas diferenças são causadas por algumas das configurações do elemento (dimensionamento, posição e comportamentos) nas janela de visualização. Use as sugestões neste artigo para encontrar possíveis resoluções e manter a consistência entre os tamanhos de tela.
Editou o site recentemente?
Recomendamos verificar se você publicou todas as suas alterações e se está visualizando a versão mais recente do site. Você também pode usar as ferramentas do navegador para verificar diferentes janelas de visualização em um único dispositivo.
Corresponder os tamanhos do breakpoint e da janela de visualização
Se o site online parecer diferente do que você vê no seu editor, isso pode estar relacionado a breakpoints e ao tamanho de edição.
Breakpoints são faixas de tamanho da tela que você usa para fazer o design de um site para diferentes dispositivos (ou seja, janelas de visualização). Você pode definir um tamanho de edição específico dentro dessa faixa. Por exemplo, em um breakpoint de 320-750px, você pode definir o tamanho de edição como 500px.
As janela de visualização que ficam fora das faixas definidas não são otimizadas e podem ter problemas de alinhamento e layout. Se você notar um problema com uma janela de visualização específica, recomendamos definir o tamanho de edição para corresponder e fazer ajustes.
Para definir o tamanho de edição:
- Vá para a página e o breakpoint relevantes no editor.
- Clique no tamanho de edição atual na parte superior.
- Insira o novo valor ao lado de Tamanho de edição.
- Clique em Aplicar.
- (Opcional) Ajuste o site para que ele fique como você deseja.
Encontrou outros problemas entre os breakpoints?
Use nosso guia para solucionar problemas de elementos desalinhados, dimensionamento de texto e muito mais.
Alinhar unidades de margem
O uso de diferentes unidades de margem entre elementos irmãos (elementos que compartilham uma seção/contêiner pai) pode fazer com que o conteúdo fique desalinhado ou distorcido. Aconselhamos usar as mesmas unidades de margem (%, px, px*, etc.) para todos os elementos irmãos em um único contêiner ou seção.
Para alterar as unidades de margem de um elemento:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Role para baixo até Posição.
- Clique no dropdown ao lado de Margens.
- Selecione a unidade relevante.
Alinhar comportamentos responsivos
Elementos pai e filho com comportamentos responsivos conflitantes podem causar problemas com o conteúdo no site publicado.
Vamos imaginar um botão anexado a um contêiner. O comportamento responsivo do botão é Fixo e o contêiner é definido para Dimensionar proporcionalmente. Como o botão é fixo, ele não é redimensionado com seu contêiner pai, o que pode causar espaços indesejados, elementos sobrepostos e elementos cortados no site online. Isso também pode acontecer quando um dos elementos tem o comportamento responsivo misto.
Para resolver esse problema, recomendamos alinhar os comportamentos responsivos dos elementos.
Para alterar o comportamento responsivo de um elemento:
- 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 que se alinha com o elemento pai ou filho.
Observação:
Essas diferenças também podem afetar a altura dos elementos, resultando em espaços indesejados no site. Saiba mais sobre como solucionar problemas de intervalos.
Verifique a visibilidade do elemento
Você pode perceber que pode ver um elemento em alguns tamanhos de tela, mas não em outros. Isso geralmente ocorre porque o elemento foi ocultado de determinados breakpoints. Você pode usar o painel Camadas para localizar o elemento e mostrá-lo nas janelas de visualização que você deseja.
Para verificar a visibilidade de um elemento:
- Vá para o seu editor e abra a página relevante.
- Selecione um breakpoint na parte superior do seu editor.
- Clique em Camadas
no lado esquerdo. - Localize o elemento oculto na lista.
- (Opcional) Clique no ícone Mostrar
.
Observação:
Alterações como excluir um elemento ou movê-lo para uma seção/contêiner diferente se aplicam a todos os breakpoints, não importa em qual você está trabalhando. Se você quiser mostrar um elemento apenas em determinados breakpoints, você pode ocultá-lo através do menu que aparece ao clicar com o botão direito do mouse.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
