Build a Business Website with Gutenberg 2021 | Alexander Oni | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build a Business Website with Gutenberg 2021

teacher avatar Alexander Oni, Web Developer & Cyber Security Expert

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (2h 30m)
    • 1. Course Website Preview

      2:10
    • 2. Initial Setup Business Website

      3:56
    • 3. Setting up the Header

      6:20
    • 4. Displaying the Homepage Banner

      13:52
    • 5. Adding the Who We are Section to homepage

      12:37
    • 6. Adding the Services Section

      16:33
    • 7. Adding the Portfolio Section

      18:45
    • 8. Adding the Testimonials Section

      7:34
    • 9. Adding the Clients Section

      6:29
    • 10. Adding the Contact Us Section

      7:19
    • 11. Adding the Anchor Link

      2:54
    • 12. Designing the Footer

      5:43
    • 13. Building the Services Page

      10:02
    • 14. Building the Team Page

      9:18
    • 15. Building the Portfolio Page

      1:34
    • 16. Building the Pricing Page

      11:55
    • 17. Building the Contact Page

      10:30
    • 18. Page Templates

      2:14
    • 19. WebCoders Website Conclusion

      0:23
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

66

Students

--

Project

About This Class

This is a beginners class where you will learn how to build a full website for a fictional company called Web Coders. This is a company that specializes in web design services and together we will build 6 different pages using the following

  • Gutenberg page builder
  • Qubely addons
  • Ultimate addons
  • Ocean WP theme

By the end of this short course, you will be able to build a business website confidently.

Meet Your Teacher

Teacher Profile Image

Alexander Oni

Web Developer & Cyber Security Expert

Teacher


My passion is teaching people through online courses in a fun and entertaining manner.  I have been teaching online for about 3 years now and during this period, I have created over 25 different courses on different platforms including my own personal platform - The Web Monkey Academy.

What would you like to learn?

Would you like to learn how to build and manage your WordPress website? Would you like to learn advanced skills that will make you a true WordPress developer? Would you like to learn how you can establish a successful career as a web developer? Would you like to learn the basics of information and cyber security?

 If you want to do any of these things, just enroll in the course. I'm always improving my courses so that they stay up to dat... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Website Preview: All right, So welcome to this new course where I'm going to show you how to build a website for a fictional business. And the name of the business is web coders. They basically offer a web design, web development, SEO, web security services like that. So together we're going to build a website for them. And this wave here is the website you're looking at. So and I'll just give you a quick walk-through. We're going to have, of course, the homepage with the low goal, the main menu. The homepage will have its banner, but the background image right there and some texts, some animated text slide in will have the who we are sections, services section, portfolio section as well. Testimonial section. There's going to be a client's section and for some reason the logos are not chamber, but trust me, the logos are there. We're going to have a Contact Us form as well, and finally, a FUTA. And then each of these sections will have their own individual pages. So deceptive speech, for example, we'll have the services right there, will have its own page where each individual team member will have their image, their name, their title is shared by you and so on. We'll have the portfolio section here as well, and then also a pricing page. In this case, the company offers are three different packages. So we'll have the table, the pricing, as well as the features that are available or not available in each package. And then finally, we'll have the traditional our Contact Us page, where we'll have a form and Google Maps as well. So we are going to make use of Gutenberg, the default page buildup, WordPress. And personally, Gutenberg is not my favorite pitch buildable. There are two things going for Gutenberg, which is the fact that number one, it is native to WordPress, which means that it's pretty much the fastest page builder that you can work with. And second, even though Gutenberg at this stage still can compare with the likes of elemental or BVA build our div ID. They're still making plenty of changes and I do believe that very, very soon they will be able to compete with the other page builders. So those are going to make use of the cube Lee add on the ultimate addons for Gutenberg as well. And we'll also make use of the ocean WP theme. So without whistle anymore time, Let's get started. 2. Initial Setup Business Website: Let's get started with our business website and there are a few things I want you to do. First of all, you will find for the resources attached to this particular lesson, you will find a zipped folder. I want you to download a zip folder, extract the contents, and then add the images inside of that content to your media library. You should see images like these. So please go ahead and do that 1 first and then second. I don't want you to create five different pages. So you're going to have the contact page, the homepage depressant page, the services page, as well as the team page. And let's actually add one more page. So let me go ahead and add the portfolio portfolio page. So in total we're going to have six pages or portfolio. I'm just go ahead and publish that. And there you go. So you should have our six pages. Then let's come down, hits you set hence go to lead in. And then we're going to change our homepage displays from latest post to static page. And then we're going to choose our homepage to be home. Okay, Let's go ahead now save our changes and awesome. Next we're gonna go to our parents, go to themes. Let's go ahead and add a new theme which we're going to use. And that theme is going to be the ocean WP theme is to one right here. I'm going to go ahead now to install the theme. And of course activated the fin. Now when you do that, you will see the recommendation to install another plugin called Ocean Extra. It's basically an Atom plugin to help our customers the ocean WP theme. So let's just go ahead and click on begin installing plugin. And now from here just click on Install. And so you may see these kind of error message saying the plugin generated on expected output. Just look outside, okay, just click on cyclic on anything. And then if you go back to plug-ins, you will now see that the plugin is now our active cell. I don't know why the add-on dose that sometimes, but it's okay, not a problem, but it's going to go ahead and close these skip setup. And let's go ahead and add two other plug-ins. Now I add the first one here is going to be the cube lead plug-in. So it's cubically Que Li Que barely. That's a very, very interesting spell. And so it's the one that IATA Gutenberg blocks and Page Builder capability by m.com. I'm going to go ahead now to install that and then activate the plugin. And then one more plug and we're going to add will also be the ultimate add-ons for Gutenberg. So it's going to be Gutenberg, all teammate add-ons. I believe that's the name of the plugin. And it's the one right here by our brainstorm force. Okay, we're going to walk with this one as well. Let's go ahead now to install the plug-in. And they, you go. All right, so that's it for the very first part of this video. Just a few things. Once again, make sure that you've extracted all the images from the zip folder, attached This video, upload them to your media library. Go ahead and create these six pages. Change the radian sentence from homepage. There's blogposts to aesthetic paid in and said homepage to Home. And then finally go ahead to install these two plugins, the acutally advance Gutenberg, gutenberg blocks ultimate addons for Gutenberg and I'm also the ocean extra, our theme when you install the ocean WP theme. So that's it. Thank you for watching. I will see you in the next class. 3. Setting up the Header: Let's now move on to set up the header and we're going to do a lot of editing. The first one we're gonna do is we're gonna go over to menus right here. And let's set up our main menu. So main menu, I'm going to set the display location two main right here. Let's create our menu. And then we're just gonna go ahead and add the pages right here, portfolio contact him price in and then services. So five pages, we don't need to add the homepage menu item because the logo will be the link to our homepage. So I'm gonna go ahead and click on Add to Menu and let us rearrange this or we have our team. First of all, we can have served actually, let's go with services first and then team portfolio price and then contact. Awesome. Alright, so let's go ahead and save our menu. And if we go to page okay, so this is exactly what we have plenty of work to do. Let's go ahead and I'll click on Customize button right here. Or you could also get there by going to appearance and then customize link right here. Okay. All right, so we're going to see the options available for ocean WP the first and we're going to do is to go over here to our site identity. And let's just change this from my Wordpress to web coders. And the tagline, we build, amazing websites. Okay, that's going to be our site identity. Let's click back. And now we're gonna go over to the header options down here. So we have header. Let's click in there. And then in general, take a look at this. Okay, We're going to change the 17s in here. But before we do that, let's actually go ahead and add the logo first of all. So I'm gonna click on the logo option in here, and then click on Select logo, go to media library. And then you should see this web codas or logo right here. Click on Select. And then let's just go ahead and highlight everything. So the entire images cropped. Let's go ahead now crop the image. And there you go. So you can see right now that it is massive. So what we can do right now thankfully, is that we can set a maximum width for the logo. And I'm going to go all the way to our 150 pixels, k. Let's now go back. Let's make some changes to the menu right here. If you click on menu right here, and I'm going to get that many options except the links effect right here, which you can go with different kinds of effects. But I'm gonna, I'm gonna go with the, on the land from left. So what this does is that when you hover on your menu items, you see you now have that beautiful effect where you have the blue color underlining the menu item. Pretty cool. Okay, Let's go back, back here. And now from here I'm going to go over to type pornography. Okay, we want to change the way the menu items look like, okay, Right now they're a bit too small, so we're going to make them bigger and design them as also, I'm going to click on typography and invited here you'll see main menu option and clicking there. Okay, for the font family, this is of course very, very subjective, but I like months. Surette. So let me just look for Montserrat around here. All right, so here it is, Montserrat, okay? And then for the text transform, we're going to go with our capital, uppercase, uppercase. And then for the font weights, I'm going to go with 500 and then the size. Let's go with 15 pixels. Okay, so not too big, not too small. I think there should be pho might change that later. But let's keep that for now. I'm going to click back. Click back again. All right, Now you're going to see we have this particular place, your content here section. We need to get rid of that because we don't need it. So you're going to click on top bar right here. Go to general and invite here. Just simply disable are the top bar. We don't need that. Okay? However, when you do that, you will notice that we now have we don't have any space in between the logo and the top of the pixel when to add some padding. So to do that, I'm going to click on back, click on back, and then go over here to header. Okay? Go to general invite here where you have padding. Let's add some padding to the top ten pixels, okay? And then we will also add padding for the bottom as well. And McClelland, 10 pixels also uncheck this our head, our border bottom, we don't need that, so I'm good to go ahead now and on check that one. And fine. So again in somewhere I'm going to click on back right now. And then let's also get rid of the Search button right here. We don't need that, so I'm gonna go to menu. Let's scroll all the way down here and you should see search icon. Just go ahead and choose a style to disabled or can we don't need the icon showing up? And there you go. Two more things to change before we round up. I'm going to go to the general options right here, general options, NLS go to general settings. Ever going to change the layout because for most of our pages, it's going to be full width. Okay. We don't need a left side bar or your right sidebar whenever like that. So let's just choose fool with, okay, and then let's click back OK. And one more thing to change would be the page title right here. And we're going to disable the breadcrumbs. We don't need bread crumbs. So let's disable that one. And there you go. All right, I'm gonna go ahead now and publish our changes. And la, la, okay, So we're getting there the Gemini next video where we will now begin to walk on our homepage tenant off with the homepage burner. 4. Displaying the Homepage Banner: Welcome back. So now let's begin to walk on our homepage, starting off with the homepage banner. And just so you know exactly what we're trying to accomplish, this is exactly what we're trying to get at. So you see right now we have the background image right there. We have a headline here saying, don't just create your website. And then we have like the animated, our headlines right here. We also have a C, our services, our button in here as well. So quite a lot of work to do. Uh, let's get started. So the first we're gonna do is we're going to edit our homepage obviously. But before we begin, add in blocks with our Gutenberg down here where you have the ocean WP settings. We're going to make some changes like if first of all, the content layout, we're going to go with 100% full width. And then whatever you have title. And then you can just go ahead now. And the XAML are the page title because we don't need that. Now from here, we can begin to add our blocks. So the first one we're gonna do is I'm going to click on the Plus button right here at block and just click on browse. All the one we're interested in is going to be the cubically role. Okay? It's a bit more sophisticated than the row block that you do get a good number by default. So I'm going to click on a roll and then we'll just choose the single column layout. Click in there, and there you go. Okay, Now, over here to the right, Let's first of all go over to background, okay, click on background. Therefore, the background color. We're just gonna go ahead and choose black. But then we also go with the background type, click on Image. And then for the background image, we're going to choose this one from our media library. It's the one right here. Let's go ahead now and select it. And there you go. Okay, Now, content position, go for middle. Let's cool down, down here as well. And now we want to enable the overlay, okay, so I'm going to enable the overlay right here. Let's cool down. For the overlayed type, we're going to go with the gradient. So gradient, and by default you'll have this green and blue Options. Click on the circle right here, the green circle click in there first of all, okay? And then I'm just going to go ahead now and choose like kinda like a shade of black down here. The up, it's the one I have is a 090808. That's the hexadecimal value if you want to use the exact same color. And then for the second one right here, I'm going to click on this circle right here. What I'm gonna do is I'm going to click on these arrows here to change one to the RGBA values. And what I have here is a 5.5. I'm going to go with our 46, go with 90. And then I'm going to go with our 0.690 points, 69. And there you go. All right, so these are just my own personal favorites. I mean, you can go with any shade of color that you want to use with your overlay. You don't have to use the exact same. Wanted them using. One more thing we should do actually is for the ocean WP settings. Go over to your header, okay, and then he went away. You have header style. Go with the transparent. Okay, this will now allow us to have the bag and image overlapping, the menu and the logos. I'm gonna go with transparent. Let's go ahead now update. And let's just see what we have right here. And there you go. Okay, so we're getting there, We're getting there. Still a long, long, long way to go. But we're getting there. Okay, let's go back now to edit the page. In one more thing we're going to do for the role is to actually set a height. Okay, so while your row is highlighted, go to the height dimension right here. You see it's set to auto by default are going to click in there. We're going to choose Custom. And then the minimum heights I do have in my book right here is going to be 700 pixels. So this will make the high, the low a bit taller. Okay? So from here right now, we can begin to add our headline Are we don't just create your website and m can also add our animated texts as well. So first things first, right here, just hover inside of this section where you have the plus button right here, click on it and then click inside again. So basically you double-click and I guess so you click ones, then click again. All right, so what we're looking for right now is going to be the head. I'm just gonna I'm just gonna click on Browse all. And where is it says the one-way care heading. Okay, we're looking for the head and block does just click inside. And then from here, I'm just gonna go ahead now and highlight this text. And we want to add, we don't just create your website. So I'm going to see, we don't just eat your website. And then you can see it, but it's right there. So let's make this a bit legible. So I'm going to go over here to style my head in. And of course, the alignment we're going to go with center. Okay? And then for the heading click inside, and then for the color. I'm just gonna go with plain white. Okay, just played whites are the font size. I do have 40 pixels, so we don't just create your website. Awesome. I began in some way. Next right now would be to add the animated text right here. Same with design proposal, things like that. So what do we do? I'm going to click on the Plus button right here, okay, Plus button to add a block. Let's click on Browse all. And then we're looking for animated headline which is around his somewhere. Where is it? Down here, I think. Okay, it's all right here. Animated headline. Okay, animated headline. And there you go. So it's put it above the main headline, but that's okay right here where you have the down arrow, just click into two movie down. Okay, fine. Now, what do we want to add more to add several pieces of text? The first thing we're gonna do though, is in other forced to be able to lead and see what it's saying. Let's first of all change the headline level here from age four to an h2. Okay? Texts before, make this one to say we, okay, and then text after gonna go ahead and remove that. Okay? Now for the animated text, this exactly where we can add the text we want to use delimiters, remove all of those. The first one I'm going to say is design a pro proposal. How do you spell proposal, proposal? And then I also have our plan, your strategy. And then one more, engineer, a solution. Alright, then from here for the color, I'm going to click on the color right here, button color. And then the actual color itself, you just click inside. And let us go with this blue option right here. Okay? So that's what we have. And why LA, okay. One more thing to change, I believe is going to be the initial. I'll we bottom you can see right now it's in black. So to change that, let me scroll down here to where you have design. And then vide here, okay, so here we have color. Let us click in DEI, change that one to white. And then we can also design and click on the topography button right there to enable it. So we enable it. And then we can change the font size to 40 pixels. And la, la, okay, one more thing is right here, okay, just above the animated texts, we can change the alignment from left to center. Let's go ahead now and updates. And there you go. Let's go ahead now view the page. And okay, so we're getting there. Still a few more things to change. You can see there is some space between the R. We don't just create your website and then the top of the header white here. Before we handle that, we still need to add the C services button. Okay, so let's go ahead and add that one. Let's click on Edit page and k. So let's go back down here. I'm just close this one and let's come down here and let's click inside. And then once you click on any one of the initial blocks, you'll have this plus button pop up again. Let's go ahead now and add the new block, which is going to be button. It's the one right here. Button was clicked in there. And we'll just say see in caps lock C, services, K, and there you go. All right, so right here where you have style, let's click inside. And then for the button you are, we'll, uh, we'll handle this one later, but limiters go ahead and type in our services. I will show you what this does is basically what you call an anchor link. The point here is that when they click on the CR services button, it will take them down to the Services section, which we will build later on. So we'll talk about this much later, don't worry. So services and there you go. So sides as well outlined here. I'm going to click on the button size to go with a custom size. Okay, and then right here we have the options should add custom padding. All right, So instead of go with the global values, I'm going to go with the costume values. Okay, so click on the button right here for custom values. And now I do have my values in here. The first one here is going to be 11 for the top, and then 144 bytes. And then I have 11 again for the bottom. And then finally I have 16 for the left. And that's exactly what we have. Okay, One more thing is going to be the icons right here, where you have icon, you click in there. Let's cool down. Enable icon, scroll down again. And this is the one we're looking for. The one pointing down. And then we have some other options in here position is to divide the gap. Mine is seven, but of course you can make this one 8 or 9. It's really relative, but I'm gonna go with seven. Okay, one more thing quickly is that you will notice that there is plenty of space between the animated text and then the C ourselves, this button white now they're right next to each other. So we're going to create some margin, we're going to add some space. And so in order to do that, make sure that you are highlighting the column holding the sea or services, our button. And in from here you will see this button right here called spacer. Just click on spacer. And then right here you have the top option. We're going to go with 110. Okay, so that's quite a lot of margin, 110. Let's update. And let's view the page. And there you go. So it's almost there. At least we have almost the same kind of space in however, the week we don't just create your website. This main headline in here also needs some more space as well. So let's go ahead and add the space for this headline. So I'm going to click on edit page one more time. And then click on the column right here, and then click on the spacer. And then we have for the top here as well, we have 170 pixels, that's for the top. Let's go ahead now to update. View the page one more time. And voila, there you go. One more thing. One more thing with, if not finished, we need to change the color for our menu items right now you can see that kind of brownish minutes change them to white as what we have in here. So Let's do that. I'm gonna go back to customize. And we're gonna go over to the topography. Click on Main Menu, and then app's not main menu. My apologists for that one, it's actually going to be the header, header and then menu and invite him, Apollodorus, right here you have the link color. So right here we can go with whites. And there you go, it gets a bit confusing when you have so many options for customizing the way your website looks like. Okay, and there you go. I'm going to go ahead now and close this. And voila, we have successfully created bana. And of course we might still make a few more changes as we progress. But for now we have a logo. We have our menu items, we have the bag on image or idea, we have a main headline, and we also have made a headline. And finally, we have C. Services are bought and thank you for watching. I will see you in the next class. 5. Adding the Who We are Section to homepage: Welcome back. So let's continue. Next section we're going to build will be the who we are section. And as you can see, this is exactly what we're trying to accomplish. We do have basically a two column, row. And on the left we have a title, who we are. We have some text and then we have the meet Tim bottom which ideally when clicked on, should go to the Team page. And then on the right we do have this image. And there's a cool effect when you hover on the image you have web code is and the tagline, a close and experienced if Tim are popping out. So let's go ahead and build this out. So I'm gonna go head to the edit page. And I'm going to scroll down. Let's refresh the page to load or scroll down here. And voila, alright, so I'm gonna click on the Plus button right here to add a new block, which will essentially be our row. And I'm going to choose the two column layout here, 5050. And Okay, now let me just do something real quick. Since we are walking full width and incense right here, you have like the background going full width and things like that. You can just come over here. Emma, you have the alignment, the change alone too. I just click in there and just go with a full width. Okay, So that way we have more space to work with. And you can even do the same with the very first row in here as well. So we have kind of like a better representation of what it would actually look like are on the front end. Okay, let's move on. So let's just go ahead and handle the second column first because it's much easier is just an image and then it cool animation effect. So I am going to click inside of the second column right here to add a block click inside again. And I'm going to go to Browse all. And I'm going to choose the image block on the acually it is right here image. So I'm going to choose that one. And from here, I'm going to go over to the image section to now insert our image. And it's the one right here who we are with all the fists pumping. Select that one. And so the quick change you should make right here is switched from simple to blurb. Blurb is the effect where you now have the headline and anticoagulant. Okay, So we have blurb. Let's make some changes right now to how it looks like. So I'm going to scroll down here. And you have, of course, the URL, the old text, but we don't need to walk with any of this again, it's gonna come all the way down here to where we have the overlay down here overlay. All right, so it's enabled now for normal, that is without hovering, we're going to disable it. So we can simply disabled by those clicking on the clear button right here, so we remove that effect. But then when we hover over the image, we want to have this kinda like a doc effect or cannot be blue effect that we have in here by default. Okay, so I'm gonna go in here, switch to hover right here. And I'm going to switch from the background, which by default is set to gradients. Switch that to just the vehicle up our call. And then we're going to now choose the colo, which should be something around blackish in a way. So now we'll do right here is I'm going to drag the first button all the way down here to read. And then let's just choose something around here. K That may be a bit too dark blue to something over there. And actually that's not too good either. How about something up here instead? Okay, check this out. I'm going to drag the second button right here as well. And then we can drag this one down here. And there you go. That's the effect we're looking for. So if you're interested in the RGBA values, it's basically just the 31, 29, 29, and then 0.3. Of course he doesn't have to be exactly like that, but this is close enough. All right. Next thing right now would be the actual headline, which is web code is and then a close and experienced dev team. So we're gonna do here is we'll just click inside. We change image block to web coders. And then the tagline will simply be a close and experienced. The IV team. And let's remove with Ghibli image block. And there you go. Okay, so we're done with the second column. Let us now concentrate on the first column. And this is where we have to do some work because again, we, we basically have three blocks, will have the block for the headline who we are, a textblock for our two paragraph text block. And then the meat art him bottom. Let's first of all add the header. So I'm going to click inside the first column, click inside again. And we'll just choose the head and block right here. And we're going to say who we are. Is ion capitalists and capital, alright, who we are. Now notice that we do have this nice on the line. It doesn't feel the exact width of the headline, it just fills W and H. So it's kinda like a small border. Now how do we do that? It's actually pretty cool. I'll show you how to do that in just a second, but let's make some changes to the actual headline. So the first thing we're gonna do right here is the head in itself. We're going to go with a font size of 44 pixels. And then the weights, I'm going to go with 300 pixels, so it's not too dark. And now for the actual line might get a separator. I'm going to come all the way down here to a, you have the separator, okay, and then the style, you're looking for, a line, all right, and then once you choose line, we can then choose the actual color for the separate or by default, you have this darkish blue color. But what I have here from my notes is going to be five cc and then five EB. Okay. That's going to be the color for our separator. And there you go. Now, for the other values, the stroke basically will represent how thick the border or the separator will be. I'm just going to stick with three and width of course, will dictate how long the line would be. Lived. This on 60, which was the default. Okay. And then we have space in which you will, it doesn't really change anything unless you go all the way down here to like 40 for anything above what's before you start to see that you now have more space between these separate or, and the actual headline. But we don't need any of that. So I'll just go back all the way to, let's say 20 or 19 doesn't really make any difference. Now position, we'll switch this one to the bottom. Okay? And there you go. All right, Next, right now is going to be that textblock. So I'm going to click in here, you have the plus button. Okay, let's click in there. And now I'm going to go to Browse all. So we're looking for the advanced text block right here, advanced text. And I'm going to remove the headline. We don't need that one. And I do have my notes right here. So let me just grab this notes. Real quick copy. Let's go back to our browser. And then right here, I'm going to paste the text. So I just copied. And there you go. Now of course you can choose to use the exact same text if you want to, or you can just lose, use a Lorem Ipsum for some dummy text. Now the last thing we need right here is going to be the actual meat Artin bottom. So let's do that. I'm going to click on the plus button down here to add another block. And you will see it right here button. We click in there. And then we'll say, meets our team. Meet our team. We need to make some changes so we'll go to style right here. And the button you are, well, I'm going to say forward slash. And then services. The reason why we're not using anchor links inhibits because when somebody clicks on this button, we want to take them to the services page. Okay, so that's why we're not creating any uncle link in here. Alignment is going to be to the left. And then the actual design book, we need to change the background color to the shade of green that we have right here. And from my notes, the shade of green there, exit there was a small value right here is going to be five bb and then 700 be left the shade of green that we have. And now when you hover on the bottom, you can see right here it switches to like whitish blue. We don't want that right here you can see it just, we just selected that shade of green when you hover on the button. So to make that change, Let's go back to our design switch from normal idea to hover. And now right here, we can now click inside to choose our color. And let me just check my notes for that one, we do have a 0, C 7, 8, and then 1, 0. That's going to be the darker shade of green that should appear when the user hovers on our button. And there is now you do have a border color in here which we can't be moved. So just click on the clear button my day to remove any border color. Same goes with the normal design as well. Just come in here and clear the bada colo. We do not need that. Let's go ahead and update the page and let's see what it looks like. I'll scroll down here. And we're almost done. As you can see how, however, there is one major difference between what we currently have and demo we have right here. Over here, you would notice that the meat or Tim Burton is smaller. But also the height of the first column seems to be aligned perfectly with the height of the second column. Over here, it's very obvious that the first column right here, the height is a bit taller. So there are a few more changes we need to make. And let me show you what they are. We're gonna go back to Edit Page. The first major change we're going to make would be to increase the actual width of the entire role. To do that, I'm going to scroll down here and just really click outside in here, make sure that the entire world has been selected. You can see right now, we've chosen the entire will hold in these two columns right here, what you have contain out with I'm going to add those one hundred and two hundred and forty. So we're going to make the world a bit wider. Next, the first column right here, click inside. Make sure it is the first column and not just the who we are sections. So the first column right here, everything. We're going to change the width from the default 50 percent to 55 percent. The final change we are going to make would be to deal with the button right here, make it a bit smaller. So I'm going to click on the button block and go to style. And why care you have size? We're going to go with the custom size. Click inside. And let's switch the padding from the global to customer values. I'm going to click inside. And now I do have my values in here for 11, 17 for the parent to divide, 11 for the bottom, and then another 17 for the left-hand side. And there it is. Let's go ahead now update. Let's view the page. Scroll back down here. And that is it looking, looking much, much better, much closer to what we currently have right here. There's just a few little differences, but it's okay. I think we've pretty much gotten them all we needed from this section. So that's thank you for watching. I will see you in the next class. 6. Adding the Services Section: Let's continue building the homepage. And what we're interested in right now is building the Services section. And this is a bit more tricky than the who we are section because now we're dealing with a situation where we have three rules instead of like a main roles. So basically you have one row for the services headline. We have another row that has two columns. However, each column having to info boxes. And then finally another row that will have the all services button. Let's go ahead now to get started, I'm going to scroll all the way down here to the back end. And let's go ahead now and add on new block, which will be the role. Now this is going to be the major role containing all the other blocks, all the auto rows inside of it. So I'm gonna go with a one-column layout. And let's just do this right now I'm going to make this one full width. And now we can add the very first block, which is going to be our headline. So in here, but we have the plus button. Let's click inside twice. I'm going to add the head in. And they hadn't right here is simply going to be services. Now here's the thin. These services headline right here pretty much shares the exact same design as the who we are headline up here. So rather than us having to go in here and add the font size and so on. While we're simply going to do, is we're going to go to a who we are headline. Click on it, and I'll right-click. And now you will see copy style. Copy style. Go back to our services. Click on Services. Now right-click and then simply paste the style. And there it is. Now the only thing that I didn't copy was the position of our border. But we can change that a very, very quickly. Let's go over to style. Align the services to the center, come down here to separate all and then simply switch the position from top to bottom. Okay, Awesome. Next now is going to be the info boxes section. How we're gonna do this. Well, check this out. I'm going to go in here and I'm going to click on this plus button right here. Now, you may already know this if you've been isn't good the book for a while, but just in case you're new to Gutenberg. The difference between these first Plus button right here and then the one down here, is that this one will add new blocks to our existing role. This one down here, we'll add blocks to a whole new goal entirely. So pay attention, don't make that mistake because it's very easy to lose concentration and just add blocks to do long roll. So let's go back in here. Add a new block. Now it's going to be the column. All right, I'm gonna go ahead and choose a role. And it's going to be the two column layout 50 by 50. Let's select that one. And now we can begin to add our info boxes. Before we do that, let's make some changes. In here. I'm going to change the alignment again to full width as well. And then for the pad and use it by default, we have so many pixels of padding top and bottom. We're going to reduce that a little bit. So let's go back to the background right here. So not bag, and we're gonna go to Advanced right here, but you have top 70, let's make it 40, 44 the top and then 44, the bottom as well. Cool. Now let's go ahead and add our very first info box, which will be the one for web design, a modern approach and so on. When I click on the Plus button in here, click on it again. Now, the, the block we're looking for is what we call the info box. I can just search for info. And it's the one right here. Info box by equitably, I'm going to choose that one. And then immediately right here you have the layout. We're going for layout two because it has the icon on the left-hand side and then the text by its side. So let's go with layout 2. And then the very first headline here is just basically a web design. I believe it's web designers, it's web design and then the text lambdas grab my Notepad file. Actually, I don't need the Notepad file. I'll just copy this directly right here. Copy, go right here. Alumnus, paste our text, okay, over here to the right, this is where we can begin to customize the info box. But DOM with the layout, I'm going to close down and let's now go over to the media. And we're going to make some changes. The very first icon, which is the one right here, is the Feather icon. So you can search for the icon in here, search for feather. And it is the second one, I believe. Okay, Thus the first ones we're going to make next right now would be the icon size. Let's go with a custom size. And I do have 50 pixels for the Custom Size. We're making it a background, so I'll keep them on as it is there. The bag on size will be 40 pixels, make it just a little bit bigger. And now for the call right here, I'm going to click inside. And let me check my notes. I do have five D, and then E, F, F. That's going to be the color for the icon. And now right here, notice that we have the fill color. We don't need the fill color. So I'm simply going to just remove clinic background color. We don't need that. However, notice when we hover on it on the icons right here, it changes. So we're going to have to make that effect. So I'm going to go over here to HAVA. And now let's add the background color. Right there. The color is going to be white. So it's going to FF, FF, FF, FF. And then the background colo will just be the opposite, which would now be the initial color. Which is the five, D, a, E, F, F. And if it is, and there you go. So now that is the hover effect by day. We don't need a border color by the way, so I'll just go ahead and clear the border color. We don't need that. Let's go back to normal. Let's scroll down here. Make sure radius is 65 our space, and we're going to increase the spacing a little bit to 30. And there you go, we need to add a box shadow. You will see the effect of the box-shadow very, very soon. Bullets just go ahead and activate the box-shadow. And what I have right here basically is going to be 0 for x and for y the blur is 24. And there it is. You're actually beginning to see kinda like the effect might now with the box-shadow, you'll see bit more of it once we add a background color to the main section. Okay, we're done with the media. Let's now jump down to the Type tool. I'm going to make some changes in here. First of all, the font size here will be 17 pixels are the font family. I'm actually going to go with a new one right here, which is going to be the Source. Source Sans Pro. Not sure why. Okay, there it is. Source Sans Pro. Now the weight is going to be 400. The letter spacing, we're gonna go to advanced topography. Click on the button right here for advanced topography. And then let us basically be 1.5. And there it is. And one last change here is going to be the color. So let's click on it. And the color I do have here is a shred of black. Brownish black is going to be 50, 50, 50. And there it is. And we are done with the title call. Let's close this. Let's come down here to content. We don't have a subtitle, so we don't need them. Now content, the font size, we're going to keep that one on 16 pixels. The font family, we're going to go with Source Sans Pro as well. And then the weights will be the same of 400. And then right here where we have padding, I'm actually going to go ahead and add some padding for the text. So I'm gonna go first of all with 20, and then let's go with 15 for the rights of 15 for the bottom as well. And then for the left-hand side, we'll go with 0 for now. And we are done with the content. Next right now is going to be the background. Now check this out for the background, we're actually going to add a white background color. I don't know if you can't see well right here, but you would notice that the backbone of our info boxes is actually pure white. While the other bag on the one for the main section is kinda like a vanilla kind of colo. You'll see that in just a second. Let just go ahead and do this real quick. So the background color, I'm going to go with your regular color in here. And then the background color fill color. We're going to go with the classic white, FF, FF, FF, FF, and VOIP law. All right, I'm going to come down in here, add a box shadow as well. And what I have in here is going to be 112. And then one last change we're going to make white here will be for the radius. Can you see right here the edges? You can see that kind of a little bit circle or just a little bit That's basically the border radius. So we're going to come in here and I'm actually going to choose 6 is a bit too much. I'm going to choose 55 is my border radius value. That is it. We don't have. A button. We do have a button but it's not a bottom for the info box is just a standalone button. And there it is. I'm going to go ahead now and updates our change. Let's view the page and see what we have. And there it is, Okay, we're getting there. Now. The major change we're going to have to make right here is on our demo page right here you can see that the background of our info boxes, it's very, very visible. You can see that the background is different from the main background of the entire section. Right here. It kind of blends in. You don't see the background of our info box because the color is this exact same as its own parents are sections. So what we're gonna do right now is we're going to go back in here and we're going to adjust the background color for the main section. And it's going to be the very first row that we added. So it's the one right here. Make sure you're clicking outside right here. You can see this is the main rule right now, occupying or holding the services blog as well as I info text block. We're going to come down here to background. And now for the background type, we're going to go with a gradient. So we have our two colors again, the first column in here going to be f of 0, f 0. Second color will be pure white. So let's go FF, FF, FF, FF, press Enter. And now the last thing we're going to change is the gradient angle. We're just going to go all the way to 0. And there it is. I'm going to go back in here, updates. Let's view the page. Scroll down here and there it is. Now you can actually see the background of our info box because we have adjusted background color gradient of the main section, and that is pretty much it. Now the good news here is that we don't have to do the exact same thing for the remaining to be in full boxes. At this point, we're pretty much happy with the adjustments that we've made were very, very satisfied with the way our very first info box looks like. Okay, so all we're gonna do is just to simply duplicate that box. Now to do that, we're going to go back in here. Let's wait for the page loads. Scroll down. Now check this out. I'm going to click inside of the info box. Okay, make sure everything is highlighted in here. Go away. You have your three buttons for options. And then just like that, duplicates, and there you go. Now we have the second info box for our first column. But how do we get one of these info boxes in to this second column right here on the right. It's favor a very easy, I'm going to go back in here. Once again, duplicates. So now we have three, however, the third one, right away you have the drag button, just click hold drag, and then just drop it inside here, make sure you're white and you have that plus button. And there you go. And then for our fourth and final info box, what are we going to do? Simply duplicate. There it is. Let's go ahead now update. View the page. Scroll down here. And that is it. Now all I have to do at this point would just be to adjust the headline, the text, as well as the icons for the remaining three boxes. So I'm gonna pause the video and do that right now. Welcome back. And as you can see right now, I have made the changes to the icons as well as the text for the remaining info boxes. Now if you're interested in using the exact same symbols, I can tell you what they are. This one right here for web development is the code, code symbol. This one right here is the middle symbol, and then this one is going to be the lock symbol. Long-lasting we need to add is going to be the all services button. So let's just go ahead and do that real quick. Let's go back to edit the page. Let us scroll down all the way right here. And I'm going to click just directly underneath is the second column in here. So we can now add the plus button for a new block click in there. And we're to go with our button. And it's going to be all services. Just going to give you changes in here, the style right here, the bottom you are well, forward slash and then services. And then we have the design, the color right here. Let me just check my notes. It's a shade of purple. And from what I can see right here, it's going to be a D5 and then DDB, that is the shade of purple we're going to go with, we don't need a border color. So I'm going to clear that how ever, once you hover on the bottom, it should change to a darker shade of purple. So let's do that. I'm going to go over to the Hover section in here. Fill color. We're going to go with a darker shade of purple, which is going to be six, B1, a nine, a0. We don't need a border color as well, and just remove that one. And there it is. Last change is going to be for the topography itself. So let's turn on typographic down here. And the French size is just going to be 17 pixels. And there you go. Let's go ahead now updates. Let us view the page. Update one more time. View the page. And there you go. That is it Services section built. When the user clicks on the All Settings button, it takes them to services page. So we are done with this video. Thank you for watching. I will see you in the next one. 7. Adding the Portfolio Section: Let's move on to the next section. And here we're building the portfolio and we do have three samples of our portfolio. And we have our image, we have the title subtitle, some text, and we also have the View All button in here that should point to the portfolio page. Of course, we also have the portfolio headline up here as well as jump right into it. I'm going to go all the way down here. Click on the Plus block to add our row. And then inside, of course, we'll choose the single column layout. And for the first one in here, I'm going to go ahead and add the headline for portfolio. So we'll click inside and then we'll have our head in. And we'll just call this one heard Foley. And just like before, we're going to go over here. Right-click on our services cognitive style. Come down here to portfolio, right-click again, and then simply paste the style. And just like before, we will have to fix the separate. I don't know why it's very, very stubborn. It refuses to copy over, but it's okay. We'll just switch that down to bottom. All right, Next now we're going to add our three column, row for the three portfolio samples. So we're gonna go over here, click on the plus button. Before we do that, let's just do the same thing we've done before regarding the Rosso will just change the elements to full width. Okay, Very important. Now let's go back in here. We're going to add the new block for R3 Columbia's, I'm going to click on the Plus button in here. Go to row. And of course we're going to select our column layout, which would be three columns. Now, right here, we're looking for basically an image, first of all and then advanced texts. Those will be the two blocks inside of each column. So for the first column in here, I'm going to click on the Plus button right there. Let's add our image. We don't have an image block in here, so I'll go to Browse all. An image should be right here. Yeah, okay, let's add that one. Now it's going to be the blog style, not the simple style. So we're going with blurb. So I'll click in there for the blurb that's coming down in here to insert our image. And I'm just confirm the image. So it's the one with the code on the screen. It's this one right here. Let's select that image. Let's come down here. Now for the URL, we do want the images to also point to the portfolio page. So all say fourth slash and then hurt. For Lee your eye not with image height or opacity. All pretty standard radius r. Let's set this one to 55 will be our radius. Then. Let's come down here to the title. So topography is on, font size is 58 pixels. That's fine. We'll keep that as it is. The subtitle. We don't actually have a subtitle is just basically the title. There is no subtitle, so we'll need to disable the subtitle. So right here, we're going to click on Enable. We're going to turn it off. So we don't have any subtitle. Let's come down here for the content. Actually let me go ahead and add the code. So it's just basically a web dev that's going to be the text. So let me just change that to web dev. Now, one thing we are going to have to do is right here we'll have to enable the title reveal on HAVA because by default the title doesn't show. It's only when you now hover on the image. That's when the title now appears. Right now by default, the title appears at all time, so we'll have to disable that's right here. Will enable the title reveal only on HAVA. And there it is for the padding and the rest of that, we're going to keep that as it is for the overlay vide here. For normal, we don't need any overlay, so I will disable that one. How ever far the HAVA? Thus when we want to have an overlay right here, I'm going to switch from the gradient to just regular color. And then the fill color right here. I'm going to drag this one all the way again to read and then this will just around here. And let's pick something dark. And yeah, I think this is perfectly fine. I think that's okay. If you're interested in the RGB values, it's four to one, thirty eight, thirty eight, and then zero-point for one. But again, as I've, as I've always said in previous videos, you can choose your own values if you want to. That is it for our image? The next thing we're gonna do right now is we're going to add our text. But before we do that. Let me introduce you to a new kind of block, which is the block wrap up. Now the thing about the block of our PI is that we can add things like a background col, add some opacity, add some pattern, and so on just to make our textbook a bit more attractive. So before we add the advanced text, Let's add the block of arpa first. So right here just underneath the image, I'm going to click on the plus button to add a new block. And let's search for blocker or Rapa. It is the one right here. Let's choose that one. And now right here you can see we have access to the block republic, and then we can make changes to the block. Now, what I'm gonna do right here is, first of all, the background color. We're going to change this to white. So click in the FF, FF, FF, FF, FF. Next operator will be the pattern. Let's switch from global vowels right here, two individual values. And what I have right here is I have five, I have ten for the right side, I have eight for the bottom, and then I have another ten for the left-hand side. Next will be the box shadow. We don't actually need a box-shadow for the wrapper, so we'll go ahead and hit. Okay, now we can add our advanced text inside of our block wrap up. So notice I'm clicking on the first Plus button right here, not the one down here. We'll click in here. Now we can add advanced text, one right here. And I'm going to go ahead and just quickly grab this text real quick right here. And our justs Delete, oops, sorry about that. Come back here. We move all the texts and then simply paste the tide tool, I believe should be what? Garch group cherish. Okay. Chair rich. All right. Now we're going to make some changes in here. You would notice that there is a subtitle for each of the columns. So we have web development, security and SEO. So we'll have to enable subtitles for our advanced text. Before we do that, let's jump over here to the style. Let's click in there. And now first is fishery is going to be the title. We do have the fund size of 24 pixels, so we'll keep that as it is. In fact, we'll keep everything for the title, however, the subtitle down here, this is where we're going to now enabled a subtitle and we'll make some changes. Let me just add subtitle in here. Let me add where. It's web development. So when the men's make some changes to the font-size ELA, we're gonna make it just a little bit smaller. So we're going to make it 15 pixels. And then the font weight is all make it 300, so that it's very, very light. Let's look on advanced topography and text transform. We'll go with capital. We could also have just as just had everything in capital letters as well if we wanted to. That is it now for the spacing? We're gonna make this one a little bit small. We're going to make that one 10 pixels. And then finally, for the color, I do have an actual shade. I want to go with, and that's a 0. So it's kinda like grayish dock in a way. So we'll keep that. And there it is. One last thing might he'll just be to change the alignment to center up so everything is centered. And that's, let's go ahead now and updates. And let's take a look at what we have. Scroll down here. And not too bad however, again, notice that we do have the background color, the background for each column kind of sticking out from the main backbone of this section. So once again, we're going to go back and we're going to change the background color for the main role, just like we did in the previous video. So let's come down here. Just click somewhere over here to highlight the entire row. Go to background. And now background type is going to be gradients. For the first color, we have f of 0, and then a second color in here we have whites, FF, FF, FF, FF. And then last Shen good at angle is going to be 0. Let's go ahead now updates. View the page. Go back down here. And voila, all right, so we're getting there. Just a few more things to add. You will notice that right here there's plenty of padding inside of the column, so we're going to have to make those changes. So let's go back to Edit page. And now check this out. I am going to choose the actual column, the main column right now hold in the image, the block wrapper and then the advanced text. So right here where you have background color, we're going to add whites. So it's going to be FF, FF, FF. Ff will also add a box shadow as well. For some effect, my values are going to be 112 and then one radius, we're gonna go with five, just like before. So radius is five. And then the last panellists go over to advanced and we're going to add some padding. So I'm gonna go ahead now and add sevenfold. Actually, before I do that right here, to the right, you'll have this padlock, okay, click on it so that whatever value add to any one of the sides, it should be universal. So we're looking for seven pixels all across. And that's exactly what we are interested in it. Let's go ahead now, update the page and then from here let's scroll down and there you go. So we have our first column all figured out. Now, you might be thinking for the next two columns, the ones for the security and SEO, it should just be a matter of hers duplicates in the first column and then simply adding that to the next two columns and simply changing the content. Unfortunately, It's not quite as easy as that. Now I'm recording this lesson, May fifth, 2021. And as of this time, there is no way to simply duplicate an entire column. Let me show you right here. If you chose the entire column, I go to the Options button. You will only have the ability to copy, but you can't paste either. So how are we able to do this now leverage us. I'm going to show you, but it can get very, very messy. And let me just say that if you run into any issues whatsoever, the best thing you can do is just build the next two columns from scratch. You add your image ad you advanced text, changed the design and then save. That might just be the easiest thin for each do. But let me show you how we could possibly go to shortcut route. Here's the thing that we can duplicate the blocks and then add them to the columns. How? I would recommend that you duplicate the block Harappa block first, not the image. I don't know why. But if you tried duplicating the image first and then you drag and drop it inside of the second column, it will work. But then when you try to do the same for the block rapport block, it's not going to work. But if you did a VLOOKUP, our first, it will work. Let me show you what I'm talking about. So you can see right now block that has been highlighted. So let's go ahead now and duplicates the block wrapper. So now we'll click drag and then drop it inside of our second column. Provide there. Okay, now we're gonna go to our image, click on the image and now duplicates. And now simply click drag and then drop. Now, be very, very careful where you drop this. Try to drop it just above the tide tool. The title just like Jupiter along there. And the reason why I say that is because if you dropped it just slightly beneath or just maybe a bit closer to the type tool, you might end up having the image inside of the block Harappa. And then you might have issues with the height and things like that. So if you've if you try this and then you notice there's some issues with the way that would be the heights especially you will notice that the second column is a bit shorter than the first column. That may be because this image is actually inside of the block Harappa that we have for the advanced text, you can see right now that the block crockpot is separate from the image. Okay, so you can try that. Hopefully it will work for you. Wanted. We could also try right here. I'm so it actually doesn't. That's not gonna work. I thought we could simply just copy the settings, the design citizens for the column and then simply dump it in here. That's not going to walk. So let's just quickly do this. I'm going to go over here right now, change the background color to white for our column. And then we'll also add a box shadow as well, 11 to one. Those would be the sets ends and an advanced and then pad in, we're going with seven pixels. Okay, Let's go ahead now updates. Let's see how this will look like. Honestly, I'm not sure if this is if this will work. And okay, so it almost worked except that the second column is two shorter than the first column. But there is a trick. Let's go back. Let me share what you could do right now. What you're gonna do is you're gonna go to the main road, the main permanent rule hold in all the blocks. So the one right here, the granddaddy who will write here, you'll have the even column height option. Just check that. So that will force all the columns inside of the world to be of equal height. Updates. View the page. Back down here, and there you go. Now we've been able to get the second column to look just like the first column. So again, hopefully it will work for you. It can be very, very messy. Unfortunately, Gutenberg is like that. If you run into any issues or you get frustrated, just simply create the column from scratch. I know it will take a bit longer, but you do have to get going with the course. So what I'm gonna do right now is all pause the video, do the third column and then also change the, our contents for the second, third columns. And I will resume the video once I am done, well, come back. And as you can see right now, I've added the next two columns for hypertext and then cetera homes. So the last thing we need to do right now we'll just be to add the View All button that should point to the portfolio page. So let's just go ahead and do that real quick. Let's go to the back end, scroll down. And right here, I'm going to go ahead now and add the new block, which will be for the button. Let's search for the button block. It's right there and the text it will be view. All. Let's go over to style. We're going to go with the button URL right here, which should point to hurt Foley. Folio aligned to the center, the size, we're going to make a change to the pattern. So we're gonna go with the individual values. I have 11, I have 17, 11, and then 171 more time. Let's go down here to the zine and we do have the orange color. The hexadecimal value is going to be f 2961 D. That is the orange variation, and then we don't need a border color, so I'll go ahead and clear that one. And we'll do the same for the Hover button in here as well. The color for hover will be a darker shade of orange juice will be be nine. It's, it's benign and then 6, 7. Let's also remove the border color in there as well. And there you go. I'm gonna go ahead and now to update, let's view the page. Scroll down and there you go. We now have our View All button. Just like what we have over here. Actually, we need to make one slight change. There seems to be a border for this button and just quickly fix that one. So let's go back to Edit Page. Let's come down here to view all style. Let's go over to design. What do we have here? Roboto width, we don't want anybody with. And also make this 10. So your border width should be 0 and that should fix that. I'll update, view the page, make sure it looks exactly like it should. And there you go. So we have a fuel button and that is it for the portfolio section. Thank you for watching. I will see you in the next video. 8. Adding the Testimonials Section: Let's continue with the homepage by ADH in the testimonial section and this is what we are trying to accomplish. However, before we do this, I was just going through the work we've done so far and I realized that we do have two things we need to fix in the who we are section right here with the image the web code is, and then the tagline, this should only be displayed when we hover on the image and then the button, the mid Art's important, has a border. I don't know if you can say, well, it's right there, so we need to fix this two things. Now this happens all the time whenever you're building websites. It happens you'll forget about something that you should have fixed. This is why it's very important for you to just go through what you've done so far. So let's quickly fix this two things real quick. So I'm gonna go over to the back end. And then right here, Let's go over to my image. First of all, I'm going to go over to the content area down here content and invite it will just choose the title reveal on hover, and then that will take care of the tagline as well. So now that works. Let's go back to the mid or Tim button. I'll go to Style, come down here to design. And then for the border width, which is gonna make their own 0. And there it is. And I'll just go ahead updates. Let's view the page, make sure the changes have taken effect. And there it is. Okay. Let's move on to the testimonial section and here's the thing that we're gonna build would look like this, but it's not going to be quite the same. The reason is that when I build this section initially I used the testimonials blood provided by Cuba. Unfortunately, in the past week or so, there has been a bug with the plug-in where when you add the avatar image, it doesn't display. I don't know what the issue is, but thankfully, we do have an alternative provided by the ultimate add-ons plugins. Let's go ahead and use that one instead. And we'll come all the way down here. So let's go ahead now and add our row. We're gonna go with the one column. Let's click inside again to add our heading, which will be testimonials. So testimony olds. And then just like before, we're going to go right here to portfolio, right-click copy the style. Come back down here. Click on testimonials, right-click paste style, go to Style, go to separator, and then switch the position to bottom. All right, next we're going to add another row again, which will now be three columns. And now for the first column, I'm going to click inside twice. And let's search for testimonial. Now here's the one that we're going to choose. It is the second one. The first one here is by Kubla, which of course has the bug. We'll go ahead with the second one provided by the ultimate add ons. And there it is. All right, so by default you're going to have some texts, the name John Doe company and so on. Wide here. First of all, on the general number of terminals, we're going to go with one. There's just one testimonial, one column for the carousel. Just go ahead and disable all of this. We're not going to work with the carousel anyways. So let's disable that now for the first one and we're going to go with the image. So at the very first image right here, and that's going to be the one for choline. I believe that's a name. And I'm going to change an invite here to choline. Choline and then may not be her name company right here. We'll just call this one lab cyber. And there it is. All right, now for the actual testimonial, testimonial itself, I'm going to keep it as it is. I'm not going to change it. You can change you in just a moment if you want. But I'll keep mine as it is. I will make a change here though. And that would be to put the image right next to the actual testimonial. I think it looks better that way. So to do that right here, where you have image position, I'm going to choose Left. Alright, so let's update and let's take a look at what we have right here. Scroll down. And there it is. Okay, So we do have the testimonial. There are a few things that we can change in here. For example, we can make the image, maybe it just a bit bigger. And then we also need to get read of this arrow right here. Very, very annoying. Let's see. Let's go back to edit page and then scroll down here. And let's go back to our testimonial, okay, right here where you have image, we're going to make it a bit bigger. So instead of 60, Let's go all the way to 75, right? We might still change it, but let's keep it at 75 for now. Now, this, there is an arrow right there been displayed. So let's see if we can disable the arrows somehow. Our right here it says both arrows and dots. Let's go with only arrows and then I will size 0, our border size 0. So nothing at all. Let's now updates. Let's view the page and hopefully that should work. Scroll down. And there it is. Okay, looking much better now, slightly bigger image. We have the testimonial, her name, and then the name of the company as well. What I'm gonna do right now is I'm going to pause the video and simply create the other two testimonials, which of course I will do, and here it is. So I've added the other two testimonials, one by Mike Johnson of ABC solutions, and the other by Adam West of Gotham, Inc.. A few things to point out for you. If you try duplicates in the testimonials, I mean the applicant in the first one. And then simply adding that on to the second column and third column. You might be shocked if you try changing the image. You might discover that the image gets changed across all three testimonials. So just to save yourself any trouble or any issues, just go ahead and recruited the Seminoles from scratch. It wouldn't take you more than three minutes to do them. And one more thing to point out is that if you use the exact same text, the same default text, you might notice that the third column is actually a beat shorter or a bit narrower than the first two columns. The reason is because the actual width of the third column is just slightly longer or slightly wider than the first two columns. Let me show you what I'm talking about n here. So if we go back to the backend and then you scroll down if you choose the first column in here as an example, right? You would notice the width is 33.3%, 33, the same with the second column as well, 33 percent, 33. But then the last column is actually thirty-three point three, four percent. So it's going to be a little bit wider. And as a result, that content will appear shorter or not quite as tall as the other two columns. So now to fix that issue, you can just get very, very creative. What I simply did was to add some extra text, which was the one down here, which is the highly recommend it to everyone. I just add it to everyone so that it has the exact same six lines like the other two testimonial. So that's one way to think like a, like a web developer. So that's it for that. There's someone else section. Thank you for watching. I will see you in the next section. 9. Adding the Clients Section: Let's continue now with adding the client's section to our homepage. And of course, this is a very, very popular section that you would find on business websites, clients, and the testimonial section which we talked about earlier. So in here it's pretty straightforward. We do have a six, rather I should say a three column row. And then each column actually has to info boxes. So we're going to use an info boxes again in here. Let's go ahead now and get that done. Gonna come all the way down here. As usual, we're going to add our row. First of all, we'll choose one column. Once again, add the headline. So let's go to Browse. All know is my header heading right here. And we're going to call this one and clients, clients. And then again, let's just go ahead and quickly grab the style for our header. Come over here, right-click paste the style, go to style and then change the separator to bottom. Next up right now would be to add our row, once again been out, we're gonna go with the three columns. And so for the first one in here, let's just go ahead and add our info box. Now, the slight difference here is that as opposed to the first time and when we used our icons like what we have in here. Or we're going to use an image instead because we want to use the logos of the companies. So right here on the, on the right, we're going to stick with the first layout, layout one. But then down here where you have media, we're going to go with an image. So ride here, so switch on icon to image. And so for the first image I'm going to go to Insert. And it's going to be the one for wild rock. So let's select that. It is now by default, you're going to get 600 pixels for the image width, which is a bit too wide. So I'm going to bring this down all the way to 240 pixels. So the logo is not too big, it's not two-edged, and it looks fine. And all we have to do right now is just to add the based in San Diego and then the portfolio. We can use the first one here as our header, and then portfolio would be the subtitle. So let's do this. I'm going to go back in here. Let's jom up here where we have media. So let me just come down here to content and we're going to disable the shore content. We don't need that one. Let's go right now to tie tool. Actually, let me just change the title real quick to all based in San Diego, California. I'm just grab that text, come right in here and then paste that. However, I'm going to remove the San Diego. And I think we need them and I think California, USA is fine. All right, because in California, USA we're going to make a few changes right now to the text. We're going to make it 16 pixels. I know you don't see the size decrease. That's maybe another bug accumulate mature. But we're gonna make it 16 pixels weight will be 400 so that it's not true, Borg. And that will be it for our header. Now we're going to come down into subtitle and then enabled a subtitle. So we can now see our portfolio. And that's going to be our national because it's within the US. So I'm going to scroll back down in here. Let's make some changes to the font size. And we can make this one 15 pixels and it will also be 400. Lets actually change the color as well. I do have an interesting shade by adhere, which is 81, 81, 81. Let's do the same for the title as well. Lets us change the color to 818181. And if it is, let's go ahead now updates and let's see how this looks like. Update, view the page. Let's scroll down here. And there it is. All right, so we have our very, very first client, wild walk based in California. United States portfolio is national. The 110 and the one that change right here would be the alignment of the text. You can see right here that it's actually aligned more to the center. And of course, we also have to reduce the space between clients and the actual logo. So let's do that real quick. I'm going to go back to Edit Page. Let's take care of the alignment first. Let's scroll down here to our clients. Let's go to text. And right here, alignment, we're just gonna go with middle. And there it is. That's all we basically need to do. Now for the space in between the clients and the logos right here you can see we have 70 pixels, again, which is edited by default by Gutenberg. So we're going to click inside, in here. We're gonna go to Advanced and then right away you have padding. We're going to bring this down all the way to 20 pixels. I think that should be fine. Let's go ahead now to updates. Let us view the page worn more time. Scroll down here and there it is looking, looking much better. One last thing to do would just be to reduce the space between the header and the logo. So let's just do that real quick. Let's go back one more time and then I'll scroll down here. So we're going to target the actual media blocks right here. You have the media down here where you have our spacing. We're going to bring this down to 10. So let's just reduce that to 10. Update one more time. And now let's just viewed a page and check out the new space in and there it is, There it is looking much, much better. So all I'm gonna do right now is just to simply duplicate and add the remaining five logos. I will see you shortly. Welcome back. And as you can see, I've added the remaining five logos. All I did was just basically duplicates and then paste and then simply change the information. So don't forget to change the location as well as the portfolio designation as well, if you're adding the client's section. So that's it. We're almost done with the homepage. We're just now need to add the contact form mutual do so in the very next video, I'll see you then. 10. Adding the Contact Us Section: Welcome back. The last thing we need to add to our homepage is going to be the contact form, which is what we have right here. So let's go ahead and do that real quick. I'm going to jump in here. Add first of all, our role again column. Let's add the head in as usual. And then we'll call this one, contact us. Contact us, and then I'll do the usual right-clicking Copy style. Come back down here. Paste the style, go to style separator and then position bottom. All right, next up right now would be the contact form blocks or click on the Plus button in here. And let's search for contact. Contact form is the one right here. Let me choose that one. So here's the thing you can choose from two different types of styles. You have the classic style, and then you have the material style, which actually isn't that bad is it's a very interesting design concepts. But I'm gonna go with the more familiar our classic style. And we have all the fields we need. You have your full name, email subject, as well as the message fuels everything that we need. However, I don't know about you, but me personally, I don't like displaying both the place holder as well as the labels. I think that's kind of like too much information. Either display the labels of the fields or you display the place holder. So in this case right now, I'm going to display only the place holder. So how do we do this? You would click on the field, first of all. So when you click on the field of IT, I've clicked on full name. We will now have access to the settings in here. So we have label is fullName, name is full name down here. We can now choose to hide the label, which I will now do. So I'll hide the label. I'll do the same for email as well. Heidi label, click on Subject, hide the label, and then finally, the label for the message. And that is less than make a very quick change to the button down here. So let's come down here to button. And we're going to stick with the feel. And then what do I do here? Then the size. We are good to go with the Custom. And then right here we're going to switch the pad in two default values of lemme check I do have 11 and 11, 17, and then 11 again, and then 17 for the last one. So that's it for the padding. Let's scroll down in here as well. We are going to go over to the design, our text color right here. We're going to go with pure white for the text color. So FF, FF, FF, FF, FF. And then for the background color, I do have my value in here to be 2184. And then F nine, That's going to be the color. And let's scroll down in here. For the radius is four, we'll leave that as it is. And then for type of graph that we'll go ahead and activates topography as well. Basically, we're going to come down here to advance the biography and make sure that it is in capital letters. Let's just add a different shade of blue for the hover effect. So we'll go over here to hover. And then the fill color for our hover is going to be a little bit different because B 105 and then CB eight. And there it is. I'm going to remove the border color. I don't like when did that Let's go ahead now and updates. And let's take a look. Let's view the page. And one thing you will notice instantly is wide here, the contact form, a kind of wide, It's very, very wide. We want something a bit more compact, like what we have right here. So we're gonna have to make that one compact, will also have to add the headline in here. Use the contact phone polluted get in touch with us and we'll get back to you. So let's just go ahead and copy this text. And let's add that. Let's go back to Edit page. And let's first of all add the text just beneath the title. So right down here, I'm going to click inside one more time. Let's now add a new block. And we're going to add in here would actually be the texts. So I'm going to click on Browse all Eduardo's go with advanced text. Let's remove the header. We don't need it. Now in here, I'm going to paste the text I just copied. And there you go. So the only thing we'll have to do right here is just a style where we'll go with the Align Center. Now to make the contact form a bit more compact. Or we're gonna do is we're going to go to the payment role. Basically the very first one that we added. So it's right here. You can see this is the row right here. We're gonna go over to the alignment and we're gonna make it full width. Okay, by doing that, we'll now have access to the continent with section in here. And we're going to bring this down to seven hundred, seven hundred pixels. Let's go ahead and now updates. Let's view the page. Scroll down. And there you go. That is it for the Contact Us section. And voila, we're pretty much done. Perhaps, maybe just maybe it might look better if you have the submit button and the center, right? Let's try that one. Okay, let's just make the button, the center. I like to make an all these last-minute changes for one reason or the other. So let's just come down here. Click on the button, go to Button and aligned to the center. Let's also try to reduce the space between our sections. Okay, so you can see right now we still have the default 70 pixels between the clients and the Contact Us section. That's a bit too much. So let's click on 70 right here. Go to Advanced, make this 149, so we have less pattern for the pixels. And then those are the same in here for the clients in here as well. Click on the 70 up in there. Go to Advanced, and then we're going to make this one 40 pixels. And there it is, just to reduce the amount of space between our sections is a bit too much. Okay, let's go ahead and view the page one more time and scroll down here. And there it is. Actually I think the submit button looks a bit better in the center of the screen. So I'm going to leave it at that. Thank you so much for watching the video. Gemini vernix weren't available. Now take a look at adding our ankle link. I'll see you then. 11. Adding the Anchor Link: Welcome back. So we're pretty much done with the homepage. However, there is one last thing we need to do and that is the anchoring They'll we created much, much earlier and it's the WAN wide. Hey, remember that we added the hashtag services as the link for the CR saves his button. However, when we click on it, nothing actually happens. But what is supposed to happen? Well, over here on the model side, when you click on z OS services, it's schools down to this section on the homepage where we have the Services section, so we need to get that done. So let's go ahead now and make some very, very quick changes. Let's go to Edit page. And just to give you a quick recap, remember, right here for the CIA services, if we go to style right here for the URL, it says hashtag services, right? This is the ankle. Now, in order for it to point to the Services section, it will have to go down to the Services section. Let's choose the main volt like that is the parent rho occupying the entire area. Come down here to advanced NMR. You have the SSS ID, add services. And there it is, That is the ankles. Go ahead now update. Let's view the page. And now let's see. Let me click on SEO services. Boom, it takes us straight down to the Services section. However, the noted that it's very, very, very sudden like you click on the button and boom, it takes you straight down to the Services section right here. It's very, very smoothly click on cell surfaces and now the page just scroll smoothly down. How do we achieve that effect? We're going to make use of some CSS code and it's kind of like a cheat code. You can use this on many other types of websites where you simply need to do right now is to go to the customize area. And we're going to add the CSS code to additional CSS section. And it's good to be the one down here you have custom CSS, GS is click in there. And now you can paste this code right there. So it says Smooth Scroll and then HTML. And then this will be the property of school behavior and the value is going to be smooth. Basically, we're saying, Hey, anywhere on our website, whenever there is a scroll behavior, make it smooth. Let's go ahead now Publish. Let's close this. Let's just go ahead and now at test it out, see how services, and there you go. And now we've got the smooth scrolling effect on our ankle, a link. Thank you so much for watching and join the next video where we'll now take a look at adding the FUTA for our website. 12. Designing the Footer: Welcome back. So now let's add the footer to our website. And to do this, we're going to add a menu. First of all, we'll have a contact section or a contact widget, and then we'll also have the social media icons as well. So let's do this. First of all, I'm going to go over to the menus and we're going to build ourselves a custom menu specifically for the footer. So right here I'm going to click on Create menu, and I'm going to say footer menu right there. Go ahead and create the menu. And let's just add three links in there. So we'll go with contact, price and services. Let's add that to the menu. And let's just put contact over here. All right, let's save that. And now we're going to come down to appearance and then rejects right here. Now, by default with the ocean WP theme we're using we have access to for our sidebars and our food supply, we're going to make use of just three. So if a foot or one right here, Let's go ahead now and add the custom menu we just created. So I'll draw the costume, any widget in here. And we can title it additional, additional links. And we'll select the footer menu right there. Scroll down anything else to change? Text transform. Let's go with uppercase. Let's save that. Next. We're going to use the contact info with it, which is the one right here. So let's drag them onto footnote number two. And in here we're going to remove the text. We don't need that one. And then we'll also get read of like mobile. Let's get rid of all of these. Let's get rid of facts as well. Email all of this stuff. So the only thing that will show up would be our address and then our phone numbers. So Let's go ahead and remove all of this stuff. We don't need that. Double-check that everything has been removed except phone and address. That's okay. Let's go ahead and now save. And then last but not least, we do have the social icons for footnote number 3, and it's the one right here, social icons click drag. Let's draw that in there. And we're gonna say follow us, and that's cool down. Let's add four tweeter for Facebook, for Instagram, and also for a Linkedin as well. Let's go ahead and now save the menu. And let's take a look at what we have oddest saved widget, whether or not the menu. Let's scroll down here, and there you go. Okay, now you will see we still have some additional space to the right. That's because Ocean WP theme is making space for the fourth sidebar, which when I go to make use of. So how do we remove the unnecessary our sidebar? We're gonna go over here to customize. And from here we can customize the way the footer is going to look like. So we're going to come down here to the footer widgets just down here. Open up. Okay, so right here you will see columns is set to four. Just change that to three, and that should change everything. So you scroll down in here and now you can see there is no more space for the fourth sidebar. We're also going to add some effects like making it a fixed FUTA. This will ensure that the FUTA is always at the footer because it's going to have itself a height. We can also add the parallax effect. Let me show you what that does right now you can see that the footer, our schools open schools down normally. But when you add the parallax effect, you now have this kind of a very interesting effect where you can see the footer is already dead. And it's like when you're scrolling down, the rest of the content is like pulling up to expose the foot at ESA. That's basically the parallax effect. It's a pretty cool effect, so we'll keep that. And that is it. All right, one more thing to change. Let me go back would be the FUTA bottom. So right here, we can customize the information in here. So we can just say copyrights. And I'm going to say web coded as 2021 or whatever, something like that. Or actually I'm just gonna make this one space. So it's where Dakotas cooperative opcode is 2021. And let's go ahead now and publish this. And let us see what we have. I'm going to go ahead now to scroll all the way down here. And voila, there you go. Now in case you're interested for additional design, you can customize the color of the text ends like that. To do that, you can simply go back to customize. And then what you will simply do is you'll look for the typography section, which is the one right here, topography, you click in there. And then from here down here, you will have your footer copyrights. So for example, you can click in there. Then we'll scroll all the way down here to show you. So for the copyright text now we can actually increases onto, let's say 14 pixels, make it a bit bigger. So now you can see it's bigger by dead. And of course you can also do things like change the font-family, the font-weight text transform. You can do the exact same thing for the footer menu as well. You can change the font weight, the font-style increase the line height that the size of the text as well. And that is pretty much it. So, thank you so much for watching and we have successfully built out the FUTA. I will see you in the next video. 13. Building the Services Page: All right, so now that we're done building the homepage, it is now time to focus on the rest of our pages. And the good news here is that the hard work has been done already. Typically the homepage is usually the most difficult, while the other pages are a lot easier to work with. Now let's first of all target the services page. And we do have one issue though, we need to tackle immediately. And that is the fact that the header, actually by default has a white background. Now if we were able to get away with the header on the homepage because we used a bag or an image. And we also made the header transparent specifically for the homepage. We could try the same thing for the other pages, but to make things a lot easier than us having to use a bag or an image. We'll just change the background color for the header. Now here's what we're gonna do. We're gonna go over to the services page again. Let's now go to customize. And the wonderful thing about the WPA ocean thermal using is the fact that you can modify just about an FNN, changing the background color of our header is no exception. So light here, you're gonna come down here to your header, and then you go to general. And then right here you have background color. Let's just click inside. And now we can choose a particular bag on colon double. Want to go with. Now for the purposes of this lesson, I'm just going to stick with the default of blue color in here, which is along e 73 B E. Of course you can use a different background color if you prefer. I'm going to go ahead now and hit Publish. And Voila. Okay, now let's go over to the services page. I'm going to edit a page right now. And we're going to calm down here. First of all, content layout, we're going to go with 100% full width. And then you have the title right here. We're going to disable the page title. We do not need it. Now, at this point we are going to cheat a little bit. Now, what exactly do? I mean? I'm just first of all, update this page, right. So that then is we've already sort of built part of the services page already in the homepage right here. You see this is part of the services page we're going to list web design, web development, web security SEO. And if you are the services, Now here's the thing. Rather than us having to rebuild, There's blocks, Oliver, again, we can just save this entire section as a reusable block. This is a feature available with Gutenberg. So check this out. I'm going to go ahead now and edit the page. And we're going to select the Celsius role down here. Okay? Now, notice I am selecting the entire wall which contains of course the title services, the four services and then also the all services button as well. We're copying the entire row. So right here, I'm going to go ahead now and whip the options button and invite here you have the option to add two reusable blocks. I'm going to go ahead now and click inside. And there it is. Now by default you will have the untitled reusable block. If you try to name it from here. Sometimes it works, sometimes it doesn't. I don't know why that is the case. How ever Here's the thing. If you go to your backend, pop up, and then you come down here to your Settings and then you see UAG. That's for the ultimate, are add-on blocks for Gutenberg, we cook inside vide here. Right here you will see the reusable blocks, okay, just click inside there. And now you will see the blocked up with just added as a reusable block. So right now, I can go ahead now click on Edit and we can change the name from here. So let's edit the block. And now from here, outdoes, call this one the services block. I'm going to go ahead now and update the block. And if it is now, let's go back to the services page or pages services edit. And okay, so how do we now add the reusable block is simply click on the plus button to add yoga block. Go to Browse all. And then right here you go to reusable. And then now you will see the service block is simply click on it, and there you go. Now, here's the thing though. I need to draw your attention to a particular bug that currently exists with Cuba. Now, I am recording this video, May 16th, 2021. And actually I do think it's a bug with Gutenberg itself. Whenever you're trying to walk with reusable blocks, when you add them to your page and you edit them and you try to update your page, it will not update. It's just gonna keep on saying or Bayesian or Bateson and it never finishes. I've gone on the internet and I've discovered it's actually a bug. Hopefully by the time you're taking this course, the Borg is Schuller been fixed? Now, thankfully, after spending several hours trying to figure out a solution to this problem, I have been able to come up with a walk-around. So here's exactly what you wanna do. First of all. Click on the preview tab right here, and you preview in a new tab. I wanted to do this to show you one issue. First of all, see, even if there was no bug, this is actually how your page would look like. If you just add your reusable block and then you save, it's not going to look great. The first thing you wanna do is to convert your reusable block to regula blocks. So vide here you have your services block. You'll see this button right here that says convert to regula blocks. Now you click in there. Now, Goodman bug will transform the reusable blocks to your regular blocks. Now if you go back, now preview, you will now see it actually looks good now, there you go. So the ideal processes is for you to first of all converge regular blocks. And then you can debate. Now because of the ball, we had to preview the page first. And now that a preview page is still open, don't close it. Go back to your regular page. Now go over to update. You will see this on check the reusable block. Because if this is checked, what this will do is that if you make any edits to the reusable block from now, it will simply affect the blue block everywhere on your side basically is going to globally save the changes to your blue. Only want to make this changes to this specific page. So I'm going to uncheck this box. And now we can go ahead now and save. And there you go. So for a second, I was actually afraid that it was not going to abate, honestly. It's been it's been like that for such a long time, no. Okay. So you're successfully added a reusable block and all I need to do right now is just to add our four more blocks to the comment section. And it's very, very easy from here. I'm just going to click on. And then one of the books right here, go to the Options and I can duplicate. Let me go over here once again, duplicate another one. I'll do the same for the second column. Duplicates and then come down here and then duplicate one more time. And all I wanted to do right now is just to change the icons as well as change the text of the boxes. I'm going to pause the video and resume once I have done that, well come back and as you can see, I have edited the four duplicated blocks of added mobile app development cloud backup for that and market research and then enterprise and CRM platforms. We're going to go ahead now to update the page, Save. And now if you view the page, this is exactly wall we have. And there you go. The only thing that interchange right now is going to be the block right here. Let's change all services to point to the pricing page. So let's go ahead and quickly make that last change. Let's come down here, go to All Services. Let's change the text in here to say C per Eisen. And what I'm gonna do is to change the Lincoln also change the background color as well. So let's go to style. So the idea for the button you are, well, we'll change that to per icing so that it goes to the pricing page. And then we'll come down here to Design. Go to the background color in here, and we'll just choose this light blue color. Let's go ahead now update. View the page one more time. And v lie, click on sale price sane. And of course it goes to the pricing page and, oops, we forgot to make one change and that is the hover effect on the bottom. Let's quickly change that real quick. Let's go back. Come down here, see our pricing. Go back to style, go to design. A light switch over to hover. Come over here. And we'll go with this shade of blue. And let's also remove the border color as well. So if we switch back to normal provide here, we're going to change the border width from one to 0 so it has no border. Update. One last time, view the page. Scroll down here and there you go. So that's it for the services page. Thank you for watching and I'll see you next class. 14. Building the Team Page: The next page we're building is the team page. And this is an example of what we're trying to accomplish. It's going to be a very simple, clean design. Basically, we'll have two rows with four columns, age, and then each team member will have their image, their name, their designation, a title, and then links to their social media profiles. We'll go ahead and close this. Let's go over to our team page and let's do the usual disable the page title. Go over here to main, change default to 100% full width. Okay? Now we've been using the Q blue blocks for quite a lot in this course. In fact, it's practically the only add on we've used so far. So what I'm gonna do right now is we're going to introduce the blocks added by the ultimate add-ons Gutenberg plugin. And the reason why I'm in this, because I want to give you as much variety as possible and exposed to as many add-ons and options when it comes to walk in with Gutenberg. So let's go ahead now and add a block. And the very first one we're going to add would be the section block with the ultimate add-ons wide here. And it's actually a very, very cool block because it allows you to add a customer youth, and you can even add like an alto Rapa to it as well. Let's choose a section and are in here. I'm going to add the pause button. And let's use the good old acutely heading block because we already so used to it. So I'll just choose the headings right here and then change this of course to Tim. Tim, and then we'll go via two style aligned to the center, go to head in font size or 34 pixels, weight of 300. And of course we have the separator select will go with line. And then the color right here, we'll go with this one. And of course the position is going to be bottom. Yeah, Okay. Now we're going to make use of the team block provided by an ultimate add-ons and then click inside. Actually, before we do that, we need to add our columns because it's four columns, remember? So I'm gonna click on Browse all a goal back again down here to ultimate addons. And the block you're looking for is don't fly here called the advanced columns, going to click inside. And now we can choose the variation. We're going with 144 columns. So I'm going to choose that one. And okay, it went above that scene, but that's fine. We'll just click on the arrow down, hits movie down, and there you go. Okay, Now let's click inside the very first column. Click on the block right there. Go to Browse all. And it was cool down here to add the team block. And it's the one right here. Let's click inside. And there you go. Now, QB also has its own Tim block as well, and it's a bit more sophisticated. However, in my humble opinion, I think that the one for ultimate addons is actually easier to work with. So let's just go ahead and make the very, very quick changes in here. Matt Johnson is going to be the CEO. And let's just grab some Lorem Ipsum text in here. Let's go and that copy right here. And of course I'll just go ahead and remove the texts and then paste the text now. Okay, Now over here to the right, we can add the image. And who do we choose? Okay, let's just choose this guy right here. Is my little give you a very happy. Let's go ahead and select him. So that's my Johnson. Oh, I'd position is going to be our ball. We can make that lift. Who wanted to keep it on above? Image style is going to be circle. And then the width right here, Let's go all the way to 175 pixels. Okay, That's for the image. And then social links there enabled by default. We don't want pinned to that. So I'm just gonna go right here to pin service and then we move the icon. So normal Pinterest. And now if you'd like to add the actual links for social media, just click on Twitter. And I tell you will have, do you ever you added in the end, then you do the same for Facebook and LinkedIn as well. Social links done. Our typography, we're going to keep the title tag as an H3. Now the actual title itself lets us make a few changes in here. I'm gonna go with the Open Sans for the font-family and then the font weight. Let's go with four hundred, eight hundred was a bit too thick and there it is. Okay. But done with the topography. And then you've got color settings in here as well. You've got space in full paddings, margins and things like that. But we'll leave that as it is. Let's go ahead now to update. Let's view the page. And there you go. Not bad team. And then we've got Mark Johnson, CEO, seal, shut description, and then social media icons. So all we need to do right now is just basically to duplicate. And let's go ahead and do that. So we're gonna click on edit page. However, I need to point out one thing. It's going to be very, very difficult for you to actually just duplicate and then copy and drag because check this out. If I click on the block right now and I went ahead to duplicates. If I try to drag the duplicates inside any one of these columns, let's say right here. What happens is, is not going to pace, is actually going to go to another row. So how do we solve this issue? What is the walk-around? Well, what you need to do is to first of all, click inside the column that you want to paste it in and add a separate blocks. I'm going to click on Add block in here. And we'll just go with the info box, okay, just as an example. But now that we have contents inside of this column, you will see the plus button right here is available. So what I'm gonna do right now is I'm just gonna go ahead and drag this guy down here inside. And there you go. So now because we already had content previously instead of the column, it will now accept any other candidate would drag into the column. So now we can just go ahead and click and click inside the info box and then just simply go ahead and we move the block and there it is. So now I'm gonna make a very quick change to Maggie Johnson. Let's change his name to May we maybe Jones. But let's replace the image. Who is going to be regions, okay, this is me regions right here. And we'll call the COO. And we'll just keep the exact same biography and in the same social media icons as well. Let me go ahead now, update one more time. Let's view on page and there it is. There you go. So what I'm gonna do right now is to simply pause the video and add the remaining team members. Welcome back. And as you can see, I've added the remaining team members and it doesn't look that great. The truth is we need to make the space and around the columns a bit wider. There is something we can do about that and we also need to change the team titled, My apologies. The font size is supposed to be actually 44 pixels and not 34 pixels. But before we do that, I want you to notice one thing, and that is the amount of space between the first row and the second row. That's because I added some extra margins to the individual columns. Let me show you what I did. Let's go back to the back end and varied here. So when you choose one of your columns in the second row, right here, you go over to space in, and then right here you have the image margin. You will have 15 pixels by default, set that to 50, and I'll give you more space between your first row and your second. We'll do that for all four columns in your second rule. Okay, let's go ahead and make the quick changes. I'm going to click on the team title, go to style heading. And we'll make this one for the four pixels will quick. Now to increase the width of this section, we're going to click in here to highlight the section. Right away you have width. I'm going to go all the way to want housing and 240 pixels. Trust me, it will make our team page look so much better. And then we also need to add some spacing between the team title and then our head us, I'll go over to space in and we'll just make this one 80 pixels for consistency and then bottom as well, 80 pixels. And there it is. Let's go ahead now updates. Let's view the page. And voila, there you go. That is the team page. All designed and hope you enjoyed the video. And Gemini VII, next one. Well, we'll now build out the portfolio page. 15. Building the Portfolio Page: So now let's take a look at how we can build a portfolio page. And I was going to show you step-by-step, but I've decided to change my mind and make this one and assignments. The reason is because it's actually very, very easy. Here is the page that you should try to build. So you'll have your page title as usual. You'll have two rows, three columns in each, and you'll have the content right here. It's very, very similar to what we did at the homepage. Remember when we built out the portfolio section, It's basically the entire process. Let us go ahead, go ahead now, edit the page. And one thing you could do is you could also try using the reusable blocks method. You could try that, but lambdas give you the backend preview. So basically you would make the usual 100% page full width. You're disabled the page tied to the title of portfolio wide here. And then for the actual content, you're going to make use of the Blob image style, make whatever changes I need to do so. And then of course you will add the advanced text, but please also add the block Harappa. Remember in building your portfolio section for the homepage, we did use the block wrap up, so do the exact same thing inside of the block Rapa, Audio, advanced text, and make whatever changes that you need to do. I'm pretty sure you will be able to build this page out. Just simply follow the exact same steps that we did for the homepage portfolio section. Or like I said earlier, you could also make use of the reusable blocks with Gutenberg. Good luck. 16. Building the Pricing Page: Let's now take a look at the pricing page, and this is what we're trying to accomplish. So basically, we'll have the usual page title. We'll have some advanced texts in here. And then we'll have a row with three columns, each column containing a package that will have its name implies the features available as well as the Choose button at the end. I have already gone ahead to do the usual, a 100 percent page full with visible page title. I've also added a price in title in here as well. Let's go ahead and first of all, add this text by making use of the advanced takes. Now be careful, don't click on the plus button down here because this will be for a separate row. We're going to click inside the current price in row right here, and then click on this plus button. So always make sure you're adding your contents inside of your rows. I'm going to go ahead and now click on the plus button to add a block. And we're looking for the advanced text with capably is basically the third block. Let's choose that one and we'll remove the tide tool. And it actually went above the price in header. Let's click down. And now I'll just go ahead remove the default text and add the text I copied. Go to style, aligned to the center. Now for the text, I'm going to make a few changes in here. We're going to go with 16 pixels. And then font-family will be Open Sans. So Open Sans, and then the weight will be 300. Okay, now for the actual packages, we're going to add now a role. All right, and we're going to go with it three columns right here. And inside of the first column, we're basically looking for the price and block would cube Li. You'll find it down here right next to team and timeline. Let's just price in and there it is. Okay, so first things first is let's just change the title immediately. So from basic, I'm gonna go with the agency package and then the subtitle in here, best choice for individuals and we don't need them and not just go ahead and remove it. We don't need a tees up. The price in here. Let me check my records. It's one hundred and four hundred and ninety-five. Don't ask me how I come up with that number is just what it is. Okay. Now, before we take a look at how you can add like features and so on, Let's do some design over here to the right. So the first thing we wanna do is we want to change the layout. So we're going to go actually with layout one right here. Okay? So actually let layout one doesn't even have the subtitle all the t's up. So we didn't even need to delete that, but it's okay. So layout one will have the name, the price. Now the per month here that you see is enabled by default. So due to disable it, so we're going to come all the way down here where you have duration, okay, so you got to do Asian. And basically by default it says per month and we don't need it. So I'm just gonna go ahead and disable the duration, but just know that you have that feature available should in case you need to make use of it. Okay, let's get started. So first things first year is going to be the title. And I do have my color in here. If my title is going to be lambda, show you 333333, that is my shade of black I'm going to go with. And of course we've got to make some changes to the font size as well. Let's go with 16 pixels. From family is going to be Open Sans. The font weight is going to be 400. Suggest little bit bold. And there it is. Okay, now, that's what a title. Let's now come down to price. Now for price, I do have an actual shade of blue that I like to go with, and that's 338 FEC as the shade of blue that I do, like. The font size 70 pixels is a little bit too big, so we're going to bring this down to 44 pixels. Font family will be Open Sans as well. And the weight here is going to be 600 are going to make this a little bit thicker than the others. All right, that's it for the price now for the currency. So by default it is the US dollar, but you do have euros, pounds, their lens, and rupees as well. If you are from India, alright, for the color, we're gonna go with the same blue color, 33, eight, and then FEC. And then we'll do the usual font size in here. Let's go with video eight pixels. Right? Let's cool down font-family. We're keeping a consistent with Open Sans. And the weight is going to be 600 as well. Now here's the thing though, is that the alignment, it is not aligned properly. So we're going to bring this down to minus two. Looks, okay? Actually in my books right here, I do have minus four. But I think minus four is, it is a bit out of order, will go with minus 24. Now if we need to make a change, we'll make the change later. Okay? So that's it for the currency. Let's now come down to background. So by default, you do have the full color set to white. I don't think we need to change that, so we'll just leave that as it is. Now for the Buddha colo, we don't need any border, so we'll clear it out. But no width as well. Let's make that 10. However, we're going to add a box shadow just for some effects, right? So let's scroll down in here. The box shadow color. We'll leave that as the default. However, we're going to change the values in it to 11. And then I have to, and then I have a one for the spread. So that's how it will look like. Also, we're going to make some changes to the padding. I've tested this and in my humble opinion, 40 pixels is the best. And then border-radius, we're going to make this one just five K. That's that for the background. Let's go down. Now, badge, we will add a batch to the second one, but I'll show you how to do that later. So let's just go down in here and change the button design. So if I'm subscribed now let's go with the choose. All right, so choose and let's make some changes. So for the style, I'm going to go with outline and divide here where you have the size. We're going to go into launch size, a fixed size of 196 pixels. And then for the design as well, we're going to make a change to the text column. You're going to go with the blue color. We've been using those for which is 33 eight FEC. And then the border color as well will be the exact same value, 338 FEC for the hover effect will, I'm going to leave these as the defaults or you can change the colors if you want to, but I'm not going to dabble into that. Okay, that's it for the button. Now, finally, what about the actual texts, the features, how do we add them? How do we also added the ones that are not available? Well, before we do anything, let's first of all expand the width of a row so we can edit the features properly. So right here, I'm just go ahead and choose the main parent role holding everything. And all those go with the alignment, go with the full width. And k. Let's do the same thing in here as well for this one. So we go over to the Alignment, go with full width as well. And there you go. Okay, much, much, much better now. So how do we add features? Well, it's very, very easy. All you need to do is just to write here. Click on. If you want to add a feature that's available, simply click on one that currently exist and then just press Enter. And now you'll have a new role where you can now add a feature. So lemme just say 24 hour support just as an example, right? And then I can keep on adding as many that I want that are available. And then if I wanted to add one that isn't available, hours, do the exact same thing again, press Enter. Now, let's say, for example, backups and not available with the agency package. All I need to do right here would be to go to where you have your icons and then simply search for the times that's the one I use. And it's why day and there you go times. That's basically how to add a feature that's not available in the package. Now, check this out though. Notice that in a proper design, you will have those that are available first of all, and then those that are not available next is not like that. There are mixed, right? So one thing you could do is you could set a color for the features that are more in number. It could be the features that are available or those that are not available. Now since for the first package in here, the ADC package, since most features are not available, we're going to set the color to red. So how do we do that? Right here where you have common sets in, you go to ICANN column and then you change it to red. So in my case right now, I'm going to develop FFTW to 22 000. That is my shade of red for all the icons in the first column. Now, for those that are actually available, like say on limited domain use, I'm going to click in there. And then right here where you have deep, I can call or not the common sentence, but the one up here. I'm simply going to change that one to the value of green. And my value right here is going to be 107. See if for two. And then I'll do that for each individual feature that is available. That's basically how you can get this done. So what I'm gonna do right now is I'm going to pause the video and I'll add all the remaining features that are available and those that are not available. Well come back. And as you can see, I've added the remaining two packages and a few things to point out. Make sure that your titles for your packages are actually in capital letters. You can either just type them in capital letters or you click on the Type tool. You come down here and then you go to your advanced topography and then set it to uppercase if you wanted to do so. Now for the batch, the one we have right here that says most popular, it's very, very easy. I'm gonna click on the second column in here. We'll come down here to badge enable. The badge will go with style number 2. And let's just change the text first of all to most per, per la wide. And then down here we'll change the background color to the blue color that we'll be using. Those for, which is 338, F, E, C, and there it is. So text color is white, font size is 14 pixels. I like that as it is. Let's go ahead now updates. Let's view the page. And there you go. That is our pricing page. Well laid out and that's it. Hope you enjoyed the video German event. Next one where we'll now take a look at Build on the final page, which is going to be the Contact page. I will see you then. 17. Building the Contact Page: All right, so let's go ahead and now to build the final page on our website, and that's going to be the Contact page. Now, here is a demo of what I initially planned for the contact page. But as you can see, it's very, very simple, just some text and then the actual contact form. And I figured out that, well, you're not going to learn that much if we do it this way. So what I've done is I've created another demo for something a little bit more sophisticated. So right now we do have the same pitch type tool, the same text. However, we're going to have a background with the image right there. We'll have two columns, one on the left for the form, and then one on the right will actually work with the Google Maps block. And then social media icons are down at the bottom. So this is exactly what we are trying to accomplish with the contact page. Let's go ahead now and build the page. So the first thing we're gonna do is I'm going to add the section block with the ultimate addons. It's the one right here. So let's add that. And immediately I'm going to choose the content layout right here from Box to full width. And then right here as well, we'll go with full width. And let's go ahead and add first of all, the head in. All right, so let's go ahead, type in heading in here. Let's choose heading with the cube Lee. And we'll just go ahead and quickly do the usual contact us. Let's come over here to the right alignment center, head in 44 pixels, font-weight of 300. And then last but not least, our favorite separates or the line the line color of blue and then position bottom. Okay, That's the first part. All taken care off. Next is going to be the texts and undoes. Go ahead and grab this real quick. I'm going to go back in here. Let's add a new block right now, which is going to be the one for the advanced text. We're going to go with the one with Cuba. So this time, I dare, I'll just come in here and paste that. Let's remove the header. And then over here to the white will just align that to the center O k. Now this is where the fun begins. So take a look at this again. We have the background image which we will apply right now. But then we have two columns. One on the left with the form and then one on the right with the Google Maps. So let's do this. I'm going to go ahead now and add the advanced columns with the ultimate Add-ons. And it's the one right here in France columns. And we'll go with 5050. So I'm gonna click inside the first one in here. And we're going to add our form. And we're gonna go with the form with the 14 cubed. Now, the thing is the ultimate Adams does have its own forms block, but it's not quite as sophisticated as the one with QB. So let's search for contacts instead. So it's contact form. That's the one for Cuba. And okay, so I'm gonna make some quick changes in here. We're going to change the style from classic to material. And then let's get the full name and email on their own separate line. So they're basically goal or 100% full width. So let's go to full name. So right here where you have with we're just going to go all the way to 100. Let's click on email and do the exact same thing as well, all the way to a 100. Okay, we're going to leave subject and message for the button down here. Let's make a very, very quick change button. All right, we're going to stick with the feel alignments to the center. Let's go over to size. We'll go with large. And then for the design right here, that text color, we're going to go with white and the full colloquial be blue, the border color when I'm going to go with anybody column at all. Now for the hover effect, we do have kinda like a slight hover effect, right? As you can see, you can see when you hover your mouse in there, it kind of changes color briefly. We'll leave that as it is. I'm not gonna make any other changes in there. Okay. That's that for the form. Now we're going to jump into the second column in here and we're going to add our Google Maps. I'm going to add the block. And let's search for Google. And again, you do have two options, the one for the ultimate add-ons and the one for Cuba. We're going to go with the 14 cube Lee. So right in here we can add the address. So I'm just gonna go with the good old want, 1600 Pennsylvania Pennsylvania Avenue. I hope that's the spelling of Pennsylvania. And okay, it's close enough. It's basically the White House. All right. Let's go with that one. Then there's going to be our address. And then down here, we can actually, I'm sorry, I forgot to do one thing. So while you're editing the map, you can actually increase the height as well if you wanted to. So let's increase the height. We're going to go all the way right now to 500. K 500. And then down here, well, let's just go ahead and add the social media icons. So let's go to the social icons. And then right here we'll go with normal. We're going to go ahead to hide the labels. So we only have the icons. So by default we have Facebook, Twitter, linkedin, YouTube, and the dribble. I believe we don't need that. I'm going to remove dribble, but also going to remove YouTube as well. So when we have Facebook, Twitter and LinkedIn, and we'll just go ahead and align that to the Santa. And there it is. Okay, let's make one last change. And that will be for the background For section right here. So I'm going to go over to background. Let's go to Background time. We'll choose Image. And of course I'm going to select my background image and it's going to be the one right there. Let us select. And there it is. Okay, let's see how this will look like. So this the first draft updates. Let's view the page and let's see what it looks like a K. So not too bad, but still some way off of what we have over here. So what changes do we need to make? Well, first of all, we need to add some padding so we have more space between our section and the header, as well as the bottom here as well. But then also noted there seems to be some sort of an oval labored the bag when image against It's a little bit lighter. And then y here for the first column or we have the actual form. It seems to have a background color of white with some opacity. Plus it also seems to be a little bit wide level we have inside of the inner section. So let us make this quick changes. I'm going to go back in here. Let's go to edit page. The first thing we're gonna do, Let's add the padding to this section. All right, so let's go over here. Now. The inner weightless is one as well. I'm going to increase this by 100 pixels to one hundred, two hundred and forty pixels. So our two columns are now a little bit wider. And then the spacing ride here we're going to go with 80 pixels top and an 80 pixels bottom, which has been pretty much consistent. K, That's for the space in. And then now for the background, Let's go back to the back of my head. Now check this out. All right, all the way down here you do have the image overlay color option. So we're gonna go with white light there. And therefore the capacity. We're going to increase this to 70, all the way to 70. So let's see how that looks like. And then also for the image, you would notice that right here, we actually get to see more of the skyscrapers than what we had initially right now you'll have to scroll down before you even begin to see the skyscrapers, right? So one thing you could do is we could change the image position from the center, center to bottom center. So now you will see that the skyscrapers will actually be a bit more visible. Let's go ahead. Updates and new suit I'm talking about. Let's view the page. And then by day instantly you can see we have we can now see this sky scrapers Friday. Okay. Let's make one more change. We're going to add the background color to the first, first column in here. And then we're also going to create some space between the first column in here and the second coordinate consumer here we do have some space. So let's go back, edit the page and all right, so right here we're going to click on the first column right there. And then what you have background, we're going to go at beggar and type of color, and then we're gonna go with the white collar. But then for the opacity as well, we're going to make it go around. Let's go with 5050 right there. And then for the actual advanced columns block right here, you do have the columns gap. So you have default of bulk default. But it's going to go all the way to our large and make the spacing just a little bit more. But then we could also do one thing which is to click on the second column in here, okay? And then right here where you have the spacing, we could even add some padding as well, awesome margins. So check this out. I'm gonna go with margin. So we're gonna go in margin left, so lied here. Let's go all the way to 30 pixels. All right, let's go ahead now to update. Let's view the page. And there you go. That is it. We have our contact form, we have Google map, and we also have some texts in here as well. A little bit of a typo, in addition to being are you interested in not. Q. Are you interested? But that's it for the contact page. Thanks so much for watching the video. Hope you enjoyed it. I'll see you in the next class. 18. Page Templates: Before I conclude this course, I wanted to draw your attention to the templates that you actually have available with the ultimate add ons plugin. So right here, whenever you're trying to edit a page, acquitted page, you'll see the templates button up here. Now if you click in there, you'll have access to pre-built pages. You can see you've got pages for different kinds of subjects, from cooking to education, to yoga, to fitness and so on. But then lighter, you also have patterns. So you click in here and right here, for example, you can search for contacts. So like a contact page for example, and invite here. You can see you do have different versions and you can see where I got the bag of an image of a contact page from. This is the background image right there. So it's very, very, very easy to make use of these. You just simply click on Import. All right? And this might take 10 seconds, 15 seconds, but you will have the import to your page. And then from here, you can begin to make whatever changes that you need to make. So I just wanted to draw your attention to the fact that you do have plenty of templates available that you can walk with the ultimate addons. Also cubically right here. Just wanted to talk about this option in here for cube lead, you can choose to import layouts. So if you go to the bottom I did, from the Cuba website, you will have access to a wide variety of layouts. You can just go with the free, one of those other free. And of course right here you can see different kinds of sections. Over here to the left. You can go with the one for, let's say a table, right. Okay. Well, table wasn't available with free. Let's see, countdown, none available. Contact project features. Okay. So for features you do have some that are free. And there it is. So just went to draw your attention to the fact that you can make your life a little bit easier. As a WordPress are Gutenberg user make use of the templates whenever you can. But at least now you know how to walk with Gutenberg, you know how to walk with the cube, lee Adams as well as the ultimate addons. So regardless of whatever template that you import, if you need to make any necessary edits or changes, you will be able to do so. Thank you for watching. I'll see you next class. 19. WebCoders Website Conclusion: Well, there you have it. You've come to the end of this course. We are showing you how to build a professional website for a company and I hope you enjoyed it if you did, please do consider live in a review. If you have any questions or comments about anything we covered in this course, be sure to let me know and I'll do my best to respond to them as soon as I can. Thank you so much. And of course, I will see you in the next class.