---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
title: 'Crea un directorio de equipo | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:36+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 equipo: un encabezado centrado, tres tarjetas de dirección con un enlace de LinkedIn bajo la tercera, y una cuadrícula de cuatro tarjetas de equipo. Úsala cuando cada colega deba ser fácil de encontrar. Para una sección de equipo corta en tu página de compañía, sigue Crea una página Quiénes somos en su lugar.
  El vídeo crea la página de equipo de una empresa de logística.
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 un directorio de equipo'
      description: |-
        Aquí creas una página de equipo: un encabezado centrado, tres tarjetas de dirección con un enlace de LinkedIn bajo la tercera, y una cuadrícula de cuatro tarjetas de equipo. Úsala cuando cada colega deba ser fácil de encontrar. Para una sección de equipo corta en tu página de compañía, sigue Crea una página Quiénes somos en su lugar.
        El vídeo crea la página de equipo de una empresa de logística.
      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:36+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/team-directory'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      description: |-
        Aquí creas una página de equipo: un encabezado centrado, tres tarjetas de dirección con un enlace de LinkedIn bajo la tercera, y una cuadrícula de cuatro tarjetas de equipo. Úsala cuando cada colega deba ser fácil de encontrar. Para una sección de equipo corta en tu página de compañía, sigue Crea una página Quiénes somos en su lugar.
        El vídeo crea la página de equipo de una empresa de logística.
      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 un directorio de equipo.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Añadir una tarjeta](/es/hc/documentation/learn-dxpr-builder/elements/card)
- [Añadir enlaces sociales](/es/hc/documentation/learn-dxpr-builder/elements/social-links)
- [Crea una página Quiénes somos](/es/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Aquí creas una página de equipo: un encabezado centrado, tres tarjetas de dirección con un enlace de LinkedIn bajo la tercera, y una cuadrícula de cuatro tarjetas de equipo. Úsala cuando cada colega deba ser fácil de encontrar. Para una sección de equipo corta en tu página de compañía, sigue [Crea una página Quiénes somos](/es/hc/documentation/learn-dxpr-builder/tutorials/about-page) en su lugar.

El vídeo crea la página de equipo de una empresa de logística.

  ## 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 sección o columna. Por eso los enlaces sociales entran antes que la tarjeta que queda encima.

## 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**.
2. Pasa el cursor sobre la sección y abre **Más** > **Ajustes**. En **Clases HTML** elige **Centrar texto**, y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Texto** en la pestaña **Contenido**.
4. Escribe «Nuestro equipo» como **Encabezado 2**, añade una línea de presentació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 tarjetas de dirección

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Abre **Más** > **Ajustes** de la sección nueva, 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. Haz clic en **+** en la primera columna y elige **Tarjeta**. Abre **Más** > **Ajustes**, pon el **Encabezado** en el rol y el **Título** en el nombre, y haz clic en **Guardar**.
4. Añade una **Tarjeta** a la segunda columna igual.
5. Haz clic en **+** en la tercera columna y elige **Enlaces sociales**. Llega con dos filas de ejemplo. Escribe `linkedin` sobre «Facebook» en la primera fila y escribe la URL del perfil al lado. Quita la segunda fila con su **×**, pon **Estilo** en **Círculo** y **Tamaño** en **2x**, y haz clic en **Guardar**.
6. Haz clic en **+** en la misma columna y elige **Tarjeta**; cae encima de los enlaces. Pon su **Encabezado** y **Título** igual y haz clic en **Guardar**.
7. Haz clic en **+** en la sección y elige **Texto**; cae encima de la fila. Escribe «Dirección» como **Encabezado 2** y haz clic en **Guardar**.

## Paso 3: añade la cuadrícula de equipo

1. Añade una tercera sección con **Añadir sección debajo**, luego una **Fila**. Haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/4 + 1/4 + 1/4 + 1/4** y haz clic en **Guardar**.
2. Añade una **Tarjeta** a cada columna. Abre **Más** > **Ajustes**, pon el rol como **Encabezado** y el nombre como **Título**, y haz clic en **Guardar**.
3. Haz clic en **+** en la sección y elige **Texto**; cae encima de la fila. Escribe «El equipo» como **Encabezado 2** y haz clic en **Guardar**.

## Paso 4: 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:

- **Fotos y biografías**: haz clic en **+** en una tarjeta y añade una biografía de **Texto**. Luego haz clic en **+** en la tarjeta de nuevo y añade una **Imagen**; cae encima del texto. Rellena el **atributo Alt** con el nombre de la persona.
- **Fotos redondeadas**: en cada imagen, pon **Radio de bordes** en el panel **Estilo**. El valor está en píxeles, hasta 100.
- **Relieve al pasar el cursor**: en el panel **Estilo al pasar el cursor** de la tarjeta pon **Sombra paralela** en 2.
- **Equipo que se actualiza solo**: crea un tipo de contenido «Miembro de equipo» y una vista de **Cuadrícula** con una pantalla de bloque. Inserta la vista desde la pestaña **Vistas de Drupal**, y el equipo de edición añade personas sin tocar la página.

## Lo que ves

«Nuestro equipo» queda centrado arriba. En la banda gris, tres tarjetas de dirección muestran cada rol en el encabezado y el nombre debajo, con un icono redondo de LinkedIn bajo la tercera. «El equipo» sigue con cuatro tarjetas lado a lado.

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

- **Una tarjeta no muestra diálogo de ajustes tras añadirla.** Las tarjetas se abren vacías, sin diálogo. Pasa el cursor sobre la tarjeta y abre **Más** > **Ajustes** para rellenar **Encabezado** y **Título**.
- **Un enlace social muestra «No matching brand icon found».** La marca no es un nombre de icono conocido. Escríbela en minúsculas, como `linkedin`.
- **El icono de LinkedIn queda encima de la tarjeta.** La tarjeta entró antes que los enlaces, y los elementos nuevos caen arriba de su columna. Arrastra la tarjeta encima de los enlaces 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?

- [Elemento tarjeta](/es/hc/documentation/learn-dxpr-builder/elements/card) para tipos de tarjeta y elementos hijos
- [Elemento enlaces sociales](/es/hc/documentation/learn-dxpr-builder/elements/social-links) para estilos y colores de iconos
- [Página Quiénes somos](/es/hc/documentation/learn-dxpr-builder/tutorials/about-page) para poner una sección de equipo más corta en tu página de compañía