Main

Building a Custom Website from Scratch Using Elementor (Part 3)

This is the third (3rd) part of the series: Creating a Custom Website from Scratch Using WordPress and Elementor Pro. In the previous series: — I taught exactly how to brand a website from scratch using the Elementor Site Settings menu to define the default colors, fonts, and element styles such as buttons ...(and why you should). — I taught how to build a responsive and very dynamic website header and footer that fits well on all screen sizes, from scratch. But in this part, we covered the process of designing the website homepage which of course, includes the hero section and other sections that follow. We started this part by permanently migrating our WordPress website from TasteWP.com to Local. Local is a WordPress server that lets you build and develop WordPress websites on your laptop/desktop without relying on a hosting service, while TasteWP is a free WordPress hosting platform that is used to quickly spin up "instances" of WordPress sites. The reasons and benefits of doing this were fully discussed in this video. Once this was done, we then began the design process of building our homepage, section by section. In detail, the following aspects were treated in this particular order; 1. Installing a brand new WordPress instance on Local 2. Migrating our website from TasteWP to Local via the .wpress backup file. 3. Building the website Hero Section 4. Building some of the remaining homepage sections below. By the end of this video, you should already have a functional homepage with fully functional navigation (i.e Header Menus and Footers)` `in the next video, I will teach you how to build blogging functionality for this website from scratch, so that you can feature some blog posts on the homepage as grids.

WordPress EarlyMentor

5 days ago
back to our series we've been trying to build this website for some time now and this is just the part 3 I think today since we built since we built the header and the foot up we should have we should be able to do quite a lot to the right so we've done this in the last um series I mean the last video and we've also built the Ada so we will be building the own page and the inner pages when I say inner pages what I mean a pages like this about those and you know speeches like contact those we wou
ld also be looking at how to build your contact form and how to set different parameters such as the email uh where which email will receive a notification and what kind of notification will be the message or be the response when somebody feels a contact phone you know like your message out and successfully sent not every time somebody feels a contact phone form you want to sound like that there are some cost contact phone that you create that will be specialized for example it could be somebody
's trying to join the program so basically you can use phone as either a contact form or as an on boarding form you're going to be using the same widgets and elemental is just the way you talk to the visitor that will be different so if it is a contact form it typically appears like this but if it is a form like a survey form or a form where you need information from a client then you already know what kind of questions you'll be asking then once the client finishes filling all the information t
hat would depend that would depend on what kind of feedback message you give to that client so everything will be treated in this series so now let's go back to our own page and let's go on and open our project files remember at the end of the last session I told you that will be migrating our websites from TSWP will be migrating our sites from TSWP to look out um thank you so much um Steve for suggesting lookout to us I have installed my own copy of local so this is local is actually a server t
hat you can use to develop websites Whatpress based website locally right that is why it is called lookout you don't need to go on TSWP anymore remember the inconvenience that we add with TSWP which will always get logged out every 2 days now because we are moving to lookout I will no need to do the ritual that I normally do you know spinning up a new Twp server then going to restore my backup no I wouldn't be doing that on Twp anymore since we are not going to be using TSWP anymore do TSWP allo
ws us to spin off waterpress website very fast I mean probably faster than lookout but this two days issue where we get through thrown out every two days and we're gonna have to take a mandatory backup else we're gonna lose our progress is gonna become a huge inconvenience force but it is a good thing since I mean this inconvenience in our first two videos have allowed us to learn the art of website migration especially from Sava to Sava um and more importantly when the domains don't even have t
he same URL so it is possible to make websites migration isn't that method I've told you earlier you already have the plugins and pretty much every other thing you need to know concerning or press or side migration which is a good thing we should listen in this guys unfortunately we will not be moving ahead with this um series which is viewed in this website we won't be moving our head using taste of your P animal bye bye taste of your P I see you anytime soon you know if for example we have to
test the plug in to see the effects before we apply on our website this WP can be very useful for that but for developments were which is going to be spun in many DS because of the inconvenience of 2 2 DS will no longer be using this WP alright so if you want to install lookout on your on your on your laptop this is the address I mean this is the YouTube video to watch but because I've installed um lookout I will not be needing to go through this process basically all you need to do is click on
I mean go to Google and type Lookout WP Lookout WP once you do that you have this option so you can install lookout but um I mean if you like videos a lot this video is going to be useful too so I'm just going to copy and paste this video um in the Telegram so I'm just go to the Telegram group here um just going to go to news installing um how to install look how WP on your PC all right so what should I video you're gonna get step by step um on out to install Lookout WP on PC PC now once you ins
tall Lookout WP on your PC look out like I told you say what press about allows us to build what press websites on our PC so that's basically all look outdoors this video is going to take you through the process of getting up to this point where you can now add your own lookout sites now because remember before you can restore a backup you need the W press file remember the last session we had we took it back up so I'm just going to search for W Press um let's look at it so we have quite a lot o
f W Press files here now the issue is I'm trying to look I'm trying to know which one is ours which one did did I uh did I saved that released our project I need this to be no we need to start a local site now I'm going to create a new site this is a process of adding a new site in local so create a new site I'm just just gonna click on continue what is the name of your site let's name it middle because of course that is the name of the sites we are trying to um you know we are trying to build s
o we call it Milo or we can see Milo tonight the name of your site is also is going to appear on the task bar I mean on the title title bar here right by default so you don't need to touch any advanced options just click on continue then this you don't need to do anything just click on continue now the what press username is the what press username that you're going to be using to sign into your what press backhand what press is our name um I it doesn't matter anyways because this is our name is
going to change once we apply the backup I think that should be the case but let's see what happens because we are in a new environment now so let's see what happens when you apply the backup remember the designing my password is always changing when we apply the backup but let's see what happens so I'm going to sell select a new username let me just give it um Milo at me alright but it's not advisable to put to make your username guessable so in my own case let me just use um yeps then the pos
sible make sure you're using a name that is easy I mean when it comes to your prices on him like easy for you to remember but hard for orders to guess also make sure that your prices on him is not is not the is not ask nothing to do with your site else your website will be susceptible to hacking right so what press password just look for a good password but let me just change this design to you since it is easy for me to remember um so what press email just make sure it is an email that you can
access right um in this case I'm just going to you know use um my Gmail but then there are implications to this um that is another that's another story um especially people that buy Austin from shared Austin platforms like membership what it does is not a big deal and we just put an email that is accessible in case you forget your password or anything but normally it should be the email of it should be a username with an email that relates to your websites for example if your website name is Goo
gle dot com then your email should be you at Google dot com just that is just an example it is not possible for you to have Google dot com as your dummy alright so um this unique in this case let us manager what person know as my personal email it doesn't matter to me honest but um that is just the financial I'm going to click on add sites right I'm gonna click on outside once I do that it is going to set up an empty waterpress website force now he's asking me for my um Mark password but yeah th
at is for security reasons now I'm just being granted by putting my password once I do that what pressure being installed on my laptop now we have what press installed how do we test it all you need to do is click on this WP admin button right once you do that is going to take you to the login page where you can now set your username and password optionally you can activate one click admin by turning this button on what I mean is that when you click on this WP admin it just takes you directly to
the login page I'm into your WP admin backhand without asking for username and password if it is much more easier I'll see if I should think it is easier for you to be putting your username and password you don't need to activate this alright so let's go to WP admin by clicking on this you can see that I was able to directly go onto my WP admin without being asked for my username and password why because I have enabled one click admin another thing I want you to notice is that this is saying th
at it is not secure generally speaking it is not a good idea to be developing a website in a not secure environment or otherwise known as STP we have a secure protocol called https which means IPA Test Transfer Protocol secured which mean which is the s I need to typically have a padlock icon or a settings icon here when you click it it tells you connection is secure but let's see our order connection here let's see our other connection here and click on this you see that your connection to this
site is not secure to avoid problems with different kind of plugins or processes it is always a good idea to make sure you are developing a secure environment how do we add an SSL certificate to our website to make it secure now I'm going to show you the process may be a little bit different on Windows or you may not even have that issue on Windows um after you do this step so the first thing you want to do is to entrust and SSL certificate to this website you can see that other websites I have
here have been trusted so when you visit them you won't have that issue but this is always gonna have the not secure notification here but you must make it secure to make it secure all you need to do is click on the trust button or on the Trust CTE here once you click on it it is going to ask you for your password but this is my this is the latest Mark I'm working on the latest Mark if you are working on earlier versions of Mark always you may not have this issue but I'm working on my quiz Sono
ma which is the latest version of my quiz is a bit restrictive so even after this I'm gonna have to do for that things to make you work but look at it first thing you have to do um I put in my password I don't know why it is not taking it off so okay now you see that is not working right this is it so run into an SSL issue I mean an issue trust in the local SSL certificates whoa how can we fix this problem I have to go to I have to search for kitchen right kitchen on my Mark then I open it and I
'm going to click on Open Kitchen Access now I'm going to search for my new website I just added which is me loading and hopefully it sees it now you can see that me loading me loading is says that the root certificate is not trusted now I'm just going to right click and I'm going to click on get info on that get info I'm going to go to trust and I'm going to change it from you system the default to always trust and every other thing is going to go change to always trust then once I close this I
'll be asked to put in my password please note that this issue you may not face this issue especially if you are Windows if you are on Windows you may find it a bit easier for you to add an SSL certificate by just clicking this button so let me know if you have an issue trust in your um site if you are on Windows I'm going to provide you a solution but if you are a Mark you already saw how I fix the issue now I'm going to click on stop site just so that we can restart this site again and I'm goi
ng to click on start site again so that the server for our sites will not start working then click on trust again and I'm going to be giving my password so um let me click on trust again I don't know why it is asking me for my password several times but let's hope that what I did in the order window then I mean indication access what I did here as fixed it um so how do I confirm that because even the kitchen is still telling me that it is not trusted yet but I've set it to be trusted so let me l
et me confirm from here alright this is still on always trust now let me close kitchen and let me try to reopen it again and see if is still not showing but now let me open the website and see without the effect as you can see that is still not working why is it not working though we're gonna have to find out alright so I'm just gonna click on WP admin again because you know remember I've I've closed the website so let me just click on WP Admin again is still not working all right I think I foun
d the issue the issue now is I'm gonna go to settings and I'm going to go to general now you can see that our WordPress URL is on http instead of https so you have to change this URL to https then you have to click on safe changes if the SSL certificate as kicked up and I mean I started working you will not get a complaint and you can see this as automatically started using the sctps version of our website now you can see now that sees connection is secure if you don't trust this website right a
nd just go and set it to its space you're gonna have issues so you first have to go through the process of trusting it I'm very sure that when I restart this software it is going to refresh and see trusted just like audacity okay it is not it is not showing safe alright you can see now that I just trusted alright so now I cannot keep walking enough to for me to be able to log in I first need to um remember my username and password and I don't because I don't think WP admin is now is I mean I don
't think this 1 click admin is now working since I changed to https that's weird because I activate the 1 click admin it is supposed to just stick me in voice this note but it's not a problem because I remember my username and password now let me just put in my password and so that we can log in all right one thing you will notice with WP Lookout is that it is much faster than this WP to operate I mean to walk with when you start working on it it is much more faster because it really doesn't hav
e to everything you are doing is already on your PC you don't have to do much with on exchange I mean as changing data with the server the first thing we want to do is to install plugins right which is our backup and restore plugins that we usually install back then on this WP now we on lookout this is the first time we're gonna be doing on lookout and probably the final time we're gonna be doing this because after this there will be no need for us to be backing up every time again alright so I'
m just going to click on shoes file um I'm gonna look for the plugins I use for backups I think it is called all in one WP migration so I'm just gonna first install the first all in one WP migration before I install the extension so let's go now it is installed and doesn't click on activities you can see how fast lookout is on my computer the only downside of lookout is that it consumes a low batteries I low battery so if you want to be using it especially for long periods make sure that your la
ptop is plugged in now another plugin I need to install is the extension for the all in one backup restore so let me look for it so which is this all in one WP unlimited extension open install now activate now now that we have our two backup and install plugins installed the next thing we need is the backup file which is the W press file dude that's the next thing we need so we to to import it we just want to contact imports and we are going to click on imports from far and look for the back of
file now the issue is I have so many W press file files on my PC I have so many W press files on my laptop I don't know which one exactly it is between this walk right wiki cry or Robin industry I don't know which one exactly it is but I'm more I'm more inclined towards this because that sounds different than others I mean sounds like the WP website I were working on before so how do I know now is to look for I'm going to get the file info to look for the one that appeared latest which is this o
ne was created on February 15th while I think this one was created much more earlier so let's go I expect our favorite 11 that was for this prior to this so this is most likely our W press file that we want to import right so I'm just going to go to file and I'm going to search for W press and I think it is that we cry so I think it is that we cry yeah this one we could cry now I'm just gonna open this so so you can see how fast it imported and that is because we only look outside like I always
told you there's no need to exchange any information with the remote server if it was on um this WP it will take a bit of time because it needs to upload first but everything is happening locally and even the w press file was also imported from a local storage so that is why it is very fast so I'm just gonna click on proceed and hopefully very soon you can see our site has been reported successfully I'm just gonna click on finish and that is it now when you click on finish usually your website r
emains the same until you click on another icon or another on another link now when I click on dashboard for example I'll be told to re log in again all I just need to do is log in again now you can see that my password and username that I used to create this site are no longer correct which is very very normal how do I get my username and password back remember at the beginning of this tutorial I told you to keep your username and password in safe please this probably the last time we'll be nee
ding to do this you know to hunt for where we kept the username because we just restored the login details I mean the website on another server but it's always a good idea to have it kept in a separate place main reason is because you can no longer access it to even find out where your password is I mean what's your password is because it is it is no longer going to go let me show you you can see it here this will cry it will not open our website anymore it would have been deleted by this WP tha
t is why you need to keep I think I don't need to be saying this anymore but I've said it multiple times so now let me go to my Google keep and go and check my user um username and password uh for for the website alright um how did I save my what did I save my username and password is this is it alright my what press password my username is u dot 0 d u so let me copy that and let me paste it here and my password is is this so I'm just going to copy it when you're copying your password make sure
you don't accidentally put an extra space in front so I hope you know that already I've copied my password I'm just going to press it here and I'm just going to click on logging it's gonna ask this and I'm just going to click on see to update it now you can see I'm logged in and see remind me later all right um once you do that a security feature I normally see tell people is go to settings go to general and make sure you change this administration email address to avoid your website getting act
right if you try to change your email administration um email address what press we attempt to send you confirmation email which unfortunately this will not work on this local server email services will not work if I put in tycoon at Gmail com now if I put in tycoon at Gmail com as my new administration password and I click save changes it is going to tell me why still retaining the old email it's going to tell me that there's a pendant change of email administrative to iconand Gmail com so wha
t this means is that it is going to attempt to send you a link so that you can confirm this new email from there I don't know why it is designed like that but that is how what presents always been fortunately for us you know I told you that this local environment email services may not work so you will not be getting email a lot from your website unless you buy a simple and move over there but there is a plug in that can allow us to force change this email address without any form of sending or
changing email address email to your new email address so I just gonna go to plug in I'm going to add new plug in um fine I'm going to search for change email change admin email so you can see this plugin allows an administrator to change the site admin email without sending a confirmation email from the server which is exactly what we're trying to do want to override the default behavior so that we can change our email address there's in the the reason why I'm emphasizing on changing your WordP
ress email address is so that to avoid incidences of hacking in the future because because of that email address that was so let me click on activate once I click on activities I should be able to change the email address from here without any form of confirmation so I'm just going to go back to settings I'm going to go to general and I'm going to change this email address uh I'm just going to change this email address to my email address now now I would no need to be sent the verification um ag
ain for the for the thing to change now you can see that the setting was saved and I wasn't asked for any I wasn't since any verification sorry to digress but we needed to fix that parts and so now let's go ahead with our website design as you can see in the last session in the last tutorial uh we designed the header and the future and just just some minor changes to the responsive um to the responsiveness of the food that we already have services here about we designed header also for the mobil
e uh for mobile devices now I noticed that the the work first of uh huh first of I needed to fix this first arrow here which I made a mistake I had it menu item so let's go and fix it so I go to Milo menus I believe I'm very sure that most of you didn't do this Mystic I wanted to put block instead of many item so I'm just going to put the ash character here then put the right name here which is block right so that is what I wanted to do I made a mistake from the last from the class I was on over
sight now let's go back we should already have block here now so we already uploaded and also I think there's some improvement I needed to do with the mobile filter with the filter and the mobile I mean the filter so I'm just going to edit the filter now so let's change it to mobile view there are some things I needed to do nothing is showing here to fix but maybe one figure out later do but I mean yeah nothing but here I just check it is working fine all right um let's just start the developmen
t of the main part of our website which look at sorry this is not the armpitch yeah this is the one page I'm trying to build right so one thing first is to prepare your images so we're gonna be stealing images from this website but so that you can understand better in reward scenario where you you will you will be feeling I mean you will be putting your own image in real world you'll be putting your image one you first need to get an idea of the size of this image right you need to know what the
image size is or at least I mean something close to the size of the image to do that sometimes you are not able to just right click and open an image on a website such as this one this one says if you can't even open it right um let me look at an image I can directly open so you can see that on this image I'm able to right click and see open image in your tab right why because these images here are real images they are foreground images right they are foreground do you know what foreground is a
n image that is appearing on top that is naked right they are in front dude this looks like an an image that is in France especially because this overlying this but this is a background image that is why you can't right click and open this in a new tab guys let me prove to you that it is a background image I'm going to inspect it using code tools development developer tools so you are gonna see this look at this here you can see this code here it's actually a background image so there are many w
ays you can fetch background images using a website and fetch details of those images but I don't want to blow your head here um especially with all this code code I don't want to introduce it to code because what press will press you necessarily don't have to know code so what's if you want to inspect an image on a website I think there should be some plugins that I mean some extensions that can allow you to do that let's try let's try because I really don't want you guys to going to be delving
into code code every time because that defeats the purpose of learning war press but it's a good thing if you know good so let me look for let me look for any extension that allows us to inspect any image even if it is a background image so let's look at Image Inspector we may see and we may not see um I am Jean Specto well let me don't digress too much you you can find that later I mean but I hope you get the points you will soon understand better do so some images allow you to right click and
just save them I will check the more information on the image while orders don't allow you to do that the difference is one is an image while another is a background image so this is a background image that's why I can't just simply rightly and open in another top for those images that were able to open in another top we will be able to see more information about them such as the sizes now if I right click this if I right click this and open this in another top open image in your tab I will be
able to see the dimension by just hovering my mouse on the title bar right you can see that this image is a 7 68 by 7 68 pixel image right all right so that is just that is just something about images web design now I can't just do the same for this I can't just right click this image I mean I can right click here and see open image in your tab because this is a background image this is absolutely not compulsory do but just in case you need to get information about an image that was used you nee
d to press control shift and see on your laptop once you do that this console is going to I mean this panel is going to spring up if it is your first time of doing that this thing may come on the side I mean this thing may appear like this you may appear like this this is the default appearance it is you now click on this three dots and bring it down and bring it down once you do that it is going to appear here um once it does that um let's see let's see sorry I got distracted by somebody sorry
sorry about that so all I'm looking for is where the background image was actually um food so once you click on the image itself on the image cover right this you keep scrolling down just keep scrolling down your left until you see something that looks like a yard you can see now when I click on this link it's going to bring me here so this is the actual image that was used just in case you need to get detail of the size of that image is a background image and that is how to fish them out right
you inspect it you look for a a pyramider in the under the style stop here called URL once you do that it is going to filter out and show only and and show only background image jars so you can just easily click and go to the image you can apply pretty much the same technique for any image that doesn't allow you to write the copy and paste now let's do it for this one as well control shift and C or command C shift and C if you're on Mark then I'm just going to click on the image then let me few
type by typing URL then you see it here then you can see that I can feature the background image haha that's fantastic right so now information on this image on the size of the images used normally you don't need to do this except that you're having difficulty in replicating the exact same thing that they did here which I don't think you should be on issue pretty much every image that you find on on sites like shutter stock on splash should be able to walk now next thing we want to do is create
our own hero section here what is on hero section I already explained this in our first video an hero section in the first section of the website that is intended to be Kashi and provide um a very funny morals wow how do I say that's your bad language a very pleasing experience to first time visitors now so this is for this website this is the young hero section and we're going to try to build house not even close or this tabs to avoid distractions we are not going to be using quick down t W P a
nymore so I'm just gonna click close this also close this also close this so we are on the tabs that we are going to be working with alright so um I'm logged in already so close this so what we need to just create our first page which go to pages oh oh we already have a front speech here but I don't think there's any content in it so let me just delete it and start first I'm just gonna pick on trash right no no no I shouldn't have deleted it so let me click on and do we had the own page we creat
ed it in previous lessons we created it right we created it in previous lessons but just that we did not add anything any content at all dear so um now that I deleted it I'm gonna have to go back here and set our own pitch again so I'm just gonna go to reading on that settings here yeah settings I'm just going to go to reading and make sure that our homepage goes back to this this and this because that was a picture selected because me deleting the own page as cost this to happen if I go to this
site is going to show something like this or show a post a list of post that we have on our website blog post but we want the MP to be a static page that we created which is in this case the page named home that we created here so once these things are set just go to course check that yours is still like that the consider changes then if I go back here I mean Fire Fresh is goes back to all I need to do is edit this page with elemental remember we were we edited with elements so let me just do a
ll pages and go to edit then edits with elemental alright so you see this inner part this inner and prisoner get up because I don't need it now you see this inner box stars Jack lines around shows that nothing is on this page at all every other place is wide with nothing no content here so we're gonna start by adding our hero hero section first thing we want to add is add a flex boss let's see alright first thing I want to add is add a flex post that's going to contain so just going to select do
wn right um yeah yeah so this this first line is going to contain this image that you have here but why can't we have our own customized image I'm going to go look for exactly exactly that you know you can decide to use your own image still is using the method I taught you or can't download yours so in this case I just like some creativity so I'm going to download my own image there are two ways to actually do this one way is to add a pizza inside here pizza here so that this background when you
add an image can be as tall as you want depending on the height you are set for that spacer now I'm going to show you what I mean but let's get an image to use as background first just let's go to on splash dot com where we can download lots of free images so I'm just going to do for images of two people smiling so let me just see two people I'm just types of people basically they should be smiling most people smiling their images so I think I like this image we can use this image or we can eve
n look for better images but so avoid wasting time I think this image is just about perfect so let's just click on download and I'm going to download this media not going to download this one because if you download this one it's going to download the original size which will be too big for any website if you want to work with websites you have to make sure your image is as light as possible what that means is that your image should be as small as possible it shouldn't be too small that to lose
quality it should just be about the right amount of screen size I mean that wants to view heat so just click on medium so that we can have an image that is on this usable if I want to squash this image even further so that the 5 size will be smaller without any noticeable loss and quality there's a website that I can Google this is called Tiny PNG com all you need to do is bring in the image inside this box and it is going to squash it for that by compressing and I can see that it has saved 52%
by compressing the image from 278 KB towards to 133 KB what is the benefit of using an image that is of smaller size the benefit is that your website will load faster because there will be no need there will be no need for too much data to be exchanged I hope you understand the lighter the smaller default size of an image used on the website the faster the website will load just have that in mind and just have that at the back of your mind going forward so I'm always coming to this website almos
t every time when I'm working on a website especially when I want to add images to squash the file size of that image so that's anytime I upload an image it compresses it I mean it is a compressed and optimized version forward now let me go let me go back to our headed home I mean our elemental home page I'm just gonna click on this container my aim is to add a background to this container not this container not this pizza right this container itself let me put on the navigator so you can see wh
at I'm talking about now this is Nagito and the container is the one containing this pizza right so this is the container here yeah so here is what we want to put the background image not here remember because the container is white touches both ends of the screen so you guys gonna click on this container of course when you click on the con and object here it automatically gets selected so it gives you the same effect as clicking on it directly here yeah so when you click on stuff I'm just gonna
click on style I just need to click on classic I put on choose image uh just bringing the image that we've compressed here basically these two images are the same but this one is compressed using tiny PNG smaller file size which is good for our website you don't know alright so I'm just gonna drag it inside here um here we go I'm gonna select it now you can see we have a problem the problem is that the image at disproportionately placed inside our website now we're gonna try to fix this you und
erstand um so to do that I'm just gonna click on position which means the position where the area where we want the image to show so we want center center so that the center of the image is shown right and we don't want the image to repeat itself so I'm gonna say some no repeat this attachment should always be left in its default right when dealing with background images attachment should be left in default except you know what you're doing for now I will recommend it should be left on default t
hen the display size should be set to cover so that the image is covered I mean stretches from end to end to make sure that there is no white gap inside the container now there's an issue now the center center as left sorry I'm go back to clicking the container because that is where our background image is the center center as Middit so that the image is showing the middle part of the picture which happens to be the chest region and that is not what we want to show so we are going to show top ce
nter and see now this stop center appears to be a bit better because we have some aired um which makes the pizza more meaningful now if I want to increase the height of this europana all I need to do is to increase the height of this pizza by just sticking it like this now you can see that this works a little bit right this works um it beats fine right so um that is basically how to add an image now you can see if we go to this website here yeah here this website here you can see that the image
let me see how tall our own sorry I've been opening too many of these yeah so let me see how tall our own in comparison with this is it's not that bad but if you want an image that shows much more of these people's body then you are going to look for an image that is very white so that when you set it at the background it will show it will stretch the wideness will make its compact so that the people will show very well but in this case the only option we have is to increase the height of this p
izza for the body to show another thing we can do is to go back to the container and then this position that says Stop Center we can set it to custom so that we can manually adjust the position of the background image but this is this may be too advanced for beginners and again I always like to use percentage when I'm adjusting this so that I can adjust the head so when they stretch but then they are still looking big which is not all we want so this is not the kind of image we would want becaus
e the faces are just too big for the hero section so we're gonna have to replace this image for something that is wider to some people especially beginners they may not see this as a problem but it is a problem when an expert like me is looking at it what you will notice is that these two people despite showing up to their chest level they see ample space on both left and right the reason why they were able to achieve this was the image is wider than it is taller right so let's see the nature of
the image again um let me teach you that trick are you extract background image now let me you can see that oh yeah this image is thought yeah but it has lots of white species around around the source that when you zoom in you see how some some um what let me don't bore you with all the orders things it is clear here that we need to just get another image Jesus our background image as those ones are too close they are too close to the front so now let's keep looking for more image to use until
we see that one that we want to use I think an image like this we walk but let's see we have better options um anime like this will also work because the people are not too close to the but we want an image of two people talking and smiling so let me just refine my keyword and see two people smiling now the problem I usually have with this kind of websites is that they are very poor when it comes to you know images to people now I said to people smiling is showing me a bunch of images of why I w
ant people and that is not why I want that's what I'm looking for you know the reason why we can't use this image is because of the same reason why we can't these two people are too close to the front of the image we want them a bit distance so that we have some more space around so we are looking for the perfect image if this website is not giving up what we need um there are still love order stock image websites that we can go to um an example is um an example is on splash an example is pixels
Rights pixels com okay go alright so here in pictures.com let's see if we have look so let me see two people smiling hi still don't see any good image that we can use but hopefully for keep session we find an image that we can use two people smiling in office or two people in office we just need an image of two people in the office thousand not so much to ask for right um so people the problem with this image is that they are too they don't have enough ample space for us to work with but just s
o that you are aware of it I'm telling you this normally it wouldn't be a problem especially for newbies to just go ahead and choose the image and then use it we can use this type of image but then there are not two people I want anime that has two people so we have something as similar as possible that's not what you need okay let's let's look at this so let's look at this let me click on this image and I'm just gonna click on free download I'm gonna click on Lodge yeah download select this siz
e as usual we go to tiny pixels tiny PNG com to compress the image so that it is much more smaller smaller so once I drag the image here I'm just gonna download compressed by 15% no but now I'm just gonna replace this image by with the one I downloaded from pixels this is about giving us the same results or it's I think my opinion is a bit fear is it be fair right um so let's just walk with our previous image yeah so this should always be either Santa Center or top center yeah so I think Santa C
enter is okay right it's not our bad no center center is not okay when you so let me give you top center so we can always see the offices right now this is good next thing I'm going to do now is check what nest it is to be designed now I'm just gonna go here and I'm going to add a new section here I'm still not satisfied with the image more less more further right I'm just gonna click on this so let me show you how I go here I I had it in new flex post here click on this and then this right once
I did that um no I shouldn't have done I shouldn't have done that adding new flexibles like this because we need two columns let me just do why can't I just select it then so here it is we have two columns here remember this is one column and this is another column so yeah that's why we have two columns um here now the first is the first is insert your engaging headline here and that's exactly what I'm going to type here so I'm just going to draw the heading widgets here which is also used to r
ight tie to right now you can see here the editing widgets I'm just going to type the same text that the type here so I'm just gonna see inside your editing headline here so you notice that this is too close to the picture here and there's some gap here all I need to do is put in some decent amount of padding inside this outside container here see it's city hierarchy now you can see that this is a new container here so all I need to do is put in some padding here alright so let's add some specie
s I normally take coordinates and normally take I normally pay attention to all the small details like paddings and margins is all this so that you are able to learn web design very well alright so here I'm just going to put in some decent amount of parting so let's give it top like that 20 bottom twenty right so we have enough space now let's look at this you notice that there's a background here that is not white this is white but this is like a cream color and I think we have it already in ou
r color palette alright if you are working with this website you need to increase the brightness of your screen so that you can see very well so here I'm just gonna click on this container and set the background color to do that click on the container click on style go here and click on this default color and see whether we have that list that in our list I think we have it on this is the cream color you can see we added it at the beginning of the yeah I'm serious you see how easy it is for us t
o just include is not design now you will notice that our text this test appears to be a bit cleaner than our our own and I think smaller but I think it is more important that we make it Tina so go to style go to typography and change the width like medium now you can see now that they have the same width which means the thickness of text in web design which they call it fonts width alright so now we are done with the headline here next thing we need to do copy this is actually a text and what w
e're gonna do use for this is a text widget well let me copy the text here and this is it so I'm gonna go here and go to test editor click on this yeah and I'm going to paste or copy over when you are pasting a web design from the source especially when you don't need to keep things like bored and links and all of that it's always a good idea to paste as a text so that you will not carry any juggles over right in this case we are not carrying any dragon silver but I'm just telling you it is alwa
ys a good idea to paste as it takes so that the text is clean else you will be having something like this in your text diva something like that which is dark and especially when you copy it over from Microsoft Word just take notes so whenever you're pasting paste as in month they call it based on matched out in Windows they call it pissed as plain text right so anyway you're copying and pasting from another source just be starts as playing test it out you don't copy lots of garbage codes in your
design all right so the next thing once I hear is a code to action button now I'm just gonna go to here and I'm going to go to bottom widgets so I'm gonna search for bottom and I'm just going to add it here you can see I'm dragging here now you can see that we now have our button we just need to um we just need to adjust this little bit um so first off we need to put our text here call to action notice that I'm not typing in capital letters I'm typing in small letters but there is a CSA sitting
that we're gonna sit here that will transform this automatically to small to capital letters now but before I do that let me fix the text column now I'm just going to go to normal this is the text settings normal what color should the text be under normal circumstances without any interactions to the bottom this is here so I'm just going to change this color to is he white that they use it yeah white so I'm just gonna change white sorry I'm just going to change it to white and that is why you s
ee the important color is now white now you can see that mine is in like entitled keys called action but I'm just gonna transform it now to upper keys to do that I'm just gonna click on typography yeah I'm gonna click on transform and select upper keys you don't know now you can see now that the text is automatically transformed to upper keys all right um you can do some adjustments such as improve the button test can increase this defense weight of the taste inside the button and give you like
600 so it looks better um you can see here that when you over on the button the color changes to some boards light all you need to do is to achieve the same effects you just click on this then you change the stop to Hoover then you define the text color uh sorry we don't need to alter the discolor is already good at white so boy you can just change it to white leave it as white because the discolor is white it is the background that you would change now click on this and change the background co
lor to let me first give you background color of like secondary then now increase the transparency so that when they click on it it just gives that kind of transparent vibe when the ovens you can see we achieve the same effect as this so what they basically did is add transparency to the default blue color not necessarily changing the color alright so anytime you over on it we can even add some over animation to it once you click on this over you get this over animation menu drop down you can se
e now once click on this you want to add some over and over animation my fit my best animation is flutes only over the bottom flutes of that's my best is not too shouty it's not doesn't you know seek attention too much but it's not that bad now we are done with this part right let's look at websites I personally think I personally think that this our head on this our container I mean this our hero container is to be so I'm just increased reduce the size by changing the size of this pizza right y
ou can see here change the size of this pizza and these two people are still here we don't leave them like that well it's not a good idea to make this pizza I mean the the um euro banner to be to be hell since we look ugly so let's do like um found out 10 pictures right which is about what it did here so for the authentic shoes um so we are already done with our face spots um of we are done with the hero section right no this is it we are done with the arrow section um just going to check for ho
w it loose on tablets it's not looking bad on tablets but let me just reduce this size a little bit right um so let me give you like 300 um 300 um forty right um let me give you the return to this is not bad for templates and let me see I lose some mobile and just need to reduce this piece and give you like so dirty 2:40 2:40 is fine and we have this do you can reduce this heading size for mobile I think there's absolutely no problem with it um okay so I think we good yeah the only issue here is
that this taste appears to be a bit big so I'm just gonna click on the text and go to style and go to typography and change text like 15 right so let's see how it looks on mobile yeah it is not it's not that bad so 15 PS for the text is okay right so we are done with this arrow section on just gonna click on updates and let's preview it on our homepage I'm still not satisfied with this background image and it is really really annoying so let's go back and change it this background image yeah so
we've tried some of these sides and we are not getting what we want it's time to just try shutter stock right so I'm just gonna go to shutter stock high alpha shutter stock line since I have a shutter stock license that allows me to download any image I want from shutter stock right but I'm gonna show you how you can download shutter stock images for free so that you can use it in your project right so here I'm just going to search for so people shutter stock as the largest database of images t
hat can use for designs in the world unfortunately is if is it paid platform you have to pay for almost every image that you download and these things don't even come cheap but I'm gonna show you how to download shutter stock images free of charge um let me just use the opportunity to show you now instead of using my license to download images so we are looking for image of 2 people smiling in the office so two people smiling um office alright you see we have quite a lot of images to choose from
especially this this looks about right but we have other options you can see that all these options were not present um um all these options were not present in in on splash right um out of load an image of this so let's use this you can notice that this image is very white so it will be very good for this art design here instead of this image that is not white so let's download this and I'm going to click on download normally I should be able to just download this with my license by just click
ing on medium and I'm going to download but I want to show you how to download shutdown stop images without the license or without logging in so I don't know why it's taking time let's hope it's going to download it I don't know why it's taking time is that an issue always Allah so it is already downloaded on this is it right but then I'm going to show you how to download an image for free on shutter stock all you need to do is you can either right click on you can either click on the image or r
ight click on it and finish the image but just click on it once you are here on the image page right you copy the URL where that images right when you copy the URL you go to a website called tomato dot c 0 tomato dot c 0 right you go to a website called tomato dot C 0 um I have no idea why it is bringing this in so don't go to tomato dot c 0 then if you want to download shutter stock dot images now you just go to um there are quite low websites nowadays that allows you to download shutter stock
image the tomato dot c u what I used to use as not onto something else asking me for money so don't be money just Google shutter stock downloader then select one of these results basically all you need is the link where that image is which we copy the other time right you saw it right then I'm just going to paste it here right I don't click on face image once I do that it is going to face the image and I'm going to be able to download it is asking me to to to click on ads I don't know why these
sites are made like this well let me just allow us to these sites so that I can be able to download so I'm just gonna allow us on the website so I'm gonna refresh it our aim why we are here is so that we can download our image now let me just press this image again and fetch image and when click on download is asking me to click on any ads let me just click on the ads so that it allows us to download this is a fucking bastard website so let's look for another website um let's go to shutter stock
downloader HD let me unblock us on this website and let me refresh it let me click on Shutter Stop downloader all I need to do is paste the image here alright press the link to the image here and click on get image all of this advertisements are what comes with getting distance free of charge but it's nothing is you download that you want to download image know that the image has been first you can either rightly and open the image in the new tab and see how big the image is so I think this is
okay so I'm just gonna save it right so let me just give it anything so you can just see you in web design the name you give to your images in your projects as a long if as an effect on our Google cross the website and understands it so when you are using images make sure that they are descriptive don't use and names like this right make sure that images are distributed you can use something like hero banner I mean or hero background image or you can't even describe the image image of two people
in the office sports is okay for now can just see hero background that's was the wrong spending of your background but at least it's still better now you will notice that this image is too big is 1.9 KB I mean 1,991 KB which is nearly 1.9 reason 92 megabytes we need to compress this image using tiny PNG so I'm just going to go here I'm going to track this image back here and once it finishes uploading you can see that the images to NB which is not going to be a great idea to use on our website
don't use big images on your website just never watch it so I'm waiting for the upload process to finish I think I'm having a slow internet shouldn't take more than 5 seconds I'm just gonna have to wait for it as you can see here is 42% sticking so much time for just it to megabytes image is my network issue should have finished a long time ago but let's wait for it all right good that's all just came up all at once this is around 42 KB is too big but let's use it anyways but um when you are des
igning websites generally the smaller the image is the better all this websites that allow you to download shutter stock images from you can note them in this screen recording and just go there and download shutterstalk image from bots you have to bear in mind that they will use ads you know ads rights and finish you which is not a button if you know what you're looking for so now that we have our image let's just go on replace this horrible background image here so I'm just going to change the
image choose image or here and click on drag it here now I'm gonna click on select now you can see that this image is a lot better we have spaces on either side and I mean it's still better than the previous so let me change the position to center center and see so you can see now that this image is a bit better than the one that we had before I don't know why is giving is giving a I vibes is giving a look at the guys on but it's not like it's not it's not a problem this is just for practice all
right so let me just click on updates and here we go we have our hero section setup let me see our loose on mobile I mean on tablet is good on mobile is good alright now here we go move on to the next I think I need to make this text smaller on mobile so let's see if it is on 15 PS it is on 15 PS but let me give you 14 yeah fortune is not bad for mobile for that text another thing I can do now yeah is to right click on that text and to make it the default so anytime I use a text widget this is
a default settings so your change is automatically well I don't care just see the conceive so anytime I drag in a text wij from here this is text editor it takes it in areas that defaults characteristic stuff that this one add so for example if I go to mobile you see that this size is set to 14 you can see which is a good thing so that we don't manually have to adjust our this size anymore okay now that is done let's just become updates let's move on to the next section what design is made of co
lumns and rose just know that if you are able to know that you'll be able to design any type of layout in this world sorry let me just close this let me just close this web design is made of columns and rules R O W s and columns for example this is zero this thing is zero this I mean this thing is a container this thing that has to call on here is a container I just noticed something now yeah you can see that this container is overlapping this image so we may not have the exact something that we
thought we had so you can see that this container is developing this image as you notice it from this side you can see it here it's not actually what I thought though it was hardly visible so let's go and adjust our design so this is this is not how it was designed right it wasn't designed to stretch to both hands so let's see what options we have to do this to achieve this what we are going to do to achieve this is um to achieve this all we're going to do is we would have to redo these things
so we have to I don't want to start the process of having all of this oil Viking let's just create a new temporary section up here of course our flexibles will be um here like this remember that the the first one I did this one I I just made the flexibles to have two columns and started design but because our design um we needed to do exactly what these guys did here we need to now change it so here is what we're going to do we are going to have one flex boss follow this column right then we wil
l now put in another flex another container inside of this right it is now this container that I will follow right so when you put in a container inside here you click on advanced your mood is your mood is so that there will be no gap you click on the container itself you go go to advance you remove this you remove this so that there will be no gap you come back I don't know why these things are necessary to remove gaps and then mental but that's how elemental has been it's so annoying for you h
ave to do that if you want to remove any gap it was just leave it like that to leave it on the default cap that comes with it alright to achieve these things alright so to achieve this effect here to achieve this effect here right we gonna have to make some slight changes to our design cause we didn't see it earlier and it's not our fault just the background image and the background color is is almost not visible but now that we see is you have to do it now to achieve this we're gonna have to cr
eate a new section or just click on these and let's see what I will kind of adjust our layout from these let's change it to these let me see so you can see that this is affecting the content inside this which is affecting the content inside but not the container itself that is why we need to create a new container and we're gonna we are going to do don't worry so let's do it we can't just set it here it's not going to be possible so we have to create a new container so we're gonna do this right
create this create a flex post it doesn't matter which one you pick just pick one of these two because we will not be adding more than one other element nested element inside it but I'm going to choose by default the first one yeah now what I'm going to do now is change this weight to percentage and give it like ninety right now next thing I'm going to do is add two containers inside it so that one house is this and the other house is this alternatively I can just copy this container here right
right click this copy and paste it inside here inside this empty space paste right here I think here this is it I'm going to copy the order container right click this copy and paste it here right click on this empty y space and paste it here PC here what this kind of problematic so let's take another approach the next approach I want us to take is to manually put in the containers ourselves so here we have container 1 let me put in the navigator here so you see what is going on the container one
here and let me just duplicate this container so that we have to duplicate remember we just need two containers to help us house this which are here so don't this can get a bit tricky it looks simple but it's a bit tricky to design and of course if you can do it then you've Learned something new now that we have to continue us we don't want them stacked on top of each other but we want them go from left to right so I'm going to select the model container here right and I'm going to do this righ
t but we are still getting it wrong our goal is to have one big container that now contains two small container so we are going to delete one of these so that we have one here right keep an eye on the navigator and see how destruction changes because sometimes it is always hard to keep on to keep track using just reshock clues from here so I'm going to delete this now you can see that we now have one container inside this section right in new elemental containers are called I mean sections are c
alled containers so regardless of how many containers creates inside of another container is still going to be called containers meanwhile in Old Elemental it is called sections and inner sections now we have one in a container inside of this container and that is absolutely perfect because it is that one that is inside here that will be applying this background color too and this one that is inside here the width the wideness of this one that is inside here is defined by the whiteness we give t
his one that is outside here you can see now that the whiteness would give this one that is outside is 90% we can adjust and increase it to like hundred percent but in this case I just want to give you like 90 which is absolutely perfect so you can see here but you will not you may not appreciate it now until we start to add content now I want to add two containers inside this one so that they can go from left to right so basically what I'm going to do first click on this and go to layouts make
sure that the direction is going from left to right now I can now add 2 containers so container 1 here then container to here I'm just gonna duplicate all right so now we have two containers going from left to right let me just move this here I like to move by depends from here which is almost always accurate then I'm going to move this to this second container here then I'm going to move this here why did we are so many nested containers you gonna find out the reason is because so that we are a
ble to color this container inside here and we still will not be able to touch both ends of the website just the way it was done here remember this one was not touching this end right so that is it so um that is why so I'm just gonna click on this and I'm going to color it give it the background color and give it cream color now you can see the difference between this one and this one this one is extending from left to right with no option of setting the wood the wits we can't set the wits until
we use this trick of nesting it inside another container so we just gonna get rid of this and we're gonna keep walking with this I told you the width of this one is defined by the width of its mother which we set outside now you would notice a white space inside here let's just get rid of it by clicking on advance click on this and click on this you can see the white space is gone but we still want to extend this width folder so let's see what we can do sorry I click on the escape button so we
still want to extend the width for that less you all can do so I go to the container layer remember I'm I'm I'm defining the width of what is inside this container from the mother because we are adjusting the content with not the with of the container itself but the with of the content inside the container that's why any adjustment that we make on the mother we affect the content of what is inside so instead of horse to set it to like hundred percent we give is like 98% then I think 98% is prett
y much good for will trying to achieve so you can see that we've been able to achieve it you can see that there's a white space here and I'm going to now it's time to overlap it it's time to overlap it on top of this image so that it shows 18 you are going to select the model right I selected the model and I'm going to go to advanced and I'm going to go to margin top and I'm going to give it to life 20 p x now we've been able to achieve the same thing that was done on this website do it was so t
o it was it is something that we can easily overlook but I just want you to know how to do it yourself so now you can see that we've been able to achieve the same effect now we can keep designing ahead but then let's add some decent amount of pattern inside this container so I'm just going to go here still on the same container I'm going to click on top 20 bottom 20 so you notice that even though we add a pattern which is known to be this piece inside of an element not outside is showing empty t
he reason is because the background color of the motor container itself is transparent no background color was set right so what pattern you add to it is not going to have an effect on this where you are going to add the pattern is actually inside this so that there's going to be no space so let me just remove this first you can see that the space of closed up a little bit I'm just gonna add top 20 bottom 20 this may be a bit tricky but if you follow my steps you understand it perfectly you get
it right if you follow our move things on my system what I did just just do is you get it okay it may take some some little practice for this small thing but it is ultimately going to be what it all right now that we have now that we have this um here now that we have this here we know that we have this year we move on to the next section which is a bit easy all right things are getting a bit crazy but we're going to get is sorted alright so we move on to the next section we are done with the eu
ro section let me just update it and view our site in the front and you can see that we are done with the euro section now and everything is ongoing well now the next thing we want to do is the next thing we want to do is design this section to do that we just need to do click on this as usual and click on this flexibles yeah I'm going to click on this by default you should always use the down defixed flexibles because you can still add anything on top of being mind anything you add is going to
be stacked what stack means is that is going to go from up and down so any new object I had here is going to keep going on the down but if I selected the right arrow anything I add is going to follow that direction so that is what that is the implication of that but because most of what we're going to be adding here is is on top of each other so that's why I selected the first one and if we need to add something like this we can always create another container and change the direction alright so
here we go we go to adding add the adding here are you tired of this issue so let's just copy this text and Beastie here you will notice that our own header is thick is thicker than their own and I think ours is a bit smaller than their own so we can adjust it takes sides and set it as default so I'm just gonna go to style and I'm going to go to typography I'm going to change this from 600 to 500 right but even though I think 600 is a very good idea so let's just leave it as 600 it's not most t
hat we copy um um one part of one part we can just add some more creativity which is what we are doing now so leave it as 600 I think the bolder it is the better so let me give you the phone size of like 35 to make it look big and yeah I think yeah this one size of 35 is okay but she should be showing you like 40 40 is to be so let me leave it at 30 60 so 36 is okay right so what we want to do next is center this text normally if you want to center the text itself you can just click on here and
once you click on here to center the whole body of the text including the white space around it just go to advanced then click on this Align Save Center right which is a very good approach so just do that the next thing you want to add here is this text here so I'm just gonna copy this text contents I'm going to add a text widget which is a text editor and I'm going to paste it just under here again all all you need to do is again to align into the center you first align to the center here then
go to advanced then align seal now we want to change this text right um just do this PC here make sure we don't have any extra white species you will notice that this text here yeah is white is going from here to here which is crazy we don't want it to be this white white text is usually to the eyes need to hard to read when you have to scan your head from left to right every time it becomes hard to read that is why on my own blog let me show you my one of my blogs so on this website I abuse if
you go to the blog section the way I designed the blog it is easy to read even when you're on computer so let's click on this blog for example you can see how I centered all my text so that you don't have to twist your neck from left to right the same approach is using design but you may be on our way of its most websites now they either shift everything to the left hand side and make sure that it doesn't go from left right so let me give you an example here um let's look at Washington Post or l
et's look at GQ magazine anything you look at or let's look at um let's look at Washington Post for example on the website where we talk about news what news and all of that so if you click on the articles you will see that they will never write an article from left to right it is always aligned like in a small area like you can see here because it is not easy for people to write um was from left of the screen to the right of the screen on you know it gets so that's why it takes hours like that
they always especially when they are mental origin so to to do the same thing here we are going to reduce the width of this text so I'm just gonna click on advanced and I'm going to go to wits I'm going to go to custom I'm going to change the wits to like um I think 60% is not a bad idea so I'm just gonna leave it on 50 60% right I see rule every time you are done with the section and elemental always check the mobile version and the tablet version just to make sure that they are responsive and
the IP very well on mobile and tablet so I'm just gonna include this and this um of course we don't need this for now we don't need this we don't need this so um let's keep building alright so you can see now that I've reduced the weight so that the texts are all together in one place at least so that it is easily readable now the next thing for me is to add this section I think after this section um we have to after this section we have to close this um I mean to this class so that we can move
on to the next so that we can continue in the next class but let me see how many I can do uh I don't want to rush so I don't mind how long this is going to take alright so here we go um we want to design something like this and let me see yeah want to design something like this want to design something like this um first thing you want to do is to add another section but again it is not a good idea to just be adding sections anyhow you add section when you're completely done with the section now
this section is this thing is part of this section so let's just build it as part of this section so to do that I'm just gonna add a new container below this text right I'm adding a container below this below this text regions you can see that the container has a width of its own independent of this text and this alright so here I'm now going to add two containers right two containers the container is going to hold these parts and these parts together so I'm going to add two containers so one h
ere one on the left and one on the right one here no sorry I don't mean to I don't mean to add another container see when you add another container inside an existing container you go get Billy 9 MC the shout the new one I add we enter inside the old one if we don't want this effect all you just need to do is duplicate the one that is already inside here so that we can have two parents now what we don't want now is that this two are stacked on top of each order to correct this you select the app
earance container which is the ammoda here you can see the structure here right this is the ammoda right you select this and click on layout and change the direction from left to right so now you have to continue us left and right instead of up and down which is what exactly what we are trying to do to achieve this first thing first you're gonna start by designing the inner container which is this one before you just before you do this one no to design the inner one um it's taking too long but I
don't mind just so that you are very good with web design so here um here this in this container here you are going to add this content here which is the adder so let's start before styling it let's add the adder first let's add the adder first a good thing to do would just be to copy this like this and just paste it inside here you can see right but then there are still some things you need to change um I think we don't need to change anything so it is okay like this um so here I'm going to ad
d a padding spadding is a space that you add around an element or this white space here no all this white space here all this empty space that you see around here that inside this box is called pattern so we are going to add a decent amount of pattern but let's first add the background color so that we see what we are doing so go to background let's see if we have it I think this is it yeah so let's add more pattern to it so I'm just gonna go to pattern here the difference between selecting this
to be white and this is that when you select this when you select this when you select this you can when you select this I mean sorry this when it is empty you can set the values independently but when when it is filled like this all the values will change with each other so I'm just gonna give you like 30 on all sides or let me give you like 25 on all sides we can always adjust if it doesn't go well with us but for now when I think it is okay alright so this text here um we can change to this
alright I'm going to change this but in my own opinion I think the test is too bold here it is okay for you to be bored here but let's change the weight here I just want to go to style and going to change the weight to like 500 px it is too bold to be here so yeah it is okay like this and it's time to now start adding all these things to add distance there's a widget called Icon List we've used it before but we are going to use it in a different way now I'm going to add this here icon this right
we want to achieve something like this so yeah it is just going to go to style I'm going to increase the spaces between these items right give you 15 15 PS is is a good um you know is a good idea then let's go to alignment I think these things are aligned to the center so I'm just going to select this so that the icons can go um this list can go in the center what else I think the style the text are all in capital letters so let's set the typography to be transformed up our keys now yeah um wha
t else what else what else um I think icons uh icons let me click on this icons are I don't know why I mean this be with icons to be after the taste not before but this is not letting us do this this is definitely not letting us do this um let me see um so so so so so so this is not letting us do this alright so this is a limitation in elemental um except use custom codes you can't buy defaults get these icons from the left to the right except use custom code so it has made it not possible for u
s to actually be able to continue with these widgets and I really don't want to cut corners I want to achieve the exact same thing that was achieved here so I'm going to be taking another route so watch out um what I'm about to do now normally we could have just use this icon list and it pretty much as everything we want to achieve the dividers you know the divider color here as you can see here but it doesn't it doesn't um you know support icons to be pushed to the front so to to fix that issue
let me see what we can do here um what we can do no we're not going to be using icon box I think that's too extreme to fix that issue what we just need to do here is putting a container inside here then build our tins inside alright so first off I'm just going to apply a divider up here so divide up first divider I'm going to put it here so we have the first line we can color it white of course it was white that they give it in so I've colored it white let me see how thick it is this is one pie
ces one piece so I think so let me check the width is I mean sorry style the weight is 1 PS which is the thickness of the line let me see if 2 PS works okay okay it's 2 PS not too much this people used 1 PS well let's give you 1.5 so that it is not too thick and let's give you 1.3 so it is not too thick and it's not too obscure so this is it and let's add this so the trick I'm going to use here let me first reduce this piece in this divider so I'm just going to reduce the cup here to like five 5
remember that we are designing all of these things inside the container so the trick I'm going to use here to get this thing here is to add important and set the transparency I mean the background as transparency let me just add important elemental allows us to adjust the icon position in important so watch so this is it here right and I'm going to select the icon estana I think Arrow there is an icon that goes up here let me just find out what this icon is oh let me see Wingo let me just see I
wanna see what this icon is alright so this icons icon iPhone to be a custom and and this icon happens to be a custom SMG icon as we all know we know a website that allows us to download SMG icons I've taught you this in my previous lessons so we are going to achieve we are going to do the exact same thing so I'm just gonna go to icon library no no icon I'm gonna go to upload as Reggie um please please go to dots icon. it's called icon.com so I'm going to start estana with also seen dots icon t
hat they use so I think the icon is called estana so you can see what's no um this is not exactly what I'm looking for just looks like what's hopefully if we search and search will find it the reason why I'm doing all of this is because I don't want to cut corners as I have always said so let's see if we can find that button so this is the icon we're trying to find is called the diagonal arrow yeah so so we just going to look for one that's that looks similar if we can't find it I think we just
we can just steal this people's icon right we can steal the icon let me see whether we can steal the icon all right so here it is this is an SVG icon right let me teach you a trick you can steal any SVG right if you can get the code now I'm just going to write click this copy elements right I want to steal this icon on using our design because I've tried looking for one and I didn't see anyone that quite look like what we are looking for the ones that this ones this one seems to have some rounde
d edges which I don't want and I don't want to take you to the process of designing icons and corridor so our best bet will be to steal these people's icon since we can't find it in our icon this year I can't find it here so let's do the icon I've copied the SMG code by inspecting and copies you can see here I press control shift and see and I copied it now um next thing I'm going to do is I'm going to go to an online not not critical but if you are using Windows it should be easy for you to to
do so let me just go to online CST editor it allows me to create CST files right then I can now rename them later I can now rename them later yeah I don't like all this website that I should my goal is just to look for because on my Mark if I want to create a new text text file and so is it is always hard I mean it's not almost always impossible if you know how to create text files and Mark without voila I mean without long thing like for example I want to create this file here there is no optio
n for creating a new test file except I open text editor and that is not what I want to do here so all we just need to do is you can go to any online text editor just paste the as which you code here you can see the as which you code here you can see I copied you from the source here that is how you can still as with the image you see the magic now now this is the code not the image then I'm going to click on download and save why is it not downloading now oh okay now it is downloading right it
downloaded as a txt right now that it has downloaded I'm just going to go here and I'm going to rename this 2 S2 1 as Reggie formats another way to actually create this is is opening a good editor like VS good on your laptop and doing it on Siri task as we did but this is this another so just go to just the icon dot esrigi you saying that I want to change the file extension to esrigi I said okay that is exactly what I want you will see now that we now have the icon trying to open corridor just b
ecause all right so I've downloaded the I've I've done I've stolen what I wanted to steal from this website basically the asuit code and I now made it an icon and that is it by creating the by putting the according to E t X E file then converting into an history G file by changing the file format but if you are using Windows Windows may not allow you to even see this 5 format a list of exchange in it you should look for a way to do that yourself or simply use VS code to work with the code out co
pied from this website and save it as an SVG file you can you can make you can do either way so we already have our age with your file now I'm just going to click on upload files click on this or is it icon dot as Reggie you can see I think it's pretty much what we were running away from so I mean it's just just come here and copy it just click on this icon and download it my internet is blue I don't know why just speak on download alright so now we have our icon here but you can equally use the
icon we have here to as well just saying so this is our icon that that we stood for from that website this just me teaching you how to steal stuff especially as with your icons now you see that we have the icon here now we have the icon here right like I said you can I think you can also use the icon download there from this site I think that the same I'm just put it in yeah they are pretty much the same thing anyone that you like you can use so I'm inserting here but look at this not confirmin
g the colors are not changing so let me let me use the one that we stole from that website I think this one icon does as Reggie I think this one is confirming which means that the color is changing with the text so this is a better option the one we stole from this website all right so what are we going to do the trick we are going to do here now is to change the icon position so after now you see we are getting there and we go to style we go to typography transform or pockets just so that every
thing we put in here it's going to be capital letters regardless of how we typed it now my next goal is to remove the background color of the bottom button and to make the test color to be blue instead of white now this is how I would do is the background color of the button I'm going to make it like this I'm going to wrap this to here can you see not with our button doesn't have any background color again now it's time to change the text color to blue now here it is so can you see now that we h
ave a blue text now now let's change the over color of the blue text to something like that just the same way it was done on this website when you move on it's just basically changing the um the transparency I mean adding more transparency so that when the oven is it becomes a bit transparent right but with the way this as Reggie icon is behaving can you see I think this would not be a good idea so let's increase or doesn't even make any difference to all right we don't don't really worry yourse
lf about the way the s which icons is beaving we can always visit that little so let's go ahead with our design this typography here we can give the text color you know it beats more size so let's put it on system yeah so I'm just gonna change the button text to free articles you can see that I'm typing in small letters and yet it is converting into capital letter that is because we set the transform to be upper case now the next thing on the list is to change the size of the icon so the icon si
ze oh my God there is no option to change the icon size here different problem different kind of problem from anyway so there's no option to change the icon size here but let's see if if we can try let's see if we can do something oh God I think changing the text size we automatically withervariably change the icon size but I wish there's a way to change the icon size independently so let's just do decides like system yeah so for now it is okay um for now it is okay um and let's go to style I me
an Contents Alignment Center and we can also go to Advanced Alliance of center right yeah let's see if the other icon let's see if the other icon would be big enough it's not that funny yeah so um so you know what just gonna go just gonna keep pushing so what we gonna do is for this button just set it to extra small or you don't need to set it to extra small you can just leave it like this just leave it on small you just go to style for the button pardon zero you give you zero pardon then this s
o this container here you remove the gap give you like 5 so that the contents are close to each other there will be not too much gap now let me just copy let me just duplicate this divider then bring it below you're gonna run and sweep a lot of problems here but with the airport in navigator video video for the Navigator here you can position the divider the button inside the subtract the button inside so that's in the middle of this to divide us so plugin item sometimes without the airport navi
gator is always a problem right so that is where this Navigator comes in so you're able to reorder your stuff don't get frustrated sometimes it can go outside of what you plan to do but now you go no ask what they done all right so this is it um free articles though this is not the most flexible way to do what we are doing now but the issue we had with the um with the first approach was that we could not bring the icon from the left to right and I didn't want you to use code do you get so let's
just let's just keep building let's just keep adding more so this I'm just going to select this and this so select this command or control this now that's this two these two are selected you can use the Navigator to select you can use the Navigator to select this button and this divider right then I click and duplicate them so that we have another one so 82 click on this new button then change the text from three articles to like YouTube videos remember you can just decide to type in any any cas
e that you are like what I mean by cases capitalisation of the characters or normalisation of it so it is going to automatically be capitalised because of what we did to it so the same thing you're going to do for this feminine too so we have best selling courses one on one per hour alright so you just go like this this button this divider this button and this divider you are just going to duplicate it twice so that we have enough this button on this divider this button on this divider then dupl
icates again all right so don't mind the purple something I said it's all all these are elemental box if I if I update on refresh now it should be gone so just don't don't let that don't let that um distract you so let me just refresh it so you can see that it is gone now it's just an artifact alright so we have achieved this thing now the only thing I just noticed is that the gaps between the iron is bigger than our iron how can we do this let's go to the container containing all distance and i
ncrease the gaps here so this gaps is just basically going to is just refers to the gaps between each element in the column I mean in this container so if I give you like 30 elements will be farther away from each other so let me just give you like 15 so that it looks at least something like this alright so we've been able to do this though it's not looking like this exactly especially because of the white space around but we can add that to our own as well let me close this we can add that to m
y space by adding some padding to the left and right of this container so let me add some padding here padding left give it like 50 padding right give it like fifty so you can see we have some species around here no no let's add more space around the top and bottom of this big container here so that we have space here and we have more space here so let's click on this big container I'm just gonna go to advanced I'm going to disconnect this so that I can set the values independently so I'm just g
onna go to this and I'm going to set this one to like 50 and the bottom to like 50 here now you see we are getting there let me see if they have a corner radios for this sorry they don't have a border radios it's sharp on the edges now the next thing we want to build is this one on the right here this girl here so basically what we need to do is add a container which we already done here right now that we've added the container we need to add imagine in front remember I told you imagine is the s
pace outside an element so so that you can notice this effect well so that you can notice this effect well um I'm going to first add a background image to this container but if I want to do that I need to put a spacer inside it so that to hold that space inside so I'm just going to go to here and search for spacer and then drag it inside here now I'm just going to drag the spacer as to what length I want so I think this length is okay right this length is okay and there are many ways I can actua
lly achieve this but my best way is to actually put the background on the container and not on the spacer so basically the spacer is just there to hold the container in case there's no other thing to make it big don't worry you may not understand now but you understand later the spacer is there to hold the container it's just like you using water to hold the drum so that breeze will not carry it away if the spacer was not there the moment you delete this thing here everything collapses including
the background image that you put so it is just there to hold it's like a space something to occupy a space so that the background is enough I mean shoes so I'm clicking on this container and not this pizza the container and I'm setting the background in the container not on the spacer so let's look for a suitable image that we can use in this case again I'm just gonna go to shut up store because it has the image that we need I mean lots of image that we can select from so I can see gear on mob
ile phone alright so um I'm looking for an image that is facing from left to right doesn't matter I do but I just feel like that will make more sense something like this that is facing from right to left rather um so and also I'm looking for an image that is not a rectangular I want something like this it is a rectangular okay no button so let's just look for an image where the girl is pressing phone but is facing the left from right don't want to do any kind of image editing myself alright so I
think we can use this image it's not that bad again just to show you how to download images for free on shoulder stock I will not be using my license to download this image you can right click and see copy link address or you can click on it and still go and copy this link if you right click from there and copy link address this is the link that will be copied to your clip clipboard let me give you let me prove it to you I'm going to delete this and if I paste it you see that it is still the sa
me link so most times I really don't like wasting my time coming to the picture link before I copy the address now just so you know there are two ways you can copy the link address of the picture you want to download now that I have the link copied my clipboard the next thing I'm going to look for is shorter stock downloader so shorter stock downloader and I'm going to click on this side that that I walked the last time you can also explore other websites such as this one downloader dot L e I th
ink is one of those sites that I like to use but then you gonna have to search for Shutterstock downloader here and that may take some time so let's just go back and let's use the one that has worked for us so I'm going to click on this saying I'm using an ad blocker I'm going to unblock my ads so I'm I'm just gonna click on Shutterstock downloader and you can see lots of white space here don't get confused just scroll down you see the box here and you press it then click on get image it's gonna
take a while and it's going to fetch the image for you on Shutterstock so you'll be able to right click and save the image as now you see this is the image so I'm just gonna right click and save image as just to give you the name like uh remember I told you when you are developing your website and you wanted to rank very well on s E O result pages always put in mind what name you give to your images so this one you can just see too excited kills on a mobile phone I mean using a mobile phone or
you should you can just leave it like this it's still a better name than just saying just writing the default Jaguars as the name now let's go and compress it because it would be on wise to use an image of 1.8 gigabytes inside uh an image of 2 gigabytes inside the website just that small space we needed for alright so this as compressed by 3 73% and again I just think it is not a good idea to be using an image as big as 507 k b so I'm going to I'm going to um stop using this website I also notic
ed that this website is post processing the image by refining it can you see that the hand of the girl is almost invisible it looks as if they use an e I software to improve the appearance and increase the skill to obscure it no I don't want that so I'm not going to be using that software to download images from shorter stock again in fact there is a website called istock.com let's look our message our our images there so it is called istock.com right so we're going to be using I stock.com and s
ports so let's see picture of or two or girl excited on phone I stock.com is is one of the largest um stock images website I do they are premium they are paid websites for images but then it's it's not a bad place to get images from and one thing I also like from this website is that if the size of the image you want is not that big you can easily just try click and save the image and use it in your project so in this case girl with a phone alright so you can see that the image is 29.6 k b unles
s enlarge it and see it is still not bad though I will not advise you to use an image of such quality in a real project if you want to download the I R quality version you can just copy the link address it's just the same way on shutterstalker clicking the image and copying the address from here you can copy the link address then you go to um this or so it's called I stock Photo downloader dot beat snoop.com now when I click on it it lose this website I like this website for istock images becaus
e it is straight to the point it doesn't you know it doesn't go through all those post processing and delete so you straight to the point um so I'm just going to deactivate my ad blocker so it can work now I'm going to paste my link here yeah and I'm just gonna click on this I'm not a robot and I'm going to click on download you can see how straight to the point it is for downloading stock images so let's wait for the download to complete and I don't know why it's taking so long so long I don't
know why honestly it's just to be faster than this why is it giving me options to download in Suki alright so let me see if the image is actually better now this is the preview image so it's not better so let's click on Suki all this all this stock image websites they are not so good for convenience but if you need an image you have to go through all this inconveniences of going through arts and all of that you can see that this too looks like a real image compared to all those E I images you ca
n see that the answer very clear and crisp so I'm just going to save this and I'm going to um just renamed the image to something meaningful excited excited lady but if I were you in a real project I'll be using keywords to define that image so that it can you can make meaning in the eyes of Google curlers so if for example if I'm designing them up and um the website for cars I will use relevance keywords to name that image social as cars and you know you know you know what I'm talking about but
we've got in our image now we need to determine the size the size is 194 KB it is not that bad for an image of that quality so I will not compress it with tiny PNG but I can decide to compress it with tiny PNG just to get even further compression levels so let's see what we get from 198K b let's see how much compression so we've been able to reduce it from 198 to 100 it's not so much difference so which was why I was saying we should use that so background image I'm just gonna click on this no
I'm just gonna add the background image from here just go like this and paste it here now we have uh in the image of the girl we want to use and I'm just gonna click on select now you can see how it looks after adding the image everything looks cut out but that is why we have this section here I always told you when you add a new background image make this adjustments here position depends totally on what part of that image you want to show it is usually centre centre so you leave it on centre c
entre attachments should always be left on default repeat should be no repeat except you are dealing with patterns where you want it to feel every parts possible and you still don't want to stretch it so repeat should be no repeats because we don't want our image to occur 2 times inside our same box display size should be cover always now let's see you cannot see that the image of that picture girl is showing let me just show you how it is changing in different in real time so from position cent
re centre display size cover so you can see how it is changing then no repeats of course it is no repeats next thing we want to do is to add margins around this image so that there is a space around it and it will force the image to shrink inside right so let's do that now let me add imagine around so it is going to be uniform that is why I'm not torching this so let me add imagine of like 30 p x you can see how the image goes shrink right it's got smaller in comparison to this now I'm now going
to unlink the values by clicking on this why because I need to set a negative margin on this side right I need to set the negative imagine on this side so that this image can overlap this one just the way it is on the website that we are using for for practice I mean from do from the original website here you can see how this image overlap this so that exactly what we going to do and I also notice that this image is a lot wider than this and we're also going to treat that as well so to make tha
t possible let's first reduce the size of this first container here to make it less to to make it occupy less peace versus this alright so to do that I'm just going to click on this external container here remember here the external container here I'm going to go to layout and I'm going to change this container with to full with right these notes then I'm going to change the size to like so like um no no no let's leave it at boxed right I'm going to change the size no no no so I'm going to chang
e this container to four weeks and I'm going to change the size to to like 80% and this one I'm going to go here layout I'm going to change it to full width and I'm going to change the size to yeah um I'm just leave it on the default value so let me give you like yeah I'm going to give you like 40% after I change it into four weeks and this one I'm going to give you like 60% so let me give you 60% 60% so 40 60 total of hundred and remember the reason why this is like this is because we added ima
gine which is the space outside the elements now we want to make the imagine of the left to be a negative value so that it can come and overlap part of this ah but before we do that let's reduce this piercing between these two containers so I'm gonna click on the moderate containers and come here and give you like zero so that there will be no space the only space we have is a space that are called as a result of this margin that added to this photo here and this one I think it probably needs mo
re uh probably needs more more pattern because we need some more space around here so I'm just gonna click on this I'm going to go to advanced and the pattern on the right and left will be increased to like 30 and thirty easy motion let me just give you like padding of 50 on the right and 50 on the left so here we here we go we have something like this uh but I noticed that our arm is a bit tiny than the one we have it doesn't matter though you can always adjust you can always adjust the weight
here here the width of this first container but I'm not going to do that I think it is okay so let me remove the padding on both right and left here and let's see what we got yeah I think it is okay but let me just add let me just give you like 30 then instead of 50 50 dollar I did before so this is perfect next thing I want to do now is to overlap this the reason why I've been doing all this adjustments is because I don't want this thing to overlap the text so I need white spaces around there s
o that's why I've added to I've had to put padent inside this container so now let's put this on a negative imagine so that I can overlap this I'm just going to on link this values together then I'm going to first remove the values on the left hand side so here it is can you see now it is getting closer now to make it overlap I'm going to give it a negative value which is my nostalgia now you see we have been able to achieve this just the same way it is here um just that you know let's give this
some more so let's give it like 45 45 yeah alright so I think we've been able to to get it right so let's just make adjustments to this text here so I'm just gonna go here best selling yeah so yeah the last one here best selling courses then the last one here is a one on one power hour one on 1 power power alright so um here it is we've gotten what we wanted now it's time to add some species some Britain species to the entire section now I'm going to add some padding here to the to the section
here so I've on linked it so that I can add only patterns for both both top and bottom so for the top I'm just gonna give you like 50 and for the bottom I'm going to give you like fifty so we are done with this section actually we've been able to build the arrow section today um we've been able to build the immediate section here right so here we have two sections built we continue on other sections in the next class alright we continue on other sections in the next class alright so that's that'
s just each one now and uh thank you it's been a long class it's just because I didn't want to skip any detail but I hope we've been able to get something out of this now as a rule before I end this let's see how everything looks on other devices so here it is on on um tablets I'm just gonna adjust this give it percentage and give it like on tablets give it like fifty right this one to the same thing they out four weeks change this to percentage that was 50 let me just give this one to 50 um yea
h um I'm just going to leave it like this but let me see this one was 50 this one was 50 yeah I'm just gonna leave it like this um yeah so yeah so what I can do here click on this go to advance on link this right set imagine top to be 30 imagine bottom to be 30 imagine right to be like 10 just because of this piece the balance of this piece then imagine left to be negative of thirty alright so imagine rights can just remain like that like 0 but one thing I noticed is that this this image extende
d I mean when I added when I moved it the image was not so what you can do is just you can just drag your mouse here wants to set us for wits to make adjustments to the wits so that men it can so you can see alright so you can just drag your mouse to make adjustments in real time so long as these things have been set to 4 weeks look so long as you set this layout to 4 weeks you can drag your mouse to make adjustments to the area is covers so I think it's okay to leave it like 54 alright so here
it is still not looking perfect but still a lot better and here let's see I lose on mobile now we need to make adjustments to the videos so I want to click on I want to select this one I'm having a hard time so let's use a selector I mean I'm not get to select continent so now I'm just going to remove all the negative values so I'm going to add margin on the on the right to give 30 on the right give 30 on the left then on the top I'm going to give I have no idea why this thing is is moving like
this is probably because this container size is more than it should be so let's give you like 80 or let's give it like 90 it's probably more than it should be so go to advanced layout man I have no idea I'm confused man alright um thank you everybody for now it is good on desktop so let me just read you will notice that in my tissues

Related articles

Comments