Tricks for WordPress & Elementor 2024

This is a short manual and simplified that it will work as a repository of basic codes that serve as the basis for future web projects. Codes as: (CSS, JAVA, PHP, HTML and others. that will be updated as the need of the developer requires it. This Code will be of permanent use to the team Tuvertigo.com but also for those colleagues who wish to fit their platforms since these codes have been tested, tested, and work in different web sites created by us.

Add Copyright © year on WordPress with automatic updates

1.- Go to the menu APPEARANCES then select FILE EDITOR THEMES.

2.-Go to FEATURES OF THE THEME (functions.php).

3.-Add the following code to the end of the file.

				
					 //FECHA EN EL COPYRIGHT
add_filter ('widget_text', 'do_shortcode');
function year_shortcode () {
$year = date_i18n ('Y');
return $year;
}
add_shortcode ('year', 'year_shortcode');

4.-Add the following code in the line of text in the footer.

				
					//SIN ESPACIOS EN LOS CORCHETES
[ year ]

Image rotation is infinite (CSS)

1.-To add an image with Elementor

2.-Add the following code in Advanced – Custon CSS

				
					selector img {
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

Flicker effect in Button

1.-Create a Button with Elementor

2.-Go to Advanced | Available | ID CSS and add.

btv

3.-Add the following code in Advanced – Custon CSS

				
					selector .elementor-button {
  animation: onda 1.5s infinite;
    box-shadow: 0px 0px 20px -5px #DDFE00; /*Cambie el color aqui*/
}

@keyframes onda {
    70% {
        box-shadow: 0 0 0 30px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

Continuous slideshow CSS

1.-Create a Carousel of Images with Elementor.

2.-Add the following code in Advanced – Custon CSS

				
					selector .swiper-wrapper { 
    transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}

selector::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, #fff, transparent );
    z-index: 10;
}
selector::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, #ffffff, transparent);
    z-index: 10;
}

Effect Floating for Logos

1.-Add Image with Elementor.

2.-Go Advanced | Position | Absolute and assign axis compensation X – Y.

3.-Add the following code in Advanced – Custon CSS

				
					selector {
 animation: flutuando01 25s ease;
 animation-iteration-count: infinite;
}
 
@keyframes flutuando01 {
 0% {
     transform: translateY(0px) rotate(15deg);
 } 50% {
     transform: translateY(-80px) rotate(-15deg);
 } 100% {
     transform: translateY(0px) rotate(15deg);
 }
}

Remove bottom margin paragraphs
(text editor)

1.-Go to the menu Customize WP.

2.-Add in CSS with the following code.

				
					.elementor-text-editor p:last-child{ 
 margin-bottom:0px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus arcu dui, id bibendum diam ultricies sed. In vestibulum finibus tempor. Duis volutpat cursus velit at ullamcorper. Class aptent taciti sociosqu ad litora torquent per for nostra, per inceptos himenaeos. Nulla aliquam luctus hendrerit. Etiam ante ligula, suscipit non, bibendum vitae, finibus eget sapien. Phasellus sit amet rutrum ligula, et ultrices elit. Aenean lacus sapien, interdum quis pretium sit amet, varius eget lorem. Sed id facilisis massa. Thirst thirst pain to magna posuere placerat sit amet nec lorem. Admin id ante non velit hendrerit vehicula ac id felis. Sed at viverra mi. Morbi mollis odio enim, sed vulputate ligula gravida vitae. Donec sit amet diam lorem. Aliquam erat volutpat. Nunc vel mi quis nunc imperdiet egestas.

Text fades
the expand/collapse

1.-Add Caption with Text Editor in WP.

2.-Añadir el siguiente código en Avanzado – Custon CSS

				
					selector{
    max-height: 80px; /*mude para a altura desejada que vai aparecer antes do hover*/
    transition: 0.5s; /*defina o tempo de transição para aparecer o conteúdo. aumente a medida que voce cresce o texto para ficar mais fluido*/
    overflow: hidden;
}
selector:hover{
    max-height: 1000px; /*defina a altura máxima ao passar o mouse*/
}
selector::after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #170b21 /*defina a cor do fade (de preferencia a cor do fundo que voce esteja usando*/); )
    transition: 0.5s; /*defina o tempo de transição para esconder o conteúdo. */
}
selector:hover::after{
    opacity: 0; /*remove a cor do fade ao sair do hover*/
}

Guias para Elementor

1.-Este código solamente es visible en el constructor de elementor, para ocultarlo hay que quitar el código

2.-Agregar el siguiente código en Avanzado – Custon CSS.

				
					/*para ordenador*/
@media (min-width: 1025px){
    :root{
        --colunas: 12;
        --largura: 1140px;
        --offset: 0px;
        --gutter: 20px;
        --cor: #ffffff10;
    }
}

/*para tablet*/
@media (min-width: 768px) and (max-width: 1024px){
    :root{
        --colunas: 6;
        --largura: 600px;
        --offset: 48px;
        --gutter: 16px;
        --cor: #ffffff10;
    }
}

/*para celular*/
@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)) );
}

Destacar Textos

1.-Se debe ir Ajustes de la pagina

2.-Agregar el siguiente código en Avanzado – Custon CSS.

3.-Ahora procede agregando al texto el <span y la class>

				
					.destacado{
    background: #DDFE00;
    color: #3A055D;
    padding: 0px 5px 0px 5px;
    border-radius: 5px;
}

				
					<span class="destacado">SU TEXTO AQUÍ</span>

SU TEXTO AQUÍ

Notificaciones al comienzo de la página

1.-Se debe agregar el código en un widget html al final de la página.

2.-Si lo deseas puedes agregar mas pestañas y también puedes cambiar los iconos .svg

				
					<style>
/*Ordenador*/
@media (min-width: 1025px){
    .popup-container {
        position: fixed;
        left: 40px;
        bottom: 40px;
        background: #00000060;
        backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-size: 14px;
        opacity: 0;
        transform: translateX(-100%);
        animation-fill-mode: forwards;
        border-radius: 10px;
        color: white;
        font-weight: 400;
        display: flex;
        align-items: center;
        padding: 17px;
        z-index: 300
    }
    .popup-container img{
        padding-right: 3px;
        height: 20px;
        width: 20px;
    }
}

/*tablet*/
@media (min-width: 760px) and (max-width: 1024px){
    .popup-container {
        position: fixed;
        left: 10px;
        bottom: 10px;
        background: #00000060;
        backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-size: 14px;
        opacity: 0;
        transform: translateX(-100%);
        animation-fill-mode: forwards;
        border-radius: 10px; 
        display: flex;
        align-items: center;
        padding: 15px;
        z-index: 300
    }
}
/*Celular*/
@media (max-width: 759px){
    .popup-container {
        position: fixed;
        left: 5px;
        right: 5px;
        bottom: 30px;
        background: #00000060;
        backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-size: 12px;
        opacity: 0;
        transform: translateX(-100%);
        animation-fill-mode: forwards;
        border-radius: 10px;
        color: white;
        display: flex;
        padding: 15px 15px 15px 15px;
        max-width: 340px !important;
        margin: 0 auto !important;
        z-index: 99999;
    }
    .popup-container img{
        padding-right: 4px;
        height: 18px;
        width: 18px;
    }
}
.fas.fa-check-circle.fa-2x.icon {
    color: #01b35d;
}

    .popup-container .icon {
        margin-right: 10px;
    }
    
    .popup-container:nth-child(1) {
        animation: popup 1s ease-in-out 0s 1;
    }

    .popup-container:nth-child(2) {
        animation: popup 1s ease-in-out 7s 1;
    }

    .popup-container:nth-child(3) {
        animation: popup 1s ease-in-out 14s 1;
    }

    @keyframes popup {
        0% {
            opacity: 0;
            transform: translateX(-100%);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeOutUp {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-100%);
        }
    }
</style>

<!--Notificacion 1-->
<div class="popup-container">
    <img width="38" height="31" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2038%2031'%3E%3C/svg%3E" data-lazy-src="https://tuvertigo.com/wp-content/uploads/2024/10/personas.svg"><noscript><img width="38" height="31" decoding="async" src="https://tuvertigo.com/wp-content/uploads/2024/10/personas.svg"></noscript>&nbsp;<b>Marcos acaba de aquirir Landing designer</b>
</div>
<!--Notificacion 2-->
<div class="popup-container">
    <img width="38" height="31" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2038%2031'%3E%3C/svg%3E" data-lazy-src="https://tuvertigo.com/wp-content/uploads/2024/10/personas.svg"><noscript><img width="38" height="31" decoding="async" src="https://tuvertigo.com/wp-content/uploads/2024/10/personas.svg"></noscript>&nbsp;<b>+1534 personas han ingresado en la última semana</b>
</div>

<!--Crea las notificaciones que necesit-->

<script>
    setTimeout(function() {
        var popups = document.querySelectorAll(".popup-container");

        function removePopup(popup) {
            popup.style.animation = "fadeOutUp 1s forwards";
            setTimeout(function() {
                popup.remove();
            }, 5000);
        }

        function displayPopups() {
            var delay = 0;
            for (var i = 0; i < popups.length; i++) {
                (function(popup, delay) {
                    setTimeout(function() {
                        popup.style.animationDelay = delay + "s";
                        popup.style.opacity = 1;
                        popup.style.transform = "translateX(0)";
                        setTimeout(function() {
                            removePopup(popup);
                        }, 6000);
                    }, delay * 1000);
                })(popups[i], delay);
                delay += 14; // Delay de 7 segundos entre las notificaciones
            }
        }

        displayPopups();
    }, 500);
</script>

Ruido encima de la página

1.-Agrega este archivo a la biblioteca de medios de wordpress y copiar la url del archivo

ruido-animado.gif

2.-Agregar el código en el css personalizado de la página

				
					[data-elementor-post-type="page"]:after{
    content:"";
    display: block;
    width: 100vw;
    height: 100vh;
    opacity: 0.2;/*Modifica desde 0.1 hasta 1 para definir la opacidad del ruido*/
    background-image: url('https://tuvertigo.com/wp-content/uploads/2024/10/ruido-animado.gif');
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

We invite you to share this article

Leave us your contact data, and I will call in short.

We will respond specifically to all the questions you have.

We will explain step by step how to work your Web project.

And if you dare, we will tune the details to develop your new Website!

Do you talk about?

Start today with your website

*Your information is 100% secure with us and will never be shared to third parties.

Tricks for WordPress & Elementor 2024

Add Copyright © year on WordPress with automatic updates

Image rotation is infinite (CSS)

Flicker effect in Button

Continuous slideshow CSS

Effect Floating for Logos

Remove bottom margin paragraphs
(text editor)

Text fades
the expand/collapse

Guias para Elementor

Destacar Textos

SU TEXTO AQUÍ

Notificaciones al comienzo de la página

Ruido encima de la página

ruido-animado.gif

Diseño Web en Cúcuta: WordPress y E-commerce para Potenciar Tu Negocio

¡Impulsa tu Marca con Stickers Personalizados GIPHY! Perfectos para Historias, Reels y Publicaciones

Why should I hire a graphic designer?

Leave us your contact data, and I will call in short.

Developed by: @GEALMAGO | © 2005 - 2023 All Rights Reserved TUVERTIGO.COM

Tricks for WordPress & Elementor 2024

Add Copyright © year on WordPress with automatic updates

Image rotation is infinite (CSS)

Flicker effect in Button

Continuous slideshow CSS

Effect Floating for Logos

Remove bottom margin paragraphs (text editor)

Text fades the expand/collapse

Guias para Elementor

Destacar Textos

SU TEXTO AQUÍ

Notificaciones al comienzo de la página

Ruido encima de la página

ruido-animado.gif

Diseño Web en Cúcuta: WordPress y E-commerce para Potenciar Tu Negocio

¡Impulsa tu Marca con Stickers Personalizados GIPHY! Perfectos para Historias, Reels y Publicaciones

Why should I hire a graphic designer?

Leave us your contact data, and I will call in short.

Developed by: @GEALMAGO | © 2005 - 2023 All Rights Reserved TUVERTIGO.COM

Remove bottom margin paragraphs
(text editor)

Text fades
the expand/collapse