Rodapés em tela cheia são elementos de design interessantes. O aspecto de tela cheia do design dá toda a atenção ao rodapé. A parte complicada, porém, é fazer com que o rodapé ocupe tela cheia em diferentes tamanhos de tela. Fica ainda mais complicado quando consideramos que muitos usuários visualizarão seu site com diferentes níveis de zoom. Felizmente, é fácil criar um rodapé em tela cheia no Divi usando as configurações do Divi. Neste artigo, veremos como fazer com que um rodapé pequeno se adapte para se tornar um rodapé em tela cheia no Divi, independentemente do tamanho da tela ou do nível de zoom
Pré-visualização
Veja como ficará o rodapé Divi em tela cheia quando terminarmos. Incluí um cabeçalho nos meus exemplos.
Aqui está o nosso rodapé Divi em tela cheia, no tamanho de tela padrão para um computador desktop.
Rodapé Divi em tela cheia no celular
Esta imagem mostra como o rodapé será exibido em um celular.
Primeiro, você precisará de um modelo de rodapé que seja menor que a tela. Vamos expandi-lo para preencher o espaço disponível, independentemente do tamanho da tela ou do nível de zoom do usuário. Para este tutorial, queremos um modelo com uma única seção. Você pode usar um rodapé com várias seções, mas precisará mover todas as linhas para uma única seção. Vamos tornar uma seção em tela cheia.
Você pode criar o modelo do zero ou modificar um modelo existente. Vou usar o rodapé do modelo de cabeçalho e rodapé GRATUITO para o pacote de layout Marina do Divi . Este rodapé já é maior que a tela, então vou modificá-lo para o nosso exemplo.
Você pode encontrar mais modelos de rodapé no blog da Elegant Themes. Basta pesquisar por “rodapé grátis”. Depois de baixar o modelo de rodapé, descompacte o arquivo. Você deverá carregar o arquivo JSON descompactado no Construtor de Temas do Divi.
Faça o upload do seu modelo de rodapé Divi em tela cheia.
Em seguida, carregue seu arquivo JSON no Construtor de Temas Divi. Acesse Divi > Construtor de Temas no painel do WordPress. Selecione Portabilidade e clique na aba Importar na janela que se abrirá. Clique em Escolher Arquivo , localize o arquivo JSON no seu computador e selecione-o.
Por fim, clique em Importar Modelos do Construtor de Temas Divi . Aguarde a conclusão do upload e salve as alterações. Você pode editar o rodapé no Construtor de Temas ou na interface pública do site.
Como este modelo de rodapé é maior que a tela, vou excluir a primeira linha para criar uma versão modificada. O objetivo é ter um rodapé menor que a tela. Passe o cursor sobre a linha que deseja excluir e clique no ícone da lixeira.
Agora temos um modelo de rodapé curto que não preenche a tela. Este exemplo mostra nosso rodapé no Construtor de Temas Divi. Você pode ver que a parte inferior da tela está em branco. Agora, vamos transformar isso em um rodapé Divi em tela cheia.
Configurações de rodapé Divi em tela cheia
Agora, mesmo com 75% de ocupação, temos um rodapé Divi em tela cheia que centraliza os elementos do rodapé.
Esses são os únicos ajustes necessários: 100vh para a altura mínima e, em seguida, adicionar unidades de vh ao preenchimento superior da seção. Dependendo da altura do conteúdo do rodapé, talvez seja necessário ajustar o preenchimento para centralizar o conteúdo do rodapé Divi em tela cheia. Você também deve considerar se está usando um menu fixo. Se necessário, você também pode adicionar preenchimento entre os módulos.
Sobre as configurações
Por que 100vh? A medida vh é uma unidade de viewport. V significa viewport e H significa altura. 100vh indica à viewport que ela deve exibir a altura total. A viewport inclui a tela inteira, inclusive o espaço abaixo do menu de cabeçalho, caso seja utilizado um menu fixo. Para acomodar o espaço do menu, adicione um espaçamento na parte superior até que o conteúdo esteja centralizado.
A área visível também inclui a barra de endereços em dispositivos móveis, em navegadores como o Chrome e o Safari. Elas desaparecem ao rolar a tela, mas lembre-se de que podem permanecer visíveis.
Resultados
Veja como o rodapé Divi em tela cheia aparece em um computador e em um smartphone. Mantive o cabeçalho fixo nos exemplos
Aqui está o nosso rodapé Divi no tamanho de tela padrão para desktop. O fundo ocupa a tela inteira em qualquer nível de zoom e tamanho de tela, e o conteúdo permanece centralizado
Rodapé Divi em tela cheia no celular
Esta imagem mostra o rodapé em um celular. Contanto que o rodapé seja menor que a tela do celular, ele se adaptará à tela para criar um rodapé Divi em tela cheia. Em outras palavras, ele se expandirá para preencher a tela, mas não diminuirá de tamanho.
Considerações finais
Essa foi a nossa explicação sobre como criar um rodapé Divi em tela cheia. Qualquer rodapé que seja menor que a tela pode ser exibido em tela cheia, independentemente do tamanho da tela ou do nível de zoom. A altura mínima e o preenchimento (padding) na seção devem ser os únicos ajustes necessários. Dependendo do conteúdo do seu rodapé e do tamanho do seu cabeçalho, talvez seja necessário ajustar o preenchimento para centralizar o conteúdo corretamente.
Quer ver mais dicas como essa? clique aqui e conheça o nosso blog
Queremos saber a sua opinião. Você já usou esse método para criar um rodapé Divi em tela cheia para o seu site? Conte-nos sobre a sua experiência nos comentários abaixo.
0 Comentários