Mostrar feed de Instagram en el sitio web de Elementor [paso a paso]

¿Quiere crear un feed de Instagram de Elementor para su sitio web de WordPress?

En esta guía paso a paso, aprenderá cómo agregar un feed de Instagram a Elementor usando un complemento gratuito y no técnico llamado Spotlight .

No se requieren conocimientos técnicos ni dinero: solo siga nuestro tutorial y estará listo y funcionando en muy poco tiempo.

Guía paso a paso: Mostrar feed de Instagram en el sitio web de Elementor

¿Listo para comenzar? Aquí está su guía paso a paso sobre cómo mostrar un feed de Instagram de Elementor.

Paso 1: Instale y active el complemento de alimentación de Instagram

Para comenzar, querrá instalar y activar el complemento de fuente de Instagram Spotlight.

Nuevamente, Spotlight es de uso gratuito y 100% compatible con Elementor.

El complemento gratuito de Spotlight se encuentra en WordPress.org, por lo que puede instalarlo siguiendo estas instrucciones:

1. Abre tu tablero de WordPress.
2. Vaya a Complementos → Agregar nuevo .
3. Busque "Destacar".
4. Haga clic en el botón Instalar ahora .
5. Una vez que finalice el proceso de instalación, haga clic en el botón Activar para activar el complemento Spotlight.

Paso 2: crea un token de acceso a Instagram

A continuación, debe crear un token de acceso de Instagram, que es lo que permite que su sitio de WordPress se conecte a Instagram.

No se preocupe, aunque suene un poco técnico, ¡solo necesita hacer clic en algunos botones y le llevará unos 30 segundos en total!

Si está usando su propia cuenta personal, Spotlight también le permite conectar su cuenta directamente ( en cuyo caso tiene la opción de pasar al siguiente paso ). Sin embargo, vamos a utilizar el método del token de acceso de Instagram porque funcionará para cualquier configuración, incluida la conexión de la cuenta de su cliente (si está creando un sitio web de cliente).

Para crear su token de acceso a Instagram, vaya a esta página.

O, si está creando un sitio web para un cliente, pídale a su cliente que vaya a esta página y siga las mismas instrucciones.

Luego, haga clic en el botón correspondiente Generar su token de acceso , en función de si desea conectar una cuenta personal de Instagram o una cuenta comercial.

Esto abrirá una pantalla emergente de Instagram que le preguntará si desea dar permiso a Spotlight para acceder a su cuenta.

Haga clic en el botón Permitir en la ventana emergente:

Después de hacer clic en Permitir , debería ver su token de acceso de Instagram aparecer en la página original:

Copie este token de acceso en un lugar seguro porque lo necesitará en un segundo.

O, si está trabajando con un desarrollador que está construyendo su sitio, deberá compartir este token de acceso con su desarrollador para que pueda continuar configurando el complemento .

Paso 3: conecte su cuenta de Instagram a su sitio web de Elementor

Ahora, puede agregar este token de acceso de Instagram en su tablero de WordPress para conectar su sitio web de Elementor a Instagram:

1. Vuelve a tu panel de WordPress.
2. Vaya a Feeds de Instagram → Configuración .
3. Pegue el token de acceso de Instagram en el cuadro de token de acceso de Instagram/Facebook .
4. Haga clic en el botón Conectar .

Si está trabajando exclusivamente con su propia cuenta de Instagram, también puede conectarse directamente haciendo clic en los botones Conectar su cuenta personal o Conectar su cuenta comercial .

Después de hacer clic en Conectar , debería ver un mensaje de éxito:

Si está conectando una cuenta personal, también verá una opción para agregar una foto personalizada y un texto biográfico. Puede hacer clic en Sí para hacerlo ahora. O bien, siempre puede agregarlo más tarde una vez que haya configurado su feed de Instagram de Elementor.

Hablando de…

Paso 4: configura tu feed de Instagram

Ahora que ha conectado su cuenta de Instagram, está listo para configurar su primer feed de Instagram de Elementor.

Para hacer eso, vaya a Feeds de Instagram → Feeds en su tablero de WordPress.

Elija el tipo de alimentación

Primero, elegirá qué tipo de contenido desea mostrar.

Con la versión gratuita de Spotlight, puede mostrar un feed de sus propias publicaciones de Instagram. Sin embargo, Spotlight Pro agrega más opciones, como un feed basado en hashtags o publicaciones que han etiquetado su cuenta.

Si desea probar Spotlight Pro, puede acceder a una prueba gratuita de 14 días de Spotlight Pro para ver cómo funciona (no se requiere tarjeta de crédito); simplemente haga clic en el botón Prueba gratuita de 14 días en la esquina superior derecha.

Para nuestro tutorial Elementor Instagram Feed, solo vamos a usar la opción Mis publicaciones de Instagram .

Luego, haga clic en Siguiente paso para avanzar.

Elija una plantilla

A continuación, puede elegir una de las plantillas de Spotlight, que le permite controlar el diseño y el diseño de su feed de Instagram de Elementor.

La versión gratuita le brinda seis plantillas diferentes, mientras que Spotlight Pro agrega otras ocho plantillas.

Para este ejemplo, elegiremos la plantilla de feed clásica gratuita, pero puede elegir una diferente si lo prefiere.

Una vez que haya hecho su elección, haga clic en el botón Siguiente paso para avanzar.

Elige tu cuenta de Instagram

En el siguiente paso, se le pedirá que conecte y personalice . Pero debido a que ya conectó su cuenta de Instagram, no necesita hacer nada más aquí.

Para avanzar, haga clic en el botón Conectar y personalizar .

Personaliza tu feed de Instagram de Elementor

Ahora, estará en la herramienta de personalización de Spotlight, que le permite personalizar aún más la plantilla elegida.

Para comenzar, elija la cuenta que conectó en el paso anterior en el encabezado Mostrar publicaciones de estas cuentas .

Esto actualizará la vista previa en vivo de su feed para usar las publicaciones reales de su cuenta de Instagram.

A continuación, puede ir a la pestaña Diseño para personalizar su plantilla de feed de Instagram de Elementor.

Estas son algunas de las elecciones que puede hacer aquí con la versión gratuita del complemento:

• Elija cuántas publicaciones mostrar y en cuántas columnas.
• Ajuste el orden de alimentación. De manera predeterminada, mostrará primero las publicaciones más recientes, pero puede cambiar esto si lo desea.
• Elija cómo abrir las publicaciones cuando los usuarios hagan clic en ellas.
• Ajusta el tamaño y el espacio de tu feed.
• Personalice el encabezado del feed que aparece sobre los elementos del feed.
• Configure el estilo y el texto del botón Seguir en Instagram .
• Configure el estilo y el texto del botón Cargar más publicaciones .
• Agregue su propio CSS personalizado si desea aún más control.

Con Spotlight Pro, obtendrá aún más control sobre detalles como subtítulos, Me gusta y comentarios.

Los usuarios de Spotlight Pro también obtienen acceso a las otras pestañas para filtrar y moderar el contenido del feed o configurar promociones del feed.

Una vez que esté satisfecho con el aspecto de su feed, asegúrese de hacer clic en el botón Guardar en la esquina superior derecha.

Luego, pasemos a cómo incrustar su feed de Instagram en Elementor.

Paso 5: incruste su feed de Instagram en Elementor

Spotlight le ofrece dos formas de incrustar su feed de Instagram de Elementor:

• Spotlight (gratis) : puede agregar su feed a Elementor usando el widget de WordPress de Spotlight. Si bien puede agregar este widget directamente desde la interfaz de Elementor, no podrá personalizar la configuración de su fuente desde Elementor.
• Spotlight Pro : obtiene un widget Elementor de feed de Instagram de Spotlight dedicado que le permite no solo incrustar su feed, sino también configurar su diseño y estilo directamente desde la interfaz de Elementor.

Veremos ambas opciones…

De cualquier manera, puede comenzar abriendo el editor de Elementor para el contenido al que desea agregar su feed de Instagram de Elementor.

Foco (Gratis)

Si está utilizando la versión gratuita de Spotlight, desplácese hacia abajo hasta la sección de WordPress en la barra lateral de Elementor y expanda la lista de opciones.

Luego, arrastre el widget de feed de Instagram Spotlight a su diseño de Elementor donde desea mostrar su feed.

Una vez que agregue el widget, debería ver dos opciones en la barra lateral:

1. Agregue un título (o déjelo en blanco).
2. Elija el feed de Instagram que acaba de crear en el paso anterior.

Luego, haz clic en Aplicar .

También puede usar la pestaña Avanzado para ajustar detalles como el espaciado y los márgenes.

Es posible que no vea una vista previa en vivo de su feed en el editor de Elementor.

Sin embargo, si abre una vista previa en vivo o la versión en vivo de la página, debería ver su feed de Instagram de Elementor.

Proyector profesional

Si está utilizando Spotlight Pro, obtendrá un widget Elementor de feed de Instagram de Spotlight dedicado.

Este widget no solo le permite ver una vista previa en vivo en el editor de Elementor, sino que también le permite personalizar (y crear) feeds de Instagram directamente desde la interfaz de Elementor.

Nuevamente, si desea probar esto, puede obtener una prueba gratuita de 14 días de Spotlight Pro, no se requiere tarjeta de crédito.

Puede buscar el widget por nombre o encontrarlo en la sección General de los widgets de Elementor.

Cuando agrega el widget, debería ver instantáneamente una vista previa de su feed de Instagram de Elementor.

Si es necesario, puede hacer clic en el botón Editar para editar la configuración de su fuente directamente desde Elementor. O incluso puede crear una nueva fuente si desea mostrar varias fuentes.

Paso 6: muestra tu feed de Instagram en una ventana emergente

Este último paso es opcional…

Pero si desea mostrar su feed de Instagram en una ventana emergente en Elementor, tiene algunas opciones.

En primer lugar, Spotlight incluye una función integrada para mostrar publicaciones individuales en una ventana emergente cuando los visitantes hacen clic en ellas. Esto está disponible tanto en la versión gratuita como en la de pago.

Aquí hay un ejemplo de cómo se ve:

Para habilitar o ajustar esta configuración, establezca Abrir publicaciones en la configuración en el cuadro Emergente en Opciones de fuente :

Los usuarios de Spotlight Pro pueden configurar aún más la ventana emergente usando la configuración de Popup Lightbox .

Si desea mostrar todo su feed de Instagram en una ventana emergente, tiene algunas opciones:

1. Si tiene Elementor Pro, puede agregar el widget Spotlight Instagram Feed a una ventana emergente que cree con Elementor Popup Builder. Simplemente siga los mismos pasos del paso anterior al agregar el widget a su diseño emergente.
2. Puede usar cualquier complemento emergente de WordPress, como Popup Maker. Para mostrar su feed en la ventana emergente, puede usar el código abreviado de Spotlight.

Conclusión

Eso concluye nuestra guía sobre cómo mostrar un feed de Instagram de Elementor utilizando el complemento Spotlight gratuito.

Puede seguir todo en esta guía y crear su feed de Elementor Instagram sin gastar dinero.

Si desea aún más funcionalidad, como un widget de feed de Instagram de Elementor dedicado que puede usar en lugar del widget normal de Spotlight WordPress, puede actualizar a Spotlight Pro.

Spotlight Pro ofrece una prueba gratuita de 14 días sin necesidad de tarjeta de crédito, por lo que siempre puede probar las funciones premium antes de comprometerse con nada.