如何使用 Elementor 和 WidgetKit 将 PSD 转换为 WordPress
已发表: 2019-12-12您是否正在寻找 PSD 到 WordPress 的转换解决方案？ 想要将您准备好的网站 PSD 转换为 WordPress，但不知道如何？ 好的，我可以帮你解决这个问题。
您已经知道 WordPress 是最近使用最多、用途最广泛的 CMS 平台之一。 现在，使用 Elementor 之类的页面构建器创建一个从 PSD 到 WordPress 主题的全功能网站，而不需要编码更加舒适。
在本文中，我将逐步向您展示“如何使用 Elementor 和 WidgetKit 将 PSD 转换为 WordPress” 。
让我们看看如何。
选择 PSD 设计
在将 PSD 转换为 WordPress 主题之前，您需要做的第一件事是选择网站的 PSD 设计。 简而言之，PSD 是 PhotoShop Design 的缩写，它是最流行的设计工具之一，创建了大多数 WordPress 网站设计。
您可以从广泛的PSDHUB 集合中选择任何您喜欢的 PSD 设计。
他们为您的网站提供优质的免费 PSD 模板，包括个人和商业用途。 请记住，您选择的 PSD 设计必须简单且具有现代感。
在选择 PSD 设计时检查以下因素，
- 设计结构：首先要考虑的是设计结构。 设计没有界限，但编码有。
- 干净优雅的布局：第三件事是您首选的 PSD 设计必须干净优雅。 它可以帮助开发人员从干净优雅的布局中创建一个像素完美的网站。
- 目的实现：第二件事是，设计是否符合您的目的。 假设您需要一个旅游网站，那么您的 PSD 设计必须是一个旅游网站 PSD。
- 复杂性：最后，尽量忽略复杂性，因为 PSD 在设计选择中也是如此。
这里我们使用来自 PSDHUB 的 Eventia-Conference 和 Event Management Template。
安装 WordPress
WordPress以其易于安装而闻名。 在大多数情况下，安装 WordPress 是一个非常简单的过程，只需不到五分钟即可完成。 要将 PSD 转换为 WordPress 主题，安装 WordPress 是要考虑的第二步。
WordPress.org 在其站点的支持页面上提供了有关“如何安装 WordPress”的详细文章。 然而; 这是WordPress安装的基本说明，
- 首先下载并解压 WordPress 包。
- 在您的 Web 服务器上为 WordPress 创建一个数据库，以及一个 MySQL。
- 将 WordPress 文件上传到您的 Web 服务器上的所需位置：
- 如果要将 WordPress 集成到域的根目录中，请将解压缩的 WordPress 目录的所有内容移动或上传到 Web 服务器的根目录中。
- 如果您想将 WordPress 安装在您网站上自己的子目录中，请在您的服务器上创建博客目录，然后通过 FTP 将解压缩的 WordPress 包的内容上传到该目录。
- 通过在 Web 浏览器中访问 URL 来运行 WordPress 安装脚本。
而已！ 现在应该安装 WordPress。
安装 Elementor
这篇文章是关于使用 Elementor 将 PSD 转换为 WordPress 主题的。 因此，我们需要 Elementor 来自定义和编辑 PSD 文件。 那么让我们看看如何安装 Elementor。
Elementor 是在 WordPress 中创建像素完美设计的最佳完整设计平台之一。 它最适合其可扩展的用户友好设计方法。 Elementor 的安装过程也是一项简单的任务。 只需按照一些简单的步骤，您就可以在 Elementor 页面构建器中设计您的 PSD。
有两种方法可以安装 Elementor 插件。 安装过程描述如下，
通过 Elementor网站
- 首先去elementor.com并点击下载。
- 在 WordPress 仪表板中，单击Plugins > Add New 。
- 单击Upload Plugin ，然后选择您为 Elementor 下载的文件。
通过 WordPress 仪表板
- 在仪表板中，单击插件 > 添加新的。
- 在搜索字段中，输入Elementor并选择要安装的 Elementor 页面构建器。
- 安装后，点击激活。
这就是安装 Elementor 页面构建器所需要做的一切。 您也可以按照以下视频了解更多有关安装过程的信息。
安装 WidgetKit
WidgetKit for Elementor-最先进和最强大的 Elementor 插件套件，通过添加更多元素和布局来增强您的网站构建能力。 在这里，我们使用它的小部件和元素进行 PSD 到 WordPress 的转换。
您可以使用 WordPress 和 WidgetKit 从 PSD 创建几乎任何类型的页面。 Widgetkit 的安装就像用它设计一个 PSD 到 WordPress 主题一样简单。 在 WordPress 仪表板中，您可以按照一些简单的步骤轻松添加 WidgetKit。 让我们来看看，
通过 WordPress 仪表板安装 WidgetKit
- 在仪表板中，单击插件 > 添加新的。
- 在Search字段中输入WidgetKit ，然后选择WidgetKit for Elementor进行安装。
- 安装成功后，点击激活。
WidgetKit 现在可以与 Elementor 一起使用了。 如果您有任何困惑，请按照视频进行操作。 这也将帮助您了解如何使用 WidgetKit。
将您的 PSD 转换为 WordPress
安装部分已经完成。 现在是时候将 PSD 转换为 WordPress Elementor 和 WidgetKit。 目前有很多 PSD 到 WordPress 的服务提供商正在将 PSD 提供给 WordPress 以及 PSD 到 Joomla 的转换。 然而; 您可以设计自己喜欢的方式。 在这里，我们只是展示了一种将 PSD 转换为 WordPress 的基本方法。
此外，您还可以从我们丰富的 WordPress 主题和插件目录中选择任何现成的主题和模板。
在从 PSD 设计布局时尝试遵循顺序。 这对你有很大帮助，
创建一个新页面
您要做的第一件事是从 WordPress 仪表板创建一个新页面。 从 WordPress 仪表板的左上角，单击页面 > 添加新的。
然后点击 Edit with Elementor 进入 Elementor Page Builder。 您将看到一个 Elementor 面板，如下所示。
从 PSD 文件构建您的页面
要构建页面或将 PSD 转换为 WordPress 主题，需要考虑三个主要事项； 部分、列和小部件。 这里的部分是最大的构建块，并捕获了列。 您可以将小部件放置在列内。 通过单击编辑选项，您可以使用其句柄来控制部分、列和小部件。
添加标题部分
对于此处的标题部分，我们使用 Themexpert 的现有主题 Eventia。 在 WordPress 中，您可以使用现有主题作为设计模板的框架，否则 WordPress 本身会为您添加一个。 然后，您可以使用现有的主题设计或布局添加徽标和多个页面。
添加英雄部分
现在我们转换英雄部分。 首先，我们像 PSD 一样添加背景图像，然后将列添加到列中以添加多个内容和图标。
对于此处的计数器选项，我们使用 WidgetKit 倒计时元素。 输出和编辑选项如下。
添加内部部分
现在是时候设计内部部分了。 在这里，我们使用 Elementor 元素在两列之间添加背景和文本。
这是使用 Elementor 元素编辑的关于此事件部分。 在这里，我们在部分列中添加一些文本和横幅图像。 视图在下面。
使用 WidgetKit 团队垂直图标，我们设计了 PSD 文件的扬声器部分。 在那里，我们在带有名称和名称的不同列中添加图像和社交网站图标。
在本节中，我们只是从 PSD 中添加一些随机图标并给出标题。
我们不能用 Elementor 做所有事情。 这种情况下我们怎么办？ 我们使用来自不同主题的插件或为我们自己制作插件。 这在为 WordPress 主题设计 PSD 时很常见。 在这里，我们使用 Eventia Theme 的 Schedule Addon。
对于博客部分，我们使用 WidgetKit 的博客轮播元素。 使用不同的内容视觉效果，您还可以添加背景甚至阅读更多按钮。
对于此处的页脚部分，我们使用 Themexpert 的现有主题 Eventia，就像我们在页眉部分之前所做的那样。 在这里，我们获得了多个社交网站图标和一个订阅按钮。
预览和发布您的页面
从 PSD 完成页面设计后，您可以预览您的工作并发布它。 您还可以编辑Published页面并将您的工作保存为Draft 。 这意味着您在将作品另存为Draft时不会破坏已发布的页面。 这是 Eventia PSD 的预览图。
最后一句话
这就是今天的全部内容，伙计们。 我希望您会喜欢这篇文章，并对如何使用 Elementor 页面构建器和 WidgetKit 将 PSD 转换为 WordPress 有一个清晰的认识。 应用资源，当然，不要忘记在下面的评论部分分享您的经验和宝贵意见。