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

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

今天，我将向您展示如何使用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：

注意，我将使用的两个类是“旋转-右”和“旋转-左”。我们将使用这些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：

左转

就这样!

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

有反应吗？

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

最后思想

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

我希望这会有所帮助。

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