Crea un directorio de equipo.

Aprende DXPR BuilderCrear páginasSigue un tutorial

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.

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.

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.

¿Qué sigue?