Cabecera (hero header)
Imagen grande, mensaje principal y botón de acción en la parte superior del sitio. Es el uso más común.
Funciona porque equilibra imagen fuerte con texto legible y guía al visitante con un solo botón.
Carruseles Tipos de carrusel
Tipos de carrusel
Los carruseles muestran varios contenidos en el mismo espacio, uno tras otro. Cada tipo resuelve un problema distinto: presentar, vender, generar confianza o impactar.
Uso
Usa un carrusel cuando tienes de 3 a 5 contenidos del mismo nivel de importancia que no caben juntos. Si uno es claramente más importante, muéstralo fijo y solo.
En Material 3 se llama "Carousel"
La versión actual de Material Design tiene un componente llamado Carousel con cuatro distribuciones: multi-browse (varias tarjetas de distinto ancho), uncontained (tarjetas que se salen del borde), hero (una grande y una pequeña) y full-screen (una a pantalla completa). Son equivalentes a los tipos de esta página con otro nombre.
Tipos
El artículo de ejemplos de Smart Slider 3 recorre más de diez estilos. Aquí están agrupados por el problema que resuelven, que es lo que importa al momento de elegir.
Carrusel de productos
Muestra varias tarjetas a la vez. Se navega con flechas o arrastrando.
Funciona porque el visitante puede comparar productos sin salir de la sección.
Vitrina de producto
Un producto por diapositiva, con animaciones sutiles (por ejemplo, un pulso suave) que lo destacan.
Funciona porque la animación atrae la mirada sin saturar el diseño.
Carrusel de publicaciones
Toma las últimas entradas del blog y usa su imagen destacada como fondo. Se actualiza solo al publicar.
Funciona porque mantiene la portada fresca sin trabajo manual.
Carrusel de logos
Logos de clientes o aliados en desplazamiento infinito.
Funciona porque es prueba social: muestra muchas marcas en poco espacio.
Testimonios
Frases de clientes con su foto y logo, en diseño minimalista.
Funciona porque tranquiliza al visitante. Ojo: los testimonios deben ser reales.
Pantalla completa
Ocupa todo el ancho y el alto de la ventana. Se usa para experiencias inmersivas.
Funciona porque elimina distracciones; todo el foco va a la imagen.
Slider vertical
Las diapositivas cambian de arriba hacia abajo, con puntos de navegación al costado.
Funciona porque rompe el patrón horizontal y se siente natural al hacer scroll.
Landing page y grupos de sliders
Varios sliders apilados forman una página entera de una sola sección, con menú que salta entre ellos.
Funciona porque permite armar un sitio de una página sin programar cada bloque.
Demo: carrusel de productos
Demo 2 · Carrusel de productos
Varias tarjetas visibles a la vez
Audífonos inalámbricos
Producto de ejemplo
Reloj clásico
Producto de ejemplo
Tenis para correr
Producto de ejemplo
Café de origen
Producto de ejemplo
Audífonos (repetido)
Para que haya más que desplazar
Este carrusel usa scroll-snap de CSS: en celular se arrastra de forma nativa, sin librerías.
Ancho completo
Un slider de ancho completo (full width) llena todo el espacio horizontal del navegador. Por eso se usa casi siempre como cabecera: es lo primero que ve el visitante. La demo 1, arriba de esta página, es de este tipo.
¿Por qué usarlo?
- Atrae la mirada desde el primer segundo.
- Da una apariencia moderna al sitio.
- El texto del slider puede ser leído por los buscadores si es texto real (no texto dentro de la imagen).
- Con un botón de llamado a la acción, lleva al visitante a otra parte del sitio.
Consejos de configuración
Limita el ancho del contenido
La imagen de fondo puede estirarse al 100%, pero el texto y los botones deben tener un ancho máximo. En pantallas de 2.500 px un texto sin límite es imposible de leer.
Cuida la altura
Si necesitas una sección muy alta, usa un slider de pantalla completa (100% del alto de la ventana) en lugar de estirar uno de ancho completo.
Poco texto
La altura del slider la define la diapositiva más alta. Mucho texto en un slide hace crecer todos. En móvil, muestra versiones más cortas.
Tamaño de referencia
Una base de 1200 px de ancho por 500 a 600 px de alto se adapta bien a todos los dispositivos.
En WordPress, con Smart Slider 3
Si tu sitio es WordPress, el proceso del plugin es: 1) instalarlo desde Plugins → Añadir nuevo; 2) activarlo; 3) crear un proyecto nuevo y elegir el diseño "Full width" (o importar una plantilla); 4) publicarlo con shortcode, bloque de Gutenberg, widget o código PHP. También funciona con Elementor, Divi y otros constructores.
Si tu sitio es HTML/PHP propio (como uno subido por carpeta a Hostinger), el plugin no aplica: sigue el tutorial de esta página.
En la página de inicio
El slider de la portada es la vitrina del sitio. Los ejemplos modernos tienen algo en común: fotografía de alta calidad, textos pensados, botones bien ubicados y tiempos que dan chance de leer.
Enfoque
Pone tus mensajes clave en la parte visible de la pantalla, antes de hacer scroll.
Imágenes
Permite mostrar más de una imagen fuerte en el mismo espacio.
Llamados a la acción
Cada diapositiva puede llevar a un destino diferente: inscripciones, catálogo, contacto.
Qué aprender de los ejemplos
- Apps y servicios: diseño ordenado, mucho espacio en blanco y animaciones suaves para explicar funciones paso a paso.
- Turismo y hoteles: la imagen manda; el texto es breve y discreto.
- Salud y bienestar: colores suaves y composición tranquila para transmitir confianza.
- Productos: una pieza protagonista por slide, con navegación por arrastre o puntos.
- Equipos de trabajo: interacción (pasar el mouse, hacer clic en un nombre) para presentar a cada persona.