Universal Portfolio Design: From Figma Template to Live WordPress Site with Elementor Pro
Akalanka Karunarathna, UI/UX Designer & Content Creator
Schau dir diesen Kurs und Tausende anderer Kurse an
Schau dir diesen Kurs und Tausende anderer Kurse an
Einheiten dieses Kurses
-
-
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
-
-
- --
- Anfänger-Niveau
- Fortgeschrittenes Niveau
- Fortgeschrittenes Niveau
- Jedes Niveau
Von der Community generiert
Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.
2
Teilnehmer:innen
--
Projekte
Über diesen Kurs
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.
Triff deine:n Kursleiter:in
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!
Vollständiges Profil ansehenPraxisnahes Kursprojekt
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!
Kursbewertung
Warum lohnt sich eine Mitgliedschaft bei Skillshare?
Nimm an prämierten Skillshare Original-Kursen teil
Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen
Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare
Lerne von überall aus
Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.
Ähnliche Kurse
