Creación y uso de gadgets de carrusel

Carousel es la última adición a los widgets de Elementor Pro, que le permite presentar múltiples piezas de contenido como una presentación de diapositivas.

1. Cambiar la configuración de Elementor

Es necesario ajustar la siguiente configuración de Elementor antes de utilizar el gadget Carrusel.

Inicie sesión en el panel de control de WordPress y vaya a la secciónElementor>establecerbusque la página "caracterización. Esto se muestra en la siguiente figura:

(Insertar captura de pantalla de la página de configuración correspondiente)

Una vez que acceda a la página Características, deberá activar las siguientes características:

1. Contenedor de rejilla

2. elemento anidado

Activar los contenedores de rejilla y los elementos anidados permite utilizar widgets de carrusel en Elementor.

2.Añadir widget de carrusel

Una vez en la página de edición de Elementor, arrastra y suelta el gadget Carousel en el campo de edición.

Después de arrastrar y soltar, verá la siguiente pantalla.

3. Edición de contenidos en Carrusel

Puede arrastrar y soltar cualquier widget en cada celda del Carrusel. Por ejemplo, si arrastra y suelta una imagen y un pie de foto en una celda, verá la siguiente pantalla:

Arrastra y suelta el widget Vídeo en la celda central y el widget Editor de texto en la celda de la derecha.

Lo anterior da una idea general de la forma más básica de crear un gadget Carrusel. A continuación, se utilizarán las etiquetas de contenido y estilo del gadget Carrusel.

4. Etiquetas de contenido de Carousel

La pestaña Contenido del gadget Carrusel contiene principalmente los siguientes ajustes.

Opciones de configuración del carrusel:

1. DiapositivasConfigure el contenido y el estilo de cada diapositiva.
2. AjustesAjuste la configuración global del carrusel, como la reproducción automática y la velocidad.
3. Navegación: Establece el estilo y la posición de los botones de navegación.
4. PaginaciónConfigura el estilo y la posición del indicador de paginación.

4.1 Diapositivas

Diapositivas es un elemento de configuración que se utiliza para añadir celdas al gadget Carrusel.

Carrusel fija el contenido:

1. Carrusel ArtículoAñadir, copiar o eliminar celdas y establecer un título para cada celda.
2. Diapositivas en exposiciónEspecifica el número de celdas que se muestran en el campo de edición. Seleccione 3 para mostrar 3 celdas; seleccione 5 para mostrar 5 celdas.
3. Diapositivas en Scroll: Especifica el número de celdas que se desplazan a la vez cuando se desplaza el Carrusel. Puede establecerse un valor entre 1 y 8. Cuanto mayor sea el valor, más celdas se desplazarán a la vez.
4. Igualdad de alturaSeleccione si desea activar o no la opción Uniformidad de altura de celda. Cuando está activada, la altura de todas las celdas se unifica automáticamente.

4.2 Ajustes

Ajustes es la configuración utilizada para ajustar el efecto de desplazamiento de la celda Carrusel.

Configuración del carrusel Contenido

1. Reproducción automáticaActiva o desactiva la reproducción automática. Si está activada, Carousel reproducirá el contenido automáticamente.
2. Velocidad de desplazamiento (ms)Ajuste la velocidad de desplazamiento en milisegundos. El valor por defecto es 5000 milisegundos (5 segundos), cuanto menor sea el valor, más rápida será la velocidad de desplazamiento.
3. Pausa al pasar el ratón por encimaPausa al pasar el ratón por encima. Si está activada, el desplazamiento se detendrá cuando el ratón pase por encima del contenido.
4. Pausa en la interacciónPausa de interacción. Cuando está activada, el desplazamiento se detiene mientras el usuario manipula el contenido.
5. Desplazamiento infinitoDesplazamiento infinito. Cuando está activado, Carousel desplazará el contenido en un bucle infinito.
6. Duración de la transición (ms)Duración: fija la duración del efecto de desplazamiento en milisegundos. El valor por defecto es de 500 milisegundos (0,5 segundos), cuanto mayor sea el valor, más lento será el efecto de desplazamiento.
7. Dirección: Seleccione la dirección de desplazamiento, izquierda o derecha.
8. Lados desplazados: Establece el espacio seguro en ambos extremos del Carrusel, con opciones para ambos (both), izquierda o derecha.
9. Anchura de desplazamiento: Ajusta la anchura del espacio seguro; cuanto mayor sea el valor, más amplia será la zona segura.

Si no comprende la zona de seguridad de Offset Sides, puede consultar el siguiente diagrama.

4.3 Navegación

La navegación se utiliza para ajustar la configuración de los iconos de flecha de avance o retroceso del carrusel.

Configuración de la flecha de navegación

Este elemento de configuración contiene tres elementos principales:

1. FlechasSeleccione si desea activar las flechas de navegación. Cuando están activadas, los usuarios pueden hacer clic en las flechas para cambiar de contenido.
2. Flecha anterior responder cantando Siguiente FlechaAjuste el estilo y la posición de las flechas de avance y retroceso. El contenido de estos dos ajustes es el mismo, como se describe a continuación:
   • Icono: Seleccione o sustituya el icono de flecha. Puede elegir que no se muestre, cargar un icono personalizado o seleccionar uno de los iconos predefinidos.
   • Orientación: Especifica la alineación de la flecha en el Carrusel, horizontal o vertical.
   • Posición: Establece la posición exacta de la flecha en el carrusel, que puede ajustarse horizontal o verticalmente.

4.4 Paginación

La paginación es un ajuste que especifica cómo se muestra el asistente de la celda inferior. Puede elegir entre puntos, números y barras de progreso.

5. Etiquetas de estilo carrusel

La pestaña Estilo del gadget Carrusel contiene los tres ajustes principales siguientes.

1. Diapositivas
2. Navegación
3. Paginación

Configuración del estilo de diapositiva

DiapositivasEstilos : La configuración de diapositivas en la pestaña Estilos se utiliza para ajustar el estilo de apariencia de las celdas del Carrusel.

Establece el contenido:

1. Espacio entre diapositivas: Establece el espaciado entre celdas, el rango es de 0-400. Cuanto mayor sea el valor, mayor será el espaciado.
2. Tipo de fondo: Seleccione el tipo de fondo, clásico o degradado.
3. Color de fondo: Ajusta el color de fondo, puedes seleccionar o cambiar cualquier color.
4. Tipo de borde: Seleccione el tipo de borde para la celda.
5. Anchura del borde: Establece el ancho del borde de la celda, cuanto mayor sea el valor, más ancho será el borde.
6. Color del borde: Ajusta el color del borde, puedes elegir o cambiar cualquier color.
7. Radio del borde: Establece el radio de las esquinas de la celda, cuanto mayor sea el valor, mayor será el radio, más redondeadas serán las esquinas.
8. Acolchado: Establece el espaciado entre el borde de la celda y el contenido, cuanto mayor sea el valor, mayor será el espaciado.

Resumen:

En este tutorial se explica cómoElementor ProCree y utilice las últimas novedades del widget Carrusel. Cubre cómo activar la función Mega Menú, ajustar la configuración del Carrusel, añadir y editar celdas, establecer la reproducción automática y la velocidad de desplazamiento, configurar las flechas de navegación y los indicadores de paginación, y ajustar el estilo de apariencia de las celdas del Carrusel. Con esta guía, podrás comprender a la perfección cómo utilizar el widget Carrusel para mejorar la interactividad y el efecto visual de tu sitio web.