在Astra主题中创建垂直头部/左侧导航菜单网站

使用Astra主题中的Beaver Builder插件创建垂直导航网站头部。在本教程中,我将展示如何使用我们流行的两个工具实现这一目标:Beaver Builder插件和Astra主题。

首先,我们从整个站点中删除全局网站头部。如果你是Astra免费版本,需要删除网站头部。如果你是Astra Pro版本,外观 –》Astra 选项 –》自定义布局(Custom Layouts)中创建一个空头部应用到全部或你想要的位置。

现在我们将使用Beaver Builder插件创建一个模板。

登录仪表板

导航到Builder – > Templates页面

单击“ 添加”按钮

拖放一列行

调整行宽。我设置为340px

添加模块。我使用了标题,分隔符菜单和图标组

单击“行设置扳手图标”,然后在“ 高级”选项卡下添加“vertical-header ”CSS类名称

发布模板

模板看起来像这样(参见附图):

之后我们在我们的网站上添加这个Beaver Builder模板并将其用作垂直标题栏。打开astra子主题的functions.php文件,并在文件末尾添加此PHP代码段:

[dt_code]add_action('astra_header_before', 'vertical_header', 1);
function vertical_header() {
echo do_shortcode('[Fl_builder_insert_layout id="110"]');
}[/dt_code]

! 请将上面代码中的红色F换成小写的f

[Fl_builder_insert_layout]是一个Beaver Builder短代码,它将Beaver Builder模板插入到您的站点中。当我们将模板放在PHP文件中时,我们正在使用它。

110是我的模板ID。您将使用自己的模板ID替换它,或者您可以使用slug而不是ID。

这是最后一步。我们需要一些CSS将此模板放在左侧。打开你的astra child主题的style.css文件并添加这个CSS。

[dt_code]

.vertical-header {
border-right: 1px solid #ede3e3;
display: block;
height: 100%;
padding-top: 40px;
position: fixed;
top: 0;
left: 0;
width: 340px;
z-index: 99;
}

.site-content,
footer {
margin-left: 340px;
}

[/dt_code]

现在刷新主页,您将获得左侧的垂直标题栏。

注意:我没有制作移动响应效果。您可以使用Beaver Builder轻松完成。为中小型设备创建另一个新模板,并通过短代码放置此模板。如果你是Astra Pro版本,在前面禁止头部的时候只禁用PC端,Beaver Builder的模板只在PC端显示就可以了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注