Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo crear un carrusel de imágenes en WordPress (2 formas sencillas)

How to Create a WordPress Image Carousel (3 Easy Ways) 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el fundador de SeedProd. Es empresario, desarrollador web, comercializador, administrador de sistemas, administrador de bases de datos, técnico de soporte e incluso sabe cocinar.

¿Quieres incrustar un carrusel de imágenes de WordPress en tu sitio web?

En mis más de 10 años de trabajo con WordPress, he descubierto que los carruseles de imágenes son una forma visualmente impactante de mejorar la interacción en cualquier sitio web. Pero a menudo es difícil encontrar un plugin de WordPress carrusel que es a la vez potente y fácil de usar si usted es un principiante.

In this article, I’ll show you how to create an image carousel on your WordPress website easily.

3 Ways to Create a WordPress Image Carousel:

How to Create Image Carousels for Custom WordPress Pages

SeedProd Arrastrar y soltar WordPress constructor de sitios web

SeedProd is the best WordPress website builder, with over 1 million users. While its carousel block isn’t free, it offers incredible value for its cost. With its drag-and-drop page builder, you can add multiple image carousels and sliders to any page of your site without coding.

También puede utilizar SeedProd para:

  • Crear un tema de WordPress personalizado
  • Grow your email list with opt-in forms
  • Show your physical location with Google Maps
  • Create urgency using countdown timers
  • Boost engagement with social media embeds
  • Draw attention with animated headlines
  • Engage visitors with video embeds
  • Build trust and credibility with testimonials

With this in mind, let’s look at how to add an image carousel to your website using SeedProd.

Paso 1: Instalar y activar el plugin SeedProd

El primer paso es descargar una copia del plugin SeedProd. Aunque SeedProd tiene una versión gratuita para crear páginas de destino sencillas, utilizaremos la versión Pro para acceder a todas las funciones avanzadas.

A continuación, cargue, instale y active el plugin en su sitio web de WordPress. Si necesitas ayuda con esto, sigue estas instrucciones para instalar un plugin de WordPress.

Después de activar el plugin, diríjase a SeedProd " Configuración, donde puede introducir su clave de licencia de SeedProd. Puede encontrar su clave de licencia en su área de cuenta SeedProd en la sección Descargas.

Verifique su clave de licencia seedprod

Paso 2: Crear una página de destino en WordPress

El siguiente paso es navegar a SeedProd " Páginas para crear una nueva página de destino.

Modos de la página de aterrizaje de SeedProd

En la parte superior de esta página hay 4 modos de página diferentes que puedes activar con un solo clic, entre ellos:

  • Próximamente: habilite una página de Próxim amente para informar a los visitantes (y a Google) sobre su nuevo sitio web.
  • Modo de mantenimiento - Informe a los visitantes de que está temporalmente fuera de servicio por mantenimiento.
  • Inicio de sesión - Activar y crear una página de inicio de sesión personalizada de WordPress.
  • 404 - Habilite una página de error 404 personalizada en su sitio WordPress.

En la sección de modo de página, verás cualquier página de aterrizaje que crees con el plugin SeedProd. Puedes hacer tantas páginas de WordPress personalizadas como quieras.

crear una nueva página de destino

Haga clic en el botón Crear nueva página de destino para crear una nueva página. Al hacerlo, se muestra la biblioteca de plantillas de páginas de destino receptivas de SeedProd.

Plantillas de páginas de destino SeedProd

Puede elegir cualquier diseño de página de aterrizaje que le guste, pero le sugerimos que elija una plantilla que se acerque al aspecto que desea que tenga su página. De esta forma, no tendrás que hacer demasiados cambios.

Para este post, he utilizado la plantilla Travel Webinar Page, que puedes encontrar haciendo clic en la pestaña Webinar de la parte superior de la pantalla.

Para elegir esta plantilla, pase el ratón por encima de la miniatura y haga clic en el icono naranja.

Importe su plantilla de página de destino

A continuación, verás una ventana emergente en la que puedes añadir un nombre de página. El nombre de la página no aparecerá en el diseño de su página de destino, pero establece la URL de su página. Por lo tanto, elija un nombre que tenga sentido para sus visitantes cuando visiten su página.

Haga clic en Guardar y comience a editar su página de destino

Ahora haga clic en el botón Guardar y empezar a editar la página.

Paso 3: Personalice el contenido de su página de destino

Después de lanzar tu plantilla, verás la pantalla del constructor de páginas de SeedProd. Con la interfaz de arrastrar y soltar, puede editar cada parte de su plantilla.

Constructor de páginas arrastrar-y-soltar de SeedProd

La barra lateral izquierda tiene una amplia selección de bloques que puedes arrastrar y soltar en tu página. Una vez que un bloque está en tu página, puedes hacer clic en él para mostrar el contenido, las plantillas y los ajustes avanzados de personalización.

Por ejemplo, si desea añadir su logotipo a la página de destino, arrastre el bloque Imagen del panel izquierdo y suéltelo en la página.

Añadir una nueva imagen de página de destino

Desde ahí, puedes subir una nueva imagen o elegir un logotipo de tu biblioteca multimedia de WordPress. También puedes ajustar el tamaño y la alineación y añadir un enlace.

Si quieres personalizar los colores, fuentes y fondos de tu página, es igual de fácil. En la parte inferior izquierda del constructor de páginas, haz clic en el icono de engranaje para mostrar el panel de configuración global y las opciones de personalización.

Panel de configuración global de SeedProd

Puede hacer clic en las pestañas Fuentes, Colores o Fondo para personalizar su página de destino. Por ejemplo, si haces clic en la pestaña Fondo, puedes subir una imagen de fondo personalizada o cambiar el degradado o la superposición de colores.

Personalice el fondo de su página de destino

También tienes la opción de utilizar un fondo de vídeo o un pase de diapositivas de fondo.

Pero la razón por la que estás aquí es para añadir un carrusel a tu página fácilmente. Para ello, puede utilizar el bloque Carrusel de imágenes de SeedProd.

En este ejemplo, sustituirás la imagen principal por un carrusel deslizante. En primer lugar, pasa el ratón por encima de la imagen existente y haz clic en el icono de la papelera para eliminarla.

Eliminar el bloque de plantilla por defecto

A continuación, seleccione el bloque Carrusel de imágenes del panel Bloques avanzados y arrástrelo a su página.

Elija el bloque de carrusel de imágenes SeedProd

Puedes hacer clic en el bloque de tu página para ver la configuración del carrusel. Por ejemplo, si haces clic en la sección Imagen 1 , aparecerá una opción para utilizar tu propia imagen desde tu ordenador o biblioteca multimedia o elegir una imagen de stock libre de derechos.

Añade imágenes a tu carrusel de imágenes de WordPress

Después de añadir una imagen al carrusel, puedes introducir un pie de foto y hacer clic en el botón Añadir imágenes para insertar más fotos en tu carrusel deslizante.

Para garantizar que su carrusel se vea bien en cualquier dispositivo, SeedProd ajusta automáticamente sus imágenes para ordenadores de sobremesa, tabletas y teléfonos inteligentes.

En el panel de configuración del carrusel, puede ajustar más su deslizador de imágenes. Por ejemplo, puede:

  • Elige un color de navegación oscuro o claro
  • Elige la reproducción automática de tu galería en carrusel
  • Selecciona la velocidad de reproducción automática en segundos
  • Mostrar u ocultar pies de foto
  • Seleccione la alineación de la galería
Configuración de la imagen del carrusel

If that isn’t enough, you can click the Templates tab to change your gallery image style with fewer clicks. For instance, I chose a style with an image drop-shadow.

Plantillas de carrusel de imágenes para WordPress

En la pestaña Avanzado, puede personalizar la tipografía, los bordes y el espaciado de los pies de foto, y elegir colores y estilos que se ajusten a su marca.

When you’re happy with the look of your landing page carousel, click the green Save button at the top-right corner of your screen.

Guarde el diseño de su página de destino

Paso 5: Configure los ajustes de su página de destino

Después de perfeccionar el diseño de su página de destino, hay varios ajustes que puede configurar.

En primer lugar, puede hacer clic en la pestaña Conectar situada en la parte superior de la pantalla para conectar su servicio de marketing por correo electrónico favorito. Es una forma excelente de asegurarse de que los nuevos clientes potenciales se añaden automáticamente a su lista de correo electrónico.

Integraciones de marketing por correo electrónico de SeedProd

SeedProd se integra con los principales proveedores de marketing por correo electrónico, incluidos:

Consulte la documentación de integración de correo electrónico para obtener ayuda sobre cómo conectar su lista de correo electrónico.

Next, click the Page Settings tab to see other settings you can configure in SeedProd. The settings page typically has 5 sections, but this depends on the type of page you build and your SeedProd plan.

configuración de la página de destino

Por ejemplo, puedes editar tu configuración general y dar a tu página un nuevo nombre y URL o configurarla como borrador o publicar.

También puede conectar un plugin de Google Analytics y plugins SEO de WordPress para realizar un seguimiento y mejorar el rendimiento de su página.

Y en el área Scripts, puede añadir scripts personalizados y fragmentos de código, como cookies y píxeles de seguimiento.

Por último, la sección Dominio personalizado te permite conectar tu página a cualquier nombre de dominio que desees sin instalar WordPress en él.

Cuando haya terminado de configurar los ajustes de su página, recuerde hacer clic en el botón Guardar.

Step 6: Publish Your Image Carousel Page

Before you publish your landing page, preview it on mobile to ensure your design looks good for mobile users. Otherwise, it can hurt their user experience.

Para ver una vista previa de tu página, haz clic en el icono de Vista previa móvil en la parte inferior de la pantalla.

Previsualice su página de destino en el móvil

A continuación, puede ver su página tal y como la vería cualquier persona que navegara desde un dispositivo móvil y realizar cambios con el editor visual.

También puede desplazarse rápidamente entre los elementos de texto de escritorio y móvil en cualquier bloque con ajustes de tipografía. Esto le permite realizar cambios en su página móvil o de escritorio sin cambiar el modo de vista.

Edite su página de destino para dispositivos móviles

Cuando estés satisfecho con las versiones para móvil y escritorio de tu página de destino, haz clic en la flecha desplegable del botón verde de guardar y selecciona Publicar.

Publica tu página de aterrizaje con el slider de imágenes de WordPress

A continuación, puede hacer clic en el botón Ver página en directo de la siguiente pantalla para obtener una vista previa de su página de destino.

Así es como se ve mi carrusel de imágenes en mi sitio web de prueba:

Página de aterrizaje con un carrusel de imágenes en WordPress

Su página ya está activa, con un carrusel de imágenes de WordPress totalmente adaptable para mostrar varias imágenes a la vez.

How to Add Image Carousels to WordPress Posts

I often recommend Jetpack for beginners because it’s robust and versatile and offers an easy setup process that I have streamlined over the years.

Jetpack es un plugin gratuito que añade un montón de características útiles a su sitio de WordPress.

Plugin Jetpack para WordPress

Por ejemplo, puede escanear su sitio en busca de problemas de seguridad y ofrecer protección de fuerza bruta contra bots y hackers. También puede utilizarlo para cargar imágenes de forma diferida, compartir contenidos en redes sociales, etc.

More importantly, Jetpack has a feature that allows you to show full-screen carousel galleries in both posts and pages. This feature works perfectly with the block editor (Gutenberg editor), making it simple to add carousels directly to your posts and pages.

Siga leyendo para descubrir cómo utilizar la función gratuita de carrusel de imágenes de WordPress de Jetpack.

Paso 1: Instalar y activar el plugin Jetpack

El primer paso es instalar y activar Jetpack. Para ello, vaya al área de administración de WordPress y haga clic en Plugins " Añadir nuevo.

Desde allí, desplácese hacia abajo hasta que vea el plugin Jetpack y haga clic en Instalar ahora y, a continuación, en Activar.

Instalar el plugin jetpack para WordPress

El siguiente paso es ir a Jetpack " Configuración desde el panel de navegación izquierdo y hacer clic en la pestaña Escritura.

En la parte superior de la siguiente pantalla, verás el panel Multimedia. En esta área, haz clic en el interruptor Mostrar imágenes en una galería de carrusel a pantalla completa en la posición de activado.

Habilitar galerías carrusel jetpack

También puedes optar por:

  • Mostrar los metadatos Exif de la foto en el carrusel
  • Mostrar el área de comentarios en el carrusel

Y elige un esquema de color blanco o negro.

Asegúrese de hacer clic en el botón Guardar cambios antes de continuar.

Paso 3: Añadir una presentación de diapositivas a su post o páginas de WordPress

Ahora, estás listo para crear un carrusel de imágenes en cualquier post o página de WordPress de forma gratuita.

Insertar el bloque de diapositivas de Jetpack

Para añadir fácilmente un carrusel a una entrada de WordPress, crea una nueva entrada o edita una entrada existente. A continuación, haz clic en el icono del signo más dentro del editor de bloques para añadir un nuevo bloque de WordPress y haz clic en el bloque Presentación de diapositivas para añadirlo a la entrada.

Sube fotos o elige imágenes de tu biblioteca multimedia de WordPress

A continuación, puede hacer clic en el botón Cargar para empezar a cargar imágenes en su galería desde su ordenador. O puedes hacer clic en el botón Biblioteca multimedia para insertar imágenes que ya estén en tu biblioteca multimedia de WordPress.

Ahora, elija las imágenes que desea añadir y haga clic en el botón Crear nueva galería.

Añade imágenes a tu galería

En la siguiente pantalla, puedes añadir leyendas a tus fotos para explicar de qué trata cada imagen. Después, solo tienes que hacer clic en el botón Insertar galería para añadirla a tu publicación.

Añade tu galería de imágenes a tu entrada o página de WordPress

You should now see a preview of your image carousel in your WordPress post. It will have arrows that allow you to navigate between photos and pagination dots that show the number of images in the gallery.

Verá una vista previa de su galería de imágenes dentro de su editor de WordPress

In the slideshow settings panel on the right, you can captivate your audience with transition effects. A range of animations allow you to slide or fade between images, creating a dynamic visual experience that engages your visitors.

También puedes cambiar el tamaño de la imagen, reproducir automáticamente las diapositivas y retrasar las transiciones.

Edite la configuración de su carrusel jetpack

Cuando estés satisfecho con el aspecto de tu carrusel de imágenes, haz clic en el botón Publicar o Actualizar. Ahora, puedes previsualizar tu post para ver tu galería de carrusel de imágenes en acción.

Previsualice la versión en vivo de su carrusel de imágenes de WordPress

How to Create WooCommerce Product Image Carousels

If you have an online that uses WooCommerce, you can easily display product photos in an attractive image slider. For this, I’ll use the free Product Gallery Slider WordPress plugin.

After installing and activating the plugin, navigate to Codeixer » Product Gallery from your WordPress dashboard. Here, you can choose your slider type, dimensions, navigation options, styling, and more.

WooCommerce product gallery slider settings

Next, go to the product page where you want to add the image carousel. In right-hand sidebar, you’ll see a new panel called Product Gallery.

Add WooCommerce product slider images

This is where you’ll add the images for your product carousel. Simply click Add Images to select images from your Media Library, or drag and drop them from your computer.

From there, go ahead and update the product, and that’s it. Now, you can view the page and see your WooCommerce image carousel in action.

WooCommerce Product gallery image carousel.

Más preguntas sobre los carruseles de imágenes de WordPress

¿Qué es un carrusel de imágenes de WordPress?
A WordPress image carousel is a slideshow feature on a WordPress website that cycles through multiple images in one spot. It helps display several images in an organized, eye-catching way and can include controls for users to move through the images or set them to rotate automatically.
¿Cuál es el mejor lugar para utilizar un carrusel de imágenes?
The best places to use an image carousel are on your homepage, in product galleries, or portfolios. Carousels are great for highlighting featured products, client reviews, or key projects, especially in areas where they’ll catch visitors’ attention right away.
¿Cuál es la diferencia entre un slider y un carrusel en WordPress?
In WordPress, a slider shows one image at a time, while a carousel displays several images side-by-side that users can scroll through. Sliders are best for focusing on single images or messages, while carousels are better for showing multiple items in a row.
¿Debo tener un carrusel en mi sitio web?
Add a carousel to your website if you want to display several images or items in one spot, like products or testimonials. Carousels are effective on pages with a lot of traffic, but don’t overuse them, as they can slow down your site and distract some visitors.
¿Cuál es el mejor tamaño para un carrusel en WordPress?
The best size for a carousel in WordPress is usually 1200×600 pixels, as this size provides a good balance between image quality and load speed. Adjust the size based on your site’s layout, but ensure the images are large enough to display clearly on both desktop and mobile devices.
¿Cómo puedo añadir un carrusel a WordPress sin plugins?
To add a carousel to WordPress without plugins, use the built-in block editor. First, go to the page or post, click “Add Block,” and select “Gallery.” Upload your images, then click “Settings” to adjust columns, image size, and layout. Adding some custom CSS can enhance its carousel effect if desired.

A continuación, más consejos sobre imágenes en WordPress

Espero que este post te haya ayudado a aprender cómo crear un carrusel de imágenes en WordPress.

Crear y personalizar cualquier página de WordPress con SeedProd es súper fácil. No requiere código, no necesitarás contratar a un desarrollador, y el resultado es una landing page enfocada a convertir tu tráfico en leads y ventas.

¿A qué espera?

Puede que también te gusten las siguientes guías para mejorar tus imágenes en WordPress:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.