Como tornar um elemento fixo?

Por que tornar um elemento fixo?

Os elementos fixos podem melhorar a experiência do usuário por mantendo o conteúdo importante visível enquanto os usuários percorrem a página. 

Por exemplo, ao criar um publieditorial, você pode querer uma caixa de CTA ou uma mensagem-chave para permanecer visível enquanto o usuário rola, garantindo que esteja sempre acessível.

Observe o design da caixa de CTA fixa no lado direito da página, que permanece fixa enquanto o conteúdo principal rola à esquerda:

Essa abordagem garante que os leitores possam interagir com CTAs importantes sem interrupção, melhorando as taxas de conversão e a interação geral do usuário.

No GemPages, adicionar um elemento fixo é simples e não requer conhecimento de codificação.

Como tornar um elemento fixo no GemPages

Etapa 1: selecione seu elemento

Selecione o elemento que deseja manter visível durante a rolagem. Pode ser um botão, um banner, etc.

Etapa 2: acesse as configurações avançadas de posição

• Na barra lateral esquerda do Editor GemPages, clique em Configurações.
• Navegue até a Avançado aba.

Etapa 3: defina a posição como fixa

• Encontre o Posição opção em Configurações avançadas
• Alterar a posição de padrão para Pegajoso. Essa alteração faz com que o elemento “fique” em sua posição em relação à janela de visualização conforme o usuário rola a tela.

Casos de uso comuns de elementos fixos

O posicionamento fixo pode ser aplicado a diferentes elementos, dependendo do layout da sua página e dos seus objetivos de conversão. Abaixo, apresentamos algumas maneiras comuns pelas quais os lojistas usam elementos fixos no GemPages para manter o conteúdo importante visível enquanto os visitantes rolam a página.

Como criar um botão CTA fixo

Se você deseja que o botão de chamada para ação permaneça visível enquanto os usuários rolam a página, você pode torná-lo fixo usando a propriedade `sticky`. Posição criação.

Siga esses passos:

Passo 1: Selecione os Elemento de botão você quer deixar pegajoso.

Passo 2: Vou ao Avançado guia na barra lateral esquerda.

Passo 3: Desloque-se até o Posição seção.

Passo 4: Colocou o Posição opção para Pegajoso.

Uma vez ativado, o botão CTA permanecerá visível enquanto os visitantes navegam pela página, facilitando a tomada de ações a qualquer momento.

Como adicionar um CTA fixo apenas em dispositivos móveis

No GemPages, quando você define um botão para Pegajoso Na versão para desktop, o conteúdo permanecerá fixo também na versão para dispositivos móveis. Isso ocorre porque o GemPages utiliza projeto ágilIsso significa que as configurações de posição se aplicam a todos os dispositivos por padrão.

No entanto, se você quiser que o botão CTA seja fixo Somente em dispositivos móveisVocê pode criar uma versão móvel separada do botão e aplicar o posicionamento fixo somente a essa versão.

Siga esses passos:

Passo 1: Duplique o botão que você deseja fixar apenas na versão para dispositivos móveis.

Passo 2: Selecione os botão original, então atualize seu Configurações do visor para mostrar em Apenas desktop e escondê-lo em Mobile.

Passo 3: Selecione os botão duplicado, então atualize seu Configurações do visor para mostrar em Mobile (e ocultá-lo na área de trabalho, se necessário).

Passo 4: Com o botão duplicado selecionado, acesse o Avançado guia. Deslize até a Posição seção. Colocou o Posição opção para Pegajoso.

Após a conclusão, o comportamento fixo será aplicado apenas à versão móvel do botão, enquanto a versão para desktop permanecerá inalterada.

Como criar uma descrição de produto que te fisgue

As descrições fixas de produtos são comumente usadas em páginas de produtos para manter informações importantes (como detalhes do produto, preço ou botões "adicionar ao carrinho") visíveis enquanto os clientes percorrem as imagens do produto ou descrições longas.

Siga esses passos:

Passo 1: Selecione os elementos de descrição do produto.

Passo 2: Vou ao Avançado guia na barra lateral esquerda.

Passo 3: Desloque-se até o Posição seção.

Passo 4: Colocou o Posição opção para Pegajoso.