post

CSS + JS para auxiliar sites WordPress com Elementor

Publicado em: 04/11/2022 / Atualizado em: 14/11/2023

Categorias: BlogCSSElementorJavaScript (JS)JSKits e trechos de código para clientesWordpress
<style>
/* [BASICO] Código para travar a barra de rolagem horizontal, para elementos que ficam fora da tela do lado direito do navegador */
html, body {
 	overflow-x: hidden;
}
  
*:focus {
    outline: none;
}

a[href^="tel"],
a[href^="mailto"] {
    color: inherit;
  	font-family: inherit;
    text-decoration: none;
}
  
 /* HEADER STICKY */
header .elementor-sticky {
    transition: all linear 0s;
}

header .elementor-sticky--active {
    background: #fff;
	padding: 24px 20px;
    transition: all linear .2s;
	box-shadow: 0 10px 30px rgb(0,0,0,0.05);
}
  
.elementor-widget-theme-post-content a {
   color: var(--e-global-color-primary);
   font-weight: bold;
}
  
.jet-listing-grid__slider-icon.slick-arrow {
 	z-index: 2;
}
  
.elementor-widget-theme-post-content h2, .elementor-widget-theme-post-content h3, .elementor-widget-theme-post-content h4, .elementor-widget-theme-post-content h5, .elementor-widget-theme-post-content h6 {
    font-weight: bold;
    color: var(--e-global-color-secondary);
    margin: 32px auto;
}
  
.elementor-widget-theme-post-content p {
    margin-bottom: 16px;
}

.elementor-widget-theme-post-content ul {
    margin: 32px auto;
    padding-left: 20px;
}

.elementor-widget-theme-post-content h2 {
    color: var(--e-global-color-primary);
}

.elementor-widget-theme-post-content a {
    color: var(--e-global-color-accent);
}

.elementor-widget-theme-post-content img {
    margin: 16px 0 32px;
}
  
.grecaptcha-badge {
    display: none !important;
}
  
@media (max-width: 1024px) {
	h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
	    display: none;
	}
}
</style>


<script>
jQuery(document).ready(function() {
  // [BASICO] Código para impedir o scroll para o topo da pagina quando clicado em um link com # no href
  jQuery('a[href="#"]').click(function(e) {
    e.preventDefault();
  });
  
  // [BASICO] Fechar popup menu mobile ao clicar em link
  jQuery(document).on('click', '#menu-mobile a', function(event) {
    elementorProFrontend.modules.popup.closePopup({}, event);
  });
});

// [EXTRA] Código para reservar espaço de fundo para cabeçalhos fixos que usam o plugin "Sticky Header Effects for Elementor"
jQuery('header').css( { height: jQuery('header').height() +'px' } );
</script>

BONUS: Caso queira trocar o logo da pagina de login padrão do WordPress, segue script adicional: Adicionar logo personalizado na pagina de login do WordPress

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/2124

ID de Referência: 2124

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


Comentários