义乌公司网站设计:将图片添加到DiviMega菜单中

义乌网站建设 | 2019-04-30

我们义乌公司网站设计喜欢在网上与图片互动。事实上,我们希望如此。Pinterest、Facebook和Instagram继续证明这一点。考虑到这一点,只要有可能,将图片添加到您的网站是很有意义的。另外,在超级菜单中添加图片是给用户提供他们需要的交互的另一个很好的机会。

添加图片到超级菜单是一个聪明的解决方案,以改善您的网站导航。超级菜单允许用户一次看到更多的链接,而不需要滚动、悬停和记住菜单的内容。图像也加强了菜单,抓住他们的注意力,以进一步简化导航过程。

有一些有用的插件可以帮你做到这一点。但是,由于Divi附带了已经内置的超级菜单功能,所以最好利用这个特性,在不使用插件的情况下将图像添加到超级菜单中。

好好享受吧!

用Divi实现设计

创建Mega菜单

要开始,我们义乌公司网站设计必须首先创建菜单。在这个例子中,我创建了一个名为“Mega菜单”的主父菜单项,其中包含四个子菜单项。这四个子菜单项中的每一个都有三个子菜单项。这是为了清晰起见的细分:

在WordPress管理仪表板中,转到外观→菜单。点击创建新菜单然后给它起个名字(就像“Mega菜单”应该有的那样)。

义乌公司网站设计

现在开始将链接添加到菜单中。我在本例中使用自定义链接,但如果需要,可以使用现有的页面、帖子或类别。

若要添加自定义链接,请单击以切换打开的自定义链接并添加您的网址和链接文本。对所有链接重复此过程。

add menu link

注意:对于这个例子,我只是在url文本框中添加一个hashtag(#)作为一个模拟链接,它不会链接到任何东西。

现在再创建一个链接作为超级菜单链接。我把它命名为“超级菜单”来澄清这一点。这是链接,将显示您的超级菜单悬停。

把你的菜单变成超级菜单是相当简单的。您所需要做的就是将CSS类添加到您刚刚创建的主要Mega菜单项中。

为此,单击Mega菜单项右侧的箭头,显示其他配置选项。找到标有css类的文本框并输入“mega-菜单”。

mega menu class

如果没有看到CSS类文本框,请单击菜单屏幕右上角的“屏幕选项”选项卡。

screen options

在“显示高级菜单属性”下,确保选中CSS类。

enable css classes

义乌公司网站设计将链接添加到菜单后,向下滚动到菜单屏幕底部的“菜单设置”,并为显示位置选择“主菜单”。您的菜单现在应该如下所示。

menu list

现在组织/拖动四个菜单项(每个菜单项都有自己的三个子项),使其成为主父菜单链接的子项。

现在您的菜单应该如下所示:

义乌公司网站设计

单击“保存”菜单

现在让我们看看到目前为止在现场的超级菜单是什么样子。

basic mega menu

向Mega菜单添加图像

现在菜单已经准备好了,现在是添加图像的时候了。

从得到四张图片开始。这些图像应该与四个子菜单项有关(关于我们、服务、我们的工作,以及联系我们)。我从unspash.com上选了我的。

使用照片编辑器缩小和裁剪每幅图像的宽度为500 px,高度为300 px。

将它们添加/拖动到WordPress媒体库中。

义乌公司网站设计

现在回到WordPress管理中的菜单页面。

在本例中,我的第一栏中的顶部链接是“关于我们”。单击“关于我们”项目右侧的箭头。在“导航标签”框中,使用html IMG标记将您想要的图像直接添加到文本“关于我们”之前。图像标记应该如下所示:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

add image tag

若要查找图像的url,请转到媒体→库。单击要添加的图像。在“附件详细信息”弹出屏幕中,找到右侧部分中的url,突出显示它,然后使用ctrl+c将其复制到剪贴板。

copy image url

现在回到菜单页面上的“关于我们”的菜单项配置,使用ctrl+v粘贴图像的url,替换文本“插入图像URL”。

在您离开“关于我们”菜单项的配置选项之前,找到CSS类文本框并输入类“mega-link”。

这将允许我们在以后添加一些自定义样式。

add link class

重复此过程,将下面的三个图像与“mega-link”类一起添加到每个子菜单项中。(在本例中,剩下的三个项目是“服务”、“我们的工作”和“联系我们”)。

转到您的网站,并悬停在超级菜单链接。现在你的超级菜单应该是这样的:

mega menu with images

请注意,当您悬停在每个图像上时,图像与下面的子菜单项目一起具有淡出效果。这是因为图像是该链接的一部分,因此单击它将您带到相关的URL。

最后接触

对于最后一步,添加自定义CSS到菜单,以使文本字体更大和居中。此外,给出一个边界半径周围的图像,以使它看起来更干净。

在WordPress管理中,转到divi→主题选项。向下滚动到自定义CSS框,并输入以下CSS:

 .mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}

.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

}

保存更改

最终结果

你们都完了!

您有一个带有图像的Divi超级菜单,而不必使用插件。利用这一添加为您的当前网站或下一个项目,以改善导航。这种菜单对内容丰富、需要产品图像的电子商务网站尤其有效。希望你觉得有用。

finished mega menu

每天都有更多的Divi Awesomity

我希望你喜欢这个教程。我们每天都会发布一篇全新的Divi博客文章。如果您有教程请求,请务必在下面的备注部分中为我们保留它。


上一篇:义乌公司网站建设:使用自定义Divi的二级菜单栏下一篇:义乌高端网站建设:把网络当作设计师而不让你失去理智