Using Elementor Kits Library (Pro) For A Redesign

the elementor kits library can not only speed up your web design process but it could also make you more profitable so in this video i'll show you how to use the elementor kits library to redesign bone myth aquarium's website without them even asking for it and of course it looks gorgeous on the mobile too okay so first of all let's take a look at what i came up with okay initially i know that for this tutorial i wanted to redesign an aquarium website so i went to google and i just typed randomly aquarium bournemouth because why not i just made things clear they did not ask me to redesign the website this is just one of the exercises i do on this channel i pick a random website and i just proceed on redesigning it okay so this is the bournemouth aquarium website and we'll do the mini audit in a moment but basically this is what you get on the home page now as you saw in the intro this is what i came up with by using the elementor kits library so as you can see we have a full screen video background then here on the top left we have our buy tickets call to action here in the middle we have our rebranded logo and here on the top right we have our full screen navigation and by the way i replaced the original navigation but i'll talk about that a bit later in this video so next we have our title here and call to action we have our quick links so let me click on the arrow and it takes me to the second screen here the third screen fourth screen and finally our call to action to buy tickets and let's open the navigation let's go to explore so we start with the fix picture and then it's going to load a video as you can see right here so beautiful gorgeous video so once again let me click and i can go to the following sections and we got loads and loads of pictures and by the way i converted all these pictures to the webp format and i've already talked about that in my previous video and it can tremendously reduce the size of your images so basically that's a great way to showcase the aquarium for people that maybe they're hesitating maybe they want to go they're not sure so they want to get a feel of what it's like to actually go there okay next let's open our navigation and let's go to our tickets page and as you can see we got this subtle animation and maybe something you didn't see is that it was loading an image in the background and then it loaded a video i usually i don't recommend videos on pricing pages but here it's really subtle i'm using a background overlay and i think it looks quite good now i wouldn't use video in the next step which would be the checkout but here on this page it's fine okay next let's take a quick look at the original tablet version and this is what i came up with okay next let's take a look at the original mobile version and especially the navigation that you can see here and this is what i came up with with this navigation now one thing you don't know about this video is that i've been recording for more than five hours because i forgot to press record a few times that got me crazy so if you could give it a thumbs up it would really really make my day now why is the elementor kids library such a big deal well whatever your level is it allows you to build entire professional wordpress websites faster and more efficiently also it's the perfect starting point for any website every full website kits include all essential parts now of course you can customize anything and those designer made kits are for any use or any industry next build it once and this one is a big one use it anywhere you can export your own kits and import it for starting your next projects and then we have global site editing centralized control over all elements now in the intro i told you that you could actually be more profitable with the elementor kids library how's that well when it comes to wordpress web design the old way in my opinion of doing things is that for each project you're gonna purchase a new theme now those themes usually they're beautiful but there is an issue is that each and every time you need to relearn the logic behind the developer how to set up the options what options they have and also one of the risk is that if they stop developing the theme along the way you may be stuck with a website that you can't update anymore so this has happened to me before and i promised myself i never want to be in this situation again so for me there's a better way and for me the better ways to use an ecosystem and by ecosystem i mean using the same theme and the same theme builder so that you know it inside out and you don't waste time with each new project as you may have guessed from the title of this video in my ecosystem elementor and more specifically elementor pro is really at the foundation of this ecosystem and if you don't have elementor pro yet you will find a handy link in the description below it really helps the channel it doesn't cost you anything extra and rest assured that i only recommend elementor pro because i absolutely love it and i use it in all my projects now as mentioned i currently use a dual pricing strategy so the first tier is for the website that i start from a kit whether it's my own or one that i downloaded and the second tier is for custom websites and as you may imagine it's more expensive now when i create custom websites this is more or less the process and i've already covered that but let me go really fast so i got my project and then this is a redesign and once again this was a random redesign i did not really redesign this website so basically i start from the mini audit and i would say okay what needs to change this would be the brief then i get my tools for my grids i got all my assets and next i'm going to define the brand identity whether it's given to me by the client or maybe they actually hired me to change their branding okay next i start the wireframing process screen by screen so this is the heroes section of the home page and this is what i came up with for the wireframes and then once the client approves the wireframes i can start designing and as you can see i can start designing a lot of different stuff until i'm happy about what i want to show to my client and then i need to do the tablet version and the mobile version now needless to say that that can take a lot of time so with experience i tend to do everything within elementor pro and i've created my own tool to wireframe and prototype much faster shameless plug for my product i know it's called wire mentor now when it comes to wireframing you can pretty much use anything you want and you get great free tools like figma or you can use pen and paper and that's free but whatever you use once you go into the design phase and once it's approved you need to develop it with elementor pro in our case so that's why custom web design which i absolutely love can take a lot of time and that means that it's going to be more expensive but the thing is depending on your market not everybody has the budget for custom websites or sometimes they do have the budget but maybe they want to hire you for other services that you provide maybe you do video maybe you can do a rebranding and maybe they have just a little cut left for the website so what are you going to do in this case are you going to turn down the client and the whole project with the other services because they cannot afford the custom web design or are you going to be smarter now let's do some quick math so as i said i love creating custom websites but let's imagine the following scenario let's imagine that one custom website takes nine full days of work and i'm talking about web designer developer day so not eight hours but like 10 or 12 or even more so let's say it's nine full days and let's say you're gonna charge 9k for it now i know i know don't scream might be a lot of money for you or maybe it's really cheap but in any case don't scream this is just to make it easy i'm just going to pick easy numbers so let's imagine 9k but you could also divide it you could do 900 even though i don't really advise that for custom websites but you get the idea so let's say 9k for nine days of work so 1k per day so you complete the project you get your 9k and you're happy and you should be but i was really intensive a lot of back and forth especially for the design part so a lot of reinventing the wheel but at the end you completed the project now picture this imagine using the elementor kits library but with a little twist which i will develop later in this video and imagine that you develop a similar website but in three days you could sell it for half the price of the custom website so 4.5 k well you just increase your revenue by 50 yeah because now instead of getting 1k per day you actually got 1.5 k per day so theoretically while you were building a custom 9k website in nine days you could have built three times three kids based website for a total of 13.5 k which mean an extra 4.5 k for the same amount of work or maybe even easier now of course you're going to tell me that you could always price your custom website higher but so could you for your kids based websites now the real beauty of this is that you can create your own kits that you can reuse again and again and again but of course what you do not want to do is to use the same kits over and over and over without changing anything but let's get real and let me show you my design or redesign process so the beginning of the process is the same so as mentioned this is going to be our bonemost aquarium redesign so for the beginning my process remains the same so here i got a screenshot of the hero section and this is just a mini audit of course i would do a more in-depth audit in real life so this is the brief and this is what i noticed so the layout is too narrow in my opinion there's too much of everything there's no storytelling the color palette could be improved what about the branding i think the branding also could be improved and why are redirecting to socials as i can see here but i know most people do that i just don't agree with this i think it should actually do the opposite is get people from your socials onto your website but once they're into your website why would you want to drive them away just imagine you are if a shop you're in a mall people get to your shop and you're like no just go outside just go look at our advertisement you're already in the shop okay next we need to craft our site map with the client i made this really simple on purpose just for teaching purposes so we got a homepage explorer tickets access and contact and i'm going to show you the home explorer and tickets in the process now let's imagine that a rebranding is part of the mission now i'm not saying the logo is bad i'm just saying in my opinion it really could be improved and i often tell my clients i may be a digital alchemist but i'm not gandalf or harry potter if the branding is not tight if the branding is not slick and looking good it's going to be hard for me to create a nice website now it's never easy to talk about these things because sometimes the client has done the logo themselves but really what i'm trying to do is to separate the subjective part from the objective part and i always come up with really objective ways to measure if a logo is efficient or not i've already covered that here on the channel now i want to work on the rebranding actually don't just work on the logo the logo is just the tip of the iceberg but for the sake of this tutorial i'm just gonna make it way faster so basically i'm gonna start typing the name of the clients with a lot of various fonts and then i pick a phone that i like and usually i have much more font and screens than that but you get the idea so i picked this one here so i put it here on its own looking good and then i start trying to think about what could i use so i thought okay i could use a wave and this is not the final logo but i had the idea that i'm just going to subtract that wave from the text which is what i did here and i thought it looked good so this is the final version in black and white and this is with some color and by the way if you want to know how to create a killer brand identity for yourself or for your clients i created the free brand identity guidelines that you can download on my website initially it was made for affinity designer but you can use it with adobe illustrator with a workaround so if you are interested just go to casino.com forward slash branding but not before this video is over i promise it's still gonna be there it's gonna wait for you okay so in a nutshell this is the identity we have to call palette the logo and the typography of course in real life it will be like 20 pages but you get the idea now at this stage i can start wireframing and once again you can use pen and paper but this time i'm not going to send this to the client i'm not going to validate because first i need to find my kit but right before i do that i would create a mood board so basically i would just collect some parts of websites that i like and just put it in a document like this just to get an idea of what i'm trying to build now of course this is not about an aquarium but let me show you i would start here on google images so here i typed aquarium website but of course i would do it differently i would not just look for aquarium websites to be honest i would look a few but i would go to places like awards and best inspiration gary and look at just nice websites look at the color scheme that i like and just collect some parts and put it in a document as i just showed you okay next it's now time to find a suitable kit and we'll do that from the elementor template library and here we have the kit section and as you can see i can just filter so here with e-commerce education event entertainment blog portfolio and cv so let me go through here i want something dark and usually i can find that in creative stuff so let me scroll and there you go so that's the one i want and to be honest i opened most of these and i looked at each and every one and then i decided to go with this one so let me click on it okay so right off the bat i find it really beautiful and that's the wow effect that i want to have now of course the quality of the picture is really important but i really like how it's laid out i like the line here on top and the separation of the header but still in subtle way and i think it's really looking good so let's scroll and let's take a look at the navigation okay so the navigation is quite original i quite like it but i got my own little idea of how to change this okay so once i found the kit that i want to use i'm gonna go back and forth between the wire frames and the kit i'm gonna check what's inside the kit what can i use maybe it's already laid out the way i want it maybe not i'm going to go through the different pages and then i'm going to create my wireframes and then once i'm happy with everything i have i'm going to send it to the client for validation and once the client approves the structure of the website without any design so once it approves the structure then i can move on to the design phase and for that i go straight to wordpress because i'm going to use elementor and elementor pro as i would use adobe xd now let me show you what i've used for this project so first of all go to appearance themes and the thing you should use if you want everything to work right off the bat is the hello theme from elementor and that's gonna work perfectly now as you can see i'm using the asha theme why because it's part of my ecosystem and i like to use astra a lot and maybe you are using a different theme and i just want to show you the process and things you may have to change okay next you want to go to plugins and click on install plugins and as you can see i've installed elementor and elementor pro next you want to go to templates kit library and as you can see we have all our kits here many free kits and some pro kits and the one-on-one is a pro one so if you want to view the demo just click on view the demo and it's just going to load straight here in an overlay and the great thing is that you can check how it looks on a tablet and on the mobile so it's really great once you're happy you can click on apply kit so here we have an onboarding process and it's asking you what do you want to import in the kit you got the templates the content the site settings and you can just tick in and take the options that you want or do not want so let me click on next okay setting up your kit this usually takes a few moments so don't close this window until the process is finished and with the magic of video editing i'll be back once it's done and voila your kid is now live on your site now it took like three good minutes but there are a lot of pictures on this kit so we got one pop-up two singles one archive header footer yada yada you can pause this if you want to see what's going on okay great so let me click on back to dashboard and now let's take a look at our website and as you can see it's loaded but with some weird things because the layout is really narrow and we don't have the logo and that's exactly what i wanted to show you because you might go through the same thing but no panic this is just because you are using a different theme so back to wordpress first of all you want to upload your own logo as well as your other media assets so for that go to media library and i'm just going to click on add new and now i can select the files that i want to add or just drag and drop so i've converted all my images to the webp format so that it's really lighter and it's going to make the website faster especially because there are a lot of pictures on this website okay all our assets are now loaded so next i want to go to appearance customize so this is the customizer for the astra theme now it may be slightly different if you use a different theme but you should find the same options you may just be in a different position so i'm going to click on site identity and next i'm going to click on site title and logo settings and now i want to select a logo it's going to open the media library and i've already uploaded everything so it should be here and i'm going to use this one here click on select and it's white on white that's why you don't see anything but i'm just going to click on skip cropping and as you can see it reloaded the page and now we have the right logo okay next let's take care of the container width of this page and the whole website so let me go back then i want to click on global then i want to click on container and as you can see he's got a container width of 1200 pixels you may like that but i want a fully stretched layout just like in the demo let me just click on publish okay now let's go back to the front end and let me refresh the page okay we have our logo and now as a scroll as you can see it's full width okay next you want to go to pages all pages then you want to look at some of the pages so you just click on view and just take a look at the pages see how they're laid out and it's going to give you some ideas to start actually designing your own website so in our case if you remember we're going to have the home page explore tickets access and contact so if i go back we already have the home page which we have here we already have the contact page so we need to create the explore tickets and access pages now the explore page is actually going to look similar to the nature page so if i click on view so this is the nature page and actually i'm not going to change much here i'm just going to change the pictures maybe add a call to action so let me just go back i'm going to click on quick edit and then i'm just going to change this to explore and also for the permalink same thing for the tickets page because i'm going to use the same layout as in the about page so if i click on view this is our about page and i'm going to use it as a base so let me go back let me hover over the name of the page click on quick edit and i'm just going to type tickets and same thing for the permalink okay click on updates okay and last but not least i need to create the access page so let me click on add new get a new page let me type access and because i'm using the astra theme i'm just going to take disable title publish and once again publish now in the real life scenario i would leave all the pages until i've completed the project then i would delete those pages but now i just want to make it clean so i'm just going to delete what i don't need okay so now i got my five pages next i want to create some menu so let me go to appearance menus okay so first i'm going to create a quick menu so let me call it quick menu then i want to click on create menu okay next i can add items to my quick menu so i'm going to add access explore and tickets click add to menu and i'm just going to change the order like this okay and once i'm happy once again click on save menu okay next i'm going to create a new menu so click on create a new menu and i'm going to call it main menu and i'm going to take the option primary menu and next i'm going to click on create menu and once again i want to add all the items i only have four here so i'm going to click on view all now i got all my pages let me click on add menu and i'm just going to change the order once again there you go and once i'm happy click on save menu okay now let's take care of our header and footer shall we so let me hover over the little house i can click on visit site so as you can see looking good but there are some things i want to change like i want to remove the social media and put a call to action logo is fine and i want to link here the navicon actually to the pop-up because now if i click as you can see i'm clicking but nothing happens so for that just hover over where it says edit with elementor and click on header okay so now we are in edit mode for the header and the first thing i'm going to do is to just remove this now i'm just going to speed up the process and i will pause and talk when there's something i want you to focus on [Music] okay let's refresh okay so it's working fine but if i click on the navigant it still doesn't do anything where i click so let's fix this okay so let me hover over the navigant icon and then where it says link you see the wrench icon click on it and where it says all click and type the name of the pop-up which is the name of the pop-up from the kit and its menu pop up okay let's click on update okay now let's refresh and now if i click on the navicon as you can see it works fine and as i told you before i'm going to change this navigation but more on that later so let me close this and now if i scroll to the bottom as you can see we have a big white space here that we want to change so once again for that you want to hover over where it says edit with elementor and click on footer okay and now when i hover over the column you can see that there's an item here and if i click it's the side logo and it makes sense because we picked the white version of the logo so that's why you don't see anything so what we can do is just remove this then click on the widgets icon and type image and then i'm just going to drag and drop an image click on the image and i'm just going to pick this logo here center it and then i'm going to give it a width of 180 pixels looking good and while i'm at it i'm just going to change the menu here because by default it picks the main menu which makes sense but we want a quick menu with only three items so click on updates and now when i refresh the front end as you can see we have our logo here and the menu as it should be okay next let's create our content so for that you want to go to pages all pages so let's start with our homepage so you want to hover over the homepage and click on edit with elementor okay so let's get started [Music] okay so let's refresh as you can see it started with the fallback image and now we got our full screen video looking good we have our sections looking good we still miss one section but i'll cover that later and just need to change some of the things here so let's go back okay let's refresh and looking good let's check responsive mode looking good and tablet mobile sorry looking good but we want to remove the call to action here in the header we'll do that in a moment [Music] okay that's how i want it okay next let's take care of the explore page which used to be the nature page if you recall so i'm just going to hover over explore and click on edit with elementor [Music] okay back on the front let's refresh the page and as you can see we have a different videos looking beautiful and as we scroll we have all the various images that we've just changed and with the last section here at the bottom with the call to action and it's basically this section that i want to copy over to the home page that's why i said that it wasn't finished for the home page so let's go back so i'm just going to right click copy the section then go back to the home page and i'm just going to paste this section and that's going to be my bottom call to action for those two pages okay next let's take care of our tickets page so for that i want to click on edit with elementor and if you recall initially this was our above me page so let's get started [Music] [Music] and there you go working good but now let's take a look at the responsive version so let's go back okay let's fix this [Music] okay looking much better as you can see here in tablet mode and in mobile mode so as a reminder we went from this on the original website's homepage to something like this with the elementor kits and i think we can all agree that quite a few aquariums out there in the world would like to have a website like this and if you forgot here is the tablet version and this is what we came up with and this is the mobile version with the navigation and this is what we came up with with our own navigation now let's take a look at the other pages so let me click on the full screen menu and by the way i told you earlier on about this menu as you can see it's not the original menu from the kit and lucky for you i've already covered that in a previous tutorial and of course you'll find a link in the description below as well as in a card at the end of this video okay so now let's take a look at the explore page okay so as you can see once again it loaded the fallback image and then the video here in the background and then we got each pricing table as we created it now you may be wondering about this weird inverted cursor effect that you can see here and let me show you here well lucky for you as you may imagine already covered that in a previous tutorial and you'll also find a link in the description below and if you want more of these videos coming your way make sure you subscribe and smash the notification bell so that you don't miss anything so i hope to see you in the next one but don't forget i'm trying to create the content that i wish i had when i got started so i'm looking forward to see you in the next one and until then take care and stay safe

Channel: Kaycinho The Digital Alchemist

Views: 4,665

Keywords: using elementor kits, create a complete wordpress website using elementor kits, create a complete wordpress website using elementor kits and theme builder, elementor kit, elementor kit library, elementor kit tutorial, elementor kit wordpress, elementor pro kits, elementor pro template kits, elements kit addons for elementor, envato elementor template kits, envato elements elementor template kits, free elementor templates, wptuts elementor, envato elements, page builder, wordpress

Id: 2dcTLa4oaps

Length: 28min 35sec (1715 seconds)

Published: Thu Sep 09 2021