--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' title: 'Crea un sitio web de una página con desplazamiento | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:57:55+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Aquí creas un sitio web entero en una página: un hero de alto completo cuyos botones saltan a las secciones Quiénes somos, Servicios y Contacto de abajo. Cada sección lleva un ID de HTML, el destino de su botón. Úsalo para un negocio pequeño, una campaña o un portafolio. Para una página alrededor de una oferta, sigue Crea una página de destino de marketing en su lugar. El vídeo crea el sitio de un estudio de diseño llamado Studio Nord. tags: - 'Volg een tutorial' 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: 'Crea un sitio web de una página con desplazamiento' description: |- Aquí creas un sitio web entero en una página: un hero de alto completo cuyos botones saltan a las secciones Quiénes somos, Servicios y Contacto de abajo. Cada sección lleva un ID de HTML, el destino de su botón. Úsalo para un negocio pequeño, una campaña o un portafolio. Para una página alrededor de una oferta, sigue Crea una página de destino de marketing en su lugar. El vídeo crea el sitio de un estudio de diseño llamado Studio Nord. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:57:55+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/tutorials/one-page-website' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' description: |- Aquí creas un sitio web entero en una página: un hero de alto completo cuyos botones saltan a las secciones Quiénes somos, Servicios y Contacto de abajo. Cada sección lleva un ID de HTML, el destino de su botón. Úsalo para un negocio pequeño, una campaña o un portafolio. Para una página alrededor de una oferta, sigue Crea una página de destino de marketing en su lugar. El vídeo crea el sitio de un estudio de diseño llamado Studio Nord. 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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea un sitio web de una página con desplazamiento. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Diseña una sección hero](/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section) - [Crea una página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Enlaza a secciones y reutiliza estilos con clases](/es/hc/documentation/learn-dxpr-builder/element-settings/custom-css) Aquí creas un sitio web entero en una página: un hero de alto completo cuyos botones saltan a las secciones Quiénes somos, Servicios y Contacto de abajo. Cada sección lleva un **ID de HTML**, el destino de su botón. Úsalo para un negocio pequeño, una campaña o un portafolio. Para una página alrededor de una oferta, sigue [Crea una página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) en su lugar. El vídeo crea el sitio de un estudio de diseño llamado Studio Nord. ## Antes de empezar - Tu rol tiene el permiso **Editar con DXPR Builder**. - La biblioteca de medios guarda una foto ancha para el hero y una foto de equipo. - La página está abierta en el constructor. Para una nueva, ve a **Contenido** > **Añadir contenido** > **Página de destino** (`/node/add/landing_page`) y haz clic en **Guardar**. - Los elementos nuevos caen arriba de su sección o columna, así que los botones del hero entran del último al primero. ## Paso 1: crea el hero 1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**. 2. Pasa el cursor sobre la sección y abre **Más** > **Ajustes**. Pon **ID de HTML** en `hero` y, en **Clases HTML**, elige **Centrar texto**. 3. Activa **100% de alto** para que la sección llene la pantalla, y **Centrado vertical** para que el contenido quede en el centro. 4. Abre el panel **Estilo**. En **Imagen de fondo** haz clic en **Seleccionar imagen**, marca una foto y haz clic en **Insertar selección**. Pon **Estilo de fondo** en **Cubrir**, elige el **Fondo** azul marino y el **Color de fuente** blanco, y haz clic en **Guardar**. 5. Haz clic en **+** en la sección y elige **Botón**. Pon **Título** en «Contacto», **Enlace** en `#contact` y **Tipo** en **Claro**, y haz clic en **Guardar**. Añade dos botones más igual: «Servicios» con `#services`, y luego «Quiénes somos» con `#about`. Cada uno cae encima del anterior. 6. Haz clic en **+** de nuevo y elige **Texto**; cae encima de los botones. Escribe «Studio Nord» como **Encabezado 2** y añade el lema. Pon **Color de fuente** en blanco en el panel **Estilo** y haz clic en **Guardar**. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee [Crea páginas amables con el SEO](/es/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2). ## Paso 2: añade la sección Quiénes somos 1. Pasa el cursor sobre el hero y haz clic en **Añadir sección debajo**. Abre **Más** > **Ajustes** de la sección nueva, pon **ID de HTML** en `about` y haz clic en **Guardar**. 2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales. 3. Haz clic en **+** en la columna izquierda y elige **Imagen**. Haz clic en **Seleccionar imagen**, marca una foto y haz clic en **Insertar selección**. Escribe el **atributo Alt** en el panel **SEO** y haz clic en **Guardar**. 4. Haz clic en **+** en la columna derecha y elige **Texto**. Escribe «Quiénes somos» como **Encabezado 2**, añade tu historia y haz clic en **Guardar**. ## Paso 3: añade la sección Servicios 1. Añade una tercera sección con **Añadir sección debajo** y abre **Más** > **Ajustes**. Pon **ID de HTML** en `services`, elige **Centrar texto** en **Clases HTML** y un **Fondo** gris claro en el panel **Estilo**. Haz clic en **Guardar**. 2. Añade una **Fila**, haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**. 3. Haz clic en **+** en la primera columna y elige **Texto**. Escribe «Marca» como **Encabezado 3**, añade una línea y haz clic en **Guardar**. 4. Haz clic en **+** en la misma columna y elige **Icono**; cae encima del texto. Elige el juego **Font Awesome Free Solid**, busca `pen-nib` y haz clic en el icono. Pon **Tamaño** en **Muy grande (3x)**, abre **Utilidades de icono**, pon **Estilo** en **Círculo** y haz clic en **Guardar**. 5. Repite para «Sitios web» con `laptop-code` y «Analítica» con `chart-pie`. ## Paso 4: añade la sección Contacto 1. Añade una cuarta sección y abre **Más** > **Ajustes**. Pon **ID de HTML** en `contact`, elige **Centrar texto** en **Clases HTML** y haz clic en **Guardar**. 2. Haz clic en **+** en la sección y elige **Enlaces sociales**. Escribe `linkedin` como marca de la primera fila y pega la URL del perfil, y luego `instagram` y su URL en la segunda. Pon **Estilo** en **Círculo** y **Tamaño** en **2x**, y haz clic en **Guardar**. 3. Haz clic en **+** de nuevo y elige **Botón**; cae encima de los enlaces. Pon **Título** en «Escríbenos», **Enlace** en `mailto:hello@studionord.example` y deja **Tipo** en **Primario**, y haz clic en **Guardar**. 4. Haz clic en **+** de nuevo y elige **Texto**; cae encima del botón. Escribe «Ponte en contacto» como **Encabezado 2** y tu dirección de correo y número de teléfono debajo, y haz clic en **Guardar**. ## Paso 5: guarda y muestra la vista previa 1. Haz clic en **Guardar** en la barra de herramientas del constructor. 2. Abre el menú de vista (el **icono de ojo**), elige **Vista previa** y haz clic en un botón del hero, como **Contacto**. ## Ve más allá No sale en el vídeo: - **Menú fijo**: crea un menú en **Estructura** > **Menús** > **Añadir menú** con un enlace por sección, como `/studio-nord#about`, o `#about` en la portada. Ponlo en la región de encabezado en **Estructura** > **Diseño de bloque**. En DXPR Theme, activa **Encabezado fijo** en **Apariencia** > **Ajustes** > **DXPR Theme**. - **Portada**: haz la página tu portada en **Configuración** > **Sistema** > **Ajustes básicos del sitio**. - **Formulario de contacto**: inserta un formulario desde la pestaña **Bloques de Drupal** en lugar del texto inicial; lee [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Lo que ves La foto llena la pantalla con «Studio Nord», el lema y tres botones claros. Un clic en un botón desplaza la página con suavidad hasta su sección. Quiénes somos muestra la foto de equipo junto a la historia, Servicios tres iconos en círculo sobre gris, y Contacto el encabezado «Ponte en contacto» y el botón **Escríbenos** encima de dos iconos sociales redondos. ## Si no ves la página como se muestra - **Un botón no salta a su sección.** Su **Enlace** no coincide con el **ID de HTML** de la sección. El enlace es `#` más exactamente el mismo ID, como `#about` para el ID `about`. - **Una sección queda bajo tu encabezado fijo.** El constructor no conoce el alto del encabezado. En **Ajustes avanzados**, en **DXPR Studio** > **DXPR Builder** > **Ajustes generales** (`/admin/dxpr_studio/dxpr_builder/settings`), pon **Selector de desplazamiento** en el selector CSS de tu encabezado. - **Un enlace social muestra «No matching brand icon found».** La marca no es un nombre de icono conocido. Escríbela en minúsculas, como `linkedin` o `instagram`. - **Tus cambios desaparecieron tras recargar.** Saliste de la página antes de hacer clic en **Guardar** en la barra de herramientas del constructor. Si Guardar muestra un error, lee [Los cambios no se guardan](/es/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails). ## ¿Qué sigue? - [Sección hero](/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section) para opciones de superposición y parallax - [Página de destino](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) para una página de campaña - [Enlaza con secciones y reutiliza estilos con clases](/es/hc/documentation/learn-dxpr-builder/element-settings/custom-css) para más sobre ID de HTML