Índice
A versão gratuita do Elementor oferece mais pontos de interrupção do que a maioria dos tutoriais admite: sete visualizações de dispositivos no total, cada uma com uma largura de pixel editável, todas ativadas a partir de Configurações do Site Nenhuma licença Pro necessária Onde o sistema nativo pára é nesses sete slots fixos Se o seu design precisa de uma oitava visualização, ou uma largura de dispositivo para a qual os slots nomeados não mapeiam, essa lacuna é o que o livre Extensão de pontos de interrupção personalizados de Master Addons lida Ele cobre a metade de estilo do trabalho responsivo, enquanto uma extensão como Condições de exibição decide quais seções aparecem em qual dispositivo.
Abaixo: o que o Elementor free realmente inclui (mais de três visualizações, o que quer que postagens mais antigas afirmem), como ativar os pontos de interrupção nativos extras e como adicionar pontos de interrupção verdadeiramente personalizados no topo Essa última parte é gratuita até 3 pontos de interrupção, ilimitados com Master Addons Pro.
Quais pontos de interrupção o Elementor free realmente oferece a você
Primeiro, o mito que não vai morrer: pontos de interrupção extras no Elementor não estão bloqueados atrás do Elementor Pro. Muitos artigos ainda dizem que estão Desde Elementor 3.4 enviado o recurso de pontos de interrupção personalizados adicionais, a versão gratuita suporta até sete visualizações de dispositivos:
- Retrato Móvel: até 767px por padrão (sempre ativo)
- Paisagem Móvel: até 880px
- Retrato Tablet: até 1024px (sempre ativo)
- Tablet Paisagem: até 1200px
- Computador portátil: até 1366px
- Área de trabalho: a vista base tudo o resto ramifica-se de
- Widescreen: 2400 px e superior (o ponto de interrupção de um min de largura no conjunto)
Cada um desses valores de pixel é editável. Abra as configurações do site, altere o ponto de corte do retrato do tablet de 1024px para 900px, salve, pronto. Elementor documentação desenvolvedor explica a lógica da largura máxima abaixo se você quiser a mecânica.
Então, o que a versão gratuita não pode fazer? duas coisas Você não pode adicionar um oitavo ponto de interrupção, e você não pode sair dos slots nomeados: as seis visualizações extras têm funções fixas, e uma vez que estão todas em uso, o sistema nativo está cheio Esse teto é a razão pela qual um plugin de pontos de interrupção dedicado existe de todo.
Como ativar os pontos de interrupção extras do Elementor (gratuito, sem plugin)
Antes de instalar qualquer coisa, ligue o que o Elementor já lhe dá Demora cerca de um minuto:
- Abra qualquer página com o Elementor e clique no menu do hambúrguer no canto superior esquerdo do painel e escolha Configurações do site.
- Ir para Layout → Pontos de interrupção.
- Clique no Pontos de interrupção ativos campo e adicionar as vistas que você quer: Paisagem móvel, Tablet Landscape, Computador portátil, Widescreen.
- Ajuste o valor do pixel sob cada ponto de interrupção se o padrão não corresponder ao seu design.
- Bate Salvar alterações. Elementor regenera seu CSS e as novas visualizações aparecem no Modo Responsivo.
Se sete visualizações cobrem seu projeto, pare aqui Você não gastou nada e não instalou nada Continue lendo se precisar de mais visualizações do que isso, ou um ponto de interrupção que os slots nomeados não podem expressar.
Como adicionar pontos de interrupção personalizados além dos sete do Elementor
A rota livre que passa pelo teto da Elementor é Pontos de interrupção personalizados para Elementor, um plugin construído pela equipe Master Addons Ele é executado por conta própria ao lado do Elementor, nenhum outro plugin necessário Ele também emparelha com Adições Mestres se você já o executa, então você gerencia pontos de interrupção do mesmo painel que seus widgets A versão gratuita adiciona até 3 pontos de interrupção personalizados com controle exato de pixels sobre cada largura do dispositivo; Master Addons Pro remove a tampa inteiramente.
Passo 1: Instale o plugin
No seu painel WordPress, vá para Plugins → Adicionar novo e procure por “Pontos de interrupção personalizados para Elementor” Instale-o e ative-o Se você já usa Master Addons, também pode ativá-lo a partir da guia Extensão no painel Master Addons; ambas as rotas terminam na mesma página de configurações.
Passo 2: Abra a página Pontos de interrupção
Um novo item Pontos de interrupção aparece no menu do seu painel Clique nele A página lista seus pontos de interrupção atualmente ativos com seus intervalos, combinando o que você configurou nas Configurações do Site do Elementor, e oferece a opção de adicionar um novo dispositivo no topo.
Etapa 3: Adicione um ponto de interrupção com largura máxima
Nomeie o dispositivo e insira sua largura máxima em pixels. Para segmentar telefones pequenos, digite 600 e salve. O plugin ajusta a largura mínima do dispositivo vizinho para você, para que os intervalos nunca se sobreponham: sua nova visualização Small Mobile cobre telas de até 600 px e a próxima visualização começa em 601 px. Existem também mais de 17 predefinições de dispositivos cobrindo telefones, tablets e laptops comuns, para que você possa começar a partir de um perfil de dispositivo real em vez de adivinhar larguras. Na versão gratuita você pode adicionar até 3 desses pontos de interrupção personalizados; Master Addons Pro os usuários obtêm pontos de interrupção ilimitados mais importação/exportação.
Passo 4: Estile a nova visualização no Elementor
Edite qualquer página com o Elementor e clique no ícone do modo responsivo na parte inferior do painel Sua visualização personalizada agora fica na barra do dispositivo ao lado dos padrões Selecione-a, escolha um elemento e defina valores como tamanho da fonte, preenchimento ou contagem de colunas que se aplicam apenas dentro desse intervalo de pixels Clique em Atualizar e, em seguida, redimensione seu navegador para assistir ao disparo de estilos Para uma análise mais profunda do estilo por dispositivo, consulte nosso guia para design responsivo com pontos de interrupção Elementor.
Grátis vs Pro: quantos pontos de interrupção cada opção lhe dá
Aqui está a comparação, incluindo o que o Elementor lhe dá antes de qualquer plugin entrar em cena:
| Opção | Custo | O que você recebe | Limite |
|---|---|---|---|
| Livre de elementor (nativo) | Grátis | 7 visualizações de dispositivos nomeadas, cada uma com uma largura de pixel editável | Conjunto fixo de 7, sem novos slots |
| Pontos de interrupção personalizados para Elementor (gratuito) | Grátis | Pontos de interrupção verdadeiramente personalizados com seus próprios nomes e larguras exatas, mais de 17 predefinições de dispositivos | 3 pontos de interrupção personalizados |
| Master Addons Pro | Pago | Tudo acima, além de importação/exportação e classificação de ponto de interrupção | Ilimitado |
Para a maioria dos sites, as sete visualizações mais 3 camadas personalizadas da Elementor cobrem todas as lacunas reais: uma visualização de telefone pequeno, uma largura de tablet ímpar, uma exibição de quiosque As agências que fazem malabarismos com listas de dispositivos de clientes são as que acertaram o limite livre e é isso que Pro é para. Se você está pesando todo o plugin contra alternativas enquanto você está nisso, nosso Comparação de complementos mestres versus complementos finais cobre a correspondência mais ampla de recursos.
Quando um ponto de interrupção personalizado realmente corrige um layout
Vale a pena adicionar um ponto de interrupção personalizado quando um layout quebra na lacuna entre duas visualizações existentes O caso clássico é uma grade de 3 colunas Ele parece certo na área de trabalho acima de 1025 px Elementor deixa cair para 2 colunas na visualização de tablet de 1024 px Em um tablet grande mantido em paisagem, essa mesma visualização de 1024 px deixa uma coluna vazia ampla e desperdiça espaço.
Adicione um ponto de interrupção em, digamos, 992 px, defina a grade de volta para 3 colunas lá, e o layout se encaixa no dispositivo em vez de adivinhar O mesmo movimento funciona para uma visualização de telefone pequeno, onde você aumenta os tamanhos das fontes e o preenchimento de botões que parecem apertados abaixo de 400 px, um intervalo até mesmo que a visualização Mobile Portrait da Elementor trate como um balde.
Os pontos de interrupção também combinam bem com a exibição condicional Se uma seção só faz sentido em telas maiores, um ponto de interrupção personalizado controla seu estilo enquanto Condições de exibição controla se aparece de todo Os dois resolvem metades diferentes do mesmo problema responsivo.
Os pontos de interrupção personalizados retardam seu site?
Um punhado de pontos de interrupção não irá retardar o seu site de qualquer forma um visitante percebe Cada um adiciona uma consulta de mídia CSS padrão, e os estilos que você definir carregar exatamente como os estilos responsivos embutidos do Elementor O CSS adicionado é minúsculo ao lado do peso de uma página típica.
O editor é uma história diferente Cada ponto de interrupção extra significa mais um painel responsivo Elementor tem que renderizar, então empilhar 10 ou mais pode fazer a tela de edição parecer mais pesada Adicione apenas as visualizações que você realmente estilizará Cinco ou seis no total, padrões incluídos, é suficiente para quase todos os projetos Se a velocidade é sua preocupação mais ampla, nosso guia sobre como acelerar os sites da Elementor cobre as correções que realmente aparecem nos tempos de carregamento.
Quando não adicionar um ponto de interrupção personalizado
Pontos de interrupção personalizados não são uma correção para cada bug responsivo, e alcançar um primeiro é muitas vezes a chamada errada Se um único elemento se comporta mal em um tamanho de tela, uma regra direcionada em Css personalizado geralmente é mais limpo do que uma camada de dispositivo totalmente nova que precisa de estilo em todos os lugares.
Mais dois casos para ignorá-lo Se ativar uma das visualizações nativas inativas do Elementor, ou cutucar um valor de pixel padrão nas Configurações do Site, corrige o problema, faça isso em vez disso; não custa nada e mantém o editor leve E se o problema é realmente sobre qual conteúdo mostra em qual dispositivo, em vez de como ele é estilizado, isso é um trabalho para condições de exibição, não outro ponto de interrupção.
Os pontos de interrupção personalizados ficam ao lado do restante do kit de ferramentas Master Addons, desde as extensões gratuitas até o Construtor Tema, todos construídos para fechar as lacunas Elementor deixa aberto.
Perguntas frequentes
O Elementor free tem pontos de interrupção personalizados?
Sim, mais do que a maioria das pessoas pensa Elementor livre inclui sete visualizações de dispositivos: Retrato móvel, paisagem móvel, Retrato Tablet, Tablet Landscape, Laptop, Desktop, e Widescreen Você ativa os extras em Configurações do site → Layout → Pontos de interrupção e pode editar cada valor de pixel O que Elementor livre não pode fazer é adicionar pontos de interrupção além desses sete slots nomeados; para isso você precisa do plugin gratuito Pontos de interrupção personalizados para Elementor.
Como adiciono um ponto de interrupção personalizado no Elementor?
Para as visualizações integradas, abra Configurações do Site → Layout → Pontos de interrupção, adicione as visualizações desejadas ao campo Pontos de interrupção ativos e ajuste suas larguras Para pontos de interrupção além dos sete do Elementor, instale o plugin gratuito Pontos de interrupção personalizados para Elementor, abra sua página Pontos de interrupção e insira um nome de dispositivo e Largura máxima em pixels, por exemplo 600 para telefones pequenos A nova visualização aparece então no Modo Responsivo do Elementor pronto para estilizar.
Quantos pontos de interrupção você pode ter no Elementor?
Elementor free e Pro ambos top para fora em sete visualizações de dispositivos nativos O plugin Custom Breakpoints for Elementor adiciona até 3 breakpoints verdadeiramente personalizados em cima disso gratuitamente, e Master Addons Pro remove a tampa para breakpoints ilimitados.
Os pontos de interrupção personalizados exigem o Elementor Pro?
Não, em ambos os aspectos Os próprios pontos de interrupção extras da Elementor (Mobile Landscape, Tablet Landscape, Laptop, Widescreen) são enviados na versão gratuita, e o plugin Custom Breakpoints for Elementor também é gratuito Nenhuma licença Elementor Pro está envolvida em qualquer lugar; apenas pontos de interrupção personalizados ilimitados exigem Master Addons Pro.
O plugin Custom Breakpoints precisa de Master Addons para funcionar?
Não. Funciona como um plugin independente com apenas Elementor instalado Ele também se integra com Master Addons se você executar ambos, então você gerencia pontos de interrupção a partir do mesmo painel que seus widgets e extensões, e Master Addons Pro é o que desbloqueia pontos de interrupção ilimitados.
Os pontos de interrupção personalizados retardam meu site?
Não. Cada ponto de interrupção adiciona apenas uma consulta de mídia CSS leve, e os estilos são carregados como os estilos responsivos integrados do Elementor. Empilhar muitos pontos de interrupção pode fazer o editor parecer mais pesado, portanto, adicione apenas as visualizações que você realmente estilizará.
Leitura relacionada
