Sección de código personalizado

La sección de Código Personalizado te permite incrustar tu propio HTML y CSS directamente en la página principal de la base de conocimientos. Existe para situaciones donde los bloques estándar del cuerpo como texto enriquecido, tarjetas multicolumna, imagen con texto, no te dan el diseño o la funcionalidad que necesitas. Con este bloque tienes control total sobre lo que se renderiza y cómo se ve, siendo la elección adecuada para contenido dinámico, incrustaciones de terceros o tratamientos visuales personalizados que no son posibles con los otros bloques.

Cuándo usar la sección de código personalizado

• Banners dinámicos - Mostrar una promoción estacional, un anuncio de lanzamiento de producto o un aviso de mantenimiento usando HTML personalizado que puedas actualizar independientemente del diseño de la página.
• Temporizadores de cuenta atrás - Incorpora una cuenta atrás con JavaScript para eventos, lanzamientos u ofertas por tiempo limitado.
• Widgets de terceros incrustados : Añade incrustaciones de servicios externos como reproductores de vídeo, creadores de formularios, widgets de chat o insignias de página de estado, que no tengan un bloque dedicado.
• Contenido personalizado - Cuando necesites un diseño o tratamiento visual específico que no sea posible con el texto enriquecido o los bloques de tarjetas multicolumna, escribe tu propio HTML y CSS para lograrlo.

Cómo añadir una sección de código personalizado

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega al Sitio de la base de conocimientos > Personalización del sitio.
3. Haz clic en el botón Personalizar sitio .

4. En el desplegable izquierdo, selecciona Página de inicio . La sección Cuerpo muestra la lista de bloques corporales.
5. Haz clic en Añadir sección y selecciona Sección de código personalizado. El bloque se añade a la lista.

6. Usa el icono de Reordenar () para reorganizar el bloque. Los iconos de Reordenar y Ocultar () aparecen cuando pasas el cursor sobre cualquier bloque de cuerpo en la sección de Cuerpo.

Cómo configurar la sección de código personalizado

1. Haz clic en el bloque de sección de código personalizado para abrir el editor.
2. En la pestaña HTML , añade o edita tu código HTML.
3. En la pestaña CSS , añade o edita tu código CSS.
4. Haz clic en Guardar para guardar tus cambios como borrador.
5. Haz clic en Vista previa para ver cómo se muestra el código en la página de la base de conocimientos.
6. Haz clic en Publicar para poner los cambios en marcha.

Mejores prácticas

• Siempre previsualiza antes de publicar : las diferencias de renderizado entre el editor y el sitio en vivo pueden ser sutiles. Usa la opción de Vista previa para verificar el diseño y el estilo antes de hacer el compromiso.
• Mantén el HTML autónomo : evita referenciar hojas de estilo o scripts externos que puedan bloquear la carga de páginas o entrar en conflicto con los estilos propios de Document360.
• Define el alcance de tu CSS : usa nombres específicos de clase para tus elementos personalizados para evitar sobrescribir los estilos predeterminados del sitio.
• Usa la pestaña CSS para todo el estilo: mantener los estilos separados del marcado facilita el mantenimiento y actualización del código.
• Prueba entre modo claro y oscuro : si tu base de conocimientos soporta el modo oscuro, verifica que tu código personalizado se renderice correctamente en ambos.

Preguntas frecuentes