Figma Design to WordPress Website (MINI COURSE)

No video

Figma Design to WordPress Website (MINI COURSE)

Рет қаралды 17,033

Күн бұрын

Welcome to my mini course where we turn Figma designs seamlessly into functional WordPress websites using Divi, the powerful WordPress theme. In this step-by-step tutorial, you'll learn how to bridge the gap between design and development, so you feel more confident creating custom websites for your clients.
Throughout this mini course, we'll dive into Divi's drag-and-drop interface for WordPress. Whether you're a seasoned designer looking to enhance your web development skills or a beginner eager to bring your designs to life, this mini course equips you with the knowledge and tools needed to succeed. Join me as I show you the tips for Figma and Divi so you feel ready to take on clients using these platforms.
Feel free to jump ahead to any of these parts of the video:
0:00 welcome
0:54 which web platform to use?
3:04 do I design directly on clients account?
3:53 the figma design
5:25 wordpress hosting set up
8:28 installing divi onto wordpress
10:12 divi global settings
12:23 install an SSL certificate
17:50 developing footer
21:52 designing the blog
22:25 watch me develop using divi
25:55 creating blog category pages
30:00 setting global fonts
34:35 thank you!
CHECK OUT MY PODCAST ON SPOTIFY:
open.spotify.com/show/5JhUyye...
---------------------------------------
// WHERE TO FIND ME //
instagram:
/ meganweeksdesign
pinterest:
/ meganweeksdesignco
online portfolio:
meganweeksdesignco.com/
business inquiries:
support@meganweeksdesignco.com
---------------------------------------
// MY FREE GRAPHIC DESIGNER RESOURCES //
GET THE FREE WEBSITE DESIGN PROCESS GUIDE HERE:
view.flodesk.com/pages/6333c1...
PRE-WRITTEN EMAILS FOR YOUR GRAPHIC DESIGN BUSINESS:
view.flodesk.com/pages/643820...
WEBSITE IN A WEEK PROCESS GUIDE:
view.flodesk.com/pages/64c0bb...
BRAND DESIGN ROADMAP:
view.flodesk.com/pages/645bf9...
FREE LOGO DESIGN QUESTIONNAIRE:
view.flodesk.com/pages/63edbe...
PROJECT MANAGEMENT WORKFLOW:
view.flodesk.com/pages/64aefc...
HOW TO GO FROM HOURLY FREELANCER TO TRUSTED DESIGNER
GET MY FREE TRAINING VIDEO 💥
view.flodesk.com/pages/62f402...
---------------------------------------
// TAKE MY COURSES //
GUIDE TO: LANDING GRAPHIC DESIGN CLIENTS
This course has 5 video led modules, a downloadable e-book and you will be able to join my community as well 💕
meganweeksdesignco.thinkific....
✨ WordPress Website Design Course ✨
meganweeksdesignco.thinkific....
✨ Custom Branding Process Course ✨
meganweeksdesignco.thinkific....
NOW OFFERING BRAND + WEB DESIGN COURSES IN A BUNDLE 💥
meganweeksdesignco.thinkific....
---------------------------------------
// OTHER HELPFUL LINKS //
Join my email list for more helpful design tips:
view.flodesk.com/pages/61eed0...
LIKE MY EMAIL STYLE?! JOIN FLODESK FOR 50% OFF
app.flodesk.com/sign-up?ref=8...
MY CONTRACT TEMPLATES:
meganweeksdesignco.com/shop/
GET DUBSADO (my project management system):
www.dubsado.com/?c=meganweeks
SITEGROUND (my favorite website hosting for WordPress):
www.siteground.com/go/meganwd...
---------------------------------------
I do make a commission on some of the links in this description box. Thank you so much for the support.
#graphicdesign #webdesign

Пікірлер: 42

@Phill_F 2 күн бұрын

Thanks for this, Megan!

@kelas.kreatif 3 күн бұрын

So beautiful

@visualmodo 4 ай бұрын

Excellent video and tips!

@MdAlif-bd7hs 2 ай бұрын

Very very thank you so much ❤

@janatrieb1112 4 ай бұрын

Thank you so much for this video, it helped me a lot!

@MeganWeeks 4 ай бұрын

So glad it did!

@killeen-designs 4 ай бұрын

This video could not have come at a better time for me! Thanks Megan. Do you usually follow padding and margin as you designed them in Figma or do you customize those as you work in Divi for what looks best? Just trying to avoid any surprises with a client.

@Ninechang 28 күн бұрын

Very very thank you so much

@riosablenk8910 4 ай бұрын

Awesome works, love your clear simple design 😊👍 Divi has always been my first option in WP Page Builder beside Elementor. I suggest you to use child-theme as a best practice in WP Dev, in case update can break things sometimes 😅 keep up..

@MeganWeeks 4 ай бұрын

yes! I typically always use a child theme, didn't show that part but thank you for reminding me!

@fernwehtwl 3 ай бұрын

thanks for this im curious to know if you can use hover states and animation from figma and have it transferred to wordpress so its not static

@paologtrulli 3 ай бұрын

Appraciate the video - can you use 'any' theme or is DIVI the must use?

@MeganWeeks Ай бұрын

you can use any visual builder or web platform you want!

@ydunmedia 4 ай бұрын

Hi Megan. When you were setting up the theme, you didn't chose a Divi Child theme too, why? I am very curious about that! Thank you for all your videos - I love them.

@amiratee9874 4 ай бұрын

Thank you plz make more videos on this for other platforms like showit ...ect

@MeganWeeks 4 ай бұрын

will do!!

@amiratee9874 4 ай бұрын

@@MeganWeeks thank u 🌼🧡

@iliostalaktithoua9028 3 ай бұрын

the background music is a great addition imho

@sarahcrosley 4 ай бұрын

I've been using Divi for years but how do you have all three menus displayed at once: content, design, advanced?

@Huge04 4 ай бұрын

Thanks for the video, what is your thoughts on Webflow?

@MeganWeeks 4 ай бұрын

I have not played around with it enough to give an honest review - it is on my list to learn though!

@brianbartels9580 4 ай бұрын

I love webflow. The community of webflow is excellent and everything is practically easy. It's kind of a snap on editor mostly but you have to have basic knowledge of HTML and CSS. The best part of Webflow is in the community you can actually kind of see behind the scenes of how other developers design their websites. You can kind of see under the hood and inside the engine of how these designers designed their website. Plus a ton of really useful tutorials out there about Webflow that are excellent.

@vadim_sharapov 4 ай бұрын

@@brianbartels9580 I would disagree with the 'basic knowledge of HTML and CSS' statement. Perhaps for a very, very simple website, basic knowledge might suffice. However, in most other cases, you need to understand more than one might expect designers should know. In my opinion, Webflow is more a simplification for developers than something that people call 'no-code,' because you definitely need to know and write code

@bassdog61 Ай бұрын

Thanks. Wish there was an easier way. Looks like there is a way to convert Figma to Elementor but not Divi from what I see, has to be done manually like you did or create a json file from Figma. 🤷‍♂

@thesamalexis 4 ай бұрын

Thanks for sharing this! What do you think about Wix Studio for agencies and freelancers?

@TheReeseC13 4 ай бұрын

I currently use Wix Studio for my freelancing, so far my clients have been really pleased.

@vadim_sharapov 4 ай бұрын

Hi :) You mean to offer websites on Wix for clients? I saw it works, but I personally saw a lot of people doing that with Squarespace, just because I believe you can do slightly more advanced things, which high-paying clients are usually asking for. So, I would recommend looking into Squarespace and Wix as valuable platforms to make money.

@MeganWeeks 4 ай бұрын

I am still playing around with this more to give my full opinion! do you use it??

@thesamalexis 4 ай бұрын

@@MeganWeeks Not fully, I’ve been learning it to see if I would like to offer it as an option.

@plantifulalexandra 4 ай бұрын

4:45 Same, I'm glad, no one seea that.😂 I always start well and then it's one big chaos, just can't be bothered to be organized with it as the design the client sees is all that matters. Was just wondering how you just use google fonts like that.. but realized you're from the US, so no GDPR. Is there no rem for fonts in Divi?

@MeganWeeks 4 ай бұрын

haha I realized how bad it was when I started filming lol. There is a solution for fonts on Divi, it requires a little bit of CSS code and I occasionally use a plugin to upload custom fonts!

@plantifulalexandra 4 ай бұрын

@@MeganWeeks Ah no, I meant if you can use rem instead of px for font sizes in Divi, without css.

@OvienSuccess 15 күн бұрын

What do you think about Figma to Wordpress plugin ?

@aybeedev 3 ай бұрын

hi, you should cut out/blur your api keys!

@MeganWeeks 3 ай бұрын

good thought, thank you!

@StoicescuCiprian 4 ай бұрын

what do you think about issues Divi has with optimization and loading speed?

@MeganWeeks 4 ай бұрын

I haven't had too many issues with this but I also make sure all images are sized properly and I am super aware of anything that might be too large for the site. I do hear this can happen though so something to be aware of!

@SayyidinaUsmanEGhaniQuran 2 ай бұрын

I'm disagreed with you that I have not seen figma in your whole video let know where you have used figma in your video??? I have spent my lots of time in your video please reply me.

@labstudiozllc3404 Ай бұрын

I think she already created the mock-up in Figma and really going over how to transfer files to Wordpress.