Como criar um menu de tela cheia no WordPress

Os prós e contras de ter um menu em tela cheia

O que é típico de um menu de tela inteira é que ele fica inicialmente oculto e pode ser acessado clicando no ícone do abridor de menu geralmente localizado em algum lugar na lateral da tela. Este ícone é facilmente reconhecível, pois geralmente aparece na forma de duas ou três linhas horizontais (também conhecido como ícone de hambúrguer) ou pontos.

E embora este ícone de menu, em nossa opinião, seja intuitivo o suficiente por si só, alguns usuários ainda podem se confundir com este tipo de navegação. Ou seja, a maioria das pessoas está acostumada a ver a navegação padrão do site com links de menu que são instantaneamente visíveis em algum lugar na parte superior da tela. Portanto, se um menu em tela cheia (que está inicialmente oculto) for o único tipo de navegação disponível, ele pode desorientar alguns visitantes do site.

Dito isso, um menu em tela cheia ainda é superior quando se trata de introduzir um pouco de criatividade em sua navegação. Uma vez que toda a estrutura do menu em tela cheia é exibida em toda a tela, isso oferece muito espaço para experimentação. Por exemplo, você pode estilizar seu menu da maneira que quiser sem interromper o resto do design do site . Com um menu de tela inteira, você também tem espaço suficiente para inserir quaisquer elementos adicionais. Por exemplo, você pode adicionar ícones de mídia social , seu logotipo do site, algumas informações adicionais sobre você sobre sua marca e qualquer outra coisa que você considere apropriada.

Em geral, você pode brincar com o design e criar um menu de tela inteira notável que ajudará seu site a se destacar de uma maneira única. Existem alguns exemplos impressionantes de menus em tela cheia por aí que ilustram perfeitamente o potencial criativo desta navegação tipo.

Resumindo, um menu em tela cheia é ótimo porque tem uma função dupla , de certa forma. Quando escondido atrás de um único ícone de abertura de menu, mantém o resto do design do site limpo, simples e minimalista . Por outro lado, oferece a capacidade de criar um menu de aparência única que ainda é intuitivo e fácil de navegar quando aberto. Como tal, é o tipo de navegação ideal para todos os tipos de sites, incluindo agências digitais, portfólios online, estúdios de criação e diferentes tipos de vitrines interativas.

No entanto, este menu pode não ser a melhor solução para alguns sites, como lojas online ou empresas que possuem muitas páginas em seus sites em geral. Esses tipos de sites geralmente oferecem muitos produtos e/ou serviços e exigem um tipo de navegação em várias camadas . Isso não quer dizer que um menu em tela cheia não possa ser usado para exibir efetivamente vários produtos em um site, mas simplesmente não é considerado uma prática padrão. Isso ocorre porque esses sites geralmente têm muitos itens que precisam ser exibidos em um menu. Portanto, se você precisa de um tipo prático de navegação e não se preocupa muito com o estilo visual, um menu mais clássico pode funcionar melhor para você.

Com tudo isso dito, vamos dar uma olhada em como você pode adicionar um menu de tela inteira ao seu site WordPress. Mostraremos como você pode fazer isso com a ajuda de um plug-in primeiro e, em seguida, usando um de nossos temas.

Criando um menu de tela inteira com um plug-in

Se o tema que você está usando não vem com a funcionalidade de menu em tela cheia, não se preocupe-você pode adicionar um facilmente usando um plug-in. Nossa escolha é Menu FullScreen , um ótimo plugin que vem com muitos de opções e permite uma personalização abrangente do menu de tela inteira. A versão gratuita do plug-in permite que você defina vários recursos relacionados à aparência e design de tela inteira, como fontes, animações, efeitos de foco e muito mais. Se você optar por atualizar para a versão profissional, terá acesso a alguns recursos adicionais, como opções que permitem a personalização de um ícone de abertura de menu, a capacidade de adicionar uma imagem de fundo, alterar o alinhamento do texto do menu, etc.

Antes de começar a adicionar um menu de tela inteira usando um plug-in, não se esqueça de crie um menu de navegação usando Aparência >> Menus primeiro.

Depois de instalar o plug-in e ativá-lo, encontre o Opções de menu em tela cheia no painel de administração e clique nele.

Isso abrirá uma tela de opções onde você terá acesso a várias guias diferentes para configurar o plug-in de acordo com sua preferência.

Primeiro, a guia Configurações dá acesso a algumas opções bastante úteis. Aqui, você poderá ativar o menu animado em tela cheia , escolher se deseja mostrar o menu apenas para usuários administradores ou fazê-lo aparecer apenas no celular dispositivos . Você também poderá ocultar automaticamente o menu ao rolar ou optar por ocultá-lo em páginas específicas.

Na guia Design/Aparência , você poderá definir diferentes elementos de design e aparência do menu de tela inteira, incluindo plano de fundo, fonte e animação.

A seção Imagem/cor de fundo contém campos para alterar a cor quando o menu é aberto e quando é fechado e a capacidade de adicionar uma imagem de fundo (que está disponível apenas se você atualizar para o versão profissional do plugin).

Na seção Fonte/Aparência , você poderá alterar a cor da fonte de seus itens de menu, bem como para ícones sociais e o ícone de abertura/hambúrguer do menu.

Você também poderá selecionar a família da fonte, o tamanho (que é um recurso profissional), a espessura da fonte e adicionar rolagem (o que é útil caso seu menu principal precise ter mais altura).

Finalmente, a tela de Configurações de animação permitirá que você escolha o tipo de animação (o efeito que aparece quando você abre um menu), ative o menu lateral lateral em vez de um menu de tela inteira, selecione um foco efeito e muito mais.

Se você atualizar para a versão pro do plugin, terá mais algumas opções à sua disposição, como a capacidade de alterar a posição do botão, escolher uma imagem de botão de hambúrguer, alterar o alinhamento do texto do menu e corrigir botão de hambúrguer (personalize sua posição).

A guia Conteúdo do menu oferece opções mais úteis. Mais importante, aqui, você precisa selecionar um menu que deseja exibir em tela cheia , ou seja, atribuir um menu específico (que você criou anteriormente em Aparência >> Menus ) para sua navegação em tela cheia.

Além disso, você poderá adicionar quaisquer códigos de acesso adicionais ou HTML, incluindo a página da política de privacidade , adicione ícones sociais e muito mais.

A guia WooCommerce permite que você adicione um menu WooCommerce (especificamente os menus Minha conta, Loja, Carrinho e Checkout) e um carrinho WooCommerce (que é um recurso profissional).

Por fim, a guia Remover dados permite que você ative a opção que removerá seus dados relacionados ao menu de tela inteira caso você acabe desinstalação do plug-in .

Claro, você deve salvar suas alterações usando o botão Salvar alterações na parte inferior de cada guia para armazenar quaisquer configurações.

Quando estiver satisfeito com a forma como configurou as opções do menu em tela inteira (e depois de selecionar um menu a ser exibido na navegação em tela inteira), você deve ir em frente e verificar a aparência do seu menu.

Creating a Fullscreen Menu in Qode Themes

If you’re using (or plan to use) a Qode theme for your WordPress site, you’ll be happy to learn that our themes come packed with a set of comprehensive options that allow you to create a fully responsive, intuitive, and user-friendly fullscreen menu.

We also have to mention that there are many WordPress themes with fullscreen menus that contain a built-in and responsive fullscreen menu out of the box. Of course, if you want to further customize your fullscreen menu and style in any way you want, you will be able to do so with ease.

We will show you how to do that using the Bridge theme as an example. Before we begin, however, we should note that some specific options may vary from theme to theme. Still, the following example should give you a good idea of what you can expect if you’re using one of our themes.

If you prefer to follow video instructions, you can also check out our video on the same topic:

Once you’re in the admin dashboard area, access the Qode Options screen and choose the Header option.

There, you will find a neat set of links that will allow you to jump to the specific section once you click on them. To access the Fullscreen Menu section, simply click on the anchor link with the same name.

You will immediately see the option that allows you to enable a fullscreen menu. Simply click Yes.

Then, a whole new set of fullscreen menu-related options will open.

After you hit the Save Changes button, you should go to Appearance >> Menus to assign a menu to the fullscreen menu navigation.

There, you will also see the Menu Settings section. Mark the “Fullscreen Navigation” box and hit the Save Menu button.

In case you only want the fullscreen navigation menu to appear on your site, go to the Manage Locations tab and set the other navigation types to default (“Select a Menu”).

After hitting the Save Menu button, you can go ahead and preview your homepage. You will see that now only your fullscreen menu navigation is activated.

Now, go to Qode Options >> Header and scroll to Fullscreen Menu once again to set some design options related to your menu.

The Fullscreen Menu Overlay Animation, for example, lets you decide on an animation type for the fullscreen menu overlay (you can choose from Fade Push Text Right, Fade Push Text Top, and Fade Text Scaledown).

You can also replace your default fullscreen menu logo image (the one located in the top left corner when you click on the fullscreen menu).

The Menu Icon Style option allows you to choose the style for your menu opener. You can pick the default type, or something from Font Awesome and Font Elegant.

Another useful set of options are the ones that concern the style of your menu (both the first and the second level). This includes font family, font size, line height, font style, weight, etc.

Finally, you will also be able to set the background color (and transparency) for the menu, choose your background image (if you prefer to have an image for your background instead of one color), and the color for your close button.

By clicking on Header Button Icons, you scroll directly to the area where you can predefine your options for the menu opener icon. This includes the icon color, hover color, and size.

When it comes to the icon size, you will see two different fields.

One field allows you to enter a custom size, which applies if you’re using the icon from one of the icon families, such as Font Awesome. In case you’re using the default icon, you should use the other (Side Menu/Fullscreen Menu Icon Size) field. You will be able to choose from Normal, Medium, and Large).

Once you’re done configuring all the design settings, you can go ahead and see the way your fullscreen menu looks like.

If you’re using Bridge as well, in case you don’t see the menu opener in the header even after having followed all these steps for setting your fullscreen menu, the reason might be that you have selected a header type that doesn’t support the fullscreen menu. In that case, you should head to Qode Options >> Header once again.

Scroll to the Header section (by clicking on the anchor link with the same name). You will be able to see that Bridge supports a few different header types, such as Fixed, Sticky, etc.

Some of these header layouts are designed for a more minimalistic style, therefore some of them won’t support the fullscreen menu opener icon.

If you select a Fixed Header Top or Sticky Divided Header, your menu opener won’t show. So make sure to choose any of the other available header layouts for your opener to appear.

Wrapping Things Up

A fullscreen menu is a great opportunity to present the most important links of your site in a way that will keep things clean, simple, and minimalistic for users. At the same time, it also allows you to get creative and add a layer of uniqueness to your site that will help differentiate you from the rest.

That being said, you should remember to always keep users in mind when organizing your fullscreen navigation system. You can do this by making sure that your menu is easy to find and is as intuitive to use as possible. No matter if you’re using one of our themes, or require the help of a plugin, if you end up following our instructions, you’ll be able to build a beautiful and functional fullscreen menu in no time.