Universal Portfolio Design: From Figma Template to Live WordPress Site with Elementor Pro
Akalanka Karunarathna, UI/UX Designer & Content Creator
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
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
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
2
Estudiantes
--
Proyectos
Acerca de esta clase
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.
Conoce a tu profesor(a)
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!
Ver perfil completoProyecto de clase práctica
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!
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
