¿Quiere aprender a agregar un efecto de desplazamiento a los elementos en el widget de publicaciones?Elementor?
Si eres un usuario de WordPress usando Elementor para crear tu Sitio web, debe estar familiarizado con la función de efecto de desplazamiento. Puede encontrar esta función principalmente en la configuración de cada widget Elementor.
El efecto de desplazamiento puede hacer que sus elementos sean atractivos, por lo que es una forma efectiva de mejorar la experiencia del usuario en su sitio web.
Bueno, hablando del efecto de desplazamiento, este artículo le mostrará cómo agregar este último a elementos de publicación individuales en el widget. Elementor Publicaciones que utilizan el CSS personalizado de Elementor, específicamente, el efecto de desplazamiento y acercamiento.
Hay dos razones por las que estamos haciendo este tutorial para ti:
- De forma predeterminada, puede agregar un efecto de desplazamiento a una publicación desde el widget de publicaciones de Elementor. Pero, el efecto de desplazamiento será muy básico/estándar.
- De forma predeterminada, Elementor le permite agregar un efecto de cremallera al widget de Publicaciones (pestaña Avanzado -> transformador -> échelle). Pero el efecto de desplazamiento afectará a todos los elementos del widget de publicaciones (no individuales).
Pasos para agregar efecto de desplazamiento a publicaciones individuales desde el widget de publicaciones de Elementor
Antes de comenzar el tutorial, queremos informarle que este tutorial utiliza la función CSS personalizada de Elementor. Esta función solo está disponible en Elementor Pro; asegúrese de haber actualizado su versión.
Paso 1: Agregar widget de publicaciones
Vaya a su editor de Elementor y comenzaremos todo desde cero, así que cree una sección con una sola columna.
Lea también: Cómo integrar MailChimp con Elementor
A continuación, seleccione el widget Publicaciones del panel de widgets, luego arrástrelo y suéltelo en el área de edición. Una vez que haya agregado el widget Publicaciones, puede editar y diseñar el widget según sus preferencias.
Observación: Asegúrese de haber publicado ya artículos en su sitio web.
Paso 2: Agregue el fragmento de CSS
Una vez que haya editado y aplicado estilo al widget Publicaciones, a continuación agregaremos un efecto de desplazamiento dentro de una publicación individual agregando el fragmento CSS simple. En la configuración del widget de Publicaciones, vaya a la pestaña Avanzado -> CSS personalizado. Copie el fragmento de CSS a continuación y luego péguelo en el campo CSS personalizado.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
El código anterior seleccionará el elemento de publicación individual en el widget de Publicaciones usando el selector .élémentor-post y aplicar la transformación CSS.
Si está satisfecho con el efecto de desplazamiento que se utilizó, puede mantenerlo así y guardar su proyecto si lo desea. Pero, si desea personalizar la velocidad de transición y el valor de la escala de transformación, puede cambiar el valor en el fragmento de CSS.
Observación: Transformar/acercar es un efecto común y popular que se usa en los sitios web. Si quieres saber más sobre otros métodos para transformar los efectos de desplazamiento, puedes visitar este página.
Descubre también: todos los selectores de widgets de Elementor en el siguiente artículo
¡Consigue Elementor Pro ahora!
Conclusión
Este artículo le muestra lo fácil que es agregar un efecto de desplazamiento a elementos de publicaciones individuales en el widget de publicaciones de Elementor usando CSS personalizado.
La técnica que usamos para este efecto es (zoom-in) que involucra 2D y algunos elementos pseudo transformados. Personalice y juegue con todos los estilos de efectos de desplazamiento hasta que encuentre el mejor efecto de desplazamiento para su sitio web.
¡Listo! Acabamos de presentarle las mejores herramientas para Marketing por correo electrónico para Elementor. Si tiene alguna duda sobre cómo usarlos, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
