20 plantillas deslizantes Elementor, 8 de ellas gratuitas: flujo de cobertura, línea de tiempo, testimonios y más

La mayoría de las plantillas deslizantes de Elementor que encuentra en línea son el mismo control deslizante. Imagen de ancho completo, texto en el medio, flechas a los lados, a continuación.

Estos veinte no son eso. Se doblan las diapositivas alrededor del borde de un círculo. Se vinculan las entradas a una línea de tiempo fechada donde se dibujan los espacios entre años a escala. Se convierte una lista de filas en la navegación misma. Ocho de ellos se importan al complemento gratuito Master Addons sin licencia Pro, que el colapso libre versus profesional se analiza en detalle y cada uno de los veinte tiene una demostración en vivo que puedes abrir, tocar y romper antes de decidir si la quieres.

Abajo: cada diseño, para qué sirve realmente y la nota honesta sobre cuáles son una mala idea para su sitio. Para los carruseles convencionales del complemento junto con estos, comience en centro de widgets del carrusel.

Los 20 diseños de un vistazo

Elija por lo que está construyendo, no por lo que se ve mejor en una captura de pantalla. Un flujo de cobertura que se vea impresionante en una cartera enterrará la cuadrícula de productos.

Lo que necesitas para ejecutarlos

Elementor free es suficiente para la página misma. La división está en los diseños:

• Los diseños 13 a 20 son gratuitos. Importan a través de complementos maestros → Creador de widgets → Importar widget en el complemento gratuito: sin licencia Pro, sin prueba, sin tarjeta. Cada uno aterriza en el panel Elementor en Favoritos con sus propios controles.
• Los diseños 01 a 12 necesitan Master Addons Pro. Están construidos en su totalidad Creador de widgets, que es una función profesional.

Lo que no necesita nada: las demostraciones en vivo. Abra cualquiera de los veinte, cambie el tamaño del navegador, arrastre una diapositiva, observe cómo se comporta en una ventana gráfica con ancho de teléfono. Eso no cuesta nada y es la única forma de juzgar si un estilo de movimiento se adapta a su contenido.

El complemento gratuito también incluye widgets de carrusel convencionales (Image Carousel, Logo Slider, Team Slider y el widget Blog en modo carrusel), todos cubiertos en la página del widget de carrusel vinculada en la introducción.

01. Flujo de cobertura del meridiano

Demostración en vivo Descargar Widget JSON

La corredera central se asienta plana y cuadrada. Los de ambos lados giran hacia afuera en el eje Y y se atenúan, por lo que su ojo aterriza donde debería. Flujo de cobertura clásico, menos el reflejo que nadie ha querido desde 2011.

Funciona porque muestra contexto sin competir por la atención. Un visitante ve que hay cinco estudios de caso más sin poder leer ninguno de ellos, que es exactamente la tensión que hace que la gente haga clic en la flecha.

Úselo para: carretes de estudio de caso, piezas de portafolio, cualquier cosa en la que cada diapositiva merezca una lectura completa.

Nu o utiliza pentru: cuadrículas de productos. Coverflow muestra correctamente un artículo y da pistas sobre dos. Los compradores que comparen seis productos lo odiarán.

02. Acordeón Concertina

Demostración en vivo Descargar Widget JSON

Seis paneles verticales estrechos. Pase el cursor sobre uno y se expande; los demás se comprimen para hacer espacio. Sin flechas, sin puntos, sin reproducción automática: toda la navegación es el flotador.

Sin embargo, mira lo que sucede en el móvil. No hay movimiento estacionario en una pantalla táctil, por lo que los paneles vuelven a tocar para expandirse. Está bien, pero significa que el comportamiento del primer toque tiene que ser obvio o la gente se desplazará directamente más allá. Agregue un galón visible en el panel activo y el problema desaparecerá.

Úselo para: seis o menos categorías de servicios, listas de destinos, cualquier cosa donde las etiquetas hagan la venta.

03. Superposición de Umbra

Demostración en vivo Descargar Widget JSON

La imagen llena el marco, el título se encuentra en un gradiente que solo oscurece el tercio inferior. Cambios de diapositiva, el título se desvanece un poco más tarde.

Ese retraso es todo el diseño. El texto y la imagen que llegan juntos se leen como un anuncio publicitario. El texto que llega en segundo lugar se lee como un título en una fotografía, que es lo que desea si la fotografía es el producto.

Este es el diseño más cercano al Widget del carrusel de imágenes Elementor si quieres el mismo aspecto sin Pro. El widget gratuito tiene imagen más título, solo que sin el desvanecimiento escalonado.

04. Cubierta de estrato

Demostración en vivo Descargar Widget JSON

Tarjetas apiladas con un ligero desplazamiento para que puedas ver tres o cuatro bordes detrás de la superior. Avance y la carta superior se levanta y se desliza, revelando la siguiente.

La pila hace algo que un carrusel plano no puede: muestra cantidad. Un visitante sabe que hay más testimonios sin contar puntos. Para prueba social, esa es la mayor parte del trabajo.

Úselo para: testimonios, niveles de precios, pasos de incorporación.

Ai grijă: mantenga la pila en cinco o seis cartas visibles. Pasado que las compensaciones se vuelven tan finas que la profundidad se lee como un error de renderizado.

05. División bisecta

Demostración en vivo Descargar Widget JSON

La pantalla se divide por la mitad. La mitad superior se mueve hacia arriba, la mitad inferior se mueve hacia abajo y se encuentran en la siguiente diapositiva. Dos paneles, un gesto.

Pondría esto en un héroe y en ningún otro lugar. Es un gran movimiento: se come la ventana gráfica completa y exige un segundo de atención del visitante. En un héroe que es un comercio justo. A mitad de una página de servicios es sólo ruido.

Úselo para: héroes de la página de inicio, páginas de destino de la campaña, pares de antes/después.

06. Rueda de ratón de ascenso

Demostración en vivo Descargar Widget JSON

Sin flechas. Te desplazas, avanza. El control deslizante captura la rueda mientras está a la vista y la suelta una vez que presionas la última diapositiva.

El robo de pergaminos tiene mala reputación y se lo ganó. La versión aquí lanza la rueda en el momento en que llegas a cualquiera de los extremos, por lo que un visitante que quiera seguir bajando la página nunca queda atrapado. Pruebe este en un trackpad antes de comprometerse, porque el impulso del trackpad es mucho más nervioso que una rueda, y si sus diapositivas tienen mucho texto, la gente se sobrepasará.

Úselo para: secciones narrativas, historias de productos, líneas de tiempo.

Nu-l utilizez: encima del pliegue. El primer desplazamiento de un visitante debe mover la página, no un widget.

07. Voltereta de pivote

Demostración en vivo Descargar Widget JSON

La tarjeta gira 180° en el eje vertical. Frente hacia afuera, atrás hacia adentro. Ambas caras son editables, por lo que el reverso puede contener una biografía, una hoja de especificaciones o un precio.

El contenido bilateral es más raro de lo que parece y este diseño es la razón para buscarlo. Miembro del equipo en el frente, rol y enlaces en la parte posterior. Foto del producto en el frente, dimensiones en la parte posterior.

Úselo para: cuadrículas de equipo, antes/después, tarjetas de especificaciones. Flip se ubica junto al flujo de cobertura, el arco y la órbita en el Desglose del carrusel 3D.

08. Arco Curvo

Demostración en vivo Descargar Widget JSON

Las diapositivas se asientan en el borde de un círculo cuyo centro está en algún lugar debajo del pliegue. Cada uno llega erguido a la parte superior y se inclina hacia afuera al salir. Las máscaras de imágenes en forma de arco siguen la misma curva.

Nada más en el set se parece a esto, y ese es el argumento a favor. Nadie ha visto esto en otro sitio de WordPress.

Úselo para: colecciones donde los artículos son similares y la presentación tiene que tener interés: un catálogo, una lista de muestras, un menú.

09. Mosaico de Tesela

Demostración en vivo Descargar Widget JSON

Una cuadrícula de fichas desiguales que se reorganiza en lugar de deslizarse. Las fichas se animan a nuevas posiciones y tamaños; la composición cambia pero nunca se vacía.

Este es el que debes alcanzar cuando tienes treinta imágenes y no hay jerarquía entre ellas. Un carrusel convencional fuerza un orden de lectura sobre contenido que no tiene uno. Un mosaico no.

Úselo para: fotografía de eventos, páginas de galería, páginas con muchas imágenes.

Costo: es el diseño más pesado del set para trabajos de diseño. Mantenga las imágenes fuente por debajo de 200 KB cada una o la reorganización tartamudea en Android de gama media.

10. Arrastre de meandro

Demostración en vivo Descargar Widget JSON

Agarra y lanza. Momentum lleva la pista más allá de donde la sueltas y se detiene fácilmente. No hay que romper los límites de los toboganes, por lo que un tobogán puede quedar medio visible, que es el punto, porque un tobogán medio visible es una señal de que hay más.

Free-drag tiene un costo de accesibilidad genuino: los usuarios de teclados no obtienen nada de una interacción de arrastre. La compatibilidad con teclas de flecha está conectada, pero si su audiencia se inclina hacia la tecnología de asistencia, el diseño 01 o 04 les será de mejor utilidad.

Úselo para: lookbooks, portafolios, largas colecciones horizontales.

11. Cortina de pizarra

Demostración en vivo Descargar Widget JSON

Los paneles verticales se separan como cortinas y la siguiente diapositiva ya está detrás de ellos. La revelación es la transición.

Se lee como ceremonia. Eso es útil precisamente dos veces en un sitio web, un lanzamiento de producto y un héroe de página de inicio, y se extravía en todos los demás lugares.

Úselo para: lanzamientos, héroes de anuncios, campañas estacionales.

12. Orbitul Halo

Demostración en vivo Descargar Widget JSON

Los elementos orbitan alrededor de un punto central fijo. El de arriba es activo y de tamaño completo; el resto se encoge a medida que viajan por la parte trasera.

Los diseños circulares se adaptan a contenidos que realmente se repiten. Un proceso de cuatro etapas, un diagrama de ecosistema, una rueda de servicios. Ponle una lista lineal y confundirás a la gente, porque un círculo implica “vuelve al principio” y un flujo de incorporación de cinco pasos no.

Úselo para: diagramas de procesos, mapas de ecosistemas, ruedas de capacidades.

13. Control deslizante Plinth Hero (gratis)

Demostración en vivo Descargar Widget JSON

Una imagen llena el escenario. Un pedestal de título se encuentra en la parte inferior izquierda, la barra de control (puntos, flechas, contador) en la parte inferior derecha. Las diapositivas se intercambian instantáneamente: sin desvanecimiento, sin deslizamiento, nada que se desincronice o tartamudee en un teléfono lento.

El intercambio instantáneo suena como una limitación hasta que se produce un desvanecimiento. Una transición de héroe llama la atención dos veces: una vez que sale, otra vez que llega. En cambio, este diseño gasta ese presupuesto en la fotografía. También es el único diseño del conjunto con un control de enlace por diapositiva, más una etiqueta CTA compartida en todas las diapositivas, que es exactamente la forma que necesita un héroe de la página de inicio.

Úselo para: héroes de la página de inicio, páginas de destino superiores, en cualquier lugar donde la imagen sea el argumento.

Nu o utiliza pentru: contenido que necesita movimiento para explicarse. No hay ninguno, a propósito.

14. Control deslizante del índice del libro mayor (gratis)

Demostración en vivo Descargar Widget JSON

Una columna de filas de entrada al lado de una placa grande. Elija una fila y la placa, su sello y su título se intercambiarán para que coincidan. La lista es la navegación, sin necesidad de flechas, aunque están ahí.

Esto invierte el problema habitual del carrusel. Un control deslizante normal oculta todo excepto la diapositiva actual; aquí la tabla de contenido completa es visible todo el tiempo y la imagen es la vista detallada. Hay un interruptor de selección en vuelo estacionario si desea que las filas respondan antes del clic.

Úselo para: colecciones, archivos, listas de obras: en cualquier lugar donde los títulos contengan información real.

Ai grijă: las filas venden el clic. “Artículo 1, Artículo 2, Artículo 3” desperdicia todo el diseño; escriba títulos de fila como titulares.

15. Galería de platos de vitrina (gratis)

Demostración en vivo Descargar Widget JSON

Una sola placa debajo de una tira de miniaturas, con un panel adhesivo al lado que sostiene el título y una tabla de datos de fotogramas: lugar, hora, lente, apertura, obturador, ISO. Los marcos se reemplazan directamente; nada se desliza.

Si buscó “control deslizante de imagen elemental con miniaturas”, esto es todo, creado para fotógrafos. Todas las etiquetas de la tabla de datos son editables, por lo que una imprenta puede convertir lentes/aperturas en papel/edición, y un museo puede convertirlas en medios/fecha/procedencia.

Úselo para: portafolios de fotografía, fotografía de objetos, galerías de detalles de productos. Para conocer la misma forma de placa y miniatura con video, consulte guía deslizante de galería.

Nu o utiliza pentru: imágenes que no merecen metadatos. Un panel de datos vacío se lee como una página inacabada.

16. Catálogo paginado por cuadrantes (gratis)

Demostración en vivo Descargar Widget JSON

Una cuadrícula de cuadros de elementos, páginas tres a la vez: nueve elementos en tres páginas. Una serie de segmentos muestra dónde estás corriendo y también funciona como control de salto; Los botones de paso lo caminan hacia adelante y hacia atrás.

Este es el diseño del trabajo que la mayoría de los carruseles se dan erróneamente: muestran muchas cosas comparables. Cada caja lleva una imagen, categoría, título, copia y una estadística, y debido a que una página completa de tres es visible a la vez, un visitante puede comparar, que es lo que Coverflow y sus primos evitan deliberadamente.

Úselo para: catálogos estilo producto, cuadrículas de funciones, menús de servicio. También es la ruta gratuita en el Guía del carrusel de productos WooCommerce.

Ai grijă: tiene exactamente nueve artículos en tres páginas. Si su catálogo tiene treinta artículos de profundidad, desea una cuadrícula de productos real con filtros, no un carrusel.

17. Paneles con pestañas del boletín (gratis)

Demostración en vivo Descargar Widget JSON

Una tira de pestañas sobre paneles apilados. Cada panel es un pequeño diseño editorial: una figura con su título, un pateador, un título, una guía, una copia corporal, una tabla de datos de tres filas y una firma.

Estrictamente, esto son pestañas, no un control deslizante, y por eso está aquí. La mitad de lo que la gente intenta forzar en carruseles (compárese con tres planos, tres ubicaciones, tres estudios de casos) es contenido con pestañas usando un disfraz. Este también hace la accesibilidad correctamente: semántica real de la tabla ARIA con tabindex itinerante, que la mayoría de los widgets de pestañas son falsos.

Úselo para: comparaciones de planes, páginas de ubicación, paneles de estudio de casos: tres cosas cualesquiera entre las que elige un visitante en lugar de explorarlas.

18. Control deslizante de cotización de tribuna (gratis)

Demostración en vivo Descargar Widget JSON

Un panel de citas al lado de un retrato, atravesado con dos galones. Una barra de progreso y una pista de conteo donde estás, y los botones de paso pueden nombrar la voz a la que se moverán, como “Siguiente: Amara Okafor” en lugar de una flecha anónima.

Ese paso con nombre es el detalle que vale la pena robar. Los carruseles testimoniales pierden lectores en la transición, porque una flecha no promete nada. Un nombre es motivo para hacer clic. La comilla también es un control de texto editable, por lo que se puede configurar en el glifo correcto para el idioma del sitio o eliminarla.

Úselo para: testimonios, reseñas, citas de clientes. Hay un tutorial completo del carrusel testimonial, y puedes ver cotizaciones reales de clientes en nuestro propio sitio.

Ai grijă: tiene tres voces y cada una sube sola al escenario. Elija sus tres mejores citas y manténgalas lo suficientemente cortas como para leerlas de una sola vez.

19. Control deslizante de línea de tiempo del Almanaque (gratis)

Demostración en vivo Descargar Widget JSON

Entradas fijadas en un eje fechado. Las posiciones de las garrapatas se calculan a partir de los años que escribe, por lo que el espaciado es real y no par. 1994 y 1996 se sientan muy juntos, 1996 y 2011 se sientan muy separados y la brecha cuenta su propia historia. Una combinación de décadas por encima de la regla le da al espaciado una escala para leer.

Cada dos widgets de línea de tiempo espacian sus entradas de manera uniforme, lo que silenciosamente radica en la historia. Éste no lo hace, y eso lo convierte en el diseño más obstinado del conjunto. También es el panel más profundo aquí, con 143 controles, porque el eje, el peine y el tick indican el estilo por separado de las entradas.

Úselo para: historias de empresas, hitos de proyectos, registros de cambios, registros con lagunas significativas. Para una versión estática, hay un tutorial de línea de tiempo usando el widget de stock.

Nu o utiliza pentru: contenido sin fecha. El eje es el diseño; sin años reales no hay nada que dibujar.

20. Control deslizante de funciones Keystone (gratis)

Demostración en vivo Descargar Widget JSON

Un artículo presentaba grandes; el resto espera en una pared al lado, cada uno con solo su número y nombre. Haga clic en un satélite y se promocionará a la función, y las cajas se voltearán a sus nuevos lugares en lugar de teletransportarse, por lo que su ojo seguirá el intercambio en lugar de perderlo.

El artículo lleva una placa con tres hechos. Fue construido para salas, espacios y exhibiciones rotativas, y ese es el alcance honesto: presenta un pequeño conjunto de cosas distintas una a la vez, con las demás visiblemente en cola.

Úselo para: salas de lugar, espacios de estudio, exhibiciones, una cartera de tres a cinco piezas.

Ai grijă: los satélites muestran sólo número y nombre, por lo que la función tiene que ser la persuasión. Dirija con su elemento más fuerte, porque la mayoría de los visitantes nunca pasan de él.

Cómo importar una plantilla de control deslizante a Elementor

Cuatro pasos, unos noventa segundos. Mismo flujo para diseños gratuitos y Pro, y diferente de importando una plantilla de Elementor, porque un diseño se registra como un widget en lugar de un diseño de página.

1. Descargue el archivo JSON del diseño desde su página de demostración. Un archivo por diseño.
2. Vaya a Complementos maestros → Creador de widgets en su administrador de WordPress y haga clic en Importar widget.
3. Deje caer el JSON en la zona de caída. El diseño se registra como un widget con sus propios controles: contenido, colores, tipografía, puntos de interrupción. Los ocho diseños gratuitos se importan en el complemento gratuito; Los doce diseños Pro solicitan una licencia Pro aquí.
4. Arrástrelo a una página desde el panel Elementor, donde aparece en Favoritos, intercambia el contenido del marcador de posición por el tuyo.

La importación no toca tu tema, no pone en cola nada globalmente y no crea un código corto. Se convierte en un widget en el panel como cualquier otro.

¿estos controles deslizantes funcionan en dispositivos móviles?

Los veinte son táctiles y responsivos. Cuatro cambian de comportamiento en lugar de simplemente escalar:

• Acordeón Concertina cambia de flotar para expandir a tocar para expandir.
• Rueda de ratón de ascenso deja caer la captura de la rueda y usa deslizar.
• Arrastre de meandro mantiene la resistencia pero acorta el impulso para que un movimiento no sobrepase toda la pista.
• Control deslizante del índice del libro mayor apila el índice sobre la placa y select-on-hover vuelve a tocar.

Los ocho gratuitos también mantienen activada la navegación del teclado de forma predeterminada, y Plinth Hero y Rostrum Quote responden a gestos de deslizamiento fuera de la caja. Pruebe el mosaico en un teléfono real en lugar de en el emulador del dispositivo del navegador, porque las ventanas emuladas no reproducen el costo del diseño de Android de rango medio, y el mosaico es donde aparece primero.

¿cuál deberías elegir realmente?

Si estás estancado, estos cubren la mayoría de los sitios:

• Portafolio o agencia: Meridian Coverflow o Meander Drag si tienes más de una docena de piezas. Con una licencia gratuita, Keystone Feature Slider.
• Negocio de servicios: Acordeón Concertina. En forma gratuita, Bulletin Tabbed Panels, cuya tabla de datos le permite mantenerse en las comparaciones de planes.
• Tienda: Catálogo paginado por cuadrantes para nueve seleccionados. No existe ningún widget gratuito que deslice una transmisión de producto en vivo; ese trabajo necesita Carrusel circular de Elementor Pro. Omita los diseños 3D de cualquier manera: los compradores quieren comparar y el flujo de cobertura está diseñado para detenerlos.
• Testimonios: Control deslizante de cotización de tribuna. Es gratis y los botones de paso nombrados son el mejor mensaje de transición del conjunto.
• Erou de pagină de casă: Plinth Hero Slider si la fotografía es fuerte, y el plantillas de la sección héroe si desea todo el bloque en lugar del control deslizante; Cortina Bisect Split o Slate si quieres que el movimiento sea el momento, y solo uno de ellos, una vez.
• Acerca de la página o el historial: Control deslizante de línea de tiempo de Almanac. Nada más aquí da fecha al contenido honestamente.

Elijas lo que elijas, ejecútalo más allá de la única prueba que importa: carga la página en tu propio teléfono, en el celular y mira si el control deslizante es lo primero que se representa o lo último. Un diseño que llega después de que el texto ya ha sido leído no es un control deslizante, es una decoración.

Preguntas frecuentes

Dónde ir a continuación

Abre dos o tres demostraciones y échales un vistazo real a tu teléfono antes de elegir. Entonces:

Doce de los veinte necesitan una licencia para importar, por lo que página de precios es el lugar para comprobar qué nivel cubre el diseño que elegiste.

• Explora todo en un solo lugar en el Widgets del carrusel Elementor page, con los veinte diseños más los widgets carrusel del complemento.
• ¿Seguir en el nivel libre? Publicación gratuita de widgets del carrusel recorre todo lo que no cuesta nada, estos ocho incluidos.
• ¿ir por profundidad sobre movimiento? Los diseños del carrusel 3D (coverflow, flip, arc y orbit) eche un vistazo más de cerca a los suyos.
• ¿Quieres una página completa en lugar de una sección? El kits de plantillas envíe diseños completos con carruseles ya colocados.
• ¿Construyendo toda la página, no sólo el control deslizante? El plantillas de sección Elementor gratuitas la biblioteca cubre funciones, precios, testimonios, equipo, preguntas frecuentes y bloques CTA, cada uno de los cuales se puede importar como un widget editable.