菜鸟资源网站全面焕新升级啦!全新的界面设计,简洁而不失雅致,让您一目了然,轻松上手。我们还对资源分类进行了细致梳理,确保各类资源条理清晰,便于您按需筛选与查找。 立即查看

wordpress导航下拉切换多个内容-区块模板的使用

wordpress导航下拉切换多个内容-区块模板的使用

wordpress导航下拉切换多个内容-区块模板的使用 WordPress区块主题教程wordpress古藤堡区块介绍 导航下拉切换多个内容,展示更多的产品、服务等分类内容在导航上 下面是下拉切换的功能截图预览,我们在很多的多产品站点中都可...

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
会员免费
每日更新
高速下载

文章标签

当前版本

软件大小

软件语言

是否破解

wordpress导航下拉切换多个内容-区块模板的使用

WordPress区块主题教程wordpress古藤堡区块介绍

导航下拉切换多个内容,展示更多的产品、服务等分类内容在导航上

下面是下拉切换的功能截图预览,我们在很多的多产品站点中都可以看到这样的样式:

wordpress导航下拉切换多个内容-区块模板的使用

展开之后是这样的:

wordpress导航下拉切换多个内容-区块模板的使用

在 超级区块WordPress主题-标准版 2.03版本中,我们推出这个功能,其中以我们的区块模板挂载为核心的操作,下拉切换菜单可以放入单个导航项目中,并且固定下拉项目显示,也可以挂载到多个导航项目中,实现多个下拉切换的功能。

这一项功能对于想要在导航上展示较多内容的企业来说,是非常实用的。

以下为操作教程:

wordpress导航下拉切换多个内容-区块模板的使用

视频教程请进入网盘播放

腾讯微云:https://share.weiyun.com/atwE9hSC

百度云下载:   提取码:

 

制作区块模板,显示切换区域的内容

切换菜单所切换展示的内容,是使用区块模板制作的(红框内的内容),因此我们需要创建区块模板制作他们:

wordpress导航下拉切换多个内容-区块模板的使用

进入外观-区块模板–创建区块模板:

wordpress导航下拉切换多个内容-区块模板的使用

按照上图所示填写好标题,这里我设置的是导航产品分类1 你可以以你的具体内容命名,记得加入导航下拉等词进行区分,右侧切换到初始化外观,按照上图设置好。

现在开始制作,我们这次更新准备了一些样板,你可以直接插入样板进行修改:

wordpress导航下拉切换多个内容-区块模板的使用

插入之后

wordpress导航下拉切换多个内容-区块模板的使用

编辑模板,修改成你自己的内容

小贴士:这个样板类在之后的更新中继续增加更多

如果你还不知道如何使用样板快速插入已经制作了的内容,请参考:wordpress主题区块样板功能说明

你也可以插入其他的样板,这里的编辑是没有任何限制的,任意制作均可。

导航菜单挂载到第三层级的区块模板

现在进入外观-菜单-切换到你的 导航菜单

wordpress导航下拉切换多个内容-区块模板的使用

可见上面的菜单结构,第一层为全部产品分类,这个层级是显示在导航默认第一层

五金工具和测量仪器这两个二级菜单是挂在了区块模板的,对应我们上面制作的2个区块模板,可见下图和上图的对照,这样就轻松的将区块模板挂载到了第三层级。

下图示例是指放了一个这样的切换,并且进行了强制显示,如果你不需要强制显示,导航中的其余的一级菜单也可以如此编辑设置,这样你就获得了多个可切换的菜单。

wordpress导航下拉切换多个内容-区块模板的使用

单个固定的下拉切换导航菜单的设置

见下图为单个固定的下拉切换导航菜单,可以看到导航的第一个菜单的下拉子项目是自动展开的,鼠标经过之后,会展开他的下级内容。

wordpress导航下拉切换多个内容-区块模板的使用

想要这样的结构,我们需要使用区块模板挂载到头部进行编辑,默认的自定义下的网站头部是无法编辑到如此复杂的结构的。

区块模板挂载到头部请参考:网站头部模板-使用区块设置网站头部-wordpress古藤堡区块

编辑已经挂载好了的区块模板,注意这个默认展开的结构需要选择模式为双层叠加结构

wordpress导航下拉切换多个内容-区块模板的使用

选择好了双层叠加之后,我们可以对下拉菜单以及导航进行设置

wordpress导航下拉切换多个内容-区块模板的使用

可见上图的设置:

下拉子菜单的宽度:这个宽度取决于你的下拉菜单的文字数量,文字数量较多,菜单宽度可以适当调大

下拉子菜单的高度:一般来说,这个结构下面会有一个幻灯片,或者是其他的图片等内容,下拉菜单和他们的高度保持一致会比较好看、整洁对齐。

下拉子菜单的数量:这个数量是用于预览的,你可以设置对应的数量来查看具体的样式是否美观,注意,这个数量不代表实际的菜单数据。

第一个下拉菜单显示:默认为全部缩起,这样我们就可以放入多个切换菜单,而强制展开第一个,第一个项目下拉直接显示,这种模式下不建议放入多个切换菜单。

高亮第一个元素:可以让第一个菜单下拉项目显示时,高亮这个项目的背景颜色,这样可以和其他菜单项目区分

 

其他页面会出现的问题

这样配置好了之后,我们如果挂载这个设置了强制显示下拉菜单头部区块模板到公共选项,全局显示,那么其他的页面,如分类目录、文章页会出现这样的状态:

wordpress导航下拉切换多个内容-区块模板的使用

这样的话就影响了其他的内容,所以我们可以利用页面单独挂载头部区块的功能,让需要展开的地方,如:首页页面挂载这个强制的区块模板,而公共的头部(自定义-网站头部设置)则挂载非强制的区块模板,这样就避免了影响其他页面了。

wordpress导航下拉切换多个内容-区块模板的使用

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

常见问题

  • 如何安装和激活?

    每款软件会附带有安装教程,您打开安装包一目了然

  • 程序是否已损坏?文件损坏?还是其他错误?

    有错误问题,请您参考:https://www.xxx.com/error

  • 如何更新?正式激活后会发生什么情况?

    除非安装说明中另有说明,否则官方更新可能会导致无法激活。 要从本网站更新软件,您需要在此处下载此软件的新版本(如果可用),并将其安装在计算机上安装的版本之上(替换)。在这种情况下,您将保存此软件的激活和设置。

  • 如何下载?链接不起作用?

    我们使用百度网盘,132云盘和微软网盘,除了百度网盘,其他两款不限速,如果链接失效,请您联系客服处理

  • 已发布更新。我什么时候升级我的版本?

    所有软件如有更新,我们第一时间推送,视自己情况更新使用

  • 如何更改语言?

    打开“系统偏好设置”->“通用>语言和地区”->应用程序-“+”。 选择应用和语言。此方法适用于大多数应用程序。 Adobe 产品中的语言通常是在产品本身的安装阶段选择的。 游戏中的语言通常会在游戏本身的设置中发生变化。

  • 如何删除软件?

    有很多选择。最简单的方法是使用特殊的实用程序来卸载应用程序,例如App Cleaner Uninstaller 要删除 Adobe 产品,请使用 Creative Cloud Cleaner Tool

  • 需要远程帮助吗?

    网站已开通永久会员的可享受免费远程,如果非永久会员,远程安装另外收费

给TA打赏
共{{data.count}}人
人已打赏
技术教程

WordPress 设置禁止普通用户访问后台,教程分享

2024-3-8 16:11:39

技术教程

wordpress区块主题首页的制作实例-视频教程分享

2024-3-9 8:45:59