Aula 39: Contêiner de tela inteira

Configurar um contêiner de tela inteira no plugin Spectra para WordPress é uma excelente maneira de criar layouts imersivos e atraentes, onde o conteúdo ocupa toda a largura da tela. Isso pode ser útil para destacar seções específicas do seu site, como banners, imagens de fundo grandes ou até mesmo seções de conteúdo importantes.

Aqui está um guia passo a passo sobre como configurar um contêiner de tela inteira no Spectra:

Passo 1: Adicionar o Bloco Contêiner

O primeiro passo é adicionar um bloco de contêiner na página ou post onde você deseja aplicar o layout de tela inteira.

1. Abra o Editor de Blocos (Gutenberg): Acesse a página ou post no qual deseja adicionar o contêiner de tela inteira.

2. Adicionar o Bloco de Contêiner:

   • No editor Gutenberg, clique no ícone de + para adicionar um novo bloco.
   • Pesquise por “Contêiner” ou “Container” na barra de pesquisa.
   • Selecione o bloco de contêiner do Spectra.

Passo 2: Configurar o Contêiner para Tela Inteira

Depois de adicionar o bloco de contêiner, é hora de ajustar suas configurações para que ele ocupe toda a largura da tela.

1. Selecione o Contêiner: Clique sobre o bloco de contêiner para abrir as opções de configuração na barra lateral à direita.

2. Configurações de Largura:

   • No painel de configurações, você verá uma opção chamada Largura (ou Width).
   • Selecione a opção 100% ou Largura Total para que o contêiner ocupe toda a largura da tela.

3. Ajuste de Layout:

   • No Painel de Estilo, procure por configurações que permitem ajustar o preenchimento (padding) e a margem (margin).
   • Para garantir que o contêiner ocupe toda a largura da tela, defina as margens para 0 (margem interna e externa).
   • Ajuste o padding conforme necessário, para garantir que o conteúdo do contêiner tenha o espaçamento adequado nas laterais, superior e inferior.

Passo 3: Ajustar o Fundo do Contêiner (Opcional)

Para melhorar o impacto visual, você pode querer adicionar um fundo ao contêiner de tela inteira. Isso pode ser uma imagem, uma cor sólida ou até mesmo um gradiente. Isso ajudará a destacar a seção na tela.

1. Configuração do Plano de Fundo:

   • No painel de Estilo, localize a seção Plano de Fundo (ou Background).
   • Escolha entre cor sólida, imagem de fundo, gradiente ou padrão.

   Se você optar por uma imagem de fundo ou gradiente, o contêiner ocupará toda a tela, criando um efeito visual impactante.

   • Para imagens de fundo, você pode escolher o modo Cobrir (Cover), que fará a imagem preencher toda a área do contêiner.
   • Se você escolher um gradiente, pode definir uma transição de cores para o fundo da seção.

Passo 4: Ajustar a Altura do Contêiner

Além de ajustar a largura, você também pode definir a altura do contêiner para garantir que ele ocupe toda a altura da tela, especialmente se estiver criando seções de tela cheia com um fundo visual.

1. Altura de Tela Inteira:

   • No painel de configurações do contêiner, procure pela opção Altura (ou Height).
   • Defina a altura como 100vh (100% da altura da janela do navegador). Isso faz com que o contêiner ocupe toda a altura visível da tela, proporcionando uma seção de tela cheia.

2. Ajustes de Preenchimento:

   • Certifique-se de que o preenchimento (padding) do contêiner está configurado de forma que o conteúdo dentro dele não fique muito “grudado” nas bordas.
   • Ajuste o padding superior e inferior conforme necessário.

Passo 5: Verificar e Ajustar Responsividade

Quando você configura um contêiner de tela inteira, é importante garantir que o design seja responsivo, ou seja, que ele se ajuste bem a dispositivos móveis e telas menores.

1. Teste em Dispositivos Móveis:
   • No painel do Personalizador de Blocos, você pode visualizar o contêiner em diferentes tamanhos de tela. Verifique como o contêiner de tela inteira se comporta em dispositivos móveis e tablets.
   • Se necessário, faça ajustes nas margens, padding ou até na altura, para garantir que a experiência do usuário seja boa em qualquer dispositivo.

Passo 6: Visualizar e Publicar

Depois de configurar o contêiner para ocupar a tela inteira, visualize as alterações para garantir que tudo esteja conforme o esperado.

1. Visualizar: Clique em Visualizar para ver como a página ficará no site.
2. Publicar: Se tudo estiver certo, clique em Publicar ou Atualizar para aplicar as mudanças no seu site.

Conclusão

Configurar um contêiner de tela inteira no Spectra é uma maneira fácil e eficaz de criar layouts impressionantes e imersivos para o seu site. Ao ajustar a largura, altura e fundo do contêiner, você pode criar seções de tela cheia que capturam a atenção dos visitantes. Além disso, o Spectra oferece flexibilidade para personalizar ainda mais esses contêineres, garantindo que seu design seja responsivo e atraente em qualquer dispositivo.