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
- Setting up your local environment
- Installing WordPress
- Installing your theme
- Choosing your plugins
- Installing plugins
- 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 a primary menu
- Creating a secondary menu
- Importing individual logo assets
- Batch import assets
- 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
- 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
- Post overview
- Editing posts
- Blog page setup
- Blog post type widget
- Formatting the blog pages
- Customizing the sidebar
- Activating WooCommerce
- Adding a product
- Adding a product with variations
- Integrating the Shop page
- Formatting a slide for a carousel
- Duplicating carousel slides
- Adding the carousel into the homepage
- Modifying the theme using CSS
- SEO with Yoast plugin
- Wrap up of the finished website
- Next steps
