efectos visuales para Elementor

Cómo crear 5 efectos visuales para Elementor

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

Cómo crear el efecto post-it en 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:

  1. Ancho del contenido: caja
  2. Alto: Altura mínima, definiendo el alto de la imagen que podremos posteriormente de fondo dentro de la columna.
  3. Posición de la columna: Estirar.
Efecto post-it WordPress

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í.

Añadir imagen post-it con Elementor

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.

texto post-it elementor
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.
Css post-it WordPress

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

Cómo crear máscaras de vídeo con 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.

Mascara de video WordPress

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.

  1. Definir que no se repita la capa de fondo.
  2. Modificar el tamaño para que abarque toda la sección.
  3. 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.

Máscaras de vídeo Elementor

El tercero de los efectos visuales para Elementor que vamos a explicar es

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?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Cómo crear una conexión FTP

Cómo crear una conexión FTP con tu servidor

Índice de contenidos Qué es FTP FTP o protocolo de transferencia de archivos utiliza el acrónimo de las siglas extraídas del inglés File Transfer Protocol. Se trata de un tipo de protocolo de red para la transferir archivos entre sistemas conectados a una red.  Una

Como insertar animaciones en Wordpress

Cómo insertar animaciones en WordPress

Una muy buena opción para dotar a tu web del dinamismo y enriquecer el diseño es mediante la inserción de animaciones. En este post te vamos a explicar cómo insertar animaciones en WordPress con y sin plugins.  Índice de contenidos Qué és lottie files Lottie

Suscríbete a nuestro blog

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í.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

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í.
Ir arriba