网站右侧悬浮图标制作方法

WordPress建站想在网站右侧添加社媒悬浮图标怎么做？在网站右侧添加悬浮图标可以让访客快速联系我们或者关注我们的社交媒体，具体操作步骤如下：

第一步：使用elementor小部件HTML

将elementor小部件HTML拖入到我们页脚编辑页面，这里为什么要选择页脚编辑页面，因为我们想要将这个社媒图标展示在所页面就需要把这个代码放在页眉或者页脚。

代码示例：按需替换自己的社媒图标的连接和二维码的连接即可

				
					<div class="social-float">

  
  <div class="social-item">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="抖音图标URL" alt="抖音图标URL" title="网站右侧悬浮图标制作方法 2">
    <div class="qr-box">
      <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="抖音二维码URL" alt="抖音二维码URL" title="网站右侧悬浮图标制作方法 3">
      <span>Douyin</span>
    </div>
  </div>

  
  <div class="social-item">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="小红书图标URL" alt="小红书图标URL" title="网站右侧悬浮图标制作方法 4">
    <div class="qr-box">
      <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="小红书二维码URL" alt="小红书二维码URL" title="网站右侧悬浮图标制作方法 5">
      <span>RED</span>
    </div>
  </div>

第二步：CSS样式调整

HTML只是把我们的内容写好上传，我们还需要用CSS调整我们的样式和位置

代码示例：

				
					/* ===== 悬浮位置 ===== */
.social-float {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
}

/* ===== 图标 ===== */
.social-item {
    position: relative;
    margin: 14px 0;
}

.social-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    cursor: pointer;
    transition: 0.25s;
    opacity: 0.85;
}

.social-item:hover img {
    transform: scale(1.1);
    opacity: 1;
}

/* ===== 二维码盒子（重点优化🔥） ===== */
.qr-box {
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);

    width: 200px;   /* 放大 */
    height: 200px;

    border-radius: 16px;

    /* 改成深色（更像你最开始那种） */
    background: #0f172a;

    /* 减少padding */
    padding: 6px;

    box-shadow: 0 12px 30px rgba(0,0,0,0.15);

    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

/* 小三角 */
.qr-box::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #0f172a;
}

/* ===== 二维码图片（关键优化🔥） ===== */
.qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    background: #fff;   /* 只保留二维码安全白边 */
    padding: 4px;       /* 极小白边 */

    border-radius: 10px;
}

/* ===== 文本 ===== */
.qr-box span {
    display: block;
    font-size: 12px;
    color: #fff;
    margin-top: 6px;
}

/* ===== 悬停显示 ===== */
.social-item:hover .qr-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ===== 手机隐藏 ===== */
@media (max-width: 768px) {
    .social-float {
        display: none;
    }
}

将这段CSS代码复制后，来的elementor编辑页面，点击右侧HTML小部件，在点击左侧的设置滑动到最下面找到CSS，把代码复制进去即可