--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/editing/element-picker' title: 'Busca y añade un elemento | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:10:44+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Cada elemento que añades viene del selector de elementos, un diálogo con cinco pestañas: Layout, Content, Drupal Blocks, Drupal Views y tus plantillas guardadas. Aquí aprendes qué contiene cada pestaña y cómo encontrar un elemento rápido. El ejemplo visita cada pestaña y añade un botón desde la pestaña Content.' tags: - 'Een pagina bewerken' 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: 'Busca y añade un elemento' description: 'Cada elemento que añades viene del selector de elementos, un diálogo con cinco pestañas: Layout, Content, Drupal Blocks, Drupal Views y tus plantillas guardadas. Aquí aprendes qué contiene cada pestaña y cómo encontrar un elemento rápido. El ejemplo visita cada pestaña y añade un botón desde la pestaña Content.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:10:44+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/editing/element-picker' articleSection: 'Een pagina bewerken' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/editing/element-picker' description: 'Cada elemento que añades viene del selector de elementos, un diálogo con cinco pestañas: Layout, Content, Drupal Blocks, Drupal Views y tus plantillas guardadas. Aquí aprendes qué contiene cada pestaña y cómo encontrar un elemento rápido. El ejemplo visita cada pestaña y añade un botón desde la pestaña Content.' 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) /[Een pagina bewerken](/hc/documentation/learn-dxpr-builder/editing) # Busca y añade un elemento. Learn DXPR BuilderBuild pagesEen pagina bewerken ## In this guide Related guides - [Arrastra los elementos a su sitio](/es/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) - [Edición de texto en línea](/es/hc/documentation/learn-dxpr-builder/editing/inline-text-editing) Cada elemento que añades viene del selector de elementos, un diálogo con cinco pestañas: Layout, Content, Drupal Blocks, Drupal Views y tus plantillas guardadas. Aquí aprendes qué contiene cada pestaña y cómo encontrar un elemento rápido. El ejemplo visita cada pestaña y añade un botón desde la pestaña **Content**. ## Abre el selector 1. Haz clic en **Add Elements** en la zona de contenido vacía y, desde la pestaña **Layout**, elige **Section**. 2. Haz clic en **+** en la sección: el selector se abre de nuevo. Lo que elijas ahora va a esta sección, arriba del todo. ## Explora las cinco pestañas 1. Haz clic en **Layout**: Section, Row, Tabs, Collapse panel, Carousel y Positioned layers. 2. Haz clic en **Content**: elementos de texto, medios e interactivos, con un cuadro **Search**. 3. Haz clic en **Drupal Blocks**: los bloques de tu sitio, con **Filter by category** y un cuadro de búsqueda. 4. Haz clic en **Drupal Views**: todos los displays de tus vistas activadas, con **Filter by tag** y un cuadro de búsqueda. 5. Haz clic en **Saved templates**: tus plantillas privadas y globales, con **Filter by user**, **Filter by type** y un cuadro de búsqueda. Cada pestaña excepto **Layout** tiene un cuadro **Search**: escribe parte de un nombre para filtrar esa pestaña. ## Añade un elemento 1. De vuelta en la pestaña **Content**, elige **Button**: su diálogo de ajustes se abre al momento. 2. Escribe el **Title**, define el **Link**, deja el **Type** en Primary y haz clic en **Save**. 3. Haz clic en **Save** en la barra de herramientas. ## Elementos de contenido | Elemento | Qué hace | |---|---| | Alert | Mensaje de alerta de Bootstrap | | Block quote | Cita con estilo | | Button | Botón con estilo y enlace | | Card | Tarjeta con cabecera, título y contenido | | Circle counter | Animación de progreso circular | | Countdown timer | Cuenta atrás de fecha y hora | | Number counter | Número animado que cuenta | | HTML | Código HTML puro | | Icon | Icono de una biblioteca de iconos | | Image | Imagen individual con enlace y texto alternativo | | Image carousel | Galería de imágenes rotativa | | Jumbotron | Banner grande con título y entradilla | | Link | Enlace con estilo | | Map | Mapa incrustado de Google Maps | | Marquee | Tira de imágenes en movimiento | | Panel | Panel con borde y título | | Progress bar | Indicador de progreso animado | | Divider | Línea horizontal | | Text | Texto enriquecido con edición en línea | | Local video | Archivo de vídeo autoalojado | | Video | Vídeo incrustado (YouTube, Vimeo) | | Social links | Enlaces a redes sociales con iconos | ## Lo que ves La mayoría de los elementos abre su diálogo de ajustes en cuanto los eliges. Card, Divider y Panel llegan directos a la página, igual que Section, Row, Tabs y Collapse panel. Carousel y Positioned layers abren antes sus ajustes. El elemento nuevo queda arriba de la sección o columna donde hiciste clic; arrástralo más abajo si pertenece a otro lugar. ## Si no ves el elemento - **Falta un elemento en una pestaña.** Tu perfil de usuario lo oculta. Una cuenta administradora lo marca en **Elements** del perfil, en **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`). El perfil nombra algunos elementos de otra forma: **Separator** es Divider, **Counter** es Number counter, **Countdown** es Countdown timer y **Blockquote** es Block quote. - **Falta un bloque o display de vista nuevo.** Salvo que la casilla **Check/Uncheck all Blocks** o **Check/Uncheck all Views** del perfil esté marcada, los perfiles de usuario no añaden bloques ni displays nuevos por sí solos. Una cuenta administradora la marca en **Blocks** o **Views** del mismo perfil. - **Falta la pestaña Drupal Blocks.** El constructor solo muestra bloques cuando el módulo **Block Content** de Drupal está activo. Actívalo en **Extend** (`/admin/modules`). - **Saved templates está vacío.** Aún no se ha guardado nada. Elige **Save as template** en el menú **More** de un elemento; consulta [Plantillas de usuario](/es/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). ## ¿Qué sigue? - [Arrastra los elementos a su sitio](/es/hc/documentation/learn-dxpr-builder/editing/drag-and-drop): mueve el elemento nuevo a donde pertenece. - [Edición de texto en línea](/es/hc/documentation/learn-dxpr-builder/editing/inline-text-editing): escribe y da formato al texto sin un diálogo. - [Elementos](/hc/documentation/learn-dxpr-builder/elements): qué hace cada elemento y cómo configurarlo.