---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/product-page'
title: 'Crea una página de producto | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:40+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página para un producto. Una foto queda junto al nombre, el precio y el botón Comprar ahora, seguidos de tres funciones, una lista de especificaciones y una llamada a la acción de ventas. Úsala para todo lo que vendas. Para comparar varios planes, añádele una tabla de precios.
  El vídeo crea la página de un producto de hardware llamado Insight Hub.
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: 'Crea una página de producto'
      description: |-
        Aquí creas una página para un producto. Una foto queda junto al nombre, el precio y el botón Comprar ahora, seguidos de tres funciones, una lista de especificaciones y una llamada a la acción de ventas. Úsala para todo lo que vendas. Para comparar varios planes, añádele una tabla de precios.
        El vídeo crea la página de un producto de hardware llamado Insight Hub.
      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:40+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/product-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/product-page'
      description: |-
        Aquí creas una página para un producto. Una foto queda junto al nombre, el precio y el botón Comprar ahora, seguidos de tres funciones, una lista de especificaciones y una llamada a la acción de ventas. Úsala para todo lo que vendas. Para comparar varios planes, añádele una tabla de precios.
        El vídeo crea la página de un producto de hardware llamado Insight Hub.
      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) # Crea una página de producto.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Crea una tabla de precios](/es/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)
- [Añadir un icono](/es/hc/documentation/learn-dxpr-builder/elements/icon)
- [Crea una página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)

Aquí creas una página para un producto. Una foto queda junto al nombre, el precio y el botón **Comprar ahora**, seguidos de tres funciones, una lista de especificaciones y una llamada a la acción de ventas. Úsala para todo lo que vendas. Para comparar varios planes, añádele una [tabla de precios](/es/hc/documentation/learn-dxpr-builder/tutorials/pricing-table).

El vídeo crea la página de un producto de hardware llamado Insight Hub.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto del producto.
- 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 columna. Por eso la columna derecha se crea desde el botón hacia arriba.

## Paso 1: añade el producto

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**.
2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales.
3. Haz clic en **+** en la columna izquierda y elige **Imagen**. Haz clic en **Seleccionar imagen**, marca la foto del producto y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**.
4. Haz clic en **+** en la columna derecha y elige **Botón**. Pon **Título** en «Comprar ahora», **Enlace** en tu tienda, **Tipo** en **Primario** y **Tamaño** en **Grande**, y haz clic en **Guardar**.
5. Haz clic en **+** en la columna derecha de nuevo y elige **Texto**; cae encima del botón. Escribe el precio como **Encabezado 2** y haz clic en **Guardar**.
6. Haz clic en **+** una vez más y elige **Texto**; cae arriba del todo. Escribe el nombre del producto como **Encabezado 2**, añade una línea de descripción 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 las funciones

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 **Texto**. Escribe el nombre de la función como **Encabezado 3**, añade una línea y haz clic en **Guardar**.
4. Haz clic en **+** en la misma columna y elige **Icono**; cae encima del texto. Elige el juego **Font Awesome Free Solid**, busca `plug` y haz clic en el icono. Pon **Tamaño** en **Muy grande (3x)**, abre **Utilidades de icono**, pon **Estilo** en **Círculo** y haz clic en **Guardar**.
5. Repite para la segunda columna con `cloud` y la tercera con `battery-full`.

## Paso 3: añade las especificaciones

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 «Especificaciones» como **Encabezado 2**, luego una especificación por línea, y haz clic en **Guardar**.

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

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 «Habla con el equipo comercial», **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 «Insight Hub desde 249 euros» 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:

- **Tabla de especificaciones**: inserta una tabla con el botón **Tabla** de la barra de herramientas de texto en lugar de una línea por especificación.
- **Galería**: cambia la foto única por un **Carrusel de imágenes** de fotos de producto.
- **Planes**: enlaza el precio con una [tabla de precios](/es/hc/documentation/learn-dxpr-builder/tutorials/pricing-table).

## Lo que ves

La foto de producto llena la mitad izquierda, con el nombre, el precio y el botón **Comprar ahora** a la derecha. Siguen tres funciones centradas, cada una un icono en círculo sobre su nombre y línea. Las especificaciones quedan sobre una banda gris, y una banda morada cierra la página con **Habla con el equipo comercial**.

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

- **El nombre, el precio y el botón están en orden equivocado.** Entraron de arriba abajo, y los elementos nuevos caen arriba de su columna. Arrástralos a su sitio por el tirador de su barra de control.
- **Los iconos no tienen círculo.** **Estilo** está en el panel **Utilidades de icono**, no en **General**. Abre los ajustes del icono, abre **Utilidades de icono** y pon **Estilo** en **Círculo**.
- **El encabezado queda oscuro sobre morado.** 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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## ¿Qué sigue?

- [Tabla de precios](/es/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) para una sección de precios con varios niveles
- [Elemento icono](/es/hc/documentation/learn-dxpr-builder/elements/icon) para tamaños y estilos de icono
- [Página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) para una página de campaña alrededor del producto