Customizing a WordPress Theme from an Adobe XD Prototype

Course details

Explore how to take a static website prototype created in Adobe XD and transform it into a fully functioning website using a WordPress theme and plugins. Instructor Emily Kay starts with an overview of setting up WordPress for theme customization, then moves on to show which plugins are needed for the project. Emily covers how to make the content in your WordPress site closely match your XD prototype, including posts, menus, and images. Discover using widgets to extend your theme, see ways to promote your website, and learn about how to set up pages for best results with search engines.

Learning objectives
Setting up plugins
Importing assets
Customizing settings
Making global modifications
Creating content
Managing a blog
Creating a contact page
Creating custom menus
Adding a carousel and parallax effect
Modifying a theme using CSS

Concepts

Introduction

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

Getting Started in WordPress

Setting up your local environment
Installing WordPress
Installing your theme

Plugins

Choosing your plugins
Installing plugins

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

Creating the Menus

Creating a primary menu
Creating a secondary menu

Importing Assets

Importing individual logo assets
Batch import assets

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

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

Creating Posts

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

Adding a Shopping Cart with WooCommerce

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

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