--- title: "Imágenes con bloque de texto" slug: "image-and-text" description: "Add text and an image to the home page using the Image and text block. This is similar to the Text block but also includes an image. For example, you want to showcase a feature and its description" tags: ["Customization", "Body blocks"] updated: 2026-06-22T08:47:53Z published: 2026-06-22T08:47:53Z canonical: "docs.document360.com/image-and-text" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Imágenes con bloque de texto El bloque Imagen con texto te permite colocar una imagen junto a un encabezado y un párrafo en la página principal de tu base de conocimientos. Mientras que el [bloque de texto enriquecido](https://docs.document360.com/docs/es/text-block) es puramente textual, este bloque aporta una dimensión visual, emparejando una imagen con texto estructurado para que los lectores obtengan contexto e imágenes en un único diseño. Esto la hace ideal para contenido donde una captura de pantalla, ilustración o miniatura añade un significado que el texto por sí solo no puede transmitir. ![Knowledge base site showing an Image with text block with an image, heading, and paragraph displayed side by side](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-Image_with_text_knowlegde_base_site_view.png) --- ## Cuándo usar la Imagen con bloque de texto - **Destacados de las características** - Muestra una característica específica del producto con una captura de pantalla o ilustración junto a una breve descripción. - **Anuncios de lanzamientos** - Combina una nueva imagen de función con un breve párrafo que describa qué hay de nuevo y dónde encontrarlo. - **Introducciones visuales** - Utiliza una imagen para marcar el tono de una sección de tu base de conocimientos, con texto de apoyo para orientar a los lectores. - **Contenido promocional** - Destaca una guía, un tutorial en vídeo o un artículo clave con una miniatura y una breve llamada a la acción. Cuando el contenido es solo texto, utiliza el [bloque de texto enriquecido](https://docs.document360.com/docs/es/text-block) en su lugar. --- ## Cómo añadir una imagen con bloque de texto 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** . ![Site customization page showing the Customize site button](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png) 1. En el desplegable izquierdo, selecciona Página **de inicio** . La **sección Cuerpo** muestra la lista de bloques corporales. 2. Haz **clic en Añadir sección** y **selecciona Imagen con texto**. El bloque se añade a la lista. 3. Usa el icono **de Reordenar** () para reorganizar el bloque. Los iconos de Reordenar y **Ocultar** () aparecen cuando pasas el cursor sobre cualquier bloque del cuerpo. 4. Expande la **Imagen con el desplegable de texto** para acceder a los elementos **de Imagen**, **Encabezado** y **Párrafo** . ![Home page builder showing an Image with text block expanded with Image, Heading, and Paragraph elements](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684325265.png) --- ## Cómo configurar los elementos ### Imagen 1. Haz clic **en Imagen** para abrir el panel de Imágenes. 2. Haz clic **en Cambiar** para subir o actualizar la imagen. 3. **En la pestaña Imágenes**, introduce la URL de la imagen o súbela desde tu Drive. 4. En la sección **de Alineación** , elige **Izquierda**, **Centro** o **Derecha** para colocar la imagen dentro del bloque. ![Image panel showing alignment options and image upload controls](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684343844.png) ### Rumbos 1. Haz clic **en Encabezado** para abrir el panel de Encabezado. 2. Introduce el texto deseado en el campo **de texto Encabezado** . 3. Utiliza la paleta **de colores de texto** para elegir el color del encabezado. 4. En la sección **de Alineación** , elige **Izquierda**, **Centro** o **Derecha**. 5. Haz clic **en Borrar** para eliminar solo el elemento Encabezado de este bloque. ![Heading panel showing text input, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684356968.png) ### Párrafo 1. Haz clic **en Párrafo** para abrir el panel de Párrafo. 2. Introduce tu contenido en el campo **de texto de Párrafo** . 3. Formatea el texto usando las siguientes opciones: | Opción | Qué hace | | --- | --- | | **Negrita** () | Aplica un formato en negrita | | **Cursiva** () | Aplica formato cursivo | | **URL/Enlace** () | Añade un hipervínculo | | **Lista no ordenada** () | Crea una lista con viñetas | | **Lista ordenada** () | Crea una lista numerada | NOTA La sintaxis Markdown está soportada en el campo de texto de Párrafo. 1. Utiliza la paleta **de colores de texto** para establecer el color del texto del párrafo. 2. En la sección **de Alineación** , elige **Izquierda**, **Centro** o **Derecha**. 3. Haz clic **en Borrar** para eliminar solo el elemento Párrafo de este bloque. ![Paragraph panel showing text formatting toolbar, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684373203.png) --- ## Cómo guardar y publicar - Utiliza el interruptor **de Vista previa** a la derecha para revisar tus cambios. - Haz clic **en Guardar** para guardar tus cambios. - Haz clic **en Publicar** para hacer cambios en directo. --- ## Mejores prácticas - **Mantén la imagen y el texto equilibrados** : una imagen grande junto a una frase corta parece desajustada. Intenta un peso visual aproximadamente igual entre la imagen y el texto que hay al lado. - **Utiliza la alineación a la izquierda para la imagen** cuando la dirección de lectura es de izquierda a derecha; Es la disposición más natural para la mayoría de los lectores. - **Usa el encabezado para anclar el bloque** ; aunque sea corto, ofrece a los lectores una etiqueta rápida de lo que tratan la imagen y el párrafo. - **Evita subir imágenes de gran** tamaño: las imágenes grandes ralentizan la carga de la página. Redimensiona las imágenes antes de subirlas, manteniéndolas optimizadas para la web (normalmente por debajo de 200KB para los gráficos de la página principal). - **Usa dimensiones de imagen consistentes** : si tienes varias imágenes con bloques de texto en la misma página, mantén tamaños de imagen consistentes para un diseño más limpio. --- ## Preguntas frecuentes **¿Cómo borro una imagen con bloque de texto de la página principal?** Navega a {{variable. Configuración}} () > {{variable. Base de conocimiento sitio}} > **Personalización del sitio** y haz clic **en Personalizar sitio**. En el desplegable izquierdo, selecciona Página **de inicio** . Haz clic en la imagen deseada con el bloque **de texto** . Haz clic **en Eliminar** y confirma haciendo clic en **Sí** en el prompt de confirmación de Eliminar. Haz clic **en Guardar** y **luego en Publicar** para aplicar los cambios.