Elementor编辑器页头样式设置
本文讲解Elementor页头模板的样式设置方法,包括主导航菜单文字排版与三态颜色配置、带电话图标的联系按钮添加、内容版块垂直对齐与页头内距调整,帮助外贸独立站搭建者快速完成页头布局。
页头模板一行三列的版块中,标题文字设置好之后,剩下主菜单和联系按钮两块要处理。这里先演示Nav Menu元素的拖入方法,对菜单文字、排版和三态颜色进行设置,再把带电话图标的联系按钮放进第三个版块,最后统一完成三个版块的垂直对齐与页头内距调整。

单击Elementor编辑器右上角的图标,然后将"Nav Menu"元素拖动到页头模板的第二个待编辑的内容块中。
接下来对页头主导航菜单中的文字进行设置。首先在"内容"选项卡中找到"Pointer"选项,在其下拉列表中选择"None"。也就是说,当鼠标指针悬停在某个主菜单项目上或单击某个主菜单项目时,不会出现指针的指引状态。然后在"样式"功能中找到"排版"选项,设置"字形系列"和"尺寸"。最后通过"Text Color"功能对NORMAL、HOVER、ACTIVE这三个状态分别设置不同的字体颜色,这三个状态分别是正常显示状态、鼠标悬停显示状态和鼠标单击激活状态。
现在来设置页头模板的最后一个内容版块——联系按钮。将"按钮"功能元素拖动到页头模板的第三个待编辑内容版块中,然后对按钮的具体内容进行设置。
首先输入文本内容,这里的内容就是按钮显示的文字。然后设置按钮的尺寸,这里的尺寸是快捷选项,也可以通过在"样式"中调整按钮的内距数值来设置。因为房地产的页头中,电话号码旁边还有个电话的图标,所以要单击"图标"选项中的最后一个图标。
对按钮的背景颜色进行设置。首先选择"样式"选项卡,然后在"标准"模式中单击背景颜色按钮,在弹出的面板下的文本框中输入对应的颜色值"#011640",接着在"悬停"模式下单击背景颜色,输入对应的颜色值"#ffd6d6"。
这三个内容版块编辑完成之后,还需要对三个内容版块进行垂直对齐设置。首先在页面中单击"垂直对齐"的下拉列表,在下拉列表中选择"中间"选项。这样页头的三个内容编辑区块就会垂直居中显示了。
最后来调整整个页头的边距,首先单击页头内容块管理图标,然后在左边的Elementor中选择"高级设置",在"内距"中的顶部和底部分别输入40(此处单位为px)。
注意:在填入对应间距数值的时候,如果不想上、下、左、右数值一样,需要先取消选中最右边的链条图标,否则填入一个数字后,其他三个方向的数值会变成一样。
(本文内容根据网络资料整理,出于传递更多信息之目的,读者需判断其时效性,不代表连连赞同其观点和立场)









































