Adobe XD 到 WordPress | 网站制作的完整开发流程
本教程时长较长(4-5小时),但会涵盖开发过程中各个方面所需的全部内容。我们将从适用于桌面、平板电脑和移动设备的 Adobe XD 设计开始,包括主页和子页面,并详细了解构建所有元素所需的步骤。
我花了很多时间在这上面,希望你喜欢。
完整播放列表:Adobe XD 到 WordPress
开发一个完整的网站,包括转换所有图像、确保其响应式设计以及与 WordPress 等 CMS 集成,这个过程需要很长时间。
本视频涵盖以下主题:
- 从 Adobe 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 - 结论
我还制作了本系列的第二部分,其中我介绍了网站的其他部分。请参阅下面的第二部分:
第二部分 | Adobe XD 到 WordPress
本视频内容包括:
- 00:00:00 - 引言
- 00:00:44 - 内部页面
- 00:33:44 - 联系我们页面
- 00:45:10 - 标题导航
- 00:52:30 - 自定义 JavaScript 标头函数
- 01:12:36 - 响应式页眉导航设计
- 01:34:38 - 结论
希望您喜欢整个过程。我还会制作另一个视频,更详细地介绍这个网站的开发过程,供感兴趣的朋友观看!
第三部分即将推出……
请关注并支持我:
如果您订阅我的频道,我将不胜感激 :)
想看更多:
我会尽量每天发布优质新内容。以下是最新内容:
文章来源:https://dev.to/adriantwarog/adobe-xd-to-wordpress-full-development-process-for-making-a-website-ffi