WordPress网站首页第3屏内容的设置
WordPress网站首页第3屏内容的设置
(1)Elementor把这个内容块做成了两行两列的排布效果。如果不注意区分,很容易理解成这是简单的图文搭配的内容版块,故还需要进行调整。
首先新建一个宽度为1400px(为了和之前做的内容宽度一致)的内容块,然后将Elementor专业版中功能元素中的“Posts”拖到新建的内容块中。
因为是一行两列,所以将“Columns”设置为2,“Posts Per Page”设置为4,“图像尺寸”设置为“完整的”。“Image Ratio”(图像比率)设置为0.77,“Excerpt”设置为隐藏,“Read More Text”设置为“Property Details”。
(2)内容调整完成之后,再对Posts功能元素的样式进行设置。首先需要设置的是行和列的间距,将“Columns Gap”和“Rows Gap”分别设置为30和35。然后在“Box”中找到“Content Padding”,将其中的左边和右边的内距均设置成50px。再在“NORMAL”选项卡中将“Background Color”的参数设置成#FFF7F1,在“HOVER”也就是鼠标悬停状态下,设置盒子阴影的参数,水平方向为0,垂直方向为10,模糊为35。
(3)对文字内容进行调整。首先将“Title”中的“color”设置成#011640,再在“排版”中设置字体为Montserrat,字体“尺寸”为20px,“重量”为400,Spacing为10。然后将“Read More”中的“Color”设置成#848484,再在“排版”中将字体设置成Montserrat,字体“尺寸”设置为18px,“重量”设置为300,最后再将“Spacing”设置成30。
(4)第三屏下面还有一部分。“Explore More”按钮和前文提到的“Explore Our Properties”按钮的设置一样,只是在细节参数设定上有所不同,此处再赘述。接下来还有一行两列的文字内容,文字内容在前面已经反复讲解,也不再整述。右边有个“About Us”按钮,做得比较有特色,来讲解一下。
首先将Elementor的“按钮”功能元素拖动到对应的内容编辑块,然后设置其“文本”为About Us,在图标库中选择对应的向右箭头图标(Arrow Right),将图标移至文字之后,并设置图标间距为10。然后在该按钮的“样式”功能下的“排版”功能中设置字体参数,并装饰为下划线。接着在“标准”模式下将文本颜色设置成#011640,背景颜色为#FFFFFF,最后在“悬停”模式下将“悬停动画”设置为Sink。
(5)接下来设置下面一行三列的文本描述模块。单纯的文字排版设置很简单,关键在于布局调整。
首先选择一行三列的布局格式,设置版块整体宽度为1400px,在“高级设置”中设置顶部内距为7%。然后对每一个小版块的内外距进行设置,其中第一个小版块外距的右边为15px,第三个小版块外距的左边为15pX,其他统一设置成内距的上、右、下、左方向分别为100px、50px、100px、50px。设置完成之后,需要为边框设置一个盒子阴影,三个小版块的操作是一样的,在标准模式下设置模糊参数为10,其他参数为0;在悬停模式下设置模糊参数为50,其他参数为0。