Blog

Cómo insertar tus publicaciones de Instagram en Divi: Tutorial paso a paso con Smash Balloon

Blog

Cómo insertar tus publicaciones de Instagram en Divi: Tutorial paso a paso con Smash Balloon
Publicaciones de Instagram con Divi
Publicaciones de Instagram con Divi

Cómo insertar tus publicaciones de Instagram en Divi: Tutorial paso a paso con Smash Balloon

Instagram se ha convertido en una herramienta esencial para muchas marcas, y mostrar tus publicaciones en tu página web puede mejorar tanto la estética como la interacción con tus visitantes. En este tutorial, te explicaremos cómo insertar tus publicaciones de Instagram en Divi utilizando el potente plugin Smash Balloon Social Photo Feed, y también veremos cómo integrar el footer de Instagram de Destaca para darle un toque especial a tu sitio web.

¿Por qué mostrar tu feed de Instagram en Divi?

Exponer tu feed de Instagram en tu página web no solo agrega contenido visualmente atractivo, sino que también fomenta la interacción social y el crecimiento de tus seguidores. Divi, en combinación con el plugin Smash Balloon, permite una integración limpia y completamente personalizable, que se adapta perfectamente al diseño de tu sitio web.

Paso 1: Instalar y activar Smash Balloon

El primer paso es obtener el plugin Smash Balloon Social Photo Feed, que puedes adquirirlo gratis en su web oficial o en el repositorio de plugins de WordPress.

  1. Adquiere el plugin desde el sitio web de Smash Balloon
  2. Instala el plugin accediendo a tu panel de WordPress > Plugins > Añadir nuevo > Subir plugin.
  3. Activa el plugin desde el panel de administración una vez que haya sido subido correctamente.

Paso 2: Conectar tu cuenta de Instagram

Una vez que el plugin está instalado, es momento de conectarlo con tu cuenta de Instagram.

  1. Ve a Instagram Feed en el menú lateral de WordPress.
  2. Haz clic en Conectar una cuenta y sigue los pasos para autorizar la conexión entre tu sitio web y tu cuenta de Instagram.
  3. Una vez que tu cuenta esté conectada, podrás configurar los detalles del feed, como la cantidad de publicaciones a mostrar, el diseño y el estilo.

Paso 3: Configurar el diseño de tu feed

Smash Balloon ofrece varias opciones de personalización que te permiten ajustar el aspecto de tu feed de Instagram para que coincida con la estética de tu sitio web.

  1. Diseño de cuadrícula: Perfecto para mostrar varias imágenes de forma organizada.
  2. Diseño de carrusel: Ideal para mostrar una serie de imágenes desplazables. Esa opción sólo está disponible con la versión de pago del plugin.
  3. Diseño de columna única: Una opción más simple y elegante si quieres destacar cada imagen individualmente.

Puedes ajustar los colores, fuentes y tamaños para asegurarte de que se integre perfectamente en el diseño de tu sitio web Divi.

Paso 4: Insertar el feed en tu página Divi

smash balloon instagram embed feed 1 1.png

Ahora que has configurado tu feed, es momento de añadirlo a tu página utilizando Divi.

  1. Abre la página donde deseas mostrar tu feed y selecciona Usar el Constructor Visual de Divi.
  2. Añade una nueva Sección o Fila en el lugar donde quieres que aparezca el feed.
  3. Utiliza el módulo Código de Divi para pegar el shortcode proporcionado por Smash Balloon. Este shortcode se puede encontrar en tu backoffice Feed / All Feeds.

[instagram-feed]


Este es el shortcode básico para insertar tu feed de Instagram. Si necesitas personalizar más el feed (cantidad de columnas, número de imágenes, etc.), puedes ajustar los parámetros en el shortcode. En este vídeo verás como lo insertamos en el footer global de la web pero podríamos insertarlo en cualquier página siguiendo el ejemplo del vídeo.

Para darle un toque adicional a tu sitio web, puedes integrar el footer de Instagram de Destaca, que te permite mostrar tu feed de Instagram en el pie de página de manera elegante.

  1. Adquiere y descarga el paquete de Divi Instagram Footers desde Destaca.
  2. Importa el archivo de diseño de los footers a tu Divi Theme Builder.
  3. Añade el módulo “Instagram Footers” al footer global o a un footer específico en el Theme Builder.
  4. Conecta tu feed de Instagram al diseño importado y personaliza el estilo utilizando las opciones de Divi.

Este tipo de integración es perfecto para aquellos sitios web que desean mantener una presencia constante de Instagram, pero sin ocupar demasiado espacio en las páginas principales.

divi-instagram-footers

Conclusión

Insertar tus publicaciones de Instagram en tu página web con Divi y Smash Balloon es un proceso sencillo que puede mejorar enormemente la experiencia de usuario y la presencia visual de tu marca. Con herramientas como Smash Balloon y el footer de Instagram de Destaca, puedes mostrar tu contenido de forma profesional y completamente personalizada, asegurando que tu sitio web esté siempre actualizado y en sintonía con tus redes sociales.

Footer de Instagram | Destaca Imagen Plugins y plantillas para Divi


Plugins Divi | Plantillas Divi | Layouts para Divi

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Cómo crear un footer en Divi paso a paso

Cómo crear un footer en Divi paso a paso

El pie de página, o "footer", de tu sitio web es una de las áreas más subestimadas, pero de las más importantes. Es el último lugar que ven los usuarios y suele contener información vital como enlaces de contacto, políticas de privacidad, y perfiles de redes sociales....

Cómo Crear un Child Theme en WordPress

Cómo Crear un Child Theme en WordPress

En el desarrollo de sitios web con WordPress, la personalización es clave para destacar y ofrecer una experiencia única a los usuarios. Sin embargo, modificar directamente un tema puede resultar problemático cuando se trata de actualizaciones. Aquí es donde entra en...

Descarga, instalación y activación de licencias en plugins y temas

Descarga, instalación y activación de licencias en plugins y temas

En Destaca Imagen, queremos asegurarnos de que saques el máximo provecho de tus compras en nuestra tienda online. Sabemos que descargar, instalar y activar licencias de plugins y temas puede ser un desafío, especialmente si eres nuevo en el mundo del diseño web. Por...

Sección alto completo en Divi

Sección alto completo en Divi

¿Cómo creo una sección que ocupe el alto total de mi pantalla (Full Screen) en Divi? En este post te vamos enseñar cómo crear secciones que ocupen 100% de la altura de tu pantalla. Ideal para crear webs muy visuales, landing con call to action potentes y páginas webs...

Fuente responsive en Divi

Fuente responsive en Divi

¿Fuentes responsive en Divi? ¿Es posible? YES!! Además con cualquier tipografía. Hoy te queremos hablar de fuente responsive en Divi. Vamos a ver cómo podemos adaptarla al tamaño de nuestra pantalla. Tanto si el usuario ve la web desde diferentes dispositivos o reduce...

Texto sobre imagen en Divi

Texto sobre imagen en Divi

Hoy queremos compartir contigo un pequeño truco para mejorar la legibilidad de las imágenes que tienen un texto sobre cualquier imagen en Divi. Este tutorial está en nuestra categoría Divi Basics y está escrito para usuarios que están comenzando con Divi. Aunque te...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Consigue 5€ gratis!

Regístrate y obtén un cupón descuento.

 Registrarme
Select currency
Euro