Elementor入门教程：做出一张能用的页面，再检查手机效果

这个练习不需要先装一套大模板，也不要求购买高级组件。需要提前准备的是一张能说明产品的图片、几段真实介绍，以及一个已经能接收咨询的联系入口。下面以“定制包装盒咨询”为例；产品资料和参数请换成自己的，示例不代表任何商家的实际服务。

先确认编辑范围，再进入画布

Elementor 是 WordPress 的编辑器插件。页面正文、网站页眉、页脚和文章模板可以由不同对象管理。打开一张普通页面时，这次要改的是它的正文；页面上虽然看得到导航，也不代表导航属于这张页面。

在 WordPress 的“页面”中新建页面，填写便于辨认的标题，保存草稿，再选择“使用 Elementor 编辑”。如果网站已有统一页眉和页脚，沿用现有结构。不要在草稿顶部再放一次 Logo 和导航，否则前台可能出现两套页眉，以后也得逐页维护。

同时认清正在使用哪类元素。传统容器和组件、新版 Atomic 元素的面板并不完全一样。本教程后面的标题、文本、图片和按钮操作，按传统容器与组件说明；如果面板主要显示 Atomic 元素，就先回到相应的传统元素组完成练习，或者按当前 V4 官方教程操作，不把两套属性名称混着找。Elementor V4 入门说明介绍了它们与旧容器共存的方式。跟教程时优先对照“选中的对象、属性、预期效果”，不用为了让按钮位置一致而切换整个网站的编辑器功能。

老页面如果还是 Section、Column 结构，先在新草稿练习容器。将已有页面转换成新结构是另一项工作，要单独检查，不是入门练习的前置步骤。

页面布局决定外壳，容器决定正文怎么排

打开当前页面的设置，找到页面布局。名称可能显示为 Default、Elementor Full Width、Elementor Canvas，中文界面会有对应翻译。

页面布局	本次练习怎样选	应检查的结果
默认	希望继续使用主题现有页面样式时先试	主题标题、侧栏和正文宽度是否适用
Elementor 全宽	希望正文有更宽设计空间，同时保留站点导航	前台仍有预期页眉页脚，正文限宽正确
Elementor Canvas	确实需要独立空白落地页时使用	常规页眉、页脚、侧栏被移除

Canvas 的官方说明明确列出了移除的区域。这张咨询入口页还需要让客户浏览产品和公司信息，可以优先使用保留导航的方案。

这里要分清两处“宽度”。页面布局决定正文被放进什么外壳；首屏容器的宽度决定图文在外壳里面占多少。把子容器改成 100%，只能占满它的父级，不能自动越过主题留下的窄内容区。官方全宽说明也分别讨论页面模板和容器。

如果预览两侧仍有大块空白，先确定是哪一层限宽。不要连续给标题、图片、按钮都加负边距，把它们硬推到外壳之外。当前页设置也不要和全站默认布局混淆，后者可能影响其他页面。

搭首屏时，先把父子关系看清楚

我们的首屏由三个容器组成：外层叫“首屏”，里面是“首屏文案”和“首屏图片”两个子容器。文案子容器放标题、说明和按钮，图片子容器放产品图。桌面左右排，手机上下排。

在结构面板里命名这些对象，比反复在画布上点细边框容易得多。选中“首屏”时，两栏应该一起出现选择边框；选中“首屏文案”时，只选中标题、说明和按钮所在区域。先做这个小检查，后面的对齐设置才不会改错地方。

按顺序建立：

1. 添加一个外层容器，把排列方向设为横向。
2. 在里面放两个子容器，确认它们是同级，而不是误把图片容器拖进文案容器。
3. 让文案子容器纵向排列，再加入标题、文本和按钮。
4. 给右侧加入图片组件。
5. 为外层设置两栏之间的间距，为文案子容器设置文字之间的间距。
6. 到结构面板重新检查三个容器的归属和名称。

Elementor 的首个容器页面教程可以用来熟悉添加元素的操作。里面的背景图、首屏高度和尺寸属于它的设计示例，不用全部照搬。

不同空隙，要到不同地方调整

两栏太近，改外层的 gap；正文贴着首屏边缘，改容器 padding；标题和说明距离不合适，改文案子容器的 gap，或检查元素自己的 margin。三种空隙可以叠加，所以不要见到空白就再塞一个 Spacer。

尺寸也需要考虑间距。假设外层可供两栏使用的内容宽度是 960px，中间 gap 为 32px，两栏平均分配剩余空间，就是各 464px。若两个子容器都要求 50%，再加 32px 间距，浏览器还要按 Flex 收缩、换行及最小宽度等设置处理它们，实际效果未必是想象中的整齐对半。

可以用可伸缩的两栏分配，也可以在当前布局里调整宽度与收缩设置；关键是看最终效果，而不是迷信“两个 50%”。这个算例只帮助理解空间分配，不是规定页面必须宽 960px。

首屏内容居中对齐时，选择负责排列的父容器。调整文案内部的文字对齐，则选文本或文案容器。需要让图片与整组文案上下居中，不必逐个给标题添加上边距。

用真实内容完成标题、图片和按钮

首屏主标题可以写“定制包装盒咨询”，说明写清接受哪类包装需求、客户需要提供哪些规格。如果暂时不能确定交期或起订量，就告诉访客要根据材料、数量和工艺确认，别为填满版面编造承诺。

标题组件里要分别检查文字、HTML 标签和字体样式。页面主标题使用 H1，后面的“咨询前准备什么”使用 H2。想把某句话变大，可以调整字号，不必把所有大字都设成 H1。主题如果已在正文上方输出同一个页面标题，需要决定保留哪一处，避免两个重复标题抢占首屏。

重要产品图用图片组件，尺寸和材料仍写成页面文字。上传前确认裁切不会去掉开合结构、接口等判断产品所需的细节。替代文本可以写“牛皮纸折叠包装盒打开后的结构”，无需塞进一串“厂家、批发、最佳”。压缩、显示尺寸和媒体管理可以接着看WordPress 媒体库与图片优化。

按钮是这个练习的功能验收点。文字写“咨询包装规格”，链接填网站实际存在的联系页地址，再保存并到预览里点击。链接不是只要有蓝色或下划线就算填好了，也不要把占位符 # 留在对外页面里。

如果按钮需要跳到本页的准备材料区域，可以这样设置：

• 选中目标区域，给 CSS ID 填 inquiry-details，字段里不带 #。
• 在按钮链接中填 #inquiry-details。
• 保存后打开实际预览，点击按钮，检查是否到达这一节。
• 同一页面内只保留一个相同 ID；复制区域后，要修改重复的 ID。

这是官方锚点说明对应的基本写法。如果页面有固定页眉，还要确认落点标题没有被挡住。只有滚动发生，却看不见用户要找的内容，仍然需要调整落点或留白。

补上第二节，页面才有完整的咨询过程

首屏下面添加一个独立容器，标题设为“咨询前准备什么”，内容按客户实际能提供的资料组织。例如：尺寸与用途、预计数量、材质或参考图片、是否需要印刷。每项解释清楚它为什么影响方案，暂时没有资料时可以怎样描述需求。

“提供包装盒尺寸”太短，读者仍可能不知道给内尺寸还是外尺寸。你可以写成：“如果已有样盒，说明测量的是内部可用尺寸还是外部尺寸；没有样盒时，先提供需要装入的产品长宽高与照片。”只有业务确实能按这种方式处理时，才把它写到真实页面。

这一节可以用 H2、短段落和列表完成。内容没有形成可比较的几个对象时，不需要硬做成三张等高卡片。后面再放一次联系按钮时，保持与首屏相同的去向和措辞；如果下一步不同，应让按钮文字表达这个差别。

颜色先使用网站已有的正文色和强调色。改变局部容器的背景，一般针对这个对象；修改全局颜色、共享 class 或可复用组件，可能影响多处。看到“共享”或被其他元素引用的样式时，先确认修改范围。第一次练习宁可少做几处样式，也不要为了改一个按钮，把全站链接颜色一并换掉。

手机调整要沿用同一组内容

先把窗口切到手机预览，选中“首屏”父容器，把两栏调整为纵向，再检查子容器宽度。通常先让访客读到产品说明和下一步，再看到产品图；内容顺序应便于理解，而不是只追求截图左右对称。

响应式编辑说明指出，可以按设备调整的设置会带设备图标。处于手机预览，并不意味着你改的每一个字段都只作用于手机。例如正文文字本身仍是同一份，改掉产品名称不能期待桌面版本保持原文。

先处理方向和宽度，再调字号和间距。桌面合适的宽左右内边距，到了窄屏可能把内容挤成一条；固定高度在中文标题多折一行后，也可能截掉按钮。让正文自然撑开，通常比给每个设备硬设一个高度更容易维护。

可以用以下顺序验收，而不是只点一遍手机图标：

检查项	实际怎么试	发现问题先看哪里
容器宽度	把预览拖窄，再拖宽	子容器固定宽度、父级内边距、gap
文字	换成长一点的真实产品名	字号、不可断开的字符串、固定高度
图片	查看主体及边缘细节	裁切方式、宽高限制、图片比例
按钮	连续点击并返回页面	触摸区域、遮挡、真实链接
页面顺序	从头读完，再用键盘 Tab 操作	视觉重排与内容顺序、隐藏副本

如果某个设备上以前填过独立数值，修改桌面样式后它可能继续使用自己的设置。发现“桌面改了、手机没变”时，先查看该设备字段是否已有覆盖值，不用急着复制整段重做。

最后在真实手机上打开可访问页面。菜单展开、浏览器地址栏变化、悬浮聊天按钮、文字放大，都可能暴露画布里没看见的问题。不要给整页加 overflow: hidden 来遮住横向滚动；应先找到超宽的元素，否则也可能把有效内容和按钮裁掉。

保存、预览、发布分别解决不同问题

保存草稿，表示编辑内容已经保存；预览是检查这个版本；发布或更新才决定公开页面的版本。操作前先看页面当前状态，特别是正在改已有公开页面时，别把“更新”当作只保存给自己看的动作。

完成首屏后保存一次，第二节和手机布局完成后再保存一次。误改后优先恢复相应页面版本。Elementor 历史记录说明区分当前会话的 Actions 和已保存版本的 Revisions。页面修订不等于整站备份，也不能假定它能撤销插件设置、媒体删除和所有共享样式变化。

准备公开时，从页面顶部走完整个咨询过程：看懂产品、找到准备资料、点击联系按钮、到达联系页。若联系页有表单，还应验证提交结果和接收通知；单独这一页的按钮能点击，并不能证明后面的询盘功能已经正常。

再检查页面地址和公开状态。草稿预览地址不适合作为菜单里的长期链接；已发布的页面也不会自动出现在导航中，需要到现有菜单管理入口加入正确地址。如果它要成为首页，还要确认 WordPress 阅读设置的首页指向，不能只把页面名字叫“首页”。

发布后用退出登录的浏览器访问公开地址，核对没有重复导航、占位文字和错链。更完整的站点项目可以对照WordPress 上线检查清单。

异常时，按现象缩小范围

**画布打不开或一直转圈：**先记录是所有页面都异常，还是只有这一张。用不受扩展干扰的浏览器环境复查，再核对插件与运行环境。Elementor 安全模式可以帮助隔离管理员编辑器中的主题或插件干扰；它不是前台修复开关，也不能凭一次打开成功就确认某个插件有错。需要停用组件复现时，在测试环境逐项进行。

**编辑器正确，公开页面还是旧样式：**先比对页面地址、保存状态和实际版本，再查缓存。不要还没确认编辑的是同一张页面，就清理整站或复制新页面。确认涉及生成样式文件后，按当前版本工具重建相关文件，再清理相应层缓存。

**页眉页脚突然不见：**如果只有这一页，先查页面布局是否选了 Canvas；如果许多页面同时变化，再看共享模板和显示条件。没有必要在每个受影响页面里重新放一套导航。

**一改背景或按钮，全站多处一起变化：**停下来检查共享样式、全局元素或模板。恢复时也要在负责它的对象中恢复，只修改当前页面的正文可能无法解决。以后再试局部样式时，先确认没有改动共享定义。

这张练习页完成后，再到WordPress 建站知识库补充导航、媒体和后台设置，会比一开始同时学习所有高级组件更容易串起来。