Deja caer el Widget de carrusel de imágenes en la página, elija sus imágenes de la biblioteca multimedia, configure diapositivas por vista para cada dispositivo y active la reproducción automática. Cuatro pasos, unos dos minutos, y no se necesita licencia.
Esa es la versión corta. El resto cubre las configuraciones que separan un carrusel que funciona de uno que parece ligeramente incorrecto en los teléfonos, además del diseño del flujo de cobertura, la caja de luz y los dos errores de imagen que hacen que un carrusel que de otro modo sería fino sea lento. ¿No estás seguro de que un carrusel de imágenes tenga la forma correcta? El línea completa de widgets de carrusel compara cada tipo en un solo lugar y el desglose carrusel versus control deslizante resuelve el nombre.
Lo que necesitas
Elementor gratis y Master Addons gratis. El carrusel de imágenes propio de Elementor existe pero no tiene subtítulos de diapositivas y un control de respuesta limitado, por lo que este tutorial utiliza Carrusel de imágenes de complementos maestros, que también es gratuito y agrega subtítulos, una caja de luz y un diseño de flujo de cobertura.
Paso 1: agrega el widget
Abra la página en Elementor y busque en el panel de widgets “carrusel de imágenes”. Arrastrarlo a un contenedor.
Se representa con imágenes de marcador de posición para que puedas ver la forma antes de confirmar cualquier contenido. Déjalos por ahora. Es más fácil configurar el diseño con marcadores de posición consistentes que con sus fotos reales, que son todas de diferentes tamaños.
Paso 2: agrega tus imágenes
Haga clic en el campo de la galería y elija de la biblioteca multimedia o cárguela. El pedido importa y el arrastre para volver a ordenar funciona, así que coloque su imagen más fuerte primero, porque en el móvil puede ser la única que alguien ve.
En la configuración de contenido encontrará el tamaño de la imagen, la fuente del título y el comportamiento del enlace.
El tamaño de la imagen es el escenario que la gente deja completo y arrepentido. Completo significa la carga original: una exportación de cámara de 4000px servida en una diapositiva de 400px. WordPress ya generó versiones más pequeñas; elegir medium_large o large y reducirás el peso del carrusel en la mayor parte sin ninguna diferencia visible.
Subtítulos extraiga del campo Subtítulos o descripciones de la biblioteca multimedia, de modo que si las diapositivas necesitan texto, escríbalo allí en lugar de buscar un cuadro de texto por diapositiva en el widget.
Paso 3: Navegación
Flechas, puntos, fracciones o una barra de desplazamiento. Elija según cuántas diapositivas tenga:
- Sub 8 diapositivas: puntos. La gente puede ver todo el conjunto de un vistazo y saltar.
- 8 până la 20: sólo flechas. Veinte puntos es una mancha, no un control.
- Peste 20: flechas más fracción (“04 / 32”). El número es lo único que le dice a alguien dónde está.
En dispositivos móviles, verifique el tamaño de la flecha. El valor predeterminado del escritorio suele ser un objetivo de 30 px y el mínimo accesible para un toque es 44 px. Golpéelo por completo en el punto de interrupción del móvil o suelte las flechas y confíe en deslizar.
Paso 4: Comportamiento del carrusel
Este es el panel que decide si el carrusel se siente bien.
Diapositivas por vista: configúrelo tres veces. Haga clic en los íconos del dispositivo en la parte superior de la configuración y brinde su propio valor al escritorio, la tableta y el móvil. Cuatro, dos, uno es el valor predeterminado seguro. Este único paso es la diferencia entre un carrusel que funciona en teléfonos y uno que muestra cuatro miniaturas aplastadas.
Diapositivas para desplazarse. Configure en 1 para una sensación de navegación continua o haga coincidir diapositivas por vista para paginar estilo página. La coincidencia es mejor cuando las diapositivas forman grupos; 1 es mejor para un conjunto largo e indiferenciado.
Reproducción automática. Enciéndalo para galerías decorativas. Apágalo si se puede hacer clic en las diapositivas, porque alguien buscará una imagen y hará clic en la que la reemplazó. Pause-on-hover cubre el escritorio, pero no hay ningún desplazamiento al tocarlo.
El bucle infinito necesita suficientes diapositivas. Swiper clona diapositivas para falsificar el envoltorio y necesita al menos el doble de diapositivas por vista. Cuatro imágenes a tres por vista saltarán visiblemente. Agregue imágenes o apague el bucle.
Velocidad. 300 a 500 ms. Por debajo de 200 parece un corte más que una transición; Más de 800 personas empiezan a hacer clic dos veces.
El diseño del flujo de cobertura
Cambie el diseño de Standard a Coverflow y las correderas laterales girarán en 3D, se atenuarán y retrocederán, dejando la corredera central como la única legible.
Se adapta a portafolios y estudios de casos, cualquier cosa en la que una imagen a la vez sea el punto. Está mal para cualquier cosa que la gente necesite comparar, porque todo el diseño existe para evitar que mires a los vecinos.
Dos configuraciones para girar a la derecha: girar entre 30 y 40 grados (más allá de 50 y las diapositivas laterales se convierten en astillas ilegibles) y las diapositivas centradas, o la imagen activa queda al ras a la izquierda y la composición colapsa.
Coverflow es uno de los cuatro estilos basados en la profundidad. Flip, arco y órbita son los otros tres, y el Guía del carrusel Elementor 3D cubre para qué sirve cada uno.
Estilismo de las diapositivas
La pestaña Estilo maneja el espacio entre diapositivas, radio de borde, sombras y estados de desplazamiento.
El escenario que vale la pena pensar dos veces es brecha. El espacio cero hace que el carrusel se lea como una tira de imagen continua, lo cual es correcto para un panorama y incorrecto para elementos distintos. 16 a 24px es el rango donde las diapositivas se leen como tarjetas separadas sin que la fila parezca escasa.
Los efectos de desplazamiento (escala, superposición, revelación de subtítulos) se aplican a todo el conjunto, no por diapositiva. Mantenga la escala por debajo de 1,05. Una diapositiva que crece un 15% al desplazarse se desplaza hacia sus vecinos y parece un error de diseño.
Caja de luz y subtítulos
Encienda la caja de luz y al hacer clic en una diapositiva se abre la imagen de tamaño completo sobre la página, con sus propios controles anterior y siguiente atravesando todo el carrusel.
Esta es la razón para utilizar un carrusel en lugar de una cuadrícula para la fotografía. El carrusel es el índice; la caja de luz es el espectador. Los títulos y subtítulos se trasladan a la caja de luz, por lo que el título se escribe una vez y funciona en ambos lugares. Si desea que el índice sea visible en la página como una tira de miniaturas en lugar de ocultarse detrás de un clic, ese es el Control deslizante de galería widget en su lugar, que necesita Pro.
Una precaución: la caja de luz sirve para la imagen de tamaño completo, no para la miniatura. Si configura el tamaño de la imagen en medium_large para el carrusel y sus originales son archivos de cámara de 8MB, la caja de luz seguirá buscando la versión de 8MB. Comprima los originales al cargarlos, no solo el tamaño de la pantalla.
Si desea navegación en miniatura
El carrusel de imágenes es de una sola fila. No hay una tira de miniaturas que genere una vista previa grande. Si lo que buscas es ese diseño de dos partes, importa el Galería de platos de vitrina en cambio, uno de los diseños gratuitos del colección de plantillas deslizantes: una sola placa debajo de una tira de miniaturas, con un panel de subtítulos que incluye una tabla de datos de marco editable para lugar, hora, lente, apertura, obturador e ISO. Fue construido para fotografía. La misma forma de vista previa más miniaturas es lo que la mayoría de la gente quiere decir cuando pide un carrusel de vídeo, y el guía deslizante de video carrusel y galería cubre esa versión.
Para importarlo: Master Addons → Widget Builder → Import Widget, arrastre el JSON hacia adentro y aparecerá en Elementor en Favoritos. Se ejecuta en el complemento gratuito, no se necesita licencia Pro. La misma colección tiene el Control deslizante Plinth Hero, un control deslizante de héroe de sangrado completo con enlaces por diapositiva, que también se puede importar gratis. Veinte diseños con nombre en total, ocho de ellos gratis.
Estilo de flechas
Tamaño, color, fondo, radio del borde y posición: dentro del carrusel, fuera de él o superpuestos a los bordes.
Las flechas colocadas fuera del carrusel necesitan espacio horizontal, y en un contenedor de ancho completo no hay ninguno. Se engancharán. Mantenga el contenedor más estrecho que la ventana gráfica o coloque las flechas en el interior.
El resultado
Antes de terminar la llamada, cargue la página en un teléfono real a través del celular. No es el emulador del dispositivo del navegador, que cambia el tamaño de la ventana gráfica pero mantiene la conexión y la GPU de su escritorio. La mayoría de los problemas del carrusel solo aparecen en hardware real en una red real.
Dos errores que hacen que un carrusel sea lento
Sirviendo imágenes de tamaño completo. Cubierto arriba, y es el grande. Un carrusel de diez toboganes de tamaño completo en un sitio de fotografía puede ser de 20 MB. El mismo carrusel en large está por debajo de 2MB y nadie lo sabe.
Poniéndolo por encima del pliegue con la reproducción automática activada. El carrusel se convierte en su pintura más contenta y la reproducción automática significa que el navegador se anima durante el segundo de carga de página más sensible al rendimiento. Si un carrusel tiene que estar en la parte superior, desactive la reproducción automática y déjelo reposar hasta que la página se haya asentado.
Los logotipos son un trabajo diferente al de las fotografías. Aparecen en formas y colores que no coinciden y necesitan salir antes de sentarse en una fila, que tutorial del carrusel de logotipos pasa.
Preguntas frecuentes
¿elementor tiene un carrusel de imágenes gratuito?
Sí. El complemento gratuito de Elementor incluye un widget Image Carousel con flechas, puntos y reproducción automática. No tiene subtítulos de diapositivas y control limitado por dispositivo. El Master Addons Image Carousel, también gratuito, agrega subtítulos, una caja de luz, diseño de flujo de cobertura y configuraciones de respuesta completa. Cada configuración se enumera en el Imagen Documentación del carrusel.
¿cómo hago que un carrusel de imágenes Elementor responda?
Configure diapositivas por vista por separado en cada punto de interrupción usando los íconos del dispositivo en la parte superior de la configuración en lugar de dejar un valor para todas las pantallas. Cuatro en el escritorio, dos en la tableta y uno en el móvil funcionan para la mayoría de las galerías. Verifique el tamaño de la flecha en el móvil también, porque el valor predeterminado suele estar por debajo del objetivo de toque accesible de 44 px.
¿cómo agrego subtítulos a un carrusel de imágenes de Elementor?
Los subtítulos provienen del campo Subtítulos o descripciones de la biblioteca multimedia, no de un cuadro de texto en el widget. Configure la fuente del título en la configuración de contenido del widget y luego edite el texto de cada imagen en la biblioteca multimedia. Llevan a la caja de luz automáticamente.
¿puedo vincular cada imagen del carrusel a una URL diferente?
Sí. Establezca el comportamiento del enlace en la URL personalizada en la configuración de contenido y cada diapositiva tomará su propio destino del campo de enlace del elemento multimedia. Esto es lo que buscan las personas cuando buscan un carrusel de imágenes con múltiples URL personalizadas.
¿por qué mi carrusel de imágenes salta cuando se repite?
No hay suficientes diapositivas para el bucle. Swiper clona diapositivas para crear el resumen y necesita al menos el doble de cuenta de diapositivas por vista. Cuatro imágenes mostradas, tres a la vez, saltarán en cada ciclo. Agregue más imágenes o desactive el bucle infinito.
¿por qué no se muestra el carrusel de imágenes después de habilitar el almacenamiento en caché?
La combinación o aplazamiento de JavaScript detuvo la carga de Swiper antes de que se ejecutara el código de inicio. Excluir swiper, elementor-frontend y jquery-core desde la optimización de JS en su complemento de caché y en LiteSpeed, agréguelos también al campo de exclusión del Modo invitado. Tutorial completo: Solución de problemas del control deslizante Elementor Swiper.
