Configurar la identidad de marca y los perfiles sociales

Usa Settings → POM Theme → Design system → Brand para los recursos de identidad que reutiliza el tema.

Identidad del sitio

Los ajustes de Brand ofrecen:

• Logo URL, que recurre a la URL predeterminada del sitio cuando está vacía;
• Logo para la cabecera normal del sitio;
• opcionales Logo width y Logo height atributos;
• Mobile version logo con ancho y alto opcionales;
• Mobile navigation logo con Mobile navigation logo width y Mobile navigation logo height;
• Side navigation logo opcionales; con Side navigation logo width y Side navigation logo height;
• Site Icon;
• Render SVG logo;
• Display the site title? y Display the site description?.

El Site Icon debe ser cuadrado y de al menos 512 × 512 píxeles, tal como se indica en la interfaz.

Los enlaces del logo de la cabecera y del módulo Logo usan Settings → General → Site Title como su nombre accesible, incluidos los logos SVG en línea. Si el título está vacío, usan la descripción corta y, después, la etiqueta traducida «Inicio». Puedes dejar la descripción corta vacía sin perder el nombre del enlace del logo.

Configurar los recursos

1. Prepara variantes de logo con proporciones coherentes y el contraste suficiente para sus fondos previstos.
2. Selecciona los logos normal y móvil.
3. Añade el ancho y el alto intrínsecos cuando se conozcan las dimensiones renderizadas.
4. Selecciona los logos específicos de navegación donde sea necesario. Introduce el ancho y el alto de cada logo como números enteros positivos en píxeles, sin unidades, manteniendo las proporciones de la imagen.
5. Selecciona el Site Icon.
6. Activa el renderizado de SVG solo para un logo SVG de confianza que se muestre correctamente en los contextos admitidos.
7. Guarda y revisa la cabecera, la navegación móvil y la navegación lateral donde se utilicen.

El logo de la navegación móvil aparece dentro del panel del menú móvil; es distinto de Mobile version logo, que aparece en la cabecera en tamaños de pantalla móviles. El logo de la navegación lateral tiene sus propias dimensiones. Estos ajustes añaden atributos numéricos width y height a la imagen de cada panel, incluidos los archivos SVG mostrados como imágenes, para que el navegador pueda reservar espacio antes de que cargue la imagen. Por ejemplo, un logo de 200 × 56 usa width 200 y height 56. El CSS puede seguir escalando la imagen para ajustarla al diseño de la navegación.

Proporciona ambas dimensiones para establecer la proporción de aspecto. Dejar una dimensión vacía omite ese atributo; los valores no se heredan del logo de la cabecera principal ni se leen automáticamente del archivo de imagen.

Usar logos distintos por idioma

Cuando un logo contenga un eslogan u otro texto, traduce su URL de imagen en POM Translate, en Translations → Translate URLs → Custom links. Configura primero los idiomas principal y adicionales en POM Translate y sube las imágenes traducidas a la Biblioteca de medios del sitio.

1. Mantén las imágenes del idioma principal en Logo, Mobile version logo, Mobile navigation logoy Side navigation logo.
2. Guarda los ajustes de Brand y abre Translations → Translate URLs → Custom links y elige el idioma de destino.
3. Localiza la URL de imagen detectada. Used in identifica los campos de logo correspondientes de POM Theme logo fields.
4. Introduce la URL completa de la imagen traducida en URL for localey selecciona Save custom URLs.
5. Visita ese idioma en escritorio y móvil y abre los paneles de navegación.

Una traducción vacía usa la imagen original, y el idioma principal usa siempre los campos originales. La correspondencia pertenece a la URL de la imagen: si varios campos de logo comparten la misma URL de origen, comparten su traducción. Las URL de origen distintas pueden traducirse de forma independiente. Borrar la URL traducida de un idioma restaura la imagen original para ese idioma.

El pie de página y el módulo Logo también usan estas variantes cuando emplean las imágenes de Brand. La navegación a pantalla completa no tiene un campo de logo integrado independiente; un módulo Logo en su contenido reutilizable sigue la misma selección de idioma. Las imágenes de los ajustes preestablecidos de Header colors también aparecen en Custom links, identificadas por su Config name. Un ajuste preestablecido de cabecera seleccionado o un módulo Logo version mantiene prioridad sobre Brand, y su propia URL de origen se traduce con el mismo diccionario. Sin una correspondencia, esa imagen seleccionada permanece sin cambios.

Las dimensiones y Render SVG logo siguen siendo compartidas entre idiomas. Usa imágenes traducidas con proporciones compatibles y, cuando el renderizado de SVG en línea esté activado, usa variantes SVG locales de confianza. El Site Icon se mantiene compartido. Desactivar POM Translate muestra los logos originales.

Redes sociales

Abre Social networks dentro de Brand y añade una entrada por perfil. Cada entrada admite:

• Network name;
• Network title, utilizada para una descripción accesible y reconocible del enlace;
• Display network name;
• URL;
• Network icon.

Elige los valores disponibles de Social links position donde deben aparecer esos perfiles. La lista se adapta a las barras de cabecera y los diseños de navegación activados.

Para el pie de página y el widget Social links , Display network name controla si el nombre de la red aparece junto al icono. Déjalo sin marcar para mostrar solo iconos. Network title proporciona el nombre accesible del enlace mediante aria-label, con independencia de esa casilla; usa una descripción como «Visítanos en LinkedIn». Si el título está vacío, estos enlaces usan Network name como su nombre accesible.

El bloque Gutenberg Social Icons y el componente Legacy Social Icons también leen esta lista compartida. Ofrecen estilos y colores de paleta por instancia, mientras que los enlaces de perfil siguen siendo globales. Cada entrada necesita una URL válida y un icono de biblioteca disponible; las entradas incompletas se omiten. Tras cambiar la lista, refresca la vista previa del bloque y borra cualquier caché de página pública. No es necesario volver a guardar cada página.

Verificación

Comprueba el sitio público con la sesión cerrada:

• cada logo enlaza al destino previsto;
• las variantes móvil y de escritorio aparecen en el contexto correcto;
• cambiar de idioma selecciona las variantes de logo configuradas, y borrar una URL traducida restaura su original;
• abrir los paneles de navegación móvil y lateral muestra las proporciones correctas del logo, y cada imagen de logo tiene los atributos width y height configurados;
• el Site Icon aparece en la pestaña del navegador;
• el título y la descripción del sitio mostrados coinciden con la identidad prevista;
• los enlaces sociales tienen destinos correctos y nombres comprensibles.

Para las entradas del pie de página o del widget Social links, desactiva Display network name y guarda: el icono debe permanecer y el nombre visible debe desaparecer. Inspecciona el nombre accesible del enlace en las herramientas de accesibilidad de tu navegador y confirma que coincide con Network title. Vuelve a marcar la casilla para mostrar de nuevo el nombre junto al icono.

Los iconos de acción compartidos, como búsqueda, menú, cerrar y carrito, se tratan en Crear y usar bibliotecas de iconos SVG.