Elementos dinâmicos: exibir conteúdo diferente para clientes logados e visitantes

Com essa funcionalidade você pode personalizar o que aparece no cabeçalho, rodapé ou qualquer página do seu site dependendo do estado do visitante — se ele já fez login ou não.

Exemplos do que você pode fazer:

• Mostrar o botão "Entrar" apenas para quem ainda não está logado
• Mostrar o botão "Meus Pedidos" apenas para quem já está logado
• Exibir uma saudação como "Olá, João!" com o nome real do cliente

Como funciona

Você adiciona uma classe CSS ao elemento no Elementor para indicar quando ele deve aparecer:

Além disso, você pode usar o marcador {{USER_NAME}} em qualquer texto — ele será substituído automaticamente pelo nome do cliente quando ele estiver logado.

Passo a passo no Elementor

Passo 1 — Selecione o elemento

Clique sobre o botão, texto, ícone ou seção que você quer tornar dinâmico.

Passo 2 — Abra a aba Avançado

No painel esquerdo do Elementor, clique na aba Avançado.

Passo 3 — Adicione a classe CSS

Role até o campo CSS Classes (ou Classe CSS) e digite a classe correspondente:

• Digite not-logged → para exibir somente para visitantes
• Digite is-logged → para exibir somente para clientes logados

Atenção: Não use ponto (.) na frente — escreva apenas not-logged, não .not-logged.

Passo 4 — Publique e teste

Clique em Publicar para salvar as alterações.

Depois, acesse o site como visitante (sem login) e como cliente logado para confirmar que cada elemento aparece no momento certo.

Usando o nome do cliente em textos

Você pode usar {{USER_NAME}} em qualquer widget de texto do Elementor. Quando o cliente estiver logado, o texto será exibido com o nome real dele.

Exemplo: No campo de texto do Elementor, escreva:

Olá, {{USER_NAME}}! Bem-vindo de volta.

O cliente verá:

Olá, Maria! Bem-vindo de volta.

Importante: O {{USER_NAME}} só é substituído quando o cliente está logado. Para visitantes, recomendamos colocar esse texto dentro de um elemento com a classe is-logged, assim ele não aparece para quem não está logado.

Exemplo prático: botão de login e botão de conta

Uma configuração comum é ter dois botões no cabeçalho:

Botão "Entrar" → visível apenas para visitantes

• Texto: Entrar
• Classe CSS: not-logged
• Link: página de login

Botão "Minha Conta" → visível apenas para clientes logados

• Texto: Olá, {{USER_NAME}}
• Classe CSS: is-logged
• Link: página de pedidos

Lembre-se: limpe o cache após qualquer alteração

Depois de publicar qualquer mudança no WordPress, acesse a plataforma Auryn em: Módulos → Personalização avançada do site → Limpar cache

Sem esse passo, as alterações podem não aparecer para os seus clientes.

Em caso de dúvidas adicionais e precise de mais informações, consulte nossa Central de Ajuda, ou entre em contato com nossa equipe de suporte através do e-mail  suporte@auryn.com.br