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.
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.
Deberemos de dar click sobre el boton de editar.
Aparecera el editor de Gutenberg en este caso daremos click en editar con Elementor.
Nos aparecera una pantalla como la siguiente deberemos de esperar a que el plugin de Elementor, termine de cargar.
Al finalizar podremos ver nuestra página que he realizado previamente con Elementor.
En esta página deberemos de dar click en alguna sección para poder añadir el divisor de olas.
Una vez dado click sobre alguna sección deberemos de dar click en la pestaña de apariencia de esa sección:
Deberemos de ir a el apartado de Forma del Divisor.
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.
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.
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.
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.
¿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:
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?
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.
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.
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.
Después basta con pegar el código CSS que esta en este post y dar click en el boton de azul de Publicar.
¿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!