En el tutorial de hoy os vamos a explicar cómo crear 8 efectos visuales para Elementor, esperamos que os gusten.

Efecto post-it con Elementor

Para no confudiros y no caer en errores estar atentos en los ajustes de secciones y columnas. Las columnas siempre van dentro de las secciones.

Para empezar a crear nuestro efecto post-it po primero que realizaremos es crear una sección de una única columna. Desde los ajustes de la sección definiremos:

Ancho del contenido: caja
Alto: Altura mínima, definiendo el alto de la imagen que podremos posteriormente de fondo dentro de la columna.
Posición de la columna: Estirar.

Acto seguido lo que haremos será insertar nuestra imagen de fondo del post-it. Para ello accedemos a la columna y desde los ajustes de los estilos (1) insertamos nuestra imagen de fondo y definimos que (2) el fondo no se repita y que (3) la imagen de fondo abarque toda la columna.

Podéis descargar la imagen de fondo clicando aquí.

Seguimos y insertamos dentro de la columna el widget del editor de texto. Personalizamos nuestro texto y el diseño de la fuente al gusto de cada uno pero teniendo en cuenta el número de post-it que queramos poner por fila. En nuestro ejemplo pondremos 3 por lo que trabajaremos con un tamaño de fuente de 32px.

No os preocupeis si el texto está sobre la chincheta de la imagen, esto lo solucionaremos más adelante.

Volvemos a la columna y desde el apartado avanzado (1) definimos una clase css. En nuestro caso definiremos transicion y en (2) css personalizado pegaremos este codigo:

.transicion{
transform: rotate(5deg);
transition: transform 0.5s;
}
.transicion:hover{
transform: scale(1.3);
z-index: 1;
transition: transform 0.5s;
-webkit-box-shadow: -7px 9px 22px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -7px 9px 22px 0px rgba(0,0,0,0.75);
box-shadow: -7px 9px 22px 0px rgba(0,0,0,0.75);
}

Para entender los atributos de la clase os recomendamos visitar el vídeo que hay al final del tutorial del efecto post-it, os ayudaran para los ajustes de personalizacion.

Lo siguiente que haremos será duplicar el número de columnas en relación al número de post-it que queremos que aparezcan en esta sección, en nuestro caso 3 y crearemos un margen dentro de cada uno de los widgets de texto para que el texto no pise la chincheta de la imagen.

El efecto que conseguiremos será el siguiente:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Recuerda, revisa el siguiente vídeo para acabar de concretar los ajustes de personalización.

Máscaras de vídeo Elementor

Antes de iniciar con el maquetado deberemos tener la imagen que va a ir en la capa superior del vídeo. Dicha imagen debe tener transparente la zona donde se deberá visualizar el vídeo y debe ser guardada en formato PNG. Las dimensiones de la misma dependerán del contenedor donde vaya a ir. Nosotros trabajaremos con estas dimensiones 1180×744.

Si no tienes ninguna herramienta de pago para editar tu imagen puedes hacerlo online en pixrl.

Para crear nuestra primera máscara de vídeo con Elementor crearemos una sección con la estructura de una columna y desde el apartado estilo de la sección insertaremos nuestro vídeo de You Tube.

Sin movernos de la sección nos vamos a disposición y en el apartado alto seleccionamos altura mínima y la definimos a la altura de la imagen que va a ser nuestra capa de vídeo. Para nuestro ejemplo utilizaramos una imagen de 744px de alto, que es la altura que le hemos dado a la sección.

Volvemos a los estilos de la sección y en capa de fondo insertamos la imagen que irá sobre el vídeo. Ya solo nos quedará modificar los ajustes de la capa de fondo.

Definir que no se repita la capa de fondo.
Modificar el tamaño para que abarque toda la sección.
Modificar la opacidad hasta 1 para eliminar la transparencia de la imagen.

Para repasar todo lo que hemos explicado o si lo que necesitas es una máscara de vídeo que no haga el 100% del ancho de una sección revisa el siguiente vídeo.

Igualar el alto de las tablas de precios de Elementor

Uno de los problemas que a nivel estético que nos podemos encontrar en el widget de tablas de precios es que si varias tablas no tienen los mismos items su altura varía.

A continuación os mostramos este ejemplo

Para solucionar este problema simplemente pegaremos el siguiente código CSS en css personalizado de los ajustes de la página/entrada:

.elementor-widget-price-table, .elementor-widget-price-table>div, .elementor-price-table {
    height: 100%;
}
.elementor-price-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.elementor-price-table__footer {
    margin-top: auto;
}

Aquí podemos comprobar los resultados y ver como aunque no tienen los mismos items los altos se igualan.

$ 39

Monthly

Elemento de lista nº1
Elemento de lista nº2
Elemento de lista nº3

Populares

$ 39

Monthly

Elemento de lista nº1
Elemento de lista nº2
Elemento de lista nº3
Elemento de lista nº4
Elemento de lista nº5

Populares

Por si aún tienes alguna duda te lo explicamos otra vez en el siguiente vídeo.

Cómo crear el efecto de nevar en elementor

Vamos otro efecto para Elementor. En este caso vamos a recrear el efecto de nevada y de nuevo lo vamos a hacer con CSS. Para ello selecciona el contenedor donde quieras que se muestre el efecto. Vas a la pestaña avanzado y en clase css define la clase. Para nuestro ejemplo utilizaremos la clase snow-bg

Desde el mismo apartado de avanzado nos vamos a custom css y pegamos el siguiente código. Recuerda que si no tienes la versión pro de Elementor puedes pegar el siguiente código desde tu administrados siguiendo la ruta Apariencia/personalizar/css personalizado.

.snow-bg {
   position: relative;
}

.snow-bg:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://library.elementor.com/resources/christmas-snow-effect/s1.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s2.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s3.png');
    animation: snow 10s linear infinite;
}

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Y ya tenemos nuestro efecto de nevada con Elementor.

Si quieres, revisa todos los pasos en el siguiente vídeo:

Cómo crear un scroll de imagen con Elementor

El siguiente efecto que vamos a recrear con Elementor es crear un scroll de imagen. Este efecto es más vistoso si el alto de la imagen es más alto que el alto de la pantalla, aún así, cómo vamos a definir un alto de imagen en el contenedor de la imagen podemos recrear el mismo efecto.

Creamos un contenedor de dos columnas, en una pondremos un contenido de ejemplo y en la otra columna la imagen en la que vamos a realizar el scroll.

Desde los ajustes avanzados de la imagen definimos una clase. En nuestro caso será Scroll.

Lo siguiente que haremos, sin movernos de los ajustes avanzados de la imagen, nos vamos a css personalizado y pegamos el siguiente código css:

.scroll img{
    width:100%;
    height:780px;
    object-fit:cover;
    object-position: top center;
    transition: object-position 1s;
}

.scroll:hover img{
    object-position: bottom center;
}

Si queremos modificar la velocidad del scroll aumentaremos el valor del atributo transition: object-position 1s; . Si el valor es más alto el scroll será más lento. Y ya tendremos aplicado el efecto de scroll a nuestra imagen. Un poco más abajo tienes un vídeo, alli puedes repasar todos los pasos.

Animar los divisores de forma en Elementor

El siguiente efecto que vamos a explicar es cómo animar los divisores de forma. Para ellos creamos una sección de una columna y desde la disposición definimo:

Espacio entre columnas: sin espacio.
Alto: Altura mínima.
Altura mínima: definimos la altura mínima que nos interese.

Acto seguido nos vamos a los estilos de la sección y definimos:

Color de fondo de la sección
Desde divisores de forma seleccionamos los tipos de divisores que queremos que aparezca arriba y abajo de la sección. Si queremos que los divisores lleven un color diferente al fondo podremos hacerlo desde aquí.

Ya por último pegaremos el siguiente código css en avanzado/ css personalizado. Si no tienes la versión pro de Elementor puedes pegarlos desde el administrador de tu WordPress en apariencia/personalizar/css adicional:

body{ 
overflow-x:hidden;
}

.elementor-shape-bottom{
bottom:-1px;
width: 210%;
  animation: wave 22s cubic-bezier(0.36,0.45,0.63,0.53) infinite; 
}

.elementor-shape-top{
bottom:-1px;
width: 210%;
  animation: wave 22s cubic-bezier(0.36,0.45,0.63,0.53) infinite; 
}

@keyframes wave {
  0%{
  margin-left:0;
  }
  50%{
  margin-left:-1600px;
  }
    100%{
  margin-left:0;
  }

Puedes repasar todos los pasos en el siguiente vídeo.

Crear efecto glass en elementor

Para que el efecto glass sea más vistoso lo que vamos a hacer inicialmente es añadir una imagen de fondo a nuestro contenedor. Acto seguido, en la columna que hay dentro de el contenedor en el que hemos puesto la imagen de fondo no iremos a avanzado y definiremos una clase, en nuestro caso definiremos la clase vidrio. Acto seguido sin abandonar el apartado avanzado nos iremos a css adicional y pegaremos el siguiente código css:

.vidrio{
background-color: rgba(255, 255, 255, .15);
 backdrop-filter: blur(5px);
 transition: 1s;
}

Y ya tenemos creado nuestro efecto class. Si por el contrario queremos que el efecto glass se aplique cuando el curso se ponga encima modificaremos el anterior código css por el siguiente:

.vidrio{
 transition: 1s;
}
.vidrio:hover {
background-color: rgba(255, 255, 255, .15);
 backdrop-filter: blur(5px);
 transition: 1s;
}

Si queremos que el efecto de transición del efecto glass sea más lento modificaremos el valor del atributo transition dentro de las clases. Y si queremos modificar el desenfoque modificaremos el valor de blur en el atributo backdrop-filter. Para una mayor compresión de los pasos revisa el siguiente vídeo.

Mostrar elementos ocultos al posicionarnos en una columna

Otro de los efectos visuales para Elementor que vamos a explicar es cómo mostrar un texto oculto la posicionarnos sobre una columna. Estos son los CSS del ejemplo que encontrarás más abajo.

.estrella{
    top:-50px;
}
.texto{
    bottom:-50px;
}

.estrella_hover{
    opacity:0;
    position: relative;
    transition: all .5s ease-in-out;
}
.texto_hover{
    opacity:0;
    position: relative;
    transition: all .5s ease-in-out;
}
.titulo:hover .estrella{
    top:0;
}
.titulo:hover .texto{
    bottom:0;
}
.titulo:hover .estrella_hover{
    opacity:1;
}
.titulo:hover .texto_hover{
    opacity:1;
}

Textos con efecto neón

Añadiremos un widget de texto en el que insertaremos el siguiente HTML en el que tenemos 2 spans con 2 clases definidas. Dentro de los spans podremos definir las silabas de nuestro texto, pudiendo utilizas los spans tantas veces como queramos.

<span class="fast-flicker">bien</span>veni<span class="flicker">do</span>s

Después de insertar el HTML podremos acceder a los estilos para personalizar el tipo de fuente, tamaño, interlineado etc etc, todo salvo el color. Acto seguido nos iremos a los avanzados del widget y en clases CSS definiremos la clase sign y en css adicional pegaremos el siguiente código css:

.sign {
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
}
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}
.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}
.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}
@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}
@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

Ya por último, si queremos personalizar los colores de la fuente lo haremos modificando el atributo color dentro de los keyframes. Para modificar las sombras, dentro de los mismo keyframes modificaremos los atributos text-shadow.

Zoom de imágenes con Elementor

Lo siguiente que vamos a explicar es cómo crear zoom en las imágenes de Elementor. Lo vamos a explicar de 2 formas distintas, con desbordamiento y sin desbordamiento. La diferencia entre un método y otro es que el método con desbordamiento el zoom de la imagen no respecta el contenedor en el que esta insertada y lo desborda.

Para crear nuestro zoom de imagen insertaremos el widget de imagen y desde avanzado definiremos la clase CSS dependiendo si queremos aplicar un método o el otro.

A continuación tenéis los CSS. Tendréis que escoger en relación al tipo de zoom que queráis aplicar:

/* con desbordamiento */
.con_overflow img 
{ -webkit-transition: 0.4s ease; transition: 0.4s ease; } 

.con_overflow:hover img 
{ 
-webkit-transform: scale(1.08); 
transform: scale(1.08);
}
/* Sin desbordamiento */
.sin_overflow {
 overflow: hidden;
}
.sin_overflow img {
  transition: transform .5s ease;
}
.sin_overflow:hover img {
  transform: scale(1.5);
}

Revisa los pasos en el siguiente vídeo.

Botones con efecto push en Elementor

Insertamos es widget de botón y lo personalizamos según nuestra necesidad.

Acto seguido pegaremos el siguiente código css y lo personalizaremos al gusto:

animation: pulse-blue 2s infinite; modificaremos los segundos para definir la duración.
rgba(26, 51, 244, 0.7); modificaremos el color rgb del color del pulso. Podéis averiguar el color rgb visitando esta página: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Colors/Color_picker_tool
box-shadow: 0 0 0 30px: modificaremos el tamaño del efecto push aumentando o disminuyendo el valor del box-shadow.

Podéis repasar los pasos en el siguiente vídeo:

				
					.elementor-button {

	animation: pulse-blue 2s infinite;
}
@keyframes pulse-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(26, 51, 244, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 30px rgba(26, 51, 244, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(26, 51, 244, 0);
	}
}

Desenfocar las imágenes de fondo de elementor

Una vez tengas definido el contenedor y la imagen de fondo, en los avanzados del contenedor define la clase desenfoque y aplica los siguientes estilos CSS:

				
					.desenfoque:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1;
}
.desenfoque .elementor-container{
    z-index: 1;
}

Revisa la versión móvil para que se adapte al ancho reduciendo los espacios o el tamaño de las fuentes. Para más info revisa el siguiente vídeo.

Botones de redes sociales animados con Elementor

Revisa el vídeo que encontrarás a continuación para crear las estructuras de los botones. Una vez finalices la estructura define la clase btn en los avanzados del widget de botón.

Luego, simplemente pega el siguiente código css en css adicional de los ajuste de la página.

				
					.btn{
    transition: transform 0.5s;
    transform: scale(0.9);
}
 span .redes{
    display: none;
    font-size: 18px;
    padding-left:8px;
}
.btn:hover span {
  display: inline!important;
}
.btn:hover{
transition: transform 0.5s;
transform: scale(1);
}

Efecto reflejar en imágenes con elementor

Simplemente insertaremos el widget de imagen en el contenedor, y desde el avanzado del widget definiremos la clase img y insertaremos el siguiente código CSS en apariencia/personalizar/css adicional.

				
					.img{
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0,0,0,.5));
}

Efecto overlap animado con Elementor

Revisa los pasos del siguiente vídeo y pega los estilos CSS que ponemos a continuación cuando te lo indiquemos.

				
					.image{
transform: scale(0.8);
transition: 1s;
}
.banner{
transform: scale(1.1);
transition: 1s;
}
.contenedor:hover .image {
transform: scale(1);
transition: 1s;
z-index: 100;
}
.contenedor:hover .banner {
transform: scale(0.9);
transition: 1s;
}

Efectos de scroll con elementor pro

Los efectos de transparencia y desenfonque los realizaremos utilizando Elementor con los ajustes de fondo del contenendor, igual que explicamos en el siguiente vídeo.

De igual forma, fijaremos el encabezado en la parte superior en el apartado efectos de movimiento y luego defininendo sticky arriba.

Ya por último para que el contenido haga el efecto que pasa por debajo del encabezado fijo insertaremos el siguiente script para conseguir cambiar el color de fondo cuando lleguemos a un punto del scroll vertical.

Ya para acabar, lo que nos faltara será definir la clase y los atributos de la clase que cambiarán el color de fondo.

Puedes ponerlos en los ajustes de página.

				
					<script   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script  type="javascript/blocked" data-wpmeteor-type="text/javascript" >
$(window).scroll(function(){
    if ($(this).scrollTop() >650) {
       $('#dynamic').addClass('roma');
    } else {
       $('#dynamic').removeClass('roma');
    }
});
</script>

				
					.roma{
    background-color: #000;
}

Crea tus animaciones personalizadas con Elementor

Sigue los pasos que encontraras después del código para crear tus animaciones.

Enlace a la web de Animista

				
					function my_entrance_animations() {
	return array(
	    'Animaciones personalizadas' => [
            'rotate-scale-up' => 'rotación y escalado izquierda',
		],
	);
}
add_filter( 'elementor/controls/animations/additional_animations', 'my_entrance_animations' );

Efecto Ken Burns con Elementor free

Simplemente definiremos la clase ken-burns en el avanzado del contenedor donde queramos crear el efecto. Luego, desde nuestro administrador de WordPress accederemos a apariencia/personalizar/css adicional y pegaremos el siguiente código:

				
					.ken-burns{
overflow:hidden;
width:100%;
height:100%;
-webkit-animation:zoom 20s;
animation:zoom 20s;
}

@keyframes zoom{
from{
transform:scale(1.1);
}
to{
transform:scale(1.5,1.5);
}

Revisa los pasos en el siguiente vídeo:

Scroll vertical automático para texto

El ejemplo que planteamos lo mostramos para texto pero el scroll se puede aplicar a cualquier elemento. Aplica la clase marquee al elemento que quieras aplicar el scroll y pega el siguiente código css.

Para modificar el tiempo de la animación modifica el tiempo en el atributo animation y juega con los atributos top del keyframe para ajustar la animación a la altura del contenedor.

Ya por último modifica los z-index del contenedor anterior y posterior para que el elemento animado pase por debajo.

Revisa el vídeo para mejor comprensión.

				
					 .marquee {
      animation: marquee 15s linear infinite;
    }
 @keyframes marquee {
  0% {
    top: 300px
  }
  100% {
    top: -250px
  }
}

Fondo fijo para tablet y móvil con Elementor.

Una de la carenciás que tiene elementor es que no te permite definir una imagen de fondo fija para dispositivos móviles. Hoy te explicare como definirla. Solo deberás pegar el siguiente código en los ajustes de la página y aplicar la clase back al contenedor en el que insertes la imagen de fondo.

				
					@media screen and (max-width: 767px) {
.back{
    background-attachment: fixed;
}
}

Crear tarjetas animadas con Elementor

Para crear tarjetas animadas con Elementor revisa el vídeo que encontrarás después del siguiente código CSS

				
					.imagen {
   transition: 1.5s;
   padding: 5px;
}

.cabecera{
    top:150px;
     transition: 0.5s;
}
.texto{
    top:170px;
    opacity:0;
     transition: 0.5s;
}
.boton{
    top:170px;
     opacity:0;
      transition: 0.5s;
}
.imagen:hover {
-webkit-transform: scale(0.9);
	transform: scale(0.9);
   transition: 0.5s;
}
.imagen:hover .cabecera{
   top:0;
   transition: 0.5s;
}
.imagen:hover .texto{
   top:0;
   opacity:1;
    transition: 0.5s;
}
.imagen:hover .boton{
   top:0;
   opacity:1;
    transition: 0.5s;
}

Tabla de precios animadas

Lo primero que realizaremos es insertar el widget de tabla de precios y personalizarlo según nuestras necesidades.

El siguiente paso será añadir un relleno de 25px al widget de tabla. Eso lo podremos hacer desde la sección avanzado del mismo widget.

Luego nos vamos a los ajustes de la página y en css adicional pegaremos el siguiente código css:

.elementor-price-table {
   transition: 0.5s;
   border:1px solid #000;
}
.elementor-price-table:hover {
   transform:scale(1.12);
   transition: 0.5s;
  background-color: #3371FF!important;
}
.elementor-widget-price-table .elementor-widget-container {
    overflow: visible;
}
.elementor-price-table:hover .elementor-price-table__header{
    background-color:#1154EE!important;
}
.elementor-price-table:hover .elementor-price-table__price{
    color: #fff!important;
}
.elementor-price-table:hover .elementor-price-table__features-list{
    color: #fff!important;
}
.elementor-price-table:hover .elementor-price-table__feature-inner{
    color: #fff!important;
}
.elementor-price-table:hover .elementor-price-table__button{
    color: #000;
     background-color: #fff!important;
}
.elementor-price-table:hover .elementor-price-table__additional_info{
    color: #fff!important;
}

Lo único que deberemos modificar es el color que deberán tener cada uno de los elementos al posicionarnos sobre la ta tabla. Para ello modificaremos los colores hexadecimales (#fff).

Para averiguar el color hexadecimal clica aquí.

Opcionalmente puede modificar la velocidad en la que se aplican los cambios al posicionarnos sobre la tabla. Para ello modificaremos el atributo transition dentro de elementor-price-table y elementor-price-table:hover siendo una transición más lenta si el valor en segundos es más algo.

Ahora duplicaremos la columna donde está la tabla tantas veces como tablas necesitemos.

Revisa el siguiente vídeo para aclarar posibles dudas.

Bien, pues hasta aquí llega este tutorial en el que hemos repasado algunos de los efectos visuales para Elementor. Si tienes alguna duda o si quieres contarnos otro efecto visual con Elementor que no aparezca en este tutorial puedes dejarlo en comentarios.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita

sergio

19 diciembre, 2021 a las 8:22 pm

Enhorabuena por tu trabajo, seguro que pruebo alguna de estas cosas en mis webs.
Un saludo y gracias por tu trabajo.

Responder

Byteweb
28 diciembre, 2021 a las 7:14 pm

Muchas gracias por tu comentario Sergio, me alegra saber que será útil y agradezco enormemente que valores el contenido.

Un saludo y feliz 2022

Responder

jesus

27 diciembre, 2021 a las 12:56 pm

me pasa una cosa curiosísima con una imagen de cabecera en elementor. la imagen es negra. Pues en móviles y tablets se ve gris oscura. no doy con el motivo. Gracias.

Byteweb
28 diciembre, 2021 a las 7:15 pm

Hola Jesus:
Edita la imagen y guárdala como archivo PNG. recuerda que el fondo debe ser transparente.

Un saludo.

Responder

José Luis Zúñiga

7 enero, 2022 a las 11:17 pm

Hola … gracias por las aportaciones … tengo una duda … me interesa el efecto de lupa para imagenes .. vi el demo y está exelente … solo que no enuentro en su publicación la parte del script de java que va en el widget de html … este escript tiene algún costo ??? o está en algún otro sitio ?? gracias y un abrazo por el año nuevo 2022.

Byteweb
9 febrero, 2022 a las 6:58 am

Hola José, gracias por el comentario. Acabo de revisar el post y el script está. https://prnt.sc/26rsyad

Por favor revisa de nuevo el post. Un saludo.

Responder

Anuar

22 abril, 2022 a las 6:37 am

Increíbles tutoriales, todo muy bien explicado y estructurado, muchas gracias!

Byteweb
1 septiembre, 2022 a las 6:31 pm

Muuchas gracias por tu comentario, se agradece. Un saludo.

Responder

Alexander T

22 diciembre, 2023 a las 5:03 pm

Excelentes efectos y muy bien detallado. gracias por el contenido

Byteweb
11 enero, 2024 a las 9:09 am

Gracias por tu comentario. Un saludo.

Responder

Pati

31 enero, 2024 a las 4:08 pm

Muy buenas, gracias de nuevo por estos tutoriales. He uilizado el de las tablas de precios animadas y todo perfecto pero sale alrededor un borde negro que me gustaría quitar y en el código no veo cómo y en el widget de elementor no consigo quitarlo tampoco. Muchas gracias!

Byteweb
22 febrero, 2024 a las 10:46 am

Puedes mandar la url de la página?

Responder

Responsable:	Carlos Jiménez Mendez
Finalidad:	Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:	Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:	No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield
Derechos:	Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:	Se puede consultar la política de privacidad de forma más detallada aquí.

Cómo crear 25 efectos visuales para Elementor

Índice de contenidos