Menu em tela cheia do Styling Divi

O menu em tela cheia do Divi apresenta uma grande oportunidade para um design personalizado. Ao contrário dos outros quatro estilos de cabeçalho disponíveis no Personalizador de temas do Divi, o menu de tela inteira preenche a tela inteira quando ativo. Isso abre espaço para um layout criativo para os elementos de menu e cabeçalho do Divi.

Na postagem de hoje, vou mostrar como estilizar seu menu em tela cheia para dar uma sensação mais personalizada para seus visitantes. Para fazer isso, mudarei algumas opções no personalizador de tema e adicionarei CSS personalizado.

Vamos começar.

O antes e o depois

É assim que o menu de largura total se parece por padrão:

Aqui está uma prévia do novo design:

Menu em tela cheia do Styling Divi

Inscreva-se no nosso canal no Youtube

Começando

Antes de começarmos a projetar, certifique-se de ter um menu principal ativo com itens de menu já adicionados.

Atualize as configurações no personalizador de tema

No painel do WordPress, vá para Divi> Personalizador de tema> Cabeçalho e navegação> Formato do cabeçalho. Em seguida, selecione Tela inteira como Estilo de cabeçalho.

Depois de definir o estilo do cabeçalho em tela cheia, volte para Cabeçalho e navegação. Agora você verá um novo conjunto de opções chamado “Slide In & Fullscreen Header Settings”.

Atualize as configurações de Slide In e Cabeçalho de Tela Inteira da seguinte maneira:

Marque a opção Mostrar barra superior
Tamanho do texto do menu: 46px
Tamanho do texto da barra superior: 24px
Fonte: Playfair Display
Estilo da fonte: negrito (B)
Cor do link do menu: #ffffff
Cor do link ativo: # edef86
Cor do texto da barra superior: #ffffff

Agora volte para as configurações de cabeçalho e navegação e clique em Elementos do cabeçalho. Em Elementos do cabeçalho, atualize o seguinte:

Selecione Mostrar Ícones Sociais
Selecione Mostrar ícone de pesquisa
Número de telefone: [insira o número]
Email: [insira o email]

Depois que tudo estiver configurado, o layout padrão deve ser assim:

Agora vamos adicionar CSS customizado.

Adicionando CSS Personalizado

Adicionar CSS personalizado no Divi pode ser feito em alguns lugares. Como já estamos usando o personalizador de tema, vá para CSS Adicional. É aqui que iremos adicionar nosso CSS. Claro, se você preferir adicioná-lo ao seu arquivo style.css externo em seu tema filho, vá em frente.

Para aqueles que estão sem pressa, você pode pular para a versão completa do código CSS, que pode ser copiado e colado na seção CSS adicional. Saiba que você ainda precisará voltar e adicionar alguns elementos, como a imagem de plano de fundo, ao seu código.

Agora, de volta à adição de nosso CSS.

Como a maior parte do CSS personalizado só se aplicará à versão desktop do cabeçalho de tela inteira, vamos começar adicionando uma consulta de mídia que visa tamanhos de tela com largura mínima de 980 px. Adicione o seguinte na seção CSS adicional:

@media all and (min-width: 980px){

}

Agora vamos mudar um pouco o layout do cabeçalho de tela cheia ajustando a posição do menu de navegação e os elementos da barra superior para que a navegação fique à esquerda da tela e os elementos da barra superior sejam empilhados verticalmente à direita do tela. Para fazer essa alteração, adicione o seguinte css dentro dos colchetes de consulta de mídia.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

A seguir, vamos aumentar o tamanho da nossa barra de pesquisa com o seguinte CSS:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

E vamos adicionar o seguinte CSS para alinhar o menu à direita:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Em seguida, vamos tornar o ícone do menu de fechamento no canto superior direito maior e mais fácil de clicar:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Também vamos remover a sobreposição de plano de fundo atrás dos elementos do menu superior e remover a opacidade do plano de fundo.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

Se você tiver itens de submenu, este CSS torna a seta suspensa à direita do item de menu maior:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Vamos verificar o que temos até agora:

Agora estamos prontos para adicionar nossa imagem de fundo. Como quero que minha imagem de plano de fundo seja exibida em todos os dispositivos, adicionarei esse CSS fora dos colchetes de consulta de mídia para que o plano de fundo não fique oculto em tamanhos de tela com largura inferior a 980 px.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

Se você ainda não tem um URL de imagem de fundo, carregue uma imagem de fundo (1920 × 1080) para a galeria de mídia do WordPress e copie o URL.

Agora substitua o texto “INSERT IMAGE URL” colando o URL da imagem no código.

Agora você está pronto!

Aqui está uma versão completa do código CSS que você deve ter adicionado ao seu CSS adicional (exceto para o URL da imagem que você precisa fornecer):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Clique em Salvar e publicar

Agora vamos dar uma olhada:

Layout de menu de grade alternativa

Para adicionar um layout de grade para o seu menu, adicione o seguinte CSS abaixo do código atual e dentro dos colchetes de consulta de mídia:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

Observação importante: pode ser necessário alterar o tamanho da fonte do menu para 30px (ou perto disso) para garantir que os itens do menu não se sobreponham em tamanhos de tela menores. Além disso, este layout não funcionará se o seu menu tiver itens de submenu.

Itens de submenu no cabeçalho de tela inteira

Lembre-se de que se você tiver itens de submenu, o item de menu pai funcionará apenas como um link de alternância para mostrar e ocultar o (s) item (ns) de submenu. Ele não funcionará como um link de menu.

Responsivo?

Essa cutomização é responsiva e funciona bem em todos os tamanhos de tela.

O cabeçalho de tela inteira é construído com duas células de tabela adjacentes que são alinhadas verticalmente. A célula esquerda da tabela contém o menu e a célula direita contém os outros elementos do cabeçalho. Como o conteúdo é alinhado verticalmente e as células da tabela ocuparão 50% (metade) do tamanho da tela em todos os momentos, o conteúdo sempre se ajustará perfeitamente a qualquer tamanho de tela.

Se o tamanho da tela for inferior a 980 px (tablets e telefones), o layout Divi padrão será ativado e exibirá o menu perfeitamente no celular.

Pensamentos finais

Se você está pensando em adicionar um cabeçalho de tela inteira ao seu site, espero que este design seja uma inspiração útil. A simetria dos elementos do cabeçalho e itens do menu equilibra as coisas e traz mais atenção para as informações de contato que são importantes para muitos clientes.

Lembre-se de que, como esse menu é de tela inteira, a imagem de fundo será a chave. Você não quer uma imagem que distraia ou abafe o conteúdo importante do menu. Se você não consegue encontrar a imagem perfeita que traga a personalidade que deseja, escolha uma imagem que simplesmente fique bem como plano de fundo e que seja consistente com o seu design. Ou você pode simplesmente usar a opção de cor de fundo padrão.

Bem, isso é tudo que tenho.

Ansioso por ouvir de você nos comentários.