Criação de um layout de tela inteira com transições de imagem de fundo paralaxe em Divi

Criar uma página da web com seções de tela inteira é uma ótima maneira de melhorar a experiência do usuário com transições suaves e layouts de seção limpos que abrangem toda a largura e altura do navegador. Normalmente, isso funciona bem para mostrar produtos ou serviços uma seção por vez, permitindo que o usuário se concentre facilmente em cada um enquanto rola a página para baixo. Esse tipo de design também funciona muito bem com imagens de fundo que falam com o conteúdo e fornecem um belo destaque de design. E se quiser ser um pouco criativo, você pode adicionar alguma funcionalidade de paralaxe às suas imagens de fundo para criar algumas transições bastante exclusivas ao rolar de uma seção de tela inteira para outra.

Neste tutorial, vou mostrar como adicionar algumas transições de imagem de fundo de paralaxe a um layout de página de tela inteira no Divi. O processo é simples e com ele você pode criar alguns resultados poderosos.

Espiada

Dê uma olhada em alguns dos projetos que construiremos juntos.

Começando

Inscreva-se no nosso canal no Youtube

Para este tutorial, tudo que você precisa é Divi e uma coleção de imagens para usar para as diferentes imagens de produtos e imagens de fundo. Estou usando as imagens, as imagens do nosso pacote de layout da Juice Shop. Você pode baixar o arquivo zip com essas imagens na parte inferior da postagem do blog com este pacote de layout. Basta clicar no botão “Baixar os recursos de imagem de resolução completa”.

Preparando sua nova página

Assim que tiver as imagens prontas. Crie uma nova página e dê um título a ela. Em seguida, implante o Divi Builder e selecione “Build from Scratch”. Em seguida, clique no botão para construir no front end.

Agora você está pronto para começar!

A ideia básica

A ideia básica por trás desse conceito envolve o empilhamento de várias seções de largura total, cada uma com um módulo de cabeçalho de largura total. Cada módulo de cabeçalho recebe uma largura personalizada que pode ser alinhada à esquerda, centralizada ou direita enquanto expõe o fundo da seção. Em seguida, cada seção recebe uma imagem de fundo com um determinado método de paralaxe. Isso cria diferentes efeitos de transição de imagem de fundo conforme você rola a página para baixo.

Veja como fazer isso.

Criando a seção do cabeçalho Fullwidth

Primeiro, você precisará criar uma nova seção de largura total e, em seguida, adicionar um módulo de cabeçalho de largura total à seção.

Atualize as configurações do cabeçalho de largura total com algum conteúdo com o seguinte:

Título: “Suco de tomate”
Texto do link do botão nº 1: “Ver receita”
Conteúdo: “Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. ”
Imagem do logotipo: [veja a captura de tela] (a imagem tem 240px por 300px)

Agora continue a atualizar o design do seu cabeçalho da seguinte maneira:

Cor de fundo: rgba (255,255,255,0,92)

Tornar tela inteira: SIM

Mostrar botão de rolagem para baixo: SIM
Ícone: veja a captura de tela
Cor do ícone de rolagem para baixo: # 222222

Cor do Texto: Escuro

Título Título Nível: H2
Fonte do título: Raleway
Tamanho do texto do título: 50px

Fonte do corpo: Lato
Tamanho do corpo do texto: 16px
Espaçamento entre letras do corpo: 1px

Botão Um Tamanho do Texto: 16px
Botão fOne Cor do texto: #ffffff
Cor de fundo do botão um: # 222222
Raio da borda do botão um: 50px
Espaçamento de uma letra de botão: 2px
Estilo de fonte de um botão: TT

Largura: 45% (desktop), 60% (tablet), 100% (smartphone)

Salvar configurações.

Os principais elementos de design aqui são a opção “Make fullscreen” e a “Width: 45%”. Isso permitirá que a seção ocupe toda a largura e altura da janela do navegador o tempo todo. E a largura personalizada reduz o módulo de cabeçalho para expor o plano de fundo da seção que iremos adicionar a seguir.

Adicionando o fundo da seção

Agora que projetamos nosso módulo de cabeçalho, podemos adicionar nossa imagem de plano de fundo da seção. Vá para as configurações da seção de largura total e adicione uma imagem de fundo. Certifique-se de que seja grande o suficiente para abranger toda a largura e altura da janela do navegador. Em seguida, selecione o método CSS Parallax.

Duplicando as Seções

Como cada seção exibirá novo conteúdo, precisamos duplicar nossa seção de largura total três vezes para que você tenha um total de quatro seções em sua página, cada uma com um módulo de cabeçalho.

Criação de uma imagem de fundo estática usando a imagem de fundo da mesma seção com CSS Parallax

Agora que temos quatro seções idênticas, podemos atualizar o conteúdo do cabeçalho de largura total com novas imagens de logotipo e títulos para ter uma melhor noção do design. No entanto, se mantivermos a mesma imagem de fundo usando paralaxe CSS para todas as quatro seções, o resultado é uma imagem de fundo estática que permanece no lugar enquanto você rola para as diferentes seções de tela inteira. E como estamos usando um botão de rolagem para baixo em cada cabeçalho, os usuários têm a opção de clicar na seta para rolar de forma limpa para cada nova seção.

Confira o resultado.

Usando diferentes imagens de fundo com transições de paralaxe CSS

Usar uma imagem de fundo diferente (com paralaxe CSS) para cada seção mudará a aparência do design conforme você rola. Como já temos a paralaxe CSS habilitada para nossas imagens de plano de fundo de quatro seções, tudo o que precisamos fazer é alterar cada uma das imagens para algo diferente. Nesse caso, estou simplesmente adicionando uma versão grande do produto como imagem de plano de fundo para cada seção.

Assim que tiver uma imagem de fundo diferente (com CSS Parallax) para cada uma das quatro seções, verifique o resultado.

Usando diferentes imagens de fundo com transições de paralaxe verdadeiras

Se você deseja alterar o efeito de transição da imagem de fundo, pode alterar o método de paralaxe de CSS para True Parallax para todas as quatro imagens de fundo de seção.

Abra uma das configurações da seção e altere o método CSS para “True Parallax”.

Em seguida, você precisará fazer o mesmo para as três seções restantes. Ou você pode simplesmente clicar com o botão direito na opção Parallax Method e selecionar “Extend Parallax Method” para todos os módulos de cabeçalho de largura total em toda a página.

Uma vez feito isso, verifique o efeito de transição da imagem de fundo.

Explorando Diferentes Alinhamentos de Módulos

Alterar o alinhamento de seu módulo de cabeçalho de largura total é uma brisa. Como nosso módulo de cabeçalho de largura total tem uma largura personalizada de 45%, você pode ajustar facilmente o alinhamento do módulo para a esquerda, centro ou direita para obter um layout diferente. Gosto especialmente do alinhamento centralizado com um fundo estático.

Para centralizar o módulo, abra as configurações do cabeçalho de largura total e atualize o Alinhamento do Módulo para Centralizado .

Para alinhar o módulo à direita da página, basta atualizar o alinhamento do módulo para alinhado à direita.

Depois de definir um alinhamento, você pode simplesmente estender o estilo de “alinhamento do módulo” para o restante dos módulos de cabeçalho em toda a página.

Aqui está um exemplo de um alinhamento centralizado com um fundo estático (mesma imagem de fundo para cada um com paralaxe CSS).

Aqui está um exemplo de um alinhamento centralizado com diferentes imagens de fundo usando o método CSS Parallax.

Aqui está um exemplo do alinhamento centralizado com diferentes imagens de fundo usando o método True Parallax.

Aqui está um exemplo de um alinhamento correto com diferentes imagens de fundo usando uma combinação de css e paralaxe real.

Pensamentos finais

Essas transições de imagem de fundo realmente parecem ótimas quando usadas em combinação com seções de tela inteira e módulos de cabeçalho personalizados. A funcionalidade é limpa e o design é sutil e único. Na verdade, é uma maneira rápida e fácil de criar planos de fundo estáticos para seu conteúdo. Sinta-se à vontade para explorar designs mais avançados usando gradientes de fundo, fontes e imagens!

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

Saúde!