---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/tabla-precios'
title: 'Crea una tabla de precios | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:45+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una tabla de precios: tres planes lado a lado, cada uno un panel con un precio, una lista de funciones y un botón de ancho completo, y el plan central destacado. Úsala en una página de precios o dentro de una página de producto. Para la página de producto completa a su alrededor, sigue Crea una página de producto.
  El vídeo crea tres planes para una herramienta de informes.
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 tabla de precios'
      description: |-
        Aquí creas una tabla de precios: tres planes lado a lado, cada uno un panel con un precio, una lista de funciones y un botón de ancho completo, y el plan central destacado. Úsala en una página de precios o dentro de una página de producto. Para la página de producto completa a su alrededor, sigue Crea una página de producto.
        El vídeo crea tres planes para una herramienta de informes.
      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:45+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/tabla-precios'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/tabla-precios'
      description: |-
        Aquí creas una tabla de precios: tres planes lado a lado, cada uno un panel con un precio, una lista de funciones y un botón de ancho completo, y el plan central destacado. Úsala en una página de precios o dentro de una página de producto. Para la página de producto completa a su alrededor, sigue Crea una página de producto.
        El vídeo crea tres planes para una herramienta de informes.
      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 tabla de precios.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Crea una página de producto](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-producto)
- [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta)
- [Añadir un panel](/es/hc/documentacion/aprender-dxpr-builder/elementos/panel)

Aquí creas una tabla de precios: tres planes lado a lado, cada uno un panel con un precio, una lista de funciones y un botón de ancho completo, y el plan central destacado. Úsala en una página de precios o dentro de una página de producto. Para la página de producto completa a su alrededor, sigue [Crea una página de producto](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-producto).

El vídeo crea tres planes para una herramienta de informes.

  ## 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 contenedor, así que en cada panel el botón entra antes que el precio.

## Paso 1: añade la sección y las columnas

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**. Abre el panel **Estilo**, elige un **Fondo** gris claro y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales.
4. Haz clic en el icono de cuadrícula de la fila (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**.

## Paso 2: crea el primer plan

1. Haz clic en **+** en la primera columna y elige **Panel** en la pestaña **Contenido**.
2. Pasa el cursor sobre el panel y abre **Más** > **Ajustes**. Pon el **Título** en «Inicial», deja el **Tipo** en **DXPR** y haz clic en **Guardar**.
3. Haz clic en **+** en el panel y elige **Botón**. Pon **Título** en «Elige un plan», **Enlace** en `/signup` y **Tipo** en **Primario**. Activa **Botón de bloque** para que llene la columna, y haz clic en **Guardar**.
4. Haz clic en **+** en el panel de nuevo y elige **Texto**; cae encima del botón. Escribe el precio como **Encabezado 2**, añade las funciones una por línea y haz clic en **Guardar**.

## Paso 3: crea los otros planes

1. Repite el paso 2 en la segunda columna para «Profesional». En el panel **Estilo** del panel elige el **Fondo** morado, y pon el **Tipo** del botón en **Éxito**, para que el plan destaque.
2. Repite el paso 2 en la tercera columna para «Empresa», con «Precio personalizado» como precio.

**Consejo**

La columna central atrae la mirada. Pon allí el plan que más quieres vender.

## Paso 4: añade el encabezado

1. Haz clic en **+** en la sección y elige **Texto**; cae encima de la fila.
2. Escribe «Elige tu plan» como **Encabezado 2**, añade una línea como «Precios mensuales simples. Cancela cuando quieras» 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:

- **Cuatro planes**: elige el ajuste **1/4 + 1/4 + 1/4 + 1/4** en su lugar y crea una cuarta columna.
- **Insignia de más popular**: añade un elemento **Texto** arriba del panel destacado con «El más popular» en negrita.
- **Anual y mensual**: añade una línea de **Texto** encima de la fila como «Mensual \| Anual (ahorra 20 %)». La línea es estática; un conmutador en directo necesita el elemento **HTML** con tu propio script.
- **Marcas de función**: pega una marca de verificación antes de cada línea de función, o añade un elemento **Icono** encima de la lista.

## Lo que ves

«Elige tu plan» queda centrado encima de tres planes en una banda gris. Cada panel muestra su nombre en la barra de título, el precio, tres funciones y un botón **Elige un plan** de ancho completo. El plan central destaca en morado con un botón verde.

## Si no ves los planes como se muestra

- **Un panel se abre sin diálogo de ajustes.** Los paneles se abren vacíos, sin diálogo. Pasa el cursor sobre el panel y abre **Más** > **Ajustes** para fijar su **Título**.
- **Un Tipo de panel como Primario no muestra color.** Tu tema no da estilo a ese tipo de panel. Deja **Tipo** en **DXPR** y elige un **Fondo** en el panel **Estilo** del panel, como en el paso 3.
- **Los botones solo son tan anchos como su texto.** **Botón de bloque** está desactivado. Abre los ajustes de cada botón y actívalo.
- **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?

- [Página de producto](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-producto) para una página completa con funciones y precios
- [Elemento tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta) para otro estilo de tarjeta
- [Elemento panel](/es/hc/documentacion/aprender-dxpr-builder/elementos/panel) para cada ajuste de panel