---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: 'Crea una página de destino de marketing | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:56:54+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página de destino para una oferta: un hero de foto con un botón Pide una demo, tres funciones con iconos, dos testimonios y una llamada a la acción de cierre. Úsala para una página de campaña o de producto con un objetivo. Para un sitio entero en una página con desplazamiento, sigue Crea un sitio web de una página con desplazamiento en su lugar.
  El vídeo crea una página para un producto de analítica llamado Insight.
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 destino de marketing'
      description: |-
        Aquí creas una página de destino para una oferta: un hero de foto con un botón Pide una demo, tres funciones con iconos, dos testimonios y una llamada a la acción de cierre. Úsala para una página de campaña o de producto con un objetivo. Para un sitio entero en una página con desplazamiento, sigue Crea un sitio web de una página con desplazamiento en su lugar.
        El vídeo crea una página para un producto de analítica llamado Insight.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:56:54+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/marketing-landing'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: |-
        Aquí creas una página de destino para una oferta: un hero de foto con un botón Pide una demo, tres funciones con iconos, dos testimonios y una llamada a la acción de cierre. Úsala para una página de campaña o de producto con un objetivo. Para un sitio entero en una página con desplazamiento, sigue Crea un sitio web de una página con desplazamiento en su lugar.
        El vídeo crea una página para un producto de analítica llamado Insight.
      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 destino de marketing.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Diseña una sección hero](/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section)
- [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

Aquí creas una página de destino para una oferta: un hero de foto con un botón **Pide una demo**, tres funciones con iconos, dos testimonios y una llamada a la acción de cierre. Úsala para una página de campaña o de producto con un objetivo. Para un sitio entero en una página con desplazamiento, sigue [Crea un sitio web de una página con desplazamiento](/es/hc/documentation/learn-dxpr-builder/tutorials/one-page-website) en su lugar.

El vídeo crea una página para un producto de analítica llamado Insight.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto ancha para el hero.
- 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**.
5. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Pide una demo», **Enlace** en `/demo`, **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 titular como **Encabezado 2** y el subtítulo 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 las funciones

1. Pasa el cursor sobre el hero 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 `bolt` 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 `chart-line` y la tercera con `shield`.

## Paso 3: añade los testimonios

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 **Cita en bloque**. Escribe la cita, rellena **Atribución** con el nombre y rol de la persona, 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 «Reserva una visita», **Enlace** en `/demo`, **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 «Mira Insight con tus propios datos» 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:

- **Formulario de contacto**: inserta un bloque de formulario web desde la pestaña **Bloques de Drupal** en lugar del último botón; lee [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Foto más oscura**: en el panel **Efectos de fondo** del hero pon **Efecto de fondo** en **Degradado**. Elige el mismo color oscuro con alrededor de 60 % de opacidad como **Color inicial** y **Color final**
- **Hero más alto**: dale a la sección del hero 100 píxeles de relleno superior e inferior en el panel de **Estilo** correspondiente
- **Empieza desde una plantilla**: en una página vacía, haz clic en **Elegir una plantilla** y elige un diseño de página de destino; lee [Plantillas de página](/es/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## Lo que ves

El titular, el subtítulo y el botón **Pide una demo** quedan centrados en blanco sobre la foto. Siguen tres funciones, cada una un icono en círculo sobre un encabezado corto y una línea. Dos citas quedan lado a lado sobre una banda gris, y una banda morada cierra la página con **Reserva una visita**.

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

- **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**.
- **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**.
- **Un icono queda debajo de su texto de función.** El icono entró antes que el texto, y los elementos nuevos caen arriba de su columna. Arrastra el icono encima del texto 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?

- [Sección hero](/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section) para opciones de hero de alto completo y parallax
- [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms) para añadir un formulario de alta
- [Pruebas A/B](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) para probar dos versiones de la página