--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' title: '创建单页滚动网站 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:25:05+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里您在一页上构建整个网站：全高首屏版块，按钮跳转到下方的 About、Services 和 Contact 版块。每个版块带有 HTML ID，其按钮的目标。适用于小企业、营销活动或作品集。如需围绕一个卖点搭建页面，请遵循 构建营销落地页。 本视频构建名为 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: 创建单页滚动网站 description: |- 这里您在一页上构建整个网站：全高首屏版块，按钮跳转到下方的 About、Services 和 Contact 版块。每个版块带有 HTML ID，其按钮的目标。适用于小企业、营销活动或作品集。如需围绕一个卖点搭建页面，请遵循 构建营销落地页。 本视频构建名为 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-24T08:25:05+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/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' description: |- 这里您在一页上构建整个网站：全高首屏版块，按钮跳转到下方的 About、Services 和 Contact 版块。每个版块带有 HTML ID，其按钮的目标。适用于小企业、营销活动或作品集。如需围绕一个卖点搭建页面，请遵循 构建营销落地页。 本视频构建名为 Studio Nord 的设计工作室网站。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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) # 创建单页滚动网站. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [设计首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) - [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Custom CSS classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 这里您在一页上构建整个网站：全高首屏版块，按钮跳转到下方的 About、Services 和 Contact 版块。每个版块带有 **HTML ID**，其按钮的目标。适用于小企业、营销活动或作品集。如需围绕一个卖点搭建页面，请遵循 [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)。 本视频构建名为 Studio Nord 的设计工作室网站。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 媒体库为首屏保存宽照片和团队照片。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素落在版块或列顶部，因此首屏按钮从最后一个开始放入。 ## 第 1 步：构建首屏 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 悬停版块并打开 **More** > **Settings**。设置 **HTML ID** 为 `hero` 并在以下位置的下方 **HTML classes**，选择 **Align text center**. 3. 打开 **100% height**，使版块填满屏幕，并打开 **Vertical centering** 使内容居中。 4. 打开 **Style** 面板。在以下位置 **Background image** 点击 **Select Image**，勾选一张照片并点击 **Insert selected**。设置 **Background style** 为 **Cover**，选择深蓝色 **Background** 和白色 **Font color**，然后点击 **Save**. 5. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Contact"， **Link** 为 `#contact` 和 **Type** 为 **Light**，然后点击 **Save**。以同样方式再添加两个按钮："Services" 带 `#services`，然后 "About" 带 `#about`。每个落在上一个上方。 6. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Studio Nord" 为 **Heading 2** 并添加标语。设置 **Font color** 为白色，在 **Style** 面板并点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。 ## 第 2 步：添加关于版块 1. 悬停首屏并点击 **Add Section Below**。打开新版块的 **More** > **Settings**，设置 **HTML ID** 为 `关于` 并点击 **Save**. 2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。 3. 点击 **+** 在左列中并选择 **Image**。点击 **Select Image**，勾选一张照片并点击 **Insert selected**。输入 **Alt attribute**：**SEO** 面板并点击 **Save**. 4. 点击 **+** 在右列中并选择 **Text**。输入 "About" 为 **Heading 2**，添加您的故事并点击 **Save**. ## 第 3 步：添加服务版块 1. 添加第三个版块，其中包含 **Add Section Below** 并打开其 **More** > **Settings**。设置 **HTML ID** 为 `services`，选择 **Align text center** 在 **HTML classes** 和浅灰色 **Background** ： **Style** 面板。点击 **Save**. 2. 添加一个 **Row**，点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**. 3. 点击 **+** 在第一列中并选择 **Text**。输入 "Branding" 为 **Heading 3**，添加一行并点击 **Save**. 4. 点击 **+** 在同一列中并选择 **Icon**；它落在文本上方。选择 **Font Awesome Free Solid** 设置，搜索 `pen-nib` 并点击图标。设置 **Size** 为 **Very Large (3x)**，打开 **Icon utilities**，设置 **Style** 为 **Circle** 并点击 **Save**. 5. 针对 “Websites” 重复，带 `laptop-code` 和 "Analytics" 带 `chart-pie`. ## 第 4 步：添加联系版块 1. 添加第四个版块并打开其 **More** > **Settings**。设置 **HTML ID** 为 `contact`，选择 **Align text center** 在 **HTML classes** 并点击 **Save**. 2. 点击 **+** 在版块上并选择 **Social links**。输入 `linkedin` 作为第一行的品牌并粘贴资料网址，然后 `instagram` 及其在第二个中的网址。设置 **Style** 为 **Circle** 和 **Size** 为 **2x**，然后点击 **Save**. 3. 点击 **+** 再次选择 **Button**；它落在链接上方。将 **Title** 设为 "Email us"，**Link** 设为 `mailto:hello@studionord.example`，并将 **Type** 保持为 **Primary**，然后点击 **Save**。 4. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Get in touch" 为 **Heading 2** 及其下方的电子邮件地址和电话号码，然后点击 **Save**. ## 第 5 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview** 并点击首屏按钮，例如 **Contact**. ## 进一步了解 视频中未展示： - **固定菜单**：在 **Structure** > **Menus** > **Add menu** 创建菜单，每版块一个链接，例如 `/studio-nord#about`，首页上用 `#about`。将其放在页头区域的 **Structure** > **Block layout**。在 DXPR Theme 的 **Appearance** > **Settings** > **DXPR Theme** 中打开 **Sticky Header**。 - **Front page**：在以下位置将该页面设为首页 **Configuration** > **System** > **Basic site settings**. - **联系表单**：从 **Drupal Blocks** 选项卡插入表单，代替 lead text；参见 [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms)。 ## 您会看到的内容 照片铺满屏幕，含 "Studio Nord"、标语和三个浅色按钮。点击按钮平滑滚动到其版块。About 在故事旁显示团队照片，Services 在灰色上显示三个圆圈图标，Contact 显示 "Get in touch" 标题和 **Email us** 两个圆形社交图标上方的按钮。 ## 如果您看不到如图所示的页面 - **按钮没有跳转到其版块。** 其 **Link** 与版块的不匹配 **HTML ID**。链接为 `#` 加上完全相同的 ID，例如 `#about` 获取 ID `关于`. - **版块落在固定页头下方。** 页面构建器不知道页头的高度。在以下位置 **Advanced Settings** ： **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`），设置 **Scroll offset selector** 到页头的 CSS 选择器。 - **社交链接显示 "No matching brand icon found"。** 该品牌不是已知图标名。用小写输入，例如 `linkedin` 或 `instagram`. - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 用于叠加和视差选项 - [Landing page](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 用于营销页面 - [链接到版块并用类复用样式](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 了解更多 HTML ID