设置Page Title Bar部分

>>>设置Page Title Bar部分
设置Page Title Bar部分2018-01-30T20:11:43+00:00

Project Description

更新日期: 2017-10-17

关于Page Title Bar的样式调整设置,参考《Theme Options简介中Page Title Bar部分》

在Theme Options中的设置项中如果有“This option has a dependency for a corresponding Page Option.” 这句提示,就说明这个选项的设置都是可以在每个页面的 Fusion Page Options 中单独的进行设置。

所以,每一个portfolio、page都可以设置单独的Page Title Bar的样式,在每个页面编辑界面中的Fusion Page Options -> Page Title Bar中进行设置。

下面说几个常会遇到的问题:

  • 用背景图还是用背景颜色好
  • 100% Page Title Width 什么时候开启
  • Parallax Background Image是个什么效果

背景颜色or背景图片

这不是非黑即白的那种选择。

  • 背景色,相对简单、单调些,对这块区域要求不高的可以直接用背景颜色就解决问题了;
  • 背景图,图片的表达信息可以更多,对图片的要求也会更高;

在选择Layout选择了Wide而不是Boxed的时候,这个Page Title Bar的宽度是根据你屏幕的分辨率大小来的,那么使用图片背景的时候,就要考虑到图片尺寸不能太小吧。比如你笔记本电脑分辨率是 1366*768,然后你做了个1366*90 的图片上传上去做背景图了,看上去完美,但是你一回到台式机上 1920*1080的分辨率,然后就发现左右两边不够宽了啊,丑。

所以,这图片1920px宽度最少了吧,图片也就不小了。在那种高质量图片才能很好展示和表达产品的情况下,可以这么做。而且选背景图的话,那page title bar的height就不用还是设置的这么矮小了,可以适当的设置高一些,要不然图片也看不出个什么。

100% Page Title Width开启

默认情况下,这个选项是 Off 的,也就是 Page Title Bar的内容宽度是和Site Width一致。

如果开启,那就是根据屏幕宽度来了,如果页面的内容区域也是根据屏幕的100%来的,那这个就有必要开启,但是通常情况,还是根据Site Width来比较好布局内容。

Parallax Background Image效果

为了能看出效果,我上传了张比较大的图片(顺手搜的一张非产品相关图片,2560 × 1146px),同时把Page Title Bar的高度设置成200,然后把Parallax Background Image选项设置为On。

可以看到,这个背景图片并不是跟随页面在滚动的,而是固定着。

同理,在Avada主题中,其他地方出现了设置background image的,基本上都会有个parallax的选项来设置是否开启这种效果。