O Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.

Assista ao vídeo guia:

Steps to Use ElementsKit Sticky Content:

• Vá para ElementsKit → Módulos → Enable Conteúdo fixo → Save.
• Open page in Elementor.
• Select section/column/widget → Advanced → ElementsKit Sticky.
• Choose Sticky Type (Top / Bottom / Scroll Up / Column).
• Set Offset, Sticky Until (CSS ID), Background if needed.
• Update and test on devices.

Follow the module’s detail functions:

Ativar módulo de conteúdo fixo #

To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to Kit de Elementos from your dashboard and follow the steps:

1. Kit de Elementos sob Kit de Elementos plugar
2. Go to MODULES
3. Toggle the Sticky Content module SOBRE
4. Clique em Salvar alterações

Steps 2: Sticky on Top #

Este recurso o ajudará a colocar qualquer seção no topo da página.

Assista ao nosso guia em vídeo:

Ou siga as instruções passo a passo:

• Navegar para ElementsKit→ Cabeçalho Rodapé→ clique Edite com Elementor.

• Crie uma nova página-> Clique no Ícone do ElementsKit para inserir qualquer página pronta de nossos modelos pré-fabricados.

1. Clique no Ícone da seção interna.
2. Vá para Avançado
3. Expandir ElementsKit Sticky.
4. Selecione a opção Fixa➔ Principal no menu suspenso

• Agora vá para sua página-> Você pode ver que seu cabeçalho está fixo na parte superior.

Mudança de cor de fundo do adesivo na parte superior #

You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.

• Escolha uma cor de fundo adesiva: Blue.
• Clique em Atualizar

Pegajoso até chegar ao topo #

Se quiser fazer com que suas seções permaneçam em várias seções e parem de permanecer após uma seção específica, você pode definir o ID da seção aqui. Vamos mantê-lo fixo até a seção Sobre nós.

• Clique em Editar com Elementor.

1. Clique no Our School Goals 2019 inner section icon
2. Vá para Avançado
3. Find Layout

Colocou o CSS ID and Copy it.

• Vá para Cabeçalho➔Avançado➔Elementskit pegajoso➔Pegajoso até.
• Agora cole a seção sobre nós Código CSS no Pegajoso até campo.

• Agora você pode ver que o cabeçalho é Sticky Until the Our School Goals 2019 Section.

Recurso de adição de classe #

ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.

1. Vá para personalizador-> CSS adicional.
2. Use a classe: “ekit-efeitos pegajosos” e faça a cor de fundo Cinza.

• Vá para cabeçalho-> Remover o Cor de fundo.
• Adicione deslocamento. Por exemplo: 50px.

• Você pode ver que a cor de fundo é Transparente. Mas depois de rolar até 50px, uma cor de fundo é adicionada.

Deslocamento pegajoso na parte superior #

• Você pode decidir quanto espaço resta enquanto seu conteúdo ou imagem ficará colado na parte superior. Você pode fazer o mesmo para outras posições fixas. Forneça o deslocamento fixo: 100px. Você pode ver que o cabeçalho aparece após 100px.

• Existem três opções de escolha de dispositivo para você exibir o adesivo: Todos os dispositivos, somente desktop, desktop e tablet. Escolha uma opção para decidir exatamente em quais dispositivos você deseja mostrar o conteúdo como fixo.

Mostrar pegajoso ao rolar para cima #

Este recurso o ajudará a fixar qualquer seção da página ao rolar para cima.

Assista ao nosso guia em vídeo:

Ou siga as instruções passo a passo:

• Go back to ElementsKit pegajoso opções.

• Selecione a opção fixa➔ Mostrar na rolagem para cima no menu suspenso.

Clique em Atualizar-> Vá para sua página-> Atualizar-> Rolar para cima.

Você pode ver que o cabeçalho está fixo ao rolar para cima.

Fixo até rolar para cima #

Let’s make it sticky until the Care About Us Section.

• Click on the sticky Care About Us Ícone da seção interna.
• Now, going to the Layout settings from Advanced tab, colocou o ID CSS e copie-o.

• Clique no cabeçalho de navegação fixo Ícone da seção interna.
• Vá para Avançado
• Encontrar Elementskit pegajoso and paste that sticky header section’s Código CSS no Pegajoso até campo.

• Clique em Atualizar-> Ir para a página inicial-> Atualizar-> Rolar para cima.
• Agora você pode ver que o cabeçalho está fixo até a seção do cabeçalho fixo e quando a seção de vídeo chega, o cabeçalho não fica mais fixo.

Pegajoso na parte inferior #

Este recurso o ajudará a colar qualquer seção na parte inferior da página.

Assista ao nosso guia em vídeo:

Ou siga as instruções passo a passo:

• Clique no Ícone do ElementsKit para inserir qualquer rodapé de nossos modelos predefinidos.

Vá para Elementos ➔ Arraste os seguintes widgets e solte na área selecionada.

• Cabeçalho.
• Logotipo do cliente.
• Vídeo.
• Cabeçalho.

• Clique no Ícone da seção interna do rodapé.
• Vá para Avançado-> Expandir ElementsKit Sticky.
• Selecione a opção fixa➔ Fundo no menu suspenso.

• Clique em Atualizar-> Vá para sua página-> Atualizar-> Rolar para cima.
• Você pode ver que o rodapé está fixo ao rolar para cima.

Pegajoso até embaixo #

Vamos torná-lo pegajoso até a seção pegajosa inferior.

• Clique no Parte inferior pegajosa Ícone da seção interna.
• Agora, indo para as configurações avançadas, defina o ID CSS e copie-o.

• Clique no rodapé Ícone da seção interna.
• Vá para Avançado➔ Elementskit pegajoso➔ Pegajoso até.
• Agora cole a seção adesiva inferior Código CSS no Pegajoso até campo.

• Clique em Atualizar-> Ir para a página inicial-> Atualizar-> Rolar para cima.
• Agora você pode ver que o cabeçalho está fixo até a seção fixa inferior e quando a seção do logotipo do cliente chega no rodapé não fica mais fixo.

Fixo na coluna #

Este recurso o ajudará a colar qualquer seção na coluna.

Assista ao nosso guia em vídeo:

Ou siga as instruções passo a passo:

• Selecione sua estrutura na área selecionada. Aqui estou pegando 3 colunas.

Vá para Elementos ➔ Arraste os seguintes widgets e solte na área selecionada.

• Cabeçalho.
• Imagem.
• Caixa de ícones.

Vamos tornar o título e a seção de imagens fixos.

• Clique no Ícone da seção interna do título.
• Vá para Avançado-> Expandir ElementsKit Sticky.
• Selecione a opção fixa➔ Coluna no menu suspenso.

• Clique no Ícone da seção interna da imagem.
• Vá para Avançado-> Expandir ElementsKit Sticky.
• Selecione a opção fixa➔ Coluna no menu suspenso.

• Clique em Atualizar-> Vá para sua página-> Atualizar-> Role para baixo.
• Você pode ver que o título e a imagem estão fixos e o conteúdo do lado direito da caixa do ícone ainda está em movimento.