¿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.
En este artículo, te mostraré cómo crear un carrusel de imágenes en tu sitio web WordPress fácilmente. Verás cómo hacer un carrusel de imágenes responsive, un simple slider o una galería de productos completa dependiendo de lo que necesites.
🧠 Resumen rápido: cómo crear un carrusel de imágenes en WordPress
- Utilizar SeedProd 🧩 - Añade carruseles a cualquier página utilizando el bloque Carrusel de imágenes
- Prueba Jetpack 📸 - Habilitar carruseles de galerías a pantalla completa en entradas y páginas
- Añadir carruseles de productos 🛒 - Utiliza un plugin gratuito para crear sliders de imágenes de WooCommerce
Cómo crear carruseles de imágenes para páginas personalizadas de WordPress
SeedProd es el mejor constructor de sitios web de WordPress, con más de 1 millón de usuarios. Incluye un plugin de WordPress carrusel incorporado que hace que sea fácil de añadir deslizadores de imagen sin código. Con su constructor de páginas de arrastrar y soltar, puede agregar múltiples carruseles de imágenes y deslizadores a cualquier página de su sitio sin codificación.
También puede utilizar SeedProd para:
- Crear un tema de WordPress personalizado
- Aumente su lista de correo electrónico con formularios de suscripción
- Muestra tu ubicación física con Google Maps
- Crear urgencia mediante temporizadores de cuenta atrás
- Aumente la participación en las redes sociales
- Llama la atención con titulares animados
- Atraiga a los visitantes con vídeos
- Generar confianza y credibilidad con testimonios
Con esto en mente, vamos a ver cómo añadir un carrusel de imágenes a su sitio web utilizando 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.
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.
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óximamente 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 de WordPress personalizada.
- 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.
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.
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.
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.
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.
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.
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.
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.
También tienes la opción de utilizar un fondo de vídeo o un pase de diapositivas de fondo.
Paso 4: Añadir el bloque de carrusel de imágenes de WordPress
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.
A continuación, seleccione el bloque Carrusel de imágenes del panel Bloques avanzados y arrástrelo a su página.
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.
Personalizar el carrusel de imágenes
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
Por si fuera poco, puedes hacer clic en la pestaña Plantillas para cambiar el estilo de la imagen de la galería con menos clics. Por ejemplo, yo elegí un estilo con una sombra de imagen.
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.
Cuando estés satisfecho con el aspecto del carrusel de tu página de destino, haz clic en el botón verde Guardar situado en la esquina superior derecha de la pantalla.
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.
SeedProd se integra con los principales proveedores de marketing por correo electrónico, incluidos:
- MailerLite
- Sendy
- Contacto constante
- GetResponse
- Mad Mimi
- Y más
Consulte la documentación de integración de correo electrónico para obtener ayuda sobre cómo conectar su lista de correo electrónico.
A continuación, haga clic en la pestaña Configuración de página para ver otros ajustes que puede configurar en SeedProd. La página de configuración suele tener 5 secciones, pero esto depende del tipo de página que construya y de su plan SeedProd.
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.
Paso 6: Publique su página de carrusel de imágenes
Antes de publicar su página de destino, previsualícela en móvil para asegurarse de que su diseño se ve bien para los usuarios móviles. De lo contrario, puede perjudicar su experiencia de usuario.
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.
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.
Cuando esté satisfecho con las versiones para móvil y escritorio de su página de destino, haga clic en la flecha desplegable del botón verde de guardar y seleccione Publicar.
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:
Su página ya está activa, con un carrusel de imágenes de WordPress totalmente adaptable para mostrar varias imágenes a la vez.
Cómo añadir carruseles de imágenes a las entradas de WordPress
Suelo recomendar Jetpack para principiantes porque es fácil de usar y viene con un deslizador de imágenes integrado para entradas y páginas de WordPress.
Jetpack es un plugin gratuito que añade un montón de características útiles a su sitio de 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 usarlo para cargar imágenes de forma diferida, compartir contenidos en redes sociales, etc.
Y lo que es más importante, Jetpack tiene una función que te permite mostrar galerías de carrusel a pantalla completa tanto en posts como en páginas. Esta función funciona a la perfección con el editor de bloques (editor Gutenberg), por lo que resulta sencillo añadir carruseles directamente a tus publicaciones y páginas.
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.
Paso 2: Activar la Galería Carrusel a pantalla completa
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.
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.
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.
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.
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.
Paso 4: Publique su carrusel de imágenes en WordPress
Ahora debería ver una vista previa de su carrusel de imágenes en su entrada de WordPress. Tendrá flechas que te permitirán navegar entre las fotos y puntos de paginación que mostrarán el número de imágenes de la galería.
En el panel de configuración del pase de diapositivas, a la derecha, puedes cautivar a tu público con efectos de transición. Una serie de animaciones te permiten deslizar o fundir imágenes para crear una experiencia visual dinámica que atraiga a tus visitantes.
También puedes cambiar el tamaño de la imagen, reproducir automáticamente las diapositivas y retrasar las transiciones.
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.
Cómo crear carruseles de imágenes de productos de WooCommerce
Si tienes una tienda online que utiliza WooCommerce, puedes mostrar fácilmente las fotos de los productos en un atractivo slider de imágenes. Para ello, voy a utilizar el plugin gratuito Product Gallery Slider WordPress.
Después de instalar y activar el plugin, vaya a Codeixer " Product Gallery desde el panel de control de WordPress. Aquí, usted puede elegir su tipo de control deslizante, dimensiones, opciones de navegación, estilo, y mucho más.
A continuación, vaya a la página del producto donde desea añadir el carrusel de imágenes. En la barra lateral derecha, verás un nuevo panel llamado Galería de productos.
Aquí es donde añadirás las imágenes para tu carrusel de productos. Solo tienes que hacer clic en Añadir imágenes para seleccionar imágenes de tu biblioteca multimedia, o arrastrarlas y soltarlas desde tu ordenador.
A partir de ahí, sigue adelante y actualiza el producto, y eso es todo. Ahora, puedes ver la página y ver tu carrusel de imágenes de WooCommerce en acción.
Este plugin es una de las formas más sencillas de añadir un deslizador de imágenes a las páginas de productos de WordPress.
Más preguntas sobre los carruseles de imágenes de WordPress
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é esperas?
Puede que también te gusten las siguientes guías para mejorar tus imágenes en WordPress:
- Cómo añadir una imagen destacada a WordPress
- Cómo crear una galería de imágenes de productos en WooCommerce
- Cómo añadir una galería a las páginas de WordPress
- Cómo añadir imágenes Hotspot a WordPress
- Cómo añadir texto a una imagen en WordPress
- Cómo crear un Lightbox en WordPress para imágenes
- Cómo atenuar una imagen de fondo en WordPress sin CSS
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.
