--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina' title: 'Crea tu primera página | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:10:30+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Construye una página con DXPR Builder: una imagen junto a un encabezado, un párrafo corto y un botón. También puedes partir de una plantilla lista y cambiar sus palabras. Cualquiera de las dos lleva unos minutos, y terminas con una página guardada que previsualizas como la verán las visitas. Usa esta página después de instalar DXPR Builder. El vídeo construye la página desde cero: sección, fila, imagen, botón y texto, y luego guardar y previsualizar. tags: - 'Build your first page' 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: 'Crea tu primera página' description: |- Construye una página con DXPR Builder: una imagen junto a un encabezado, un párrafo corto y un botón. También puedes partir de una plantilla lista y cambiar sus palabras. Cualquiera de las dos lleva unos minutos, y terminas con una página guardada que previsualizas como la verán las visitas. Usa esta página después de instalar DXPR Builder. El vídeo construye la página desde cero: sección, fila, imagen, botón y texto, y luego guardar y previsualizar. 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:30+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/primeros-pasos/primera-pagina' articleSection: 'Crea tu primera página' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina' description: |- Construye una página con DXPR Builder: una imagen junto a un encabezado, un párrafo corto y un botón. También puedes partir de una plantilla lista y cambiar sus palabras. Cualquiera de las dos lleva unos minutos, y terminas con una página guardada que previsualizas como la verán las visitas. Usa esta página después de instalar DXPR Builder. El vídeo construye la página desde cero: sección, fila, imagen, botón y texto, y luego guardar y previsualizar. 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) /[Empieza aquí](/es/hc/documentation/learn-dxpr-builder/start-here) /[Crea tu primera página](/es/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Crea tu primera página. Aprende DXPR BuilderEmpieza aquíCrea tu primera página ## En esta guía Construye una página con DXPR Builder: una imagen junto a un encabezado, un párrafo corto y un botón. También puedes partir de una plantilla lista y cambiar sus palabras. Cualquiera de las dos lleva unos minutos, y terminas con una página guardada que previsualizas como la verán las visitas. Usa esta página después de [instalar DXPR Builder](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/instalacion). El vídeo construye la página desde cero: sección, fila, imagen, botón y texto, y luego guardar y previsualizar. ## Antes de empezar - DXPR Builder está instalado con tu clave de producto ([Instala DXPR Builder en tu sitio Drupal](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/instalacion)). - Un tipo de contenido muestra el constructor: su campo de texto usa el formato **DXPR Builder**, como **Drag and drop Page** de `dxpr_builder_page`. - Tu rol tiene el permiso **Edit with DXPR Builder**. ## Crea la página 1. Ve a **Content** > **Add content** y elige un tipo de contenido que muestra el constructor. 2. Escribe un **Title** y haz clic en **Save**. La página guardada se abre con un constructor vacío. DXPR Builder funciona en esta página, no en el formulario de edición. ## Opción A: empieza desde una plantilla La pestaña **Saved templates** lista diseños que personas de tu sitio guardaron para reutilizar. DXPR CMS trae varios, como **Colored icon boxes**. En otros sitios la pestaña puede estar vacía; **Choose a template** en la página vacía ofrece entonces las plantillas de página que vienen con DXPR Builder. [Inserta una plantilla guardada](/es/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab) muestra estos pasos en un vídeo. 1. Haz clic en **Add Elements** para abrir el selector de elementos. 2. Cambia a la pestaña **Saved templates**. 3. Haz clic en una plantilla para insertarla. Sus secciones, filas y elementos aparecen en la página, listos para editar. 4. Haz clic en **Save** en la barra de herramientas. 5. Abre el menú del ojo y elige **Preview** para ver la página como la verán las visitas. ## Opción B: construye desde cero El vídeo de arriba sigue estos pasos. 1. Haz clic en **Add Elements** y elige **Section** en la pestaña **Layout**. 2. Haz clic en **+** en la barra de controles de la sección y elige **Row**. 3. Haz clic en el icono de cuadrícula en la fila, elige un preset de columnas como 1/3 + 2/3, y haz clic en **Save**. 4. Haz clic en **+** en la columna izquierda, abre la pestaña **Content** y elige **Image**. 5. Haz clic en **Select Image**, busca en el explorador de medios con **Apply filters**, marca una foto y haz clic en **Insert selected**. 6. Abre el panel **SEO**, escribe el **Alt attribute** y haz clic en **Save**. 7. Haz clic en **+** en la columna derecha y elige **Button**. 8. Escribe el **Title** y **Link**, elige un **Type** y haz clic en **Save**. 9. Haz clic en **+** en la barra de controles de la columna ancha y elige **Text**. 10. Escribe un encabezado, defínelo como **Heading 2**, escribe un párrafo debajo y haz clic en **Save**. 11. Haz clic en **Save** en la barra de herramientas. 12. Abre el menú del ojo y elige **Preview** para ver la página como la verán las visitas. Elige **Edit** en el mismo menú para seguir trabajando. ## Cambia lo que añadiste - **Text**: haz clic en un elemento Text para editarlo en su sitio. Una barra de herramientas ofrece negrita, cursiva, encabezados, enlaces, listas, color de fuente y más. Tu [user profile](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion) decide qué botones aparecen. - **Settings**: abre **More** en la barra de controles de un elemento y elige **Settings**. Un Image tiene ancho, alto, un enlace y su texto alternativo; un Button tiene un **Type**, un tamaño y un enlace. - **Order**: arrastra un elemento por su barra de controles a otro lugar. Haz clic en **Save** en la barra de herramientas cuando termines. El navegador te avisa si intentas salir de la página con cambios sin guardar. ## Lo que ves En **Preview**, la imagen queda a la izquierda. El encabezado, párrafo y botón quedan a la derecha, sin barras de controles. De vuelta en **Edit**, cada elemento muestra su barra de controles cuando pasas el cursor sobre él. DXPR Builder guarda la página como HTML en el campo que edita, normalmente **Body**. Las visitas ven la página cuando el contenido está publicado. ## Si no ves el botón Add Elements - **La página vacía muestra "Choose a template" y "Or add elements using the +".** **Enable page creation assistant** está desactivado en `/admin/dxpr_studio/dxpr_builder/ai_settings`. Haz clic en **+** en la barra de herramientas del constructor para abrir el selector de elementos. - **La página no muestra ningún constructor.** El tipo de contenido no usa el formato **DXPR Builder**, o tu rol no tiene **Edit with DXPR Builder**. Sigue [Comprueba la instalación](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/instalacion#verify-the-installation). - **La pestaña Saved templates no lista plantillas.** Nadie en el sitio guardó una aún, o tu perfil de usuario las oculta. Usa **Choose a template** en la página vacía, o [guarda la tuya](/es/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). - **Tus cambios desaparecen tras recargar.** La página no se guardó. Haz clic en **Save** en la barra de herramientas del constructor antes de salir de la página. ## ¿Qué sigue? - [Las herramientas de edición](/hc/documentation/learn-dxpr-builder/editing): cada control, más atajos de teclado. - [Elementos](/hc/documentation/learn-dxpr-builder/elements): los 22 elementos de contenido y 6 elementos de diseño. - [Diseño](/hc/documentation/learn-dxpr-builder/layout/overview): secciones, filas y columnas que se adaptan a cada pantalla.