Pontos de interrupção (também chamados de tamanhos de tela) são intervalos de pixels que correspondem à largura de diferentes dispositivos, como desktop, tablet e celular. Quando a largura de um dispositivo está dentro de um intervalo de pixels predefinido de pontos de interrupção, o layout do site é ajustado para que o conteúdo e o design sejam otimizados para o tamanho e a orientação desse dispositivo. Por exemplo, se eu estiver visualizando um site em um computador desktop, posso ver o menu completo do site, mas quando visualizo o site em meu dispositivo móvel, vejo um menu de hambúrguer
Dica
Faça o Duda Academy Tamanhos de tela para design responsivo Um curso para aprender sobre tamanhos de tela, como manipular o layout e ordenar os elementos são exibidos nas versões para tablet e celular do seu site.
A seguir estão os pontos de interrupção oferecidos no editor:
-
Desktop (1025 px - 1399 px). Esse é o ponto de interrupção padrão
-
Desktop amplo (1400px e superior). Isso só está disponível no modo flexível no Editor Clássico.
-
Tablet (768 px - 1024 px)
-
Móvel (767px e abaixo). Sempre recomendamos verificar as alterações do ponto de interrupção móvel em um dispositivo móvel, em vez de redimensionar a tela do desktop
-
Paisagem móvel (468 px - 767 px). Isso só está disponível no modo flexível no Editor Clássico.
Se você fizer design, layout ou conteúdo alterações no ponto de interrupção padrão da área de trabalho, as alterações são aplicadas automaticamente aos outros pontos de interrupção. Se você alterar o conteúdo, como adicionar um widget, editar texto ou adicionar ou excluir uma seção, a alteração se aplicará automaticamente a todos os outros pontos de interrupção, independentemente do ponto de interrupção em que a alteração foi feita. Por exemplo, se você adicionar um widget no ponto de interrupção do tablet, o widget também será adicionado em todos os outros pontos de interrupção
No entanto, se você fizer alterações no posição ou tamanho de um elemento em pontos de interrupção específicos, as alterações não se aplicarão a outros pontos de interrupção. Por exemplo, se você alterar o tamanho de um elemento no ponto de interrupção móvel, a alteração só se aplicará aos pontos de interrupção móveis e do cenário móvel e a nenhum outro ponto de interrupção
Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
Há certos momentos em que você precisa substituir um ponto de interrupção. Por exemplo, no ponto de interrupção principal, uma imagem está à direita de um parágrafo, mas no celular você precisa que a imagem esteja na parte superior e no parágrafo abaixo
A seguir estão as alterações que você pode fazer em um elemento e substituir o ponto de interrupção principal:
-
Alinhamento
-
Posição
-
Tamanho
-
Espaçamento
Depois de substituir um ponto de interrupção, não é possível reverter a alteração alterando o estilo no ponto de interrupção principal no mesmo objeto.
Nota
Esse conteúdo é relevante para o modo Flex no Editor Clássico e no Editor 2.0. Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
Você pode ocultar certos elementos em pontos de interrupção específicos no painel de camadas ou no menu flutuante do elemento. Por exemplo, você pode ocultar uma imagem em dispositivos móveis e isso não afetará outros pontos de interrupção
Nota
Se você ocultar um elemento que tenha outros elementos aninhados dentro dele, todos os elementos aninhados também ficarão ocultos nesse ponto de interrupção. Por exemplo, se você ocultar uma coluna flexível, ela também ocultará os widgets dentro dessa coluna flexível
Para ocultar um elemento em um ponto de interrupção específico:
-
Mude para o ponto de interrupção no qual você deseja ocultar o elemento clicando na visualização na navegação superior.
-
Clique no elemento que você deseja ocultar.
-
Clique no ícone de três pontos horizontais (
) no menu flutuante e selecione Ocultar neste ponto de interrupção. Ou, no painel de camadas, clique emEsconda-se neste ponto de interrupçãoao lado do elemento.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
Quase tudo no editor, com exceção do cabeçalho e do rodapé, pode ser editado por dispositivo, tornando o conteúdo específico para esse dispositivo.
Para editar conteúdo por dispositivo:
-
Copie o conteúdo que você gostaria que fosse específico para o dispositivo. Clique com o botão direito do mouse no widgetcopiar, em seguida, clique emcolar.
-
Clique com o botão direito em um dos widgets e selecioneOcultar no dispositivo, em seguida, selecione o dispositivo em que você deseja que o widget fique oculto. Por exemplo, definir um botão paraOcultar na área de trabalhoremove o botão do desktop, mas exibe o botão nos sites para tablets e dispositivos móveis.
-
Clique no conteúdo original e selecioneOcultar no dispositivoe, em seguida, oculte o conteúdo no (s) dispositivo (s) no (s) qual (is) você não deseja alterar esse conteúdo. Por exemplo, se você definir o botão de cópia comoOcultar na área de trabalho, você definiria o botão original comoOcultar no tableteOcultar no celular. Dessa forma, você terá dois botões diferentes; um exibido no seu desktop e outro no seu tablet e celular.
-
Se quiser que o conteúdo seja diferente em todos os três dispositivos, você pode copiá-lo novamente (para ter um total de três cópias do mesmo conteúdo) e exibir um botão diferente em cada dispositivo.
-
Agora você tem dois (ou três) conteúdos idênticos, mas diferentes, cada um exibido em um dispositivo diferente. Quaisquer outras alterações feitas nesse conteúdo afetarão apenas o dispositivo no qual ele está configurado para ser exibido.
O conteúdo oculto ainda pode ser exibido no código do site ativo (após a publicação/republicação). Isso é esperado e devido à tecnologia usada. Quando você oculta um widget, seção ou qualquer conteúdo no editor em um dispositivo específico, nós o ocultamos usando CSS Media Queries. Isso significa que o HTML (embora oculto no site) ainda existe na página da web quando um visualizador visualiza o conteúdo. Às vezes, isso pode causar um problema em que uma ferramenta de auditoria que escaneia o site identifica esse conteúdo oculto, mesmo que você tenha pensado que ele foi removido da página
Os sites responsivos funcionam em computadores, tablets e dispositivos móveis. Por esse motivo, nosso editor responsivo permite que você visualize o site em cada uma dessas visualizações durante a edição. Isso permite que você verifique a aparência do seu site em diferentes dispositivos antes de publicá-lo, garantindo que seus clientes tenham uma experiência positiva, independentemente do dispositivo que estejam usando para visualizar o site.
Para alternar as visualizações do dispositivo, clique em um dos botões do dispositivo na barra de navegação superior:
As diferentes visualizações do dispositivo não são versões separadas do seu site. A exclusão de um elemento em uma visualização (por exemplo, em dispositivos móveis) remove esse elemento de todo o site (desktop, tablet e celular). Em vez de excluir, clique com o botão direito do mouse no elemento e selecione ocultar um elemento em um dispositivo específico
As visualizações de dispositivos nem sempre refletem exatamente o que você vê em um dispositivo real. Recursos como fontes, tamanho da janela do dispositivo, interface do usuário e comportamento do navegador podem fazer com que essas visualizações sejam imprecisas em vários graus. Para obter a versão mais precisa do site, verifique em um dispositivo real.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
edições feitas em um dispositivo aparecem em todos os dispositivos. Por exemplo, quando uma linha é excluída na visualização do seu site para tablet, a linha também estará ausente nas visualizações do seu site para computador e dispositivos móveis. Isso ocorre porque o conteúdo pode ser compartilhado em todos os dispositivos. No entanto, talvez você queira diferenciar qual conteúdo aparece em quais dispositivos. Você pode usar nossos recursos de edição por dispositivo para fazer isso e oferecer aos visitantes conteúdo apropriado para o dispositivo a partir do qual eles estão acessando seu site
Ao fazer edições em um dispositivo específico, geralmente é necessário alternar as visualizações. Para obter mais informações, consulteAlternar visualizações.
Muitas configurações indicarão quais dispositivos elas afetam. Por exemplo, uma configuração pode indicar que a alteração afeta o desktop e o tablet junto com um ícone que representa os dispositivos.
Há várias edições no editor que podem ser alteradas sem afetar o celular. Esses são:
-
Espaçamento (margens e preenchimento)
-
Posicionamento
-
Largura
-
Altura
-
Plano de fundo do site/página
-
Tamanho da fonte (isso não afetará o texto que já foi editado em dispositivos móveis)
-
Alterações no cabeçalho e no rodapé na visualização do tablet não afetam a visualização no desktop e no celular
Todas as outras edições que você fizer na visualização de cada dispositivo afetarão outros dispositivos.
Embora alguns widgets funcionem bem em todos os dispositivos, existem algumas diferenças drásticas entre os dispositivos, o que cria a necessidade de um conjunto diferente de recursos ou preferências de design por dispositivo.
Abaixo está uma lista de widgets com sugestões de design e notas para personalizar determinados widgets em determinados dispositivos.
Imagens de fundo
Devido às diferenças drásticas nas proporções entre dispositivos, é importante ter um cuidado especial com a forma como você cria imagens em seu site. Por exemplo, um plano de fundo de página inteira em uma linha pode parecer ótimo em um dispositivo desktop, mas horrível em um dispositivo móvel. Isso pode ocorrer porque os dispositivos desktop são mais adequados para imagens de maior largura, enquanto os dispositivos móveis são exatamente o oposto. Você pode definir um plano de fundo de página diferente por dispositivo nas configurações do tema do site. É recomendável usar uma imagem de fundo ampla para desktop e uma estreita para celular ou tablet.
Widget deslizante
Assim como na imagem de fundo, as imagens que você selecionou para a versão desktop do widget deslizante podem não parecer tão boas para tablet ou desktop. É recomendado para:
-
Ajuste o tamanho da moldura para que o controle deslizante caiba no celular ou
-
Oculte o controle deslizante no desktop e, em vez disso, crie uma versão específica para dispositivos móveis.
Widget de imagens e ícones
O tamanho do widget de imagem não é ajustado automaticamente na versão móvel. É importante verificar em seus dispositivos móveis onde o widget de imagem é usado para fazer os ajustes necessários para caber
Efeitos de foco no celular ou tablet
Em comparação com dispositivos desktop, tablets e dispositivos móveis não têm nenhum efeito de foco. Qualquer layout ou opção de foco está desativado em tablets
Widget de mapas
O widget Mapa tem opções específicas do dispositivo para quando ele será exibido como um botão ou um mapa.
Widget de formulário de contato
Os formulários de contato sempre aparecerão uma entrada por linha no celular.
Widget vcita
O widget de agendamento on-line vcita tem a opção de mostrar apenas um botão, no dispositivo de sua escolha.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, vejaComo identificar a versão do editor que seu site usa .
Devido aLançamento da Apple para iPads (iPadOS), os iPads exibem a mesma visualização do desktop. No entanto, você pode mudar para o layout de desktop e tablet responsivo para garantir que todas as personalizações sejam
layout responsivo mostra o cabeçalho de navegação superior em desktops maiores e muda automaticamente para o cabeçalho do menu de hambúrguer quando o tamanho da tela é de 1024 px ou menos. O layout da tela pequena pode ser personalizado, se necessário.
Nota
-
A maioria dos sites terá esse recurso ativado automaticamente e a opção indicada abaixo não estará disponível.
-
Para sites em que isso não foi ativado, uma vez ativado, a opção de desativá-lo será removida.
-
A visualização móvel de um site criado no editor clássico, incluindo o cabeçalho, é determinada pelo dispositivo usado, não pelo tamanho da janela do navegador. Como resultado, redimensionar seu navegador de desktop para simular uma janela de visualização móvel não representará com precisão a aparência do site ou do cabeçalho em dispositivos móveis reais. Para ver a verdadeira apresentação móvel do site, incluindo o cabeçalho, é melhor visualizá-las diretamente em um dispositivo móvel.
Para usar layouts de sites responsivos:
-
Clique Layout do site.
-
Em Desktop, clique noLayout responsivoalternar. Você tem as seguintes opções:
-
Selecione um layout de site acima de 1024 px.
-
Selecione um layout de site para 1024px e abaixo.
-
Depois de mudar para layouts de site responsivos, você pode alternar as visualizações na navegação superior para mostrar Desktop Large (acima de 1024px), Small Desktop/Tablet (1024px e abaixo) e Mobile. Para obter mais informações, consulteAlternar visualizações.
A seguir estão informações adicionais sobre o tablet responsivo:
-
O CSS é o mesmo para pontos de interrupção de desktops grandes e pequenos de desktop/tablet, e você não verá um CSS de tablet.
-
As transições são mais suaves e não são baseadas em agentes de usuário.
-
Se você tiver elementos ocultos em seu site, verifique se eles estão visíveis antes de ativar o layout responsivo. Para corrigir, desative o Layout Responsivo e exiba todos os elementos ocultos. Em seguida, você pode ativar o layout responsivo e ocultar novamente os elementos ocultos
-
A personalização não mostra mais um tablet. A seleção da área de trabalho também afeta as visualizações do tablet.
-
Observe que as seguintes personalizações do tablet exibem automaticamente o layout da área de trabalho e não há necessidade de personalizá-las:
-
Layouts de galeria de fotos
-
Regras de personalização de tablets
-
Animações
-