Genesis主题的导航菜单添加按钮

Genesis主题的导航菜单添加按钮

Genesis主题的导航菜单添加按钮

Genesis主题的导航菜单添加按钮

  之前,我们有了解到如何将可点击的电话号码添加到WordPress菜单,在本教程中,我们晓得博客将向您展示如何给 Genesis主题 的导航菜单添加按钮。因为Genesis Framework主题没有提供导航小部件,不知道如何实现这一点的话,建议按照以下的内容,添加一个菜单项,使用一些 CSS 对其进行样式设置以创建一个按钮。

添加内容到导航菜单

  要给菜单添加按钮,首先就是在菜单中添加你需要的内容,登录你的网站,在WordPress仪表盘中点击“外观”->“菜单”,在“自定义链接”,输入想要展示的文字,及链接,点击“添加至菜单”

添加内容到导航菜单

设置导航菜单按钮CSS属性

  然后,添加button-green 到上一步添加的 自定义链接的 CSS 类。也可参考如何将自定义CSS添加到WordPress网站

设置导航菜单按钮CSS属性

  如果您没有看到 CSS 类字段,请单击菜单页面顶部的“显示选项”,点击选择“CSS类”即可。

WordPress显示CSS类

Genesis主题的导航菜单按钮自定义样式

  我们在 CSS 中添加一些代码来创建一个按钮。我们将按钮设为绿色。将以下 CSS 添加到您的样式表,或者导航到WordPress仪表盘 ,点击"外观"->"自定义"->"额外 CSS",并将代码放在那里。

    .button-green{
    background-color:#26CC9F;
    border:1pxsolid#26CC9F;
    border-radius:5px;
    text-align:center;
    text-transform:uppercase;
    }
    .button-green:hover{
    background-color:#fff;
    border:1pxsolid#26CC9F;
    }

  当然,你的按钮也可以使用其他颜色,只需确保您添加到菜单中 CSS 字段的任何内容与您在附加 CSS 中指定的 CSS 名称相匹配。

Genesis主题的导航菜单按钮自定义样式

总结

  以上是晓得博客为你介绍的如何在Genesis Framework主题的导航菜单添加自定义按钮的全部内容,希望对你就WordPress建站有所帮助。

  推荐:Genesis主题建站


发表评论

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


Scroll to Top