Crea una base de conocimiento.

Aprende DXPR BuilderCrear páginasSigue un tutorial

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.

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.

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.
  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.

¿Qué sigue?