Contenido destacado
Biblioteca de componentes
Cómo utilizar este componente
El componente de contenido destacado se utiliza para resaltar elementos importantes o distintivos de una página web, dirigiendo la atención a enlaces específicos, ya sean internos o externos.
Utilice este componente para resaltar contenido con texto, una imagen y un botón.
Ver la transcripción del vídeo del componente de contenido destacado.
Contenido destacado: anatomía
- Título
- Frontera
- Descripción
- Botón
- Color de fondo
- Imagen
Prácticas recomendadas
El componente Contenido destacado está diseñado para llamar la atención sobre aspectos únicos o importantes de una página web. No todas las páginas necesitan un componente de contenido destacado.
- Incluir una imagen
Utilice una imagen para mejorar el atractivo visual y la participación.
- Las descripciones son concisas
Proporcione contexto con texto descriptivo, pero sea breve y directo. Trata de usar de 1 a 3 oraciones.
- Usar todos los campos
Incluye un botón, una imagen, un título y una breve descripción.
- Evite los párrafos largos
Mantén las descripciones cortas y directas. Utilice un componente de texto si se necesita información más detallada.
- No lo uses en exceso
El uso de varios elementos de contenido destacado en una sola página puede desviar la atención en demasiadas direcciones.
Mal ejemplo: La descripción es demasiado larga.
Buen ejemplo: Sigue las directrices de mejores prácticas.
Colocación
El componente Contenido destacado incluye los siguientes campos:
- imagen
- título
- descripción
- botón
- ID de anclaje
- Color de fondo (blanco o azul)
Si no necesita la mayoría de los campos, considere un componente diferente.
Opciones
Color de fondo:
- Blanco: Fondo blanco con texto negro.
- Azul: Fondo azul con texto blanco.
Posición de la imagen:
- Izquierda: Imagen a la izquierda, texto a la derecha.
- Derecha: Imagen a la derecha, texto a la izquierda.
Ejemplo: Fondo blanco, posición de la imagen a la izquierda
Ejemplo: Fondo azul, posición de la imagen a la derecha
Lista de verificación del coordinador web
Botón
- El texto del botón debe ser descriptivo. Evite el texto vago como "Leer más" para garantizar la accesibilidad.
- Asegúrese de agregar un enlace para que aparezca el botón.
- Utilice la casilla de verificación para abrir enlaces externos en una nueva pestaña.
Descripción
- La descripción debe presentar a los visitantes la información, no contener todo el contenido.
- Trata de usar de 1 a 3 oraciones. Usa componentes de texto adicionales para contenido detallado.
- La descripción puede incluir hipervínculos, viñetas y estilos. Sin embargo, se prefiere el estilo predeterminado.
Dividir varios componentes
Si es necesario más de un componente de contenido destacado:
- Sepáralos visualmente con bloques de texto o encabezados.
- Alterna entre alineado a la izquierda y a la derecha.
Imágenes
- Utilice únicamente imágenes que se carguen y publiquen en el Administrador de recursos digitales (DAM) dentro de AEM.
- Asegúrese de que se incluyen los metadatos correctos para todas las imágenes.
- Si una imagen es puramente decorativa y no necesita ser leída por tecnologías de asistencia, seleccione la casilla de verificación para marcarla como decorativa.
- Trate de evitar colocar texto en las imágenes. Si es inevitable, asegúrese de que el texto o los detalles importantes tengan suficiente contraste de color para que los usuarios con discapacidad visual puedan distinguirlos.
- Si es necesario, puede anular el texto alternativo predeterminado del DAM. Para hacer esto, seleccione la opción "Anular texto de DAM" e ingrese el texto deseado.
Identificadores de anclaje
- Si utiliza un ID de anclaje, asegúrese de que coincida con el ID del componente Anclaje de navegación.
Siguiendo estas directrices, puede utilizar eficazmente el componente Contenido destacado para mejorar la jerarquía visual y la experiencia del usuario en sus páginas.