Crear un feed de Instagram atractivo con Divi
¿Le gustaría mostrar su feed de Instagram dinámicamente en su sitio de WordPress?
En esta guía paso a paso, te mostraré cómo crear un feed de Instagram atractivo con Divi. Aprenderá cómo conectar su cuenta de Instagram al módulo, personalizar el feed y agregar funciones adicionales como un botón de seguimiento y una caja de luz.
Paso 1: configurar Divi
Lo primero que tienes que hacer es crear una cuenta con Temas elegantes para usar el complemento Divi. Una vez que hayas hecho eso, ve a Descargas de productos bajo su cuenta. Descargue el complemento Divi y guarde el archivo Divi.zip en su computadora.
Una vez que tenga el archivo divi-builder.zip, regrese a su sitio de WordPress e instale el complemento como lo haría con cualquier otro.
Una vez que active el complemento Divi Builder, puede usar cualquier tema para su sitio web. De hecho, solo puede usar Divi Theme o Divi Builder, ya que ambos ofrecen la misma funcionalidad. Entonces, si prefiere un tema que no sea Divi para construir, debe optar por el complemento.
Uno de los beneficios de usar un creador de sitios web como Divi es que puedes ser súper creativo con tus diseños. Divi lo hace fácil. Puede usar la flexibilidad de Divi para diseñar la página en la que muestra su feed de Instagram.
Primero necesita obtener su feed en su sitio web. ¡Haremos eso a continuación!
Paso 3: incrusta tu feed de Instagram
La forma más fácil y confiable de incrustar su feed de Instagram es usar un poderoso complemento llamado Spotlight. Spotlight no solo lo ayuda a insertar su feed, sino que también le brinda muchas opciones de personalización. Puede encontrar el complemento buscando en su tablero de WordPress. Bajo complementos haga clic Agregar nuevo y use la barra de búsqueda para encontrar Spotlight.
Una vez que el complemento esté instalado y activado, el asistente de Spotlight lo guiará a través de los pasos para crear su feed de Instagram.
El primer paso es elegir el tipo de feed que desea ver.
El siguiente paso es elegir una plantilla. Puede elegir uno de los diseños de plantilla proporcionados por Spotlight o crear su propio feed personalizado.
Pongámonos en contacto ahora.
Paso 4: conecta tu cuenta de Instagram a tu sitio web
Una vez que seleccione una plantilla y haga clic en Próximo paso, es hora de conectar tu feed. Haga clic en el azul Conectar y personalizar Botón. En la siguiente pantalla, haga clic en Conecta tu cuenta personalo seleccione una cuenta comercial si necesita conectar esa cuenta.
Aparecerá una ventana, asegúrese de que su navegador no esté bloqueando las ventanas emergentes, pidiéndole que autorice el acceso a su cuenta de Instagram. Elegir Permitir para autorizar la conexión con el complemento Spotlight en su sitio web.
Haga clic en el azul Guardar en la computadora en la parte superior derecha y dale a tu feed un nombre fácil de recordar para guardarlo.
Ahora que su cuenta de Instagram está conectada a su sitio web, ¡es hora de comenzar a personalizar su feed!
Paso 5: personaliza tu feed de Instagram
Haga clic en la barra de menú de Spotlight en la parte superior diseño Pestaña Ahora tiene muchas opciones para personalizar el diseño, la apariencia, el encabezado del feed, los subtítulos y mucho más.
Cubriremos algunas de las formas en que puede mejorar su feed de Instagram, pero primero analicemos cómo hacer que su feed aparezca en su sitio web.
Paso 6: Haz que tu feed de Instagram sea visible en tu sitio web
Hay dos métodos para hacer que su feed de Instagram sea visible en una página en WordPress. El primero es usar el bloque Spotlight. Agregue un nuevo bloque usando el editor de páginas de WordPress, luego busque Spotlight.
Sin embargo, dado que estamos usando el constructor Divi para diseñar nuestro sitio web, usaremos el segundo método, que usa un código abreviado.
Para obtener el código de tu feed, ve a Feeds de Instagram→Feeds. Sus cuentas conectadas aparecerán en la lista. Haga clic en los tres puntos en el extremo derecho de su cuenta y seleccione Copiar código abreviado.
Ahora vamos a crear una nueva página llamada Feed de Instagram. Asegúrate de elegir Usar DiviBuilder como su editor. Tiene la opción de elegir un diseño prefabricado o clonar una página existente, pero en este caso elegimos construir desde cero.
Si lo desea, puede agregar el título de la publicación a la página. Para ingresar el código abreviado, agregue una nueva línea y en el cuadro Insertar módulo que aparece, busque «Texto». Cuando aparezca el cuadro de configuración de texto, elimine el texto predeterminado y pegue su código abreviado. Casi inmediatamente, su feed aparecerá en la página.
Puede personalizar el tamaño, el borde, el texto y otros atributos del módulo y la fila.
Incluir múltiples feeds de Instagram en una sola página
Si desea que aparezcan varios feeds en una página, puede agregar una columna y colocar el código abreviado para el otro feed en un nuevo modelo. También puede agregar más filas y columnas para acomodar aún más fuentes.
Hay muchas cosas que puede hacer para agregar estilo y funcionalidad a su feed. Para hacer esto, regrese a Feeds de Instagram y seleccione el feed en el que desea trabajar. Haga clic en el menú de tres puntos Editar fuente.
Agregar un botón de seguimiento
En la pestaña Diseño, desplácese hacia abajo hasta Boton de seguir y asegúrese de que la función esté habilitada. También puede editar el texto del botón y el color de fondo para que coincida con la marca de su sitio web.
Agregar una función de caja de luz
Spotlight también le brinda una función de caja de luz emergente para mostrar comentarios en una barra lateral cuando un usuario hace clic en una publicación.
Crear un diseño de feed llamativo
Hay muchas formas de crear diseños increíbles para tus feeds. Puede personalizar el color de fondo, el color de los botones, el diseño, el encabezado del feed e incluso ocultar y filtrar publicaciones.
Diploma
Usando Divi y Spotlight juntos, puede crear un hermoso feed de Instagram directamente en su sitio de WordPress.