Tabs

La función Pestañas en el editor avanzado WYSIWYG te permite organizar el contenido relacionado en pestañas separadas dentro de un mismo artículo. Utiliza pestañas para presentar información compleja o extensa de forma estructurada, de modo que los lectores puedan acceder directamente a lo que necesiten sin tener que desplazarse por toda la página.

¿Cuándo usarías las pestañas

• Utiliza pestañas para presentar el mismo proceso en múltiples plataformas o sistemas operativos — por ejemplo, pasos de instalación para Windows, macOS y Linux lado a lado
• Utiliza pestañas para mostrar la misma llamada a API o fragmento de código en varios idiomas sin apilar varios bloques de código
• Utiliza pestañas para separar el contenido por tipo de audiencia — por ejemplo, instrucciones para Administrador y Usuario Final dentro del mismo artículo
• Utiliza pestañas para organizar opciones de configuración o ajustes distintos que compartan el mismo contexto pero se apliquen a diferentes escenarios
• Utiliza pestañas para reducir la longitud de las páginas en artículos con mucho contenido donde cada sección es autónoma y es poco probable que los lectores necesiten todas las secciones a la vez

Creación de pestañas

Escribe el comando /tabs de barra y pulsa Enter. Una estructura predeterminada de pestañas con dos pestañas aparecerá en tu artículo.

Añadir pestañas adicionales

Pasa el cursor por la barra de pestañas y haz clic en el botón + , luego introduce el nombre de la nueva pestaña. Repite según sea necesario para crear varias pestañas.

Elementos soportados dentro de las pestañas

Puedes añadir los siguientes elementos al contenido de tu pestaña:

• Eddy AI Writer — Genera contenido impulsado por IA directamente en tus pestañas.
• Formato de texto — Utiliza encabezados (H2, H3, H4), listas con viñetas, listas numeradas y listas de comprobación.
• Imágenes y vídeos — Inserta, redimensiona y gestiona imágenes o vídeos.
• Tablas — Añade y personaliza filas y columnas.
• Hipervínculos — Inserta y formatea enlaces para facilitar la navegación.
• Señalamientos y notas privadas — Añadir señales o notas privadas visibles solo para usuarios específicos.
• Bloques de código y código en línea — Mostrar fragmentos de código o código en línea para referencias técnicas.
• Variables y fragmentos — Reutilizar contenido entre pestañas usando fragmentos y variables.
• Términos del glosario — Añade términos con definiciones visibles al pasar el cursor o hacer clic.
• Otras mejoras — Utiliza emojis, separadores, acordeones y ecuaciones LaTeX.

Pestañas de edición

Duplicación de pestañas

Haz clic en el icono Editar junto al nombre de la pestaña y luego haz clic en Duplicar pestaña desde el menú. Aparecerá una nueva pestaña junto a la original con el mismo título, contenido y color.

Cambio de nombre de pestañas

Haz clic en el icono de Editar junto al nombre de la pestaña, pasa el cursor sobre Cambiar nombre de pestaña y luego introduce el nuevo nombre (hasta 50 caracteres). El nombre actualizado se reflejará automáticamente en la pestaña.

Eliminación de pestañas

Haz clic en el icono de Editar junto al nombre de la pestaña y luego haz clic en Eliminar en el menú. Las pestañas eliminadas pueden restaurarse usando Deshacer (Ctrl + Z).

Personalización de pestañas

Cambio de fondo de pestañas y color de borde

Selecciona el bloque de contenido de la pestaña y luego haz clic en Color de fondo de la pestaña o Color del borde de la pestaña desde las opciones de personalización. Usa el selector de color para seleccionar un color usando colores predefinidos, valores HEX o valores RGB. Haz clic en Borrar en el selector de color para eliminar cualquier color aplicado.

Moviendo pestañas

Pasa el cursor sobre el icono de arrastrar de seis puntos a la izquierda del nombre de la pestaña, haz clic y mantén pulsado, arrastra la pestaña hasta la posición deseada y luego suelta para soltarla.

Si tu lista de pestañas va más allá del área visible, arrastra la pestaña hacia el área gris oscuro cerca de la flecha derecha o izquierda para desplazarte y acceder a secciones ocultas.

Arrastra hasta que aparezca una línea azul en el centro de la posición de la pestaña de objetivo, y luego suelta. La lista se realineará automáticamente.

Visualización de pestañas en el sitio de la Base de Conocimientos

• Puedes cambiar entre pestañas sin necesidad de actualizar la página.
• Los colores de las pestañas, títulos y diseños aparecen igual en el sitio de la base de conocimiento, los widgets y las extensiones.
• Las pestañas funcionan sin problemas en dispositivos móviles.
• Al exportar un artículo con tabulaciones como PDF, el contenido de las tabulaciones aparece secuencialmente con el título de cada pestaña mostrado como un encabezado.

Casos de uso / Ejemplos

• Instrucciones específicas de la plataforma — Muestra los pasos de instalación para Windows, Mac y Linux uno al lado del otro para que los lectores solo lean la pestaña correspondiente.
• Contenido basado en roles — Instrucciones separadas para Administradores, Editores y Visores dentro del mismo artículo, evitando la necesidad de tres artículos separados.
• Código en varios lenguajes — Mostrar la misma llamada a la API en Python, JavaScript y cURL, permitiendo a los desarrolladores elegir su lenguaje preferido.
• Comparaciones antes y después — Muestra el estado de una configuración antes y después de un cambio, facilitando la comparación a los lectores.
• Documentación de características escalonadas — Separa el contenido por plan de precios (Inicial, Profesional, Empresarial) dentro de un único artículo de reportaje.

Mejores prácticas

• Mantén los nombres de las pestañas breves y descriptivos: los lectores deben entender inmediatamente qué contiene cada pestaña sin abrirla. Los nombres de las pestañas permiten hasta 50 caracteres, pero cuanto más corto, mejor.
• Usa pestañas solo cuando el contenido es paralelo y mutuamente excluyente: los lectores solo deberían necesitar una pestaña a la vez. Si los lectores necesitan leer todas las pestañas en secuencia, un solo artículo de desplazamiento es más apropiado.
• Evita usar más de cinco pestañas en un solo bloque siempre que sea posible: demasiadas pestañas pueden hacer que la navegación sea confusa, especialmente en móvil.
• Utiliza una estructura de contenido consistente entre pestañas: si una pestaña tiene una introducción, pasos y una nota, aplica la misma estructura a todas las pestañas para que los lectores sepan qué esperar.
• No confíes en las pestañas para contenido que debe ser detectable mediante búsqueda: los encabezados dentro de las pestañas no se incluyen en el índice del artículo y pueden tener una visibilidad limitada en la búsqueda.

Preguntas frecuentes