Editor do Wix Studio: personalizar o design entre breakpoints

O Editor do Wix Studio permite que você personalize os sites por breakpoint para que eles sempre tenham uma boa aparência. Os breakpoints são intervalos de tamanho de tela que representam as possíveis telas e dispositivos que os visitantes tendem a usar (por exemplo: tablet, celular).

O design que você cria no desktop atinge o tablet e o mobile. No entanto, você pode criar sobreposições para fazer com que o design se encaixe em telas menores. Clique em um ícone de breakpoint na parte superior para começar. 

O Editor do Wix Studio vem com 3 breakpoints integrados que você pode personalizar e redefinir a qualquer momento:

Você define os breakpoints separadamente para cada página do site e cada seção master. Isso significa que uma seção master e a página em que ela está podem ter breakpoints completamente diferentes. 

Por exemplo, a página abaixo tem 5 breakpoints definidos:

... Enquanto o cabeçalho master nessa página tem 3 breakpoints definidos: 

O Editor do Wix Studio usa um conceito de cascata quando se trata de criar o design entre breakpoints. As alterações feitas em breakpoints maiores atingem breakpoints menores, mas as alterações em breakpoints menores não afetam breakpoints maiores. 

Por exemplo, um botão que foi projetado para ser roxo no desktop fica automaticamente roxo no tablet e no mobile. Se você alterar a cor no mobile, o botão permanece roxo no tablet e no desktop.

Alguns tipos de ações se aplicam automaticamente a todos os breakpoints e não podem ser personalizados para uma determinada janela de visualização.

Ao editar o conteúdo de um elemento, você está alterando seus dados. Por exemplo, a alteração do link de um elemento ou da origem de uma imagem se aplica a todos os breakpoints. 

Outro exemplo é quando você substitui ou exclui elementos da página. O elemento é automaticamente substituído/excluído em todos os breakpoints.

Alterações no lugar de um elemento na hierarquia da página. Por exemplo, quando você empilha elementos juntos ou move um elemento para uma célula, você está alterando a estrutura da página e isso se reflete em todos os breakpoints. 

Uma sobreposição ocorre quando você faz alterações no design de um elemento em um breakpoint específico. Ou seja, ele não receber mais valores de design do breakpoint maior acima dele. No entanto, essas sobreposições atingem breakpoints menores.

Existem 2 tipos de sobreposições que você pode criar:

Você pode redefinir o design e o layout de um elemento de volta para suas propriedades no maior breakpoint.

As propriedades do elemento em breakpoints menores não são afetadas, apenas o breakpoint que contém o elemento que você está revertendo. Por exemplo, se você estiver removendo sobreposições no tablet, isso não afeta os dispositivos móveis.