---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/base-conocimiento'
title: 'Crea una base de conocimiento | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:58:04+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas la portada de un centro de ayuda: un encabezado azul marino, tres tarjetas de categoría cada una con su icono, dos listas de artículos populares y una llamada a la acción de soporte. Úsala cuando tu ayuda se reparte en muchos artículos. Para una lista corta de preguntas y respuestas, sigue Crea una página de preguntas frecuentes en su lugar.
  El vídeo crea el centro de ayuda de un producto de software.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una base de conocimiento'
      description: |-
        Aquí creas la portada de un centro de ayuda: un encabezado azul marino, tres tarjetas de categoría cada una con su icono, dos listas de artículos populares y una llamada a la acción de soporte. Úsala cuando tu ayuda se reparte en muchos artículos. Para una lista corta de preguntas y respuestas, sigue Crea una página de preguntas frecuentes en su lugar.
        El vídeo crea el centro de ayuda de un producto de software.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:58:04+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/base-conocimiento'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/base-conocimiento'
      description: |-
        Aquí creas la portada de un centro de ayuda: un encabezado azul marino, tres tarjetas de categoría cada una con su icono, dos listas de artículos populares y una llamada a la acción de soporte. Úsala cuando tu ayuda se reparte en muchos artículos. Para una lista corta de preguntas y respuestas, sigue Crea una página de preguntas frecuentes en su lugar.
        El vídeo crea el centro de ayuda de un producto de software.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Sigue un tutorial](/es/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una base de conocimiento.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Añadir un bloque de Drupal a tu página](/es/hc/documentacion/aprender-dxpr-builder/integraciones/bloques-drupal)
- [Crea una página de preguntas frecuentes](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-preguntas-frecuentes)
- [Añadir un enlace](/es/hc/documentacion/aprender-dxpr-builder/elementos/enlace)

Aquí creas la portada de un centro de ayuda: un encabezado azul marino, tres tarjetas de categoría cada una con su icono, dos listas de artículos populares y una llamada a la acción de soporte. Úsala cuando tu ayuda se reparte en muchos artículos. Para una lista corta de preguntas y respuestas, sigue [Crea una página de preguntas frecuentes](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-preguntas-frecuentes) en su lugar.

El vídeo crea el centro de ayuda de un producto de software.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La página está abierta en el constructor. Para una nueva, ve a **Contenido** > **Añadir contenido** > **Página de destino** (`/node/add/landing_page`) y haz clic en **Guardar**.
- Los elementos nuevos caen arriba de su sección o columna. Añade los elementos de una columna en orden inverso, o arrástralos a su sitio después.

## Paso 1: añade el encabezado

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**.
2. Pasa el cursor sobre la sección y abre **Más** > **Ajustes**. En **Clases HTML** elige **Centrar texto**. En el panel **Estilo** elige el **Fondo** azul marino y el **Color de fuente** blanco, y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Texto**. Escribe «Centro de ayuda» como **Encabezado 2** y añade «¿Cómo podemos ayudarte hoy?». Pon **Color de fuente** en blanco en el panel **Estilo** y haz clic en **Guardar**. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee [Crea páginas amables con el SEO](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seo#step-1-start-the-content-at-heading-2).

## Paso 2: añade las categorías

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Dale a la sección nueva la clase **Centrar texto**.
2. Haz clic en **+** en la sección y elige **Fila**. Haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**.
3. Haz clic en **+** en la primera columna y elige **Tarjeta**. Abre **Más** > **Ajustes**, pon el **Encabezado** en el nombre de la categoría y el **Título** en el número de artículos, y haz clic en **Guardar**.
4. Haz clic en **+** en la misma columna y elige **Icono**; cae encima de la tarjeta. Elige el juego **Font Awesome Free Solid**, busca `rocket` y haz clic en el icono. Pon **Tamaño** en **Extragrande (2x)** y haz clic en **Guardar**.
5. Repite para la segunda columna con `credit-card` y la tercera con `screwdriver-wrench`.

## Paso 3: añade los artículos populares

1. Añade una tercera sección con **Añadir sección debajo**. Abre **Más** > **Ajustes**, elige un **Fondo** gris claro en el panel **Estilo** y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales.
3. Haz clic en **+** en cada columna y elige **Texto**. Escribe tres títulos de artículo, uno por línea, y haz clic en **Guardar**.
4. Haz clic en **+** en la sección y elige **Texto**; cae encima de la fila. Escribe «Artículos populares» como **Encabezado 2** y haz clic en **Guardar**.

## Paso 4: añade la llamada a la acción de soporte

1. Añade una cuarta sección y abre **Más** > **Ajustes**. Elige **Centrar texto** en **Clases HTML**, luego el **Fondo** morado y el **Color de fuente** blanco en el panel **Estilo**. Haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Contacta con soporte», **Enlace** en `/support`, **Tipo** en **Claro** y **Tamaño** en **Grande**, y haz clic en **Guardar**.
3. Haz clic en **+** de nuevo y elige **Texto**; cae encima del botón. Escribe «¿No encuentras lo que necesitas?» como **Encabezado 2** y añade una línea. Pon **Color de fuente** en blanco y haz clic en **Guardar**.

## Paso 5: guarda y muestra la vista previa

1. Haz clic en **Guardar** en la barra de herramientas del constructor.
2. Abre el menú de vista (el **icono de ojo**) y elige **Vista previa**.

## Ve más allá

No sale en el vídeo:

- **Cuadro de búsqueda**: activa el módulo **Búsqueda** del núcleo en **Extender**. Haz clic en **+** en la sección de encabezado, abre la pestaña **Bloques de Drupal** y elige **Bloque: Formularios: Formulario de búsqueda**. Las personas visitantes llegan a `/search/node`.
- **Tarjetas clicables**: añade primero un elemento **Enlace** a la columna y pon su **Enlace** en la página de categoría. Luego añade la **Tarjeta** dentro.
- **Enlaces de artículo**: selecciona cada título en las listas y enlázalo con el botón de enlace de la barra de herramientas.
- **Más categorías**: añade una segunda **Fila** con el mismo ajuste. Las comunes son Uso del editor, Plantillas y diseño, y API y desarrollo.

## Lo que ves

El encabezado azul marino recibe a las personas visitantes con «Centro de ayuda» en blanco. Siguen tres categorías centradas, cada una un icono encima de una tarjeta con su nombre y número de artículos. Una banda gris lista seis artículos populares en dos columnas, y una banda morada ofrece **Contacta con soporte**.

## Si no ves la página como se muestra

- **Una tarjeta no muestra diálogo de ajustes tras añadirla.** Las tarjetas se abren vacías, sin diálogo. Pasa el cursor sobre la tarjeta y abre **Más** > **Ajustes** para rellenar **Encabezado** y **Título**.
- **Un icono queda debajo de su tarjeta.** El icono entró antes que la tarjeta, y los elementos nuevos caen arriba de su columna. Arrastra el icono encima de la tarjeta por el tirador de su barra de control.
- **El encabezado queda oscuro sobre azul marino.** El elemento Texto no tiene **Color de fuente** propio. Abre su panel **Estilo** y pon **Color de fuente** en blanco.
- **Tus cambios desaparecieron tras recargar.** Saliste de la página antes de hacer clic en **Guardar** en la barra de herramientas del constructor. Si Guardar muestra un error, lee [Los cambios no se guardan](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/cambios-no-guardan).

## ¿Qué sigue?

- [Integración con bloques de Drupal](/es/hc/documentacion/aprender-dxpr-builder/integraciones/bloques-drupal) para otros bloques que puedes insertar
- [Página de preguntas frecuentes](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-preguntas-frecuentes) para respuestas plegables dentro de una página de categoría
- [Elemento enlace](/es/hc/documentacion/aprender-dxpr-builder/elementos/enlace) para el envoltorio clicable alrededor de una tarjeta