post

Esconder ícone rede social que não tem link no JetEngine e Elementor

Publicado em: 09/11/2022 / Atualizado em: 09/11/2022

Categorias: BlogCSSElementorJetEngineWordpress

É possível configurar um “options page” no jetengine para adicionar links aos ícones de rede social do Elementor.

Para isso, criei um pagina de opções como abaixo:

Onde é possível adicionar o link de cada rede social pré-configurada.

Depois é só adicionar o widget “ícones sociais” na sua pagina, e usar a opção “tags dinâmicas” para vincular o campo na rede social correta.

Porem, as vezes pode ser que o cliente não quer preencher todas as redes sociais, isso pode deixar seu layout com um ícone mostrando, mas sem nenhum link associado.

Em CSS Personalizado, adicione esse código abaixo:

selector a {
    display: none;
}

selector a[href] {
    display: flex;
    margin-left: 24px;
}

selector .elementor-grid-item:nth-child(1) a {
    margin-left: 0px;
} /* CSS opcional para dar espaço entre os icones, pois com o código personalizado acima, não é possivel espaçar corretamente pelo editor do elementor */

O código acima, vai verificar se a rede social possui link atrelado ao ícone, se tiver ele exibe, se não ele oculta da pagina.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2132

ID de Referência: 2132

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato