---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/social-links'
title: '添加社交链接元素 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:51:20+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  一排链接到您社交媒体主页的品牌图标。用在页脚、边栏或联系版块，方便访客找到并关注您。

  添加社交链接元素
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - Marketing
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: 添加社交链接元素
      description: |-
        一排链接到您社交媒体主页的品牌图标。用在页脚、边栏或联系版块，方便访客找到并关注您。

        添加社交链接元素
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:51: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/zh-hans/hc/documentation/learn-dxpr-builder/elements/social-links'
      articleSection: 营销
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/social-links'
      description: |-
        一排链接到您社交媒体主页的品牌图标。用在页脚、边栏或联系版块，方便访客找到并关注您。

        添加社交链接元素
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      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
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[营销](/zh-hans/hc/documentation/learn-dxpr-builder/elements/marketing) # 添加社交链接元素.

 学习 DXPR Builder搭建页面添加内容营销

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

一排链接到您社交媒体主页的品牌图标。用在页脚、边栏或联系版块，方便访客找到并关注您。

## 添加社交链接元素

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **Social links**。它落在列顶部，设置对话框打开。
2. 在 **Social links** 下，用您的账号替换两行示例。每多一个账号点击一次 **Add link**。开始输入品牌名，从建议中选择，再输入 URL，如 `https://github.com/dxpr`。
3. 给图标形状选择 **Style**。这是对话框顶部附近的字段，不是下方 Style 面板。这里为 **Circle**。
4. 给图标选择 **Size**。这里为 **3x**。
5. 点击 **Icon colors** 标题展开，将 **Background color** 设为 **Brand color**。
6. 在 **Color** 下，从调色板选择色块。**Color** 默认为 **Custom**，因此显示调色板。这里是近白色。
7. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

您添加的账号显示为一排图标，每个图标打开其主页。视频中 LinkedIn、GitHub 和 Drupal 显示为品牌色大圆配白色标志。保存并发布页面后访客可见。

## 设置您的社交链接

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Social links:** 每个图标一行，含品牌名和主页 URL。点击 Add link 加一行，用箭头调整顺序。
- **Layout:** Inline 让图标排成一行。Stacked 让每个图标独占一行。
- **Style:** 图标形状：None、Rounded、Circle 或 Square。
- **Size:** Small、Large，或 2x 到 5x。
- **CSS3 hover effects:** None、Disc 或 Pulse。任何效果都把图标变成圆形。
- **Color:** 标志颜色：Brand color、Custom 或 Inherit。Custom 显示调色板，Inherit 用周围文本的颜色。
- **Background color:** 图形的填充色，同样的三种选择。

**Color** 和 **Background color** 在 **Icon colors** 标题下。点击它展开。

## 如果看不到它

- **Content 选项卡中没有 Social links。** 您的用户档案隐藏了它。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)启用。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **缺少图标。** 其行没有品牌或没有 URL，元素跳过它。请填好该行的两个字段。
- **有图形没有标志。** 品牌名没有匹配图标，该行提示 "No matching brand icon found"。请边输入边从建议中选择品牌。
- **图标打开错了页面。** 该行的 URL 错误或不完整。请悬停元素打开 **More > Settings**，检查每个 URL 以 `https://` 开头。

## 接下来做什么？

[样式选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变社交链接的间距和背景。