Incluso si no está familiarizado con el término, sabe lo que es un carrusel de imágenes. Es un grupo de imágenes grandes que generalmente se colocan en la parte superior de una página web. Las imágenes rotan automáticamente o se “ deslizan” dentro y fuera de la vista. Y herramientas como Smart Slider 3 hacen que agregarlos sea bastante fácil.
En algunos casos, las imágenes no rotan automáticamente cuando el visitante navega por ellas manualmente usando una flecha o enlaces de puntos.
Dependiendo de las imágenes, los carruseles de imágenes o los «deslizadores» pueden ser declaraciones audaces y decirle mucho a un visitante sobre su sitio sin decir una palabra. Si siempre te has preguntado cómo lograr el efecto carrusel en tu sitio web, no lo dudes más.
En este tutorial, instalaremos un carrusel de imágenes en WordPress llamado Smart Slider 3 .
Antes de saltar, hay una advertencia. Si está vendiendo un producto en su sitio web, es posible que desee evitar los carruseles de imágenes . Es posible que no sean una buena opción si las conversiones son su objetivo.
Pero si tiene un sitio web de diseño o fotografía, o simplemente lo encuentra estéticamente atractivo y quiere uno en su sitio personal, siga leyendo.
Una nota sobre los tamaños de imagen
El complemento Smart Slider 3 cambiará el tamaño y recortará las imágenes para que las alturas sean consistentes y las ajuste al tamaño de la presentación que elija.
Eso significa que las imágenes muy grandes se reducirán y las imágenes pequeñas se ampliarán. Como sabrá, cuando aumenta el tamaño de las imágenes más pequeñas, la calidad suele verse afectada. Así que trate de evitar el uso de imágenes más pequeñas que las dimensiones de su control deslizante/carrusel.
Las imágenes grandes generalmente se ven mejor en un carrusel de imágenes. Pero también tenga en cuenta que las imágenes más grandes tienen un tiempo de descarga más largo. Tienes que equilibrar el tamaño y la calidad de la imagen y llegar a un compromiso que aún se vea bien.
Un carrusel de imágenes es una función horizontal, por lo que un carrusel hecho con imágenes anchas se verá mucho mejor que uno con imágenes cuadradas.
Instalación de Control deslizante inteligente 3
Inicie sesión en su panel de administración de WordPress.
En la columna de navegación de la izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «Smart Slider 3».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Cuando se haya instalado el complemento, haga clic en el botón «Activar».
Creación de un carrusel de imágenes
Smart Slider 3 extrae imágenes de su biblioteca multimedia. Antes de configurar un carrusel, cargue las imágenes que pretende usar .
Vamos a pasar por el proceso de configuración del control deslizante utilizando todos los valores predeterminados. Luego agregaremos un carrusel a una publicación para que pueda tener una idea de cómo funciona el sistema. Más adelante, abordaremos algunos ajustes, configuraciones y usos más específicos.
En la navegación de la columna izquierda, haga clic en el enlace «Control deslizante inteligente».
Tiene la opción de ver un video introductorio de «Learn Smart Slider 3» que brinda algunos detalles sobre los conceptos básicos para configurar un control deslizante o un carrusel de imágenes.
Es posible que desee echar un vistazo al video, o puede saltar con valentía con nosotros ahora y hacer clic en el mosaico «NUEVO DESLIZADOR» para comenzar.
Introduzca las opciones básicas en la ventana emergente.
El nombre del control deslizante es solo un nombre para sus propios fines. Hágalo descriptivo si tiene la intención de configurar varios carruseles.
El ancho y la altura son las dimensiones del carrusel. No es necesario ingresar valores de píxeles aquí si tiene la intención de configurar el carrusel para que ocupe todo el ancho de la ventana del navegador o del dispositivo.
Preestablecido : «Predeterminado» coincide con las dimensiones que proporcionó en los campos Ancho y Alto. El «ancho completo» ignora las dimensiones y crea un carrusel receptivo que abarca todo el ancho de la ventana del navegador o del dispositivo.
Haga clic en el botón «CREAR».
Agregar imágenes a un nuevo control deslizante
El control deslizante que acabamos de crear está vacío, así que agreguemos algunas imágenes.
Haga clic en el mosaico «AÑADIR DIAPOSITIVA».
Haga clic en el mosaico «Imagen».
Seleccione las imágenes del carrusel de la biblioteca de medios de WordPress.
Haga clic en el botón «Seleccionar».
Las imágenes que seleccionó aparecerán en el complemento.
Desplácese hacia abajo hasta la sección «Publicar».
Copie el código abreviado o vaya al editor de publicaciones. También hay un fragmento de PHP que puede copiar si va a insertar el carrusel en el código del sitio en alguna parte.
Iniciar una nueva publicación. Ingrese un título y haga clic en el icono «agregar bloque».
Haga clic en el mosaico «Smart Slider 3».
Si está utilizando el editor clásico de WordPress, haga clic en el icono «Smart Slider 3».
Haga clic en el botón «SELECCIONAR DESLIZADOR».
Haga clic en su control deslizante para insertarlo en la publicación.
Publicar la publicación.
El carrusel ahora se publica en una publicación con enlaces «adelante» y «atrás» a ambos lados de la imagen.
De forma predeterminada, las imágenes no se alternan automáticamente, pero podemos cambiar eso.
Para recorrer automáticamente las imágenes del carrusel
En la navegación de la columna izquierda del panel de administración de WordPress, haga clic en el enlace «Control deslizante inteligente».
En la sección del panel de Control deslizante inteligente, pase el mouse sobre su control deslizante y haga clic en el botón «EDITAR».
Haga clic en el enlace «REPRODUCCIÓN AUTOMÁTICA» y cambie el interruptor «Habilitar». El tiempo predeterminado entre imágenes es de 8000 ms (8 segundos).
Desplácese hacia arriba y haga clic en el botón «GUARDAR».
Ahora su carrusel recorrerá automáticamente las imágenes.
Carrusel de imágenes como widget
Smart Slider es también un widget de control deslizante de WordPress. Puede agregar un control deslizante en cualquier lugar donde pueda agregar un elemento de widget, como la barra lateral.
- En la columna de navegación de la izquierda, pase el mouse sobre el enlace «Apariencia» y haga clic en el enlace «Widgets».
- En la sección «Widgets disponibles», haga clic en el botón «Control deslizante inteligente».
- Elija dónde desea que se muestre el control deslizante y haga clic en el botón «Agregar widget».
- Smart Slider se mueve a la lista de widgets activos. Seleccione su control deslizante del menú desplegable y haga clic en el botón «Guardar».
Insertar un carrusel en el código del sitio web
Anteriormente mencioné que puede copiar y pegar código PHP para insertar el carrusel en el código del sitio web o en la plantilla de WordPress.
El método para editar el encabezado de un sitio de WordPress varía según la versión de WordPress y el tema que utilice.
En cualquier caso, simplemente puede copiar el código PHP y pegarlo en la ubicación que considere adecuada.
Deslizarse o no deslizarse, esa es la cuestión
El diseño de sitios web es algo subjetivo. Lo que una persona encuentra atractivo, otra puede no hacerlo. Eso nunca cambiará. Pero el diseño web también pasa por modas y fases, y los carruseles de imágenes ciertamente tuvieron un momento de popularidad cuando parecía que estaban en todas partes.
Ahora sabemos más sobre la eficacia o ineficacia de los carruseles. Entonces, antes de decidir implementar un control deslizante, asegúrese de conocer los pros y los contras. Para un sitio estrictamente visual y creativo, aún pueden ser útiles y efectivos. Sin embargo, lo son menos para su sitio de comercio electrónico típico.
¿Ha utilizado un carrusel de imágenes en un sitio en el pasado? ¿Le preocupan los efectos de sus elecciones de diseño, o simplemente busca lo que le queda genial? (¡No hay nada de malo en hacer lo que crees que se ve genial a pesar de lo que los «expertos» puedan creer!)