{"id":112926,"date":"2023-04-04T10:45:40","date_gmt":"2023-04-04T10:45:40","guid":{"rendered":"https:\/\/elementor.com\/blog\/apresentando-o-elementor-3-12-crie-menus-mega-bonitos-e-sofisticados\/"},"modified":"2025-12-28T06:30:58","modified_gmt":"2025-12-28T04:30:58","slug":"apresentando-o-elementor-3-12-crie-menus-mega-bonitos-e-sofisticados","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/apresentando-o-elementor-3-12-crie-menus-mega-bonitos-e-sofisticados\/","title":{"rendered":"Apresentando o Elementor 3.12 – Crie Menus Mega Bonitos e Sofisticados"},"content":{"rendered":"\n

O Elementor 3.12 inclui uma s\u00e9rie de recursos empolgantes, incluindo um novo widget de Menu, que permitir\u00e1 criar visualmente Menus Mega sofisticados no Elementor.\nEsta vers\u00e3o tamb\u00e9m inclui um novo recurso que permite personalizar ainda mais as listagens do seu site e criar um modelo alternativo no widget Loop Grid.\nPor fim, esta vers\u00e3o tamb\u00e9m amplia as capacidades existentes e oferece op\u00e7\u00f5es adicionais de design e personaliza\u00e7\u00e3o. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Apresentando o Mega Menu no Elementor com o Novo Widget de Menu<\/h2>\n\n

Esta vers\u00e3o apresenta um dos recursos mais solicitados \u2013 o Mega Menu, dispon\u00edvel com o novo widget de Menu.\nUsando o novo widget de Menu, voc\u00ea pode criar um menu expans\u00edvel que permite exibir mais conte\u00fado.\nIsso melhora a experi\u00eancia do visitante, facilitando a localiza\u00e7\u00e3o de certas categorias e subcategorias, e permite que voc\u00ea crie designs<\/a> de sites \u00fanicos e que se destacam.\nPara usar o novo widget de menu, certifique-se de habilitar os recursos Menu, Flexbox Containers e Nested Elements indo ao seu Painel do WordPress \u2192 Elementor \u2192 Recursos. <\/p>\n\n

Configurando a Navega\u00e7\u00e3o do Seu Site<\/h3>\n\n

Com o novo widget de Menu, voc\u00ea pode criar quantos itens de menu quiser, do zero – sem necessariamente precisar criar menus na tela de Menus do WordPress.\nCada item de menu pode ser vinculado a qualquer p\u00e1gina, dando-lhe mais flexibilidade para estruturar a navega\u00e7\u00e3o do seu site.\nPara uma navega\u00e7\u00e3o de melhores pr\u00e1ticas, \u00e9 recomend\u00e1vel usar a tag din\u00e2mica de URL<\/a> Interno para garantir que seus itens de menu sempre vinculem \u00e0 p\u00e1gina que voc\u00ea pretendia. <\/p>\n\n

Para cada item de menu, voc\u00ea pode decidir se o item de menu inclui conte\u00fado suspenso onde voc\u00ea pode adicionar subcategorias, ou n\u00e3o, e escolher um \u00edcone para o indicador suspenso.\nSe voc\u00ea optar por adicionar conte\u00fado suspenso, pode definir um efeito suspenso para que o item de menu abra ao passar o mouse ou clicar, e escolher se deseja que o conte\u00fado suspenso apare\u00e7a com um efeito de anima\u00e7\u00e3o. <\/p>\n\n

Crie um Mega Menu com Conte\u00fado Suspenso<\/h3>\n\n

Ao habilitar o conte\u00fado suspenso, por item de menu, e aproveitando o poder dos Containers e Elementos Aninhados, voc\u00ea pode criar Menus Mega bonitos e sofisticados.\nQuando voc\u00ea habilita o conte\u00fado suspenso em um item de menu, um novo container ser\u00e1 adicionado ao item de menu, onde voc\u00ea pode arrastar qualquer widget, estilizar a \u00e1rea de conte\u00fado e projetar qualquer layout que desejar, levando a uma melhor experi\u00eancia do visitante e melhorando seu engajamento.\nSaiba como criar um Mega Menu aqui<\/a>. <\/p>\n\n

Configura\u00e7\u00f5es Responsivas<\/h2>\n\n

Para ajustar a experi\u00eancia do visitante a cada dispositivo, voc\u00ea pode escolher o ponto de interrup\u00e7\u00e3o em que o menu se torna um menu de altern\u00e2ncia e ajustar a forma como as \u00e1reas de conte\u00fado suspenso s\u00e3o projetadas para corresponder \u00e0 tela em que est\u00e3o sendo visualizadas. <\/p>\n\n

Por Favor, Note:<\/strong> Como parte desta atualiza\u00e7\u00e3o, o widget Nav Menu foi renomeado para Menu do WordPress, e voc\u00ea ainda pode us\u00e1-lo a qualquer momento, mesmo dentro do seu widget de Menu para criar Menus baseados na tela de Menus do WordPress. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Diversifique Seu Design com um Modelo Alternativo de Loop<\/strong><\/h2>\n\n

O Modelo Alternativo de Loop, um novo recurso no widget Loop Grid, permite alcan\u00e7ar um n\u00edvel mais alto de flexibilidade de design aplicando um modelo diferente em itens espec\u00edficos dentro de uma grade de loop. <\/p>\n\n

Adicione um Modelo Alternativo para Destacar Itens<\/h3>\n\n

Para adicionar outro modelo na sua grade de loop, ative a altern\u00e2ncia ‘Aplicar um modelo alternativo’.\nClicar em Criar um Modelo levar\u00e1 voc\u00ea ao Construtor de Temas<\/a>, onde voc\u00ea pode projetar um novo Item de Loop, alternativamente, voc\u00ea pode escolher qualquer um dos Modelos de Item de Loop que voc\u00ea j\u00e1 criou como seu modelo alternativo.\nVoc\u00ea pode criar at\u00e9 20 diferentes modelos<\/a> para cada Loop Grid no seu site. <\/p>\n\n

Depois de escolher o modelo que deseja usar, voc\u00ea pode determinar em que posi\u00e7\u00e3o do item na grade deseja aplic\u00e1-lo e se deseja que ele se repita ou n\u00e3o.\nPor exemplo, voc\u00ea pode aplicar um modelo alternativo ao item na 2\u00aa posi\u00e7\u00e3o na grade e, em seguida, determinar se deseja que ele apare\u00e7a apenas no 2\u00ba item ou se repita em cada 2\u00ba item. <\/p>\n\n

Por Favor, Note:<\/strong> Como parte desta vers\u00e3o, aplicar um modelo alternativo substitui o design de itens espec\u00edficos na sua grade de loop, com base na consulta que voc\u00ea selecionou para toda a grade.\nAinda n\u00e3o \u00e9 poss\u00edvel injetar um item que esteja fora da consulta. <\/p>\n\n

Ocupe Mais Espa\u00e7o com a Extens\u00e3o de Coluna<\/h3>\n\n

Defina uma extens\u00e3o de coluna para o modelo alternativo para fazer com que itens espec\u00edficos do loop se destaquem ainda mais.\nIsso permitir\u00e1 que voc\u00ea projete um modelo que ocupe mais espa\u00e7o dentro da sua grade de loop.\nPor exemplo, se voc\u00ea tiver uma grade de loop com 3 colunas, poder\u00e1 criar um modelo alternativo que cubra 2 colunas.\nIsso significa que se voc\u00ea aplicar o modelo alternativo ao 2\u00ba item e configur\u00e1-lo para abranger 2 colunas, o 2\u00ba item ocupar\u00e1 2 colunas na primeira linha. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Inicie seu Fluxo de Trabalho com Modelos de Loop Pr\u00e9-desenhados<\/strong><\/h2>\n\n

Acelere seu fluxo de trabalho e inspire-se com 10 novos modelos de loop dispon\u00edveis na biblioteca.\nEsta vers\u00e3o inclui 6 modelos para posts e 4 para WooCommerce<\/a> produtos.\nVoc\u00ea pode encontrar os modelos clicando no \u00edcone da biblioteca de modelos na tela quando criar um novo modelo de loop.\nA biblioteca de modelos mostrar\u00e1 modelos de posts ou produtos com base no \u2018tipo de modelo\u2019 que voc\u00ea escolher na aba de conte\u00fado da grade de loop. <\/p>\n\n

Depois de escolher o modelo que deseja usar, voc\u00ea pode personaliz\u00e1-lo ainda mais e escolher o conte\u00fado e a consulta que deseja exibir. <\/p>\n\n

Por favor, note<\/strong>: Os Modelos de Loop s\u00e3o baseados em cont\u00eaineres e est\u00e3o dispon\u00edveis apenas para sites que t\u00eam Cont\u00eaineres habilitados. <\/p>\n\n

\"\"<\/figure>\n\n

Reforma da Interface do Elementor<\/strong><\/h2>\n\n

O Elementor existe h\u00e1 quase 7 anos, que \u00e9 tamb\u00e9m quando a interface do Editor foi projetada pela primeira vez.\nAo longo dos anos, in\u00fameros novos recursos e widgets<\/a> foram adicionados, tornando importante para o Elementor fazer mudan\u00e7as na Interface do Usu\u00e1rio (UI) e na Experi\u00eancia do Usu\u00e1rio (UX), para facilitar o crescimento futuro do produto. <\/p>\n\n

Nas pr\u00f3ximas vers\u00f5es, a interface do Elementor passar\u00e1 por uma reforma gradual, que ser\u00e1 constru\u00edda em REACT.\nAs mudan\u00e7as na interface incentivam as melhores pr\u00e1ticas na cria\u00e7\u00e3o de sites com Elementor, melhoram a acessibilidade, simplificam os fluxos de trabalho e permitem a introdu\u00e7\u00e3o de novos recursos no futuro. <\/p>\n\n

Um Novo esquema de cores para o Elementor <\/strong><\/h3>\n\n

No Elementor 3.12, a interface do Editor passou por sua primeira atualiza\u00e7\u00e3o para alinhar-se ao novo esquema de cores<\/a>.\nComo parte desta atualiza\u00e7\u00e3o, as cores no Editor foram simplificadas.\nAs novas cores s\u00e3o otimizadas para os modos Escuro e Claro, t\u00eam melhor acessibilidade e permitem que voc\u00ea se concentre no conte\u00fado do seu site, sem afetar nenhuma das funcionalidades do produto. <\/p>\n\n

Experimento: Nova Barra Superior<\/strong><\/h3>\n\n

No Elementor 3.12, a nova Barra Superior \u00e9 introduzida como um experimento que voc\u00ea pode habilitar (do Painel do WordPress \u2192 Elementor \u2192 Recursos).\nEsta vers\u00e3o apresenta o est\u00e1gio inicial da nova Barra Superior no Editor, que foi constru\u00edda usando REACT para melhorar o desempenho e permitir futuras capacidades.\nA Barra Superior re\u00fane todas as a\u00e7\u00f5es essenciais necess\u00e1rias para a cria\u00e7\u00e3o de sites em um local centralizado e de f\u00e1cil acesso. <\/p>\n\n

Como parte desta vers\u00e3o, a Barra Superior inclui os seguintes itens e capacidades: <\/p>\n\n