Categorias: Configurações | CSS

Site com Imagem de Fundo

Escrito por Amanda de Lavra

26 de abril de 2023
Estou desenvolvendo um site em que o cliente quer que o site inteiro tenha uma imagem de fundo. Existem opções no Customizador de Tema que dão essa aparência. É só ir em Configurações Gerais > Contexto > Imagem de Fundo, acrescentar a imagem e configurar as opções. Depois, é preciso ir em Configurações Gerais > Configurações de Layout e ativar a caixa “Habilitar layout em caixa.” Além disso, é necessário um pouco de CSS para fazer alguns ajustes, como deixar o site full width no tablet e no celular, deixar o Divi Dashboard full width e, no caso desse site em específico, tirar a sombra do page container.
/*Deixar page container sem sombra*/
.et_boxed_layout #page-container {
	box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
}

/*Deixar full width em tablet e celular*/
@media (max-width: 900px) {
	.et_boxed_layout #page-container {
		max-width: 100%!important;
		width: 100%!important;
	}
}

/*Layout do painel de boas-vindas full width*/
.dividashboard-template-default {
	background-color: #ffffff !important;
	background-image: none !important;
}
.dividashboard-template-default #page-container {
	width: 100vw !important;
} 

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....