¿Quiere agregar un efecto de punto a una columna en Elementor?

Elementor es perfecto para crear un sitio web, en el que el énfasis está en el diseño. En Elementor, puede agregar efectos de animación para que su sitio web sea más interactivo.

Uno de los efectos de animación que puede agregar a una página impulsada por Elementor es un efecto de punto. Puede agregar un efecto de punto a una sección, columna o widget.

Este artículo le mostrará cómo agregar una puntuación a una columna en Elementor. Por cierto, si es nuevo en Elementor, puede consultar nuestro artículo anterior para averiguarlo. cómo instalar Elementor.

Cómo agregar un efecto de punto a una columna en Elementor

En Elementor, la columna es un elemento obligatorio. Aquí es donde puede agregar widgets, los elementos de diseño reales para crear su página. Al igual que con otros tipos de elementos en Elementor, también puede personalizar una columna para que sea elegante.

Puede agregar fondo de color sólido, fondo de imagen, sombra, para el efecto de desplazamiento. El efecto de desplazamiento incorporado de Elementor le permite usar un fondo diferente, un borde diferente y una sombra paralela diferente al señalar.

Para comenzar a agregar un efecto de punto a una columna en Elementor, primero haga clic en el controlador de la columna en la que desea agregar el efecto de punto para cambiar al panel de configuración de la columna.

agregar un efecto de punto a una columna en Elementor

En el panel de configuración (panel en el lado izquierdo), vaya a la pestaña Estilo y abre el bloque Fondo. En este último, puede abrir la pestaña AU INFORMACIÓN GENERAL para establecer un fondo diferente en el estado de apuntado.

Puede utilizar un fondo de color sólido, un fondo de color degradado o un fondo de imagen. También puede establecer la duración de la transición (la transición del estado normal al estado de apuntado) en la opción Duración de la transición.

Para establecer un borde diferente y una sombra de cuadro diferente en el estado de apuntado, puede abrir el bloque Frontera. Click en la pestaña INFORMACIÓN GENERAL  de ese bloque y establezca el estilo del borde, el tamaño del borde, el color del borde, el radio del borde y la sombra del área para el estado de apuntado.

Agregar un efecto de desplazamiento avanzado a una columna en Elementor

Desemejante divi ConstructorElementor no usa la transformación CSS para su efecto de desplazamiento. Por lo tanto, solo puede agregar efectos de desplazamiento básicos. Pero al igual que Elementor (la versión pro), le permite agregar CSS personalizado, puede usar CSS personalizado para agregar transformación CSS para agregar un efecto de desplazamiento avanzado.

Los efectos de rollover se crean utilizando la transformación CSS. Para agregar una transformación CSS a una columna, primero vaya a la pestaña Avanzado y abre el bloque CSS personalizado (asegúrese de que el panel de configuración esté en modo de panel de configuración de columna). Agregue el siguiente código CSS.

agregar un efecto de punto a una columna en Elementor

El código :

selector: hover {transición: todos .2s entrada-salida fácil; transformar: escala (1.1); cursor: punto; índice z: 1; }

En la transformación CSS en sí, hay 5 estilos de transformación que puede usar:

  • Matrix
  • Traducir
  • Escala
  • Girar
  • oblicuidad

El código CSS anterior usa la transformación de escala. Puede reemplazarlo con cualquier estilo de transformación que desee.

leer esta página para obtener más información sobre la transformación CSS.

Otros complementos premium adicionales de WordPress 

Descubre también otros plugins de WordPress premium que optimizan el rendimiento de tu blog o sitio web de WordPress.

1. Reserva visual del restaurante

Crear el sistema Reservas en línea del sitio web de su restaurante o cafetería, gracias a este excelente complemento premium de WordPress. Con este último, tendrá la posibilidad de crear mesas y asientos por sí mismo en la cuadrícula que ofrece este complemento y dejar que sus clientes reserven los gratuitos, esta es la característica principal de este complemento y lo que lo diferencia de los otros complementos en esta lista.Reserva de restaurante visual

Con Arrastrar y soltar, puede arrastrar diferentes tipos de mesas a la cuadrícula de su restaurante y calcular el número máximo de asientos para cada mesa, así como el número de mesas. Los visitantes de su restaurante pueden elegir la forma de la mesa que prefieren y la ubicación de la mesa en relación con las otras mesas en la cuadrícula.

Aqui para ti Complementos de 5 WordPress para optimizar descripciones de categorías y etiquetas

Los clientes de su restaurante estarán encantados de hacer esta elección directamente en Internet en lugar de viajar. Con este complemento podrán hacerse una idea de lo que les espera hoy.

Ofrece entre otras características: soporte para arrastrar y soltar, 3 tipos de sistema de reservas, un manejo bastante intuitivo, personalización completa de su diseño y mucho más.

Descargar | Demo | alojamiento web

2. MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises locales, listas de proveedores, etc. Directorio de wordpress del plugin de Mapsvg

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

Lea también nuestro artículo sobre Cómo mantener a tus visitantes más tiempo en tu sitio web

Descargar| Demo | alojamiento web

3. Revolución deslizador

Slider Revolution es un complemento de WordPress carrusel innovador y receptivo que muestra maravillosamente su contenido. Ya sea un slider o un carrusel, su editor visual de arrastrar y soltar te permitirá contar, por ejemplo, la historia de tu empresa, destacar tus mejores productos, tus mejores artículos y mucho más.

plugin de wordpress adaptable de slider revolution

Descubre también nuestro Complementos de 10 WordPress para crear fácilmente una ventana emergente
Sus características principales son: una excelente interfaz de creación de diapositivas, diseño de diapositivas de arrastrar y soltar, diseño totalmente receptivo, gestión perfecta de contenido multimedia, rendimiento optimizado, Soporte multilingüe, excelente atención al cliente, soporte de pantalla táctil, actualizaciones gratuitas y periódicas, documentación y videos tutoriales disponibles y mucho más.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

Conclusión

Listo ! Eso es todo por nuestro artículo que le muestra cómo agregar un efecto de punto a una columna en Elementor. Si usted tiene comentarios o sugerencias, no dude en hacérnoslo saber en la sección reservada.

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

...