Plantilla de elemento de cuadro de consejo

Un cuadro de consejo resuelve un problema de priorización: los consejos útiles pero opcionales pueden desaparecer dentro de un procedimiento largo, pero trasladarlos a la secuencia principal puede hacer que un flujo de trabajo obligatorio parezca más largo o más estricto de lo que es. El elemento crea un límite visible alrededor del consejo que mejora la ejecución sin cambiar la definición de «completado». Esta referencia muestra cada bloque de la plantilla bloqueada de 14 bloques.

Por qué este elemento es importante

Los lectores escanean páginas instructivas en busca de decisiones: qué debe ocurrir, qué puede salir mal y qué podría facilitar el trabajo. Un cuadro de consejo le da a la orientación opcional un rol visual y semántico estable. Su etiqueta permite que el lector comprenda el estado del consejo antes de leer la frase. Esto reduce el riesgo de que una optimización opcional se confunda con un requisito obligatorio de aprobación.

La capacidad de extracción automática significa que un sistema automatizado puede identificar un fragmento delimitado de contenido y retener su significado cuando la página circundante no está presente. La etiqueta explícita del consejo, el título corto y el cuerpo autocontenido mejoran ese límite. El cuadro debería tener sentido como texto plano: «Consejo: revisa el denominador — compara porcentajes solo cuando usen la misma población y período». El estilo visual ayuda a las personas a escanear, pero las palabras transmiten el significado.

El elemento falla cuando se convierte en decoración. Un ánimo genérico como «Recuerda crear contenido excelente» no aporta ninguna decisión, técnica ni consecuencia. También falla cuando un autor oculta un requisito crítico dentro de un contenedor visualmente opcional.

Cuándo usarlo y cuándo no usarlo

Usa un consejo cuando la recomendación sea opcional, concreta, adyacente a la tarea que mejora y comprensible sin una explicación larga. Buenos candidatos incluyen una secuencia eficiente, un diagnóstico útil, un atajo reversible, una técnica de verificación o una forma específica de evitar retrabajo.

No uses un consejo para advertencias de seguridad, calificaciones legales, acciones irreversibles, entradas obligatorias, criterios de aceptación, definiciones que el lector necesitará después o hechos que respaldan el argumento principal. Usa una llamada de tipo important para una condición que pueda invalidar el resultado. Coloca las acciones obligatorias en el proceso numerado. Coloca las pruebas en la prosa o celda de tabla que respaldan.

Reglas de posición en el documento

La posición tiene significado. Un consejo funciona mejor inmediatamente después de la instrucción o explicación que mejora, porque el lector puede aplicarlo sin tener que retener el consejo en la memoria. No debe interrumpir la respuesta directa, separar una frase de su evidencia, ni colocarse entre un encabezado y el párrafo que define ese encabezado.

Reglas de posición del cuadro de consejo

Anatomía

La anatomía tiene cuatro regiones con significado. El tipo controla la gravedad y la etiqueta. El título opcional nombra la acción o decisión. El cuerpo proporciona una técnica y su consecuencia. La posición circundante conecta el consejo con la instrucción que modifica. El espaciado, el borde, el icono y el color pertenecen al sistema de diseño; los autores no los codifican en el contenido.

La anotación debe identificar las regiones semánticas, no las medidas en píxeles. Esas etiquetas siguen siendo útiles si los tokens visuales cambian más adelante.

Ejemplos de diseño

La galería debe mostrar el elemento bajo presión de contenido realista: un consejo corto de una frase, un consejo de dos párrafos, un consejo que contenga código en línea, y la vista en ventana estrecha. Mantén el consejo subyacente constante para que los revisores puedan comparar la estructura y jerarquía.

Una vez que los archivos existan, renderízalos con features-with-4-images-grid. Se prefiere el componente de galería sobre la cuadrícula de imágenes de producto porque combina especificaciones neutrales con exactamente cuatro imágenes y no introduce controles comerciales.

Parámetros

Los parámetros son un contrato de interfaz. Los tipos y límites exactos evitan que un autor escriba una etiqueta mientras otro codifica el mismo significado como prosa del cuerpo. La columna de fuente indica quién posee el valor para que los revisores sepan si deben corregir el contenido, los metadatos o el componente.

Parámetros del cuadro de consejo

Estos son límites editoriales, no validación del renderizador. Excederlos requiere una razón visible en la revisión. Si el cuerpo necesita varios subtítulos, listas o citas, probablemente se trata de una sección más que de un consejo.

Sintaxis y ejemplos de código

Las notaciones a continuación tienen el mismo significado. Markdown portátil usa una directiva que puede ser transformada por diferentes sistemas de publicación. Hugo usa el shortcode callout existente. WordPress usa una representación de shortcode a nivel de proyecto; una implementación en WordPress debe registrar ese shortcode o mapear la estructura a un bloque personalizado.

Copia el cuadro de consejo en tu sistema de publicación

Mantén el tipo, título y cuerpo equivalentes en las tres notaciones.

Markdown portátil

:::tip{title="Revisa el denominador"}
Compara porcentajes solo cuando usen la misma población y período.
:::

Hugo

{{< callout tip title="Revisa el denominador" >}}Compara porcentajes solo cuando usen la misma población y período.{{< /callout >}}

WordPress

[tip title="Revisa el denominador"]Compara porcentajes solo cuando usen la misma población y período.[/tip]

Esto resuelve el principal riesgo de reutilización de la plantilla. El componente de pestañas existente acepta bloques de código, no requiere imágenes, expone roles de pestaña y panel, y admite las tres etiquetas fijas. Un nuevo shortcode duplicaría el comportamiento funcional y añadiría otra interfaz que mantener.

Ejemplos buenos y malos

Esto funciona porque da una acción específica, explica el motivo y sigue siendo opcional dentro de un procedimiento de análisis más amplio.

La redacción es clara, pero el tipo es incorrecto. La aprobación legal es un requisito obligatorio, por lo que presentarlo como un consejo subestima la consecuencia. Muévelo a la lista de verificación principal o etiqueta la llamada como importante.

Otro ejemplo débil es «Consejo profesional: optimiza tu contenido para mejores resultados». No contiene ninguna acción observable, restricción, método ni definición de «mejores». Elimínalo o sustitúyelo por una técnica que el lector pueda realizar y verificar.

Esquema de marcado y accesibilidad

Un cuadro de consejo no requiere un tipo Schema.org independiente. Sigue siendo parte del Article o TechArticle contenedor. No marques el consejo opcional como HowToStep; hacerlo lo promovería falsamente al proceso obligatorio. Si la página en sí misma califica para el esquema HowTo según la política del sitio, solo los pasos obligatorios pertenecen a la secuencia de pasos.

La accesibilidad comienza con la semántica del texto. La etiqueta visible debe decir «Consejo»; el color y el icono no pueden transmitir la distinción por sí solos. El título debe describir la acción, el cuerpo debe ser legible en el orden del documento y los enlaces deben tener sentido fuera del cuadro visual. Evita el texto del cuerpo en mayúsculas, etiquetas solo con emojis, controles interactivos anidados y una serie de cuadros adyacentes que se vuelven más difíciles de navegar que los párrafos ordinarios.

El renderizador actual de callout genera un contenedor etiquetado y un cuerpo en Markdown. Los autores siguen siendo responsables de una redacción significativa, el orden de los encabezados alrededor del cuadro, los enlaces descriptivos y mantener el código o las tablas fuera cuando crearían una interfaz anidada ilegible.

Reglas de redacción

Comienza con la acción. Explica el beneficio o el error evitado en la misma frase o en la siguiente. Usa una idea por cuadro, de 20 a 80 palabras, no más de dos párrafos cortos y como máximo un enlace. Prefiere un título personalizado cuando «Consejo» por sí solo no revele qué instrucción cercana modifica.

Usa un lenguaje directo y tranquilo. No infles el consejo opcional con «siempre», «nunca», «crítico» o «esencial». No agregues un consejo solo para que una página se sienta diseñada. Si la información es central, devuélvela a la narrativa principal. Si es simplemente un ánimo agradable, elimínalo.

Los consejos repetidos muy juntos indican un problema estructural. Consolida los consejos relacionados en una subsección, o decide qué puntos son en realidad pasos obligatorios. El elemento debe aumentar el contraste en la jerarquía de información, no convertir toda la página en un campo de cuadros que compiten entre sí.

Qué tipos de publicaciones lo usan y dónde

Las guías prácticas usan consejos después del paso que mejoran. Las guías definitivas los usan después de una explicación compleja cuando una práctica opcional evita retrabajos comunes. Las páginas de comparación los usan con moderación junto a una nota de método, no como sustituto de evidencia. Las listas de verificación los usan después de un elemento cuando el consejo mejora la eficiencia pero no cambia el estado de «completado».

El catálogo más amplio de tipos de publicaciones SEO determina el orden del documento. El centro de elementos de contenido SEO determina la familia de elementos y las alternativas relacionadas. El autor de la página debe consultar ambos: el contrato del elemento explica cómo se comporta el cuadro, mientras que el tipo de publicación explica si ese cuadro pertenece a esa posición.

Lista de verificación de QA

• El estado opcional es verdadero — Omitir el consejo no hace que la tarea esté incompleta, sea insegura o inválida
• El objetivo es claro — El título o la primera frase nombra la instrucción o decisión que se está mejorando
• Una idea está delimitada — El cuerpo contiene una técnica y su consecuencia, no una subsección oculta
• La redacción sobrevive a la extracción — La etiqueta, el título y el cuerpo conservan su significado sin depender del color o pronombres cercanos
• La ubicación es adyacente — El cuadro sigue a la instrucción completa que modifica sin interrumpir la evidencia
• Se respetan los límites — El cuerpo se mantiene dentro de dos párrafos cortos y no usa más de un enlace
• La sintaxis portátil coincide — Los ejemplos en Markdown, Hugo y WordPress preservan el mismo tipo, título y cuerpo

Un revisor debe rechazar el elemento si falla cualquiera de las verificaciones, incluso si su aspecto visual parece correcto. El uso semántico incorrecto se propaga cuando los autores copian páginas existentes, por lo que corregir el tipo es más importante que preservar un diseño familiar.

FAQ

Preguntas frecuentes

El diseño de academy proporciona el panel de conversión final. El ejemplo visible, la especificación, las pestañas de tres notaciones, las reglas de contenido y las verificaciones de QA forman juntos el contrato del elemento implementable; no se requiere ningún diseño adicional específico del elemento.