Aula 37: Plano de fundo com imagem

Configurar o plano de fundo no contêiner do Spectra no WordPress é uma maneira eficaz de personalizar o visual do seu site e melhorar a experiência do usuário. O contêiner no Spectra funciona como uma caixa que envolve o conteúdo, e o plano de fundo desse contêiner pode ser alterado de várias maneiras, como com cores sólidas, imagens, gradientes ou até mesmo padrões.

Aqui está um guia passo a passo sobre como configurar o plano de fundo no contêiner utilizando o Spectra:

Passo 1: Adicionar ou Editar o Bloco Contêiner

Primeiro, você precisa garantir que está utilizando o bloco Contêiner no seu site. O bloco de contêiner é uma ferramenta no Spectra que ajuda a organizar e estruturar o layout da sua página.

1. Abra o Editor de Blocos (Gutenberg): Acesse a página ou post onde deseja adicionar ou modificar o plano de fundo do contêiner.

2. Adicionar um Novo Bloco de Contêiner:

   • Clique no ícone + para adicionar um novo bloco.
   • Na pesquisa de blocos, digite “Contêiner” ou “Container”.
   • Selecione o bloco de contêiner do Spectra.

   Ou, se você já tem um contêiner existente na página e deseja apenas alterar o plano de fundo, basta clicar sobre o contêiner para editá-lo.

Passo 2: Configurar o Plano de Fundo do Contêiner

Após adicionar ou selecionar o contêiner, você pode começar a personalizar o plano de fundo. Siga estas etapas:

1. Selecione o Contêiner: Clique no bloco de contêiner no editor para que suas configurações apareçam na barra lateral de edição à direita.

2. Acesse as Configurações de Estilo:

   • No painel de configurações à direita, clique em Estilo (ou Style, dependendo do idioma do seu WordPress).

3. Plano de Fundo:

   • Dentro da seção de Estilo, você verá uma opção chamada Plano de Fundo ou Background.
   • Clique em Adicionar plano de fundo ou Add Background.

Passo 3: Escolher o Tipo de Plano de Fundo

Agora que você está nas configurações de plano de fundo, pode escolher entre vários tipos de fundo. Aqui estão as opções mais comuns:

1. Cor Sólida (Solid Color)

• Se você deseja definir uma cor sólida para o plano de fundo do contêiner, basta selecionar a opção Cor e escolher a cor desejada.
• Clique no seletor de cores e escolha uma cor de sua preferência. Isso vai aplicar um fundo simples e sólido ao contêiner.

2. Imagem de Fundo

• Para adicionar uma imagem de fundo, clique na opção Imagem e faça o upload de uma imagem do seu computador ou escolha uma imagem da sua biblioteca de mídia.
• Depois de adicionar a imagem, você pode configurar o posicionamento da imagem, como alinhá-la à esquerda, ao centro ou à direita.
• Também é possível definir o repetir ou não repetir a imagem, além de configurar o tamanho da imagem (cobrir todo o fundo ou manter o tamanho original).

3. Gradiente de Cor (Gradient Background)

• O gradiente é uma transição suave entre duas ou mais cores. Para configurar um plano de fundo com gradiente:
  • Selecione a opção Gradiente.
  • Escolha as cores iniciais e finais do gradiente.
  • Ajuste a direção do gradiente, ou seja, se ele será linear (de cima para baixo, de esquerda para direita, etc.) ou radial (partindo de um ponto central).

4. Padrão de Fundo (Pattern)

• O Spectra também oferece a opção de adicionar padrões como plano de fundo. Os padrões são imagens repetidas que criam um fundo texturizado. Essa opção pode ser útil para dar um toque mais detalhado e interessante ao design do seu site.

Passo 4: Ajustes Avançados do Plano de Fundo

Além de definir a cor ou a imagem de fundo, o Spectra permite personalizar ainda mais a aparência do plano de fundo do contêiner com algumas configurações avançadas.

• Posição da Imagem: Ajuste a posição da imagem de fundo (topo, centro, inferior, à esquerda, direita).
• Tamanho da Imagem: Você pode definir o tamanho da imagem de fundo como “Cobrir” (cover), que faz a imagem preencher todo o contêiner, ou “Contido” (contain), que faz a imagem se ajustar para caber no espaço.
• Repetir: Se você escolher uma imagem de fundo que seja pequena, pode optar por “Repetir” para que a imagem se repita ao longo do contêiner.
• Opacidade: Ajuste a opacidade do plano de fundo para tornar o fundo mais ou menos transparente. Isso pode ser útil se você deseja um fundo sutil, sem sobrecarregar o conteúdo visível.

Passo 5: Configurar o Padding e a Margem (Opcional)

• Se necessário, você pode adicionar padding (preenchimento) ou margem ao contêiner para garantir que o conteúdo não fique muito colado às bordas do bloco. Isso pode ser ajustado também nas configurações de estilo.

Passo 6: Visualizar e Publicar

Após personalizar o plano de fundo do seu contêiner, você pode visualizar o resultado para garantir que tudo esteja conforme o esperado.

1. Clique em Visualizar para ver as alterações no seu site.
2. Se estiver satisfeito com o resultado, clique em Publicar ou Atualizar para salvar as mudanças.

Dicas para Usar Planos de Fundo no Contêiner

• Harmonia de Cores: Certifique-se de que a cor ou imagem do plano de fundo não prejudique a legibilidade do conteúdo. Se necessário, adicione um filtro de opacidade ou sobreposição de cor (overlay) para garantir contraste suficiente entre o texto e o fundo.
• Imagens Otimizadas: Se for usar uma imagem de fundo, certifique-se de que ela está otimizada para a web, para garantir que o site carregue rapidamente.
• Consistência no Design: Use fundos consistentes com o estilo e a identidade visual do seu site. Evite usar planos de fundo muito chamativos ou carregados, que possam distrair os visitantes do conteúdo principal.

Conclusão

A configuração do plano de fundo no contêiner do Spectra é uma maneira simples e eficaz de personalizar a aparência do seu site. Seja utilizando uma cor sólida, imagem de fundo, gradiente ou padrão, você pode criar um design mais interessante e melhorar a estética e a experiência do usuário. Com as opções avançadas de personalização, como opacidade, posicionamento e repetição, o Spectra oferece grande flexibilidade para atender às suas necessidades de design.