Añade un panel de pestañas.

Learn DXPR BuilderBuild pagesAdd contentLay-out

Usa Pestañas cuando quieras varios bloques de contenido relacionado en un sitio, con solo uno visible a la vez. Terminas con una fila de etiquetas de pestaña; las personas visitantes hacen clic en una etiqueta para ver su contenido. El ejemplo crea una página de agencia con una pestaña por servicio. Para preguntas y respuestas, un panel plegable suele leerse mejor.

Tres pestañas de servicio llamadas Diseño web, Marca y Marketing, con Diseño web abierta encima de su texto

Añade un panel de pestañas

  1. Pasa el cursor sobre la columna y haz clic en + en su barra de control, o en el + del centro de una columna vacía, para abrir el selector de elementos.
  2. En la pestaña Diseño, haz clic en Pestañas. El elemento aparece con una pestaña, llamada Título.
  3. Pasa el cursor sobre el panel de la pestaña y abre Más > Ajustes. Escribe un nombre en Título de la pestaña y haz clic en Guardar.
  4. Haz clic en + dentro del panel para añadir contenido, como un elemento Texto.
  5. Para añadir una pestaña, pasa el cursor sobre las etiquetas de pestaña y haz clic en Añadir pestaña en la barra de control de Pestañas. La pestaña nueva cae la primera, delante de las demás. Nómbrala y rellénala igual.

Lo que ves

Una fila de etiquetas de pestaña queda encima del contenido de la pestaña abierta. En Vista previa y en la página publicada, un clic en una etiqueta muestra el contenido de esa pestaña y esconde el resto. Cada pestaña guarda sus propios elementos, así que una pestaña puede llevar texto y otra un juego de tarjetas. En pantallas de menos de 768 píxeles las pestañas se vuelven encabezados apilados que se abren como un panel plegable.

Configura tus pestañas

El elemento Pestañas tiene tres ajustes. Ábrelos desde Más > Ajustes en la barra de control de Pestañas, que aparece cuando pasas el cursor sobre las etiquetas de pestaña.

Ajuste Efecto Valor por defecto
Dirección de las pestañas Dónde quedan las etiquetas: Por defecto (encima del contenido), Izquierda o Derecha Por defecto
Estilo El aspecto de las etiquetas: Por defecto (una línea bajo las etiquetas), Moderno (tarjetas redondeadas) o Acordeón (encabezados con líneas de separación) Por defecto
Adaptado a móviles Muestra las pestañas como encabezados plegables en pantallas de menos de 768 píxeles Activado

Cada pestaña tiene sus propios ajustes en Más > Ajustes en su panel. Título de la pestaña es el texto de la etiqueta. Descripción de la pestaña es una línea corta opcional bajo la etiqueta de la pestaña abierta.

Gestiona las pestañas

  • Reordenar: arrastra la etiqueta de una pestaña a un sitio nuevo entre las etiquetas. Su contenido se mueve con ella.
  • Renombrar: pasa el cursor sobre el panel de la pestaña, abre Más > Ajustes, cambia el Título de la pestaña y haz clic en Guardar.
  • Quitar: pasa el cursor sobre el panel de la pestaña, abre Más y elige Eliminar. Todo lo que hay dentro de la pestaña se quita con ella.

Mantén las etiquetas en una a tres palabras y quédate en unas cinco pestañas, para que las etiquetas quepan en una línea.

Si no lo ves

  • La pestaña nueva es la primera en lugar de la última. Añadir pestaña siempre pone la pestaña nueva delante. Arrastra su etiqueta hasta el sitio que quieras.
  • Los ajustes solo muestran Título de la pestaña y Descripción de la pestaña. Abriste los ajustes de una pestaña. Pasa el cursor sobre las etiquetas de pestaña para que se muestre la barra de control de Pestañas, y abre allí Más > Ajustes.
  • Los teléfonos muestran encabezados apilados en lugar de pestañas. Adaptado a móviles está activado, que es lo normal. Desactívalo en los ajustes de Pestañas para conservar pestañas en todos los anchos de pantalla.
  • Pestañas no está en la pestaña Diseño del selector. Tu perfil de usuario de DXPR Builder lo excluye. Una persona administradora marca Pestañas en Elementos de tu perfil, en /admin/dxpr_studio/dxpr_builder/profile.

¿Qué sigue?