---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: 'Escribe un caso práctico | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:50+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí redactas el proyecto de un cliente en tres partes: el reto, la solución y los resultados. Terminas con siete bandas: un hero de foto, un resumen con la cifra principal, el reto, la solución junto a una foto, tres contadores, una cita y una llamada a la acción. Para mostrar muchos proyectos en una página, sigue Crea una galería de portafolio en su lugar.
  El vídeo redacta el trabajo de una agencia para Northwind Retail.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Escribe un caso práctico'
      description: |-
        Aquí redactas el proyecto de un cliente en tres partes: el reto, la solución y los resultados. Terminas con siete bandas: un hero de foto, un resumen con la cifra principal, el reto, la solución junto a una foto, tres contadores, una cita y una llamada a la acción. Para mostrar muchos proyectos en una página, sigue Crea una galería de portafolio en su lugar.
        El vídeo redacta el trabajo de una agencia para Northwind Retail.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:57:50+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/tutorials/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        Aquí redactas el proyecto de un cliente en tres partes: el reto, la solución y los resultados. Terminas con siete bandas: un hero de foto, un resumen con la cifra principal, el reto, la solución junto a una foto, tres contadores, una cita y una llamada a la acción. Para mostrar muchos proyectos en una página, sigue Crea una galería de portafolio en su lugar.
        El vídeo redacta el trabajo de una agencia para Northwind Retail.
      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
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Escribe un caso práctico.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Añadir una cita en bloque](/es/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Añadir un contador](/es/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [Crea una galería de portafolio](/es/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Aquí redactas el proyecto de un cliente en tres partes: el reto, la solución y los resultados. Terminas con siete bandas: un hero de foto, un resumen con la cifra principal, el reto, la solución junto a una foto, tres contadores, una cita y una llamada a la acción. Para mostrar muchos proyectos en una página, sigue [Crea una galería de portafolio](/es/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) en su lugar.

El vídeo redacta el trabajo de una agencia para Northwind Retail.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto ancha para el hero y una foto de lo que entregaste.
- 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 hero

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**. Pasa el cursor sobre ella y abre **Más** > **Ajustes**.
2. En **Clases HTML** elige **Centrar texto**.
3. Abre el panel **Estilo**. En **Imagen de fondo** haz clic en **Seleccionar imagen**, marca una foto y haz clic en **Insertar selección**. Pon **Estilo de fondo** en **Cubrir**.
4. Elige un **Fondo** azul marino oscuro y un **Color de fuente** blanco, y haz clic en **Guardar**. El color se muestra mientras carga la foto.
5. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Visita el sitio», **Enlace** en la URL del cliente, **Tipo** en **Claro** y **Tamaño** en **Grande**, y haz clic en **Guardar**.
6. Haz clic en **+** de nuevo y elige **Texto**; cae encima del botón. Escribe el nombre del cliente como **Encabezado 2** y un resumen de una línea debajo. 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Paso 2: añade el resumen

1. Pasa el cursor sobre el hero y haz clic en **Añadir sección debajo**. Añade una **Fila** a la sección nueva, haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **2/3 + 1/3** y haz clic en **Guardar**.
2. Haz clic en **+** en la columna ancha y elige **Texto**. Escribe «Resumen» como **Encabezado 2**, añade el resumen y haz clic en **Guardar**.
3. Haz clic en **+** en la columna estrecha y elige **Texto**. Escribe la etiqueta de la métrica, «Más pedidos en línea», y haz clic en **Guardar**.
4. Haz clic en **+** en la columna estrecha de nuevo y elige **Contador numérico**; cae encima de la etiqueta. Pon **Fin** en 32, **Sufijo** en %, **Separador de miles** en **Coma**, pon **Velocidad** en 2500, y haz clic en **Guardar**.

El contador no tiene campo propio de etiqueta; el elemento Texto bajo él hace ese trabajo.

## Paso 3: añade el reto

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 **Texto**. Escribe «El reto» como **Encabezado 2**, describe el problema y haz clic en **Guardar**.

## Paso 4: añade la solución

1. Añade una cuarta sección, luego una **Fila**; llega con dos columnas iguales.
2. Haz clic en **+** en la columna izquierda y elige **Texto**. Escribe «La solución» como **Encabezado 2**, describe lo que creaste y haz clic en **Guardar**.
3. Haz clic en **+** en la columna derecha y elige **Imagen**. Haz clic en **Seleccionar imagen**, marca una foto del entregable y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**.

## Paso 5: añade los resultados

1. Añade una quinta sección y abre **Más** > **Ajustes**. Elige **Centrar texto** en **Clases HTML**, luego el **Fondo** azul marino y el **Color de fuente** blanco en el panel **Estilo**. Haz clic en **Guardar**.
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. En cada columna, añade primero una etiqueta de **Texto**, luego un **Contador numérico** encima, como en el paso 2: **Fin** 32 con **Sufijo** %, **Fin** 2 con **Sufijo** s, y **Fin** 15000.

## Paso 6: añade la cita

1. Añade una sexta sección.
2. Haz clic en **+** en la sección y elige **Cita en bloque**. Escribe las palabras del cliente, rellena **Atribución** con su nombre y rol, y haz clic en **Guardar**.

## Paso 7: añade la llamada a la acción

1. Añade una séptima 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 «Escríbenos», **Enlace** en `/contact`, **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 «¿Lista para empezar?» como **Encabezado 2** y añade una línea. Pon **Color de fuente** en blanco y haz clic en **Guardar**.

## Paso 8: 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**.

## Lo que ves

El nombre del cliente y el botón **Visita el sitio** quedan centrados sobre la foto. El resumen muestra 32 % junto a su texto; las personas visitantes lo ven contar hacia arriba cuando entra en vista al desplazar. El reto queda sobre una banda gris, y la solución junto a su foto.

En la banda azul marino los tres resultados cuentan hacia arriba al entrar en vista al desplazar: 32 %, 2 s y 15 000. La cita del cliente y una banda morada de **Escríbenos** cierran la página.

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

- **La foto del hero no llena la sección.** **Estilo de fondo** aún está en **Valores por defecto del tema**. Abre el panel **Estilo** de la sección y ponlo en **Cubrir**.
- **El último contador dice 15000 sin coma.** **Separador de miles** aún está en **Ninguno**. Abre los ajustes del contador y elige **Coma**.
- **Una etiqueta queda encima de su contador.** El contador entró antes que su etiqueta, y los elementos nuevos caen arriba de su columna. Arrastra la etiqueta debajo del contador por el tirador de su barra de control.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## ¿Qué sigue?

- [Elemento cita en bloque](/es/hc/documentation/learn-dxpr-builder/elements/blockquote) para opciones de estilo de testimonios
- [Elemento contador numérico](/es/hc/documentation/learn-dxpr-builder/elements/number-counter) para cada ajuste de contador
- [Portafolio](/es/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) para listar todos tus casos prácticos en una página