Ir al contenido

Lista de logotipos

Cree una cuadrícula adaptable de logotipos para señales de confianza, marcas asociadas o navegación visual.

Muestre una cuadrícula limpia de logotipos, insignias o mosaicos de imagen enlazados. Esta sección encaja especialmente bien con marcas asociadas, señales de confianza, puntos de venta, certificaciones o navegación sencilla basada en imágenes cuando los diseños con mucho texto resultan demasiado recargados. Para obtener una visión general más amplia de cómo encaja esto en un tema, consulte la documentación de Shopify sobre secciones y bloques

Los controles principales del diseño determinan lo densa o espaciosa que se siente la cuadrícula de logotipos. Use la alineación horizontal para colocar la cuadrícula dentro del área de contenido y, después, ajuste el número de columnas en escritorio, tableta y móvil para que los logotipos sigan siendo reconocibles en todos los tamaños de pantalla.

La tableta puede heredar el número de columnas de escritorio cuando no necesite un diseño intermedio aparte. Eso simplifica la configuración y, por lo general, funciona bien cuando la mayoría de los logotipos comparten proporciones similares.

Si los logotipos empiezan a verse demasiado pequeños, reduzca el número de columnas antes de aumentar el ancho de los logotipos individuales. Una cuadrícula más clara suele rendir mejor que una más densa.

Grupos de ajustes específicos de la sección

Sección titulada «Grupos de ajustes específicos de la sección»

Estas sustituciones de estilo afectan al área del encabezado de la sección, incluido el icono, el encabezado y el subtítulo. Úselas cuando esta cuadrícula de logotipos necesite su propio tratamiento visual sin cambiar el resto de la página.

Si los propios logotipos tienen mucho color, mantenga simples los colores del encabezado para que la sección no se vea recargada. Cuando se combinan con un fondo personalizado, compruebe cuidadosamente el contraste.

  1. Button
  2. Logo item
  3. Rich text

El bloque Button añade una llamada a la acción independiente dentro de la sección. Esto funciona bien cuando los logotipos apoyan un destino más amplio, como una página completa de socios, una página de prensa o una página de información sobre venta al por mayor.

Más información sobre el Botón.

  1. Use un bloque Button cuando la sección necesite un siguiente paso claro más allá de los enlaces individuales de los logotipos.
  2. Mantenga distinto el propósito del botón si los propios logotipos también son clicables.
  3. La visualización móvil a ancho completo puede facilitar pulsar la acción cerca del final de una página.

El bloque Logo item es el bloque de contenido principal de esta sección. Cada uno puede incluir una imagen, un texto o leyenda opcional y un enlace opcional, por lo que puede funcionar como un muro de logotipos sencillo o como un elemento de navegación visual.

Más información sobre el Elemento de logotipo.

  1. Use imágenes de origen de tamaño similar para conseguir una cuadrícula general más ordenada.
  2. Ajuste el ancho máximo de imagen por bloque para corregir logotipos que parezcan visualmente demasiado grandes o demasiado pequeños.
  3. Añada leyendas solo cuando aporten un contexto útil, como el tipo de socio o el destino.

El bloque Rich text añade un breve texto de apoyo dentro de la sección. Úselo para dar un contexto breve, por ejemplo, por qué importan estos logotipos o qué pueden esperar los visitantes si los logotipos se usan como navegación.

Más información sobre el Texto enriquecido.

  1. Mantenga el texto breve para que la sección siga leyéndose principalmente como una cuadrícula de logotipos.
  2. Use alineación separada para escritorio y móvil si el texto necesita una posición diferente en pantallas pequeñas.
  3. El color de fondo del bloque puede ayudar a que el texto de apoyo destaque, pero úselo con moderación.

Ajustes de encabezado le permiten añadir una leyenda, un encabezado, un subtítulo, un icono y un botón opcional a nivel de sección sobre la cuadrícula de logotipos. Esto resulta útil cuando los logotipos necesitan contexto, como marcas destacadas, certificaciones o menciones en medios.

Un encabezado breve suele mejorar la claridad y la capacidad de revisión rápida. Si también añade bloques Button, asegúrese de que cada acción tenga un propósito distinto.

Ajustes de espaciado controlan el espacio por encima y por debajo de la sección. Aumente el espaciado cuando la lista de logotipos deba sentirse más destacada, o redúzcalo cuando esté entre varias secciones de contenido compactas.

A menudo, el espaciado en móvil necesita un ajuste aparte porque las filas apiladas pueden hacer que la sección parezca más alta de lo esperado.

Ajustes de fondo de sección le permiten añadir un color, degradado, imagen o vídeo detrás de la sección. Esto puede crear un momento de marca más fuerte, pero los fondos recargados pueden competir con los logotipos.

Ajustes de separador añaden una línea encima o debajo de la sección. Son más útiles cuando la lista de logotipos necesita una separación visual más limpia del contenido circundante.

Para la mayoría de las secciones de logotipos, los separadores sutiles funcionan mejor que los decorativos.

Ajustes de visibilidad controlan si la sección aparece en escritorio, móvil o en ambos. Esto es útil cuando quiere una presentación móvil más sencilla o una sección diferente en otro lugar para pantallas más pequeñas.

Los controles de visibilidad a nivel de bloque también pueden ayudarle a recortar contenido de apoyo sin ocultar toda la sección.

Ajustes de ancho controlan el ancho del contenido y el ancho externo de la sección. Los diseños más anchos pueden admitir cuadrículas de logotipos multicolumna más equilibradas, mientras que los diseños más estrechos pueden hacer que un conjunto más pequeño de logotipos se perciba de forma más intencionada.

Es posible que el editor no refleje por completo los cambios de ancho, así que compruebe la vista previa de la página en vivo cuando ajuste el diseño.

  1. Priorice el reconocimiento. Elija números de columnas que mantengan los logotipos fáciles de identificar de un vistazo.
  2. Normalice el tamaño visual. Use ajustes de ancho por logotipo para equilibrar marcas con proporciones muy diferentes.
  3. Enlace con intención. Si los logotipos actúan como navegación, asegúrese de que cada destino sea claro y útil.
  4. Añada contexto cuando sea necesario. Use el encabezado o un bloque breve de Rich text para explicar por qué estos logotipos están agrupados.
  5. Previsualice en varios dispositivos. Compruebe los diseños de escritorio, tableta y móvil antes de publicar, especialmente cuando combine logotipos con texto o botones.
  6. Revise el móvil por separado. Los controles de escritorio y móvil pueden cambiar la alineación, la visibilidad y el comportamiento de las imágenes, así que confirme ambas vistas antes de publicar.
  7. Mantenga legibles los elementos visuales fuertes. Los archivos transparentes, los fondos personalizados o los medios separados para escritorio y móvil pueden cambiar el contraste y el recorte, así que pruebe la combinación final para verificar la claridad.
  8. Use un estilo sencillo para las áreas compartidas. Mantenga los colores y fondos predeterminados cuando quiera que la cuadrícula se integre; use sustituciones explícitas solo cuando quiera que esta sección destaque.