提升用户体验：在 Elementor 中创建移动端友好的粘性页脚导航-光子波动网

想让你的页脚导航像手机应用程序一样始终保持在视线内吗？本指南将教你如何在 Elementor 中创建粘性页脚导航，适用于免费版和付费版 Elementor。创建这样的导航可以大大提高网站的用户体验，尤其是在移动设备上，使用户能够更方便地访问重要页面。

开始之前需要了解的内容

在开始之前，了解一些基础的 CSS 会很有帮助，因为我们将使用自定义 CSS 来调整粘性导航的样式。确保已经安装了 Elementor，并可以创建页面。

步骤 1：创建一个新容器

首先，你可以创建新页面或者编辑现有的页面，选择“使用elementor 编辑”。

通过单击 Elementor 中的 加号 (+) 按钮创建一个新容器，或者从 Elementor 面板中将“容器”选项拖动到页面。

为了更好地组织导航项，建议选择两列或更多列的结构。

单击 Elementor 中的加号按钮 ( + ) 以添加新容器。

将结构设置为两列或更多列，以便更轻松地添加导航项。

示例：如果你正在为一个电商网站创建粘性页脚导航，可以将左列用于“返回主页”图标，右列用于“购物车”图标，这样用户可以轻松访问重要页面。

步骤 2：自定义容器

接下来，需要自定义容器。单击 骰子图标 或容器顶部的六个点以打开设置。

内容宽度：选择“盒装”或“全宽”，根据你的设计偏好选择。我们选择全宽。

宽度：根据你的需要调整宽度。其余选项保持默认设置，稍后可以根据需要进行调整。

背景：在样式页面，为容器添加背景，以确保导航菜单不会与其他内容混淆。

CSS ID：在高级选项卡中为容器指定一个 CSS ID，在本教程中使用 der-sticky-navigation-footer。如果选择了其他类，应确保在后续步骤中调整 CSS 代码。

示例：如果你的页脚背景为深色，可以选择浅色导航图标，以确保视觉效果更为突出。

步骤 3：向容器添加内容

在容器中添加导航内容，例如图标和链接。

图标框小部件：建议使用 图标框小部件，方便为每个导航项添加图标和标签。将每个图标和标签添加到单独的列中，以保持整洁有序。

示例：对于电商网站，包括“主页”、“搜索”、“购物车”和“菜单”图标。用户可以轻松访问重要页面。

步骤 4：添加自定义 HTML 和 CSS

为了使导航栏变为粘性，需要添加自定义 HTML 和 CSS，以使其固定在屏幕底部。

HTML 小部件：找到 HTML 小部件，并将其拖动到创建的导航菜单下方的任意区域。

添加 HTML 代码：在 HTML 小部件中添加以下代码：

#der-sticky-navigation-footer {
    display: flex;
    justify-content: space-around; /* Distribute icons evenly across the container */
    align-items: center; /* Vertically center the icons */
    flex-wrap: nowrap; /* Ensure all icons stay in a single line */
    position: fixed;
    bottom: 20px; /* Adjusted from 10px to 20px to bring it higher */
    right: 0;
    left: 0;
    max-width: 400px;
    max-height: 60px;
    margin: auto;
    z-index: 1000;
}

#custom-html {
    display: none;
}

#der-sticky-navigation-footer .elementor-icon-box {
    margin: 0; /* Remove extra margins for consistent spacing */
}

@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Arrange icons in a row for mobile view */
        justify-content: space-evenly;
        width: 100%;
    }
    #der-sticky-navigation-footer .elementor-icon-box {
        flex: 1; /* Distribute equal space to each icon */
    }
}

此代码将页脚导航固定在屏幕底部，并确保适当的间距和定位。