En este artículo conoceremos cómo agregar carrouseles (Carousel Slider) a un sitio web de WordPress, una forma excelente de mostrar imágenes, artículos y productos en tu sitio web, lo que te permite organizar el contenido y aprovechar el espacio de manera óptima, y lo más importante, atraer la atención de los visitantes mediante la presentación de contenido de diferentes formas.

¿Qué es el Carousel Slider?

El Carousel Slider o carrousel es una característica para mostrar contenido en forma de diapositivas sucesivas en cualquier parte de las páginas de sitios web. Este contenido puede ser imágenes de productos ordenadas por precio o calificación, imágenes promocionales, imágenes informativas del sitio, o incluso artículos o videos. Por lo tanto, esta característica mejora la apariencia del sitio web y proporciona una herramienta de marketing poderosa. Es posible agregarlo a un sitio de WordPress fácilmente a través de extensiones, como te explicaremos más adelante.

Beneficios de marketing del Carousel Slider. Los carrouseles tienen muchos beneficios para los visitantes y propietarios de sitios web, y los más destacados son: mostrar productos y descuentos. El Carousel Slider funciona como una herramienta para exhibir productos y servicios que vende el sitio web, a través de su página de inicio u otras páginas.

Esto garantiza la visualización de múltiples productos al mismo tiempo, y también se puede usar como herramienta para comparar productos entre sí, o comparar descuentos y ofertas. Facilitar el acceso al contenido. Uno de los beneficios de marketing del Carousel Slider es que mejora la experiencia del usuario en general, tanto en sitios web normales como en tiendas en línea, mostrando una variedad de imágenes, videos, productos o artículos en un solo lugar.

También permite a los usuarios en tiendas de comercio electrónico comprar en la misma página sin tener que navegar de una página a otra, y encontramos esto utilizado en el sitio de Amazon Arabia Saudita. Vale la pena mencionar que los carrouseles se pueden mostrar en cualquier lugar y pueden aparecer en la sección Hero para ayudar significativamente a captar la atención de los visitantes cuando ingresan al sitio, por lo que te permite la oportunidad de presentar tu empresa o sitio web.

En la mayoría de los casos, estos carrouseles funcionan para reducir la tasa de rebote al mantener a los visitantes en el sitio durante el mayor tiempo posible, lo que a su vez mejora la clasificación del sitio en los resultados de búsqueda. Extensiones apropiadas para crear Carousel Slider. Hay muchas extensiones de WordPress que te permiten agregar carrouseles a tu sitio web, que varían en características y precios, y las más populares son:

Carousel Slider

Esta extensión te permite crear carrouseles en tu sitio, que incluyen imágenes optimizadas para motores de búsqueda que se pueden agregar a través de tu biblioteca de medios o a través de enlaces, además de videos, logotipos y productos. La extensión también incluye la función de carga diferida (Lazy load images) para acelerar tu sitio web, y es gratuita sin necesidad de pagar honorarios. También es compatible con todos los navegadores.

Logo Carousel. Si estás interesado en agregar carrouseles para mostrar diferentes logotipos de un grupo de empresas en tu sitio, esta extensión es la más adecuada, ya que es útil cuando intentas mostrar logotipos de empresas o sitios con los que trabajaste anteriormente o con los que tienes una asociación. Con la capacidad de personalizar carrouseles de logotipos, como establecer espacios entre ellos, ajustar la velocidad de cambio, pausarlos o hacerlos dinámicos, y hacerlos compatibles con dispositivos móviles.

WordPress Carousel. Esta extensión ofrece las mismas opciones que proporciona la extensión Carousel Slider, pero viene con más funcionalidades que incluyen control total sobre los carrouseles y la capacidad de pausarlos o hacerlos funcionar automáticamente, con la posibilidad de desactivar la opción de cambio con el ratón. También te permite agregar un número ilimitado de carrouseles en una sola página, con soporte para navegadores populares como Google Chrome, Firefox, Safari y otros.

Post Carousel

Esta extensión es apropiada para quienes desean agregar carrouseles para mostrar sus artículos y páginas. Te permite mostrar los artículos que hay en el sitio según múltiples configuraciones y opciones que comienzan con la selección de la forma de visualización y la selección de artículos por autor, palabra clave o categoría.

Product Slider

Esta extensión es especial para sitios de comercio electrónico que muestran carrouseles de productos a los visitantes, con la posibilidad de mostrarlos en artículos, páginas y plantillas personalizadas, y proporciona control total sobre los carrouseles, mostrando u ocultando el nombre del producto, precio, calificación y personalizándolos cambiando el color y tamaño de fuente. Con compatibilidad con motores de búsqueda.

MetaSlider. Esta extensión es completa, ya que te permite agregar carrouseles de imágenes, productos, artículos, videos y carrouseles en HTML con integración con varios sitios para facilitar la creación de Carousel Slider en las páginas de tu sitio, como la integración con UNSPLASH para imágenes gratuitas y con YouTube y Vimeo para videos. Viene con una versión gratuita y una versión de pago que comienza en $39 al año.

Pasos para agregar Carousel Slider. En esta sección explicaremos cómo usar la extensión MetaSlider para mostrar carrouseles en un sitio de WordPress.

Esto se debe a que proporciona muchas características que comienzan con el soporte de diferentes tipos de carrouseles como carrouseles de imágenes, videos y productos. Sigue con nosotros los siguientes pasos para crear un Carousel Slider para mostrar imágenes en tu sitio de WordPress:

Paso uno: Instalar la extensión MetaSlider

Este es el paso habitual al intentar agregar una nueva característica a tu sitio, y para que tu sitio pueda mostrar Carousel Slider, instalaremos la extensión MetaSlider de la siguiente manera: dirígete al panel de control de WordPress, luego selecciona Extensiones y haz clic en Agregar nueva. En la ventana que aparece, ingresa el nombre de la extensión "MetaSlider" en el campo de búsqueda ubicado en el lado izquierdo de la pantalla.

Después de que aparezca la extensión, haz clic en el botón Instalar ahora que se muestra junto a ella como se indica en la siguiente imagen, luego activa la extensión. Paso dos: Crear el Carousel Slider. Después de activar la extensión, dirígete al panel de control de WordPress y encontrarás que se ha agregado una nueva pestaña llamada MetaSlider, haz clic en esta pestaña y luego selecciona MetaSlider del menú que aparece como se muestra en la siguiente imagen.

Ahora se te abrirá la ventana de configuración del carrousel, desde donde puedes hacer clic en el botón +Add Slide para agregar una nueva diapositiva. Después de hacer clic en este botón, te aparecerá la ventana para agregar imágenes, que te ofrece tres opciones diferentes:

Cargar archivos: para agregar imágenes del almacenamiento de tu computadora.

Biblioteca de medios:

para usar las imágenes agregadas a la biblioteca de medios de WordPress. Unsplash Library:

para agregar imágenes del sitio unsplash

de imágenes gratuitas. Después de seleccionar la forma en que deseas agregar las imágenes, selecciona las imágenes que deseas mostrar como diapositivas y luego haz clic en el botón Add To Slideshow. Después de seleccionar todas las imágenes que deseas agregar a tu Carousel Slider, desplázate hacia abajo hasta llegar a la sección How to Use en el lado izquierdo de la pantalla, y luego copia el código que se muestra resaltado en rojo en la imagen haciendo clic en él.

Luego dirígete a la página o artículo donde deseas agregar el Carousel Slider, selecciona el lugar apropiado y haz clic derecho en el ícono "+" resaltado en azul en la siguiente imagen y ubicado en la parte superior derecha de la pantalla, luego haz clic en el símbolo de código corto [/]. O puedes usar el botón "+" que aparece dentro del artículo para agregar un bloque de código corto.

Pega el código que copiaste anteriormente de la configuración de la extensión en el campo de código corto. Luego haz clic en el botón Actualizar que aparece en la parte superior. Después de esto, haz clic en Vista previa y encontrarás que el Carousel Slider se ha agregado exitosamente al artículo en la posición que especificaste anteriormente.

Paso tres: Personalizar la visualización del carrousel. Puedes personalizar el carrousel de la forma que prefieras desde el mismo lugar donde creaste y agregaste este carrousel, a través de las siguientes opciones: personalizar imágenes: cada imagen que agregues a tu conjunto de diapositivas

tiene muchas propiedades y opciones que te permiten agregar una descripción a la imagen, vincularla a una URL de tu elección, y agregar un título y texto alternativo para que sea compatible con SEO. También hay una opción para recortar y programar la imagen, estas opciones las encontrarás en el lado izquierdo de cada imagen individualmente como se muestra en la siguiente imagen:

Personalizar la visualización del carrousel: encontrarás en el lado izquierdo de la ventana de agregar carrouseles una sección dedicada al control de cómo se muestran los carrouseles que agregaste dentro del carrusel, a través de las cuatro pestañas en la parte superior que proporcionan cuatro diseños (Flex Slider, Respive Slides, Nivo Slider y Coin Slider). En la parte inferior encontrarás opciones para controlar la altura y ancho del Carousel Slider y la posibilidad de agregar un efecto específico a través del menú desplegable Effect (los efectos disponibles en este menú varían según el diseño que seleccionaste arriba), también puedes determinar desde aquí si deseas agregar la sección de Navegación que aparece como pequeños iconos debajo de las imágenes o no.

Sección de plantillas predefinidas (Slideshow Theme): si estás pensando en utilizar las plantillas predeterminadas de la extensión, puedes hacerlo en esta sección que te proporciona plantillas profesionales para mostrar carrouseles. También puedes crear tus propias plantillas personalizadas desde la misma sección. Configuración avanzada (Advanced Settings): las opciones en esta sección te permiten activar el cambio automático de diapositivas, además de activar o desactivar el recorte de imágenes o convertirlo en recorte inteligente, especificar el tiempo estimado para cambiar

entre diapositivas, personalizar los textos que aparecen en los carrouseles y ajustar la transparencia del título. Con una opción especial para desarrolladores para agregar clases CSS.

Como ves, crear un Carousel Slider es sencillo en WordPress a través de las muchas extensiones que ofrecen esta característica, y en el artículo de hoy aprendiste cómo usar la extensión MetaSlider en su versión gratuita que te permite agregar carrouseles y ofrece muchas opciones de personalización, permitiéndote agregar títulos a las imágenes, elegir entre diferentes formas de visualización y un conjunto de plantillas predefinidas. También está disponible en una versión de pago Carousel Slider Pro que te permite agregar carrouseles de video y carrouseles HTML personalizados con soporte técnico y muchas otras características avanzadas.