¿El diseño del feed parece estar mal? Cómo corregir las columnas, el espaciado y la visualización en dispositivos móviles

Ayer tus publicaciones se veían bien en tu feed. Hoy parece que hay algún problema.

Quizá las columnas se hayan fusionado en una sola. Quizá tus imágenes se vean aplastadas o estiradas. Quizá haya desaparecido el espaciado, o quizá todo parpadee sin estilo durante un segundo antes de colocarse en su sitio. Sigue mostrando tu contenido. Es solo que no se ve bien, sobre todo en el móvil.

Si te has encontrado con esto, no te preocupes. Casi nunca se trata de un error real. Es un problema de configuración, y puedes solucionarlo sin tocar ni una sola línea de código, aunque no seas desarrollador.

Una vez que sepas qué causa se corresponde con tu síntoma, la solución suele ser tan sencilla como un solo clic.

Así que vamos a relacionar lo que ves con la opción de configuración que lo soluciona. Vamos a abordar las columnas, el espaciado y la visualización en dispositivos móviles en ese orden, para que primero corrijas la configuración y te saltes el CSS que probablemente no necesites.

• ¿Por qué mi feed parece estar dañado o sin formato? (Respuesta rápida)
• Identifica la causa de tu síntoma (empieza aquí)
• Ajusta el número de columnas y el espaciado
• Solucionar problemas de diseño específicos de dispositivos móviles
• Cuando tu tema anula el estilo del feed
• Solucionalo con la corrección para la carga del tema AJAX
• Modificaciones de CSS personalizadas seguras que no estropearán tu tema
• Un feed que realmente se adapta a tu sitio web
  • Empieza ya a mejorar el diseño de tu feed

¿Por qué mi feed parece estar dañado o sin formato? (Respuesta rápida)

Tu feed no está estropeado. Casi siempre se debe a uno de estos tres problemas de configuración.

• Tu diseño nunca se ha adaptado al espacio. El número de columnas y el espaciado siguen siendo los predeterminados, por lo que las entradas se amontonan o se comprimen.
• Tu tema está anulando los estilos del feed. El CSS de tu tema tiene prioridad, por lo que el feed pierde el aspecto previsto.
• Un conflicto al cargar el tema impide que se apliquen los estilos al cargarse. Ese es el síntoma de que «aparece un instante sin estilo y luego se ajusta a su posición».

Aquí viene lo bueno: puedes configurarlo todo desde los propios ajustes del feed, y la mayoría de la gente nunca tiene que tocar una hoja de estilo. No hace falta saber programar.

Identifica la causa de tu síntoma (empieza aquí)

Antes de cambiar nada, ponle nombre a lo que ves.

Cada problema de maquetación tiene una causa más probable. Compara tu síntoma con ella y pasarás directamente a la única solución que importa.

Estas son las causas más habituales, en el orden en que conviene comprobarlas.

Lo que ves	Causa más probable	Dónde ir
Demasiadas o muy pocas columnas, espaciado demasiado apretado	No se han ajustado los parámetros de maquetación	Ajusta el número de columnas y el espaciado
Se ve bien en el ordenador, pero mal en el móvil	La configuración de la columna móvil independiente no se ha modificado	Solucionar problemas de diseño específicos de dispositivos móviles
Los estilos del feed parecen haber sido modificados o no se ajustan a la imagen de marca	Conflicto de especificidad del CSS del tema	Cuando tu tema anula el estilo del feed
Al principio no tiene estilo, pero luego encaja en su sitio	Conflicto entre la carga del tema y JavaScript	Solucionalo con la corrección para la carga del tema AJAX

Ahora, el pedido.

Comprueba primero la configuración. Son las dos primeras filas. Tanto las columnas de la versión de escritorio como la visualización en móvil se configuran en ese apartado. Después, comprueba si hay un conflicto de temas. A continuación, comprueba si hay un conflicto de carga. El CSS personalizado es lo último que hay que tener en cuenta, si es que hay que hacerlo.

Ese orden no es aleatorio. Va desde la solución que resuelve la mayoría de los casos hasta la que resuelve el menor número.

Esto es en lo que la mayoría de la gente se equivoca. Ven que el feed no funciona bien y se lanzan directamente a escribir código personalizado. Empiezan a escribir CSS para forzar el diseño.

No hagas eso todavía. En la mayoría de los casos, una opción integrada o una simple casilla de selección resuelve exactamente lo mismo. Si lo compruebas en este orden, te ahorrarás tener que escribir código CSS que no necesitas.

Así que busca tu síntoma en la tabla. Ve a esa sección. Solucionalo allí.

Ajusta el número de columnas y el espaciado

¿Demasiadas columnas? ¿Demasiado pocas? ¿Entradas apiñadas sin espacio para respirar?

Casi siempre se trata de que el número de columnas y el espaciado se mantienen en sus valores predeterminados, y es bastante fácil solucionarlo utilizando el personalizador en tiempo real que viene con todos los plugins de Smash Balloon.

Configurás las filas y las columnas, ves cómo se actualiza el feed en una vista previa en tiempo real y guardás los cambios.

A continuación te explicamos cómo configurar las columnas y el espaciado.

1. En el panel de control de WordPress, abre tu feed y haz clic en «Personalizar».
2. Haz clic en la pestaña «Diseño ».
3. Busca el control de número de columnas. Configura el número de columnas para ordenador, tableta y móvil. Cada tamaño de pantalla tiene su propia configuración.

4. En los feeds de Instagram, ajusta el valor de «Padding» para modificar el espacio entre las publicaciones.
5. Haz clic en «Guardar».

¿Quieres una cuadrícula ordenada de tres columnas en el escritorio? Configura el número de columnas del escritorio en 3. Esa es la solución.

La pestaña «Diseño» también permite controlar la forma de las imágenes. Puedes configurar tus publicaciones con una relación de aspecto cuadrada de 1:1, vertical de 4:5 o horizontal de 3:4. Esto resulta muy útil cuando tus imágenes se ven aplastadas o estiradas, ya que una relación de aspecto adecuada las recorta de forma limpia.

Solucionar problemas de diseño específicos de dispositivos móviles

Tu feed puede verse perfecto en el ordenador. En el móvil, puede que se vea un desastre.

Te explicamos por qué. La configuración de las columnas en la versión móvil es independiente de la de la versión de ordenador. Cambiar las columnas en la versión de ordenador no afecta en absoluto a la versión móvil.

Así que un feed configurado con cuatro columnas en el ordenador intenta encajar las cuatro en la estrecha pantalla de un móvil. Ahora cada imagen es una minúscula franja. Todo parece apretujado y amontonado.

La solución consiste en configurar las columnas para dispositivos móviles por separado. Ve a la misma pestaña «Diseño» que has utilizado antes.

1. Abre tu feed, haz clic en «Personalizar» y, a continuación, en la pestaña «Diseño ».
2. Busca los controles de las columnas para tabletas y móviles. Están justo al lado del control para ordenadores de sobremesa.
3. Establece un valor inferior al de los ordenadores de sobremesa y, a continuación, haz clic en «Guardar».

La pantalla de un móvil es estrecha, por lo que casi siempre queda mejor con menos columnas. Si la versión de ordenador tiene 4 columnas, reduce la de móvil a 1 o 2, no a 4.

Ese único cambio soluciona al instante la mayoría de los problemas de diseño para dispositivos móviles.

Cuando tu tema anula el estilo del feed

A veces ajustas las columnas. Has ajustado el espaciado. Y, aun así, el resultado no coincide con lo que ves en la vista previa del Personalizador.

Esto es lo que pasa. Tu tema tiene su propio CSS, el código que controla el aspecto de las cosas. Y tu feed también. Cuando ambos intentan aplicar estilos a lo mismo, uno de los dos tiene que prevalecer.

Y si el CSS de tu tema sale victorioso en esa pugna, tu feed perderá su aspecto.

Estas son las señales de que el problema lo causa tu tema.

• La vista previa del Personalizador se ve bien, pero la visualización en directo no se ve bien.
• Las fuentes, los colores o los bordes no coinciden con lo que has configurado.
• El problema persiste incluso después de ajustar la configuración y guardar los cambios.

Si te sientes identificado, no te lances a programar todavía. El CSS personalizado es el último paso, no el primero.

Prueba primero con tu configuración y, a continuación, aplica la solución para la carga del tema AJAX que se describe en la siguiente sección. La mayoría de los conflictos entre temas se resuelven con eso. Solo si ambas opciones fallan, necesitarás CSS personalizado.

Y cuando lo necesites, colócalo en el lugar adecuado. Añádelo en «Apariencia» » «Personalizar» » «CSS adicional», no en los archivos de tu tema.

Si utilizas un tema de bloques, ve a Apariencia » Editor » Estilos, haz clic en el menú de los tres puntos (⋮) y selecciona «CSS adicional» para pegar tu código.

De esta forma, tu solución queda protegida, por lo que una actualización del tema no la borrará.

Más adelante compartiré algunas modificaciones seguras. Por ahora, ten el CSS a mano. Sirve para dar los últimos retoques, una vez que hayas aplicado las soluciones más sencillas.

Solucionalo con la corrección para la carga del tema AJAX

¿El feed aparece sin formato durante una fracción de segundo y luego se ajusta correctamente?

Se trata de un conflicto entre temas. Y hay un botón que lo soluciona con un solo clic. Sin necesidad de código.

Esto es lo que ocurre. Tanto tu tema como tu feed cargan sus estilos al abrirse la página. A veces, el proceso de carga del tema interfiere. Por eso, el feed se muestra sin formato durante un instante, antes de que los estilos se actualicen.

Tienes dos formas de resolver esto.

La forma manual consiste en revisar minuciosamente los archivos de script de tu tema. Tendrías que localizar el código que provoca el conflicto y modificar la forma en que se carga. Eso requiere tiempo, paciencia y conocimientos de programación que la mayoría de la gente no tiene.

La forma más sencilla es una opción integrada llamada «corrección de carga del tema AJAX». Carga el feed de tal manera que evita los conflictos de transición del tema, por lo que los estilos se aplican correctamente en la primera visualización. Basta con marcar una casilla.

Aquí te indicamos dónde encontrarlo.

1. Abre el feed de Instagram » Ajustes » Avanzados (o el feed de Facebook » Ajustes » Avanzados).
2. Activa la corrección para la carga del tema AJAX.
3. Haz clic en «Guardar cambios».

Con eso, la mayoría de la gente ya tiene claro el tema del flash.

¿También te aparecen tamaños de imagen extraños o incorrectos? Hay una versión más completa de esta solución.

En la misma pantalla «Configuración» » «Avanzado», activa estas tres opciones a la vez.

• Solución para la carga del tema AJAX
• Incluir el código JavaScript en la sección «head»
• Carga de imágenes con JavaScript

Haz clic en «Guardar cambios». A continuación, vacía la caché del complemento en la pestaña «Fuentes» con la opción «Borrar todas las cachés».

Esto hace que el feed vuelva a cargar las imágenes correctamente con la nueva configuración.

Un consejo sobre la carga diferida. Si un conflicto con la carga diferida está ocultando tus imágenes, la solución es hacer lo contrario. Ve a Configuración » Avanzado y desactiva la opción «Carga de imágenes con JavaScript».

Así pues, estas dos opciones son opuestas. Activar la carga de imágenes con JavaScript soluciona algunos problemas. Desactivarla, otros. Prueba una opción cada vez y comprueba tu feed después de cada cambio para ver cuál es la que necesita tu sitio web.

Modificaciones seguras de CSS personalizadas que no estropearán tu tema

¿Aún no te convence después de todo eso? Pues ahora es el momento de añadir un poco de CSS.

Empecemos por las buenas noticias. Es muy raro que llegues hasta aquí. En la mayoría de los casos, basta con ajustar una configuración o aplicar la solución AJAX para resolver el problema. Si estás leyendo esto, eres la excepción, no la regla.

Además, estos fragmentos de código no entrarán en conflicto con tu tema. Son pequeños, específicos y seguros.

Esta es la opción manual, así que requiere un poco más de esfuerzo. Hay que pegar el código en lugar de cambiar un valor. Pero cada fragmento de código que aparece a continuación realiza una tarea sencilla, y puedes copiarlos directamente.

Aquí tienes cuatro modificaciones de bajo riesgo que puedes probar.

• Reduzca la distancia entre los postes. Uso #sb_instagram .sbi_photo { padding: 4px; } para reducir el espacio. Baja el número para que quede más ajustado y súbelo para que haya más espacio.
• Aplicar una altura de imagen fija. Uso #sb_instagram .sbi_photo { height: 200px; } para que todos los postes queden alineados. Así se corrigen las filas que parecen desiguales o desordenadas.
• Mantén la forma de la imagen uniforme. Añadir #sb_instagram .sbi_photo { background-size: cover; } para que las fotos se recorten con precisión en lugar de deformarse.
• Ajusta el espaciado entre columnas en dispositivos móviles. Envuelve tu regla de espaciado entre @media (max-width: 480px) { ... } para cambiar solo la vista del móvil, no la del ordenador.

Solo tienes que abrir «Apariencia» » «Personalizar» » «CSS adicional», introducir el código CSS que quieras utilizar y comprobar cómo funciona ahora tu feed.

Si estás utilizando un tema de bloques, puedes abrir «Apariencia» » «Editor» » «Estilos», hacer clic en el menú de los tres puntos (⋮) y seleccionar «CSS adicional».

Un último paso. Una vez guardado, vacía la caché del plugin en la pestaña «Feeds» con la opción «Borrar todas las cachés». Así, los nuevos estilos se mostrarán de inmediato.

Y ya está. Modifica un fragmento, guarda los cambios, comprueba tu feed y repite el proceso solo si es necesario.

Un feed que realmente se adapta a tu sitio web

Un feed que parece que no funciona casi nunca está realmente averiado. Casi siempre se trata de un problema de configuración.

Primero, identifica la causa de tu problema. Corrige la configuración antes de modificar la hoja de estilos. Y, para la mayoría de la gente, la solución es un solo clic, no una línea de código.

Dispones de controles de diseño integrados para las columnas y el espaciado. Tienes ajustes específicos para dispositivos móviles, adaptados a las pantallas de los teléfonos. Y cuentas con la solución AJAX para la carga de temas, que elimina ese destello de una fracción de segundo. También hay CSS personalizado, pero solo para esos raros retoques de última hora.

¿Quieres que tus elementos incrustados se vean igual de nítidos en el resto de tu sitio web? Estas guías te explican cómo hacerlo paso a paso:

• Añadir un código de inserción de Instagram adaptativo a WordPress
• Añadir un vídeo de Facebook incrustado que se adapte a diferentes tamaños de pantalla
• Añadir un código de incrustación de Twitter adaptado a distintos dispositivos

Empieza ya a mejorar el diseño de tu feed

Hazte con Instagram Feed Pro o Facebook Feed Pro y disfruta de feeds que se adaptan a tu sitio web en cualquier pantalla.