{"id":48782,"date":"2022-04-22T03:28:07","date_gmt":"2022-04-22T06:28:07","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=48782&preview=true&preview_id=48782"},"modified":"2025-01-20T09:29:53","modified_gmt":"2025-01-20T12:29:53","slug":"menu-fixo-do-elementor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/","title":{"rendered":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor"},"content":{"rendered":"

Se voc\u00ea \u00e9 um aspirante como desenvolvedor web<\/a> ou um empreendedor de eCommerce, seus sites provavelmente compartilham alguns elementos essenciais. Por exemplo, cada site precisa de um menu ou menu claro para ajudar os visitantes a navegar entre as diferentes p\u00e1ginas. Entretanto, se voc\u00ea usa um construtor de p\u00e1ginas<\/a> como o Elementor para cortar a codifica\u00e7\u00e3o, voc\u00ea pode estar se perguntando se ainda \u00e9 poss\u00edvel fazer um menu fixo (sticky headers) sofisticado e de f\u00e1cil utiliza\u00e7\u00e3o do Elementor.<\/p>\n

Felizmente, usando um menu do Elementor<\/a> pode fornecer aos seus usu\u00e1rios uma maneira simplificada de explorar o seu site. Com este popular construtor de p\u00e1ginas<\/a>, voc\u00ea pode construir uma grande variedade de menus que n\u00e3o desaparecem quando os usu\u00e1rios percorrem um site. Esta caracter\u00edstica \u00e9 o que os torna fixo.<\/p>\n

Neste post, vamos discutir como funciona um menu fixo (sticky header) e os benef\u00edcios de usar um. Depois mostraremos como fazer um menu fixo (sticky header) do Elementor com as vers\u00f5es gratuita e profissional da ferramenta. Finalmente, n\u00f3s lhe forneceremos op\u00e7\u00f5es adicionais de customiza\u00e7\u00e3o para os seus menus fixo (sticky header) usando CSS. Vamos come\u00e7ar!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Uma introdu\u00e7\u00e3o ao menu fixo (sticky header) do Elementor<\/h2>\n

N\u00e3o h\u00e1 dois sites iguais. Entretanto, h\u00e1 algumas caracter\u00edsticas que os sites de qualidade t\u00eam em comum.<\/p>\n

Se voc\u00ea estiver rodando um site com v\u00e1rias p\u00e1ginas, um desses elementos \u00e9 um menu. Esta \u00e9 a barra horizontal na parte superior de qualquer p\u00e1gina que contenha informa\u00e7\u00f5es \u00fateis.<\/p>\n

Tipicamente um menu inclui seu menu de navega\u00e7\u00e3o com p\u00e1ginas como Sobre<\/strong> ou Fale Conosco<\/strong>:<\/p>\n

\"Menu
Menu principal do site Kinsta<\/figcaption><\/figure>\n

Quando os visitantes explorarem sua p\u00e1gina, eles provavelmente esperar\u00e3o um menu organizado para ajud\u00e1-los a gui\u00e1-los pelo seu site. Como a Experi\u00eancia do Usu\u00e1rio (UX) \u00e9 a chave para o sucesso de um site, voc\u00ea seria s\u00e1bio para criar um menu que seja intuitivo e direto. \u00c9 a\u00ed que um menu fixo (sticky header), projetado com o Elementor, pode fazer uma grande diferen\u00e7a.<\/p>\n\n

Como funciona um menu fixo (sticky header)<\/h3>\n

Antes de aprendermos como funciona um menu fixo (sticky header) do Elementor, vamos verificar como um menu padr\u00e3o se comporta quando voc\u00ea desce uma p\u00e1gina:<\/p>\n

\"Exemplo
Exemplo de menu padr\u00e3o<\/figcaption><\/figure>\n

Como voc\u00ea pode ver no exemplo acima, este menu cont\u00e9m uma barra de navega\u00e7\u00e3o complexa com categorias como Vendas<\/strong>, Vestu\u00e1rio<\/strong>, Sapatos<\/strong> e muito mais. Estas abas, sem d\u00favida, ajudar\u00e3o os compradores a encontrar o que eles est\u00e3o procurando. Entretanto, quando voc\u00ea percorre a p\u00e1gina, o menu desaparece.<\/p>\n

Os usu\u00e1rios podem achar isso frustrante, pois requer que eles voltem para o topo da p\u00e1gina para acessar o menu de navega\u00e7\u00e3o. Felizmente, um menu fixo (sticky header) oferece uma solu\u00e7\u00e3o simples.<\/p>\n

Ao ficar ou ‘colar’ no lugar no topo da sua p\u00e1gina, um menu colante pode melhorar drasticamente o UX do seu site:<\/p>\n

\"Exemplo
Exemplo de menu fixo (sticky header)<\/figcaption><\/figure>\n

Quando o design do seu site inclui um menu r\u00edgido, seus usu\u00e1rios podem rapidamente pular para novas p\u00e1ginas sem perder tempo rolando.<\/p>\n

Al\u00e9m disso, com este elemento fixo, voc\u00ea pode incluir a frente e o centro da sua logo em todos os momentos. Este recurso pode ajudar os usu\u00e1rios a lembrar de sua marca mais facilmente e encoraj\u00e1-los a permanecer no seu site por mais tempo.<\/p>\n

Quando voc\u00ea deve considerar o uso de um menu fixo (sticky header)<\/h3>\n

Os visitantes ter\u00e3o menos probabilidade de se perderem ao explorar sites maiores com um menu fixo (sticky header). Como tal, voc\u00ea pode querer aproveitar esta caracter\u00edstica se o seu site tiver muitas p\u00e1ginas. \u00c9 por isso que voc\u00ea ver\u00e1 frequentemente menus fixos em sites de eCommerce<\/a>.<\/p>\n

Um menu fixo (sticky header) pode ser particularmente \u00fatil se voc\u00ea quiser incluir um recurso de pesquisa em seu menu. Dessa forma, como os usu\u00e1rios est\u00e3o rolando e percebem que n\u00e3o podem encontrar o que est\u00e3o procurando, eles podem rapidamente inserir uma consulta na barra de pesquisa.<\/p>\n

Al\u00e9m disso, um menu fixo (sticky header) pode ser uma mudan\u00e7a de jogo, se voc\u00ea tiver um blog monetizado<\/a> que mostre todos os seus artigos na p\u00e1gina inicial. Em geral, este menu pode garantir que o seu site seja manej\u00e1vel e escal\u00e1vel<\/a>.<\/p>\n

Entretanto, se o seu site tem apenas uma p\u00e1gina, n\u00e3o faz muito sentido transformar seu menu desta forma. Al\u00e9m disso, se voc\u00ea tem uma boa quantidade de p\u00e1ginas em seu site, mas cada uma \u00e9 relativamente curta, voc\u00ea provavelmente tamb\u00e9m n\u00e3o precisa de um menu fixo (sticky header).<\/p>\n

Em geral, um menu fixo (sticky header) reduz o tempo de rolagem e aumenta a usabilidade e navega\u00e7\u00e3o do site. Se voc\u00ea n\u00e3o tem certeza se este recurso beneficiaria seu site, voc\u00ea pode querer fazer uma auditoria r\u00e1pida do comprimento de sua p\u00e1gina e ent\u00e3o decidir.<\/p>\n

Como criar um menu fixo (sticky header) do Elementor<\/h2>\n

Para este tutorial, n\u00f3s o acompanharemos atrav\u00e9s dos passos para fazer um menu fixo (sticky header) do Elementor. Vamos assumir que voc\u00ea j\u00e1 tem o plugin do Elementor<\/a> instalado e ativado em seu site.<\/p>\n

Estaremos cobrindo como voc\u00ea pode fazer este menu tanto com a vers\u00e3o gratuita quanto com o Elementor Pro<\/a>. Voc\u00ea provavelmente ficar\u00e1 feliz em saber que voc\u00ea n\u00e3o precisar\u00e1 aprender HTML<\/a> ou editar c\u00f3digo<\/a> significativamente para fazer isso!<\/p>\n

Como criar um menu fixo usando o Elementor (gratuito)<\/h3>\n

A vers\u00e3o gratuita do Elementor oferece algumas caracter\u00edsticas poderosas para a constru\u00e7\u00e3o de p\u00e1ginas. Entretanto, se voc\u00ea quiser fazer mudan\u00e7as em seus menus e rodap\u00e9s, voc\u00ea vai precisar de algumas ferramentas adicionais (tamb\u00e9m gratuitas).<\/p>\n

Com isso em mente, vamos ver como voc\u00ea pode criar um menu fixo (sticky header) usando o Elementor!<\/p>\n

Passo 1: Instale e ative os seus plugins essenciais<\/h4>\n

Felizmente, algumas ferramentas confi\u00e1veis podem facilmente expandir a funcionalidade da vers\u00e3o gratuita do Elementor.<\/p>\n

Navegue at\u00e9 o seu painel do WordPress para encontrar sua primeira ferramenta. V\u00e1 para Plugins > Adicionar novo<\/strong> e procure por ElementsKit Elementor addons<\/a> usando a fun\u00e7\u00e3o de pesquisa:<\/p>\n

\"Instale
Instale e ative o ElementsKit<\/figcaption><\/figure>\n

Instale e ative<\/a> este plugin como voc\u00ea normalmente faria. Quando voc\u00ea terminar este processo, voc\u00ea ser\u00e1 levado para sua p\u00e1gina principal de plugins:<\/p>\n

\"Plugin
Plugin agora instalado<\/figcaption><\/figure>\n

Agora, clique em Add New<\/strong> novamente para localizar o Sticky Header Effects for Elementor<\/a> plugin com a barra de pesquisa:<\/p>\n

\"Sticky
Sticky Header Effects for Elementor<\/figcaption><\/figure>\n

Repita o processo de instala\u00e7\u00e3o e ativa\u00e7\u00e3o desta ferramenta, e voc\u00ea est\u00e1 pronto para o pr\u00f3ximo passo!<\/p>\n

Passo 2: Crie o seu menu<\/h4>\n

Antes de voc\u00ea poder fazer qualquer tipo de menu, voc\u00ea precisar\u00e1 de um menu de navega\u00e7\u00e3o. N\u00f3s vamos fazer um menu simples com os elementos mais comuns. Ele incluir\u00e1 uma logo, p\u00e1ginas e um Call to Action (CTA).<\/p>\n

Para criar seu pr\u00f3prio menu dentro do seu painel do WordPress, v\u00e1 para Appearance > Menus<\/strong>. Ao lado do campo Menu Name<\/strong>, d\u00ea ao seu um nome descritivo. N\u00f3s vamos chamar o nosso “Sticky Header Menu”:<\/p>\n

\"D\u00ea
D\u00ea um nome ao seu menu fixo (sticky header)<\/figcaption><\/figure>\n

Certifique-se de escolher o Header<\/strong> como o Display location<\/strong>. Voc\u00ea tamb\u00e9m pode querer selecionar a caixa para adicionar novas p\u00e1ginas ao seu menu automaticamente.<\/p>\n

A seguir, voc\u00ea precisar\u00e1 adicionar algumas p\u00e1ginas ao seu menu. Na se\u00e7\u00e3o Pages<\/strong> \u00e0 esquerda, marque as caixas para quaisquer p\u00e1ginas que voc\u00ea gostaria de incluir, ent\u00e3o clique em Add to Menu<\/strong>:<\/p>\n

\"Adicione
Adicione p\u00e1ginas ao seu menu de menu fixo (sticky header)<\/figcaption><\/figure>\n

Ent\u00e3o voc\u00ea ver\u00e1 suas p\u00e1ginas transferidas para o seu menu \u00e0 direita. V\u00e1 em frente e clique em Save Menu<\/strong> no canto inferior direito da sua tela:<\/p>\n

\"Salve
Salve seu menu de menu fixo (sticky header)<\/figcaption><\/figure>\n

Como voc\u00ea pode ver, n\u00f3s adicionamos algumas p\u00e1ginas b\u00e1sicas, incluindo Contact Us<\/strong>, Sobre<\/strong><\/a> e Sample Page<\/strong>. Voc\u00ea pode querer reordenar suas p\u00e1ginas para que a sequ\u00eancia pare\u00e7a intuitiva para os visitantes.<\/p>\n

Passo 3: Crie o seu cabe\u00e7alho<\/h4>\n

Agora o seu menu de navega\u00e7\u00e3o existe, mas voc\u00ea n\u00e3o pode acess\u00e1-lo em nenhum lugar. Isso \u00e9 porque voc\u00ea precisa criar um cabe\u00e7alho para ele.<\/p>\n

Para fazer isso, v\u00e1 para a aba ElementsKit <\/strong>no seu menu do lado esquerdo. Se voc\u00ea ainda n\u00e3o o fez, voc\u00ea precisar\u00e1 clicar em algumas p\u00e1ginas de ‘in\u00edcio’ neste ponto.<\/p>\n

Todos provavelmente ter\u00e3o prefer\u00eancias diferentes, ent\u00e3o leve seu tempo selecionando quais caracter\u00edsticas voc\u00ea quer ativar. No entanto, certifique-se de que o m\u00f3dulo Header Footer<\/strong> esteja on<\/strong>:<\/p>\n

\"Ativar
Ativar a op\u00e7\u00e3o de rodap\u00e9 de menu no Kit Elements<\/figcaption><\/figure>\n

Agora, v\u00e1 para ElementsKit > Header Footer<\/strong>:<\/p>\n

\"Adicionar
Adicionar novo modelo<\/figcaption><\/figure>\n

Esta p\u00e1gina estar\u00e1 vazia, j\u00e1 que voc\u00ea ainda n\u00e3o tem nenhum menu ou modelo de rodap\u00e9. Clique em Add New<\/strong> no topo da sua tela para criar seu primeiro modelo de menu:<\/p>\n

\"Preencha
Preencha as configura\u00e7\u00f5es do modelo<\/figcaption><\/figure>\n

Na tela acima, digite um nome descritivo e certifique-se de que o Header<\/strong> esteja selecionado como o Type<\/strong>. J\u00e1 que voc\u00ea est\u00e1 usando a vers\u00e3o gratuita, este menu aparecer\u00e1 no Entire Site<\/strong>.<\/p>\n

Certifique-se de alternar a chave Activate\/Deactivate <\/strong>para ON<\/strong> e clique em SAVE CHANGES<\/strong>. Agora voc\u00ea ser\u00e1 levado de volta para sua p\u00e1gina de modelos, onde voc\u00ea pode ver seu novo modelo de menu listado:<\/p>\n

\"Novo
Novo modelo de menu est\u00e1 agora dispon\u00edvel para uso<\/figcaption><\/figure>\n

Voc\u00ea tamb\u00e9m pode notar um \u00edcone verde Active<\/strong> pr\u00f3ximo a este menu. No entanto, ainda n\u00e3o est\u00e1 ao vivo.<\/p>\n

Para completar seu menu, passe o mouse sobre ele na lista de tem e clique em Edit in Elementor<\/strong>, logo abaixo de seu nome. Isto o levar\u00e1 para a tela do Elementor Builder.<\/p>\n

Aqui, clique no \u00edcone do ElementsKit<\/strong>:<\/p>\n

\"Clique
Clique no \u00edcone ElementsKit<\/figcaption><\/figure>\n

Na tela seguinte, selecione a aba Sections<\/strong>:<\/p>\n

\"Selecione
Selecione a aba “Se\u00e7\u00f5es”<\/figcaption><\/figure>\n

Role um pouco para baixo para encontrar uma se\u00e7\u00e3o de menu que voc\u00ea gosta, ent\u00e3o clique em Insert<\/strong>. N\u00f3s escolhemos Header \u2013 Section 5<\/strong>:<\/p>\n

\"Insira
Insira o menu onde voc\u00ea quer<\/figcaption><\/figure>\n

Como voc\u00ea provavelmente pode ver, nosso menu de navega\u00e7\u00e3o n\u00e3o \u00e9 vis\u00edvel. Ent\u00e3o vamos em frente e adicion\u00e1-lo ao nosso modelo de menu. Para fazer isso, passe o mouse sobre a se\u00e7\u00e3o do menu de navega\u00e7\u00e3o do seu menu. Neste caso, est\u00e1 bem no centro:<\/p>\n

\"Passe
Passe o mouse sobre a se\u00e7\u00e3o do menu de navega\u00e7\u00e3o do menu<\/figcaption><\/figure>\n

Clique nesta \u00e1rea, e suas Menu Settings<\/strong> devem aparecer no painel \u00e0 esquerda. Agora, localize o campo Select Menu<\/strong>. No menu suspenso, escolha o menu que voc\u00ea criou anteriormente:<\/p>\n

\"Escolha
Escolha o menu que voc\u00ea criou anteriormente<\/figcaption><\/figure>\n

Neste ponto, voc\u00ea deve ver o menu populado no seu modelo de menu. Clique em UPDATE<\/strong>\u00a0no canto inferior esquerdo da tela, e seu menu padr\u00e3o est\u00e1 pronto.<\/p>\n

Vamos checar como funciona em a\u00e7\u00e3o:<\/p>\n

\"Novo
Novo menu<\/figcaption><\/figure>\n

Como voc\u00ea pode ver, nosso menu parece \u00f3timo. No entanto, ele desaparece quando n\u00f3s rolamos para baixo. Vamos ver como podemos faz\u00ea-la grudar.<\/p>\n

Passo 4: Fa\u00e7a o seu menu fixo<\/h4>\n

Para nosso passo final, navegue at\u00e9 ElementsKit > Header Footer > Edit with Elementor<\/strong>. Ent\u00e3o selecione seu menu e clique no \u00edcone central com seis pontos:<\/p>\n

\"Clique
Clique no \u00edcone pontilhado<\/figcaption><\/figure>\n

Quando voc\u00ea pairar sobre ele, voc\u00ea ver\u00e1 que isto permite que voc\u00ea Edit Section<\/strong>. Assim que voc\u00ea clicar nela, suas op\u00e7\u00f5es de edi\u00e7\u00e3o aparecer\u00e3o no painel esquerdo.<\/p>\n

Clique na aba Advanced<\/strong> e des\u00e7a at\u00e9 Sticky Header Effects<\/strong>. Haver\u00e1 uma mensagem de aviso que diz que o plugin n\u00e3o controla o menu fixo (sticky header), mas voc\u00ea pode desconsiderar isso. Como n\u00f3s tamb\u00e9m adicionamos o Sticky Header Effects para o plugin Elementor, ele vai funcionar muito bem.<\/p>\n

Agora ative o menu fixo (sticky header) do Elementor, alternando a chave para ON<\/strong>:<\/p>\n

\"Habilitar
Habilitar o menu fixo (sticky header) do Elementor<\/figcaption><\/figure>\n

Dependendo do seu tema, seu menu fixo (sticky header) pode parecer transparente. Se este for o caso, voc\u00ea pode querer fazer uma mudan\u00e7a de estilo.<\/p>\n

Em seu painel da Edit Section<\/strong>, em Style<\/strong>, v\u00e1 para Background > Color<\/strong>\u00a0e certifique-se de ter selecionado uma tonalidade que se destacar\u00e1 contra seu fundo normal:<\/p>\n

\"Fa\u00e7a
Fa\u00e7a uma mudan\u00e7a de estilo, se necess\u00e1rio<\/figcaption><\/figure>\n

Ent\u00e3o clique em UPDATE<\/strong>. Agora voc\u00ea pode visualizar seu site para conferir o resultado final:<\/p>\n

\"Menu
Menu fixo (sticky header) em a\u00e7\u00e3o<\/figcaption><\/figure>\n

\u00c9 isso a\u00ed! Este \u00e9 um simples menu fixo (sticky header) do Elementor, mas ele pode facilmente levar o seu site para o pr\u00f3ximo n\u00edvel.<\/p>\n

Como criar um menu fixo usando o Elementor Pro<\/h3>\n

Ao usar o Elementor Pro, criar um menu fixo (sticky header) \u00e9 um pouco mais simples. Voc\u00ea pode adicionar este recurso ao seu site em apenas tr\u00eas passos simples.<\/p>\n

Passo 1: Crie o seu menu<\/h4>\n

Para fazer seu menu, navegue at\u00e9 Appearance > Menus<\/strong> no seu painel do WordPress:<\/p>\n

\"Criar
Criar um menu<\/figcaption><\/figure>\n

D\u00ea um nome descritivo ao seu menu, selecione Primary Menu<\/strong>\u00a0ao lado de Display location<\/strong> e clique em Create Menu<\/strong>:<\/p>\n

\"Nomeie
Nomeie seu menu e selecione um local<\/figcaption><\/figure>\n

Neste ponto, voc\u00ea deve ter algumas p\u00e1ginas existentes em seu site. Selecione as p\u00e1ginas que voc\u00ea gostaria de incluir em seu menu no painel \u00e0 esquerda.<\/p>\n

Ent\u00e3o clique em Add to Menu<\/strong>, seguido por Save Menu<\/strong>:<\/p>\n

\"Selecione
Selecione p\u00e1ginas para incluir no menu<\/figcaption><\/figure>\n

Agora suas p\u00e1ginas devem ser preenchidas no lado direito sob a Menu Structure<\/strong>.<\/p>\n

Passo 2: Crie o seu cabe\u00e7alho<\/h4>\n

A seguir, n\u00f3s precisaremos criar nossa funda\u00e7\u00e3o. Vamos fazer um menu cl\u00e1ssico.<\/p>\n

Para come\u00e7ar, localize a aba Elementor<\/strong> em sua barra lateral esquerda. Logo abaixo disso, v\u00e1 para Templates > Theme Builder<\/strong>. A p\u00e1gina seguinte ser\u00e1 parecida com esta:<\/p>\n

\"Encontre
Encontre “Templates” dentro de “Theme Builder”<\/figcaption><\/figure>\n

Como voc\u00ea provavelmente pode ver, com o Elementor Pro, voc\u00ea pode facilmente come\u00e7ar a projetar cada elemento do seu site.<\/p>\n

Clique no \u00edcone de mais (+<\/strong>) no elemento menu<\/strong>. Agora voc\u00ea deve ver um pop-up que exibe v\u00e1rios blocos de menu que voc\u00ea pode escolher:<\/p>\n

\"Escolha
Escolha entre v\u00e1rios blocos de menu<\/figcaption><\/figure>\n

Se voc\u00ea tem um modelo de menu pr\u00e9-existente, voc\u00ea pode selecion\u00e1-lo na aba My Templates<\/strong>. Caso contr\u00e1rio, voc\u00ea pode querer usar um dos blocos de se\u00e7\u00e3o que vem inclu\u00eddo com o Elementor Pro.<\/p>\n

Quando voc\u00ea tiver feito sua sele\u00e7\u00e3o, simplesmente passe o mouse sobre o bloco desejado e clique em Inserir<\/strong>:<\/p>\n

\"Inserir
Inserir o bloco desejado<\/figcaption><\/figure>\n

Aqui, voc\u00ea ver\u00e1 que este bloco vem com sua pr\u00f3pria logo, mas nosso menu de navega\u00e7\u00e3o foi automaticamente preenchido. Agora, clique em PUBLISH<\/strong>:<\/p>\n

\"Clique
Clique em “Add Condition” dentro de Publish Settings<\/figcaption><\/figure>\n

A tela a seguir lhe alertar\u00e1 para determinar suas PUBLISH SETTINGS<\/strong>. Aqui, selecione ADD CONDITION<\/strong> para decidir onde voc\u00ea quer exibir seu menu:<\/p>\n

\"Selecione
Selecione onde voc\u00ea quer exibir o modelo<\/figcaption><\/figure>\n

Voc\u00ea provavelmente vai querer selecionar Entire Site<\/strong> ao lado do INCLUDE<\/strong>. Voc\u00ea tamb\u00e9m pode excluir certas \u00e1reas do site clicando na seta ao lado do INCLUDE<\/strong> e trocando para a alternativa. Quando voc\u00ea estiver satisfeito com suas sele\u00e7\u00f5es, clique em SAVE & CLOSE<\/strong>.<\/p>\n

Neste ponto, uma mensagem pop-up aparecer\u00e1 no canto inferior direito da sua tela. Se ela n\u00e3o desaparecer antes que voc\u00ea possa clicar nela, selecione a op\u00e7\u00e3o para ver seu site ao vivo.<\/p>\n

Alternativamente, volte para o seu painel do WordPress<\/a> e visualize seu site clicando no \u00edcone da casa no canto superior esquerdo e ent\u00e3o selecionando Visit Site<\/strong>:<\/p>\n

\"O
O menu est\u00e1 agora dispon\u00edvel<\/figcaption><\/figure>\n

Como voc\u00ea pode ver, nosso menu agora est\u00e1 funcionando, mas quando rolarmos a p\u00e1gina para baixo, ele desaparece. Vamos ver o que podemos fazer a respeito disso!<\/p>\n

Passo 3: Fa\u00e7a seu menu ficar fixo<\/h4>\n

Agora vamos ver como criar um menu fixo (sticky header) do Elementor com a ferramenta profissional!<\/p>\n

V\u00e1 para Templates > Theme Builder<\/strong> e selecione o menu que voc\u00ea acabou de fazer. Em seguida, clique em Edit<\/strong> ao lado do \u00edcone do l\u00e1pis na tela seguinte. Isto o levar\u00e1 de volta ao editor do Elementor.<\/p>\n

Passe o mouse sobre o seu modelo de menu, depois clique no \u00edcone de seis pontos no centro. Isto abrir\u00e1 seu painel da Edit Section<\/strong>\u00a0\u00e0 esquerda:<\/p>\n

\"Clique
Clique na op\u00e7\u00e3o pontilhada para editar<\/figcaption><\/figure>\n

Agora, navegue at\u00e9 a guia Advanced <\/strong>e localize a se\u00e7\u00e3o Motion Effects<\/strong>. Aqui, habilite os Scrolling Effects<\/strong>\u00a0alternando a chave para ON<\/strong>:<\/p>\n

\"Alternar
Alternar a op\u00e7\u00e3o “Scrolling Effects” para “On”<\/figcaption><\/figure>\n

Em seguida, role pela se\u00e7\u00e3o Motion Effects <\/strong>para encontrar o campo Sticky<\/strong>. No menu suspenso, selecione Top<\/strong>:<\/p>\n

\"Selecione
Selecione “Top” na op\u00e7\u00e3o “Sticky” dropdown<\/figcaption><\/figure>\n

Agora, clique em UPDATE<\/strong>. Tenha em mente que, dependendo do esquema de cores do seu tema, seu menu fixo (sticky header) do Elementor pode parecer transparente:<\/p>\n

\"O
O menu fixo (sticky header) agora est\u00e1 funcionando corretamente<\/figcaption><\/figure>\n

Se esse for o caso, e voc\u00ea n\u00e3o gostar da apar\u00eancia, voc\u00ea pode sempre mudar sua cor de fundo. Em seu painel da Edit Section<\/strong>, v\u00e1 para Style > Background<\/strong> e selecione Classic <\/strong>como seu tipo de fundo.<\/p>\n

Agora, selecione uma nova cor de fundo para o seu modelo de menu. Voc\u00ea vai querer escolher uma tonalidade que seja complementar ao resto da p\u00e1gina, mas que tamb\u00e9m crie um contraste agrad\u00e1vel:<\/p>\n

\"Editar
Editar o menu fixo (sticky header), se aplic\u00e1vel<\/figcaption><\/figure>\n

Como este \u00e9 apenas um exemplo, n\u00f3s estamos simplesmente escolhendo uma cor cinza para tornar nosso menu menos transparente.<\/p>\n

Agora, clique em UPDATE<\/strong>\u00a0para salvar suas mudan\u00e7as. V\u00e1 em frente e visualize seu resultado final:<\/p>\n

\"Ver
Ver qualquer altera\u00e7\u00e3o feita<\/figcaption><\/figure>\n

\u00c9 isso a\u00ed! Voc\u00ea provavelmente vai querer ajustar o estilo e as cores de acordo com a sua marca. Apenas certifique-se de sempre salvar suas mudan\u00e7as quando terminar.<\/p>\n

Como usar o CSS para melhorar o seu menu fixo (sticky header) do Elementor<\/h2>\n

Quando voc\u00ea implementa um menu fixo (sticky header) do Elementor em seu site, pode parecer um significativo “facelift” para o design do seu site. No entanto, voc\u00ea pode estar interessado em mais customiza\u00e7\u00f5es ou caracter\u00edsticas mais din\u00e2micas.<\/p>\n

Agora que voc\u00ea sabe como criar um menu b\u00e1sico fixo, vamos ver como levar o seu projeto para o pr\u00f3ximo n\u00edvel. Voc\u00ea pode fazer isso usando o c\u00f3digo Cascading Style Sheets (CSS)<\/a> no WordPress.<\/p>\n

Se voc\u00ea \u00e9 um iniciante ou n\u00e3o tem experi\u00eancia em codifica\u00e7\u00e3o, n\u00e3o se preocupe. Melhorar seus designs \u00e9 uma brisa com o Elementor.<\/p>\n

Para fazer isso, v\u00e1 para Templates > Theme Builder > Header<\/strong>:<\/p>\n

\"Adicionar
Adicionar CSS personalizado para fazer mudan\u00e7as de menu<\/figcaption><\/figure>\n

Em Edit Section > Advanced > Custom CSS<\/strong>,<\/em> voc\u00ea pode adicionar um pequeno trecho de CSS para fazer mudan\u00e7as estil\u00edsticas.<\/p>\n

Tipos de menus do Elementor ou Sticky<\/h2>\n

Aqui est\u00e3o algumas melhorias populares que voc\u00ea pode querer considerar para o seu menu fixo (sticky header) do Elementor!<\/p>\n

Menu transparente fixo<\/h3>\n

Alguns temas podem automaticamente definir menus fixos como transparentes. Entretanto, se voc\u00ea quiser fazer isso usando CSS<\/a>, voc\u00ea pode utilizar um trecho de c\u00f3digo<\/a> como este:<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Simplesmente copie e cole este c\u00f3digo no campo CSS personalizado<\/strong> e ajuste os campos de acordo com suas prefer\u00eancias. Este trecho altera a cor de fundo, transpar\u00eancia e altura do seu menu, com um efeito de anima\u00e7\u00e3o:<\/p>\n
\"CSS
CSS para personaliza\u00e7\u00e3o de fundo do menu<\/figcaption><\/figure>\n
As possibilidades para este tipo por si s\u00f3 s\u00e3o infinitas.<\/p>\n
Menu shrinking sticky<\/h3>\n
Outra escolha popular \u00e9 um menu que fica maior e menor conforme os visitantes rolam. Aqui est\u00e1 o c\u00f3digo que voc\u00ea vai precisar para este tipo de menu fixo (sticky header) do Elementor:<\/p>\n
header.sticky-header {\n    --header-height: 90px;\n    --opacity: 0.90;\n    --shrink-me: 0.80;\n    --sticky-background-color: #0e41e5;\n    --transition: .3s ease-in-out;\n\n    transition: background-color var(--transition),\n                background-image var(--transition),\n                backdrop-filter var(--transition),\n                opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n    background-color: var(--sticky-background-color) !important;\n    background-image: none !important;\n    opacity: var(--opacity) !important;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n    transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n    min-height: calc(var(--header-height) * var(--shrink-me))!important;\n    height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n    transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n    padding-bottom: 10px !important;\n    padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n    transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n    max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Se voc\u00ea n\u00e3o estiver confort\u00e1vel com um trecho de c\u00f3digo t\u00e3o extenso, voc\u00ea pode querer consultar o guia do Elementor para fazer um menu shrink fixo<\/a>.<\/p>\n
Com este projeto, voc\u00ea vai acabar com este efeito:<\/p>\n
\"Novo
Novo efeito de menu<\/figcaption><\/figure>\n
Embora este menu tenha um toque sutil, sua sofistica\u00e7\u00e3o pode dar ao seu projeto um toque mais profissional.<\/p>\n
Fade-In \/ Fade-Out<\/h3>\n
Al\u00e9m dessas op\u00e7\u00f5es da moda, h\u00e1 tamb\u00e9m o recurso fade-in \/ fade-out (tamb\u00e9m chamado de ‘revelar’). \u00c9 algo parecido com isto:<\/p>\n
\"Fade
Fade in e fade out<\/figcaption><\/figure>\n
Para este efeito, voc\u00ea n\u00e3o precisar\u00e1 tocar em nenhum c\u00f3digo. Simplesmente navegue at\u00e9 o seu menu no seu construtor de temas. Ent\u00e3o v\u00e1 para Edit Section > Advanced > Motion Effects > Scrolling Effects<\/strong>:<\/p>\n
\"Editar
Editar a op\u00e7\u00e3o “Transpar\u00eancia”<\/figcaption><\/figure>\n
Aqui, clique no \u00edcone do l\u00e1pis ao lado do campo Transparency<\/strong>\u00a0e mude a Direction<\/strong>\u00a0para Fade In<\/strong> ou Fade Out<\/strong>. Depois, ajuste o seu desenho de acordo com as suas prefer\u00eancias.<\/p>\n
Existem muitas op\u00e7\u00f5es para estes efeitos de transpar\u00eancia, por isso recomendamos que voc\u00ea verifique a documenta\u00e7\u00e3o do Elementor<\/a>. Dessa forma, voc\u00ea ser\u00e1 capaz de obter a apar\u00eancia exata que deseja.<\/p>\n\n
Resumo<\/h2>\n
Trabalhar com um construtor de sites confi\u00e1vel \u00e9 uma excelente alternativa para pagar a um desenvolvedor web veterano<\/a> para criar o seu site. Ao usar alguns dos melhores softwares de design de sites<\/a>, voc\u00ea pode facilmente fazer os elementos essenciais para qualquer site. Estes incluem menu fixo (sticky header) pr\u00e1ticos, mas bonitos.<\/p>\n
Um menu fixo (sticky header) pode criar uma experi\u00eancia mais agrad\u00e1vel para seus usu\u00e1rios. Voc\u00ea pode escolher entre v\u00e1rios estilos de menus din\u00e2micos, incluindo transparente e encolhido. Melhor ainda, voc\u00ea pode fazer esses impressionantes designs de menus com Elementor Pro<\/a> e sua vers\u00e3o gratuita.<\/p>\n
Projetar seu site \u00e9 um dos primeiros passos para lan\u00e7\u00e1-lo. Entretanto, voc\u00ea precisar\u00e1 primeiro de uma hospedagem confi\u00e1vel. Confira os planos de hospedagem gerenciada<\/a> da Kinsta para ver como podemos otimizar o desempenho do seu site!<\/p>\n","protected":false},"excerpt":{"rendered":"
Se voc\u00ea \u00e9 um aspirante como desenvolvedor web ou um empreendedor de eCommerce, seus sites provavelmente compartilham alguns elementos essenciais. Por exemplo, cada site precisa de …<\/p>\n","protected":false},"author":117,"featured_media":49069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[452,701],"topic":[1026],"class_list":["post-48782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-desenvolvimento-wordpress"],"yoast_head":"\nO Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor<\/title>\n<meta name=\"description\" content=\"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor\" \/>\n<meta property=\"og:description\" content=\"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T06:28:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T12:29:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor\",\"datePublished\":\"2022-04-22T06:28:07+00:00\",\"dateModified\":\"2025-01-20T12:29:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\"},\"wordCount\":3963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\",\"name\":\"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\",\"datePublished\":\"2022-04-22T06:28:07+00:00\",\"dateModified\":\"2025-01-20T12:29:53+00:00\",\"description\":\"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor","description":"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/","og_locale":"pt_PT","og_type":"article","og_title":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor","og_description":"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-04-22T06:28:07+00:00","article_modified_time":"2025-01-20T12:29:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor","datePublished":"2022-04-22T06:28:07+00:00","dateModified":"2025-01-20T12:29:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/"},"wordCount":3963,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","keywords":["Elementor","page builder"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/","url":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/","name":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","datePublished":"2022-04-22T06:28:07+00:00","dateModified":"2025-01-20T12:29:53+00:00","description":"Um menu ou cabe\u00e7alho fixo (sticky header) mant\u00e9m informa\u00e7\u00f5es importantes em vista. Aprenda como construir facilmente um menu fixo do Elementor para manter seu p\u00fablico envolvido.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/menu-fixo-do-elementor.jpeg","width":1460,"height":730,"caption":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/menu-fixo-do-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/48782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=48782"}],"version-history":[{"count":10,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/48782\/revisions"}],"predecessor-version":[{"id":49089,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/48782\/revisions\/49089"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/translations\/nl"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48782\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/49069"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=48782"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=48782"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=48782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}