首页

为了更好地将理论与实践相结合，提高Elementor编辑器的熟练度，这里选用Elementor官网发布的首页模板进行实际演示。首先，进入Elementor官网，在导航栏中找到模板库（Web Creation下的Template Library）。

在模板库中找到Real Estate（房地产）模板，单击进去之后便能看到该模板的具体效果。接下来，我们将以该模板为公司网站首页，用Elementor编辑器构建相同的首页效果。

创建一个透明的网站页眉

打开自己的网站后台，在WordPress的菜单栏中找到“模板”功能，然后单击“添加新模板”按钮。

弹出新页面后，我们需要选择模板类型并命名它。模板类型中有许多可选项，在这里，我们可以选择Header，然后将其命名为“页头”。当然也可以命名为其他名称，后期调用模板的时候自己能区分就可以。

单击“创建模板”按钮，系统将弹出三个选项：“模块”、“网页”和“我的模板”，暂时不需要这些内容，可以直接关闭这个模板库。我们需要手动创建房地产网站的透明页头。仔细分析房地产网站的页头，我们可以发现该页头主要由三部分组成，其中一些由锚文本、主菜单导航和电话按钮组成。

回到页头创建页面，单击内容版块预设按钮。

在系统提供的12个预设内容版块中选择第一个。

在网页左侧找到Elementor编辑器，在“基本”元素中找到“内部区段”（Inner Section）子元素，然后把它拖到上一步创建的内容版块。请注意，只有当内容编辑块的外边框变成蓝色、里面出现一条蓝色线条时，才能释放鼠标左键，这表明元素被放置在正确的位置。

这时，我们看到内容编辑块中出现了一行两列，但是还不够。因为我们的页头有三个内容块，所以需要复制另一个内容编辑块。

右击一行两列的任何内容编辑块，在弹出的快捷菜单中选择“复制”命令，Elementor就会为我们创建相同的待编辑内容块，一行两列将成为一行三列的排布效果。使用QQ截图工具进行测量，页头宽度为1400px（像素），然后需要设置页头模板宽度。

然后在Elementor编辑器中找到标题元素（文本编辑器元素），为页头模板添加第一部分内容。

单击Elementor编辑器右上角的图标（当您想使用Elementor编辑器的其他功能时，可以单击此处），然后找到“标题”元素，并将其拖到页头一行三列的第一个内容框中。

对标题的内容和样式进行具体的输出和设置。首先在标题的“内容”选项卡中找到“标题”文本框，并输入文字“Realet”，并将对齐模式设置为左对齐。然后在“风格”选项卡的“排版”选项区设置字形系列和尺寸。注意，标题文本具有链接属性，因此可以在“链接”文本框中输入想要跳转到的页面地址。最后调整Realet这个文字标题的栏内宽度占比，约为45%。

在第一版块之前，通过拖动一行三列中第一个和第二个内容块之间的分隔虚线来调整彼此的内容宽度比例，在释放鼠标左键之前，内容占45%。（注：我没有使用Chrome浏览器的开发者工具来查看这三个版块的内容比例，因此可能与实际数据有很大不同，但不会影响前端页面的效果。）

在已经创建Home、About、Properties、News、Contact Us这5个页面（为了不影响当前页头模板的编辑工作，可以重新打开一个页面，然后进入WordPress后台，在“页面”菜单中找到“新建页面”功能，按顺序创建上述5个页面）的情况下，将主导航菜单添加到待编辑的第二个内容版块中。在WordPress的“外观”菜单中选择“菜单”子功能，创建一个名为“MENU”的主菜单，将上述5个页面都添加到MENU主菜单中，调整页面中显示的顺序，然后保存并退出菜单编辑页面。