置顶网站设计方案 第1篇
以下是您可能要为Elementor固定header考虑的一些流行增强功能!
某些主题可能会自动将固定header设置为透明。但是,如果您想使用CSS执行此操作,您可以使用如下代码片段 :
只需将此代码复制并粘贴到自定义CSS字段中,然后根据您的喜好调整字段。此代码段通过动画效果更改Header的背景颜色、透明度和高度:
用于Header背景自定义的CSS
仅这种类型的可能性是无穷无尽的。
另一种流行的选择是随着访问者滚动而变得越来越小的Header。这是此类Elementor粘性header所需的代码:
有了这个设计,你最终会得到这样的效果:
新的header效果
尽管此标头具有微妙的触感,但其复杂性可能会给您的设计带来更专业的感觉。
除了这些时尚选项外,还有淡入/淡出功能(也称为“显示”)。它看起来像这样:
淡入淡出
对于这种效果,您根本不需要接触任何代码。只需导航到主题构建器中的Header即可。然后去Edit>高级>运动效果>滚动效果:
置顶网站设计方案 第2篇
对于本教程,我们将引导您完成制作Elementor固定顶部栏的步骤。我们假设您已经 在您的站点上安装并激活了Elementor插件。
Elementor的免费版本为页面构建提供了一些强大的功能。但是,如果您想更改页眉和页脚,则需要一些额外的(也是免费的)工具。
考虑到这一点,让我们看看如何使用Elementor创建一个固定页眉!
第 1 步:安装并激活您的基本插件
幸运的是,一些可靠的工具可以轻松扩展Elementor免费版的功能。
导航到您的WordPress仪表板以找到您的第一个工具。转到Plugins > Add New 并使用搜索功能查找ElementsKit Elementor插件:
安装并激活ElementsKit
像往常一样安装并激活这个插件。完成此过程后,您将进入主插件页面:
插件现已安装
Elementor的固定页眉效果
重复此工具的安装和激活过程,您就可以进行下一步了!
第 2 步:创建您的菜单
在制作任何类型的header之前,您需要一个导航菜单。我们将制作一个包含最常见元素的简单菜单。它将包括徽标、页面和号召性用语 (CTA)。
要在WordPress仪表板中创建自己的菜单,请转到外观 > 菜单。在“菜单名称”字段旁边,给您的名称取一个描述性名称。我们将调用我们的“固定header菜单”:
给你的固定header菜单起个名字
请务必选择页眉作为显示位置。您可能还想选择该框以自动将新页面添加到菜单中。
接下来,您需要在菜单中添加一些页面。在左侧的页面部分,勾选您想要包含的任何页面的框,然后单击添加到菜单:
将页面添加到您的固定header菜单
然后您会看到您的页面转移到右侧的菜单中。继续并单击 屏幕右下角的保存菜单:
保存您的固定header菜单
如您所见,我们添加了一些基本页面,包括Contact Us、About和Sample Page。您可能希望重新排序页面,以便访问者觉得顺序很直观。
第 3 步:创建您的Header
现在您的导航菜单存在,但您无法在任何地方访问它。那是因为您需要为它创建一个Header。
置顶网站设计方案 第3篇
设置好了置顶,接下来我们就需要给置顶文章添加一个比较显示的标记,比如上图2那种样式,就是一个置顶的文字+一个背景色。接下来开始操作。
然后把下面的代码添加到【the_title】这段的前面或后面即可(文字内容可以修改)。不同的主题可能添加的位置不同,所以你可能需要多试试,直到标题前后能够显示【置顶】为止。
现在光显示一个置顶的文字还不是太明显,所以接下来我们再使用CSS给置顶文字添加一个背景,代码参考如下:
最后的效果如上图所示。
以上就是今天分享的内容。文章置顶一般在博客资源类型的网站中使用比较多,不过这类网站都是专门的主题,所以大家也可以直接用这类主题来建站,一般置顶功能都是开发好的,就不需要我们再折腾了。