YoVDO

Customizing a WordPress Theme from an Adobe XD Prototype

Offered By: LinkedIn Learning

Tags

WordPress Courses Computer Science Courses Web Development Courses Web Design Courses Adobe XD Courses Prototyping Courses WooCommerce Courses Elementor Courses

Course Description

Overview

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

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

User Experience Responsive Hero in XD for Beginners
Coursera Project Network via Coursera
Customer Journey Prototyping in XD
Coursera Project Network via Coursera
Fashion E-Commerce in XD
Coursera Project Network via Coursera
Ultimate Web Designer & Web Developer Course
Udemy
Web Design com Adobe XD, Bootstrap, GIMP, HTML e Photoshop
Udemy