Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Customizing a WordPress Theme from an Adobe XD Prototype

via LinkedIn Learning

Overview

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

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.

Syllabus

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

Taught by

Emily Kay

Related Courses

Reviews

Start your review of Customizing a WordPress Theme from an Adobe XD Prototype

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free