Cómo añadir imágenes dentro de las descripciones de las secciones de lista de Squarespace
Si utilizas las secciones de lista de Squarespace, es posible que, en algún momento, quieras añadir pequeñas imágenes, iconos, logotipos o insignias dentro del área de descripción de cada elemento de la lista.
Las secciones de lista de Squarespace son útiles porque te permiten mostrar contenido repetitivo con un diseño limpio. Puedes utilizarlas para servicios, miembros del equipo, fichas de precios, características, testimonios, recursos y otro tipo de contenido estructurado.
Pero hay una limitación frustrante: el campo de descripción de los elementos de la lista está pensado principalmente para texto.
Esto significa que, si quieres añadir una imagen dentro de la propia descripción, no existe una opción nativa sencilla para hacerlo.
La forma más sencilla de resolverlo es con el plugin «Add Images To Squarespace List Item Descriptions» de SquareSkills.
¿Se pueden añadir imágenes dentro de las descripciones de los elementos de una lista en Squarespace?
Sí, puedes añadir imágenes en las descripciones de los elementos de una lista en Squarespace, pero Squarespace no ofrece una opción integrada para subir imágenes dentro del campo de descripción.
Por defecto, cada elemento de la lista puede tener su propia imagen principal, título, descripción y botón. Esto funciona bien para muchos diseños, pero no sirve de nada cuando se quiere incluir una imagen dentro del propio texto de la descripción.
Por ejemplo, quizá quieras añadir:
- pequeños iconos junto a las descripciones de las funciones
- insignias de certificación en las tarjetas de servicio
- logotipos en las tarjetas de precios
- imágenes decorativas en las biografías de los equipos
- marcadores visuales dentro de las etapas del proceso
- imágenes en línea debajo del título de cada elemento de la lista
Eso es diferente a utilizar la imagen principal del elemento de la lista.
La imagen principal se sitúa en el área de imagen del elemento de la lista. Una imagen incluida en la descripción pasa a formar parte del propio contenido.
Por qué las descripciones de los anuncios en Squarespace son limitadas
Las secciones de listas de Squarespace están diseñadas para simplificar el contenido repetitivo.
Cada elemento de la lista suele tener unos cuantos campos estándar:
- imagen
- título
- descripción
- botón
Esa estructura es clara, pero también implica que no puedes utilizar el campo de descripción como si fuera un editor de diseño completo.
Puedes escribir texto en él. Dependiendo de la configuración, es posible que puedas aplicar formato a parte de ese texto. Sin embargo, no dispones de la misma libertad que tendrías en una sección normal de la página, donde puedes arrastrar bloques de imágenes, bloques de código, bloques de Markdown y otro tipo de contenido.
Así que, cuando necesitas una descripción más detallada de un elemento de la lista, te topas con las limitaciones del editor nativo.
Motivos habituales para añadir imágenes en las descripciones de los elementos de una lista
Este problema suele surgir cuando se utiliza una sección de lista de Squarespace para algo más avanzado que una lista básica.
Por ejemplo, puede que estés creando una tabla de precios y quieras añadir iconos para indicar qué incluye cada plan.
O quizá estés creando una sección de servicios en la que cada servicio necesite un pequeño símbolo visual en la descripción.
O quizá estés creando un directorio, una lista de recursos, una tabla comparativa o una tabla de socios en la que los logotipos deban aparecer dentro del contenido descriptivo.
En esos casos, la imagen predeterminada del elemento de la lista no es suficiente.
No basta con una imagen para todo el elemento. Necesitas imágenes dentro del área de texto.
La solución alternativa manual
Hay formas de forzar esto mediante código personalizado.
Una solución habitual consiste en incluir la URL de una imagen en la descripción del elemento de la lista y, a continuación, utilizar código para convertir esa URL en una imagen real en la interfaz de usuario.
Eso puede funcionar, pero no es el método más intuitivo.
Normalmente hay que:
- sube la imagen a algún sitio
- copia la URL de la imagen
- Pega la URL en la descripción del elemento de la lista.
- dar formato o enlazarlo de una forma concreta
- añadir código JavaScript o CSS personalizado
- comprueba el resultado en ordenador y en móvil
Esto es factible para alguien que se maneje bien con la programación.
Sin embargo, no es lo ideal si lo que buscas es un flujo de trabajo repetible, sobre todo para los clientes o los miembros del equipo que vayan a editar la página web más adelante.
La forma más fácil: utiliza un complemento
El plugin «Añadir imágenes a las descripciones de los elementos de lista de Squarespace » te ofrece una forma más sencilla de insertar imágenes en las descripciones de los elementos de lista de Squarespace.
En lugar de reconstruir toda la sección o utilizar un diseño completamente diferente, puedes mantener la sección de lista nativa de Squarespace y ampliar las funciones del campo de descripción.
Esa es la ventaja de resolverlo a nivel de complemento.
Podrás mantener la estructura de la sección de la lista y, al mismo tiempo, hacer que el contenido de cada elemento sea más flexible.
Cuándo resulta útil este complemento
Este complemento resulta especialmente útil si estás creando:
- tarjetas de precios
- listas de servicios
- cuadrículas de características
- secciones comparativas
- secciones del equipo
- secciones del proceso
- directorios de recursos
- directorios de socios
- diseños de testimonios
- listas de características de los productos
Siempre que la descripción de un elemento de la lista requiera algo más que texto sin formato, este tipo de solución puede resultar útil.
También resulta útil cuando te gustan las opciones de diseño disponibles en las secciones de lista de Squarespace, pero necesitas tener más control sobre lo que aparece dentro de cada tarjeta.
Por qué esto es importante para el diseño
Las imágenes pequeñas pueden facilitar la lectura rápida de las secciones de una lista.
Una breve descripción acompañada de un elemento visual suele ser más fácil de entender que un bloque de texto sin formato.
Esto es especialmente cierto cuando la sección de lista se utiliza para opciones, categorías, características, ventajas o pasos de un proceso.
Por ejemplo, una sección de servicios con pequeños iconos dentro de cada descripción puede ayudar a los visitantes a comprender rápidamente la diferencia entre cada servicio.
Una sección de precios con pequeños iconos de casillas marcadas o insignias puede hacer que la oferta resulte más clara.
Un directorio de socios con pequeños logotipos dentro de cada descripción puede hacer que la página resulte más cuidada y útil.
El objetivo no es solo decorar la página.
El objetivo es que la información resulte más fácil de leer y de identificar.
¿Funciona esto con las secciones de lista de Squarespace 7.1?
Este tipo de solución resulta especialmente útil para las secciones de lista de Squarespace 7.1, donde estas secciones se suelen utilizar para diseños repetibles, como tarjetas, cuadrículas, carruseles y listas de características.
Antes de instalar cualquier complemento, consulta los detalles del producto y las instrucciones de configuración para comprobar que sea compatible con el diseño concreto de tu lista.
Las secciones de listas de Squarespace pueden comportarse de forma diferente según el estilo de diseño, así que comprueba siempre el resultado tanto en ordenador como en móvil.
Buenas prácticas para añadir imágenes en las descripciones de las listas
Utiliza imágenes pequeñas.
Este no es el lugar adecuado para fotos de gran tamaño ni gráficos pesados. Las imágenes deben complementar la descripción, no eclipsarla.
Entre los tipos de imagen recomendados se incluyen:
- iconos
- insignias
- logotipos pequeños
- marcas de verificación
- símbolos
- pequeñas ilustraciones
Mantén un tamaño uniforme en las imágenes de todos los elementos de la lista. Si un icono es mucho más grande que los demás, la sección puede dar la sensación de estar desordenada.
Asegúrate también de que tus imágenes sean significativas. Si una imagen no ayuda al visitante a comprender el artículo más rápidamente, quizá no sea necesario incluirla.
Añade imágenes a las descripciones de los elementos de tu lista en Squarespace
Si quieres añadir imágenes, iconos, logotipos o insignias dentro de las descripciones de los elementos de una lista en Squarespace, utiliza el plugin «Add Images To Squarespace List Item Descriptions» de SquareSkills.
Te permite seguir utilizando las secciones de lista de Squarespace, a la vez que te ofrece más flexibilidad en el campo de descripción.
En el caso de las fichas de servicios, las tablas de precios, las listas de características, los directorios y las secciones comparativas, esta es una forma sencilla de hacer que las secciones de lista de Squarespace resulten más útiles y más visuales.
Preguntas frecuentes
¿Puedo añadir una imagen dentro de la descripción de un elemento de una lista en Squarespace?
Sí. Puedes añadir imágenes en las descripciones de los elementos de una lista de Squarespace mediante código personalizado o un complemento. Squarespace no incluye una opción nativa para subir imágenes directamente en el campo de descripción de los elementos de la lista.
¿Es diferente de la imagen del elemento principal de la lista?
Sí. La imagen principal del elemento de la lista aparece en el área de imagen de dicho elemento. Una imagen incluida en la descripción aparece como parte del área de texto o contenido.
¿Por qué iba a añadir imágenes dentro de las descripciones de las listas?
Quizá te interese añadir iconos, logotipos, insignias, marcas de verificación o pequeños marcadores visuales para que los elementos de la lista sean más fáciles de leer y comprender.
¿Puedo hacerlo sin programar?
La forma más sencilla de hacerlo sin código o con poco código es utilizar un complemento diseñado para añadir imágenes en las descripciones de los elementos de una lista en Squarespace.
¿Qué tipo de imágenes funcionan mejor en las descripciones de las listas?
Los iconos pequeños, las insignias, los logotipos, las marcas de verificación y los gráficos sencillos suelen ser los más adecuados. Evita las imágenes grandes, ya que hacen que los elementos de la lista parezcan abarrotados.
¿Es esto útil para las tablas de precios?
Sí. Las fichas de precios son uno de los mejores ejemplos de uso, ya que los pequeños iconos o insignias pueden ayudar a mostrar las características, las diferencias entre planes y las ventajas incluidas.
¿Esto resulta útil para las secciones de servicios?
Sí. Si utilizas una sección de lista para mostrar los servicios, añadir imágenes pequeñas dentro de la descripción puede facilitar el reconocimiento de cada servicio.
