--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/sito-web-one-page' title: 'Crea un sito web one-page a scorrimento | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:57:20+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Qui crei un intero sito web su un’unica pagina: una hero a tutta altezza i cui pulsanti saltano alle sezioni Chi siamo, Servizi e Contatti sotto. Ogni sezione porta un HTML ID, la destinazione del suo pulsante. Usalo per una piccola impresa, una campagna o un portfolio. Per una pagina intorno a un’unica offerta, segui invece Crea una landing page marketing. Il video crea il sito di uno studio di design chiamato Studio Nord. tags: - 'Follow a tutorial' 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 un sito web one-page a scorrimento' description: |- Qui crei un intero sito web su un’unica pagina: una hero a tutta altezza i cui pulsanti saltano alle sezioni Chi siamo, Servizi e Contatti sotto. Ogni sezione porta un HTML ID, la destinazione del suo pulsante. Usalo per una piccola impresa, una campagna o un portfolio. Per una pagina intorno a un’unica offerta, segui invece Crea una landing page marketing. Il video crea il sito di uno studio di design chiamato 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-23T23:57:20+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/it/hc/documentazione/impara-dxpr-builder/tutorial/sito-web-one-page' articleSection: 'Segui un tutorial' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/sito-web-one-page' description: |- Qui crei un intero sito web su un’unica pagina: una hero a tutta altezza i cui pulsanti saltano alle sezioni Chi siamo, Servizi e Contatti sotto. Ogni sezione porta un HTML ID, la destinazione del suo pulsante. Usalo per una piccola impresa, una campagna o un portfolio. Per una pagina intorno a un’unica offerta, segui invece Crea una landing page marketing. Il video crea il sito di uno studio di design chiamato Studio Nord. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Segui un tutorial](/it/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea un sito web one-page a scorrimento. Impara DXPR BuilderCrea le pagineSegui un tutorial ## In questa guida Guide correlate - [Progetta una hero section](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section) - [Crea una landing page marketing](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing) - [Collegare le sezioni e riusare gli stili con le classi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato) Qui crei un intero sito web su un’unica pagina: una hero a tutta altezza i cui pulsanti saltano alle sezioni Chi siamo, Servizi e Contatti sotto. Ogni sezione porta un **HTML ID**, la destinazione del suo pulsante. Usalo per una piccola impresa, una campagna o un portfolio. Per una pagina intorno a un’unica offerta, segui invece [Crea una landing page marketing](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing). Il video crea il sito di uno studio di design chiamato Studio Nord. ## Prima di iniziare - Il tuo ruolo ha il permesso **Edit with DXPR Builder**. - La libreria multimediale contiene un’ampia foto per la hero e una foto del team. - La pagina è aperta nel builder. Per una nuova, vai in **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e fai clic su **Save**. - I nuovi elementi arrivano in cima alla loro sezione o colonna, quindi i pulsanti della hero vanno inseriti dall’ultimo al primo. ## Passaggio 1: crea la hero 1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**. 2. Passa sopra alla sezione e apri **More** > **Settings**. Imposta **HTML ID** su `hero` e, in **HTML classes**, scegli **Align text center**. 3. Attiva **100% height** così la sezione riempie lo schermo, e **Vertical centering** così il contenuto sta al centro. 4. Apri il pannello **Style**. In **Background image** fai clic su **Select Image**, seleziona una foto e fai clic su **Insert selected**. Imposta **Background style** su **Cover**, scegli il **Background** blu scuro e il **Font color** bianco, poi fai clic su **Save**. 5. Fai clic su **+** sulla sezione e scegli **Button**. Imposta **Title** su "Contact", **Link** su `#contact` e **Type** su **Light**, poi fai clic su **Save**. Aggiungi altri due pulsanti allo stesso modo: "Services" con `#services`, poi "About" con `#about`. Ciascuno arriva sopra il precedente. 6. Fai di nuovo clic su **+** e scegli **Text**; arriva sopra i pulsanti. Digita "Studio Nord" come **Heading 2** e aggiungi lo slogan. Imposta **Font color** su bianco nel pannello **Style** e fai clic su **Save**. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi [Crea pagine SEO-friendly](/it/hc/documentazione/impara-dxpr-builder/tutorial/seo#step-1-start-the-content-at-heading-2). ## Passaggio 2: aggiungi la sezione Chi siamo 1. Passa sopra alla hero e fai clic su **Add Section Below**. Apri il **More** > **Settings** della nuova sezione, imposta **HTML ID** su `about` e fai clic su **Save**. 2. Fai clic su **+** sulla sezione e scegli **Row**; arriva con due colonne uguali. 3. Fai clic su **+** nella colonna di sinistra e scegli **Image**. Fai clic su **Select Image**, seleziona una foto e fai clic su **Insert selected**. Digita l’**Alt attribute** nel pannello **SEO** e fai clic su **Save**. 4. Fai clic su **+** nella colonna di destra e scegli **Text**. Digita "About" come **Heading 2**, aggiungi la tua storia e fai clic su **Save**. ## Passaggio 3: aggiungi la sezione Servizi 1. Aggiungi una terza sezione con **Add Section Below** e apri il suo **More** > **Settings**. Imposta **HTML ID** su `services`, scegli **Align text center** in **HTML classes** e un **Background** grigio chiaro nel pannello **Style**. Fai clic su **Save**. 2. Aggiungi una **Row**, fai clic sulla sua icona griglia (**Column layout**), scegli il preset **1/3 + 1/3 + 1/3** e fai clic su **Save**. 3. Fai clic su **+** nella prima colonna e scegli **Text**. Digita "Branding" come **Heading 3**, aggiungi una riga e fai clic su **Save**. 4. Fai clic su **+** nella stessa colonna e scegli **Icon**; arriva sopra il testo. Scegli il set **Font Awesome Free Solid**, cerca `pen-nib` e fai clic sull’icona. Imposta **Size** su **Very Large (3x)**, apri **Icon utilities**, imposta **Style** su **Circle** e fai clic su **Save**. 5. Ripeti per "Websites" con `laptop-code` e "Analytics" con `chart-pie`. ## Passaggio 4: aggiungi la sezione Contatti 1. Aggiungi una quarta sezione e apri il suo **More** > **Settings**. Imposta **HTML ID** su `contact`, scegli **Align text center** in **HTML classes** e fai clic su **Save**. 2. Fai clic su **+** sulla sezione e scegli **Social links**. Digita `linkedin` come brand della prima riga e incolla l’URL del profilo, poi `instagram` e il suo URL nella seconda. Imposta **Style** su **Circle** e **Size** su **2x**, poi fai clic su **Save**. 3. Fai di nuovo clic su **+** e scegli **Button**; arriva sopra i link. Imposta **Title** su "Email us", **Link** su `mailto:hello@studionord.example` e tieni **Type** su **Primary**, poi fai clic su **Save**. 4. Fai di nuovo clic su **+** e scegli **Text**; arriva sopra il pulsante. Digita "Get in touch" come **Heading 2** e il tuo indirizzo email e numero di telefono sotto, poi fai clic su **Save**. ## Passaggio 5: salva e vedi l’anteprima 1. Fai clic su **Save** nella barra degli strumenti del builder. 2. Apri il menu vista (l’**icona occhio**), scegli **Preview** e fai clic su un pulsante della hero, come **Contact**. ## Per approfondire Non mostrato nel video: - **Menu fisso**: crea un menu in **Structure** > **Menus** > **Add menu** con un link per sezione, come `/studio-nord#about`, o `#about` sulla prima pagina. Mettilo nella regione header in **Structure** > **Block layout**. In DXPR Theme, attiva **Sticky Header** in **Appearance** > **Settings** > **DXPR Theme**. - **Prima pagina**: rendi la pagina la tua prima pagina in **Configuration** > **System** > **Basic site settings**. - **Modulo di contatto**: inserisci un modulo dalla scheda **Drupal Blocks** al posto del testo di apertura; vedi [Aggiungi moduli alle pagine](/it/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Cosa vedi La foto riempie lo schermo con "Studio Nord", lo slogan e tre pulsanti chiari. Un clic su un pulsante scorre la pagina dolcemente fino alla sua sezione. Chi siamo mostra la foto del team accanto alla storia, Servizi tre icone cerchiate sul grigio, e Contatti l’intestazione "Get in touch" e il pulsante **Email us** sopra due icone social rotonde. ## Se non vedi la pagina come mostrata - **Un pulsante non salta alla sua sezione.** Il suo **Link** non corrisponde all’**HTML ID** della sezione. Il link è `#` più esattamente lo stesso ID, come `#about` per l’ID `about`. - **Una sezione finisce sotto il tuo header fisso.** Il builder non conosce l’altezza dell’header. In **Advanced Settings** in **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), imposta **Scroll offset selector** sul selettore CSS del tuo header. - **Un link social mostra "No matching brand icon found".** Il brand non è un nome di icona noto. Digitalo in minuscolo, come `linkedin` o `instagram`. - **Le tue modifiche non ci sono più dopo un ricaricamento.** Hai lasciato la pagina prima di fare clic su **Save** nella barra degli strumenti del builder. Se Save mostra un errore, vedi [Le modifiche non si salvano](/it/hc/documentazione/impara-dxpr-builder/risoluzione-problemi/salvataggio-non-riuscito). ## E adesso? - [Hero section](/it/hc/documentazione/impara-dxpr-builder/tutorial/hero-section) per opzioni overlay e parallasse - [Landing page](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing) per una pagina campagna - [Collega sezioni e riusa stili con classi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato) per altro sugli HTML ID