朔州小程序开发:如何构建具有重叠和垂直文本的创造性形象布局

2019.05.27 朔州小程序开发

159

朔州小程序开发组织一个好的图像布局或网格有一些美丽的东西。但有时,美被发现在完美对称的边界之外。我们都见过这种不对称平衡在市场营销中的例子。你可以在餐馆的菜单,小册子,和无数的网站上找到他们的投资组合和画廊。

今天,我将向您展示如何使用Divi构建自己的创意形象布局。这些概念并不是令人震惊的(或者是独一无二的),但我希望这能激励你跳出框框去思考,创造出一些令人惊叹的东西。所以对于那些想回避完美对称和混合事物的人来说,这是你们的教程。

设计要素的准备

下面是构建此布局所需的内容:

1. 最新版本Divi主题已安装和活动

2. 的副本免费餐厅布局包。导入加里尔-约翰逊餐厅文件到Divi库。这将为您在创建新布局方面提供一个先机。

3. 如果您选择使用您自己的图像,我将确保它们的大小至少为800×500。

构建图像布局和添加内容

这种独特的布局需要一个独特的设计过程。把它想象成一本剪贴簿。在开始移动它们之前,我们将把所有的零件都布置好,以便为每个零件找到合适的位置。这个过程还将帮助您获得设计过程的更多所有权,并在添加自己的内容时以您想要的方式调整内容。

因此,我认为最好先添加所有行和内容(图像、文本)。这将提供一个基本的框架,使我们可以可视化的整体,然后我们开始设计的部分。

使用餐厅画廊布局

首先,让我们创建一个新页面并将餐厅画廊布局上传到页面。布局有一个页眉和一个页脚部分(我们现在不谈了。我们将使用四个行(四列)中的每一行中的图像来添加到我们的新布局中。如果你愿意的话,你可以选择从头开始创建你的图像模块。我这么做只是为了加速这个过程。

 

您可以将现有的内容(图库中的所有图像)视为可以用来填充新布局的资源。

添加第一节内容

创建一个具有两列(半)列结构的新行的新规则部分。然后将其拖到布局的标题部分下面。

 

在新行的第一列中,我们实际上将创建一个图像模块,并从我们的媒体库获取一个垂直图像(这是在下面的现有内容中没有找到的唯一图像)。

接下来,在第一列中,将图像直接拖到前面的图像下。

然后在第一列的第二个图像下添加一个文本模块,并添加下面的虚拟文本:

“SED ut perpiiciiniunde omisiste natus Erse坐ventpatem宾格antium doloremque laudantium,toam rem aperiam,e猕猴Ipsa quae ab illo reveritatiet拟建筑猕猴Ipsa quae ab illo Inventore.”

直接在该文本模块下面添加另一个文本模块,其内容文本为:“烘焙”

它处理第一行中的第一列。

 

在第一行的第二列中,添加一个包含内容文本的文本模块:“RESTERY”

然后从底部的现有内容中将图像模块直接拖到该文本模块下面。

从第一列复制两个文本模块,并将它们粘贴到图像下的第二列上(确保段落虚拟内容保持在单个文本内容之上。然后将“烘焙”改为“入门”。

 

增加第二节内容

接下来,在刚才创建的规则部分下面添加一个新的常规部分。给它一排一列的结构。

 

将两个图像(图像模块)从下面的现有内容拖到新的一列行中。他们将横跨这一行的全部宽度。没关系,我们稍后会调整大小和位置。

直接在前面添加一个新行,并给它一个三列(三分之一,三分之一)的结构。

将图像从下面的现有内容拖动到第一列(最左边)。

在第二个(中间)列中,添加一个内容文本的文本模块:“Desserts”

然后复制第一节中的段虚拟文本的任何文本模块,并将其粘贴到“Desserts”文本模块下。

在第三行(最右边)中,添加一个内容文本的文本模块:“Coffee”。

 

这就是第二节的内容。

增加第三节内容

对于第三个也是最后一个部分,添加一个具有两列(半行)结构的规则节。

在第一个(左)列中,从下面的现有内容中拖动图像。在图像下面,复制并粘贴到我们一直使用的虚拟文本中。然后在虚拟文本下面添加一个文本模块,内容文本为:“Crab”

 

在同一行的右列中,输入内容文本的文本模块:“Seafood”。

然后在其下添加段落虚拟文本模块。

在虚拟文本下,从下面的现有内容中拖动图像。

 

好吧,这就考虑到了我们布局的框架和内容。但是在我们开始设计这个布局之前,让我们删除包含前面布局“助手”内容的部分。

设计布局

现在我们已经准备好了框架(行和列)和内容(图像和文本模块),现在我们可以开始设计过程了。为了移动周围的东西,我们将调整某些图像的宽度和边距,以便它们可以做一些类似重叠的事情。重叠图像的秘诀是使用负值对你的保证金设置“拉”图像的方向,你希望他们去。此外,除了设置文本字体、大小和页边距之外,我还将添加几行内联自定义CSS,以旋转几个单词垂直显示。

我们开始吧。

第一波设计:文本模块

由于整个布局共享相似的字体设计,所以我发现先更新一个文本模块设置,然后将样式复制并粘贴到共享设置的其他文本模块上会更容易。这避免了为每个模块一个地添加相同的常规设置的重复。

此布局中的文本有两种字体和三种大小。Play Display用于较大的单字,蒙特塞拉特用于段落文本。

小段案文

单击此处可更新第一节第一列中虚拟文本模块的设置(或其他任何人,这并不重要),并更新以下内容:

文字字体:蒙特塞拉特

 

这才是真正需要做的。使用漂亮的右键单击菜单(或短键CTR+ALT+C和CTR+ALT+V),复制模块的样式/设计设置,并在整个布局中将设计设置粘贴到每个虚拟段落文本模块上。

大单字文本

查找带有单一文本“烘焙”的文本模块。按以下方式更新设置。

文本字体:PlayFairDisplay
文本字体权重:粗体
文本大小:72 px(D),50 px(T),42 px(S)
文字间距:12 px
文本行高:1em

现在,使用右键单击菜单(或短键CTR+ALT+C和CTR+ALT+V),复制文本模块的样式/设计设置,并将设计设置粘贴到每个包含单个单词的文本模块上(新鲜、入门、甜点、咖啡、海鲜和螃蟹)。

中单字文本

我们不希望我们所有的单词都有相同的大尺寸,但是在添加到少数几个需要不同大小的文本模块之前,先将它们粘贴到所有的设计设置中会更快一些。

使用内容文本“starters”定位文本模块,并更新以下设置:

文本大小:42 px(D),32 px(T),32 px(S)

 

现在,复制文本模块的设计设置,并将设计设置粘贴到文本模块上,使用单词“Desserts”和“Coffee”。

第二波设计浪潮:尺寸、边缘与盒影

为了在整个布局中调整朔州小程序开发图像和文本的页边距,我将从第一个(顶部)部分开始,然后继续到第二个和第三个部分。

第一节

在Seciton One的左列中,更新第一个(顶部)图像的图像模块设置如下:

海关保证金:-30%底部,-20%左

这做了两件事。首先,它把图像向上拉,这样它就会重叠,其次,它把图像拉到左边。

注:重要的是要注意的是,在负边缘值可以完成这种布局的图像。你可能会认为,增加30%的顶部和20%的权利将实现类似的效果,但所有这些都是推低图像和缩小图像,以便它有20%的空白在右边。

对于直接在下面的图像,请在“设计”选项卡中更新以下设置,使其具有框影:

框影:[选择第一个选项]
框影水平位置:-18 px
盒影垂直位置:-18 px
盒影模糊强度:50 px
盒影扩展强度:-7 px
阴影颜色:RGBA(0,0,0,0.3)

 

在包含虚拟文本的图像下面的文本模块中,更新以下内容:

宽度:65%(D),100%(T),100%(S)

 

这是为了创造空间,每当我们浮动“烘烤”这个词垂直显示在右边。

接下来,按以下方式更新右侧列中的虚拟段落文本模块设置:

 

这将为将“starters”一词垂直地显示在段落的左边留出空间。

第二节

在第二节的第一行中,按如下方式更新左列中图像的大小:

力全宽:否
宽度:60%(D),100%(T),100%(S)

 

对于列中的第二个图像,复制具有框影的第一节中的图像设计,并将其粘贴到图像中。然后更新以下内容:

力全宽:否
宽度:70%(D),80%(T),80%(S)
模块对齐:右
自定义保证金:-20%

 

接下来,转到第二节中的三列行,并按如下方式更新左列中的图像设置:

力全宽:否
宽度:90%(D),50%(T),50%(S)
自定义保证金:-30%

 

第三节

对于最后一节,从左列开始,按以下方式更新虚拟段落文本模块:

客户保证金:50%右(D),0 px右(T),0 px右(S)

 

在右边的列中,更新包含虚拟段落文本的文本模块,如下所示:

宽度:65%(D),100%(T),100%(S)

 

对于右边列中的虚拟文本直接下面的图像,复制具有框影的第一节中的图像设计,并将其粘贴到图像中。然后更新以下内容:

力全宽:否
自定义页边距(桌面):10%顶部,-30%左
定制边距(平板):左0 px;

 

以下是我们到目前为止的情况。

 

设计的最后浪潮:用自定义CSS使文本垂直

在这一点上,剩下要做的就是旋转我们的文本,使其垂直显示,而不是水平显示。要做到这一点,我们将使用一些自定义CSS(“转换:旋转”属性)和一些对边距的调整来定位文本的垂直位置。

G>注意:我可以在每个文本模块的高级选项卡下分别添加内联CSS,但我认为将CSS添加到页面设置中,然后用类针对每个模块将使您更好地控制这些设置。例如,可以添加媒体查询以禁用移动设备上的垂直文本显示。

在底部设置菜单中打开页面设置。然后单击“高级”选项卡,并在“自定义CSS”框中输入以下CSS:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.rotate-right {

-moz-transform:rotate(90deg); 

-webkit-transform:rotate(90deg); 

-o-transform:rotate(90deg); 

-ms-transform:rotate(90deg);

transform: rotate(90deg);

-moz-transform-origin: right top 0;

-o-transform-origin: right top 0;

-ms-transform-origin: right top 0;

transform-origin: right top 0;

float: right;

}

 

.rotate-left {

-moz-transform:rotate(270deg); 

-webkit-transform:rotate(270deg); 

-o-transform:rotate(270deg); 

-ms-transform:rotate(270deg);

transform: rotate(270deg);

-moz-transform-origin: left bottom 0;

-o-transform-origin: left bottom 0;

-ms-transform-origin: left bottom 0;

transform-origin:  left bottom 0;

float: right;

}

 

注意,我将使用的两个类是“旋转-右”和“旋转-左”。我们将使用这些CSS ID以内容文本“Bake”、“Starters”、“Coffee”和“Crab”为目标的文本模块。

对于包含“烘焙”的文本模块,请在“设计”选项卡中更新以下内容:

自定义页边距(桌面):10%顶部,-40%右
自定义空白(平板电脑):35%顶级,-20%正确

然后转到预置选项卡,并添加以下CSS类:

左转

对于包含“starters”的文本模块,请在Design选项卡中更新以下内容:

客户保证金:20%上线,75%右

然后转到预置选项卡,并添加以下CSS类:

右转

对于包含“Coffee”的文本模块,请在“设计”选项卡中更新以下内容:

自定义页边距(桌面):80%顶部,15%右边
定制利润率(平板电脑):30%
自定义保证金(智能手机):50%

然后转到“预先”选项卡并添加以下CSS ID:

右转

对于包含“Crab”的文本模块,请在“设计”选项卡中更新以下内容:

自定义页边距(桌面):-20%右
自定义空白(平板电脑):20%顶部,-20%右

然后转到“预先”选项卡并添加以下CSS ID:

左转

就这样!

保存您的设置并在活动站点上查看结果。

 

有反应吗?

由于在整个设计中额外的保证金规格,布局看起来很好的移动以及。

 

最后思想

我的最终目标是让这些创造性的果汁流动本教程。有这么多的工作可以用边距来创造完美的布局。我故意不修改节和行的设置,以便集中精力在模块周围移动。但是,您可以将布局提升到另一个设计级别(特别是对于大型监视器),方法是为您的行和节添加一些额外的边距和间距。

我希望这会有所帮助。

到下一次,我会在朔州小程序开发评论中和你见面。

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP