closeup photo of silver macbook pro on table

¿Como hacer un efecto de olas en movimiento con Elementor?

En este tutorial de WordPress y Elementor veremos cómo hacer un efecto de Olas en nuestras páginas web usando Elementor y un poco de CSS, si no sabes CSS no te preocupes este tutorial no requerirá de conocimientos en programación.

En este tutorial de WordPress y Elementor veremos cómo hacer un efecto de Olas en nuestras páginas web usando Elementor y un poco de CSS, si no sabes CSS no te preocupes este tutorial no requerirá de conocimientos en programación. El resultado final sera como el siguiente:

Bueno comencemos… lo primero sera tener instalado Elementor, si no cuentas con Elementor como plugin deberás ir a la sección de Plugin > Añadir nuevo y deberás ingresar en la barra de búsqueda Elementor la primera opción damos en Instalar ahora y Activar.

image 37

Una vez instalado Elementor deberemos de crear o ir a la página donde queramos añadir el efecto en mi caso ya tengo una página hecha con Elementor a la que quiero añadirle el efecto, la página tiene el nombre de: Página de Inicio.

image 38

Deberemos de dar click sobre el boton de editar.

image 39

Aparecera el editor de Gutenberg en este caso daremos click en editar con Elementor.

image 40

Nos aparecera una pantalla como la siguiente deberemos de esperar a que el plugin de Elementor, termine de cargar.

image 41

Al finalizar podremos ver nuestra página que he realizado previamente con Elementor.

image 42

En esta página deberemos de dar click en alguna sección para poder añadir el divisor de olas.

image 43

Una vez dado click sobre alguna sección deberemos de dar click en la pestaña de apariencia de esa sección:

image 44

Deberemos de ir a el apartado de Forma del Divisor.

image 45

Al dar clic en Forma del divisor nos aparecerán 2 opciones más que es Arriba o Abajo estos son los lugares donde podemos agregar las Olas, en mi caso solo usare abajo, pero puedes usar cualquier posición o ambas, es tu decision.

image 46

Después nos pedira que seleccionemos el tipo de divisor, para el efecto que queremos usaremos Olas, he intentado animar otros divisores y funciona la animación, pero no con todos se ve bien, te sugiero que una vez finalizado el tutorial experimentes con esta parte de Elementor y veas los resultados a los que puedes llegar.

image 47

Una vez seleccionado el tipo de divisor como Olas nos mostrara algunas configuraciones puedes dejarlas como tú quieras en cuestión de altura o ancho, color y profundidad, aqui te dejo como yo lo he configurado.

image 48

Una vez terminado de configurar el elemento de Forma de Divisor podemos ver que ya se muestra nuestras Olas pero aun sin animación. basta con dar click en el boton verde de actualizar para que Guardemos los cambios. Ahora vamos a la parte importarte.

image 49

¿Como animar la Forma de Divisor?

Para ello veremos dos opciones la primera y más sencilla es para Elementor Pro en tu WordPress basta con dirigirnos a la pestaña de Avanzado en la misma sección donde pusimos la Forma del Divisor y buscar la pestaña de CSS Personalizado y pegar el código que esta debajo:

image 50
body{ overflow-x:hidden}
.elementor-shape{
width: 200%;
  animation: shape 10s ease-in-out infinite;
}
@keyframes shape {
0% {left: 0;}
50% {left: -50%;}
100% {left: 0;}
}
@media only screen and (max-width: 767px) {
  .elementor-shape {display:none;}
}
¿Como hacerlo sin Elementor Pro?
image 51
body{ overflow-x:hidden}
.elementor-shape{
width: 200%;
  animation: shape 10s ease-in-out infinite;
}
@keyframes shape {
0% {left: 0;}
50% {left: -50%;}
100% {left: 0;}
}
@media only screen and (max-width: 767px) {
  .elementor-shape {display:none;}
}

Deberemos de copiar código que está arriba de este texto en la hoja de estilos de nuestro tema hijo activado para ello nos dirigiremos a Apariencia > Editor de archivos de temas.

Basta con pegar el código y dar click sobre el boton de Actualizar archivo.

image 52

Listo al regresar a la página hecha con Elementor podremos ver que se habrán animado las Olas y obtendrás un resultado como él siguiente:

BONUS: ¿Como hacerlo sin un Tema Hijo?

Antes de enseñarte como hacerlo sin un tema hijo, te recomiendo que siempre utilizes un tema hijo en tu página web ya que si se actualiza tu tema perderas todos tus cambios.

Para ingresar el código CSS sin un Tema Hijo deberemos de ir a la pestaña de Apariencia > Personalizar.

image 53

Nos aparecera un menu como el siguiente, va a depender del tema que tengas activo en tu página web. En mi caso yo estoy usando el Tema Storefront y el Menu dice: CSS Adicional.

image 54

Después basta con pegar el código CSS que esta en este post y dar click en el boton de azul de Publicar.

image 55

¿Aún con dudas o necesitas ayuda con un Proyecto?

Si ¿Necesitas ayuda con algún proyecto web? No dudes en contactarme desarrollo soluciones completas y personalizadas con WordPress y PHP, con herramientas y procesos modernos, utilizando HTML, CSS, SCSS, PHP, JavaScript, Bootstrap y más… Si ¿Estás listo? ¡Envíame un mensaje y hablemos de tu proyecto web!