No design de interfaces moderno, a experi\u00eancia do usu\u00e1rio (UX) mobile dita o sucesso de uma estrat\u00e9gia de crescimento. Se o seu menu mobile ainda \u00e9 uma barra est\u00e1tica no topo que obstrui a leitura, voc\u00ea est\u00e1 perdendo convers\u00e3o.<\/p>\n
Neste tutorial, vamos construir o “Smart Floating Menu”<\/b>: um cabe\u00e7alho que desaparece ao rolar para baixo e ressurge como uma p\u00edlula flutuante no rodap\u00e9 apenas quando o usu\u00e1rio faz o scroll-up.<\/p>\n Alcance do Polegar (Thumb Zone):<\/b> Facilita a navega\u00e7\u00e3o em telas grandes.<\/p>\n<\/li>\n Leitura Imersiva:<\/b> Libera 100% da tela durante o consumo de conte\u00fado.<\/p>\n<\/li>\n Est\u00e9tica Apple:<\/b> Traz o visual “App-Like” para sites WordPress.<\/p>\n<\/li>\n<\/ul>\n Para que este tutorial funcione em qualquer tema, n\u00e3o usaremos o cabe\u00e7alho padr\u00e3o do seu template. Vamos criar um Container<\/b> personalizado.<\/p>\n Abra o Elementor Theme Builder<\/b> e crie um novo Header (ou edite o existente).<\/p>\n<\/li>\n Crie um Container<\/b> principal para o seu Menu Mobile.<\/p>\n<\/li>\n No painel lateral, v\u00e1 em Avan\u00e7ado > Classes CSS<\/b> e adicione: Dentro deste container, posicione seu Logo e o \u00edcone de menu (hamburguer). Configure o container como Flexbox (Horizontal)<\/b> e Justificar Conte\u00fado: Espa\u00e7o entre (Space-between)<\/b>.<\/p>\n<\/li>\n<\/ol>\n Este c\u00f3digo controla a transi\u00e7\u00e3o de estados. Ele foi desenhado para ignorar barreiras de temas e focar apenas no comportamento da classe Copie e cole em Apar\u00eancia > Personalizar > CSS Adicional<\/b>:<\/p>\n \/* SMART MOBILE MENU – METODOLOGIA BUZZ61 \/* 1. ESTADO INICIAL (TOPO) *\/ \/* 2. ESCONDER PARA CIMA NO SCROLL DOWN *\/ \/* 3. ESTADO STICKY BOTTOM (SCROLL UP) *\/ \/* Efeito Din\u00e2mico de Escala e Subida *\/ box-shadow: 0 10px 30px rgba(0,0,0,0.3); \/* LIMPEZA DE TEMA *\/ Para que o menu “responda” \u00e0 velocidade do seu dedo, usaremos uma vari\u00e1vel din\u00e2mica que monitora a dire\u00e7\u00e3o do scroll.<\/p>\n Insira este c\u00f3digo em um widget HTML<\/b> (no rodap\u00e9) ou via Elementor > Custom Code<\/b>:<\/p>\n <script> let lastScrollY = window.scrollY; const handleSmartScroll = () => { if (currentScrollY < 50) { lastScrollY = currentScrollY; \/\/ Executa a l\u00f3gica a cada movimento de scroll com performance otimizada Para que este artigo ranqueie no Google e YouTube, focamos nos termos t\u00e9cnicos mais buscados:<\/p>\n Elementor Mobile Menu Sticky Bottom<\/b><\/p>\n<\/li>\n iOS Style Floating Header WordPress<\/b><\/p>\n<\/li>\n Menu que aparece no Scroll Up Elementor<\/b><\/p>\n<\/li>\n Custom CSS Mobile Navigation Tutorial<\/b><\/p>\n<\/li>\n Design de Menu P\u00edlula (Pill Menu) Mobile<\/b><\/p>\n<\/li>\n<\/ul>\n Ao implementar esse sistema, voc\u00ea n\u00e3o est\u00e1 apenas mudando um c\u00f3digo; est\u00e1 elevando a engenharia de marketing do seu site. O menu deixa de ser um obst\u00e1culo e passa a ser uma ferramenta de suporte ao crescimento.<\/p>\n Gostou dessa solu\u00e7\u00e3o?<\/b> Conhe\u00e7a a metodologia Growth 61X<\/b> da Buzz61 e transforme seu site em uma m\u00e1quina de escala.<\/p>\n Imagens\/Prints:<\/b> Tire prints do menu no topo (centralizado) e dele como p\u00edlula no rodap\u00e9.<\/p>\n<\/li>\n V\u00eddeo:<\/b> Se puder, grave um pequeno v\u00eddeo da tela do celular mostrando a fluidez da anima\u00e7\u00e3o. No YouTube, use o t\u00edtulo: “Como fazer o Menu do iPhone no Elementor (Passo a Passo)”<\/i>.<\/p>\n<\/li>\n Meta-Description:<\/b> “Aprenda a criar um menu mobile avan\u00e7ado no Elementor que aparece no scroll up com anima\u00e7\u00e3o estilo iOS. Tutorial passo a passo com CSS e JS agn\u00f3stico.”<\/i><\/p>\n<\/li>\n<\/ol>\n O que achou dessa estrutura de artigo? Ela comunica bem o valor t\u00e9cnico que acabamos de criar.<\/p>\n","protected":false},"excerpt":{"rendered":" No design de interfaces moderno, a experi\u00eancia do usu\u00e1rio (UX) mobile dita o sucesso de uma estrat\u00e9gia de crescimento. Se o seu menu mobile ainda \u00e9 uma barra est\u00e1tica no topo que obstrui a leitura, voc\u00ea est\u00e1 perdendo convers\u00e3o. Neste tutorial, vamos construir o “Smart Floating Menu”: um cabe\u00e7alho que desaparece ao rolar para baixo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9993","post","type-post","status-publish","format-standard","hentry","category-company-insights"],"_links":{"self":[{"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/posts\/9993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/comments?post=9993"}],"version-history":[{"count":2,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/posts\/9993\/revisions"}],"predecessor-version":[{"id":9995,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/posts\/9993\/revisions\/9995"}],"wp:attachment":[{"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/media?parent=9993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/categories?post=9993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buzz61.com.br\/buzz6126\/wp-json\/wp\/v2\/tags?post=9993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Por que usar um Menu Sticky no Bottom?<\/h2>\n
\n
\nPasso 1: Estrutura no Elementor<\/h2>\n
\n
menumobile<\/code>.<\/p>\n<\/li>\n
\nPasso 2: O CSS de Engenharia (Agn\u00f3stico)<\/h2>\n
.menumobile<\/code>.<\/p>\n
\nEste c\u00f3digo cria o efeito de p\u00edlula flutuante e transpar\u00eancia.
\n*\/
\n@media (max-width: 1024px) {<\/p>\n
\n.menumobile:not(.is-sticky-bottom) {
\nwidth: 100% !important;
\nmax-width: 100vw !important;
\nleft: 0 !important;
\npadding: 24px !important;
\nbox-sizing: border-box !important;
\ndisplay: flex !important;
\njustify-content: center !important;
\nalign-items: center !important;
\nposition: relative !important;
\nbackground-color: transparent !important;
\ntransition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
\nz-index: 9998;
\n}<\/p>\n
\n.menumobile.is-hidden-top {
\ntransform: translateY(-120%) !important;
\nopacity: 0 !important;
\npointer-events: none;
\n}<\/p>\n
\n.menumobile.is-sticky-bottom {
\nposition: fixed !important;
\ntop: auto !important;
\nbottom: 15px !important;
\nleft: 50% !important;
\ntransform: translateX(-50%) !important;
\nwidth: 90% !important;
\nmax-width: 380px !important;
\npadding: 10px 20px !important;
\nbackground: rgba(255, 255, 255, 0.1) !important;
\nbackdrop-filter: blur(12px);
\n-webkit-backdrop-filter: blur(12px);
\nborder-radius: 50px;
\nopacity: var(–scroll-p) !important;
\npointer-events: auto;
\nz-index: 9999;<\/p>\n
\ntransform:
\ntranslateX(-50%)
\ntranslateY(calc(80px * (1 – var(–scroll-p))))
\nscale(calc(0.8 + (0.2 * var(–scroll-p)))) !important;<\/p>\n
\n}<\/p>\n
\n.menumobile::before { content: none !important; display: none !important; }
\n}<\/p><\/blockquote>\n
\nPasso 3: A L\u00f3gica de Movimento (JavaScript)<\/h2>\n
\n\/**
\n* Smart Mobile Menu Logic – Buzz61
\n* Monitora a dire\u00e7\u00e3o do scroll e aplica os estados de visibilidade.
\n*\/
\ndocument.addEventListener(‘DOMContentLoaded’, function() {
\nconst header = document.querySelector(‘.menumobile’);
\nif (!header) return;<\/p>\n
\nlet upScrollAccumulator = 0;
\nconst threshold = 120; \/\/ Sensibilidade para o menu aparecer 100%<\/p>\n
\nconst currentScrollY = window.scrollY;
\nconst delta = lastScrollY – currentScrollY; \/\/ Positivo = Scroll Up<\/p>\n
\n\/\/ No topo da p\u00e1gina
\nheader.classList.remove(‘is-sticky-bottom’, ‘is-hidden-top’);
\nheader.style.setProperty(‘–scroll-p’, 0);
\nupScrollAccumulator = 0;
\n}
\nelse if (delta < 0) {
\n\/\/ Descendo a p\u00e1gina (Scroll Down)
\nheader.classList.add(‘is-hidden-top’);
\nheader.classList.remove(‘is-sticky-bottom’);
\nupScrollAccumulator = 0;
\n}
\nelse {
\n\/\/ Subindo a p\u00e1gina (Scroll Up)
\nheader.classList.remove(‘is-hidden-top’);
\nheader.classList.add(‘is-sticky-bottom’);
\nupScrollAccumulator = Math.min(upScrollAccumulator + delta, threshold);
\nheader.style.setProperty(‘–scroll-p’, upScrollAccumulator \/ threshold);
\n}<\/p>\n
\n};<\/p>\n
\nwindow.addEventListener(‘scroll’, () => {
\nwindow.requestAnimationFrame(handleSmartScroll);
\n}, { passive: true });
\n});
\n<\/script><\/p><\/blockquote>\n
\nOtimiza\u00e7\u00e3o SEO: Palavras-Chave e Termos de Busca<\/h2>\n
\n
Conclus\u00e3o<\/h3>\n
\nDicas para o Post:<\/h3>\n
\n