En el tutorial de hoy os vamos a explicar cómo crear 5 efectos visuales para Elementor, esperamos que os gusten.
Índice de contenidos
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.
.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.
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.
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
.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.
Escribe tu título
Introduce tu descripción- Elemento de lista nº1
- Elemento de lista nº2
- Elemento de lista nº3
Escribe tu título
Introduce tu descripción- 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
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
.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.
.scroll img{ width:100%; height:780px; object-fit:cover; object-position: top center; transition: object-position 1s; } .scroll:hover img{ object-position: bottom center; }
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.
Mostrar elementos ocultos al posicionarnos en una columna
.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; }
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?
Cómo crear formularios de registro con Elementor y Ultimate addons
Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Algo que se hecha en falta en Elementor es la posibilidad de crear formularios de registro. En esta entrada os explicaremos cómo crear formularios de registro con Elementor y
Añadir degradados y imágenes en los textos con Elementor
Aprende a dar un toque personal y exclusivo a tus diseños. En este post te explicamos cómo añadir degradados y imágenes en los textos con Elementor. Índice de contenidos Arrancaremos este tutorial explicando cómo personalizar tus textos con la versión Pro de Elementor. Si no
Cómo personalizar la herramienta de buscar de la plantilla Astra
Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Pese a la cantidad de virtudes y opciones de personalización que tiene la plantilla Astra Pro, algo que no nos permite realizar desde sus ajustes es personalizar la herramienta