Figma to WordPress Elementor - Convert Figma Design

1. Intro : What if I told you the original tool that take your Figma design and turns it into What press side in a second. In this course, I will teach you how you can convert your Figma design into WordPress, lamentor, Greenberg, or Brick Speller very easily and quickly. This course is perfect for freelance web developer, agency owner, figma designer, sessional website designer, and anyone interested in mustering Figma to Wordpress conversion. This course, we'll learn UIKE basic, what is it and how it's work and possibilities. Then we're going to do setup like download and configure UIKi for free. Features like O view copy mode, export mode, and optimization, customization of input pages and testimonials, foam and header and footer. Also important customized blog page, post page, and sections, input design with Gutenberg and Brick Speller, fixed crashes and common issues. The interesting thing is that you will get lifetime support and update based on audience demand. End of this course, you will have the confidence to transfer frega design into WordPress website. Whether you're a complete beginner or an experienced freelancer or an agency owner, these course will simplify your workflow. So start now to bring your design into life with Wordpres. 2. What is Uichemy, how does it work, and what possibilities: First, they see about what is UIKi IKE plug ins turn Figma design into editable Wordpress site and working with Aleanor, Gutenberg, and Bricks Builder to streamline web design without coding. And it's working very simple way. First of all, we need to design the UI and Figma. Then we just need to use plug in like UIKBPlugin to convert our Figma design to WordPress. And if you look at this possibility, then it's quick and easy to it. No coding needed, flexible customization and definitely save you a lot of time. And it's great for 3. How to download and setup Uichemy for Free (WordPress and Figma): To download the UIkiPlugin, we just need to type here amd.com slash UIKmi and E Browser. Then it will be ter on this page, and on the right side, you get a C option, like, Okay, so if you scroll down, then you will get an option like free. So we just need to click on here this free button, but in here, you can select the Pach Builder. So you can literally select here if you want to go with Gutenberg, then you can go with Gutenberg. If you want to go with Bricks Builder, then you can select Bricks Builder. And if you want to go with elementor, then you can simply select the elementor. Just simply select the Pig Builder what you like to use to build a website, okay? So I'm going to go with elementor and let's say Sat free. And now in here, you need to just have your email and first name, last name, and then you need to click on this free download pattern. So I already have an account, so I'm not going to create a new, so I'm going to log in here first. So as you can see, Hu is my email and first name last name. So let's simply click on Hu this, please download this button, and it says wetting. Let's wat let a bit. Alright, so it's is played successfully, and if you scroll that a little bit, then you will get this license key here that is here. Just simply copy the license key. This is mostly a need. Let's go back to our Figma file, what is the design that you like to import. So in my case, let's say I'm want to input this one. So I can do I can click on here this option at the bottom, like plug in and just simply go to plug in and WHAT and simply search your UICami. Then you will get this plug in here. Just simply click on this plugin. And after opening this plug in, you will get serial key option, simply just piss this real key that we recently copy and just click on this activate button. Alright, so as you can see, it's now activated done. So let's click on here, SkipT button. And now, as you can see, we get this type of thing. And now we need to go our What press website, and we need to click on here plugins and we need to click on Add new plug in this button, and just search here UIKi so to install this WordPress plugin, you can go to her plugins and click on Ad New, and you can simply search here UIKi and then you will get this plug in here, this one. This is mainly coming from Possumt and this is the logo. Just click on here this Install button to install this plugin. Okay. Now we can simply activate this plugin. But what happens if you're not getting this plugin, if you search, but you are not getting it, then what you can do? You can simply go back to this Poch page, and if you scroll down, then you'll get this plug in here, UIM be figment Elementor. This is the plugin. Just click on here the download button. Then you can literally download it. And then what you can do, you can go here, plug ins Nt new and just click on the Upload plugin, and then you can upload the plugin. If you not find out the plugin from here, if you search the plug in and you're not getting it, then what you can do, you can just simply download it and upload here to the plugin, and then you can activate it. So I'm not going to upload it right now because we already get it install it from here. So let's activate the plugin. And after this, we get an extra feature here, UI CE on the lapsit, click on there. And then they're talking about selecting our Page Builder. So we like to select the elementor, go to next, and then again, click on next, next, the next, and we need to install and activate here this first of All, so they're going to install and activate the plug in. And as you can see, now it's activated and now we need to click on here this activate button, and then we need to activate also. Let's click on the next option, and let's click on finish. All right. So now you can see it's done. So if you just replace this page a little bit, then you can see all of this right now just green check mark, as you can see. Everything is almost done. Okay? Now, if you go to the setting there, then you will get a side ARL and secure doin. That would be needed in later when we're going to import the design. 4. Overview of uichemy plugin (Figma): Oh Now we're going to see about UIC Figma plug in top of you. So to get this plug in, we need to click on here at the bottom plug in option and then to go here this plugins and we need to search here, UIKME. So when you get to search UIKME you'll get three plug in there. One is like Figma relevanor. Other is like Brick Builder, Figma bricks and other is like Figma Greenberg. So simply choose which one you like to go with. So in my case, I like to go with Pigma Relevantor so it's simply select it. And after this page, you will get to see APK option. So you just need to give the license key. It's not APAC sorry. It's a license key. In the last video, I share with you that how you can get it, right? So you can follow the video to get this license key. All right. So now, if you're just going to click on here this minibar, then you got a few more settings. Heres malyhtpress plugin. If you want to install it if you not install What Press plug in, then you can do it. And here's the plugin of Figma Gutenberg, Fick Metal Brick Sspeller. If you want to switch, right, then you can do it. And here have a partner program, pricing, book a demo, and Kastudy. So Booke Demo is pretty good. I think you can literally book a demo with them, and they're going to explain you how it to work. And next, I have a Convert option, and convert option like something like whenever I'm going to select it, as you can see, it's selecting the name of the page, and also it's showing the design that we're going to import on our website. And this is like a template option. Here have a multiple option there. Put EI, party kit, like, a lot of things there, as you can see. So you can literally check all of them if you really want it, then, yeah. Okay, so this is really me, this is phys, so a lot of things there. You can use the kids to import the Figma design to Elementor. Yeah. And SPS is something like their own. If you'd like to get any specific part, then you can do it. If you don't have any design, then definitely can use POI. I already have course about that. If you want it, then you can check my YouTube channel about that. Okay, let's go to the convert again. So after doing this convert, we get two options there. One is like copy and another is like import mode. So I personally think that if you like to import the full page, then go with import mode because it's much better if you have a long page. But if you like to go with the specific section, then I think copy mode will be much better. It's easy just simply copy on a specific section and paste your elementor, again, come to the copy and paste. But if you want to import everything at once, go with import mode. But if you want to just full page, if you want to copy mode and paste it, you can try, definitely. And in Import mode, in here, we just need to connect our press website with this plugin. We just need to give the key last video I share with you, I think. Or if I not, then in later, I will share with you, how it's work. But just now, think about that, copy mode, it just copy. You can literally copy the design and just simply control V, then design will be there and aboard press website, and it's need to import. Okay? That's it. All right. So next is like optimized convert and Express convert. So design if you think that your design is already optimized, then you can go with Express Convert. And if you beginner, then go with this optimized convert button. Let's click on here this optimized convert button. Then we get a few more options, optimization compension then Widget tag, responsive manager, conversion setting, global style, a lot of settings there. We definitely don't do it. If we do it, then our design will be easily import, right? But if we don't do it, then there's definitely need extra time to import, your design may be crash and it's not exactly you get a SEM to same Wat press website. If you're not doing this, optimize your design. Now let's go to this convert button. After doing all of this like settings, then we're going to go with Canva option. So after this, as you can see, we get a two options like download Jason and this live input. So if you're going to click on, then you need to connect your site. Then you're going to see what you're importing, and then you will get a few more setting there. Let's say how you like to import as a page or a section, how you want, you will get the option. And every single time, if you face any issue or if you say, it's not working or how we can do it, then definitely watch this video at the top every single time. So for example, right now, as you can see, we get a video, how do live input. It's a seven init video But, again, if you chess can I go back, every single time you will get the option. For example, right now, I'm just going to this optimization, and as you can see, we get a full video there. Also, if you want to understand about Lock media layer, then have a video there. If you go to the next, any of this section, every single time you will get the video there. Every single time look at carefully that they have a video. 5. Copy Mode vs Export Mode Overview: Now we're going to see copy mode and export mode. So to do that, first of all, let's go to UIKEPlugin and then you will get a two option here. One is like copy mode, and another is like Import mode. So in Import mode, we just need to add our website, you know, like sit Key and ARL. Both of these we need to add. But in copy mode, we don't need to do it at all. Just simply copy and paste, that's it. Okay, let me show you how it is. So right now, as you can see, it's copy mode is selected, and I selected the section, and let's optimize the design. I'm just going to click on here this Convert option. And now as you can see it's copping to my clipboard. And now I just go to Eleanor and simply I just pass here, Control V. Or if you just click on here this piece from other side, click on there. And now press Control V. Then as you can see, now it's pasting. So let's wet at a little bit. All right. So as you can see, we get exactly same as it is designed here. We get exactly same as it is. Now if I don't do this in like this mode, let's say Import mode. Then I just select her design. Go optimize the convert this design is already optimized. Let's go to Cat's have a two option. One is like JCN and there's like live input. So JasN mode, as you can see, we can simply download this file as JCN then we can go here, and then we can just import the design as here, like here. We can import the Jason format file. Okay. But I think, this one is much more easier. Let's go back. And this one input is much more better. So let's click on Live input. Now we need to select a site, so let's add our site. So let's go to what pres, select EYKeME, go to setting. And now let's copy the site. And now we need to paste here. A copy the token and let's connect it. All right, so it's connected right now. And now we need to select how I like to import. It's going to be page or elementor template or it's tempting necture template. And if you go to this existing one, then how you like to import it. That means if you already upload this or import this at once, and now you want to update the same again, then you can simply use this existing one. Okay. And it also have option for replace or add in and then what you want, you can see selected. So in later, we're going to see more. No problem. Now, let's just explore this live input. Okay, so now I'm just going to new and I just like the page. Let's go next and then click on Import A. And now you can see it's imported done. And now you can see it's important successfully, and now just need to change this page setting, page layout to full width, and it's going to be okay, I think. Now, as you can see, we get the same thing. So I hope, guys, you're going to like this copy mode because it's much more easier. We don't need to connect our website. We wouldn't need to download anything, just copy and go to Elementor and past it. This is, I think, much more easier to do, like copy and past. 6. How to optimize compansion (Include all): To optimize this design, we just need to select the page Festival, and then just click on here the button, optimize and copy. And then we need to click on here Optim Magician and companion like this one. Just click on there. And then you will get a lot of things that need to, you know, like fix kind of. And every single time, if you want to see how to optimize the design, you can watch this video at the top, as you can see. Or if you are just going to stack in a specific section, let's say you don't really understand a lock multilayer media. You are not understanding it, how to do it, or what is this melli. Then you can literally just follow here this video. If you're just going to click on this, then you're going to watch a video that Hello everyone. Talking about this issue, right? If you go to the next section like frame optimization Details, every single layer, you will get a video like this. You can watch it, and you're going to learn and you can implement it. Okay. All right. So I'm also going to share with you in this video. So if you just follow carefully, you can optimize your design, definitely. Okay. So the first thing, as you can see, we get one option here that is this option, like as you can see frame, and also we get a target option. Just click on there. So when you're going to click on this option, then as you can see, they redrat on this section that you're talking about. Okay, this is the thing that uh, this is a multilayer media, so we need to fix it. So as you can see, this has a two layer right now. So what you can do, you can simply just click on this fixed option to fix this. So now they're going to lock this layer, and when you're going to import in element they're going to import it as a one file, not a lot of file. Before it was like multiple file, but now it have only one file because it's locked right now. Okay, let's go to the next. It's this one. If we go there, let's again, have a two layer. So we need to fix it. And if we go to the next, it's the same thing. So let's fix it. Let's go to the next. It's the same thing. If you look at this left side, then you'll get a S. Let's fix it. If we go to the next one, then this is also kind of same. So we can fix it, and let's go to the next. Is something need to fix it also. Definitely, it's an arrow. We need to go to the button. Fix it, go here, this one, and fix it. So it's a lot of things there. So let me do it step by step. I need to fix it and make sure that they're selecting a right one. Because sometimes they are doing some wrong. So if you see that they are doing wrong, that is not necessary need to fix, then you can just click on this cross pattern. Okay. But every single time they're giving correct, as you can see, this is also telling the correct things because it's a multiple layer, as you can see, so we definitely need to make it like fix. Again, the next I have two layers, so we need to fix it. But if you want to do it everything at once, you can simply click on here. The select all and it says 15 selected, you can simply click on this fixed button, then all will be fixed at once. And it's next have optimized quantity of images on SVC. So here, if you're just going to click on this show heat map this button, then you will get to see the head pap or have a image or IC look at it. So you can easily finding out, okay, this is something they select correct or not. So you can easily, um, tell them about that. So in my case, I think it looks pretty correct because this is also an HVC, all about that. This is an image. This is VG. This is all about image VG. So it looks pretty correct here. So yeah, now we can go to the next. So let's click on here Mark Ase tan. And if you want to re scan it, then definitely, you can do it there have a scan option. Now it's a detach incens. So if you just going to click on here, then you'll get to see this is now it's an components. So they are talking about to make it detoch with the parent component. So if you don't want to do it, then you can lay it like this, but I think it's better if you do it. So this is one, this is hero section, all of this connected with the main one, right? This is all about the kind of, like, child components type of thing. This is not a parent one. Okay? So let's select all of them on here, and all of them will be detoched. Right now, as you can see, we get rounded icon. It's sowing instant. So if you can fix them, then all will be detaching here. All right. So now they're talking about remove the unnecessary group sun frame or remove already. And here, the next option, as you can see remove negative pros and every single time you get a video. Watch perform tape as you can see, every single time you will get a video here. This is outside of the video. This is also another video. So every single time whenever you're going to stack, you at a video, you can literally watch it and you can fix this option. So that's it about optimgican. So this is only. So let's click on here the safe and go back button. And now, as you can see, it's looking checkmark that our optimgans completed, and now we can go to the next. 7. How to set widget tags: Now let's talk about a widget. So Wichet are mostly for dynamic content. Right now, when you're just going to import the design like this one, it's going to be static. But in some section and some elements have a different links or let's think about a testimonial section or have accordion like F section, their value is different. Their content is different. That time, if you just go with static content, it's not going to be work. It's not going to be functional something. So that time we need those widget, right? So if you go here after optimization, you will get the option like Widget tag. And here you will get a lot of Widget. In elemental widget, have a 19 Widget there, also have a elementor pro Widget. Also, it's the Plus widget here. So if you want to install this plug in, you need to go to plug ins at New. And if you just search the Plus widget, then you'll get the plug in like this one. And now you just need to install and activate this plugin if you like to get more widgets then. Okay. So now let's activate this let's go back to the design. And now, if you just go here, then you will get option like show tag, right now, if you're just going to click on this button, now you can see the tag. So this is our button elements right now, this is our eye canals, you can see. It's also look like a button here, but I just remove it. I look like this one also. As you can see, this is a content. Also, if you go to this one, like this one, if you just going to click on this, this is also a button, as you can see, and it have a link. Also, if you want to place icon, then you can also place the icon from here. So right now there is no icon that's why I'm not going to see, but in case you have icon, that's why you get to see here. So after position before position, what do you want? You're going to get it there. Yeah, this is all about the button. So now, if you want to place a different widget here, so how we can do? You can literally just go there, click on there, just double click, double click, double click. Then as you can see, I sell like here, this is an icon box for now. And I can literally change the content. I can select the tag widget, and what will be the description? This can be a description. What will be title. So all of this thing we can do here. And let's say I just cross it. Now it's cross. Okay. So now if I just going to clear it, now it's totally clear, as you can see, now it's clear. Before it was icon frame, I can box, but now it's no icon box, right? I just clear it. Again, if I want to set a bit, and I search icon and this is our icon box. And this is the description. This is all about this and I'm just going to go with table three and save the changes. So this is pretty easy to set up an Widget tag, okay. So you just into finding out where you like to place the widget and how it's going to be come, you just need to do it. Okay. If I share with another example, let's say this is another design, and now I'm just going to ICM plugin. And for now, let's say I like to select this one or let's say this one. Say this one. All right, so now I'm just going to optimize and copy. Let's go to Wichitag. And for example, let's say in here, I like to go with the barren main, so I can do it here. I can simply search a button, let's go with button, and this is a frame. As you can see, this is the icon here, and what would be the link? I can simply add the link here, I can position It's after or before, it's going to be after, and here will be C work, and now I can simply save it. Now as you can see, this is save as a button. AI select the page and I just on the show tagging. So by easily, I can see this is a button text there. Now again, let's say, I like to go here. This one would be social links. So what I can do, I can go with social links. And as you can see social I can social feed a lot of things there. Let's go with this one, and this is I can simply select the thing, right? I can simply select the link. I can simply select the margin. I can easily select this thing. And what is the style I want, I can easily choose the style. So if you're just going to go with the plusi Wiche and here I have a elementor one, and as you can see, element is automatically, get it. Alpha is going to save it. And now if we're just going to select the pitch. Now, as you can see, this is not selected. 8. Responsive manager and how it’s works: Now, let's go to the next like responsive manager. So let's click on here this sponsed manager. Then you get a two option. One is recommended. Others like custom. So I mostly recommend you to go with recommended one because this is I think it's good. Since in later, we're going to use global style, so I think it's okay. The next have a custom. So in custom, if you just click, then you will get a few option here, font size, line height, padding, flex cap. Let's go with this font size. Then as you can see, we get to see here a normal option and clamp option. So let's go with this normal one. And in normal, as you can see, if our phone size 151 plus, then our tablet will be 36, percent will be there. Like, size will be 36%. Then it's going to be 24%. But how they mainly do the calculation here? Okay. So now let me share with you that how you can just do the calculation here. So, for example, in my dextra font size, H one, for example, is 48, and my tablet will be 48. This is let's form a tablet one. So what I do, I just have here my phone size is 40 to 48. If they get 40 to 40 any of the size, then what will be my tablet? My tablet will be 100%. So I copy the number of the percentage and peste. Now let's go to the mobile one. So in mobile, how much percentage I will put, right? So let's say in my mobile one, I just put 32 pixel heading. So now when I put the 32 pixel size, then I get 60 Sabin percentage. So what I do I copy simply pest. So this is the way for doing this percentage. And if you just see here of this calculation, then you will understand this is the tablet size, and this is of size, and this is the percentage for making. You don't need to do it by manually since they already have a calculator option. You just need to put the font size between font size, you need to give there. And then tablet how many pixel you want, and they will give a percentage. And again, in mobile, how many percentage you want or what is the pixel or the size of the font? Just give here. They'll be automatically tacking it, right? So they will do all of the calculation, so you don't need to do it by manually. So this is the way of doing calculation, and they also have a line height here, as you can see, and they also have a padding. And they also have a flex calf. So all of this, they already have it. So initially, I think let's go with gold recommended because it's going to be much more easier before I share with you that we're going to use here Gobal style. So I don't think that we need any custom size for now. But if you want to build your own custom size in later, then I think this video going to help you because I already share with you that how this melli work. You need to give your main size, then in tablet how you want, how much you want, and you need to put mobile how much you want, you will get the person just copy in and test it. That's in Mali. 9. Conversion settings: Now let's go to the next conversion setting. Let's click on there. Then you'll get an option like export without image. So if you're going to import your design without images, then you can simply just check mark on this, just annibl it, and then your design will be exported without images. You know what happens, sometimes we are using high clod images on a design, and that time it's taken much more time for exporting this thing. So that time you can simply just turn on this option. Then your design will be exported super fast without images. And after this, if you want to cap high chlord images, you can just compress them as manually, then you can just import it in a design. Um, this is all in a way, but if you design a simple design, then I think I don't need a ton of it. And the next option is use IgM exported images. So it's something let's say expose something, they're going to automatically export the images. So how it work, if you go there, if you just going to hover on it. Let's say if you just hover on it, then you get option Pig Map reaction. So this is something just see. It's the same thing like the export option, as you can see, this is one pixel, one, one, two, like that. So if you want to increase if you want to just export images, high quality, that's just increase here. So let's say you want a two, you want a three, so just see like here this thing. And as you can see, this is the setting we get to see. Or if you want to get the same setting there, click on Export option, then you get the same thing. So simply just select which only one. But initially, I think one will be much more better. Otherwise it's going to take much more time. And then automatically find SVGs. This is good nablate and say it with in percentage. Yeah, percentage will be better because pizzel will be going to make problem. Percentage will be more better, I think, so it's better to go with this. And minimum voteteg, this is go with the same thing, ten wat. I think it's better. We don't need to increase much. Okay, that's all about the exposed 10. How to set Global styles and how it’s work: Now, let's go to the Nikes, it's like global style. And this feature is really great because this is going to save you a ton of time. You can literally just single won click, change the font size. You can literally change the color. You can make responsive very easily. You can change the phone if you literally want it, or you can make a different thing, just simple one click with this global style. Okay, let me show you how it's mall works. So let's go there, and I've already select on the design there. And now, as you can see, select our website automatically. So if you already added your website, that's fine. Or if you're not edit it, just click on Adside and just add your credential there. If you go to UIC and, if you go to setting, then you get the side ARL also the Secure can just add there. Then it's going to be automatically added there. And then you will get to see all of these things. Here have a global color right now, and then it's also have a global typography. So in here, we can literally delay or we can change it. Okay, so now let's go to our design here, and then you will get a few color. One is background color, background field color available. And then we get a few grey color, right? So this is a gray color. So we don't really need all of this, right? We just only need a few. Okay, so first, let's go with this primary color. So what can be our primary color here? Mostly, we don't have, I think. But let's say let's select this one as a primary color. So this is like 900 50s. Let's go. Click on this. Then you get a variable style document. All of these, you'll get a once. Let's go with the style one, and this is the one that I go to use the primary color. This is organic color, and I like to use it this one, let's see. This one. The text color is the same. Let's go here. This is the text color and all of the design writing we use. No, text color, sometimes we use here, 700. Let's go 700, 700 and this is 950. 50. Okay, so the thing about here that we just need to do a little bit technique here. So this is our text, right? So text, mostly we use 700, so this one. But let's say we use heading. So heading, we use a different text. So let's heading. And in heading, I like to go with this one because every single heading I see this color, 950, so this is the heading color. So let's go with this. And the next color, we have something else. Let's see. Background color and background fill. So let's add here background, so we can say BGi and BGi color will be this one. And we also need one more. So let's add new, and this is BGiFll so BG will be Okay, so feel. And the color will be style on this one. And this available color, but this is not necessary since only you have a one time we use. Whenever you use any global color or global font, try to see that you use it in multiple places, not at once, because at once is easy. But if you use the same color in multiple places, then select it. Okay, then it's fine. Let's see about this color. This is same, 950. This is background feel. This is another one. Let's see which color is this. This is background feel. All of their background feel. This is the white color also. Let's go with this let's say this is a white color. Let's see if they have any white color or not. I don't think that they have it. So what we can do? We can say this is white, and we can literally select from there, or we can add a new one. Oh, I think we already have a background here. Why it is. So we don't need the white again, so let's relate it. So yeah, this is the color that we use here on our design. That's good. And now let's go to the font here. So about the font, we need to see about the Menu one festival. So in Menu, we use Satoshi 18 pixel, right? So let's go here this menu, Shatoshi I think this of be we use here. Shotoshi 18 pixel. And I also think that we don't really need to add the menu one because menu is mostly at once. We're going to be a companion. So we don't need to add the manure. Let's go to the next section, this one. So let's say this is heading one. So what we can do, change the primary into heading one and click there. And then we need to find out here heading one. So let's scroll down, then we'll find out here. So I think if they give here a search option, that's going to be better. But anyway, let's go with this select H one. This is H one. And now let's again click on here. Then we have H two. So let's simply choose H two and loss here H two, so this is H two. So make it capt on later. This is H two. And then we also have here H three, so let's add here H three. Just double click, then you will get an option for Edit. So this is H two, and now we need to select here H one, three. This is H three, because we use the three time, and now we need to go via this body L. So so body body body. This is body. And let's select it. And let's go with this body, and this is body. It's used ten times, so select it at No and this is our body. Selected. And let's finding out here body M, this is body M. We use four times here. And let's go to the next body S. Let's simply S will be there. So let's simply select here, body S, where is a body S? Here, here is a body S. Also, we need to add here our tag or let's say we can add here. So this is going to be our button, also definitely, we need a button. Button. I'll simply sell it here button one. We need to add here tag. So if you see that this is only used one time, then don't add it, right? If you use it multiple times, then just add it because let's click on there. As you can see, we use it 14 times. So this is necessary. Body elevnt time, body, ten times. So these are mostly needed. So this is important. So yeah, by this we can add the global typography and color, as you can see. Now you can sync. Just click on a sync button, then all will be sync. And now let's go back there, and now let's go to the convert option. So let's select the top, convert. Then as you can see, now it's copping to type boat, and now let's go to the. And then, first of all, I'm going to change this page layout to full width. And now let's click on page from another size Control V, as you can see we get exactly same design. But now the thing about here that we need to check it out that this style guide they apply or not. So as you can see, the heading is same. Also the typography they added H one and all of the tag that we just added all over there. Now Woody Miller the benefit of this, right? Let's say I got this here, the tablet and this is the mobile. Automatically, this is responsive. But let's say use the same font multiple places, right? So what do you need to do now you can go to the setting of the site setting simply. And you've got two option here, global color global font. So let's say I like to go with the global color. Let's say all of the texts that we use here, 121 to one, two, I like to make it red or let's say I like to make them these colors. So what happened? I do here and click on Save Changes. And if I go to this website again, then all over the heading we use, it's going to be red color. All over the heading, as you can see, it's red color by at once. So this is the beauty of the style, and that's why I tell you that this is really important interesting thing if you go with this global color and global font. So yeah, let's save the change. So this is the thing. And in letter, if you feel okay, you need to change the heading at once, change the color. I feel to the changes on design also. And the same with the font, you can literally change the H one. If you want to feel that, okay, the H one is look much bigger than I was expecting. Then you can decrease it easily. Also, let's say, if you want to make it tablet, want to increase a little bit, just go there and increase, let's say, 28 pix Li one, increase it. Also, if you like to tablet, you want to make it, let's say, 24 right now. So but you want to make it 32, just make 32, then it's going to be two. So click on the Septon everywhere we use H one tag, it's going to be right now 32, right, as you can see, now it's increased to 32. So this is the easiest thing, and this is the thing that's all about the global color and global font. So I hope you get a clear idea that how 11. Import via Live import and Import Existing pages using Add On Method: So now we're going to see the live input mode. So before we see about this copy mode, right? And now let's go with this next option, input mode. So click on there. Then our design is optimized so we don't need to optimize again. So let's click on optimize again. And then we are not going to do anything because our design is already optimized. So let's click on the Convert option. And then you get a two option where it's like, download Jason this live input. So let's click on Live Input. Now as you go to see our website is already connected. So if you're not edit it, just click on adst button, and then just add here side ARL and security token. If you go to this UICE under What press and click on the setting, then you get this option. And now I just need to add this thing and select the sign why you like to input. So let's say I like to input this one. This is going to be our new page, right? So let's select the page, and this is going to be our element. So this is going to be our page. Let's click on the next option. And now, as you can see, it's going to be input. So as you can see it's important. Let's click on Open button. And this design is already imported on here, as you can see. So now you need to click on here, it element or this button at the top, and now we need to click on the setting, change the past layout to element of full width. Now the published design, as you can see, this is now ready made design in here. Also, if you'd like to change the page name, right now it's a dektop, but if you want to make changes, anything else, then you can do it. So this is about the input mode, right? Now what happened, um if I do any changes here, so let's say I like to do a lot of changes here. For example, a lot of things I do I change text, font size, a lot of things I do here. After this, if you want to input the same thing, then how you can do? So for example, I go there again, select the design again. So you can say, select the design, optimize and convert next, live input. And here are the option, we get a two option existing. So this design is already on our website half, right? So what you can do, we can select a pitch and it's going to replace where are you going to replace? It's going to replace our dektop. So let's select the dektop. Click on Next, and it's going to be input again at the same place. And let's click on again, then open again. And as you can see, now it's changed, and it's going to now six plus. So this is the easy way. If you already import the design, and if you want to do the update, then this is a pretty easy way. Just do the update just simply like this, right? And if you want to do it by once, it's going to be new design. Then you just select here new and how you want, you can do it. And if you already have any design important and you want to just do the customization again want to update it, just buy this way, you can do it. So this is mainly the thing about live import option. So let me know if you got any questions if you have, then just let me know. And now let's go with this JSON one, click on JSON and click on down button. As you can see, we get a G file there, and if you just going to export it that you get a JSON file, but I think we don't really need this file. We can import the G file. So now to import the file, the SN file, what do you need to do we need to go to the page where you like to import the file. Just click on this option here at this box option box. And then we need to go here this M template option and then click on here this Import option. And now in Import, we need to just upload the template that we recently download. So select the file, and now we need to select the Z file here. Just click on Open O. Then show on a pop up. Let's go with Continue. Then let's take a little bit of time. As you can see, we get an option here. And now we need to select which one you like to inst. Let's say, I like to inside this one, so click on Inside button. That is going to see we get a seam as it is designed that we see on the FICMA, right? So this is another process. That means I share with you three process now. If I just to recap here again, then the first process was we do this one, right, copy mode. The before I share with you. The next thing I share with you import mode. In import mode, have two options. One, you can literally connect your website and just import live. This is one of these I share with you. And also I share with you the J and Y. So that means we see the three way there that you can just import your figma design to Wt Press. You can literally use one of these even to follow all of this. I personally like here live import one, or if you say my favorite, then my favorite is like copy pest. Just copy and go element or past it. That's much more easier. So this is my favorite, so you can use this copymt also. 12. Setting up testimonials with a carousel: Now let's work on a testimonial section. For this testimonial section, first of all, we just need to organize it better way. So let me share with you this layer so that you get an idea about how we just organize it. So as you can see this is our testimonial code, and if you go inside of it, then it have a rating, and it also have a testimonial. We have a content, image and text, right? I mean, title or name. And if you go to this rating, and if I just open it this arrow, then as you can see, I just use here um, like font Awesome five icon as you can see phone awesome five, if you look at carefully. So when you're going to use this icon, try to make sure that you also using font ASM five. It's going to be more easy for implement elementor. So you make sure that you use it. And also, your structure of this going to be like this, and it's going to be different design, but structure if you seem, um, then it's going to be easy for input. Okay, so let's go to the next. So I select this section. Let's go to optimize and copy. And let's go here this widget and tag. And here, I need to select it. So what don't you select? First of all, I need to select your testimonial, and I need to select here such a testimonial then you will get testimonial Widget, just select it. Then all of this place, as you can see, just make sure that this is correct. This is the content, definitely. This is the image. This is the name, and this is the title. So let's save it. And let's go to this rating one and let's search here rating. Simply search rating. And I select here and rating is zero to five. Rating is here five, and title will be star and icon star and let's save it. So now, as you can see, it's now save and it's done. And now in here, we just need to do let's copy Copy, I will go to the next and just paste and replace. Again, paste and replace, and again, paste and replace here. Then again, select here and let's go to this convert, and it's now copying to my cli booad. Let's go back to Elementor. Let's paste from other side, and let's paste it. Another you can see, now it's added. The next thing is like for us, just click on this plan icon element, and now just need to search carousel. Simply search carousel, then you will get here this carousel with Loop. So just simply drag and drop here. And then as you can see, we get a few Wichat and now, first of all, do customization whatever you want here. And if you get to see there is no image, just click on image option, click on Choose image, and now then you'll redirect on this page and now simply select the image, then you will get the image Thea. So yeah. So first of all, I like to change this CN direction into center as you can see now at center. Also if you want to change this etting into four or let's say three, whatever you want, you can literally do it. So in my case, I do five. Okay, that's good. If you want to change this outline CN then you can do it here. Whatever you want mal you do the change this and now simply select it if everything looks fine, then select, copy. Let's go to the next of here, the widget and simply paste it. So wheneo just going to paste it, we need to change the width. So as you can see, I selected this card, and also I go to this layout, and now it's full width and make it 100% right now. So when you're going to make 100%, then you get like this. Let's go to container one. And this container, I like to make it full width and make it 100% and whenever you're going to make 100% al, we also get in a b site. So on here, we just need to make it 90%. So whenever you're going to make it 90% that needs to look like this. And now we also want to change this width. So let's go to this card, and inside of a card, inside of this one container, I like to make them 16 pixel of this padding up here together. Also, on these takes, I like to update a little bit. So let's say for the name, I like to make it 20 pixel better, yeah, 20 pixel. And for this next one, the title, I like to make it 16 pixels. So yeah, that looks pretty good. It's better if you do it in Figma. But I'm doing it because it looks so bigger. That's why. But if you keep it same, no problem. Okay, so now it's ready. And now let's click on just the card. Just copy the cut, copy it, go to the next, and paste it as you can see we get a next one, go to the next and paste it. We get a third one. Let's click on this carousel, duplicate it a few more. So as you can see, I duplicate again here. I get a four, five, so I can entire let's say this is our four. Let's say this is our number five, it should be. Yeah, we get a few of them. And also, Asks we get to see an arrow here, but this is not look visible so much. So what you can do, go to the style. Let's go to the navigation. Let's say this color into black type of thing like this. Yeah, L is visible. Also, if you want to make it like rounded corner or something, definitely, we can do it. But I think it looks good. But if you want make it, then you can make it solid. You can add it one pixel, definitely. What is going to be our color? What going to be our radius. And then also add the padding there. So I think if you just add it, then as I can say it's going to be round or something. So I don't really want it right now. So let's keep it as it is. Okay, this is good. Yeah, this is good. And also, whenever we're going to hover, it's changed the color. Let's go to the hover and let's make it black. So now it's not changing, though. So if you click on this, then as you can see, it's going to the next. Also, we can update here this gap. So for this, I'm going to select here the carousel, go to style, go to slide, and now let's change into how much I want. Let's say I want a 30 pixel. So, yeah, that's it, Milli. I think now it's good. And it's also have some more setting. If you definitely want to try, then you can do it. Let's have a navigation setting. Yeah, let's have a navigation setting, also have a pagination. If you want to change the pagination into something different, then you can do it. So whatever you want, you can do it, Milli style. You can do the styling. You can change the color, and you can also change this font dot size. Right now, if you look, it's pretty small, then you can definitely increase it if you want, then. So, yeah, that's ith about 13. Import Contact form 7 or WPforms: Now I'm going to share with you that how we can add this contact form. So to do that, we need to select the frame like this one, and then we need to go with optimize. And after this optimize, we just need to add Widget tag because I shared with you before that if you want to impose a static design, then you don't need to set up any widget tag. But if you want to get something dynamic, that time we definitely need to set up this widget. So here, we can literally select it as a form, but this is not necessary yet. We just need to add the field here. So what you can do, you can simply select the field option here, and this is going to be our fills. So I can say this is our fields, and let's go Wichtag and here, we can search which form you like to add. So for example, I like to add here, let's say form, so I want to add here WP form. So I can simply add here W fm. So as you can see, I get a WFm widget here because I was installed on a plugin called the Plus Widget. So if you just going to copy it and if you go to your WordPress website and if you go to the plug ins, I think I already share with you this thing. So if you just going to search here, the plus widget, then here, you will get this plug in. This is coming from posy met, this one, as you can see, this is the author. So just simply install and activate this plug in. So if you activate it, then when you're going to copy and paste elementary, you get option for contact. Okay, so let's go back again here. And now let's say I'm going to select here TPP form simply. And now as you can see, this is not setup. So let's click on save now it's save. Now we need to do we need to go back, go back again, click on Convert, and now let's click on download Just an option or live input. So I think I'm going to go with download Import option. So let's download it. As you can see, download here. Let's go back to our website where you like to import the form. So let's click on here, J here the box. Then we need to click on here the Import option. And now we need to simply drag and draft here the file, continue. And as you can see, we get a contact as option, right? So let's click on this InsR option and now as you can see, we get same as it is here. And now what you need to do we need to click on here at option and I need to search your WPForm simply rag and row here. So as you can see, we get option. Now we need to select HeFm which one we like to go with. Now we get this one, let's click on this. Pin IC go to here the advance option, change this custom to how much we want. I like to go with 100, as you can see, we get 100 and now we can simply publish it. And for this form customer magician, we can do it from here also. We can do the customer magician a little bit. Let's say we can change the font size, field size, we can change the label style, button style, if you want to change the button. Let's say this is the button right now, and our button color was something different. If you look at this. This was our button color. So we need the same color, right, so we can simply copy it, go back to the design, simply change this colors you can see how change. I want to change this color into like this one, so you can see change. Also, how you want, if you want to make it large, small, how do you want? You can make it. Here is also advance option B wood Nredian. And here's have a level style, fill style. Also have some advance option there. And let's publish this form. Also, if you want to do the customization of your form, then you already, I think, know about it. You just need to go the form plug in that you personally using. So if you're using Contact Form, then go with the contact fm and edit your form. And if you're using WB Form, then go with your WB Farm and just edit the form. So what you need to do, you just need to the form manually here. So the form, they cannot import itself, so you don't you just need to add it manually. So let's say you need email, you need phone number. What you can do, you can simply copy phone number, let's say, and let me share with you that how we can do. So right now, as you can see, we have email option, right? And now I also need another text for a phone number. So what you can do, you can simply say single line, so I going to simply add a single line, and I'm going to change it to phone number. As you can see, this is the phone number here. And also, if you'd like to add the placeholder like this, then you can do it. Also, let's see in here on our form, there is no text. If you look at this carefully, there is no level. It's totally empty. There is no level there. So what you can do, you can simply hide the level here. We can simply hide the level, and about the email, the same thing, we can hide the level. But we can add here the placeholder email let's say, our email address. So by this way, you can mail do your set of your form. So yeah, 14. Nested accordion or FAQ section: Now let's import our FQ section or Ecodon. So for the FQ section, we need to again go Figma telementor. Then we need to click and optimize the copy. Then we need to go here Wich and tag again. And now we just need to select it this questionnaires here, this going to be say FQ. So what you can do you can simply search your FQ. So if you're not getting FQ there, you need to search your Ecodon, simply search AC, then you will get this Which simply select it. And after this select, you will get this option like title form. So you need to select form FQ one, then icon will be this one and title will be, I'm not sure this one, right. Let's add new one, and this is going to be our F two. Again, here you into finding figure two. Is this is figure two. Add New one, and let's go with Fig three. Let's select Figure three. Let's add another one, and this is F four here. Okay, this is not content this is FQ four. Then again, add here F five, simply add here AFX five. Simply add it, and let's click on Save changes button. And let's go back. Let's click on Copy and now it's going to say CopticarPot. Let's go back to desktop and let's click on paste from the other side and paste it. And as you can see, we get the same as it is designed, right? And also, we need to input the same thing without Widget. So let's go back. And again, let's optimize and copy Widget tag, and let's go to accordion, this one, and I need to select this one. And as you can see, I'm just going to make it clear. So now there is no widget tax side. So what I do, first of all, I set up Widget there and I just input it on my elemental website. Now I just clear the element or widget. As you can see, now I clear it. There is nothing set up. Normal cushions, as you can see at the frame icon. So what I do I again select again and go back, and now let's convert, and it's copying to clipboard. Let's go again here, and let's simply past it. Okay. So if you see this type of paste, then click on pass on the side and paste it. So now, as you can see, we get the static one so now as you can see, you have two of them. One is, like, with Widget. One is, like, without Widget, and we just need to make this thing like, same to same, right? So let's start the work. So as you can see, what are you going to click on this FIQ accordion and then Asgacs open, and we need to add here the text. So this is the text there, so we can simply just copy it and let's really pass here. Yeah, this is all about that. And now let's simply okay, this can be the same line. So let's see is the same line or not. Yeah, this is kind of same line, but this is not. So you can do click on there, and let's go to the Advance and just remove here. I only get this padding. Let's say the top, I don't really want anything. But from everywhere, I like to have a 20 pixel. So from the top, I just can make it zero. And from the bottom, I think it's 16 pixel better. Let's say 12 pixel. Yeah, this is good. Let's see how it looked like. Like, Yep, it's fine. Okay, let's click on here the top of this pattern. In. And then we just scroll down and item position should be straight stretch to this one, and the icon should be in like this. Yeah, this is good. Also, we need to go there, and we need to remove here the tile. Let's go to the boer, let's say, none of them boter. Let's go to this bower also. And now everywhere we need this botter right. But for the active one, so for the active one, let's go to the tile let's go to the active one and active the boer type, I want it solid and how we want, let's go to design first again. And this could be our boer and this is 100% Okay, let's find out the border here first. So this is our bottle, right? So this is toke, and this should be 1.5. This is our toke. Okay, so let's copy it. Let's go back again. And here are the active, I think we go with this color. It should be better, I'll say. This color. So now, as you can see, active one, with this border width, I mean, this is border width, so how much I want, so I want to go with only one. So I lock it. Let's make it one. Or if you want to make it 1.5, then you can make it 1.5. And then the border areas have a top right. This is fine. But for the bottom and left, I don't really need anything when it's the active. As you can see, I'm silk active, not hover. Active means when it's open, right? When it's open that. Let's click on the next one, and let's go to background of so we don't need background of a let's go background type, change the color into this one. Yeah. Okay, so we need to change the color. So what we can do, we can pick the color from here. So let's please select pick the color. All right, so this is the color we're going to pick. Okay. So this is the normal? Okay, so again, click on here this one, next one, and go here the color and just add the color code. Okay. All right, so now it's added. So what you need to do we need to add here the corner radius. Again, just click on there of this one. Go to style and go botter and bottle radius, I like to add here this one and this one. So what I do I just copy it from the active one. So when I go to the active, as you can see, I add this bottle radius here, this one, I just copy the same number. So you can make it round figure. You can make it eight, for example, or if you want to make it nine, then you can do it. And just make the round figure, then open it, and then go to the next one, next one that going to open, go to the boer and here the board as will be one. Also, if you want to add the let's say if you want to add here a background type, let's say boater type, then you can do it. So we can add here one, and this should be one. And we also need to add here and color. So our color will be this color, so we can simply copy the color, go to here again and go to botter and our color will be same like this. Okay, that's fine. So now let's see how it looks like. So this is the thing now. Yeah, this is fine. This is the thing that we're going to do. But the problem here, you might look to see that this is rounded, but this is not rounded. So the problem here because I think we make the corner radius here. So this should be eight. This should be eight, not 88. But the changes will happen onto the active one. Active one will be zero and zero. Now, let's see. Active will be zero and zero. But if you see the normal one, normal will be fine. Normal will be eight and eight, right. So the eight or nine. Okay, that's fine. And now, if you want to let's say if you want to make it more closer, click on there, then go to Advance. And then what we can do, we can just add the mod here. Let's say, I like to go out here 16 pixel. That's fine. This looks fine. And if you want to make it more closer, then let's make it 24 or 20, if you want, make it 20 like this. Or one thing you can do, you can simply copy it, just click copy and paste it. And after pasting it, if you want to apply the same style, click on here the main one, main container, click on here at Copy. Just click on here this copy and go to the next one and click on the paste style, paste this style. Then we will get the same style here, right? So this is another way you can do. So first of all, copy paste here. Again, go to the next, paste here and go to the next. You can literally paste here. And now if you want to apply the style, click on this main container, copy, go there, paste thesty, we got it. Let's in paste thesty, get it. Now let's go to the Pisttyle that means we get the same thing here. Now, I'm going to share with you that how we can just add the CN. So for the CN, if you want to import your own CN, then you just need to click on here or this upload VC then you need to upload your HVC that you'd like to add, simply add and select it. And then it's going to be change. And also, if you have icon library, something, let's say you are using Huge Cn library or anything else, if you want to upload at once, then just upload it on here, elementor, then all of the icon will be added at once, right? So you don't need to upload the Cn manually from here. And to export this icon, you need to go here this FIGMa and you need to just select the icon and you need to on this export setting, you need to select here HVC and just explode the Con wrap, then you will get the same HVC file in here. So, yeah, I hope you understand about how to add your own icon or how you can do the changes. Also, if I'm not wrong, they already have this setting here for the Cn. So if you go to this icon, then you will get this size option. Let's say, I like to go with 26 or 20 pixel, if I'm wrong, yeah, 20 pixel, let's get. Let's go to change the color. If you want it to the changes the color, then you can do it from here. So if you go to style and if you scroll down into header, then you will basically get this option. Also, it's a typography, do the changes. Also if you want to change the color, text, Troke, whatever you want, all of this setting, you will get on a style. The last thing is like changes the background colors. For these, we need to go this style cordon. And normally, we need to make this color, whatever you want. Let's say I'm going to make it the white color. So now as you can see it's white color. Whenever I'm clicking it, I get like this. So what I need to do I need to go here this active on again, and for the background color, I need to select the same colors. So you're active. So for the color, I like to change it. So yeah, now if I just going to click, as you can see, we get the same color. If I just going to click, we get the same color here. Okay. 15. Header and footer sections: Now I'm going to share with you that how we can add custom header and footer. So for this, we just need element to pro. If you already have element to pro, that's fine. Or if you don't have it, then you need additional plug in for this. This is something element or header and footer. If you have it, they just just install this plug in search element to header. Then you'll get a plugin. Okay, so here this one, you need to install and activate. Also, you can try this one. I think these are the same features. Yeah, you can try both of this. But I already have element of Pro, so I'm going to show you you with element of P. So first of all, we need to go templates, and we need to go here Team Builder here. And then we need to go here the header, click on this plus icon, click on the plus icon. Here is there. Now let's go to this Figma, I'll click on this header. Go to Fig Mad elemental plugin, optimize it, converts going to copy a keyboard. Now go back Elementor and now let's see here which header is already match. So this is the good thing that I want. And then this looks, I think, same I think this one and this one looks same. Yep, this one is look same. So let's inside it. So if you're going to inst, then I'm going to you connect your account with that. Okay, so let's ignore it for now. Let's click on this cross option, and now let's simply pass on the side, pass it. So as you can see, we get the same exactly header. As you can see, we get exactly same header for dextro. But when you go to go to the mobile, it's going to be different something. So what you can do, we can literally just duplicate it. So as you can say, make it two of them. And we can do it multiple way. This is not a dam string, This is crazy, like that. You can do it multiple way. So this is something, let's say, for Dextop and this is something we could say for tab or mobile like this, tap or mobile. So on the desktop one, this is going to be only visible to the Textb. So what you can do? I can select the select the container, go to advance and go to this responsive and simply disable this for this one. And let's go to this tablet one, go Advance, go responsive, and just disob a header. That means this one looks simple, same. This is different, right? Okay, this is fine. So now in here on this tablet, what do you need to do we just need to add here the NAP simply search NAP, then you will get a WordPress menu, simply just drag and drop the Odd Press menu. Alright, so now in WordPress pen, we just need to do a little bit techniques. So what we can do, we can simply track and draw here this button main and below to logo, like this one. This is our logo. And then we're going to add this W press menu in there, right? And now simply remove it. So we get the same thing, right? And here, the pattern one, I like to change this pixel. Let's say I like to make it like this. 20 maybe 21, that's good. This is the menu another one, so I like to change this with ulcer which should be custom and this should be with pixel, not I think so. Yep. This is good. Yep, this is good. Yeah, this is good. So if you want to make it a little bit more closer, then we can make it more sin. So yeah, just increase this left side. So let's say I want to go to pix percentage. Percentage will be much more faster and easier. So 40, yeah, this looks closer, 45 and 40, 44 is good. Mm. Make them everything and center, right center everything. Yeah. Now, if you're going to do a bit customization, then definitely you can do. And this is silly for the mobile. So here, this looks pretty nice. And if you go to this mobile, that's fine. Also, one thing when you're going to add it whenever you're going to add it, it's not going to look like exactly the same as is, right? So if you click on this, then as you can see, now this is look like this because I changed the width also here. So it's also need to do a bit setting. So let's go to this layout, and we need to make it full width, right? When it's going to be mobile, it should be full width. And if you want to make it center, yeah, definitely, it's option first mix center, but yeah, write them center. Um Okay, so now let's see the preview. This is the center. If we're going to make it here, this is also going to be center, I think. Okay, so yeah. And I think we only need it for the mobile. We don't really need it for the tablet because in tablet, this is going to be a feed, I think. So we can just only make it for mobile. So let's go to the mobile, and this is the mobile right now, and this is good, I think. So what we can do, we can just change the wid up here. So let's say, I like to go with this with how much we want. Let's make it pixel. So let's make it Torty. That's fine. And I want to make it also this Torti. So let's go to this, and let's go to the With also one thing if you get to see, there is no button, then make sure that you select this toggle button hamburger like this. Then you will get this option here. So as you can see now it's full width. So yeah, the main thing here, we just need to just fix this width because if you do this calculation in correct way, then it's going to be okay, right? Otherwise, you will get to see like this is kind of broken like this, as you can see. Now, it's look like broken. This is one side, this is one side. So we just need to calculate this width correctly. Let's say I want to make a 30 pixel, that's good. Okay. So after doing fixing it, I'm going to share with you. I say, also, if you get to see, this is not going to be central than every single place go to this logo, advanced check this margin and padding. Go to the button, check the margin and padding. Also go to this N one, check the margin and padding. So if you see that this is not going to be central. So right now, as you can see, it's going to be center, but before I was not, I try many times I just not go, but now it's okay. But don't remove this padding one. If you just remove the padding, then you probably need to add it again. Help you understand about it. Okay, so now we need to fix tablet one. But in tablet, this is look like the same, right? So if you want to add the manure there, that's fine. Just go to there and go to this content, and we need to add here. This hamburger, this one, and this should be icon. So if you want to add this drop down in tablet, then you need to make sure that you select this layout is drop down. So if let's say select your horizontal or let's say vertical, then it's probably not going to see any cross option here. So, I mean, menu option here. So you need to make sure that this is on drop down. So now As you can see is drop down, and now we can see the menu and I you click on this, then Asi cans is going to be up there. But it's not visible because we need to go to this header and we need to add Zt index three p nine. Then it's probably coming so now this is probably coming here. So it's probably the same thing. Yeah, now it's same. Also, if you want to add here this background color, then go to this NAF like the header. I mean, this main one and go hit this normal. And for here, this background color, I like to go with background fill. So let's click. As you can see, we get the background fill color here. Yeah. Now, I hope you understand it, and this is all about the mobile. This is our tablet, and this is our desktop. So yeah, that's it. So now to fix this option here, we just need to work on this weed. So if you just reduce the weed, that's going to be fixed. If you just reduce the wish, that's going to be fixed, I think. Also, if you want to add menu, like Nap menu, that you can do, you can literally just simply search your Nap. Then you can add here the What press menu, something like this way in middle of this. And now you need to do a little bit setting. So let's click on this pen. I can go here this style and just go typography and make it 18 pixel, for example, and also 400. Yeah, 400 will be less. Let's go with 500. And you can just literally remove these of two item, and you can just do a little bit of style working, as you can see, because now when I'm gonna hovering it, it's going to white. So what we need to do we need to change the color. So hover color, this should be primary color, right? So now as you can see it should be primary. Now now it's changed. On the pointer color should be heading. So now as gonna say it's change. So, also, I think we don't really need this pointer color also. Just remove it. So yeah. So now we can just do customization here, then it's going to be fixed. So let's see the preview. Yeah, this is fine. So let's click on this published option. Now our header is ready, and now we can go to the next. It's all about our footer. Okay, so now let's go to the footer. So let's click on All pars at New and Footer. Alright, so now it's loading. Okay, so we need to go back here. And for the footer, we just need to again copy to our clipboard. After copying it, let's cross it and let's click on here this button, paste from the side, and paste it. Alright, so this is dextra version photo, right? So what is this for image? Let's see which images this? No, there is no image needed, I think. So let's remove the image. This is not necessary. This is good. I think the foo is going to be much more easier because we just need to fix here only the width, nothing else. Because if you go to this tablet, then we need to adhere the width here. If we go to this mobile, we also need to adhere the width. That's it, and also need to remove some unnecessary parts. So yeah, that's it all about. Okay, let's start fixing here. In desktop, only need to adhere this icon, right? So icon is already there. Let's click on here this structure and inside of it, just need to fix the width. So right now, as you can see, this is a percentage, so let's decrease and increase a little bit. Yeah, 15 is way, good. Okay, so now it's fake. Also, if you want to reduce the size, then definitely we can do it. We can make it or you can make it 16 Pixel Do. Now let's go to the tablet and also at the width. So on a mobile, I also need to make them center. Also we need to fix this width, definitely. So let's add the width. So right now, the main one, the mainframe, we need to make it 100%, for example. And for the other one, we just need to reduce the weight. So right now, as you can see, this is 90 or 18 pixel. Let's go to the next one and do the same. So whenever I add it, as you can see, it's going to the next line. So this is the next. And also, we need to reset this cap so let's say it's a four pixel or five, six. And now, if you see here, then this is look exactly the same how it was before. This is on Desktop, tablet, and this is on mobile. 16. All Blog pages Blog listings ( Figma to WordPress ): Now we're going to see that how we can import a block page in Elementor. So to do that, we need to go here templates, and we need to go here theme Builder here. And now we need to select here what do you want? Let's say we want ARCA pig like blog archive. So let's click on at new This button at the top here. Right. So now let's go back. Okay, so now Asics sharing some pre built templates, but we're not going to use again. Let's close it. And now let's go back to our design and Figma design. Let's go to Fig bet Elementor plugin like y Cei and let's go up TMAs and copy. If you have a time for optimise, then do Optimus, now I copy in my clipboard. What I do, I just paste from another side and Control V. Now, it's going to take a little bit of time. Okay, so now we get the same design, as you can see. Okay, so one thing before Go ahead, if you get to see that your design is with container, then you need to do one thing. Let me go to your website. And now you need to click on here the top like customize option at the top. And then you need to select here general option at the top here. Then you need to go the container, and then you need to choose your her full width or fa full width, content body full width and make them spacing is zero. Make them zero. That's it. And then make this publish. Other watch what app and you will get to see, like, this is not possible to make it full width, right? Because right now, as you can see, this is full width, but this need to be like this, right? This is going to be the same thing like that. So what do I need to do? What I can do, I can go have this main one. So let's anabil this structure. This is our main page, and this is our hero, and this is our key feature. Um, in here, I really want to make this block one, like main one and full width, but it should be 100%. So what I can say, this should be 100% right now. And this is right now 100%. But I need to make a specific size. So what I can do, this is the category. I mean, this is this container, and let's say I want to make it how much I want. 80 pixel I want, let's say. And this is with a container, right? Okay, this is with 80 pixel. I mean, 80%. What you can do with this container, we can change it also. But I think percentage will be better. Let's go to the next one, like key feature one and with the container and full width, and this should be 80 and this should be 100%, right? And this should be 100%. Okay, so now this is the design right now, as you can see. Yep. This looks pretty nice, but this should need to be much more, right? It's be much more cluster. So what you can do, we can just make them center, though. Just go there and make them center here. Then it's going to be center, definitely. And this is the container, and this is the hero section. I think the both look like same, so what you can do? We can just increase the size a little bit. 88. Yeah, it looks good. Okay, it's looks good. 88. That's fine. Okay, let's click on a publish option. Okay, now we don't need to publish. For now, we can do the save, like a save as a draft. Okay. Now, to add this card, what we need to do we can do it very easily. Just click on this plaster ICN and search your loop. Just search your loop. These thing need element to pro. If you don't have element, then it's going to be pretty hard today. But you really need element to pro for this. So let's simply drag and draw your loop create. So when you're going to drag and draft here, you get to see something like this, and now just going to be doing it. Okay. Let's go here the frame, inside of frame, go to the inside of frame. Then you get extra frame there. Then again, you get a block card. And here. So what I need, we just need the block card meal we wouldn't need all of this. Just copy the block card, and that's it. So now on this design, as you can see, I didn't optimize the design. That's why I get a lot of containers. So if I do the optimize and Figma here when I just importing, I will not get to see a lot of container there. Then this can be much more easier for managed. So I hope you understand about how much important for making the design optimize. Anyway, let's click on here this create new and let's save this pattern. And then just wait a little bit. Okay, now, as you can say, I copy before. So what I can do, I can simply past it. And after pisting it, just click on at the top here and now go to with 200%. As you can see now, I get 100%. So now we just need to do a little bit of work here. So first thing is here the image. So go to style let's change it to featured Image then we'll get all of the featured demands. Let's go to the Cin. And with the Cin we get a text here, and instead of text, we get one thing here. That can see this one. So what we can do? Let's go again here. Instead, we get two of them. So let's remove one of them. And let's keep one of them, O. And here, I like to go with Okay, so it's going to be our post ID or post harm. Okay, let's go with post harm, and let's go with categories. It's gonna be category with ama, if they have a link, and this definitely have a link there. Yeah, that's good. Also, let's go with here and let's increase this size into hundred person, definitely. Um, let's go. The next one is gonna see we get a two cantina deer. So yeah, we can make it full weight if you want, but I don't think that we need it. Or we can make it auto if they have auto option. Okay, so I make 100% right now. So yeah, this is 100%. But I don't think that we need to make 100% rather than I was thinking if we do, Okay, let's simply try upho this one. I was thinking if we make them online, Yeah, that's pretty nice. Lux. This is good. Okay, let's go to the next. It's our title. So go here and click on Dynamic tag, and this can be our host title. Let's go to the next and this should be our post. Exempt this one. I want here 20 maybe, not much. 20, as you can see. Or if you want, then you can delay. Let's say 12, how much is this? Let's see. Yeah, 12 is like this. Let's go with 16 because I only want a two line here. I don't want much. Fifteen's 14, that's fine. If you want to make it closer now here have a gap, but if you want to make it closer, then you can just remove the padding definitely. Yeah, if you can the padding. I think we can do, let's say, negative padding. We can add, Let's say to a pixel at the bottom and top. Yeah, that's fine. That's fine. Okay. Let's go to the next. It's like, you need to change your user just call down there, get author Name. That's the oton name. Let's again go to there. Let's go to the post date I want it here. Post date. Yeah, postdate Guide. If you're going to click, then you feel more option, you get DFL like this one. Post modified like this. So this is good. If it's like the post modified, then It's the same thing we get a C but I think it's good. So what are you going type here, publish on. I think the way publish on. This is good. Let's go to the next is have a image. So let's go to the image. Go to style, and this should be our ath prefle picture. Yep, that's good. All looks pretty good. I think there is nothing need to add extra. So what do you need to do? We need to just click on safe here, the button safe and back butter. Then it's going to be safe and back. So yeah, now it's going to be ready, I think. So what do I need to do? I just need to copy paste this thing. So what we can do, we can literally copy this loop in here or we can just paste here. So if you go to the k features, let's have a container, then it's a one container, and then let's have a one container. Okay, as you can see, a lot of container there. That's pretty much annoying, I think, because it have a lot of container. There are mostly not necessary. Anyway, let's go to this our blocks. I go to say this is blocks. Okay, this is all about our category, this one, right? This is our category. So this should be our category. This should be category. So why I'm giving this name so that I can easily identify what is what? So I just remove here these blocks. And I like to copy this thing, definitely. Okay, so for doing copy, what you can do it can simply copy the loop, Control X, or I can simply drag and drop here on the block section and remove here, this one, Okay, so we get a block here right now. Is going to see. We get a block there. So if you want to do again, anything, then just go the Edit optimize and click on Safe button. Then we're going to again do the edit and we can do the customization, how do you want. Just click on there and go to how you want, just do the changes, whatever you want, just do that and click on Safe changes, and it's going to be updated. So let's see how it looked like. Okay, so it's loading. Okay, so this is update now. This is good. Now, what I need to do I need to add here like this sort of category. I think I want it. So what I can do, I can go here this filter, definitely. So if you search and filter, then you get a taxonomy, like this taxonomy filter, just dragon out here. So what I need to do I need to select a loop one here that we recently created a loop, and now I need to show here a category, so I can get all of this category. But think about here, I want it inside of a category. But what I need to do I can simply select just delete all of them at swans Or I can remove this category, definitely, and simply drag and drop here this taxonomy a here. So as you can see, we get the same option. Okay, this is pretty good. If you want to make it left side, then I think it's have a life side. Yeah, this is left side right now. So also, we need to do a little bit style here. So go to style, and now what it can do, it can go here this normal and we can add here a padding. So to do the padding, what it can do, it can go here, let's see, 24 and 36. Let's go here. I need the color, definitely. It's a copy. So go here. Corner videos will be four for every single time, and this should be top and bottom. So top will be 24, bottom will be 24, and this should be 32. This should be 32. So what you can do, we can go with 20 definitely. Yeah, 20 get. 32 looks so much. Let's go with 24, how's it look like? Okay, so 24. Okay. Now, let's go to the Bactron color. So go here and select the system. Okay, so normally, I don't really want any background color. I want boterO pixel boer, I want, definitely. Let's bad hair the color. Boer with will be one pixel, as you can see. This is good. Okay, so when people are going to hover, then what happens? Then it's changed. The background color will be changed to this. When someone gonna hover, as you can see, this is good. There will be no bower, I think, if they hover. Normally, I don't think that we need to add any boer. Okay, so let's make it none. Active color, we need to add like background color, I think. Okay, so this is good. Now this is pretty good. Okay, so let's see about what happened, so they also have a color if they have a normal, so let's go back and go to normal. Let's go to the color, and let's change the color in the back and call it this. So this is also good. And now let's go to typography and let's make them like medium, definitely. Yeah. Now if you spend a little bit more time, then you can definitely make it more polished, more better. Spend a little bit more time here for making it better. This is going to be our page name. If you have anything about the pH name, then definitely this should be our page name. But, but, but, but I don't think that we need it. We don't need to change it because block Page will be only one. So I don't think that we need to do to change. Also, we can add here the link if you have anything. So let's just slash Blog If you have anything, they just add their link, and this should be our home. So what we can do, we can just add our home, so this should be our home. Yeah, that's it all about this page, I think. And also, okay, one thing, if you're just going to go click any of this. Okay, so if you're just going to click any of this here, Loop Loop, then on the left side, you will get a few more options and setting there. From there, you can also do customization. Let's say you want to add a pagination, or you want to add here a Cory, anything, whatever you want, you can do it from here. So just click on a Loop grade. So let's say you want to change this column. Right now, we are showing three column. But if you want to make it increase, then you can do it. How many page you like to show here? Let's right now have a six. I increase, then you can do it. Also have some more settings. Let's go to Cory, and if you want to include or exclude anything, then you can do it. Filter here. It's also have a Pagnian. So let's try with this Pregentian number one and this one page per limit. Okay, so this looks really bigger than I was expecting. Okay, so we just need to and I will hear individual position, but okay, let's do a little bit customization. Let's go to this tile. Go here pagination, and I want to make it 24 pixel, Mt. I still looks so big. Let's make it normal. Let's see how it look like 20 pixel. That's fine. Line head is here, so how much line height I want? So one p three. This is here two. And again, go to there, and spacepeedwin. So if you see the space pain, then you can do it. And here is a space between the top. This is all about. And also, we can do the color. I think, right now, we can change the color. If you have anything, then definitely do the changes. And here hover color and have active color. I was expecting if they have a background change option, that should be more better. Okay, that's fine. This is not something bad. This is pretty good. I think, good enough to go. Okay, so let's click on hero this published option. We need to adhere to this condition here. So why would you like to share? Why would you like to show this plot. So I want to go with plot post Archive here and safe changes. And it's going to be published. Okay, now let's see if you have any block page. Then let's see the block page first. Okay, so as you can see, we get this here, that's now. And if you're going to click on this option, then it's also working fine. So now, as you can see, we get extra sum of this extra thing. So what we can do, we can increase here the size or we can add here four of them. I think if you add four of them, that should be good. Or if you want to make it perfect, then what you can do, you can go here on this category and go to advance and here on the left side, I want to go at 24 pixel. Right side will be the same. Now let's go to the main one, like main one and then go to this advance and I want to change it to zero. B will be zero. Now I think this is going to be good if you want to make them same. But still, it's not look like same as it is how it was because of, uh, because as you can see, this image is not because of the image width. So if you use here different image, I think that's going to be fixed, then you'll not face any issue then. So let's click on a Save Changes button. Yeah, that's it. So if you use a different image, then it's going to be fixed, or you can just change this width of this container. So if you just going to change the container width, then definitely it's going to be fixed. I mean, I'm talking about the main one main container here, the red. So if you just do change here, if you just do the changes, let's say, if you just increase material, if you just decrease it to 72%, then this can be fixed, I think. Because we have a long width, that's why it's look like this. 17. Create a Single blog post page: Now we're going to see how we can import a single blog post. So before Go ahead, we just need to do a little bit thing on our blog archive page. So let's go back to our blog Archive page, and you need to click on here with this Ii template because right now, what happened when I'm trying to click on this tes or link, it's mostly not working. So we just need to connect the link here so that whenever someone just going to come to blog page and going to click anywhere up this, it's really thrill to be work, right? So to do that, we need to go back here. And first of all, let's go to the image. Or you can try with this parent card if you go parent card, if you go to Advance sorry, additional options, then you get option like TML tag, simply make it Link, and then you can just adhere the postal. But in my case, I see my side is broken, so I'm not going to go with this one. So that's why I'm going to the inside of it. Let's say, I'm going to select the image and let's go Additional option. And here, on this dynamic tag, I like to select here post IRL. And the next is go to this Title one, and I want to change it to post ARL and this one should be same post ERL. And here, the tag should be different something AuthorRL. And this is the date, but the date should be if they click, then it should be PostRLmage they should click on there, say here the image. If they click on this, then this should be, so let's go to this anchor one and let's go to this N, and this should be our ARL. So this one, we can also make this AuthorRL but I don't think it's necessary. Also, yeah, this should be our post will be funny post ARL. So mostly people are going to click on there, so they will read right on there. Also, if you want, then we don't need to do individually, right? You can just select one of this content here and just go to this layout and we can just change it to link. I'm not sure it's going to be work fine or not. So let's go with this post ERL. Let's see if it's broken, then we can skip it, or if it's not broken, then we're going to use it. So I try it, and now let's click on this publish option. Let's go back to our website and let's see the preview. I think it look like broken, so we can use it. So what we can do, we can go back the Con and go here and change it to normal DIF. So we can use any Stimultag here. But this is all good, I think. So let's click on this publish option. Mostly I don't think mostly people not using any link here on this paragraph. But I think, yeah, this should be good. Many people are going to click on this link also. That's good. That's good. So post URL, and let's click on this published option. Let's go back and reload this page. Also, make sure that your main block card is normal. List Mel tech is normal. Otherwise, we can make it some uro. So yeah, this is good. So whenever I'm just going to click on here, as you can see, this is look like different color. So we need to change the color also. So what we can do, we can go here this color right now and go to this style. And text color should be this one, right, definitely. Um this should be. But we also need to go to the side setting because I really want to change this color into normal black. So what you can do? I can go here this let's go to this typography and then here the link and normal in Link, I like to go with the same color of this so that whenever someone just going to Howard it's not going to change, and this should be black color, three p one. Save the changes. Let's go back. So to add this single block page, we need to go here single post at here. Click on Ad new This button. Also, let's go back to our Figma. Let's go to open ICM and plug in and optimize the copy, convert it, and it's now copy to clipboard. Let's go back, cross it and simply control we save from different site, best. So I think we get as it is. So now we just need to add the link. So let's click on here the top one, go there and simply add our title, definitely. And this should be our block, so slash block. And this should be our home. So what you can do slash home. Yeah, this should be our title, so slash title. Yeah, this should be our full width. So it's three, so let's make a full width or yeah, we can increase. Yep, yep, now it's good. Now, let's go to the next. It's like change this name into author name, I think. Where is the author name? Yeah, here is author name. And this should be our date. So publish on. So this should be okay, just click on here. This is going to be date and date will be same, right? Click on again has this name, and then format will be this one, go to Advance and before will be this. So now, yeah, good. Let's go to the image and go to style and change the style into no, this is not a feature you match. This should be our author image. So as for profile picture. This is good. All right. So now we just need to add a little bit of work. Let's say you can simply add here post content is simply track and draw here. So when you're going to drag and draw here. So one thing you need to do, you can just click on Heather text and go to style, go here this typography, click on He T plus icon, a new typography. So I'm going to say P Nu I'm going to do it as a style, so I do it. And now let's go with this normal like post content one and go typography and select a be new. As you can see, now it's sit up down. So this is pretty easy. So delete the previous one. Yeah, delete simply the previous one. This one also not necessary. This one is also not necessary. And here, the shear one, I like to remove it. Now, let's say, I like to go with SosL and here's the sosL like shear icon. So you can literally just use one of this. Okay, so let's go there. This is a soca icon. So we can add here the Sosa let's say, I want to go with dribble. Let's see. So yeah, this is a design. Let's see. I don't really like this design. I want to make it simple, something. This is another design. This is another design. I think it's sub some more. Yeah, this is good. Style nine. This is good. So let's copy the Sosa icon. On this Asal, I like to pass here, so simply past it and delete the previous one. Here one. So now you can add a few more things and also you can do the customization, how much you want. Let's say, increase it, then yeah, this is good. Just increase. Yeah. Now let's duplicate one of these. And I want to go let's say Facebook. So let's search YouTube, duplicate it, go here. Facebook. Yeah. And here is the link. So for the link, you can mainly add here the post ARL here. And let's go to the next. It's like the author one. So let's click on this one, and let's go with post title. This is not going to be a post title. It's going to be our author name, and this should be our meta or information. So for the information, yeah, this is the bio, so this is good. This is the correct one. Now, let's go to the image, and let's go to style and let's simply add here author purple picture. Yeah, that's fine. So this is all about. And also what we can do, we can go to the next one, and we need to make them 100%. Now here, 100%. And now also here, we need to change it to 80 72 pixel. Let's go to the main one and make them center. Definitely, make them center here. Container. Let's go to this one. This is also need to be center. This should be 72 pixel. Or if you want, then you can make it less 68 pixel here. This is scared right now. Also, we need to reduce the spacing. Click on this one, text, go to advance. And for the top, I like to make them zero. And for the bottom, I like to go with 40 pixel. That's fine. And here, as you can see, we get a little bit issue because of the weight so let's make them hundred person. Just it person. Yeah, that's going to be okay. And for the shear now, it's something like this. Shear now. Shear on. Yeah, that's good. Okay, so this is all about the page, like single block. Now, let's click on a publish option, add a condition. I like to select the post, and it could be all. And yeah, let's click on Safe and close this button. And let's go back to a page at Vilda. So if you not get to see there is no changes, then just just clear your cache. Let's see then it's working fine or not. So let's clear it. And now as you can see, it's really worked fine. It's exactly same how I was before. And this color, it's not look same because it looked like white colour, that's why. And also, it's look like the same link again here. So we definitely need to work on this shear batern. So what do you need to do? We just need to add here shear. Just simply say shear. Then if we get a shear batern, then you get a three option there. So let's remove the previous one. And now this is the new one. And now, as you can see, whenever I'm just going to click on this and it's redirecting me Lindy or Facebook. So this is now good. So yeah, this is all about. And if you want to add, let's say, some more posts here, let's say you want to add another section with related post, then yeah, definitely we can do it also. What you can do, we can simply add here another text just simply add here text heading. So just add here and let's say you may like. Now I'm just going to copy the loop here, loop grid. Just go here and simply just going to past it. I can see where we literally get it here. And on this loop, I like to show only three part page here. No pagination will be there. It's going to be totally off. There will be no pagination on all the threeirs. If you want to do the changes of this font, then I think it should be at or even a laces F, I'm going to leave it string. So yeah, this is all about. And now, if you see, then yeah, this is the good thing. Also, on this loop, if you want to show any specific something, then it's a query. You can include this thing. So I just added here TAM or if you like to show the author, if this author writing something a different coin if you want to show on them, then you can do this filter from here. So for now, I'm going to leave it TAM let's click on this published option. Let's go back and let's clear our cache. So if you not installing cash plug in our old press website, then you you don't need to clear your cache. So yeah, this is all about. So if I'm just going to click on this next, this is another post, as you can see. This is another post, as you can see So I hope now you understand about how to import a single block and how we can do the custom magician. 18. How to export sections (Only) : Now we're going to see that how we can import in a specific section. So for this, we need to select which section we like to input on a website, simply select and do a copy here, faster file and then just open it UIKiPlugin as you can see, I already selected. Let's open optimize and copy, and let's optimize this design here and fix all of this issue they are talking about. So as you can see, this is the optimized design that I already do. So after optimizing it, you will get the same file like this. Okay. So then I'm going to select it again. Let's go to this Widget tag here. And then we need to select this is going to be a counter. I think, this is counter. So let's select the counter, and ding number is this, then here's the number is this one. So the starting number is zero, selector is me nothing, and the number prefix, nothing will be there. A number of this one will be five year plus, but we only need to adhere the plus, but we can update it in later. This is done, and let's go with the next one, and let's again and now, again, just remove here this number prefix and this should be 100 plus. Starting number will be 100 and that's fine. Let's save it. By this way, just do the update, and then again, select the main frame. Let's go back and let's convert it. And as you can see, we get our copy clipboard and let's paste it on Elementor. As you can see, we get a specific section, and now just update here. Click on the sticks, and now in here, Indi number will 100 and this should be plus, but this is not like that. So let's remove the plus. Let's go to this next one and remove here this 120. And let's go to the next one, and this should be, this should be here, the perentens definitely. So, yeah, now, as you can see, this is good, and this should be 120 So, yeah, as you can see now, it's totally updated. So what happened if you're not optimize the design? So if you're not optimize your design, then you will get to see something like this. As you can say, text really bigger than I was expecting. And this is also something really bigger text. So if you not optimize, I mean, if you not select here, your style guide, then you might get to see the same design or same style here. So make sure when you just kind of import a design, you just added this style here. Then it's going to be okay with that, okay? Since in this website, I already added my style guide, so it's easy 19. How to make and check responsive: Now we're going to see how we can make our website responsive. So I like to start from the beginning. So first thing I hear, I want to just optimize the design first of all. Optimize means, like, I want to check all of this layer that everything is good, and some of them are mostly unnecessary. So I like to reroof them. So that's why first of all, let me check it them. And then I get input it on Elementor, then I'm going to check it out, okay? Okay, so let me remove here this header because I already at the header, so we don't need it. We don't need the footer though. We also don't need this testimonial section already have it. We also don't need this section. But let's import again. No problem. So checking layers means, I mean, check the layers. Like there is something extra container for example, let's say, as you can see there, this is not necessary. Remove it. This is kind of not visible. So remove it. As you can see here, have a frame, but that is mostly not necessary because I already have a frame. So grom and right side is a logo on this one, this is good. And let's go here again. And this section make Enter heading. Heading they have a group. Okay, this is good. Let's go to the next one. The three of them. That's good. Inside of it, have a container for the content, and this is milli for image. So we can say this is image. Let's go inside of it. This is not necessary. This is for categories, that's good. This is takes. And this is for what? Okay, this is the ts. Okay, this is for the button. That's good. Okay, this is fine. Let's go to the next one, remove it. Okay. Let me go to the next one. So as you can see, I just put the same design here. Another thing here, I just need to update the weight. As you can see, this weed is not fixed, so I need to fix it. Also about this weed need to fix. Also about this pattern. We just need to fix it, change the background color and change the position of the icon. Then I think it's going to be fixed. Also, we need to change this button front we because on Figma, if we look at this, this same button, I just need to do a little bit changes. If we make it medium, then I think it's going to be looks good. Okay, let's update it. Now as you can see, I just update all of this, and now if you look at carefully that this should be a carousel, but right now it's look like normal image. So what didn't you do? We need to add a carousel here. So as you can see, it's our slide, it's our image carousel. So let's try with image carousel, first of all, because this should be a carousel. Okay, so now we need to add here the image. Click on Add Images. Let's see if they upload the images here. Okay, so they didn't uplay the images. So what you need to do we need to go back and we need to explore for these images, and then we're going to di da. Okay, so let me export all of them. Let me first of all, change the image name, select all of them, and this should be here small images, number will be there. Okay, now it's fine. And now I need to export all of them at Swans. All right, so you get it. Now I need to upload the images here on my what price. In the meantime, if you really want, then you can just compress the images so that it's going to be same size, but quality will be same, and it's going to be load faster. So what you can do, I can simply select all of the image here and teeny pingiO you can use any other software for free image compression, same up this. Okay. So as you can see, all of them are compressed right now, so download all of them again. I think we're done right now, and let's do the responsiveness. So for the responsiveness, let's check the tablet first of all, and the tablet looks pretty much good, as I can see. It's pretty that's good, right? Because before we set up the style cat, that's why it looks so good. So what we can do? We can increase the wet the first thing we can do. So let's go there, and let's increase the wet and yeah, this is good. I think, this is good enough. This image looks so big. Let's reduce the size. So for the tablet, I like to make it three up there, only three. This is good. This is allget, I think. This is good. But it's looked like a lot of padding there. What you can do? We can just remove the padding from the top. That's good. Aing it and remove the padding from the top. And here, what we can do, we can just add some more what there. Yeah, let's go percentage, and let's read much more. Like two lines, that's good. Go to here these takes, and yeah, this is good. Let's make them left side. Definitely. Here is a left side option. And this looks so weird. So let's remove this thing. W should be in line, or yeah, inline will be much more. So let's make it 98 pixel. But if you look at carefully, yeah taking a space at the top and bottom, let's try to remove them fast. So I think I see, it's coming mail for the visible one. So I just go to the text and just remove it, and now it's fixed. Okay, now it's time for here, and this is also good. In here, what you can do? You can merely change the image. Yeah. Looks good. I think. This is not something bad. This is good. We can change this image with, then it's going to be good to go. Ten, this should be okay. This should be okay. Only need to increase the weight here. So if we cannot find out, then just open here this structure one. Click where you're going to go, then automatically, there will be redragon there. And now I like to increase the weight. So it's 100%. And this is the main one both of them. So make them 100% Yeah, percent. That's good. Yeah. This is good. Ned, we just need to do the same thing in the next one. Then it's going to be a fix, I think. Okay, now let's go to the mobile one and mobile, as gonna say, it's already good. And this is also good. This is good. But I really want these two of them, 50 50. So what you can do? Go to person days and make them 100%. But for this one, individual one, I like to make them 50%. Okay, this should be 100%. But inside of it, this should be 50% and the next should be 50%. That's kind of good. As you can see now it's also fixed. Here, this is also good. Need to change the width definitely of the image. That's good. Yeah, this is all about good, I think. So by the way, you can update the next one. And here, I like to make 100% definitely. But let's go to the padding. Here, just need to remove a little bit padding and marching. You can see how this have a right side, have at, but I don't really need 20. I think 16 would be better. So by this way, you can update the next one also, right? You can update the next one, definitely. And also here, if you want, then you can change the thing. If you go to this means one, content one. And if you change the direction into like this, okay, this should be same. This should be the same. But the as study one, I'm talking about the main one. Let's go to the column, and I like to change the direction. So this image should come at the top and then have content so this is good. So by this way, you can do the responsiveness. And as you can see, this is not something really hard and this is easy. And also, if you want to make these changes of the heading, let's go to the heading and go to the style. And let's go as I consider right now, we're using H one. So what you can do? We can first of all, see how much is fit in here. So as you can see fit with 25 pixel. Now, what you can do, we can go to this H one again and go to this managed global font here, and we see the H one on mobile, it should be 25, right? So what you can do, we can go to this 25, and now it looks pretty good, right? That's good. So let's say the changes and go back again. And now everywhere, wherever we just kind of use H one, and it's going to be changed with 25 pixel. So yeah, this is all about. I hope you understand 20. If uichemy plugin crashes then how to solve it : Now I'm going to share with you that if the UICB plugin is broken or something like hang on a browser, then what he can do or how he can just import the design. So it's not really hard to do. So when I was trying to import the design at the first time, it was look like it's broken. Let me share again if it's broken or not. I don't think that it's going to be broken again because I do a little bit up to my audition here, because it's taking a little bit of time. So I'm not sure it's going to be broken or not, so let's wait. Alright, so as you can see, this looks like page as unresponsive. Okay, so do you want to wait or you want to exit this page? So if you want to wait then you can wait definitely. But I think they're going to give you same message again that it's unresponsive. Anyway, so what I can do, I can just cross it. As you can see now it's cross is not working. So let's reload this page right now. So I'm just reloading this page so that I can start from the beginning. So right now we need to do we just need to split this page. Since on EIMEPugin have a copy pase mode, so we don't need to worry about it, right? So what you can do, we can just split it in a few section. For example, let's say, I like to input here this zero section at the FAS, then this section, and that's this section. So it's going to be much more easy, right? So first of all, let's choose zero section. And now let's go to here and let's optimize it, and then let's convert it as you can see, we get it now. You clipboard. Now we can go to Elementor. And now we can just simply paste it here. Then as you can see, it's going to be added. And then again, go to the next and go there and select the next section, like your trust section of this one, copy it. And as you can see, now it's copying to clipboard. As we get this section here. Now again paste it. So now, as you can see, it's coming down, right? So if you see that your C plugin is broken or it's not working, then you can just reload it and split in a few sections, and then import this way, I hope it's going to be work. If you face any other issue about UIC, just go to our group like par Az. This is a group IRL, as you can see, join that group and share your problem. I'll be there to help. 21. Uichemy Copy paste is not working: I know that many people face the same issue, something like copy mode is not working on UIKE. How do you fix it, right? So in this video I'm going to show you how we can do. Okay, so let's say, first of all, I'm going to input here this section. This is boy little. So let's optimize it and just convert it. And now I it's my copy to clipboard. And let's go back to our elementor and now click on Mouse Wright button, and then you need to select your piece from other side. Click on there. Then as you can see there saying to piece the elements, your side, I mean, other side, you just need to just press Control V or Command V. Now press Control V or Command V. Then as you can see, we get the same thing here. But right now, if you just go here and you just like, click on this paste, then this paste was not going to work. So if you press Control V, it's not going to work. So what didn't you do? You need to click on here this, press from other side, and then you need to press Control V. Then it's going to be worked. Okay? So I hope your copy paste is not working, problem is solved. 22. Figma to Gutenberg via Gutenberg Core, Spectra, Generate blocks, Kadence: Now we're going to see how we can import our Figma design into Genbak. So first thing, you need to just go this ARL like v.com slash EYKeE. And if you already have an account and if you already have a license key, that is fine. But if you don't have, then just go to here that is scroll down a little bit, then you will get here the option like start for free. But in here, you need to select what do you want. In my case, let's say, I like to go with Gutenberg, so I select Gutenberg, I'll start for free. And then they can read a checkout page and you just need to put your information, create an account, and then you get a license. So I already have an account, so I'm not going to create a new account, so let me login again. Alright, so as you can see, our order plays successfully, and here is the key that we are mostly looking for. So now we need to copy here this real key, and if you scroll down, then they're going to showing you this process that if you have any confusion, like how we can install the YKMEPlugin, how we can connect with What all of this thing they are teaching on block there. So I copy the license key. Let's go to FICMA and let's simply pass here this Y Cami like activate one, that's it. Okay, now it's activate right now. Let's go to this keep, how to use it because I'm going to show you how to use it right now. And then, as you can see, we get a same option that as you before see, the same thing. Optimism convert and ExpasKat and here have a few options. Right now, have next blocks there. And in future Spectra Git blocks, Caden, and I'm going to build a website with this, okay? So now, first of all, let's select this one. Like, select the section which you like import and Gutenberg. And then you need to click on optimize and Canva this button. And now you need to optimize the design. So let's click on this first one. And let's go to the first thing, and they're talking about to fix this issue. And before I share with you that why it's necessary, this is the next one that we need to also fix. And and this is the last one like images. And if you look at it carefully, these four images are different. They're individuals. But if I lock right now, if I just to fix it, then they're going to be a one image that I mostly don't want because they are four different images, and in later, if I need to make any slide or carousel, I can do that. But if I now make it lock then it's not possible later. Because this lock layer, how it's mall works. So if you have a multiple layer that time, let's say, if you go to this one, that have multiple layers now. And if you're just going to lock it, then they're going to be in one file, right? And they're going to make it in one file in there. So that's why we just make a log. So for now, I'm going to lay it ASR. So now, go to the Nix, so I'm going to cross at the widen and now they're checking other things. Then it's have a hit map, and HIPPAMs something like if you just anabel it, then you can see where you have elements like HVDimges. So yeah, it's HVZ or also it's also have and also have images. So yeah, this is all about correct. So let's click on Mark as done. And they're checking some others. And one interesting thing every single time, you'll noticier than they're adding in a video. So let's say if you're not understand any specific thing, you'd like to see more details, then just going to click on here this video, then you will get to see in more details. Okay, now we're talking about enable clip content. Okay. So now let's see which one they're talking about. For this one, they like to enable clip content or overflowing frames. So, okay, let's fix. And if you don't understand what is this, then just click on a video, then you understand more. Okay? Okay. Now scroll down, and they are taking some more. Okay, so remove properties from mainframe, so let's go to the hero, and they are talking about to remove these, but if we do, then maybe it's going to be broken. Okay, what we can do? We can do one thing. We can we now take a backup. So let's simply to Alta. Yeah. If it's not, then just for now, we can leave it, or what you can do? We can let's say fix it. So as you can see, inches can I fix it. It's looking good, but if you look at this, like, left side, right side padding, it's almost removed. So it's fine. I think it's not something. It's okay. But if you want to add the padding, then you can do it from here, okay? All right. So now let's see if and go back. And then you have a block tag, heading, button, video, blockout, advanced images, info Box, and some more Widget there or block there. Let's go back and let's go to responsive manager. And I think details we talk about, right? So we need to explain again. And here's a conversion setting. Let's go to the Convert option, and then you get a two option, one is like copy modes live input that mostly they recommended. But I like to go with this copy mode because this is much more easier. Okay, so go with this copy mode. I just kind of click on here the copy. And as you can see, I get a copy here, just copy it. Let's go back. And now we need to install some plug in. So let's go here at new this button here. And now we just need to add Nextureblock. It's something like next, then ER. That's it only. Then block. Then you need to install here this plug in Mali, nextorblog what Presquenburg, plug with thousand plus star templo At so just install and activate this plug in. Just simply click on here. Install now, then click on the activate that's it. Then it's going to activate it. Also, you can install here this next extension, this one. Also you can install here the plus ton for element, this one also. I'll re install it. You can install it or you can leave it, but I see that they have some Widget. Okay. All right. So we install all of them. Also, if you go to here the theme, we need to install their theme. Otherwise, you get to see the design is kind of broken. So go here the theme, and now you need to click on here at the top, add new theme at the top. Then you need to search the same thing next. So first of all, type next, then ER, search. And then you will get this theme like this one, con details and preview. Then this is the theme that I'm talking about, and this theme is coming from posy met like this one, POSI MY TH, this one. I already install and activate this theme. Okay, now it's done. Also one thing, let me share with you in the last previous lecture, I think I will share with you. Let's go to the customize option here at the top. And then you need to go here this general option. Then let's go to container and then just remove this head into full wid, make it full width, full full width, body fluid, everything, make it full with, then we'll make it zero. Then you can just literally import whatever you want, and it's going to be full weight, okay, so that you can easily I mean, it's going to be same to same design to your Figma. So if you just make it full weight. Okay. Now, let's go back to the design. Okay. So now let's go back because you already installed all of this theme and tie in. All of this thing will install. And now we need to click on here at new this page here, the left side, click on this button. And now in here on the text, we just need to press Control V, press Control V. And as you can see, we get all over this thing, everything we get right now in here. So if you're just going to put it at this page name, so you can say this is our home. Let's say home five. I can simply click on here this published button to see the design or we can see the PV. We don't need to publish, though. And if you look carefully that these designs look exactly the same, but only these two images look like crop because of the design, and we can import this manually, no problem. This one is look exactly the same, but it's not look like because if you look at this weed, then it's put in a weed there. But in our design, we didn't put any weed. So what you can do, you can literally just like this thing, and we can just put a weed there. Then it's going to be same as it is, how we want, right, or how it was before. So if you look at carefully, then this button is not look same. I think it's looked like weed issue. So we can fix that wide because in previous element, we get the same thing, right? So click on a button and just change this weed to say, how much looked like perfect 48 47, 45. Let's click on here this preview option and go with this preview tap. Okay, now it's joining the preview. I know as you can see this is look exactly good, right? Now it's good. So now we can just do the update. It's something like you don't need to publish the design, if you don't think that this is good, right? You can see the preview. Then if you feel okay, it's good, then you can just input the design or save the design or publish the design. And then go to this tablet and this tablet, you can definitely update it. You can change it. Let's say here have a width. You can just increase the width on here. We can also increase this pattern width. Also, you can go at this mobile version. You can virtually update the button also. If you go to this blog, then definitely you can do. Just click on it and just increase the button width like this. You can do. Also, if you're going to click on here this layer option that you can see autos. This is the container, this is the container paragraph, all over the thing that you can literally do the custom madison best how you want. As you can see, this is so secured. This is the container. We need to make it full weight and mobile, so it looks good. This is the images below, so you need to add your carousel. So this is not something so hot, I think, and it's easy for doing custom magion with Gutenberg. If you like to get the blocks out, which I think, just click on this plus icon, then you will get all of this block there, and you can just use this to build your website. And that's it of all Freak Pay Gutenberg. And if you have any questions, just let me know in our group in here, like facebook.com slash expat Az. Here this one. This is the group. So just join there and ask the question. Also, if you would like to see in details video, like one full page, I'm going to convert using Gutenberg, just let me know and group, and I'm going to add a different video about that and just add in the same course in here. Okay, just let me know. Thank you so much. 23. Figma to Bricks Builder: Now we're going to see how we can import our design Figma to break spellers. So for these, first of all, we need to go this link m.com slash UI CemeI here, and then scroll down at the below. Then you'll get this option here. As you can see, it's have elementor, couldn't board, and then some bricks. So click on here this Bicks one, and let's click on this start for free, this pattern. Then you need to create an account here. So I already have an account and I already log in there. That's why I get to see my email and firstname lastname. So let's click on free download this button. Alright, as you can see, I get here license key, and this is going to be necessary when I optimize my design on Figma. So let's copy it. First of all, let's go back to our Figma design. And in Figma design, you can literally import in a full design from here or you can just import in a specific section. So in my case, right now, I like to go with a specific section, but in your case, you can import a full design. So let's select the design. We can here this option, this button like action. Then go here this plug ins and now search your UIKi. So when you search I Cai, you get a few more plug ins from the company. One is like Figma to Greenberg, Figma Elementor. At the last, have a Figma to Breakpage Builder. Just click on there, and then we need to click on here this Run button. And first of all, they're asking to activate this plugin. So let's click on pset activate. And now we need to paste here the serial key that we recently get from here. So just paste and click on this Activate option. And now let's click on Skip it. Also skip it. And it same as it is like the previous plug in, right? It's kind of same thing. Okay, so let's go with this section. As you can see, I have right now 50 conversion right now. Okay, so let's click on here this Optimize and confide this button. And there we need to optimize our design, so you can literally just do optimize. So this design is already optimized because in previous video, I use the same section. So this design is already optimized just mark as a. One interesting thing is, every single time you will get a video. So if you don't understand what is this and why we need to do it, then just click on the video, then you will get to see the video. Now, click on C and go back, then it's elements or tag. As you can see, it's have a lot of elements of widget, a tag or blog, whatever you say. Everything is there. So you can just specifically use it like what do you do in element or I'm not going in details. If you like to see more details, just let me know our group. Last video, I share with you the group ERL Let's go to the group and just ask me specific thing, What do you like to learn? Then I will add this module on this course. Okay? Now, let's click on this kind of adaption. And as you can see, it's two option, what's like download Jasen and this live input. So they are mostly recommen to go with input one. So if you just go with specific, I think we can go with JSON. I think it's going to be much more easier. So let's click on this download option. And if you are just exporting any specific pitch, then go with this live input. So when you go with Live info, then you need to select and add your site. So let's add the side button, and then we need to add here URL and token. So for this, we need to go our What press website, and we need to install plug in. UIC just go to plug in Satn and search here, UIKemi, just simply search the same thing like FICMA and just activate this plugin. And after activating, you will get a left side button like EY CME just click on there. And then you need to select your Page Builder what he wants. In my case, I like to go with Bricks Builder. So select bricks, click on next, next, next, next. And then we need to activate this one, it upload, next, and then click on here this finish option. So every single time you just when you set a bit, you need to define that which page builder you like to use. Just do it. But if you don't do it, if you ignore it, or if you just use multiple Page Builder, it's not a problem. It's okay. All right. So now, scroll down a little bit. Okay, let's go to the setting option here. Have the setting. Also, if you go here to this IKE, I get an EO there, but this is not for brick Spiller. If you click on this brick Spiller, then this is everything is good. Elementor, if you just going to go with elementor, then you need to install activate thing with this un Brek same. But for now, we're going to go with only brick spiler. So let's go to the setting. And we need to copy here the side ERA, let's go back to Fick Margin, pay here the ERAP. And now let's go pack again and just copy the site like security talking, pase here and connect it. And then it's the same thing like element or half. We need to select what you want. Let's go with a page or template, whatever you want, you can go with. So for now, I'm going to go with this page. Let's go to next, I portal. Click on here arrow here this button. Then as you can see it truck on this page. Let's click on it with bricks, this button. And this is look exactly same. But these two image looks broken because on design, it was broken. Let's go here it option, and now we can literally do this thing. We can just change this weed, then it's going to be fixting. And this is the structure. And if you go he this tile, then you can change this width because right now, what happened, if you see this preview in front end, I can say look along width, right? Because of right now, we just go with 100%. But if you just make it a little bit less, let's say, 90 or 80% or 85%, that should look like same. So this is totally with the weed. So if you want to get exactly 100% design, then you need to play with this percent like the weed, then the design will be exactly same as it is. And one thing, if you look at this design right now, this image looks totly static, right? This looks totlyttic. So because we didn't select any kind of block no design or any kind of get attach no design. That's why this is look like antatic image. But if you need something dynamic if you'd like to get, then definitely you need to optimize the design here. So let's go to optimize elements and tag. In here, you really to select it. For example, I like to go with this carousel. So I can literally select this carousel here. So let's see this one carousel. I was going to say I can select a carousel and how many carousel I like to show. Let's say, I like to go with this four or five, I can literally save it. So now, whenever I can import this design, these images will be not like normal static image. It's going to be carousel. It's react as a carousel, and we get some more extra options like element or half. This is all about the weed, so we just need to play with the weed. That's it, then it's going to be fixting. And it's a tablet mode, the same thing, and it's also have a mobile and mobile have the same thing. So we just need to change this weed, then I think it's going to be fixed. As you can see, want to just increase the width, and it looks pretty much good, as you can see. So it's totally problem with the width, so we just need to resize the Wide and then our design will be good to go. So yeah, again, if you have any questions, just let me know a group. I will definitely reply you. Also, if it's need more videos about Brick Builder or Gottenberg mentor, any specific time if you'd like to learn, just let me know. I will make more video and add in this course. Thanks for watching. 24. Last Thoughts: Thank you so much for watching this full course. Now it's your time to show your feedback or thought writing. Just do a comment, whatever you think about this course. If you don't like, it's fine. Just do a comment. I'm happy with that, if you don't like, and if you like it, then just do a comment. Also, if you would like to see any more details on a specific thing, let's say about Guttenberg or Biggs or Elementary, if you'd like to see any specific page design or specific website design, just let me know on a comments on a group post, or you can even email me. Just let me know. I will definitely make the video and just kind of add it into the same course and also notify to you so that you can watch it and it can solve the thing or you can even learn the things. Also, if you get any problems, let's say you're trying to do, but it's not solving, just to the post into a group, I'll be there to support. 25. Assessment: Congratulations. You successfully complete the course. Now it's time to submit your project. For the project, you can choose any kind of design, but you need to convert it in WordPress, and you can use any page builder to convert the Figma design to Wordpress, it can be elementor, Gutenberg, bricks builder, anything you can choose. But make sure the design is 100% responsive for all devices. So when you design done in WordPress, just click on here this submit project, this button. Then tap here your project title. Also, just write the project description, like what you did here, how you do, write a little bit. Then just choose here other links, and then add here WordPress site link here, add it, and then just publish. And if you see here this project instruction, then you will get this link. If you just going to click on here the Figma community tit DVI Put all of this link there, just choose one of these that you feel easy and comfortable. Just go there and choose the design and convert in Wt press. You have any questions or confusion, just go to this discussion and just write your comment or