Como projetar layouts de página de tela inteira personalizados na Divi

Os layouts de página em tela inteira podem realmente ser úteis no mundo do web design. Um dos principais benefícios de um layout de página em tela inteira é a visibilidade. Com páginas em tela inteira, todo o conteúdo da página permanece na janela do navegador. Em um mundo onde os usuários são rápidos para rolar, ter todo o seu conteúdo contido na janela de visualização do navegador desde o início pode ser revigorante para o visualizador e também pode ajudar nas conversões.

Se você está familiarizado com o Divi, já deve conhecer o módulo de cabeçalho de largura total, que possui a funcionalidade de tela inteira incorporada. Esta é uma solução maravilhosa para a criação de páginas de tela inteira com o mínimo de conteúdo. Mas se você quiser tirar proveito da construção de um layout de página em tela inteira usando uma seção regular com várias linhas e módulos, esta é a postagem para você. Vou lhe mostrar alguns truques simples para garantir que o conteúdo da página (até mesmo o cabeçalho e a barra de rodapé) caiba na janela do navegador e seja dimensionado perfeitamente em diferentes tamanhos de navegador.

Vamos começar.

Espiada

Aqui está uma prévia do layout final da página em tela inteira que criaremos neste tutorial.

Observe como a altura da página se ajusta à altura da janela do navegador para que tudo fique no lugar.

O que você precisa

Para este tutorial, tudo o que você realmente precisa é Divi. Também estarei usando o pacote de layout de academia de ginástica, que pode ser acessado no Divi Builder.

Inscreva-se no nosso canal no Youtube

Como fazer uma página de tela inteira personalizada no Divi

Antes de pular para o design principal deste tutorial, pensei em mostrar a ideia básica por trás da criação de uma página de tela inteira no Divi. Afinal, você pode se surpreender com o quão simples pode ser.

A ideia básica explicada

Em uma nova página, escolha o modelo de página em branco. Isso interromperá a exibição do cabeçalho principal e da barra de rodapé inferior na página (mostrarei como incluí-los posteriormente).

Agora implante o Divi Builder no front-end para construir sua página do zero. Em seguida, adicione uma seção regular com uma linha de uma coluna.

Em seguida, adicione um módulo de cronômetro de contagem regressiva (ou qualquer módulo) à linha de uma coluna.

Para tornar as coisas mais fáceis para os olhos, retire a cor de fundo no cronômetro de contagem regressiva e adicione uma cor de fundo à seção para que possamos reconhecer melhor a altura da seção na página. Atualmente, a altura da seção é relativa à altura do conteúdo que ela contém. Neste caso, o único conteúdo que temos é uma única linha com um módulo sing.

Agora abra as configurações da seção e vá para a guia avançada e adicione o seguinte CSS personalizado ao elemento principal:

min-height: 100vh;
display: flex;
flex-direction: column;

Definir a altura mínima de sua seção para 100vh (100% da altura da janela de visualização) garantirá que sua seção se estenda por toda a janela do navegador (ou janela de visualização). A propriedade “display: flex” é uma maneira rápida e fácil de centralizar verticalmente o conteúdo de sua seção.

Confira este guia útil para obter mais informações sobre a unidade de comprimento vh.

Visualize sua página ao vivo em um navegador anônimo para ver o resultado, porque se você estiver conectado ao WordPress, a barra de administração superior irá desequilibrar um pouco a altura do navegador.

Bem, aí está. Essa é a ideia básica de como criar um layout de página de tela inteira personalizado no Divi.

Incorporando o cabeçalho e o rodapé em sua página de tela inteira.

Se quiser que a barra de cabeçalho e rodapé inferior sejam incluídos na página de tela inteira, você precisará fazer um pequeno ajuste. Primeiro, altere seu modelo de página de volta para o modelo padrão no backend de seu editor de página.

Incluir o cabeçalho e o rodapé inferior adicionará altura adicional à janela de visualização do seu navegador, de forma que a seção não se encaixará mais perfeitamente como antes. Isso ocorre porque sua página agora é composta por uma altura de seção que é 100% da altura da janela de visualização MAIS a altura do cabeçalho e da barra de rodapé inferior. Isso é demais. Para corrigir isso, precisamos ajustar o CSS personalizado em nossa seção para o seguinte:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

A única diferença é o valor da altura mínima. Agora há um cálculo que leva em consideração a altura adicional (em pixels) do cabeçalho e da barra de rodapé inferior coletivamente.

O 132px é baseado no total da altura padrão do cabeçalho (80px) e a altura padrão da barra de rodapé inferior (53px).

Agora que temos uma compreensão básica de como criar uma página de tela inteira personalizada no Divi, vamos mergulhar em um design mais complexo.

Construindo um Design de Página de Tela Inteira Completo

Para iniciar as coisas para este design, crie uma nova página, dê um título à sua página e implante o Divi Builder. Selecione a opção de Escolher um layout pré-fabricado e, no pop-up Carregar da biblioteca, selecione a página Layout de academia de ginástica. Em seguida, clique para usar a página de preços.

Depois que o layout for carregado no construtor, clique no botão para construir no front end (The Visual Builder) e você está pronto para começar.

Criação de uma nova seção

O layout predefinido existe para ajudar a iniciar o design. Estaremos usando esses elementos de design de layout ao longo do caminho e excluindo o resto do layout quando terminarmos. Para criar a seção principal para nosso layout de tela inteira, vá em frente e crie uma nova seção regular e arraste-a para o topo da página. Em seguida, adicione uma estrutura de coluna de um quarto, um quarto e meia à linha. Esta será a base de nossa página em tela cheia.

Adicionando Módulos às suas Colunas

Usando Multiselect (segure ctrl / cmd e clique), selecione todos os módulos nas duas primeiras linhas na primeira seção do layout e arraste-os para a primeira coluna da nova seção no topo da página.

Em seguida, use multiselect para copiar todos os módulos na terceira linha da mesma primeira seção do layout e colá-los na segunda coluna da nova seção no topo da página.

O texto ficará oculto devido ao fundo branco, mas alteraremos a cor do fundo posteriormente.

Na terceira coluna, adicione um módulo deslizante. Este controle deslizante irá eventualmente abranger toda a altura da tela, mas por enquanto vamos apenas configurar o conteúdo. Nas configurações do controle deslizante, exclua um dos dois slides padrão que estão lá por padrão e clique para abrir as configurações do único slide.

Nas configurações do slide, adicione uma imagem de plano de fundo, certificando-se de que seja grande o suficiente para abranger a altura total do navegador.

Isso cuida de todos os nossos módulos de que precisamos agora. Iremos revisitar as configurações de design mais tarde, mas por enquanto, vamos personalizar nossa linha.

Personalização das configurações de linha

Abra as configurações de linha e comece adicionando a cor de fundo à coluna 2:

Cor de fundo da coluna 2: # 2a2e40

Vá para a guia de design e atualize o seguinte:

Tornar esta linha com largura total: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM
Preenchimento personalizado: 0 px superior, 0 px inferior

Personalizando as Configurações da Seção

A única coisa necessária neste ponto para nossas configurações de seção é remover qualquer preenchimento padrão, mas achei que seria bom adicionar um divisor de seção que enquadrasse o topo da primeira coluna. Abra as configurações da seção e atualize o seguinte:

Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: # 2a2e40
Altura do divisor superior: 8vw
Repetição horizontal do divisor superior: 0,8x
Top Divider Flip: vertical e horizontal

Preenchimento personalizado: 0 px superior, 0 px inferior

Como o divisor está configurado para mostrar o conteúdo da seção abaixo, ele se esconderá atrás do controle deslizante na coluna 3 e não será mostrado na coluna 2 porque corresponde à cor de fundo das colunas. Isso cria um bom elemento de design de enquadramento para a coluna 1.

Exclua o resto do layout predefinido

Neste ponto, nossa seção superior tem tudo pronto para nosso layout de página em tela cheia, para que possamos excluir todas as seções restantes que vieram com o layout predefinido. Esta é a aparência de sua página até agora.

Agora estamos prontos para começar a personalizar nossa página para que fique em tela cheia.

Adicionar CSS personalizado para tornar a página em tela inteira

No exemplo básico no início deste artigo, adicionei o css personalizado diretamente à seção. No entanto, para garantir que nossa funcionalidade de tela inteira se aplique apenas ao desktop (e recorra ao estilo padrão no celular), irei adicioná-la ao CSS nas configurações da página. Isso me permitirá adicionar CSS externo que se aplique apenas a esta página, mas também me dá a opção de adicionar uma consulta de mídia que limita o estilo apenas ao desktop.

No menu de configurações na parte inferior do construtor de front end, abra as configurações da página. Na guia avançada, insira o seguinte CSS personalizado:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Para aqueles que não estão familiarizados com CSS, observe que o código é encapsulado por uma consulta de mídia que aplica o estilo quando o navegador tem no mínimo 980 px de largura. Com os colchetes, o primeiro fragmento inclui um ID CSS denominado “fullsection” seguido por um ID CSS denominado “fullslide”. É importante lembrar desses dois CSS IDs porque precisaremos adicioná-los à nossa seção e ao nosso controle deslizante. Assim que fizermos isso, o css “height: calce (100vh - 133px)” será aplicado tornando os dois em tela inteira (abrangendo a altura total da janela do navegador).

O segundo snippet aplicará a propriedade display flex à seção, tornando todo o conteúdo da seção centralizado verticalmente. Para mais informações sobre isso, confira nosso post sobre como alinhar o conteúdo verticalmente no Divi.

O terceiro trecho é totalmente opcional. Isso simplesmente torna a largura total da barra de rodapé inferior para se ajustar um pouco melhor ao design e também para corresponder ao estilo de cabeçalho de largura total que iremos adicionar.

Agora que você tem o CSS externo instalado, podemos adicionar nossos IDs CSS à nossa seção e ao nosso controle deslizante. Vá para as configurações da seção e adicione o seguinte ID CSS:

ID CSS: seção completa

Agora abra as configurações do Módulo Slider para o controle deslizante na coluna 3 e adicione o seguinte ID CSS:

ID CSS: fullslide

Toques Finais

Neste ponto, a funcionalidade de página de tela inteira está instalada e deve estar funcionando. Você pode verificar isso em um navegador anônimo para ter certeza. Tudo o que resta são alguns toques finais.

Adicione espaçamento às nossas colunas

Abra as configurações de linha para adicionar algum preenchimento ao topo da coluna 1 e coluna 2 da seguinte maneira:

Coluna 1 Preenchimento personalizado: 12vh superior, 1vw à esquerda, 1vw à direita
Preenchimento personalizado da coluna 2: 12vh superior, 1vw à esquerda, 1vw à direita

Observe que usei a unidade de comprimento vh para meus principais valores de preenchimento. Isso permitirá que o preenchimento seja dimensionado com a altura da janela de visualização, criando mais preenchimento à medida que a janela do navegador fica mais alta e criando menos preenchimento à medida que o navegador fica mais curto. Usei a unidade de comprimento vw (largura da janela de visualização) para meus valores de preenchimento esquerdo e direito para que o preenchimento seja dimensionado de acordo com a largura do navegador.

Adicione unidades de comprimento vh ao texto grande para maximizar o espaço de visualização

Como você pode ver, existem alguns módulos com texto muito grande que realmente não se adaptam à janela do navegador. Para corrigir isso, podemos definir o tamanho do texto para uma unidade de comprimento vh. Isso permitirá que o texto seja reduzido em telas menores do navegador.

Abra as configurações do módulo de texto no topo da coluna 1 e atualize o tamanho do texto do cabeçalho h1 para 7vh (não vw).

Em seguida, abra as configurações do módulo de texto no topo da coluna 2 e atualize o tamanho do Texto do Título 2 para 6vh.

Atualizar Design do Slider

Para finalizar o design, você pode copiar o design do botão do botão na coluna 2 e colá-lo nos estilos de botão do controle deslizante. Para fazer isso, abra as configurações do botão para o botão na coluna 2 e clique com o botão direito na categoria de opção do botão e clique em “copiar estilos de botão”.

Depois disso, abra as configurações do controle deslizante e cole os estilos de botão na categoria de opções de botão do controle deslizante.

Você também pode adicionar uma sobreposição de plano de fundo aos slides individuais.

Ajustes de barra de cabeçalho e rodapé inferior

Você deve se lembrar que já adicionamos um pequeno snippet de CSS personalizado que expandiu nosso rodapé para a largura total. Isso foi em antecipação à largura total de nossa barra de menu principal também. Para deixar sua barra de menu principal em largura total, vá para o painel do WordPress e navegue até Divi> Personalizador de tema> Cabeçalho e navegação> Barra de menu principal. Em seguida, marque a opção Make Full Width.

Como estamos exibindo nossa barra de rodapé inferior em nossa página de tela inteira, podemos atualizar a cor de fundo da barra inferior para corresponder ao design. Permaneça no Customizador de Tema e navegue até Rodapé> Barra Inferior. Em seguida, defina a cor de fundo para # 2a2e40.

Em seguida, publique suas alterações.

O Resultado Final

Aqui está o design final. Observe como tudo se encaixa perfeitamente na janela do navegador.

E verifique como fica ao ajustar o navegador para diferentes tamanhos.

E não se esqueça, como aplicamos nosso CSS personalizado apenas a larguras de navegador maiores que 980 px, o design voltará ao normal em dispositivos móveis.

Aqui está no tablet e smartphone.

Pensamentos finais

Criar um layout de página de tela inteira personalizado no Divi não é tão complicado assim, uma vez que você entende como ajustar corretamente a altura da sua seção para a altura do seu navegador com alguns trechos de CSS. Mas uma vez que você tenha feito isso, você pode criar incontáveis ​​designs de página em tela inteira dentro do Divi Builder. Apenas tome cuidado para reduzir o conteúdo ao mínimo se você planeja manter tudo visível na janela do navegador.

Esse tipo de design funciona bem para sites pessoais, ofertas promocionais e todos os tipos de páginas de destino. Também é uma ótima solução para páginas com pouco conteúdo e você deseja evitar que a barra de rodapé inferior seja exibida na metade da página.

E não se esqueça da opção de usar o módulo Fullwidth Header da Divi. Embora você não tenha a mesma flexibilidade do método usado nesta postagem, ele é perfeito para páginas com conteúdo mínimo.

Aqui estão mais alguns posts que você pode gostar sobre o assunto de páginas em tela cheia.

• Como criar seções de tela inteira com links de rolagem superior e inferior com Divi
• Projete um layout Divi de tela inteira exclusivo com um botão de rolagem animado
• e mais

Estou ansioso para ouvir de você nos comentários abaixo.

Saúde!