More

    Avada页面和容器如何设置100% 宽度?

    这节课分享一个常见的问题,我们用Avada主题从零做页面,经常会遇到页面的宽度、容器宽度,内容宽度,他们之间匹配的问题,觉个例子:

    新建一个页面,新建一个容器,比如1/1,也就是100%占满的容器。编辑这个容器的属性,在常规标签里,第一条有个选项,是选择100%宽度,还是站点宽度。也许你的容器设置和我的不一样,没有这个选项,是因为在页面编辑状态下,注意右侧的“页面属性”,里面有个“模板”,是“默认模板”,改成“100%宽度”,就可以了,这样,容器的属性设置里会出现100%宽度的选项。页面的默认模板,是没有100%宽度选项。页面的模板设置成100%宽度,相当于把这个页面变成了100% 宽度,没有固定值,浏览器窗口宽度是多少,它就可以是多少。如果页面选择“默认模板”,容器的宽度会按照站点设置的宽度,这个宽度在主题选项里设置。

    100%宽度,可以通过设置背景颜色表现出来,背景是灰色,因为没有内容,只有一条背景色。前景填充了内容,背景色才会被撑开,绿色的是前景内容。缩放页面比例,相当于在大分辨率下看页面,内容同样是充满整个屏幕,这就是100%宽度。

    前景换成博客内容,换一种表现形式,来看背景与前景的关系。
    再切回页面的默认模板,相当于站点的固定宽度,在大分辨率下,两边会有空白,而不是充满整个屏幕。
    再把背景加上图片,背景图片要高一层,会盖住背景颜色,背景图片的尺寸尽量做的大一些,比如1920px宽。

    页面模板改成100%宽,容器第一条选项改成“站点宽度”,这时再看容器的背景图,是100%撑开的,它是跟着页面宽度走,但是里面的内容是按照站点宽度走。容器里那个选项是控制容器内容的宽度。
    站点宽度,在主题选项的“布局”里,这里的站点宽度,控制着整个网站内容的宽度。

    这节课内容就到这里,下节课我们看前景和背景之间的间距。

    前往《用 WordPress和 Avada做网站》完整版教程

    achair
    achair
    大家好,我是achair,这个网站主要和各位分享一些经验,包括WordPress教程、苹果Mac电脑使用、游戏、电脑、数码、影视、生活等。更多关于achair信息,请点击 关于achair

    发表回复

    请填写评论
    请填写您的名字

    -广告位-

    achair推荐

    我的MacBook Pro都装了这些软件 2019版

    用MacBookPro年头多了,如果想把MacOS X作为主力机(半商务、半技术用),软件关是必须得...

    阻止iPhone自动下载更新iOS13的tvOS beta描述文件不能用了怎么办...

    2020年2月13追加 最近收到一些小伙伴的反馈,说之前iOS12的描述文件失效了,不能用了。而且...

    推荐这种方式获得“苹果Mac软件”(叶子登录器)

    大家好,这次推荐和WordPress没有直接关系,有间接关系,估计很多同学用的是苹果的Mac电脑。 ...

    “全部WordPress课程”的学习顺序及如何优惠购买

    大家好,achair的《WordPress课程》,现在课程数量有点多,以后还会增加新课程和新课时,刚...

    从Themeforest购买正版WordPress主题(Avada, BeThe...

    大家好,在教程中经常出现Avada主题、BeTheme主题,这些主题是从哪来的?它们的官方购买地址是...

    推荐“SiteGround主机”作为“WordPress当前首选虚机”的15个理...

    大家好,用WordPress做网站,目前推荐使用SiteGround主机,现在是2019年12月。 ...