Contenido destacado
Biblioteca de componentes
Cómo usar este componente
El componente de contenido destacado se utiliza para resaltar elementos importantes o distintivos en 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.
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
Usa una imagen para mejorar el atractivo visual y el compromiso.
- Mantenga las descripciones concisas
Proporcione contexto con el texto de descripción, pero manténgalo breve y directo. Apunta a 1-3 oraciones.
- Usar todos los campos
Incluye un botón, una imagen, un título y una breve descripción.
- Evite párrafos largos
Mantenga las descripciones cortas y directas. Utilice un componente de texto si necesita información más detallada.
- No use 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 pautas 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.
- Apunta a 1-3 oraciones. Utilice componentes de texto adicionales para obtener 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árelos visualmente con bloques de texto o encabezados.
- Alterna entre alineados a la izquierda y a la derecha.
Imágenes
- Utilice únicamente imágenes que se carguen y publiquen en Digital Asset Manager (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 discapacidades visuales puedan distinguirlos.
- Si es necesario, puede anular el texto alternativo predeterminado del DAM. Para ello, seleccione la opción "Anular texto de DAM" e introduzca el texto deseado.
ID de anclaje
- Si utiliza un ID de anclaje, asegúrese de que coincida con el ID del componente Ancla 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.