Añadir una tarjeta.

Learn DXPR BuilderBuild pagesAdd contentMarketing

Obtienes un recuadro enmarcado con una cabecera y un título que contiene otros elementos, como texto o un botón. Usa tarjetas para agrupar contenido relacionado como servicios, perfiles de equipo o planes de precios.

Tarjeta primaria oscura con cabecera Investor Relations, título Q3 Results Published y un botón Read the full report

Añade una tarjeta

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. Crea tu primera página muestra lo básico.

  1. Pasa el cursor sobre la columna y haz clic en + en su barra de controles, o haz clic en Add Elements en una página vacía. Abre la pestaña Content y haz clic en Card. Queda arriba de la columna, sin diálogo.
  2. Pasa el cursor sobre ella, haz clic en More en su barra de controles y elige Settings. Escribe un Header, por ejemplo Investor Relations.
  3. Escribe el Title de la tarjeta, por ejemplo Q3 Results Published.
  4. Elige un Type para el estilo de la tarjeta. Aquí elegimos Primary. El texto se vuelve blanco automáticamente.
  5. Haz clic en Save en el diálogo.
  6. Pasa el cursor sobre la tarjeta y haz clic en + en su propia barra de controles, no en la de la columna. El + en el cuerpo vacío de la tarjeta también sirve. Añade un Button, porque una tarjeta es un contenedor. Define su etiqueta y enlace como en Añadir un botón. Luego haz clic en Save en la barra de herramientas arriba de la zona de contenido para guardar la página.

Lo que ves

Tu cabecera y título quedan en una tarjeta del color que elegiste, con el botón dentro. En el vídeo, dicen Investor Relations y Q3 Results Published en una tarjeta Primary. El botón es un elemento Button normal, así que lo editas y le das estilo por su cuenta. Las visitas lo ven cuando guardas la página y está publicada.

Configura tu tarjeta

Pasa el cursor sobre el elemento y abre More > Settings en su barra de controles. Opciones:

  • Header: texto en la barra arriba de la tarjeta. Déjalo vacío para ocultar la barra.
  • Title: el encabezado arriba del cuerpo de la tarjeta.
  • Type: el color de la tarjeta: Default, Primary, Secondary, Success, Info, Warning, Danger, Dark o Light. Todos excepto Default y Light usan texto blanco.

Una tarjeta es un contenedor. Añade o arrastra otros elementos a su cuerpo, como texto, una imagen o un botón.

Si no lo ves

  • Card no está en la pestaña Content. Tu perfil de usuario lo oculta. Pide a una cuenta administradora que marque Card (Bootstrap 4/5) en Elements en User profiles.
  • Ya no está tras recargar. La página no se guardó. Añádelo de nuevo y haz clic en Save en la barra de herramientas arriba de la zona de contenido.
  • La tarjeta muestra solo un borde y nada dentro. Aún no hay elementos dentro. Pasa el cursor sobre la tarjeta, haz clic en + en su barra de controles y añade un Text, Image o Button.
  • Falta la barra de cabecera. El campo Header está vacío. Pasa el cursor sobre el elemento y abre More > Settings, y escribe una cabecera.
  • El texto de la tarjeta cuesta de leer. La mayoría de opciones de Type usa texto blanco, que se pierde en un color claro como Warning. Elige un Type más oscuro, o Light.

¿Qué sigue?

Panel Style para cambiar espaciado y fondo de tu tarjeta.