Con ElementsKit, puede presentar su sitio web a los miembros de su equipo con un elegante carrusel deslizante. Con el widget Elementor Team Carousel Slider, puede mostrar las tarjetas de los miembros del equipo con fotos, nombres, designaciones, descripciones, vincular perfiles sociales y más.

Lea esta documentación para aprender a utilizar el widget Elementor Team Carousel Slider de ElementsKit.

Complementos necesarios: #

• Elementor: Descargar complemento.
• ElementosKit Lite: Descargar complemento.
• ElementosKit Pro: Obtener el complemento.

Paso 1: habilite el widget deslizante del carrusel de equipo #

En primer lugar, debe habilitar el widget desde el panel de WordPress. Para habilitar el widget deslizante Team Carousel:

1. Navegar a ElementosKit > Widgets.
2. Encuentra el Control deslizante de equipo de la lista y permitir el widget.
3. Clickea en el GUARDAR CAMBIOS.

Paso 2: arrastra y suelta el widget #

Después de eso, arrastre y suelte el widget deslizante del carrusel del equipo de ElementsKit en el editor de Elementor.

Paso 3: configurar el widget de carrusel del equipo de Elementor #

La pestaña Contenido le permite configurar el contenido de los miembros del equipo y los ajustes del control deslizante del carrusel del equipo.

3.1 Contenido del equipo #

El widget deslizante de equipo tiene las siguientes características:

1. Estilo: El widget viene con 12 estilos diferentes, incluidos predeterminado, superpuesto, flotante en redes sociales, superpuesto con detalles, etc. 

Nota: Los diferentes estilos vienen con opciones y configuraciones individuales. Las opciones se analizan en la última parte de esta documentación.

2. Habilitar ventana emergente: Los detalles del miembro del equipo aparecerán en una ventana emergente cuando se haga clic en el nombre.
3. Mostrar perfiles sociales: Vincular el perfil de las redes sociales en los detalles de los miembros del equipo.
4. Descripción de la pantalla: Para mostrar una breve descripción del miembro del equipo.
5. Botón de visualización: Para agregar un botón que pueda vincular al perfil o cartera del miembro.

Detalles de los miembros del equipo #

Puede agregar miembros del equipo al control deslizante haciendo clic en el AÑADIR ARTÍCULO y elimine un miembro existente con el ✖ botón. Además, puede copiar los datos del miembro del equipo.

En Contenido del miembro:

1. Elija la imagen del miembro: Añade la foto del miembro del equipo.
2. Nombre de miembro: Ingrese el nombre del miembro del equipo.
3. Puesto de miembro: Mencione la designación del miembro del equipo.
4. Acerca del miembro: Agregue una breve descripción del miembro del equipo.

Contenido del botón:

1. Icono: Decida si desea mostrar el ícono del botón y elija un ícono.
2. Posición del icono: Establezca la posición del icono antes o después del texto.
3. Texto: Introduzca el texto de un botón.
4. URL del enlace: Agregue una URL para vincular el botón con una página.

Contenido emergente:

En el contenido emergente, puede agregar el Número de teléfono y Correo electrónico del miembro del equipo.

Bajo el Contenido Social:

Puede vincular hasta 5 cuentas de redes sociales. Para cada perfil social, puedes agregar un URL del perfily utilizar individualmente Iconos para cada red social.

3.2 Configuración del control deslizante #

Las siguientes opciones están disponibles en la Configuración del control deslizante del widget Elementor Team Carousel:

1. Espaciado: Ajusta el espacio entre cada diapositiva.
2. Diapositivas para mostrar: Establezca el número de diapositivas que se mostrarán en una única ventana gráfica.
3. Diapositivas para desplazarse: Decida cuántas diapositivas desea desplazar a la vez.
4. Auto-reproducción: Habilite la reproducción automática para desplazar las diapositivas automáticamente.
5. Velocidad: Cuando la reproducción automática está habilitada, configure la velocidad de desplazamiento en milisegundos (ms).
6. Pausa al pasar el mouse: La reproducción automática se detendrá cuando el usuario pase el cursor sobre el control deslizante.

7. Mostrar flecha: Para habilitar la navegación con flechas para el control deslizante.
8. Mostrar flecha al pasar el mouse: Las flechas sólo son visibles cuando se pasa el cursor.
9. Tipo de flecha: Elija el tipo de flecha entre las opciones dadas: Flecha, Texto y Texto con flecha.
10. Icono de flecha izquierda: Puede elegir un ícono para la flecha izquierda de la biblioteca de íconos.
11. Icono de flecha derecha: Puede elegir un ícono para la flecha izquierda de la biblioteca de íconos.
12. Mostrar puntos: Para habilitar la navegación de puntos para el control deslizante.

• Velocidad y Pausa al pasar el cursor Las opciones solo aparecen cuando la reproducción automática está habilitada.
• Mostrar Arros al pasar el mouse, Tipo de flecha, Icono de flecha izquierda, y Icono de flecha derecha Las opciones solo aparecen cuando “Mostrar flecha" está habilitado.

Paso 4: Personaliza los estilos del widget del carrusel del equipo de Elementor #

Puede personalizar cada aspecto del control deslizante del carrusel del equipo y crear un estilo que combine con su marca.

4.1 Contenido #

Para personalizar el área de contenido del control deslizante:

• Elegir el Tipo de fondo y Color de fondo para el estado "Normal" y el estado "Hover".
• Seleccione un Animación al pasar el cursor de las opciones dadas.
• Selecciona el Alineación para el contenido a la izquierda, derecha o centro.
• Ajustar el Relleno, Relleno de contenido, y Radio del borde para el área de contenido.

4.2 Imagen #

Para personalizar los estilos de imagen en el control deslizante del carrusel del equipo de Elementor,

1. Selecciona el Tamaño de la imagen para mostrar.
2. Ajustar el Alto y ancho de la imagen.
3. Establecer un Sombra de la caja para la imagen en exhibición.
4. Establezca una sombra de cuadro para la imagen en la ventana emergente.
5. Ajustar Radio del borde, Relleno, y Margen para la imagen del miembro del equipo.
6. Cambiar el Tipo de fondo y Color de fondo.

4.3 Nombre #

Puede cambiar los estilos de los nombres de los miembros del equipo.

1. Selecciona el Tipografía del nombre.
2. Elegir Colores para el estado “Normal” y “Hover”.
3. Ajustar el Margen superior y margen inferior para el nombre del miembro.

4.4 Designación #

Puede cambiar los estilos de designación de miembros del equipo.

1. Selecciona el Tipografía de la designación.
2. Elegir Colores para el estado “Normal” y “Hover”.
3. Ajustar el Margen inferior.

4.5 Descripción #

Puede personalizar los estilos de las descripciones de los miembros del equipo.

1. Selecciona el Tipografía de la descripción.
2. Elegir Colores para el estado “Normal” y “Hover”.
3. Ajustar el Margen alrededor de la descripción.

4.6 Botón #

Para personalizar los estilos de los botones,

1. Selecciona el Tipografía del texto del botón.
2. Elige el botón Color de texto.
3. Seleccionar Tipo de fondo y Color de fondo.
4. Elegir el Tipo de borde para el botón.
5. Selecciona el Radio de borde, relleno, y Margen para el botón.

Puede configurar colores de texto, colores de fondo y colores de borde individuales para el estado "Normal" y el estado "Hover".

4.7 Icono del botón #

Si usa el ícono de un botón, puede personalizar sus estilos,

1. Elegir el Color para el icono del botón.
2. Seleccione un Color de libración para el icono del botón.
3. Ajustar el icono Tamaño.
4. Colocar Margen alrededor del icono del botón.

4.8 Perfil Socials #

Puede personalizar los íconos del perfil social con el widget de carrusel del equipo de Elementor.

1. Cambiar el Alineación de los íconos sociales.
2. Puedes seleccionar el Mostrar Diseño de iconos de perfil social de las opciones dadas: Bloque en línea y Bloquear.
3. Ajustar el general Tamaño de ícono.
4. Habilitar el Usar alto ancho función para ajustar el ancho, el alto y el alto de la línea individualmente.
5. Puedes elegir el icono Color, Color de fondo, y Tipo de borde.
6. Selecciona el Radio del borde, Relleno, y Margen para íconos de perfil social.

4.9 Controles modales #

Cuando habilita la ventana emergente, esta opción de controles modales está disponible. Los siguientes controles modales están disponibles con el widget,

Cubrir:

1. Elige la superposición Tipo de fondo.
2. Según el tipo de fondo, elija el Fondo Color para superposición.

Modal:

1. Elige el modal Tipo de fondo.
2. Según el tipo de fondo, elija el Fondo Color para el modal.

Nombre:

1. Elige un color para miembro Nombre.
2. Selecciona el Tipografía para el texto del nombre.
3. Ajustar el Margen inferior por el nombre.

Designación:

1. Elija un color para el miembro Designación.
2. Selecciona el Tipografía para el texto de designación.
3. Ajustar el Margen inferior para la designación.

Descripción:

1. Elige un color para Descripción del miembro del equipo.
2. Selecciona el Tipografía para el texto de descripción.
3. Ajustar el Margen inferior para la descripción.

Teléfono y correo electrónico:

1. Selecciona el Tipografía para el texto Teléfono y Correo electrónico.
2. Elige un texto Color para el teléfono y el correo electrónico.
3. Agrega un Color de libración para el teléfono y el correo electrónico.

4.10 Icono Cerrar #

Para la ventana emergente, puede personalizar el ícono Cerrar.

1. Seleccione un Cerrar icono de la biblioteca de iconos de Elementor.
2. Selecciona el Cerrar alineación de iconos a derecha o izquierda.
3. Tu puedes elegir Color del icono, Color de fondo del icono, y Tipo de borde.
4. Además, establezca el Radio del borde y Relleno para el ícono de cerrar.

4.11 Flechas #

Si habilita la navegación con flechas, puede personalizar sus estilos.

1. Ajustar el Tamaño de las flechas en el carrusel.
2. Puedes configurar el Posición de la flecha. La posición de la flecha izquierda y la posición de la flecha derecha se pueden ajustar individualmente.

3. Seleccione un Color de flecha.
4. Elige una flecha Color de fondo.
5. Selecciona el Tipo de borde para las flechas.
6. Selecciona el Radio del borde para las flechas.
7. Ajustar el Relleno.

4.12 Puntos #

Si los puntos están habilitados, puede personalizar los estilos de los puntos.

1. Ajustar el Espacio entre los puntos.
2. Ajustar los puntos Espaciado de arriba a abajo.
3. Puedes cambiar el Opacidad de los puntos.
4. Selecciona el Ancho de los puntos.
5. Selecciona el Altura de los puntos.
6. Agrega un Radio del borde para los puntos.
7. Seleccione un Tipo de fondo y color de fondo.

Activo:

Puede personalizar el punto activo por separado.

1. Elegir Tipo de fondo y Color para el punto activo.
2. Seleccione un punto activo Color.
3. Ajustar Escala (tamaño) de los puntos activos.
4. Ajustar el Ancho de los puntos activos.
5. Ajustar el Altura de los puntos activos.
6. Selecciona el Tipo de borde.

Finalmente, el carrusel del equipo está listo para ser exhibido. El widget Elementor Team Carousel Slider viene con ElementKits Pro. Obtenga el complemento para diseñar sitios web sofisticados con funciones avanzadas como Elementor Team Carousel Slider y más.