---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-quienes-somos'
title: 'Crea una página Quiénes somos | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:04+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página Quiénes somos: un encabezado de misión, tu historia junto a una foto, tres números que cuentan hacia arriba, tarjetas de equipo y una llamada a la acción de cierre. Úsala cuando una página deba contar a las personas visitantes quién eres. Para una página que lista a cada colega, sigue Crea un directorio de equipo en su lugar.
  El vídeo crea la página para un estudio de diseño de Róterdam.
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-24T19:36:26+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 Quiénes somos'
      description: |-
        Aquí creas una página Quiénes somos: un encabezado de misión, tu historia junto a una foto, tres números que cuentan hacia arriba, tarjetas de equipo y una llamada a la acción de cierre. Úsala cuando una página deba contar a las personas visitantes quién eres. Para una página que lista a cada colega, sigue Crea un directorio de equipo en su lugar.
        El vídeo crea la página para un estudio de diseño de Róterdam.
      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:04+0000'
      dateModified: '2026-10-24T19:36:26+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-quienes-somos'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-quienes-somos'
      description: |-
        Aquí creas una página Quiénes somos: un encabezado de misión, tu historia junto a una foto, tres números que cuentan hacia arriba, tarjetas de equipo y una llamada a la acción de cierre. Úsala cuando una página deba contar a las personas visitantes quién eres. Para una página que lista a cada colega, sigue Crea un directorio de equipo en su lugar.
        El vídeo crea la página para un estudio de diseño de Róterdam.
      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 Quiénes somos.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Crea un directorio de equipo](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/directorio-equipo)
- [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta)

Aquí creas una página Quiénes somos: un encabezado de misión, tu historia junto a una foto, tres números que cuentan hacia arriba, tarjetas de equipo y una llamada a la acción de cierre. Úsala cuando una página deba contar a las personas visitantes quién eres. Para una página que lista a cada colega, sigue [Crea un directorio de equipo](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/directorio-equipo) en su lugar.

El vídeo crea la página para un estudio de diseño de Róterdam.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- La biblioteca de medios guarda una foto de tu oficina, tu equipo o tu producto.
- La página existe: ve a **Contenido** &gt; **Añadir contenido** &gt; **Página de destino** (`/node/add/landing_page`), escribe «Quiénes somos» como **Título** y haz clic en **Guardar**. La página se abre con el constructor en ella.
- 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 las filas de una sección, o los elementos de una columna, en orden inverso, o arrástralos a su sitio después.

## Paso 1: añade un encabezado de misión

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** &gt; **Ajustes**. Abre el panel **Estilo**, elige una muestra de **Fondo** oscura y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Jumbotron** en la pestaña **Contenido**.
4. Escribe tu misión como **Título**: «Creamos sitios web que la gente disfruta usando».
5. Escribe una frase de apoyo en el campo **Entrada**: «Un estudio de 24 personas en Róterdam que trabaja con marcas de toda Europa desde 2012».
6. Pon **Tipo** en **Primario** para texto blanco sobre tu color primario, y haz clic en **Guardar**.

## Paso 2: cuenta la historia de tu compañía

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**, el **+** que hay debajo.
2. Haz clic en **+** en la sección nueva y elige **Fila**; llega con dos columnas iguales. Haz clic en el icono de cuadrícula (**Diseño de columnas**) en la fila, elige el ajuste **2/3 + 1/3** y haz clic en **Guardar**.
3. Haz clic en **+** en la columna ancha y elige **Texto**. Escribe «Nuestra historia» como **Encabezado 2**, luego dos párrafos cortos: cómo empezaste y cómo va un proyecto. Haz clic en **Guardar**.
4. Haz clic en **+** en la columna estrecha y elige **Imagen**.
5. Haz clic en **Seleccionar imagen**, busca en la biblioteca de medios con **Aplicar filtros**, marca una foto de tu oficina o equipo y haz clic en **Insertar selección**.
6. Abre el panel **SEO**, rellena el **atributo Alt** y haz clic en **Guardar**.

**Consejo**

Cuenta la historia corta y divídela con un subtítulo. Las personas visitantes escanean antes de leer.

## Paso 3: añade cifras clave con contadores

1. Añade una tercera sección con **Añadir sección debajo**. Abre **Más** &gt; **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**. 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 un elemento **Texto** con la etiqueta de la cifra: «Proyectos entregados», «Años de actividad», «Clientes que repiten».
4. En cada columna, haz clic en **+** de nuevo y elige **Contador numérico**; cae encima de la etiqueta. Fija:
    - **Fin**: la cifra (140, 12, 98)
    - **Sufijo**: «+» o «%» donde aplique
    - **Separador de miles**: **Coma**
    - **Velocidad**: 2500, los milisegundos que tarda la cuenta
5. Haz clic en **Guardar** en cada contador.

El contador no tiene campo propio de etiqueta, por eso un elemento Texto queda debajo.

## Paso 4: crea una sección de equipo

1. Añade una cuarta sección con **Añadir sección debajo**.
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, haz clic en **+** y elige **Tarjeta**. Abre **Más** &gt; **Ajustes**, pon **Encabezado** en el nombre de la persona («Sofia Andersen») y **Título** en su rol («Directora creativa»), y haz clic en **Guardar**.
4. Haz clic en **+** en la propia sección y elige **Texto**; cae encima de la fila de tarjetas. Escribe «Conoce al equipo» como **Encabezado 2**, céntralo y haz clic en **Guardar**.

## Paso 5: añade una sección de cierre

1. Añade una sección final con **Añadir sección debajo** y abre **Más** &gt; **Ajustes**. En **Clases HTML** elige **Centrar texto**, para que el texto y el botón se centren juntos. En el panel **Estilo** elige tu color de marca como **Fondo** y blanco como **Color de fuente**, y haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Ponte en contacto», **Enlace** en `/contact`, **Tipo** en **Claro** y **Tamaño** en **Grande**, y haz clic en **Guardar**.
3. Haz clic en **+** en la sección de nuevo y elige **Texto**; cae encima del botón. Escribe «¿Quieres trabajar con nuestro equipo?» como **Encabezado 2**, luego «Aceptamos unos pocos clientes nuevos cada trimestre». En el panel **Estilo** 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**.
3. Recorre la página para revisar cada sección.

## Ve más allá

No sale en el vídeo, pero vale la pena añadir:

- Un **Texto** de bio y una **Imagen** de retrato dentro de cada tarjeta, y **Enlaces sociales** debajo
- **100% de alto** en los ajustes de la primera sección para un encabezado que llena la pantalla

## Lo que ves

La vista previa muestra cinco bandas. El encabezado oscuro lleva tu misión y su entrada en blanco. Tu historia queda junto a la foto. En la banda gris los tres números cuentan desde cero cuando entran en vista al desplazar.

El encabezado de equipo queda centrado encima de tres tarjetas, cada una con un nombre y un rol. La banda de cierre centra un encabezado blanco sobre un botón claro **Ponte en contacto**. Elige **Editar** en el menú de ojo para seguir trabajando.

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

- **No hay botón Añadir elementos en la página vacía.** El asistente de creación de páginas está desactivado, así que la página solo ofrece **Elegir una plantilla**. Haz clic en el área vacía para abrir el selector de elementos en su lugar.
- **Un elemento nuevo queda encima del que añadiste antes.** El constructor inserta elementos nuevos arriba de su sección o columna. Arrástralo a su sitio por el tirador de su barra de control.
- **Falta Contador numérico o Tarjeta en el selector.** Tu perfil de usuario del constructor lo esconde. Pide a una persona administradora que lo marque en **Elementos**, en **DXPR Studio** &gt; **DXPR Builder** &gt; **Perfiles de usuario** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **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?

- [Directorio de equipo](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/directorio-equipo) para una página de equipo propia
- [Elemento tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta) para tipos de tarjeta y elementos hijos
- [Elementos](/hc/documentation/learn-dxpr-builder/elements) para la referencia completa de elementos