A tela de design

A tela de design exibe a saída visual dos sites que são criados com Blocs. Ele permite que os usuários interajam com a página em tempo real, permitindo-lhes selecionar elementos, movê-los e editar seus conteúdos. A tela de design está localizada no centro da janela principal do aplicativo, entre as barras laterais esquerda e direita.

tela de desenho

O Marcador de Seleção

Quando um elemento é clicado na tela de design, ele exibe um marcador azul, denominado marcador de seleção. Dependendo do tipo de objeto selecionado, este marcador também pode conter alguns controles de estilo visual que permitem aos usuários ajustar o tamanho e a posição do elemento selecionado. Nós nos referimos a eles como Controles à mão livre, você pode ler mais sobre eles SUA PARTICIPAÇÃO FAZ A DIFERENÇA.

marcador de seleção

Configurações da tela

A tela de design tem uma variedade de opções que permitem aos usuários controlar a renderização visual do site atualmente aberto. Essas opções podem ser encontradas no inferior esquerdo canto da tela de design.

configurações de renderização

Modo Wireframe

O modo wireframe elimina todos os estilos essenciais não relacionados ao layout, permitindo que os usuários se concentrem no conteúdo e na estrutura da página.

Modo de Contorno

O modo de contorno exibe um retângulo azul fino ao redor das áreas delimitadoras de todos os elementos da página, permitindo que os usuários visualizem a estrutura subjacente.

Modo de local escuro

Dark Site Mode inverte as cores do + botões, tornando-os mais visíveis em fundos escuros. Ele também simula o modo escuro do sistema operacional e aplica o tema escuro classe para a tag do corpo da página atual.

Exibir Adicionar Bloc Botão

Alterne a visibilidade do + botões que são usados ​​para adicionar Blocs para uma página. Esta opção também pode ser ativada e desativada usando o atalho de teclado ⌥+⌘+4.

Exibir Adicionar Bric Botão

Alterne a visibilidade do + botões que são usados ​​para adicionar Brics para uma página. Esta opção também pode ser ativada e desativada usando o atalho de teclado ⌥+⌘+5.

Exibir tags de quebra de linha

Tags de quebra de linha não são visíveis por padrão, esta opção permite que os usuários alternem a renderização visual deles na tela de design.

Filtros de deficiência visual

Essa opção permite selecionar vários tipos de filtros de daltonismo, permitindo que você veja como seu site seria exibido para uma pessoa com deficiência visual.

Dica para iniciantes

As configurações de renderização da tela de design só têm efeito no aplicativo e não têm efeito no site depois de visualizado ou exportado; elas são simplesmente um auxílio de design visual no aplicativo.

Atualizado em 17 de janeiro de 2024

Esse artigo foi útil?

Artigos Relacionados