Os pontos de interrupção (chamados de tamanhos de tela no Editor 2.0) 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.
A seguir estão os pontos de interrupção oferecidos no editor:
-
desktop (1025px-1399px). Esse é o ponto de interrupção padrão.
-
Wide desktop (1400px e acima). Isso só está disponível no modo flexível no Editor Clássico.
-
Tablet (768px-1024px)
-
Celular (767px e abaixo). Sempre recomendamos verificar as alterações do breakpoint móvel em um dispositivo móvel, em vez de redimensionar a tela do desktop.
-
Paisagem móvel (468px-767px). Isso só está disponível no modo flexível no Editor Clássico.
Se o senhor fizer alterações no design, no layout ou no conteúdo do ponto de interrupção padrão desktop, as alterações serão automaticamente aplicadas aos outros pontos de interrupção. Se o usuário alterar o conteúdo, como adicionar um widget, editar texto ou adicionar ou excluir uma seção, a alteração será automaticamente aplicada a todos os outros pontos de interrupção, independentemente do ponto de interrupção em que a alteração foi feita. Por exemplo, se o senhor 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 na posição ou no 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, consulte Como 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 num elemento e substituir o ponto de interrupção principal:
-
Alinhamento
-
Personalizar
-
Tamanho
-
Espaçamento
Após substituir um ponto de interrupção, não é possível reverter a alteração se alterar 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, consulte Como identificar a versão do editor que seu site usa.
Você pode ocultar determinados elementos em pontos de interrupção específicos pelo painel de camadas ou pelo menu flutuante do elemento. É possível, por exemplo, ocultar uma imagem na versão móvel sem afetar outros pontos de interrupção.
Nota
Ao ocultar um elemento com outros elementos aninhados nele, esses elementos aninhados também ficarão ocultos nesse ponto de interrupção. Por exemplo: se você ocultar uma coluna flex, também esconderá os widgets dentro dela.
Para ocultar um elemento num ponto de interrupção específico:
-
Clique na exibição na navegação superior para mudar para o ponto de interrupção onde o elemento deve ser ocultado.
-
Clique no elemento a ser ocultado.
-
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 em Ocultar nesse ponto de interrupção ao 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, consulte Como identificar a versão do editor que seu site usa.
Quase tudo no editor, com exceção do cabeçalho e rodapé, pode ser editado separadamente por dispositivo, tornando o conteúdo específico para esse dispositivo.
Edite conteúdo de acordo com o dispositivo
-
Copie o conteúdo que você gostaria que fosse específico para o dispositivo. Clique com o botão direito do mouse no widget, clique em copiar e, em seguida, clique em colar.
-
Clique com o botão direito do mouse em um dos widget, selecione Hide on device (Ocultar no dispositivo) e, em seguida, selecione o dispositivo no qual deseja ocultar o widget. Por exemplo, definir um botão como Hide on desktop remove o botão do site desktop, mas exibe o botão nos sites para tablets e celulares.
-
Clique no conteúdo original e selecione Ocultar no dispositivo e, em seguida, oculte o conteúdo nos dispositivos nos quais você não deseja alterar esse conteúdo. Por exemplo, se você definir o botão de cópia como Ocultar no desktop, definirá o botão original como Ocultar no tablet e Ocultar no celular. Dessa forma, você terá dois botões diferentes; um exibido no seu desktop e outro no seu tablet e celular.
-
Se você desejar que o conteúdo seja diferente nos três dispositivos, é possível 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 existem dois (ou três) trechos de conteúdo idênticos, mas diferentes, cada um exibido em um dispositivo diferente. Todas as outras alterações feitas nesse conteúdo afetarão somente o dispositivo que estiver definido para exibição.
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 o usuário oculta um widget, uma seção ou qualquer conteúdo do 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 auditoria do site tool identificará esse conteúdo oculto, mesmo que o senhor tenha pensado que ele havia sido removido da página.
Os sites responsivos funcionam em computadores, tablets e celulares. Por esse motivo, nosso editor responsivo permite visualizar o site em cada uma dessas versões durante a edição. Isso permite que você verifique a aparência do site em diferentes dispositivos antes de publicar, garantindo que seus clientes tenham uma experiência positiva, independentemente do dispositivo em que estejam visualizando 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 de dispositivos não são versões separadas do seu site. A exclusão de um elemento em uma visualização (p. ex., celular) removerá 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 para ocultá-lo em um dispositivo específico.
As visualizações do dispositivo 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 graus variados. Para obter a versão mais precisa do site, confira 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, consulte Como identificar a versão do editor que seu site usa.
As edições feitas em um dispositivo aparecem em todos os dispositivos. Por exemplo, quando uma linha é excluída na visualização de tablet do seu site, a linha também não estará presente nas visualizações de desktop e celular do seu site. 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, consulte Alternar visualizações.
Muitas configurações indicarão quais dispositivos elas afetam. Por exemplo, uma configuração pode dizer Change affects desktop and tablet (Alterar afeta desktop e tablet) junto com um ícone que representa os dispositivos.
Existem várias edições no editor que podem ser feitas sem afetar o dispositivo móvel. Elas são:
-
Espaçamento (margens e preenchimento)
-
Posicionamento
-
Largura
-
Altura
-
Plano de fundo do site/página
-
Tamanho da fonte (não afetará o texto que foi editado previamente no dispositivo móvel)
-
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 grandes diferenças entre dispositivos, criando a necessidade de se ter um conjunto diferenciado de recursos ou preferências de design por dispositivo.
Abaixo, está uma lista de widgets com sugestões de design e notas para personalizar certos widgets em determinados dispositivos.
Imagens de fundo
Devido a diferenças drásticas nas proporções entre dispositivos, é importante ter um cuidado especial com a maneira 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 móveis são exatamente o oposto. Você pode criar um fundo de página diferente para cada aparelho 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 Controle deslizante
Assim como no caso da imagem de plano de fundo, as imagens selecionadas para a versão de desktop do widget Controle deslizante podem não ficar tão bem em tablets ou dispositivos móveis. Recomendamos que você:
-
Ajuste o tamanho da moldura para o controle deslizante caber no celular; ou
-
Oculte o controle deslizante no desktop e crie uma versão específica para celular.
Imagens e ícones widget
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.
hover Efeitos no celular ou tablet
Em comparação com os dispositivos de desktop, os tablets e os dispositivos móveis não têm o efeito hover. Qualquer layout ou opção de hover é desativado em tablets/dispositivos móveis.
Widget de mapas
O widget Map tem opções específicas do dispositivo para quando será exibido como um botão ou um mapa.
Formulário de contato widget
Os formulários de contato sempre aparecerão uma entrada por linha no celular.
Widget vCita
O widget de agendamento on-line do vCita tem a opção de mostrar apenas um botão, no dispositivo que o senhor escolher.
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, consulte Como identificar a versão do editor que seu site usa.
Devido à versão da Apple para iPad (iPadOS), iPad exibe a mesma visualização que desktop. No entanto, o senhor pode mudar para o layout responsivo para desktop-tablet para garantir que todas as personalizações sejam visíveis nos sites ativos.
O layout responsivo mostra o cabeçalho de navegação superior em desktops maiores e muda automaticamente para o cabeçalho de menu hambúrguer quando o tamanho da tela tem 1024 px ou menos. O layout de tela pequena pode ser personalizado se necessário.
Nota
-
A maioria dos sites terá esse recurso ativado automaticamente e o botão de alternância indicado abaixo não estará disponível.
-
Nos sites onde esse recurso 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, o redimensionamento do navegador do 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 site responsivos:
-
No painel lateral do editor, clique em Tema e, em seguida, clique em Layout do site.
-
Em desktop, clique na opção Responsive Layout (Layout responsivo ). Você tem as seguintes opções:
-
Selecione um layout de site para mais de 1024 px.
-
Selecione um layout de site para 1024 px ou menos.
-
Depois de mudar para layouts de site responsivos, o senhor pode alternar as visualizações na navegação superior para mostrar Large desktop (acima de 1024px), Small desktop/Tablet (1024px e abaixo) e Mobile. Para obter mais informações, consulte Alternar visualizações.
A seguir estão informações adicionais sobre o tablet responsivo:
-
O CSS é o mesmo tanto para pontos de interrupção de Desktop grande quanto de Desktop pequeno/Tablet, e você não vai ver um CSS de tablet.
-
As transições são mais suaves e não são baseadas em usuário-agente.
-
Antes de ativar o Layout Responsivo, veja se os elementos ocultos no site estão visíveis. Para corrigir, desative o Layout Responsivo e deixe visíveis todos os elementos ocultos. Só então é possível ativar o Layout Responsivo e reocultar os elementos ocultos.
-
A personalização não inclui mais a versão para tablet. Selecionar desktop também afeta a exibição no tablet.
-
Observe que as seguintes personalizações do tablet exibem automaticamente o layout para desktop e não há necessidade de personalizá-las:
-
Layouts da galeria de fotos
-
Regras de personalização do tablet
-
Animações
-