Adobe XD 到 WordPress | 网站制作的完整开发流程

本教程时长较长（4-5小时），但会涵盖开发过程中各个方面所需的全部内容。我们将从适用于桌面、平板电脑和移动设备的 Adob​​e XD 设计开始，包括主页和子页面，并详细了解构建所有元素所需的步骤。

我花了很多时间在这上面，希望你喜欢。

开发一个完整的网站，包括转换所有图像、确保其响应式设计以及与 WordPress 等 CMS 集成，这个过程需要很长时间。

本视频涵盖以下主题：

• 从 Adob​​e XD 导出元素
• 安装 WordPress 和主题生成器
• 在 CSS/SCSS 中设置我们的主题文件
• 创建我们的页眉导航
• 创建我们的首页内容
• 开发页脚
• 为页面上的所有元素添加响应式设计
• 确保平板电脑和移动设备的设计基于 XD

我还为这段视频添加了时间戳，其中包括：

• 00:00:00 - 引言
• 00:00:43 - 第一部分：Adobe XD 设计审查和安装
• 00:08:30 - 第二部分：设置 WordPress 和主题
• 00:13:10 - 第 3 部分：标题
• 00:56:50 - 第四部分：首页 - 行动号召
• 01:13:55 - 第 5 部分：首页 - 响应式设计
• 01:47:00 - 第 6 部分：首页 - 关于部分
• 02:13:03 - 第 7 部分：首页 - 加入我们的社区
• 02:30:25 - 第 8 部分：首页 - 我们的收藏
• 03:08:50 - 第 9 部分：首页 - 我的岛屿
• 03:52:58 - 第 10 部分：首页 - 用户评价
• 04:22:56 - 第 10 部分：页脚
• 04:44:48 - 结论

我还制作了本系列的第二部分，其中我介绍了网站的其他部分。请参阅下面的第二部分：

本视频内容包括：

• 00:00:00 - 引言
• 00:00:44 - 内部页面
• 00:33:44 - 联系我们页面
• 00:45:10 - 标题导航
• 00:52:30 - 自定义 JavaScript 标头函数
• 01:12:36 - 响应式页眉导航设计
• 01:34:38 - 结论

希望您喜欢整个过程。我还会制作另一个视频，更详细地介绍这个网站的开发过程，供感兴趣的朋友观看！

第三部分即将推出……

请关注并支持我：

如果您订阅我的频道，我将不胜感激 :)

• 🎞️ YouTube
• 🐦 推特
• 💬 Discord
• ❤ Patreon

想看更多：

我会尽量每天发布优质新内容。以下是最新内容：

• 将 Adob​​e XD 转换为完全响应式 WordPress 网站
• Adobe XD 转 HTML 完整流程
• 如何使用 SASS 改进 CSS 的完整教程
• 创建移动设计并进行开发