Editor X: personalizar o design entre breakpoints com a regra de cascata
3 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
Com o Editor X, você pode criar seu site para diferentes breakpoints (por exemplo: desktop, tablet, mobile). Os breakpoints permitem que você personalize o design e o layout dos seus elementos para uma determinada extensão de tamanhos de tela para que eles sempre fiquem ótimos.
Embora a estrutura e os dados do seu site permaneçam os mesmos em todos os breakpoints, você pode personalizar o design para que fique exatamente como você deseja para cada breakpoint.
Saiba mais sobre:
Design em cascata
O Editor X usa um conceito de cascata entre breakpoints, o que significa que as alterações são aplicadas em cascata. As alterações feitas no breakpoint maior são levadas para os breakpoints menores, mas as alterações nos breakpoints menores não afetam os breakpoints maiores.
Por exemplo, um botão que é colorido na cor roxa no breakpoint maior, é automaticamente roxo no restante dos breakpoints.
Esse é um recurso útil no processo de criação do seu site, já que você geralmente começa com o design do breakpoint maior e depois ajusta o design para os breakpoints menores.
Alterações que se aplicam a todos os breakpoints
As alterações abaixo se aplicam automaticamente a todos os breakpoints e não podem ser personalizadas para uma determinada janela de visualização:
- Dados: ao editar o conteúdo de uma página, você está editando seus dados. Por exemplo, alterar o link ou a fonte de uma imagem na sua página.
- Estrutura: alterações na posição de um elemento na hierarquia da sua página. Por exemplo, quando você move um elemento para um contêiner pai diferente, você está alterando a estrutura da página e isso é refletido em todos os breakpoints.
Criar sobreposições com 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 "puxa" mais os valores de design do breakpoint superior a ele.
Existem vários tipos de ajustes (ou seja, sobreposições) que você pode fazer em um elemento para que ele fique diferente em uma janela de visualização específica:
- Design: altera as propriedades de um elemento, como cor, borda, fonte e muitas outras.
- Layout: altera a posição e o tamanho de um elemento dentro de uma página ou de um contêiner pai Isso inclui encaixe, preenchimento e margens também.
Ao criar sobreposições de layout e design, breakpoints menores também são afetados (veja Design em cascata acima).
Aplicar o design de um elemento a todos os breakpoints
Se você alterar o design ou o layout de um elemento, você pode optar por aplicar o novo design ou layout a todos os breakpoints (incluindo quaisquer breakpoints maiores).
Para aplicar o design de um elemento a todos os breakpoints:
- Clique com o botão direito do mouse no elemento que você criou.
- Clique em Usar em todos breakpoints.
Reverter alterações de design em um breakpoint
Você pode remover a sobreposição a qualquer momento e redefinir as propriedades de design ou layout de um elemento de volta para as propriedades do breakpoint maior.
As propriedades do elemento em breakpoints menores não são afetadas, apenas o breakpoint que contém o elemento que você está revertendo.
Para reverter alterações de design:
- Clique com o botão direito do mouse no elemento do qual você deseja remover a sobreposição.
- Clique em Remover sobreposições.
Quer saber mais?
Veja nossas lições sobre breakpoints (em inglês):
Breakpoints: Parte 1
Breakpoints: Parte 2
Breakpoints: Video Tutorial
Breakpoints: Parte 1
Breakpoints: Parte 2
Breakpoints: Video Tutorial
Esse artigo foi útil?
|