Crie um cabeçalho pegajoso encolhido com o Elementor

Você deseja criar um cabeçalho que fique menor à medida que a página é carregada? Mesmo que você não planeje usar esse efeito, vale a pena pensar se seria uma boa adição ao seu site.

Aqui, ensinaremos exatamente como utilizar o Elementor Pro para reduzir o cabeçalho do seu site WordPress. Com a ajuda de algum CSS personalizado, mostraremos exatamente o que você precisa fazer para realizar o trabalho.

O que é um cabeçalho encolhendo?

Um cabeçalho reduzido é exatamente o mesmo cabeçalho que você vê quando um site aparece, mas fica um pouco menor quando você começa a rolar. Para começar, há um cabeçalho superior padrão. O cabeçalho "encolherá" à medida que o usuário rolar a página para baixo, e você pode ajustar o quanto ele encolhe e o quão translúcido fica.

Embora fique menor, o cabeçalho ainda está lá quando você rola a página. Existem várias opções, como enterrar totalmente o cabeçalho e revelá-lo apenas quando o usuário rolar para cima.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Como criar um cabeçalho encolhendo

Quando você tiver seu cabeçalho pré-fabricado pronto, você estará pronto para ir. O resto do post irá guiá-lo para reduzi-lo. Você precisará de muito CSS personalizado. No entanto, forneceremos o código de que você precisa e mostraremos como alterá-lo para corresponder ao seu site.

Editar com Elementor

Para começar, edite o modelo de cabeçalho com o Elementor Theme Builder.

Para editar seu modelo de cabeçalho usando o Elementor, acesse o Templates Theme Builder no painel do WordPress e selecione Editar com o Elementor.

Limpeza básica de CSS

Você precisará limpar seu cabeçalho um pouco antes de aplicar o código CSS que você verá nas próximas seções.

O primeiro passo é acessar as configurações da seção de cabeçalho. Defina o menu suspenso Tag HTML para o cabeçalho na guia Layout.

Não deve haver altura mínima e o alinhamento vertical deve ser definido para o meio na guia de layout.

Vá para a guia Avançado e altere a classe CSS da seção de cabeçalho para stick-header.

Por fim, abra o widget de imagem que contém seu logotipo e selecione a opção Avançado no menu suspenso. Em seguida, na área CSS Classes da imagem do seu logotipo, insira logo:

Efeitos de movimento para fazer seu cabeçalho ficar

A funcionalidade de efeitos de movimento do Elementor pode ser usada para manter seu cabeçalho no topo da página enquanto os espectadores rolam para baixo.

Você pode acessar as configurações de cabeçalho da seção clicando nelas. Depois, clique na página Avançado e confira as opções de Efeitos de movimento

• Suponha que Top esteja selecionado em Sticky no menu suspenso.

• Elimine quaisquer outros dispositivos que não estejam listados na caixa "Sticky On".

• O Deslocamento de Efeitos deve ser definido para 90 (a altura do seu cabeçalho).

CSS customizado

A última etapa antes de terminarmos é adicionar o código CSS personalizado. Aqui está o código básico que você usará. Veremos como personalizá-lo nas próximas seções:

O seguinte código CSS irá:

• Para acessar o menu de hambúrguer, vá para o canto superior esquerdo da interface Elementor e clique nele.

• O Estilo do Tema pode ser selecionado no menu suspenso Estilo Global.

• Selecione CSS personalizado (será azul em vez do Elementor "regular" vermelho quando a interface do estilo do tema for aberta)

/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

Personalizar CSS

Esse CSS pode ser personalizado para atender às suas necessidades específicas, então vamos ver como fazer isso agora. O uso de um editor de código como o Visual Studio Code ou Atom é recomendado em vez de editar CSS diretamente na interface do Elementor. Os usuários de Windows, Mac e Linux podem se beneficiar desses editores de código aberto.

CSS Custom Properties será nossa ferramenta de escolha (ou CSS Variables). Esses controles permitem ajustar o efeito de cabeçalho decrescente. Se você fizer uma única alteração em uma propriedade personalizada, todo o código CSS será atualizado para refletir essa alteração.

Há um total de cinco fatores que você pode ajustar, no total. Você nem precisa alterá-los se não quiser –, apenas mantenha-os como estão se gostar da maneira como eles funcionam!

Para ajudá-lo, incluímos as cinco variáveis ​​CSS e seus valores padrão abaixo:

• –header-height: 90px;
• –opacidade: 0,90;
• –shrink-header-to: 0,80;
• –sticky-background-color: #0e41e5;
• Transição –: 300ms de fácil entrada e saída;

Se você observar nosso código de exemplo, notará que incluímos algumas propriedades personalizadas no lugar do traço duplo "–". Após os dois pontos e antes do ponto e vírgula, tudo o que resta a fazer é fazer uma pequena edição.

Alterar a altura do cabeçalho para 100px, por exemplo, ficaria assim antes e depois:

• Antes : –header-height: 90px;
• Depois : –header-height: 100px;

Vamos nos apresentar com essas variáveis.

Cor de fundo pegajosa (--cor de fundo pegajosa)

A cor de fundo do cabeçalho "encolhido", que é exibida quando os visitantes rolam para baixo, é controlada pela propriedade Sticky Background Color. Alterar a cor não precisa corresponder à cor do seu cabeçalho, se não for a sua preferência.

No modelo Agência Digital, por exemplo, o plano de fundo do cabeçalho tem um gradiente no início. A cor do cabeçalho fica azul sólido à medida que os visitantes rolam para baixo e o cabeçalho fica menor (você pode ver isso no vídeo de exemplo desde o início).

Altura do cabeçalho (--header-height)

No Elementor, o atributo Header Height determina a altura do seu cabeçalho - ele deve corresponder à altura da sua seção de cabeçalho. Definir isso para 90px foi um bom ponto de partida na instrução.

No entanto, se você decidir alterar a altura, certifique-se de fazê-lo na propriedade CSS, bem como nas configurações da seção de cabeçalho.

Para evitar problemas com o efeito de encolhimento, não recomendamos alturas de cabeçalho maiores que 100px.

Opacidade (--opacidade)

O grau em que seu cabeçalho decrescente é translúcido é controlado pela propriedade Opacity:

• 0 significa que o cabeçalho será invisível.

• 1 significa que não haverá cabeçalho visível (sem transparência)

A opacidade é definida como 0,9 em nosso código de exemplo, tornando-o quase totalmente opaco. Este número pode ser alterado para atender às suas necessidades. Reduza o valor para zero para torná-lo mais óbvio.

Encolher cabeçalho para (--shrink-header-to)

Quando um visitante começa a rolar para baixo, o atributo Encolher-me determina o quanto seu cabeçalho e logotipo serão reduzidos. Isso significa que seu cabeçalho e logotipo diminuirão para 80% do tamanho inicial, por exemplo.

Transição (--transição)

Se o atributo Transition estiver definido como "encolhido", o cabeçalho diminuirá do tamanho original para esse valor.

É melhor deixar algo como está, mas você tem a opção de alterá-lo, se necessário.

Portanto, o CSS atualizado para o cabeçalho reduzido será -

header.sticky-header {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */

	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
	width: auto;
}

Pensamentos finais

É muito fácil trabalhar com o Elementor , pois ele se tornou um dos construtores de páginas mais procurados por toneladas de desenvolvedores da Web em todo o mundo. Ter um design tão interativo trará mais visitantes ao seu site. Se você tiver alguma dúvida não hesite em perguntar. Temos um grande número de tutoriais Elementor em nosso site, verifique-os e deixe-nos saber o que devemos abordar a seguir.