创建单页滚动网站.

Learn DXPR BuilderBuild pagesVolg een tutorial

这里您在一页上构建整个网站：全高首屏版块，按钮跳转到下方的 About、Services 和 Contact 版块。每个版块带有 HTML ID，其按钮的目标。适用于小企业、营销活动或作品集。如需围绕一个卖点搭建页面，请遵循 构建营销落地页。

本视频构建名为 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 友好页面。

第 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，首页上用 <front>#about。将其放在页头区域的 Structure > Block layout。在 DXPR Theme 的 Appearance > Settings > DXPR Theme 中打开 Sticky Header。
  • Front page：在以下位置将该页面设为首页 Configuration > System > Basic site settings.
  • 联系表单：从 Drupal Blocks 选项卡插入表单，代替 lead text；参见 向页面添加表单。

您会看到的内容

照片铺满屏幕，含 "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 报错，参见 更改无法保存。

接下来做什么？