Tudo o que você precisa saber sobre pontos de interrupção personalizáveis ​​do Divi 5

Prepare -se para melhorar drasticamente a maneira como você constrói sites. O Divi 5 possui um novo recurso emocionante, Points de interrupção personalizável, o que oferece um controle incrível sobre a capacidade de resposta do seu site. Com os novos pontos de interrupção personalizáveis ​​da Divi 5, você pode criar uma experiência perfeita em todos os dispositivos. Esteja você projetando uma tela de desktop enorme ou a menor tela móvel, o Divi 5 ajuda a garantir que seu site pareça perfeito do Pixel.

Neste post, abordaremos tudo o que você precisa saber sobre esse novo recurso e mostrar a você como usá -lo!

Confira o vídeo a seguir para ver o novo recurso em ação.

Baixe o Divi 5 com pontos de interrupção personalizáveis

Com pontos de interrupção personalizáveis, agora você pode ajustar a capacidade de resposta do seu site para se adequar melhor aos diferentes tamanhos de tela. Esteja você projetando para desktops ultra largues ou telas móveis amplas, o Divi 5 coloca o controle em suas mãos.

Posso usar o Divi 5 no meu site já?

Você pode usar o Divi 5 no seu site, mas sua disponibilidade depende do seu caso de uso específico. O Divi 5 está atualmente na fase alfa pública, o que significa que ainda está sendo desenvolvido e refinado ativamente. Embora ainda não seja recomendado para todos os ambientes de produção, existem cenários específicos em que você pode começar a usá -lo sem problemas.

Use o Divi 5 em sites locais e de estadiamento

Atualmente, o Divi 5 está disponível para ambientes locais e de estadiamento, permitindo que os usuários testem seus novos recursos com segurança sem afetar seus sites ao vivo. Como o Divi 5 ainda está na fase alfa pública, essa abordagem garante que os usuários possam experimentar as melhorias do Divi 5, relatar bugs e fornecer feedback, mantendo a estabilidade de seus locais de produção.

Você pode usar com segurança o Divi 5 em novos sites de produção

O Divi 5 é estável e pronto para lançar sites novos. Se você estiver começando do zero, poderá aproveitar completamente seu desempenho rápido, estrutura modular e tecnologia à prova de futuro, sem se preocupar com problemas de compatibilidade com versões anteriores. No entanto, uma fase de teste completa é essencial para os sites existentes que dependem de extensas integrações de terceiros antes da migração. Neste ponto, ainda não recomendamos a conversão de sites existentes no Divi 5.

Compreendendo os pontos de interrupção personalizáveis ​​da Divi

Os pontos de interrupção são um aspecto fundamental do design responsivo. Eles atuam como limites onde o conteúdo do seu site se reorganiza para garantir uma experiência ideal para o usuário, se alguém está navegando em um smartphone, tablet ou desktop.

Os pontos de interrupção do Divi 5 foram significativamente melhorados, oferecendo mais flexibilidade e controle do que as versões anteriores do Divi. A personalização de até sete pontos de interrupção permite ajustar a capacidade de resposta do seu site para acomodar uma ampla gama de dispositivos e tamanhos de tela.

O que é um ponto de interrupção?

Um ponto de interrupção é uma largura específica da tela na qual o design do seu site se adapta para fornecer uma experiência de visualização ideal em diferentes dispositivos. Os pontos de interrupção ajudam a garantir que seu conteúdo permaneça legível, visualmente atraente e fácil de navegar, independentemente do tamanho da tela.

Os sites responsivos são projetados usando consultas de mídia CSS, que permitem que diferentes estilos sejam aplicados quando uma tela atinge uma largura específica. Quando o tamanho da tela de um visitante cruza um ponto de interrupção definido, o site ajusta automaticamente seu layout, fontes, espaçamento ou outros elementos de design para manter a usabilidade.

Com a introdução de mais pontos de interrupção no Divi 5, você pode limitar a necessidade de consultas de mídia CSS para definir pontos de interrupção para outros dispositivos.

Quantos pontos de interrupção devo usar?

O número de pontos de interrupção depende do uso do dispositivo do seu público. Os usuários acessam sites em vários tamanhos de tela, de pequenos smartphones a telas de desktop ultra largas. Tradicionalmente, os web designers usam três pontos de interrupção padrão - desktop, tablet e celular - mas o Divi 5 expande esse recurso, permitindo até 7 pontos de interrupção personalizáveis ​​para maior flexibilidade.

Permitir mais pontos de interrupção desacelerará meu site?

Não, permitir mais pontos de interrupção no Divi 5 não diminuirá seus sites. Ao contrário dos métodos mais antigos de lidar com o design responsivo, a nova estrutura do Divi 5 é otimizada para desempenho, garantindo que pontos de interrupção adicionais não adicionem carga desnecessária ao seu site.

Os pontos de interrupção estão ativados em um site ou nível de página?

Os pontos de interrupção no Divi 5 são ativados e aplicados no nível do site, não por página. Depois de ativar e personalizar pontos de interrupção, eles afetarão o site inteiro, garantindo um design consistente e responsivo em todas as páginas. Qualquer alteração que você fizer nos pontos de interrupção ajustará universalmente como seu site responde a diferentes tamanhos de tela, em vez de ser limitado a páginas individuais.

Como os pontos de interrupção personalizáveis ​​funcionam no divi

O sistema altamente flexível e intuitivo da Divi 5 é perfeito para gerenciar pontos de interrupção, oferecendo maior controle sobre o design responsivo do seu site. Ao contrário das versões anteriores, o Divi 5 permite personalizar até 7 pontos de interrupção, garantindo que seu site pareça perfeito em todos os dispositivos. Este sistema foi projetado para ser fácil de usar, oferecendo opções avançadas para quem precisa deles.

Onde encontrar pontos de interrupção

No Divi 5, os pontos de interrupção são integrados às configurações da sua página, facilitando a localização e a personalização. Você pode acessá -los diretamente dentro do Visual Builder, garantindo um fluxo de trabalho simplificado.

Como ativar pontos de interrupção

Abra a página que você deseja editar e ativar o Visual Builder clicando em Editar com o Divi .

Clique no menu Ellipsis (três pontos) localizado na barra de tarefas principal do Visual Builder.

Dentro das configurações, você encontrará uma série de interruptores que permitem ativar ou desativar pontos de interrupção conforme necessário.

Uma vez ativado, cada ponto de interrupção será visível na barra de tarefas, permitindo que você faça alterações em todo o seu design sem clicar em controles responsivos em linhas ou módulos individuais para ajustar as configurações.

Você deve usar pontos de interrupção padrão ou seus?

Os pontos de interrupção padrão do Divi 5 são projetados para cobrir os tamanhos de tela mais comuns, incluindo telefones, tablets e desktops. Esses pontos de interrupção predefinidos são mais do que suficientes para muitos designers, pois atendem à maioria dos usuários e dispositivos.

No entanto, existem cenários em que a criação de pontos de interrupção personalizada pode ser benéfica. Por exemplo, se você deseja acomodar monitores ultra largados, smartphones dobráveis ​​ou tablets menores, pontos de interrupção personalizados podem ajudá-lo a alterar seu design para esses casos de uso.

Usando pontos de interrupção personalizados no divi 5

A personalização dos pontos de interrupção responsiva é útil para abordar as peculiaridades de design ou os problemas de exibição de conteúdo em dispositivos menos comuns ou resoluções de tela. Eles também podem ajudar a melhorar o desempenho do site carregando apenas os estilos necessários para um determinado tamanho de tela, reduzindo os tempos de carregamento da página.

Felizmente, o Divi 5 facilita a personalização desses pontos de interrupção responsivos com alguns cliques.

Com as configurações de dispositivo responsivo abrir, defina o ponto de interrupção do telefone para a largura desejada e repita as etapas para outros dispositivos. Como queremos tornar o site acessível para dispositivos menores, definiremos o número para 360px para telefones. Depois de adicionar os pixels desejados, clique no botão Salvar para continuar.

O Divi 5 informará que você está prestes a ajustar os pontos de interrupção do seu site. Clique no botão Atualizar para confirmar a alteração.

Adicionaremos os seguintes pontos de interrupção para os tamanhos de tela restantes:

Esses pontos de interrupção cobrem uma variedade de dispositivos para garantir que o site abranja a maioria dos tamanhos de tela e casos de uso:

• Telefone: 767px cobre a maioria dos tamanhos de tela de smartphones, incluindo modelos mais antigos como o iPhone 8 ou o Samsung G7.
• Telefone largo: 860px cobre a maioria das telas telefônicas no modo paisagem, incluindo o iPhone 14 Pro (e acima) e os dispositivos modernos do Android.
• Tablet: 980px é bom para a maioria das telas de tablets no modo retrato, incluindo todos os iPads.
• Com um comprimido: 1024px é padrão para a vista da paisagem na maioria dos iPads e comprimidos Samsung.
• Widescreen: 1280px é uma boa largura para a maioria dos laptops menores (Windows ou MacOS), incluindo o MacBook Air, o MacBook Pro 13 ″ e os dispositivos Windows comparáveis.
• Ultrawide: 2560px cobre telas de desktop maiores, como laptops MacBook Pro 15 ″ e 16 ″, IMACs e monitores padrão de alta definição.

Personalizando seu design responsivo dentro de predefinições

Um dos aspectos mais poderosos do Divi 5 é como seus pontos de interrupção personalizáveis ​​se integram perfeitamente às predefinições. Isso permite que você crie um design verdadeiramente responsivo em todo o seu site com um esforço mínimo. Um exemplo perfeito é modificar a predefinição H1 de um local de partida para garantir que todos os H1s pareçam perfeitos em cada tamanho de tela.

Comece clicando em qualquer lugar dentro do H1 na seção Hero para trazer suas configurações.

Em seguida, clique no campo Predefinição do cabeçalho no cabeçalho do módulo.

Uma lista predefinida aparecerá. Localize a predefinição que possui uma marca de seleção azul ao lado.

Passe o mouse sobre a predefinição ativa para revelar suas configurações. Clique no ícone Configurações para editá -lo.

Clique na guia Design e ajuste o tamanho do texto do cabeçalho no tamanho desejado.

Mantenha as configurações predefinidas abertas e clique no tamanho da próxima tela na barra de tarefas Divi 5 para ajustar o tamanho da cabeçadeira.

Repita as etapas acima para ajustar as predefinições do título para os tamanhos de tela restantes. Depois de concluir isso, clique no botão Salvar predefinição .

Quando você troca pontos de interrupção, as mudanças de tamanho serão refletidas na predefinição do título.

Edição responsiva no divi 4 vs divi 5

A Divi sempre foi líder em design responsivo, mas o Divi 5 leva a um nível totalmente novo. Enquanto o Divi 4 forneceu uma base sólida para a criação de sites responsivos, o Divi 5 traz recursos que tornam a edição responsiva mais intuitiva, flexível e poderosa do que nunca. Aqui está uma olhada mais de perto como o Divi 5 melhora as capacidades do Divi 4.

Transição sem esforço entre pontos de interrupção

No Divi 4, a alternância entre os pontos de interrupção é bastante direta, mas envolve mais tempo e não é tão suave quanto a transição que você pode encontrar no Divi 5.

O Divi 5 melhora esse fluxo de trabalho com uma interface mais suave e mais intuitiva. Agora, você pode fazer a transição instantaneamente entre pontos de interrupção, visualizando seu design à medida que se ajusta, sem atraso. Esta nova versão do Divi permite que você faça alterações de design em tempo real com base no ponto de interrupção que você está visualizando. Não há mais alternância entre modos ou alternância constante. Essa experiência perfeita economiza tempo e garante um design mais coeso e polido em todos os pontos de interrupções.

De 3 a 7 pontos de interrupção

O Divi 4 suporta 3 pontos de interrupção diferentes; Estes podem ser encontrados no Divi 5 também.

• Desktop: 981px e acima
• Tablet: <980px
• Mobile: <767px

Enquanto esses pontos de interrupção cobrem o básico, eles às vezes ficam aquém ao acomodar a variedade de dispositivos e tamanhos de tela usados ​​pelo público moderno. Às vezes, os designers podem precisar de consultas de mídia CSS para segmentar tamanhos de tela diferentes, especialmente para monitores ultra largues ou dispositivos móveis menores.

O Divi 5 abordou essa limitação, expandindo o número de pontos de interrupção para 7 opções personalizáveis, facilitando o alvo de um número maior de dispositivos.

• Telefone: <767px
• Telefone largo: < 860px
• Tablet: <980px
• Comprimido largo: < 1024px
• Desktop: > 981px
• Widescreen: > 1280px
• Ultra largo: > 1440px

Essa flexibilidade aumentada permite que você ajuste seu design para uma gama mais ampla de dispositivos, garantindo que seu site pareça perfeito em tudo, desde smartphones compactos a grandes monitores de alta resolução. Por exemplo, agora você pode criar um ponto de interrupção dedicado do tablet no modo de paisagem ou otimizar seu site para telas ultra largas usadas em configurações profissionais.

Escala de tela para controle completo

Um dos novos recursos mais emocionantes do Divi 5 é a escala de tela, o que oferece aos designers controle sem precedentes sobre como o site deles aparece em diferentes resoluções.

É assim que a escala de tela se parece no Divi 4:

O recurso de redimensionamento de tela do Divi 5 torna toda a experiência ainda mais intuitiva. Com apenas alguns cliques, você pode dimensionar a tela de design para corresponder às resoluções de tela específicas, mostrando exatamente como seu site aparecerá em diferentes dispositivos. Esse recurso é útil para testar telas móveis menores ou monitores de desktop ultra largues, garantindo que seu design seja impecável-aborda a placa.

Divi 5 está para sempre incluído em sua associação ao Divi Lifetime

Os pontos de interrupção personalizáveis ​​da Divi 5 capacitam os designers a criar sites responsivos com maior precisão. Esteja você refinando um layout existente ou criando um local do zero, essas novas ferramentas oferecem a flexibilidade de criar experiências perfeitas para cada tamanho de tela.

Uma das melhores partes do Divi 5 é que ele será incluído para sempre em sua associação ao Divi (sem custo adicional). Se você atualizar para uma associação ao Divi Lifetime hoje, obterá acesso (e atualizações) para o Divi 5 por uma taxa única e se beneficiará desse produto em evolução nos próximos anos.