---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-servicios'
title: 'Crea una página de servicios | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:08+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página que lista lo que ofreces. Tiene un encabezado, tres servicios con iconos, un servicio en detalle junto a una foto, logotipos de clientes y una llamada a la acción. Úsala cuando vendas varios servicios. Para una página sobre una oferta, sigue Crea una página de destino de marketing en su lugar.
  El vídeo crea la página de servicios de una agencia digital.
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 página de servicios'
      description: |-
        Aquí creas una página que lista lo que ofreces. Tiene un encabezado, tres servicios con iconos, un servicio en detalle junto a una foto, logotipos de clientes y una llamada a la acción. Úsala cuando vendas varios servicios. Para una página sobre una oferta, sigue Crea una página de destino de marketing en su lugar.
        El vídeo crea la página de servicios de una agencia digital.
      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:08+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/pagina-servicios'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-servicios'
      description: |-
        Aquí creas una página que lista lo que ofreces. Tiene un encabezado, tres servicios con iconos, un servicio en detalle junto a una foto, logotipos de clientes y una llamada a la acción. Úsala cuando vendas varios servicios. Para una página sobre una oferta, sigue Crea una página de destino de marketing en su lugar.
        El vídeo crea la página de servicios de una agencia digital.
      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 página de servicios.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Crea una página de destino de marketing](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/destino-marketing)
- [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono)
- [Añadir una marquesina](/es/hc/documentation/learn-dxpr-builder/elements/marquee)

Aquí creas una página que lista lo que ofreces. Tiene un encabezado, tres servicios con iconos, un servicio en detalle junto a una foto, logotipos de clientes y una llamada a la acción. Úsala cuando vendas varios servicios. Para una página sobre una oferta, sigue [Crea una página de destino de marketing](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/destino-marketing) en su lugar.

El vídeo crea la página de servicios de una agencia digital.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto para el servicio en detalle y cuatro logotipos de clientes.
- 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**.
- En DXPR CMS, esconde el título de página del tema en esta página: en su formulario de edición, abre **Ajustes de tema DXPR** y marca **Título de página** en **Ocultar regiones DXPR**. El **Título** del Jumbotron es entonces el único Encabezado 1 de la página, como explica [Crea páginas amables con el SEO](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seo#step-1-start-the-content-at-heading-2).
- 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**. Pasa el cursor sobre ella, abre **Más** > **Ajustes**, elige el **Fondo** azul marino en el panel **Estilo** y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Jumbotron** en la pestaña **Contenido**.
3. Pon el **Título** en «Nuestros servicios», la **Entrada** en una línea sobre lo que ofreces y el **Tipo** en **Primario**, y haz clic en **Guardar**.

## Paso 2: añade el resumen de servicios

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 «Diseño» 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 `palette` 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 «Desarrollo» con `code` y «Marketing» con `bullhorn`.

## Paso 3: añade un servicio en detalle

1. Añade una tercera sección con **Añadir sección debajo**, luego una **Fila**; llega con dos columnas iguales.
2. Haz clic en **+** en la columna izquierda y elige **Imagen**. Haz clic en **Seleccionar imagen**, marca una foto y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**.
3. Haz clic en **+** en la columna derecha y elige **Botón**. Pon **Título** en «Pide un presupuesto», **Enlace** en `/contact` y **Tipo** en **Primario**, y haz clic en **Guardar**.
4. Haz clic en **+** en la columna derecha de nuevo y elige **Texto**; cae encima del botón. Escribe «Diseño» como **Encabezado 2**, añade la descripción y lo que incluye, y haz clic en **Guardar**.

## Paso 4: añade los logotipos de clientes

1. Añade una cuarta sección y abre **Más** > **Ajustes**. Elige **Centrar texto** en **Clases HTML** y un **Fondo** gris claro en el panel **Estilo**. Haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Marquesina**. Quita las tres imágenes de muestra con la **×** de cada una. Haz clic en **Seleccionar imagen**, busca tus logotipos, marca cuatro y haz clic en **Insertar selección**. Activa **Escala de grises** y haz clic en **Guardar**.
3. Haz clic en **+** en la sección de nuevo y elige **Texto**; cae encima de la marquesina. Escribe «Confían marcas líderes» como **Encabezado 2** y haz clic en **Guardar**.

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

1. Añade una quinta 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 «Agenda una consulta», **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 6: 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:

- **Una sección de detalle por servicio**: repite el paso 3 para Desarrollo y Marketing. Activa **Reflejar fila** en los ajustes de cada segunda fila, para que las fotos alternen lados en tabletas y escritorios.
- **Enlaces de salto**: pon el **ID de HTML** de cada sección de detalle (`design`, `development`, `marketing`). Añade un **Botón** bajo cada texto de resumen con **Enlace** `#design` y así.
- **Testimonios**: añade una **Cita en bloque** por cliente encima de los logotipos.

## Lo que ves

Una banda azul marino abre la página, con «Nuestros servicios» en tipo blanco grande sobre un resumen de una línea. Siguen tres servicios centrados, cada uno un icono en círculo sobre su nombre y línea. Diseño recibe su propia banda con una foto, una descripción y **Pide un presupuesto**. Logotipos grises de clientes desfilan sobre una banda clara, y una banda morada cierra la página.

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

- **La marquesina aún muestra los logotipos de muestra.** Las tres imágenes de muestra quedan hasta que las quites. Abre los ajustes de la marquesina, haz clic en la **×** de cada imagen de muestra y guarda.
- **Los logotipos están en color.** **Escala de grises** está desactivada. Abre los ajustes de la marquesina, actívala y haz clic en **Guardar**.
- **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**.
- **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 destino](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/destino-marketing) para una página propia por servicio
- [Elemento icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono) para tamaños y estilos
- [Elemento marquesina](/es/hc/documentation/learn-dxpr-builder/elements/marquee) para los ajustes de la banda de logotipos