--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-pestanas' title: 'Añade un panel de pestañas | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:56:16+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '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.' tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade un panel de pestañas' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:56:16+0000' dateModified: '2026-10-24T17:19:22+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/maquetacion/panel-pestanas' articleSection: Maquetación - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-pestanas' description: '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.' 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) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Maquetación](/es/hc/documentation/learn-dxpr-builder/layout/overview) # Añade un panel de pestañas. Aprende DXPR BuilderCrear páginasAñadir contenidoMaquetación ## En esta guía Guías relacionadas - [Añade un panel plegable](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-plegable) - [Añade un diseño de carrusel](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-carrusel) - [Añade un diseño anidado](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado) 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](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-plegable) suele leerse mejor. ## 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? - [Añadir un panel plegable](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-plegable): apila preguntas y respuestas que se abren de una en una. - [Añadir un diseño de carrusel](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-carrusel): muestra el mismo tipo de contenido una diapositiva tras otra. - [Anidamiento](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado): pon filas y columnas dentro de una pestaña para diseños más ricos.