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.
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 aqui.
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.
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 botão Adicionar Bric
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.
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.