Customizing a WordPress Theme from an Adobe XD Prototype

Learn how to transform a prototype, created in Adobe XD, into a fully working website by customizing a theme using WordPress.

Introduction

• Turn your prototype into a WordPress website
• What you should know
• Overview of the exercise files

1. Getting Started in WordPress

• Setting up your local environment
• Installing WordPress
• Installing your theme

2. Plugins

• Choosing your plugins
• Installing plugins

3. Customizing Settings

• Deleting unneeded default content
• Modifying settings
• Adjusting user accounts
• Using the customizer: Layout
• Using the customizer: Colors and Type
• Using the customizer: Buttons and Homepage

4. Creating the Menus

• Creating a primary menu
• Creating a secondary menu

5. Importing Assets

• Importing individual logo assets
• Batch import assets

6. Building Pages with Elementor

• Overview of Elementor
• Creating a template footer
• Adding social media icons to the footer
• Adding a menu to the footer
• Adding icons to the footer
• Creating a template hero section
• Adding templates

7. Creating Page Content

• Designing the homepage: Header for desktop
• Designing the homepage: Header for mobile
• Building out the homepage sections
• Review other homepage sections
• Designing the about page
• Add a map to the contact page
• Add a form to the contact page

8. Creating Posts

• Post overview
• Editing posts
• Blog page setup
• Blog post type widget
• Formatting the blog pages
• Customizing the sidebar

9. Adding a Shopping Cart with WooCommerce

• Activating WooCommerce
• Adding a product
• Adding a product with variations
• Integrating the Shop page

10. Further Customization

• Formatting a slide for a carousel
• Duplicating carousel slides
• Adding the carousel into the homepage
• Modifying the theme using CSS
• SEO with Yoast plugin

Conclusion

• Wrap up of the finished website
• Next steps