¿Cómo hago un carrusel de imágenes en WordPress?

Publicado: 2021-12-06
Image Carousel

Última actualización: 8 de marzo de 2022

Es posible que no conozca el término carrusel, pero aún lo vea con frecuencia en el mercado digital. En la mayoría de los sitios web de la nueva era se utiliza un carrusel de imágenes: imágenes deslizantes que incluyen resúmenes sobre los productos o servicios que ofrecen las empresas. Las imágenes rotan automáticamente y entran y salen de la vista.

El carrusel de imágenes mantiene a los visitantes del sitio web enganchados durante más tiempo, ya que las imágenes deslizantes los hacen sentir más curiosos sobre el producto o servicio que ofrece la empresa. En algunos casos, el deslizamiento de la imagen no está automatizado y el visitante tiene que rotar manualmente la imagen para mostrar la siguiente diapositiva.

Hacer un carrusel de imágenes en WordPress

Dependiendo del tono comercial, el carrusel de imágenes puede incluir algunas declaraciones audaces y revelar mucho sobre el negocio sin una descripción larga. Si ha anhelado aprender formas de incorporar un carrusel de imágenes en su sitio web, ha venido al lugar correcto.

Vamos a describir el proceso de instalación del complemento Smart Slider 3 en Word Press. Hay varias otras herramientas para el trabajo, y el proceso de instalación puede ser similar a Smart Slider 3.

Antes de saltar al tutorial, hay una pequeña advertencia. Si está vendiendo productos en un sitio web, entonces optar por un carrusel de imágenes puede no ser la opción más inteligente, en lo que respecta a las conversiones. Pero si está ejecutando fotografía o diseñando un sitio web y quiere que se vea estéticamente agradable, lea todo el blog.

Comience con la elección del tamaño de la imagen

La diapositiva inteligente 3 cambiará el tamaño de la imagen en wordpress según el formato de presentación seleccionado. Entonces, si las imágenes son grandes, la herramienta las reducirá y viceversa. Y, puede que le resulte familiar, cuando se amplían las imágenes pequeñas, la calidad comienza a deteriorarse. Por lo tanto, trate de no incluir imágenes más pequeñas que la dimensión del carrusel.

Además, las imágenes grandes se ven mejor en Carrusel pero también tienen un mayor tiempo de descarga. Por lo tanto, debe lograr un equilibrio entre la calidad y el tamaño, para que aún se vea bien en el control deslizante.

Un pequeño consejo: los carruseles de imágenes se deslizan horizontalmente, por lo que elegir imágenes más anchas será más atractivo que las cuadradas.

Instalación de Control deslizante inteligente 3

Instalación de Smart Slider 3.png

El proceso de instalación de Smart Slider 3 es prácticamente el mismo para cualquier otra herramienta disponible en el mercado. Para comenzar, primero, inicie sesión en su panel de administración de Word Press. En el lado izquierdo, verá un panel de navegación con muchas opciones diferentes para elegir. De las opciones, elija el complemento y haga clic en el enlace "Agregar nuevo".

Aparecerá una barra de búsqueda frente a usted. Busque Smart Slider 3 en él. Una vez que el complemento esté instalado, haga clic en la opción de activación.

Viaje del carrusel de imágenes iniciales

Smart Slider 3 usa imágenes de la biblioteca de medios, así que asegúrese de cargar algunas imágenes antes de comenzar a hacer el control deslizante. Puede ver su video tutorial para obtener una mejor idea de cómo comenzar a seleccionar imágenes y agregarlas a su formato de presentación. Presione el Smart Slider 3 y obtenga el video introductorio "Learn Smart Slider 3" que proporciona un conocimiento profundo de cómo usar la herramienta.

Puede tomar la ayuda del video o simplemente leer este artículo para comenzar.

Elija la opción básica del menú.

  • Asigne un nombre a su control deslizante para que su carrusel sea más fácil de ubicar cuando maneje varios carruseles a la vez.
  • El ancho y las dimensiones afectan el tamaño y la forma del control deslizante. Ignore la selección de cualquier píxel que desee configurar para que ocupe todo el ancho del dispositivo o navegador.
  • Elegir el ancho y la dimensión predeterminados establecería el carrusel en el ancho y el tamaño actuales, mientras que elegir la opción "Ancho completo" ignoraría cualquier dimensión y haría que el carrusel girara alrededor de todo el ancho de las ventanas.

Después de optimizar la imagen, presione "Crear".

Adición de imágenes al control deslizante

Agregar imágenes al control deslizante.png
Fuente

Una vez que haya configurado el tamaño y el ancho predeterminados del carrusel, el siguiente paso obvio es llenar el carrusel con imágenes atractivas. Para esto, siga los pasos a continuación:

  • Haga clic en Agregar imágenes de diapositivas en Smart Slider 3.
  • Obtendrá la opción de seleccionar una imagen para su control deslizante. Haga clic en esa opción.
  • Elija las imágenes de la biblioteca de wordpress.
  • Carrusel luego presentará las imágenes seleccionadas. Una vez que esté satisfecho con las imágenes seleccionadas, haga clic en la sección "Publicar".

Si planea insertar un control deslizante dentro del código, simplemente copie el código PHP de la herramienta o seleccione la opción de editor de publicaciones.

Cuando comience a escribir un nuevo blog para el sitio web, aparecerá la opción del control deslizante inteligente tres en la página. Si está utilizando un editor clásico, haga clic en el icono del control deslizante inteligente. Ahora, seleccione el Control deslizante personalizado que preparó antes y, una vez que publique la publicación, el Control deslizante se carga en el sitio web y está listo para que lo vean los visitantes.

El carrusel avanzará o retrocederá en ambos lados de los controles deslizantes para deslizarse manualmente a través de las imágenes.

De forma predeterminada, las imágenes del carrusel no se deslizarían automáticamente, pero puede cambiar eso.

Ciclo automático para imágenes de carrusel

En el panel de administración de WordPress, haga clic en el enlace Smart Slider 3 y seleccione la opción de edición. Elija el estilo "Reproducción automática" y presione "Habilitar". El tiempo predeterminado entre el cambio es de ocho segundos. Ahora guarde la configuración actualizada desde el botón Guardar en el lado derecho del panel.

Uso del carrusel como widget

Smart Slider también se puede utilizar como imagen de control deslizante de WordPress. Estos controles deslizantes se pueden agregar en cualquier lugar como un widget, como una barra lateral.

  • Verá un panel de navegación en el lado izquierdo. Haga clic sobre la apariencia y luego en el enlace "Widget".
  • Cuando vea la sección "Widgets disponibles", haga clic en el botón "Control deslizante inteligente".
  • Seleccione la zona donde desea que se muestre la imagen y seleccione el botón "Agregar widget".

Imágenes o No Imágenes es la gran pregunta

El diseño y desarrollo de sitios web es subjetivo, y lo que otros pueden encontrar atractivo, otros pueden no hacerlo. Pasa por varias fases de actualizaciones y modificaciones, y el carrusel de imágenes fue una vez el requisito más solicitado en los sitios web cuando las empresas comenzaron a incorporarlo en todas partes.

La discusión anterior ha brindado una guía paso a paso sobre cómo agregar un carrusel de imágenes al sitio web. El proceso no es complejo y requiere paciencia y experiencia en la selección de imágenes relevantes para mejorar la apariencia del sitio web. Los carruseles serían muy atractivos para un sitio web creativo, mientras que no serían útiles en un sitio web de comercio electrónico.

Por lo tanto, la próxima vez que planee agregar imágenes vibrantes en los controles deslizantes, considere evaluar si agregaría valor al sitio web o afectaría la tasa de conversión de manera significativa.

Otras lecturas

  • ¿Cómo optimizar el tamaño de la imagen del producto?
  • Los mejores complementos de Zoom de imagen para WooCommerce
  • Consejos inteligentes para mejorar las imágenes