WordPress中设计自己的页面布局对大多数人来说都具有挑战性,大多数主题都给你提供了一些布局选项,但是如果没有一个真正符合你的需求呢?
PHP、HTML、CSS,很多人认为唯一的出路就是学习,如果你只是想让你的网站看起来独特而不知道任何代码,那效率就不是很高。
好消息来了!与 元素您可以使用 a 创建自定义 WordPress 布局 拖放编辑器。不需要编码或主题修改,如果有人告诉你,他们简直就是在撒谎。
在本指南中,我们将向您展示 如何使用 Elementor 创建自定义 WordPress 布局(hood)下解释布局是如何工作的,并分享专业提示,让您的网站看起来很棒,同时仍然运行得很快,一路上,您将看到如何 主插件 可以使用额外的小部件、模板和设计选项为 Elementor 充电。
为什么使用 Elementor 创建自定义 WordPress 布局?
WordPress大多数免费和优质主题都带有多种布局,如果你乐意坚持使用单个模板,那可能就足够了。
但如果你愿意的话怎么办:
- 主页看起来与您的主题默认值完全不同?
- 产品发布会的自定义登陆页面?
- Blog post设计,有粘性侧边栏,阅读进度条,还是花哨的作者框?长篇帖子也用粘性阅读得更好 目录 WordPress 插件 因此,读者可以在各个部分之间跳跃,而无需无休止的滚动。
- WooCommerce 产品网格实际上与您的品牌相匹配?
Code你好,那就容易了,但是,就像大多数用户你不知道coding一样,那就是一大挫折。
但现在不再了。元素使您能够准确地设计您想要的东西。并且与组合时 的元素 主插件,您将获得额外的创意小部件,例如 高级选项卡、动态画廊,或者动画头条。而且我的朋友远远超出了大多数主题甚至是元素师单独提供的范围。
开始使用 Elementor
首先, 安装并激活免费的 Elementor 插件 来自 WordPress 存储库。
激活后,您将找到一个名为"新选项"的新选项 “Elementor”编辑 在您的页面和帖子上。单击它会启动 Elementor 编辑器。
Editor打开后, 您将看到以下内容:
- 在左边,你会看到的 小部件面板 (标题、图像、按钮等)。
- 右边,你会看到一个 实时预览 的你的页面。
从这里,您可以拖动任何小部件并开始构建。
专业提示: Elementor Pro 解锁了主题构建器、动态内容和 WooCommerce 模板等高级功能,如果您认真构建完整的自定义 WordPress 布局,Pro 值得升级。
您应该购买 Elementor Pro 吗?
虽然免费版的功能足以让您通过一个简单的网站。但要创建您梦想的自定义 WordPress 布局,以下是 元素专业版 解锁:
- 主题生成器(自定义标头、页脚和存档页面)
- WooCommerce 模板
- 表格和帖子等高级小部件
- 显示条件(控制模板出现的位置)
如果您认真设计全站布局,Elementor Pro 是值得的。和与 主插件者, 您可以进一步推送那些布局, 而无需购买多个单独的插件, 其实,站点部分人们假定需要Pro—像页脚—是免费的与大师插件;以下是如何 使用 Elementor 编辑 WordPress 中的页脚 无需升级。
如何使用 Elementor 创建自定义 WordPress 布局
WordPress自定义布局的第一步就是在你的WordPress网站上打开一个新鲜的页面或发帖,大多数初学者都会忽略这一点,尝试编辑现有的内容,而他们得到的是他们主题默认设计的限制。
从新页面开始,您可以获得一个干净的石板,您无需旧的格式和布局。在编辑屏幕上,您会注意到一个按钮,上面写着 “Elementor。”编辑这是魔法开始的地方。
单击该按钮会启动 Elementor 界面,该界面具有拖放式构建器,专为不想编写代码但仍需要完全创意控制的人而设计。在这里,您可以完全从头开始构建布局,从空部分开始,或者您可以使用 Elementor 的预构建模板之一让自己领先。
对于许多用户来说,最困难的部分不是定制,而是知道从哪里开始。模板通过为您提供已经结构化、风格化且易于使用的基础来消除该障碍。
如果您是新设计者,模板库是一个救生圈,通过单击 “添加模板” 按钮,您可以打开一个专业设计的选项库,准备放入您的页面中。无需怀疑英雄图像应该有多宽或如何对齐您的标题。您可以简单地浏览接近您想要的布局。
例如,如果您正在处理 “着陆” 页面,Elementor 有几个着陆页模板,看起来比主题显示的默认消息更加精致。
一旦您找到了感觉正确的设计,单击"“插入"按钮就会将其带入您的页面。您认为这是静态设计吗?不,您会得到一个完全可编辑的结构,您可以根据您的需要定制。每个图像、标题和按钮都是可定制的。这种灵活性正是为什么这么多人选择 Elementor 的原因。
Editing模板很容易,你将鼠标悬停在一个元素上,点击它,它的设置出现在左侧面板中,这种设计方法解决了传统WordPress编辑中常见的挫败感。
Elementor,您在屏幕上看到的正是您的访问者将看到的,这种即时反馈使设计更快,压力更小,而且更容易接近。
Elementor 之所以如此强大,是因为它提供的各种小部件,而不是仅限于标题和文本,而是可以插入图像库、感言滑块、地图、按钮、旋转木马,甚至是来自您已经使用的其他插件的表单。
Layout 完成后,最后一步就是保存,在最下面的面板中,“发布”按钮旁边,你会注意到一个小箭头,点击它会显示不同的保存选项,这很重要,因为很多用户担心不小心发布未完成的作品让全世界看到。
Elementor 避免了这种头痛,它可以让你将布局保存为草稿或模板,而无需让它在您的网站上实时运行,您可以预览它的外观,返回到您的 WordPress 仪表板,或者安全地存储它以供以后使用,这样,您就可以控制您的设计何时公开。
Elementor独自提供的相比,您正在设计能够反映您的品牌并直接与访客对话的布局,并且如果您发现自己想要更多的小部件、效果或预制模板,工具就像 主插件 可以进一步扩展您的设计可能性。这将帮助您创建不仅看起来专业而且感觉与您的网站独一无二的布局。
此时,您已经实时获得了第一个自定义布局。但当您超越单页时,Elementor 的真正功能就会显现出来。
如何保存和重用自定义元素布局
WordPress 的自定义布局不是每次都重新创建设计,而是可以保存为模板,并且随时随地重用,这就是 Elementor 的模板保存功能成为真正的游戏规则改变者的地方,这不仅仅是方便工作,更智能地释放时间专注于内容,而不是结构。
Elementor编辑器内部打开你一直在做的页面,在底部向下,在“发布”按钮旁边,你会注意到一个小箭头,点击它会显示更多选项,包括将你的设计保存为模板的能力,选择“保存为模板”可以确保你的辛勤工作不会只停留在一个页面上;它成为你图书馆中可重复使用的资产。
下次构建新页面时,您不必从空白画布开始,而是打开模板库,切换到"我的模板",一键插入您保存的布局。 Elementor 不会尝试手动复制间距、颜色或排版,而是让您复制您已经完善的确切结构。
对于许多用户来说,模板的真正价值并不止于一个网站。如果您管理多个站点,例如投资组合、客户端项目,甚至电子商务商店,您还可以导出保存的模板并将其导入到其他地方。通过单击模板旁边的三点图标并选择“Elementor 创建一个可以下载到计算机的文件。稍后,您可以在另一个 WordPress 安装上上传同一文件,并立即将您的设计带入其中。
WordPress用户来说,这个工作流程解决了一个非常真实的痛点:浪费时间和不一致的设计。模板确保您的网站看起来有凝聚力和专业性,而不会将您锁定在单个主题的局限性中。
想进一步推进您的设计?Master Addons 提供自己的模板库,让您保存自定义 WordPress 布局,并利用不断增长的专业模板集合。在几秒钟内轻松导入和调整这些设计,实现无缝、创意的提升。
结论
Elementor构建令人惊叹的WordPress布局非常简单。并且它可以让你自由地用风格进行设计。从简单的页面开始,并升级到主题构建器,显示条件和动态内容以获得更多控制。所以,今天你已经学会了如何使用elementor创建自定义WordPress布局。
想让你的设计更加突出?Master Addons 带来了额外的天赋,它具有高级小部件、引人注目的效果以及可将功能布局变成令人难忘的模板。无论您是在创建博客、作品集还是 WooCommerce 商店,Elementor 与 Master Addons 搭配都是您所需要的一切。
