Documentación · Referencia del administrador
Referencia de diseño y estilos
Este documento es una referencia para la pantalla Design & Styles del plugin ADP Car Market Hub (Car Market Hub → Design & Styles). Explica cada tarjeta, el significado de cada token de color y tipografía, y cómo interactúa el plugin con tu tema activo.
Cuándo usar este documento
Utiliza esta referencia cuando quieras alinear el aspecto visual de las páginas de vehículos con tu marca, cambiar la tipografía para contextos específicos del frontend, configurar los botones para compartir en redes sociales o el botón de la hoja de datos PDF, controlar la carga diferida de imágenes o añadir CSS personalizado.
Descripción general
La pantalla está organizada en las siguientes tarjetas:
- Color scheme & branding — paleta primaria y colores de los botones.
- Other design settings — tokens de color adicionales, radio de borde y preajuste de tamaño de botón.
- Typography System — tipografía por contexto de página (Detalle del vehículo, Archivo y cuadrícula, Favoritos, Comparar).
- Social sharing buttons — redes que se muestran en las páginas de vehículos individuales y su ubicación.
- PDF Datasheet — interruptor para mostrar un resumen del vehículo optimizado para impresión.
- Performance — carga diferida (lazy loading) nativa para imágenes.
- Layout Manager — enlace a la pestaña dedicada Layout Manager y un interruptor global para usar el orden de bloques personalizado.
- Custom CSS — CSS sin procesar que se añade después de todos los estilos del plugin.
La pantalla sigue el principio "Theme First" (El tema primero): cualquier campo que lo admita puede dejarse vacío para heredar los estilos del tema activo.
Requisitos o prerrequisitos
- Permiso para administrar el plugin.
- Para que el interruptor del Layout Manager surta efecto, debes haber configurado la pantalla Layout Manager.
- Para la hoja de datos PDF, el botón visual se muestra en las páginas de vehículos individuales; el diseño del propio PDF se configura en el PDF Manager.
Instrucciones paso a paso
- Abre Car Market Hub → Design & Styles.
- En Color scheme & branding, establece los colores de tu marca. Utiliza el selector de color o pega valores hexadecimales.
- Abre Other design settings para ajustar tokens opcionales como los colores de precios/enlaces, el radio de borde y el tamaño de los botones.
- Abre Typography System y configura cada pestaña (Detalle del vehículo, Archivo y cuadrícula, Favoritos, Comparar). Deja los campos vacíos para heredar del tema.
- En Social sharing buttons, activa la opción de compartir, elige las redes visibles y selecciona la ubicación.
- Activa Enable PDF datasheet si deseas un botón de imprimir/guardar como PDF en las páginas de vehículos individuales.
- En Performance, activa Lazy loading para utilizar el atributo nativo
loading="lazy"del navegador para las imágenes de los vehículos. - En Layout Manager, decide si deseas aplicar el orden de bloques personalizado guardado en la pestaña Layout Manager.
- Añade cualquier anulación final en Custom CSS si es necesario.
- Guarda los cambios. Cada tarjeta tiene su propio botón Save Design & Styles settings; al guardar cualquiera de ellos se almacena todo el formulario.
Referencia de configuración
Color scheme & branding
| Token | Propósito |
|---|---|
| Primary color | Color de acento principal para elementos destacados, estados activos y enlaces. |
| Secondary color | Se utiliza para encabezados, fondos oscuros y elementos de texto secundarios. |
| Accent color | Color de acento secundario para insignias, etiquetas y elementos de llamada de atención. |
| Card background | Color de fondo para las tarjetas de vehículos y contenedores de contenido. |
| Button background | Color de fondo para botones primarios como "Más detalles" y "Enviar consulta". |
| Button text color | Valor predeterminado #FFFFFF. |
| Button hover background | Déjalo vacío para derivar un tono de hover predeterminado. |
| Button text hover color | Déjalo vacío para heredar. |
Other design settings
| Token | Propósito |
|---|---|
| Price color | Color para los precios de los vehículos. Vacío = heredar del tema. |
| Link color | Color para las migas de pan y los enlaces de texto. Vacío = heredar del tema. |
| Border radius | Se aplica a tarjetas, contenedores de imágenes y botones. Valores de ejemplo: 8px, 0px. Vacío = valor predeterminado de la hoja de estilos. |
| Button size | Preajuste Theme default, Small, Medium o Large para el relleno y el tamaño de fuente. |
Typography System
La tarjeta de tipografía tiene cuatro pestañas que corresponden a los contextos del frontend:
| Pestaña | Se aplica a |
|---|---|
| Vehicle Detail | La página de vehículo individual. |
| Archive & Grid | Las páginas de archivo / listado. |
| Favorites | La página de favoritos/lista de deseos. |
| Compare | La vista de comparación de vehículos. |
Dentro de cada pestaña, la matriz establece la tipografía por rol de texto. Las filas son los roles de texto y las columnas son los tokens de tipografía que puedes configurar para cada rol:
| Fila (rol de texto) | Se aplica a |
|---|---|
| H1 / Car Title | El título principal del vehículo. |
| H2 / Sections & Dealership | Encabezados de sección y el nombre del concesionario. |
| H3 / Details & Agent | Subencabezados de detalles y el encabezado del agente/contacto. |
| Body / Paragraphs & Tables | Texto de párrafo y contenido de tablas. |
| Labels / Key-data & spec labels | Etiquetas de datos clave y especificaciones. |
| Columna (token) | Notas |
|---|---|
| Size (px) | Tamaño de fuente en píxeles. Vacío = heredar del tema. |
| Line Height (em) | Altura de línea como multiplicador em. Vacío = heredar. |
| Weight | Default, 300, 400, 500, 600, 700 o 800. |
| Transform | Default, UPPERCASE, lowercase o Capitalize. |
| Color | Color de texto para el rol. Vacío = heredar. |
Cualquier campo que se deje vacío hereda del tema activo. La matriz completa (incluida la fila Labels) aparece en las pestañas Vehicle Detail, Archive & Grid y Compare. La pestaña Favorites utiliza las mismas columnas pero no incluye la fila Labels.
Social sharing buttons
| Campo | Notas |
|---|---|
| Show sharing buttons on single vehicle pages | Interruptor principal. |
| Visible networks | Selección múltiple: WhatsApp, Facebook, Instagram, X (Twitter), Email, Copy link. |
| Placement | Below gallery, Sticky right sidebar, o End of page. |
Aspecto de cada ubicación y comportamiento en dispositivos móviles:
- Below gallery — una fila horizontal de botones para compartir directamente debajo de la galería de fotos. Visible en todos los tamaños de pantalla.
- Sticky right sidebar — una barra compacta fija en el borde derecho de la pantalla que permanece en su lugar mientras el visitante se desplaza. En esta ubicación, la barra también incluye los botones rápidos de Favorites, Compare y PDF datasheet (cada uno se muestra solo cuando esa función está activada). Para evitar cubrir el contenido en pantallas pequeñas, esta barra se oculta en teléfonos (pantallas ≤ 600 px). Por lo tanto, en pantallas de tamaño móvil, elige Below gallery o End of page si deseas que la opción de compartir siga visible.
- End of page — una fila horizontal en la parte inferior de la página del vehículo, debajo de la sección de contacto. Visible en todos los tamaños de pantalla (por lo que en un teléfono aparece debajo del área de contacto).
Si ves la barra para compartir en la parte inferior de la página en un teléfono "debajo del botón de contacto", la ubicación está configurada en End of page (o el visitante está en una tableta de entre 601 px y 960 px, donde todavía se muestra la Sticky right sidebar). Este es el comportamiento esperado, controlado por la opción Placement descrita anteriormente.
PDF Datasheet
| Campo | Notas |
|---|---|
| Show PDF datasheet download button on single vehicle pages | Interruptor principal. El diseño real del PDF, el logotipo, los campos visibles y el código QR se configuran en la pestaña PDF Manager. |
Performance
| Campo | Notas |
|---|---|
| Enable native lazy loading for vehicle images | Establece el atributo loading="lazy" del navegador en las imágenes de los vehículos para aplazar la carga de imágenes fuera de la pantalla. |
Layout Manager card
| Campo | Notas |
|---|---|
| Use the custom block order instead of the built-in defaults | Interruptor principal para aplicar el orden guardado en la pestaña Layout Manager. |
Custom CSS
| Campo | Notas |
|---|---|
| Custom CSS | CSS sin procesar que se añade después de todos los estilos del plugin. Úsalo con moderación: anula cualquier otro estilo y puede romper las plantillas si no se prueba. |
Notas operativas
- El principio "Theme First" significa que dejar un campo vacío devuelve el control al tema activo. Este es el valor predeterminado más seguro al integrarse con un nuevo tema.
- El color de fondo al pasar el cursor (hover) recurre a un tono derivado si se deja vacío, por lo que los botones primarios siempre tienen un estado hover visible.
- Algunas áreas que antes estaban disponibles en esta pantalla se han movido: las insignias y etiquetas ahora están en el Layout Manager bajo Car Archive Cards, y la calculadora de financiación ahora está en Settings → Frontend Features.
- El interruptor de PDF Datasheet aquí solo controla si el botón es visible. Si el botón se muestra pero el PDF no se ve correctamente, configura el diseño en el PDF Manager.
- Al guardar cualquier tarjeta se envía el formulario completo. Para revertir una sección, restaura el valor predeterminado vacío y vuelve a guardar.
Resolución de problemas
- Los cambios de color no aparecen. Borra las cachés del frontend o de la CDN. Confirma que el selector de color realmente haya guardado un valor (el campo debe mostrar un código hexadecimal).
- Los campos de tipografía parecen no tener efecto. Los campos vacíos heredan intencionadamente del tema. Establece un valor explícito si necesitas anular los estilos del tema.
- La carga diferida (lazy loading) no funciona. Algunos temas o plugins de terceros reemplazan el marcado de la imagen. Confirma que la etiqueta
<img>renderizada incluyaloading="lazy". Verifícalo en la versión actual del plugin antes de publicar. - Falta el botón de la hoja de datos PDF. Confirma que el interruptor esté activado y que la plantilla de vehículo individual todavía incluya el área de botones del plugin. El botón solo se renderiza en las páginas de vehículos individuales.
- El interruptor "use custom block order" está activado pero el diseño no cambia. Abre la pestaña Layout Manager y confirma que se haya guardado un diseño personalizado para la zona afectada.
- El CSS personalizado ha roto una página. Elimina o acorta el fragmento de código y vuelve a guardar. El CSS personalizado anula todo lo demás.