Universal Portfolio Design: From Figma Template to Live WordPress Site with Elementor Pro
Akalanka Karunarathna, UI/UX Designer & Content Creator
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
Welcome to Figma to WordPress: Build a Universal Portfolio with Elementor Pro class
1:57
-
2.
Introduction to the Tools We Use: Pros, Cons, and Alternatives
4:38
-
3.
Create a Figma Account
3:09
-
4.
Figma Walkthrough: Exploring the Interface
7:57
-
5.
Create a Subdomain
4:27
-
6.
Buying a Domain and Hosting
9:24
-
7.
Install WordPress on Your Hosting
2:10
-
8.
Clean WordPress dashboard
2:42
-
9.
WordPress Walkthrough
7:30
-
10.
Installing Elementor Pro
4:29
-
11.
Elementor Editor Walkthrough
11:19
-
12.
Set Up Global Colors in Elementor
4:47
-
13.
Configure Site Settings & Global Fonts in Elementor
6:51
-
14.
Designing the Header Menu – Part 1
9:45
-
15.
Designing the Header Menu – Part 2
5:18
-
16.
Designing the Hero Section – Part 1
8:49
-
17.
Designing the Hero Section – Part 2
8:59
-
18.
Designing the About Section
12:33
-
19.
Designing the Services Section
10:57
-
20.
Adding Buttons to the Services Section
1:24
-
21.
Designing the Reviews Section
14:03
-
22.
Designing the Contact Section
10:19
-
23.
Designing the Contact Form
4:15
-
24.
Designing the Footer
18:27
-
25.
Setting Up Email
13:59
-
26.
Troubleshooting SMTP Issues
4:56
-
27.
Changing Hover Colors
2:40
-
28.
Fixing Tablet Responsiveness
10:02
-
29.
Fixing Mobile Responsiveness
10:50
-
30.
Linking Website Sections
7:16
-
31.
Generating Terms & Conditions and Privacy Policy Pages
7:08
-
32.
Adding Animations
4:53
-
33.
Setting Up Rank Math for On-Page SEO Optimization
24:12
-
34.
Setting Up LiteSpeed Cache Plugin for Faster Website Speed
10:20
-
35.
Fixing the Emoji Display Issue on Your Website
2:13
-
36.
Class Project
1:28
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
2
apprenants
--
À propos de ce cours
Transform a pre-designed universal Figma template into a fully functional, responsive, and SEO-optimized portfolio website using WordPress and Elementor Pro, without writing any code.
What You'll Learn
-
Customize a universal Figma template to align with your personal brand.
-
Set up a domain and hosting to publish your website online.
-
Install and configure WordPress with Elementor Pro.
-
Recreate your Figma design using Elementor's drag-and-drop interface.
-
Optimize your website for speed and search engines (SEO).
-
Integrate Google Analytics 4 to monitor site performance.
Why Take This Class
Whether you're a freelancer, creative professional, or aspiring web designer, this class provides a step-by-step guide to building a personalized portfolio website. By the end of the course, you'll have a live website that reflects your unique style and professional identity.
Who This Class Is For
-
Beginners interested in web design and development.
-
Freelancers and creatives seeking a standout online portfolio.
-
Individuals looking to convert Figma designs into live websites.
Materials/Resources
-
A computer with internet access.
-
Free accounts for Figma and WordPress (guidance provided within the class).
-
Elementor Pro plugin (setup instructions included).
-
Provided Figma template file for customization.
By following this class, you'll gain practical skills to build and manage your professional website, enhancing your online presence and attracting potential clients or employers.
Rencontrez votre enseignant·e
Hi there!
I'm a UI/UX designer who loves teaching others how to design great digital experiences. I'm here to help you learn how to create user-friendly and visually appealing websites and apps.
My classes are designed for everyone, whether you're a beginner or a seasoned pro. I'll teach you everything you need to know to create digital experiences that people love.
So join me on this journey to level up your UI/UX design skills!
Voir le profil completProjet de cours pratique
In this hands-on project, you'll transform a pre-designed Figma template into a live, customized portfolio website using WordPress and Elementor Pro.
Steps to Complete Your Project
-
Access the Figma Template
-
Navigate to the Resources section of this class.
-
Open the "Universal Portfolio Design" Figma file.
-
-
Customize Your Design
-
Choose between the male or female version of the portfolio layout.
-
Modify text, colors, and images to reflect your personal brand or create a fictional persona (e.g., a business professional, coach, or creative studio).
-
-
Set Up Your Website
-
Create a subdomain and configure it with your hosting server.
-
Install WordPress and activate the Elementor Pro plugin.
-
-
Build Your Website
-
Design your customized Figma design within WordPress using Elementor Pro's drag-and-drop interface.
-
-
Share Your Project
-
Publish your live website.
-
In the Projects & Resources section of this class, click on Submit Project.
-
Include the following
-
A brief description of your project.
-
Screenshots or a link to your live website.
-
Any challenges you faced and how you overcame them.
-
-
Need Assistance?
If you encounter any issues
-
Revisit the relevant class lessons for guidance.
-
Feel free to reach out in the class discussion section or message me directly for support.
Looking forward to seeing your unique portfolio websites!
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
