namesilo最便宜的域名购买
如何向GeneratePress添加粘性移动页脚

如何向GeneratePress添加粘性移动页脚

如何向GeneratePress添加粘性移动页脚

  粘性页脚是展示广告的理想场所,因为它会在访问者浏览您的文章时跟随他们。本文使用的是GeneratePress Premium,安装后,将需要启用元素。

  除此之外,不需要其他插件。本文晓得博客为你介绍如何向GeneratePress添加粘性移动页脚。

  推荐:如何使用Elementor Pro创建粘性博客侧边栏

Generatepress中的粘性页脚

  注意,这一切都可以仅使用 GeneratePress Elements 而无需其他插件来完成。我一直在寻找越来越多喜欢这个主题的理由。

1、为粘性页脚创建GeneratePress块元素

  首先我们将创建一个新的 GeneratePress 元素。我选择了块元素,它们很容易使用并且允许使用优秀的GenerateBlocks。

  注意:如果为此设置使用两个不同的广告。一个将显示在智能手机上,另一个将显示在平板电脑上。可设置平板电脑上广告尺寸为 728×90,移动广告尺寸为 320×50。

2、添加内容到 GeneratePress 中的块元素

  创建的块已连接到generate_after_footer,这会将它放在我网站的最底部。但是因为我要让它变粘,所以它当然会粘在访问者屏幕的底部。

为粘性页脚创建GeneratePress块元素
如何向GeneratePress添加粘性移动页脚

  可以使用位置选项将此粘性页脚广告放置在您喜欢的任何位置。在位置字段下方,还会找到排除某些页面和帖子的选项。

  推荐:如何在GeneratePress主题中添加面包屑

3、设置粘性页脚的样式

  因为使用的是块元素,所以不需要设置颜色、填充或边距。我需要添加的唯一样式是使其具有粘性,只是在设置我的 CSS 类sticky-footer

使用GeneratePress类设置粘性页脚的样式
如何向GeneratePress添加粘性移动页脚

  还添加了一个额外的 CSS 类,名为hide-on-desktop,此CSS 类内置于 GeneratePress 中,并将在桌面上隐藏此块。还可以使用它的类hide-on-mobile、hide-on-tablet 或 hide-on-desktop来隐藏不同类型设备上的块。

使用CSS使页脚块粘性
如何向GeneratePress添加粘性移动页脚

  接下来向主题添加自定义 CSS。这可以使用 WordPress 定制器来完成。前几行将使我们的页脚块粘在移动屏幕的底部:

.sticky-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

  这样创建了一个粘性页脚。但是,仍然存在一个问题,即粘性页脚会与 GeneratePress 页脚中的元素或小部件重叠。要阻止这种情况发生,可以添加以下代码:

@media (max-width: 768px) {
	body {
		margin-bottom: 60px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	body {
		margin-bottom: 90px;
	}
}

  此代码将为整个网站添加边距,以便每当访问者一直向下滚动时,粘性页脚都有一个位置。第一部分将边距添加到移动网站,第二部分将其添加到平板电脑网站。确保边距的大小(在本例中为60px和90px)与粘性页脚的高度相同。

  推荐:如何在WordPress博客内容段落间添加Google AdSense广告(无插件)

总结

  以上是晓得博客为你介绍的怎么向GeneratePress添加粘性移动页脚的全部内容,希望对你的WordPress建站有所帮助,粘性页脚并不仅限于一种选择,可以为用户提供表单注册时事通讯 或 在粘性页脚中显示社交链接 或 添加Google Adsense广告

  推荐:GeneratePress主题建站教程

  推荐:GeneratePress主题中创建粘性侧边栏小部件

给文章评分

ThemeForest 模板套件
可视化创建WordPress网站
Scroll to Top