Breakpoints Elementor: Como Configurar Site para Diferentes TAMANHOS DE TELAS Responsivas?!
Вставка
- Опубліковано 6 вер 2024
- Aprenda neste tutorial Elementor WordPress: como ativar e configurar pontos de quebra adicionais personalizados no Elementor para ter um site responsivo com Elementor, WordPress e WooCommerce. Também ensino como configurar o site responsivo da maneira correta em uma tela/dispositivo para não ficar errado em outras telas diferentes. Os “Breakpoints” (na tradução: pontos de quebra) no Elementor serve para ter mais opções de tamanhos de telas para configurar o site para outros tipos de telas e dispositivos, além dos convencionais: Desktop, Celular e Tablet que já vem padrão no Elementor. Ao ativar outras telas no Elementor, você pode configurar mobile deitado (configurar celular deitado/horizontal), configurar Elementor para Monitor grande, configurar Elementor para TV, para tablet na horizontal e vertical, configurar site para notebook/laptop. Enfim, com os Breakpoints dá pra configurar o site para ficar responsivo em todos os tamanhos de telas possíveis, inclusive em dispositivos móveis na vertical e horizontal(em pé e/ou deitado).
👉Entre e participe do nosso canal VIP no Telegram: t.me/descompli... ❤️
👉Se inscreva no canal: bit.ly/QueroMe...
Visite meu site: descomplicando...
✅Hostinger: Hospedagem de Sites com Desconto Extra de + 10% OFF pelo link: hostinger.com/... + Cupom DESCOMPLICANDOSITES 🔥🔥🔥
✅Adquira o Elementor Pro aqui: descomplicando...
✅Plugin de Otimização e Performance que uso em meus sites (WP-Rocket): bit.ly/Otimiza...
✅Crocoblock Elementor (Todos os Jet) - bit.ly/JetPlugins
🔻Links citados e outros que você pode gostar também🔻:
Configurar o Mobile do Site com Flexbox Containers - • Como Configurar o Mobi...
Como Adaptar Site para Mobile com seções e colunas - • Como Adaptar Site para...
Como Criar um Site Profissional - • Como Criar Um SITE PRO...
Como Fazer uma Landing Page - • Como Fazer uma LANDING...
Como Criar uma Página de Vendas Dark - • Como Criar uma PAGINA ...
Como Criar uma Loja Virtual - • Como Criar uma LOJA VI...
Como Criar uma Loja de Dropshipping - • Como Criar uma LOJA DE...
Como Criar um Blog - • Como Criar um BLOG NO ...
Como Otimizar site WordPress - • LiteSpeed Cache: Como ...
Como Fazer Banner para Site no Canva - • INCRÍVEL! Como Fazer B...
Como Vender Sites, Onde Encontrar Clientes - • Como Vender Sites, Ond...
🔻PlayLists:🔻
- Novidades do Elementor: bit.ly/Novidad...
- Da Venda de Sites a Entrega: bit.ly/VendaEn...
- Como Criar Sites Completos: bit.ly/ComoCri...
- Otimização de Sites - bit.ly/Otimiza...
- Dicas de Design: bit.ly/DicasDe...
- Personalizando o WooCommerce: bit.ly/WooComE...
- Photoshop: bit.ly/Photosh...
- Marketing de Afiliados: bit.ly/MktAfil...
- Marketing Digital: bit.ly/MktElem...
- Blog: bit.ly/BlogWPE...
- Menus: bit.ly/MenusCo...
- Popups: bit.ly/PopupsC...
- Plugins do Crocoblock: bit.ly/PlayList...
- Hospedagem de Sites: bit.ly/Hospeda...
- Emails: bit.ly/EmailsW...
☑️ Breakpoints Elementor: Como Configurar Site para Diferentes TAMANHOS DE TELAS Responsivas?! - Compartilhe o Vídeo: • Breakpoints Elementor:...
Todo Web Designer e Empreendedor que cria site com WordPress, WooCommerce e Elementor, sempre precisam adaptar/configurar o site para que fique responsivo responsivo nos diferente tipos de telas. E pode acontecer que ao configurar o site para Desktop/Computadores, Celular e Tablet, ainda precise ajustar me outros tamanhos de telas, como monitores, Televisão, Tablet na Horizonal, Celular na Horizontal(deitado), entre outros. Para ter esses outros tipos de tamanhos de telas para configurar/adaptar o site para que fique responsivo nessas outras telas, é preciso ativar os “BreakPoints/Pontos de quebra adicionais personalizados” no Elementor Pro/Elementor Free.
Neste vídeo eu mostro como ativar essas outras telas no Elementor e como configurar um site para ficar responsivo, ou seja, para adaptar para outros tamanhos de telas. Também mostro como configurar o site em determinado tamanho de tela de uma forma para não estragar em outra tela/dispositivo diferente.
👉Se inscreva e ative o sininho das notificações para ver novos vídeos e dicas sobre WordPress, Elementor, Woocommerce, Hospedagens de Sites e de como Viver de Criação de Sites.
Clique aqui: bit.ly/QueroMe...
📍 Sigam minhas redes sociais
💲 Instagram - / descomplicandosites
💲 Telegram - t.me/descompli...
Boa aula!
Com amor,
Micaela Soares - Descomplicando Sites.
#SiteResponsivo #Elementor #Woocommerce
![Aula 7: Como Adaptar SITE RESPONSIVO no Elementor [Celular, Desktop, Tablet e +] Curso de Elementor](http://i.ytimg.com/vi/HvI5xfnWHCI/mqdefault.jpg)
![Aula 7: Como Adaptar SITE RESPONSIVO no Elementor [Celular, Desktop, Tablet e +] Curso de Elementor](/img/tr.png)
Obrigado pelo vídeo, excelente como sempre! 🙌🚀
Para quem não está conseguindo na nova versão em Agosto de 2024, mudou um pouco o caminho mas o processo é praticamente o mesmo.
Vai no Wordpress -> Elementor -> Configurações -> Recursos -> Vai rolar e acha "Pontos de interrupção personalizados adicionais" define como ativo e salva.
Após salvar, atualiza a página e volta para a página que está editando dentro do Elementor
Na barra superior da esquerda para a direita é o 3 botão "Configurações do site" -> Ai desce até layout -> Após clicar vai ter 2 opções "Configurações de Layout" e "Pontos de Interrupção" Clica em Pontos de Interrupção -> Ai é só escolher todos em "Pontos de interrupção ativos"
Salva e atualiza a página, vai das certo, antes de fazer lembre-se de ter todas as alterações que você fez publicadas.
me salvou! obrigado.
O curso dela é o melhor curso elementor da vida!!!! Parabéns Micaela!!! O suporte é impecável!!!! Você aprende tudo com muita facilidade com suporte fora de série!!!!
Queria muito mas acho que ela não ta vendendo mais curso :(
És muito profissional em wordpress, hoje faturo muito com as tuas aulas. muito obrigado de coração😍😍
@@edmarlucas6 fico muito feliz 🥰
Aprendi agora sobre a coluna reversa. Dica muito útil!
Muito bom, fazia tempo que queria adicionar novos breakpoints (para adicionar o notebook)! Vlwww
Só para acrescentar, no minuto 6:11 você disse que não da para tirar a visualização do item oculto no modo de responsável, você pode ocultar todos os itens responsáveis clicando nas "3 barrinhas (parte superior direita) > Preferencias de Usuário > Elementos ocultos" e ativar a opção. Agora todos os itens que forem responsivo não aparecerão no editor do Elementor.
Obrigada ☺️
Muito útil! Conteúdo rico e relevante para quem busca aprender.
Tenho aprendido bastante com você, tenho uma dúvida que não achei em lugar nenhuma da internet, as vezes me questiono se é se só no meu computador, veja se pode me ajudar , o meu wordpress não mostra como ficou exatamente no celular, ao abrir no celular os espaços estão diferentes, bem diferentes, dai tenho que ficar atualizando o celular para ver se esta certo ou não.
Tem alguma ideia do que possa ser?? Excelente trabalho, obrigado
Estou enfrentando o mesmo problema, isso acontece no computador e no celular. No meu celular e de algumas pessoas foca certo, porém em outros celulares os botões particularmente ficam no lugar errado. Aqui eu trabalho com suas telas de tamanhos diferentes, e em uma tela fica certo e na outra os botões saem do lugar.
@@ThaisAmandaa após 2meses tentando resolver por conta própria eu desisti e contratei um cara no fiverr, ele disse o problema era falta de alinhamento no paddings e margens
Play 🌐🌐🌐 tudo que aprendi de estrutura própria foi com vc ❤️❤️❤️🥰🥰🌐🌐🌐
❤ fico feliz
@@DescomplicandoSites
Obrigado amiga, você é uma amiga! 😊
Obrigado achei o oq preciso 😭😭😭😭😭😭😭😭😭😭😭😭 tava doido já mudando pra celular e mudava o site, ou mudava tavlet e muda outros..... obrigado mesmo!!!!
@@biomedicovet que bom q deu certo
Eu estou fazendo um blog e personalizado ele. Só que quando eu vou abrir ele no meu celular ele está sem o estilo, só com um fundo branco, é a foto de alguns artigos. Mas no desktop ele está normal. Visualização dele no mobile no desktop está normal tbm. Só que quando eu vou abrir no meu cel ele está sem o estilo, sem logo, sem cor. Vc tem algum vídeo que resolva esse bug, grato!
Muito obrigado por compartilhar seu conhecimento conosco, vídeo muito proveitoso, abraços (:
Obrigada ❤
único vídeo que eu achei mais próximo do problema que estou, parabéns! Estou com um problema que os botões mesmo no modo responsivo em telas de celulares diferentes ou monitores diferentes os botões saem do lugar. Ex: No meu celular fica certo, porém quando eu abro no celular do meu clientes o botão não fica no lugar correto.
Isso também acontece com os meus dois monitores, um é maior e fica no lugar certo, já a outra tela é um pouco menos e os botões saem do lugar correto.
Conseguiria me ajudar ?
Também estou com esse problema, conseguiu resolver?
Micaela vc e fera de mais.... parabéns
Boa noite ! Excelente dica. Muito obrigado...
###############
Por favor, você sabe como fazer um Split com Mercardo paga ou PagSeguro. Por favor faz um vídeo se souber como.
###############
Obrigado por esse vídeo e por toda a sua dedicação aos conteúdos Valiosos!!
Obrigada ☺️
Oi Micaela, seus vídeos são ótimos, faz um vídeo desse com o elementor atualizado, obrigado
Obrigada vou fazer
faz mesmo porque favor
Muito muito bom, Parabéns
Não consigo tirar a hifenização automática :(. Help!!!
Showww Micaela. Parabéns pela didática sempre excelente ❤
Mto show sua aula 👏🏼👏🏼👏🏼
Obrigado por esse vídeo e por toda a sua dedicação aos conteúdos!! Uma pergunta: Sabe dizer se ao ter 2 elementos iguais, com cada um configurado para ser mostrado apenas em um tipo de dispositivo, vai gerar o dobro de peso ao site? Essa possibilidade que você explicou no vídeo, se usada muito, pode gerar diminuição na velocidade de carregamento do site?
Exelente conteúdo. Parabéns
Você e muito foda muito obrigada por seus conteúdos ajudam muito . ❤️
Obrigada ☺️
Obrigado sempre
❤
Mikaela.. o Desktop no seu está 1620.. você deixa mais nesse?
boa tarde, suas aulas muito boas
Obrigada ☺️
Olá, tem como vc fazer vídeo falando sobre o Divi Theme? Se não tiver a licença me chama q te arrumo
Outra dica de vídeo é sobre a diferença de performance na Hostinger com/sem o Brotli ativado na confirmação PHP
Abc sucesso!!
Micaela tudo bem, quando meu site é carregado em uma tela ultrawide não fica legal, como defino um tamanho maximo de tela? uma vez vi que você respondeu alguém no instagram mas eu não lembro
Salvou demais!! Obrigado!!!
Faz um vídeo de como usar o plugin que direciona o leitor do artigo automaticamente para a página de vendas do produto. Isso ocorre ao tentar fechar a aba do artigo clicando no "x" do navegador. Muitas pessoas usam isso, mas não sei como funciona e qual plugin faz isso. Obrigado.
Muito obrigado, me salvou.
Tem um cara que colocou seu site, esse ai do tutorial no portfólio dele.
Excelente vídeo como sempre Micaela 😁. Mas fiquei com uma dúvida: até que ponto essa quantidade de breakpoints é realmente necessária em um projeto, já que um layout fluido já possui ótimos resultados com apenas 3 quebras? O projeto tem que muito específico para usar todas essas quebras, não é mesmo?
acho que depende muito de cada projeto, o meu mesmo creio que se faz necessário pelo menos uns 4. A responsividade não estava tão boa.
Pergunta, muitos breaking points aumenta o tamanho do código do site?
Não
Fui "Bestinha" pra caramba até achar essa explicação 😝😁
Show!!!
Obrigado!!!
minha versão tablet bagunça todo o site, quando eu ajusto a versão tablet as modificações vão para a versão pc e mobile
Estou com esse mesmo problema se edito no desktop o banner edita também no mobile se edito no mobile edita no desktop não sei o que está acontecendo e não acho conteúdo falando sobre o assunto
Conseguiu arrumar a solução? Estou torrando meus neurônios para encontrar a solução pra isso 😢
Achei uma solução, eu tive que criar 3 cabeçalho, 1 Para versão mobile, 1 Para a versão tablet e 1 Para versão desktop. Para não aparecer 3 cabeçalhos ao mesmo tempo, é só clicar no container do cabeçalho que você quer e aí ir em "responsivo" e ocultar onde não quer que não apareça. @@raissafernandes578
@@raissafernandes578 Acredito que isso seja um erro do Elementor. Não tem conteúdo explicando sobre isso.
Dependendo do q vc quer mexer, precisa duplicar o elemento, fazer ele da forma que quer no dispositivo que quer e ocultar no resto, que nem ela fez no exemplo da imagem.
Se vc reparar, ao lado do nome da propriedade q vc tá mexendo pode ou não ter um desenho do dispositivo (um símbolo de pc ou de celular ou tablet). Essa propriedade vai ser alterada só naquele dispositivo. Caso não tenha, vai alterar em tudo (por exemplo a propriedade ID CSS que é global).
Gostei
Obrigada ☺️
Excelente!
Oi seu vídeos tem me ajudado muito, em um outro vídeo seu, configurei o Pixel pelo PIxelYOurSIte , faltou como confirmar o domínio, aí fui lá mandei a meta teg ontem a noite , e até agora não foi confirmado, posso confirmar em outro plugin
Se puder me responder
💞
tu arrazaaaa!
☺️
Obrigada
Alguém sabe como configurar para esse formato: Large Screen 688 x 1031...é o ÚNICO que não consigo de forma algura acertar a medida!! somente ele que dá erro qdo inverte o celular...
Oi Mica...
Você sabe como resolver esse erro? 👇🏼
Eu entro no site que criei no Elementor, e lá embaixo depois do rodapé ele começa de novo.
Uma dúvida, os meus sites ficam com uma responsividade diferente em cada navegador. No chrome ele fica certo, já no firefox ou no navegador nativo do andoid ele fica todo desconfigurado. Sabe como resolver esse problema?
Caralho, muito bom! Obrigado!
Obrigada ☺️
Alguém saberia me informar onde fica essa opção agora no elementor por favor? Pois agora a barra de configurações é na parte superior e a única engrenagem que aparece é a de configuração da página
Olaaaa, meu modo desktop fica em 1140 e toda mudanças que faço nele são completamente ignoradas para quando coloco no tamanho normal da minha tela, 1440, o que u faço, ta ficando impossível de trabalhar, me ajuda por favorrrrrr
Boaaa
Como copiar as edições do layout desktop para o mobile sem ter que refazer tudo ?
No meu não aparece a engrenagem, alguém sabe onde fica?
no elementor atual a engrenagem não está mais ali. Por onde eu consigo configurar isso ?
Configurações de site > layout > pontos de quebra
Tenho uma duvida, fiz o menu, mas quando dou zoom no navegador, ele começa a perder suas estruturas pois os elemtos não são compensados de forma automatica, como faço isso?
Tela grande é widescteen?
Isso tipo televisão
Não tô conseguindo tirar o espaço que tá ficando na lateral. No que eu tô errado? Alguém me ajuda
Qual valor para vc criar uma landing peg
eu to com probleminha, quando eu abro o link do site no whats, ele abre normal, quando eu coloco o link no instagraqm, ele fica com a tela, o corpo do site tipo solta, de uma forma que da pra mexer pra um lado ficando com uma parte branca
eu utilizei o breakpoint para fazer a versão de laptop, e o "pontos quebra" ja está ativo nas configurações do elementor. Porém, não aparece na pagina. A página está diferente da sua, o botão de publicar está no canto superior direito no elementor ao inves de estar no canto inferior esquerdo. Não sei se é alguma versão do elementor, sabe como corrigir isso e aparecer para que eu possa adicionar mais breakpoints? Obrigado!
Não aparece isso pra mim
@DescomplicandoSites : Por favor me ajude, estou com problemas no WP no elementor pro
Qual problema?
@@DescomplicandoSites
Esse é um dos erros:
Warning: require(/home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php): Failed to open stream: No such file or directory in /home/storage/c/2e/f5/staeassessoria1/public_html/wp-settings.php on line 258
Fatal error: Uncaught Error: Failed opening required '/home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php' (include_path='.:/opt/lc/php/8.0/share/pear:/opt/lc/php/8.0/share/php:/usr/share/pear:/usr/share/php') in /home/storage/c/2e/f5/staeassessoria1/public_html/wp-settings.php:258 Stack trace: #0 /home/storage/c/2e/f5/staeassessoria1/public_html/wp-config.php(83): require_once() #1 /home/storage/c/2e/f5/staeassessoria1/public_html/wp-load.php(50): require_once('/home/storage/c...') #2 /home/storage/c/2e/f5/staeassessoria1/public_html/wp-blog-header.php(13): require_once('/home/storage/c...') #3 /home/storage/c/2e/f5/staeassessoria1/public_html/index.php(17): require('/home/storage/c...') #4 {main} thrown in /home/storage/c/2e/f5/staeassessoria1/public_html/wp-settings.php on line 258
Fatal error: Uncaught Error: Call to a member function set() on null in /home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/l10n.php:784 Stack trace: #0 /home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/l10n.php(872): load_textdomain('default', '/home/storage/c...', 'pt_BR') #1 /home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/class-wp-fatal-error-handler.php(47): load_default_textdomain() #2 [internal function]: WP_Fatal_Error_Handler->handle() #3 {main} thrown in /home/storage/c/2e/f5/staeassessoria1/public_html/wp-includes/l10n.php on line 784
@@DescomplicandoSites Fiz o site com elementor pro onde localizo as paginas que foram criadas pelo FTP? Tipo quero fazer backup caso meu site foi invadido.