字幕列表 影片播放 列印英文字幕 If you wanna build a super professional website, watch this video, and I’ll show you how step by step. What’s up everyone? It’s Jameson from NYC Tech Club and in this video, I’m gonna show how to create this website step by step. And you don’t need to know any type of coding or programming or whatsoever. It's just gonna be a bunch of drag and drop, and copy and paste. And by the end of the video you’re going to be a WordPress expert. And as you can see, this website is just beautiful. It’s simple yet stunning and just super professional. What I tried to do was incorporate a lot of the design aspects of leading businesses such as Apple. and Spotify. and Square. all of which are multi-billion dollar businesses. that have spent millions of dollars on web design research. So what I created was something with a great user experience, something that creates an amazing first impression and something that you can be really, really proud of. I wanted to build something that not only represents you, but represents your brand. And I really think that we were able to accomplish that with this website. And the best part about this web tutorial is it’s gonna save you thousands of dollars building out this website yourself. So if you’re a freelancer, a blogger, an artist, a small to medium size business or just someone just wants to build a super professional, super beautiful, mobile-friendly and responsive website, then keep watching this video because I’m gonna show you how to create this website step by step. But first, I wanna give you a tour of exactly what we’re gonna build right now. Okay, so this is the homepage that we're gonna be creating today. I’m gonna show you how to create this full width image slider right here. We’ll also put in a transparent header menu right at the top, and I’ll show you how to create a custom logo right here. On each of our slider images, we’re gonna have a headline, a subheadline and a Call to Action button. And the reason why we’re gonna do this is because all of the leading business websites also do this. So if I go to Apple, you can see right here there’s the headline, a subheadline and a Call to Action. And the same with Spotify, they have their full width image right here with a headline, a subheadline and some Call to Action buttons right here. And what we wanna do is incorporate the best of the best and put it on our website. So that’s what we’re gonna do right here. So if I click on this button right here, it’s gonna bring me down to the next section that we're gonna build. So the next section we're gonna create is the "Services" section right here and what you can do here is highlight what you and your business is all about. So you can add as many or as few products and services as you want, and I’ll show you how to add these custom icons right here. Once we’re done with this section, we’re gonna create a Call to Action section right here. And what we’ll have is two buttons that will go to different pages on our website. So I’ll show you how to create multiple pages and link them to these buttons. And once we’re done with this section, we’re gonna create a recent Blog Post section that looks just like this, and then we’ll create another Call to Action right down here with another button that really just funnels your visitors wherever you want them to go on your website. And right down here in the footer, we’ll have Social Media Buttons. We’ll have our website name down here and if I click on this button, it will bring us right back to the top. And we can actually customize any of the colors on our website. So I’ll show you how to do that. And again this website is responsive, so it works on any computer or laptop, any mobile device. It will just resize on its own so you don’t have to worry about that. So now, let me just quickly show you what the other pages that we’re gonna make look like. So this is the About page that we’re going to make, and I’ll show you how to put in titles at the top of your pages like this. And we’ll insert an image right here just so that you know how to do that, and then we’ll put in a little description right here about your business. And then we’ll put in an embedded video right here. And what we could have done if we really wanted to was put this video full width so that you don’t have any white space right here. But I kind of like it with the white space just because it makes it look like a framed image. So if you really wanted to, you can push play right here and actually watch this video play right here. And underneath this video, we’re gonna put in some facts or statistics about your business right here. And then we’ll have another Call to Action right here, and then right below that on every one of your pages you’ll see this footer right here. So now let me show you another page that we’re going to create. So the next page that we're gonna create is this Employee's page and you can add as many or as few employees as you want. And we can also add a Call to Action right down here. So what’s really cool is if you hover over any of these images, you get additional details about your employee along with their social media accounts right here. And we can link the name to additional pages if we want to, so that your visitors can get additional details about the employee. Once we create this page, we’re gonna move on and create an image gallery or portfolio page. So if you have any images or projects that you wanna put into a portfolio, then you’re going to love this page because what we’re gonna create is this image gallery right here that your visitors can actually click on each individual image and then get a pop up of that image. And they can actually go through a slider to see every one of these images. And once we create this page, we’re going to create our Success Stories page or Testimonials page next. So this is the Success Stories page or Testimonials page and what this page is gonna do is give you a bunch of social proof. So what we’re gonna do right at the top is add some videos right here. So if you have any video testimonials you can embed them right here, and if you don’t have any videos, we can add images or texts or anything else we wanna write here. And right below that, we’ll add some testimonials right here with the image of the person that’s giving the testimonial, their name and then maybe their title or what company they’re from right here. And then right below that, we’ll add some logos of our current and past clients right here. And then we’ll put in a Call to Action right here and then our footer right here. So once we create this page, we’re going to create our Blog page next. Now we’re gonna create a very simple, but elegant and professional Blog post page just like this. And what you’ll see is we’ll have a featured image for each of our blog post with a title, the date that the blog post was written and also a little excerpt right here. And if any of your visitors click on one of these blog posts, this is what the blog post will actually look like. So this is a single blog post page right here. And right below, we also have a section for your visitors to leave a comment if they want. And you’ll notice on the right hand side, we have this right side bar. So I’m gonna show you how to customize this and put in a Facebook Like box, your Twitter feed right here, and then recent blog post right here with thumbnails. So once we create our Blog Post page and some blog post, we’re gonna create one additional page. So the last page that we’re gonna create is this Contact Us page right here so that your visitors can get in touch with you. So we’ll put in some contact information right here and we’ll embed a map right below if you have a real location and then we’ll put in this Contact Us form right here that your visitors can fill out and it will send a message right to your inbox. So pretty much, this is the website that we’re going to be building today. So if you wanna build a website that incorporates a lot of the design aspects of multibillion-dollar companies and you really, really like what you see, then follow this tutorial and you’re going to build an amazing website. So if you’re ready then I’m ready. Let’s get started. The first thing that you have to do is register a domain like this, and then we have to get hosting service. And hosting allows you to run your website and store all the content on your website. So I recommend that you go to hostgator.com for both your domain and your hosting service. So right here, type in www.hostgator.com and click "Enter." So I recommend hostgator.com because they’re fast, reliable, cheap and they have great customer service. So all I want you to do is click on this button right here that says, "Get Started Now!” On this next page, we can just scroll down and you can see the three different hosting plans available. There is the Hatchling Plan, the Baby Plan and the Business Plan. The Business Plan is a little too expensive and probably more than what we need, so I’m going to focus our attention on the Hatchling Plan and the Baby Plan. So the Hatchling Plan is if you plan on building one website and one website only, and the Baby Plan is if you plan on building more than one website and you wanna host them on this account, then the Baby Plan is probably the right one to choose. I personally use the Baby Plan, so I’m just going to select "Sign Up Now!" Okay. So on this next page, we have to fill out some information to register our domain and get hosting service. So on step number 1, it says “Choose a Domain.” So what I want you to do is type in a domain that you wanna register right here. So I'm gonna type in howtowebby.com and push “Enter.” If you get this green check mark, and it says “Added" right here that means your domain is available and we can just move to step number 2. So step number 2 is actually where you choose your hosting plan. So in this drop down right here, remember we’re choosing between the Hatchling Plan and the Baby Plan. In the Hatchling Plan is if you plan on building one website and one website only, and the Baby Plan is if you plan on building multiple websites and you wanna host them on this account. So I’m gonna select the Baby Plan right here, and then I’m gonna choose my billing cycle. So what I recommend is either the 6 or 12-month billing cycle just to give yourself enough time to know whether or not you wanna run a website or not. So I’m gonna choose 6 months right here. And then all you have to do is create a username and a security pin. And then we can move on to step number 3. So step number 3 is where you’re going to enter your billing information. And I’ve already done this, so I’m not gonna do it with you. But if you need to, go ahead and pause this video and fill out all this information and then just push “Play” when you’re ready. Otherwise, we’re gonna move on to step number 4. So step number 4 is adding additional services and by default hostgator actually selects all of these for us. What we wanna do is unselect them because these are just extra cost that we don’t need right now, and we can always add these later. So make sure you uncheck all of these and then let’s move on to step number 5. And so step number 5 is entering a coupon code. And by default HostGator puts in this snappy code right here. And what I recommend is you change this to n-y-c-tech-3-0 and click "Validate" right here. And you’ll see the discount actually increase right here, because this coupon code n-y-c-tech-30 gives you a 30% discount code instead of the 20% the HostGator gives you. So once you put this coupon code in right here, go ahead and scroll down and click “I have agreed to the terms.” And then just click this button right here that says “Check Out Now!” Once you’ve signed up for hosting and registered your domain, I want you to go to your inbox, and you’ll see this email right here from hostgator.com that’s titled “Your Account Info.” I want you to click and open that and you’ll see a bunch of links right here and the one that we wanna focus on is this one that says “Your Control Panel.” I want you to click on that link right here and then you’ll get this pop up that allows you to login to your cPanel. And inside our cPanel is where we’re going to install WordPress and also create our email address. So if you need your username and your password, go back to you email and right here, this is where your username is and this is where your password is. So go ahead and copy those and paste them into these two sections right here and then just click “Log in.” Once you’re logged in, all we have to do is scroll down to this section right here that says “Software and Services.” And what we’re gonna do is install WordPress. So you might have to wait a few minutes for GoDaddy and Hostgator to connect but if you don’t, go ahead and just click this button right here that says “Quick Install.” Now all we have to do is come down to this section right here that says “Popular Installs” and click on "WordPress." And then we’ll get this pop up right here and all we have to do is click on this button that says “Install WordPress.” And now we just have to fill out some information. So right here, go ahead and choose your domain that you want to install WordPress on and then put in your email address, a blog title that you can actually modify later and then an admin username. So I’m gonna put in admin right here and then I just put in my first and my last name right here. And then I’ll scroll down to this green button and just click “Install WordPress.” Once you've installed WordPress, you should see this message right here that says “Your install is complete!” And right over here if you click on this arrow, you can see this information that allows you to login to your WordPress Dashboard. And you can write all of this down if you want or you can go to your email inbox and you’ll see this email right here that says “Install Complete.” And if you click and open that, you also have all of your information right here to login to your WordPress Dashboard. So before we actually login to our Dashboard, let me show you what our website looks like right now. So if I open up a new tab and I go to my website, this is what the website is going to look like after you install WordPress: super simple and really plain. But we haven’t installed the theme yet. So we haven’t started customizing and making our website look like this. But we’re gonna do that right now. So what I want you to do is either go back to the Install page or your email inbox. And then click on this link right here that says “Admin URL.” And we’re gonna login to our WordPress Dashboard right now. On the WordPress Login page, what you have to do is put in your username and your password. So if you need to, go ahead and go back to your inbox and go to your email with your login information. And right here is your username and right here is your password. Go ahead and copy and paste those two into these two sections right here. And once you’re ready, go ahead and click this button that says “Log in.” Once we’re logged in, this is the WordPress Dashboard. And this is where we’re gonna do all of our customization and add new blog posts, upload images and videos, create new pages and approve and reply the comments and all that good stuff. But the first thing that we have to do in order to customize and build our website is install the theme for this WordPress website. So go to Appearance and click on “Themes.” Once you’re on the Themes page, what I want you to do is go to this button right here that says “WordPress.org Themes” and click on that. And the theme that we’re gonna be using is called the “Sydney” theme.” So right here where it says “Search Themes” I want you type in Sydney, S-Y-D-N-E-Y. And then it should pop up right here and what I want you to do is click “Install.” And then on this next page, just click this link right here that says “Activate.” And once we’re back on the Themes Page, you can see right here the Sydney theme is the active theme. So what I wanna do is actually show you what our website looks like right now. So if I open up a new tab, you can see that the site looks a little bit better, but still nothing as great as what we’re gonna make it look like in a little bit. So go back to your Dashboard if you’re not already on it. And the next thing we’re gonna do is install some plugins that are recommended to us. And plugins really just make our life a lot easier. They’re like tools to really help us build our website. So right here where it says “Begin installing plugins” I want you to click on this link right here. Now on this next page, I want you to check this box right here next to plugin and then click on this drop-down right here and click “Install.” And then click this button that says “Apply.” And once we get to this page that says “Everything has been installed successfully,” I want you to click on this link right here that says “Return to Required Plugins installer.” And now we have to activate these plugins. So again click on this box right here and then go to the drop-down and click on "Activate" and then click "Apply." Once the plugins are activated, we’ll get this message right here. And what I wanna do right now is actually install the other plugins that we’re gonna need for this web tutorial. So right here where it says “Plugins” I want you to hover over that and click “Add New.” On the Add Plugins page, what we’re gonna do is search for some plugins right here and then click in “Install” and activate them. So in order to know which plugins we’re going to install, I want you to click on the link in the YouTube description to the NYC Tech Club homepage and go to the text tutorial or you can go to nyctechclub.com and click on this link right here to the web tutorial and it will bring you this website right here or this webpage. And what this is, is just all the instructions to the video tutorial that we’re going through right now. And what I want you to do is go down to step number 8 where it says “Download Plugins.” And what we’re gonna do is install and activate all of these plugins right here. So what you can do is just highlight this and then just copy it and then just go to the search bar right here and paste it in and then just click “Enter” and then we can search for it. And then we’ll see it right here and all we have to do is click “Install” and then we’ll just click “Activate” right here. And then we’ll see this message right here that says “Plugin activated.” And now I wanna install another plugin, so right here click “Add New.” And then we’re gonna go back to the website and we’re going to copy the next plugin that we need. So Contact Form 7 and then go back to the Dashboard right here and paste that in and click “Enter” and search for it. And then right here this Contact Form 7, all we’re gonna do is click “Install Now.” And then again we’ll click “Activate Plugin” right here and once again we’ll get this message right here that says “Plugin has been activated” and before we actually add another plugin, I do wanna show you that all of your plugins that you’re installing and activating are listed right here. So if you ever wanna deactivate or delete any of these, you can do that right here as well, okay? So let’s add another plugin. So right here click on “Add New.” And now let’s go back to the NYC Tech Club website and highlight the “Easy Facebook Like” box and copy that. And then we’re gonna paste it into the search box right here and search for that. And then the plugin we want is this one right here by Sajid Javed and so we’ll click “Install Now.” And then we’ll click “Activate” once again. And now we’re gonna add another plugin. So right here click “Add New” and what we’re gonna do is go back to the NYC Tech Club website and if you wanna go to this section yourself and go a little bit faster, you can totally do that. I just wanna make sure you download the right plugins, so that’s why I'm gonna do it with you. So right here highlight this next plugin and copy that. And then just go back to the Dashboard and paste it in right here and let’s search for this one. And the plugin that we want is this one right here, so go ahead and click “Install Now.” And once again we’ll click “Activate” and we have two more plugins to go. So this should be pretty familiar to you. Right now we’re gonna click “Add New” once again and then go back to the NYC Tech Club website and right here we’re going to highlight “Site Origin Widget Bundle” and copy that. And then we’re gonna paste it into this search bar right here and search for that. And then we’ll see the plugin right here, so click “Install Now” and then we’ll click “Activate” right here. And now let’s click “Add New” once again and go back to the NYC Tech Club website and highlight this last plugin that we need and copy that. And then we’ll paste it into this search bar right here and search for that. And we wanna install this first plugin right here, so go ahead and click “Install Now.” And once again, let’s click “Activate Plugin” right here. Okay, so once we’ve installed and activated all the plugins that we need for this WordPress tutorial, I want you to go back to the NYC Tech Club website. And scroll down to step number 9 right here. What I want you to do is download this zip file and what’s gonna be inside this zip file includes the images, the logo and some additional files that we need to really customize our website. So even though you might have your own images and your own logo, I want you to download this anyways just so you can get the files that we need to customize this WordPress website. So right here just right click and then just click “Download File.” Once you’ve downloaded this zip file, I want you to go to the folder where you saved it. And in my Downloads folder, here it is right here, and what I want you to do is double click it. And this is gonna unzip the file and we’ll get this folder right here. And if we open it up, you can see all the contents right here. And what we’re gonna do next is actually import the theme settings. So right down here where it says “Sydney-settings.xml” we’re gonna import this into our WordPress website. So I want you to go back to your Dashboard and right down here where it says “Types” I want you to hover over that and then click on “Import/Export.” And then on this page, all we have to do is come down here to “Import Types Data File” and push this button right here that says “Choose File.” And then we’re gonna go to the folder that we just unzipped and all we’re gonna do is select the file “Sydney-settings.xml” and choose that. And then click this button right here that says “Import File.” And then on this next page, just scroll all the way down to the bottom and push this button that says “Import.” And once everything has been imported, you should see these messages right here that say “Groups or Fields” have been added. And then on the left hand side over here, you should see additional links for clients, projects, testimonials, employees and services. And we’re actually going to be using these to build up our website. So the next thing I want you to do is actually add one additional plugin. So go to “Plugins” and click “Add New.” Once you’re on the Add Plugins page, just come back to the search bar right here and type in “Lightbox Plus Colorbox.” And what this is going to be for is for our image gallery. So once you type that in, go ahead and push “Enter.” And the plugin that we want is this one right here on the left by Dan Zaponne. So go ahead and click “Install Now.” And again we can just click “Activate” right here. And back on the Plugins page right here you should see the Lightbox plugin down here. And if you have that, then we’re good to go and we can move on to the next step. And so the next step is going to be uploading the images and the logo that we downloaded from the NYC Tech Club file. So go to “Media” right up here on the left and then click on “Add New.” And I’m gonna show you how to upload images. On this Upload New Media page, what I’m gonna do is actually show you how to upload all the images and the logo that we downloaded in the zip file. If you wanna use your own images and your own logo, you can upload those as well or you can actually upload everything one at a time as we go through this website tutorial. So it’s really up to you. I’m just gonna show you how to upload everything all at once. So right here I wanna select this button that says “Select Files.” And then I wanna go to my folder that has all of my content. And all I’m gonna do is highlight everything, all the images, and then just click “Choose” right here. Once we’ve uploaded everything, you’ll see them all listed over here and we can actually go to our Media Library. So on the left side right here under Media, we can click on “Library” and see all of our images that we’ve uploaded. And right here you can actually click on any of these images and edit them. So if I click on the first image right here, I get this pop up right here. And what I can do is click on this button that says “Edit Image.” And then we’ll come to this page right here and you can actually edit the size or you can crop the image if you wanted to. And all you have to do is click on these buttons up here and then push “Save” right here. But I’m just gonna close out of this. So this is how you upload images and you can actually upload them one at a time by clicking on this button right here. And I’ll show you how to upload images and other types of media one at a time as we go through building our post and pages. But the next thing that we have to do is create our Homepage. So what I want you to do is go to pages right here and click “Add New.” We’re gonna create two new pages. The first page that we’re gonna create is the Homepage and then we’re gonna create a second page that’s gonna be our Blog post page. So right here I want you to put in a title. I’m gonna type in Homepage and then what I want you to do is come down here to page attributes and where it says “Template” right here. Go into the drop-down and select "Front Page" and then click “Publish” right here. And once this page is published all I want you to do is click on this button right here to add a new page. What we’re gonna do is create the Blog post page. Okay, so let’s title this new page our “Blog” page. So right here type in Blog and we don’t need to change any of the page attributes for this page. All we need to do is push this button right here that says “Publish.” So I’m just gonna push this and once our page is published, now we just need to set the Homepage and the Blog page. So what I want you to do is come down on left hand side to Appearance and then click on “Customize.” So on this page right here, on the left hand side you’ll see a bunch of different tabs. And we’re gonna go through all of these to customize our settings and also customize our website. But the first thing that I want you to do is come down here to Static Front Page and click and expand that. And you can scroll down right here and you’ll this section that says “Front page displays.” I want you to click the bullet right here that says “A static page” and then you’ll get this drop-down right here. And where it says “Front Page” click in the drop-down and select Homepage and then for Post page, click in the drop-down and select Blog right here and then just click “Save" and "Publish." And once that saved, we can actually see the changes right here as we make them. This is pretty much like a Visual Editor page right here. But if we wanna see the change that we actually made, we can go to the tab that has our old website open. And right here if you remember we have all this white space down here when we installed the theme. So if I actually refresh this right now, it should actually update and all we should see is the slider image right here. And then we have another page that has all of our Blog Posts if we go to that, but right now we don’t have a header menu link right here to actually go to that page. So I’ll show you that a little bit later. The next thing that we’re gonna do in this web tutorial is create the slider image right here and we’re gonna modify or change the slider images. So let’s do that right now. Let’s go back to our Dashboard and go back to this Customize page right here. And what we’re gonna do is scroll up to the top and click on “Header" area right here. Once you’re in the Header area, I want you to come down to the Header type right here and click and expand that. And make sure this bullet is selected right here where it says “Full screen slider” and then right down here where it says “Site header type” I want you to select “No header” right here. And once we do that, we’re gonna scroll down to this section right here where it says “Header Slider” and click on that. In the Header Slider area, you can actually change the slider speed and also the text speed in your slider images right here. We’re gonna leave it at the default 4000 milliseconds and if you really want to you can change this yourself. But if not we’re gonna just move down to this next section that says “First Slide.” And what we wanna do is actually change this first slider image. So what you can do is push this button right here that says “Remove” or just click this button that says “Change Image.” So what I’m gonna do is click this button right here. and what we’ll get is our Media Library. And since we already uploaded all of our images, they’ll show up right here. If you wanna upload a new image, all you have to do is click on this tab right here that says “Upload Files.” And then you can actually click this button right here that says “Select Files” and then you find the image that you want and then upload it that way. But since we have everything already uploaded, I’m gonna click on "Media Library" right here and just select the slider image that I want and just choose image right here. And then you’ll see it actually refresh right here. So now what I wanna do is actually modify the text for the first image slider. So right here where it says “Welcome to Sydney” I’m gonna change this to "Create And Inspire." And then I wanna change the subheadline from "Feel Free to Look Around" to "Endless Possibilities." So I’ll type that in right here and you can see it actually update right here. And we’ll modify the text for the button or the Call to Action in a little bit. The next thing I wanna do is change the second image slider. And you can add up to five different images here. So I’m just gonna add 2 and what we wanna do is actually change this one right here. So we can click again “Remove or Change Image” right here and then we get to our Media Library. And what I wanna do is select this image for my image slider and just click “Choose Image” right here. And I’m gonna leave the Headline "Ready to begin your journey" but right here on the sub-headline, I’m gonna say “Find out what we’re all about.” And then we can just scroll down. If you wanna put in any more images, go ahead and upload them here and also the text; otherwise just come down to bottom and come down to the section that says Call to Action button. And what we’re gonna do right here is change the text to "Learn More." And then if you wanna put in a URL to redirect people to another page once they click on this Call to Action button, you can paste that in right here; otherwise, just leave it as is and all it will do is if people clicked on this, it will go down to the next section which is the “Services" section. So what I want you to do is click “Save” right here. And then we’re gonna move on to this next section that is the “Header Image.” We’re not actually going to modify the Header Image, but I do wanna show this section in case you wanted to replace this image or put a new image that shows up on all of your pages right at the top with your header menu. What we’re gonna do in this website tutorial is actually create custom titles with our own images for each of our pages. So we’re not going to actually modify this section. So if you want you can just leave this section as is and we can just scroll down to this next section right here that says “Menu styles” and click on that. On the Menu style tab, we’re actually not gonna change any of these options right here. But I do wanna talk about them just in case you wanna change your own menu settings. So if we go to the demo website, you can see right here, this is the transparent Header Menu right at the top. And if we scroll down the page, you can see that the Header Menu actually follows you down the page. And that’s because the “Sticky” option is chosen. If you don’t want the Header Menu to actually follow you down the page, you wanna choose the “Static” option, so it stays at the top of the Homepage and the rest of the website. So if we go to the Customize page again, you can see right here the Sticky option is chosen and then we can come down to the Menu Style right here and you see that the “Inline” option is chosen. And what that means is the Site title right here and the navigation bar are going to be on the same line. If we wanna see what it looks like when we center it, we can click on this button right here and then you can see that this is what it looks like if it’s centered. You’ll have your Site title or Logo right here on top and then you’ll have your navigation bar right here below it. So we’re just gonna use In line for this website, but you can choose whatever options you want. And when you’re ready, just click “Save" and "Publish” right here. And then just click the "Back" button. Once we’re back on this page right here, I’m going to make some changes to our settings and our layout. And what I’m gonna do is make some suggestions that you can follow or you can actually modify any of these settings and layouts however you want. So the first thing that I wanna do is come down to “Fonts” right here and click on that. In the “Fonts Setting” section I wanna just scroll down all the way to the bottom to the last section which is the “Body font size.” And what I wanna do is change this from 14 to 16. And once I do that, I just wanna come down to this next section which is "Colors" and click on that. In the Colors section, what we’re gonna do is actually just modify the primary color and the menu background color. And you can modify all these other ones if you want, but these are the only two that we’re gonna be modifying. So if you see right now on our website, the red is a little is off red. And what we wanna do is actually make it a little bit brighter. So if I go to the demo website, you can see right here this red looks a little bit brighter. And if we scroll down, you can see that the menu actually changes to the same color that we’re gonna put in for the Primary color. And by default the menu color is black. And you can leave that black if you want. I just like to match it up with the primary color and you’ll see that the primary color shows up throughout the website. So in these little sections right here, you can see if we hover over anything, the primary color actually shows up too. So you can modify the colors to whatever colors you want, but if you want the colors that we’re gonna put on this website or through this web tutorial, what I want you to do is go the NYC Tech Club website and got to the Text Tutorial and on step number 15 right here where it says “Colors”, what I want you to do is highlight this hex code right here. And this is going to be the color code for the color of red that we want. So once if you highlight and copy that, go back to the Dashboard right here and where it says “Primary color”, go ahead and push this button right here where it says “Select Color” and all we have to do is just paste in the code right here. And then we’re gonna do the same right down here where it says “Menu Background.” Just click on that button and then delete this hex code and paste in that code right there. And now the colors will actually change to that brighter red and all we have to do is click “Save" and "Publish.” And once this is saved, we can scroll up to the Blog options tab and click on that. And this is where we’re gonna modify the Blog post page. In this section right here, we can modify the Blog post layout. So if I go to the demo website, this is what the Blog Page looks like. This is the Masonry grid style. So if we want a Blog Page that looks like this for our website, we have to select the Masonry grid style option. So on the Customize Page right here, I’m gonna select Masonry grid style. And right below it we have the option of creating a full width single post page. So if a visitor clicks on a blog post, this is what it looks like right now. You’ll see the blog post with a right side bar. If you wanna get rid of the side bar and just have all of your content go full width, then you would click that box. But we’re gonna leave it blank right now or unchecked and just move on to “Content and Excerpt.” And right here all I wanna do is where it says “Excerpt length.” I wanna change the 55 to 20. And the reason is, right here is where the excerpt is and 55 is a little bit too long and a little bit too messy. So what I did was I modified it to 20 and it just looks a little bit more professional. So once you changed the excerpt length to 20, all we have to do is click “Save" and "Publish.” So once this is saved, you can actually modify any of the other settings in these tabs if you want. But we’re actually done with what we need to modify to build out our demo website. So first let’s go to our old website and refresh it and see the changes that we made. And you can see right here we have our slider image with some text and then on this button right here we have our primary color. So now we can move on to the next step which is creating a Custom Logo that we’re gonna put right here. So what I want you to do is go to a website called logomakr.com, L-O-G-O-M-A-K-R.com. So the word “makr” doesn’t have the letter “e.” This is where we’re going to create our custom logo. So the first thing that you have to do is click "Next" "Next" "Next" and "Done." And what we wanna do is come to this search bar right here and type in an image or a graphic we want. So I’m gonna type in a compass. So that’s what I use for the demo website, and then I’ll scroll down and find the one that I wanna use which is this one and I’ll just click on it. And you can see the image right here and you can actually change the colors to whatever color you want using this color spectrum right here. But the first thing that I want you to do is actually click on this corner and drag it in to about fifty by fifty. And the reason why I wanna do this is so that we make sure that it fits within our Header Menu. So if you remember, we have this transparent header menu up here. And what I’ve done with my logo is I created a white logo because I think it looks really nice on this full width image slider. So that’s what I’m gonna use again, but you can make your logo any color you want. So let’s go back to logomakr and what I wanna do is change this to white. And the logo is still there but it looks like it disappeared just because the background is also white. And all I wanna do now is click on this disc right here to save and download the logo. So if I click on that, I’ll get this new tab right here. And the logo, if it’s white, it actually shows up right here but you can’t see it. So what I want you to do if you have a white logo is go to the center and then just right click. And then you should get this pop up right here that says “Save Image.” Go ahead and select that and then you can save this to your download folder. And what I want you to do is close this tab and then X out of this and then actually if you have a white image here, I want you to change it to a color; any color you want. If I select this – and the reason why I wanna do this is because we’re gonna resave this logo and we’re gonna upload it as our favicon right here on our web browser so that our logo shows up next to our web address. So again I’m gonna click on this disc right here and download this and then I’ll right click and save it. And then I’ll save as another name, and then we’re good to go. So I’ll close out of this and then I’ll come back to our Dashboard right here where we’re customizing everything, and I’ll click back right here. And right now what we’re gonna do is upload our logo and our favicon. So right here where it says “Site title/tagline/logo,” I want you to click on that. And if you wanna just update your site title right here or your tagline, you can do that right here; otherwise, let’s upload our logo and replace the text right here. So let’s click on “Select Image” right here and if you need to upload your new logo, go ahead and click on the “Upload Files” tab right here and click “Select Files” and find the logo in your downloads folder or wherever you saved it and upload it; otherwise, you can go to Media Library if you have it already uploaded and we already have that right here. We’re gonna select our logo and then just click “Choose Image” right there. And then we can see that our logo actually gets updated and shows up on our page right here. So now let me show you how to upload our favicon. So right here where it says “General” I want you to click on that tab right there. And all we have to do right here is upload our favicons. So “Select Image” click on that. And then we’ll go to our Media Library again. And if you need to upload your favicon again, again just click right here on “Upload Files” and then click on “Select Files.” But since we already uploaded everything, I’m just gonna select on this image right here and click “Choose Image” and then you’ll see that the favicon actually should update once we refresh this page. So what I'm gonna do is "Save" and "Publish." Once everything is saved, I wanna show you what our website looks like right now. So if I go to another tab and type in our web address and click "Enter" we should see the changes that we just made. So we have our logo right here and then our favicon right here. So if your website doesn’t update and show these changes right away, what you need to do is go to your Dashboard and click on “Plugins” right here and then scroll down to the bottom where it says “WP Super Cache” and click on “Settings.” And what you need to do is delete your cache. So just click on this button right here and it will delete the files that are stored on your server. And what the cache really is is a way to speed up your website because it stores everything on your server. But since we’re updating and modifying our website, we actually wanna delete everything every time we update our website so that we can see the changes. So you might wanna keep this tab up in and just click "Delete" every time you wanna see the changes as we go through this web tutorial, okay? So now that we have our website right here, let’s move on to the next section. So let me show you what we’re gonna create next. So back on our demo website, we created this section already. So now we’re gonna move on to the next section which is the Services or About Section. So what we’re gonna do is create a bunch of services just like this. And then we’re gonna create this section for our Homepage. So what I want you to do is go back to your WordPress website and all we’re gonna do is click on this X right here that will bring us back to our WordPress Dashboard. Once you’re back on your WordPress Dashboard, what I want you to do is go down on the left hand side to Services and what we’re gonna click on is “Add New.” On the Add New Service page, the first thing that we wanna do is put in a title for our product or service. So I’m gonna type in “Photography” and you can put whatever title you want. And when you’re ready, come down to this next section where we’re going to put in a short description about the product or service that we’re creating. So what I’m gonna do is go back to the demo website and just highlight this short description right here and copy and paste it in just to save a little bit of time. But if you want, go ahead and type in a short description right here and when you’re ready, scroll down to this section where it says “Service Icon.” And right here, this is where we’re going to select the icon for this product or service that we’re creating. So what we can do is click on this link right here to see a list of all the icons that are available. And so we’ll get this new tab with this website and if we scroll down, you can see all of the icons that we can choose from. So once you find the one that you want, all you have to do is highlight the short code just like this and then copy it and then go back to your WordPress Dashboard and paste in that short code right here. And that’s gonna insert the icon for the service or product that you’re making. And right below that, you see this title that says “Service link.” So if you paste in a URL right here, your visitors can actually go to your website and click on the icon or the title and it will redirect them to another page. But you can see right here, we don’t actually have another link to another page. So we’re gonna leave this section blank right here. And if you want, you can always come back to this page and edit this later. So what I want you to do now is go to the category section right here and I want you to add a category. So click on this link right here that says “Add New Category” and we’re gonna add the same category for all the products or services that we’re gonna create because this is gonna help us create our Homepage section in a little bit. So right here just type in “type a” and then click “Enter.” And you’ll see that the category gets added right here to this list and now all we have to do is click on this button that says “Publish.” And once our service is published, let’s actually create another one together. So right here click on this button that says “Add New.” And once we’re back on this Add New Service page, remember the first thing that we wanna do is add a title. So right here I’m gonna type in “Strategy” this time and when you’re ready come down to this next section and then we’re going to put in a short description. So I’m gonna go back to the demo website and copy and paste this short description right here, again just to save some time. So I will paste that in right here and when you’re ready, we can scroll down to the Service icon section. And since we already have the webpage open that has the full list of icons, we can just click on that tab and then find the icon that we want. So I want this one right here. So I’m just gonna highlight the short code and copy that, and then go back to the WordPress website and paste that in right here. And again we’re gonna leave this box blank unless you wanna redirect your visitors to another page. And then right here where we have our Categories, since we already added the type a category or whatever category that you listed for your first service, we can just click this box right here instead of adding a new category. And now all we have to do is click “Publish” right here. And once we’re back on the Add New Service page, again we wanna put in a title right here. So this time I'm gonna type in “Strategy” and again you can put in whatever you want. And then right down here where we put in a short description, again, I’m going to go back to the demo website, the description right here and copy that, and then go back to the WordPress Dashboard and paste it in right here. And then I’ll just scroll down to the Service icon section and since we already have the website open that has a full list of our icons, I’m gonna click and open that tab right here. And then I’m gonna find the icon that I want and just highlight the short code and copy that and go back to the WordPress Dashboard right here and paste that in right here. And then I’m going to leave this box blank for the Service link. And right here where we have our category, since we already added the type a category or whatever category that you did for the first service or product that you made, we can just check this box right here next to type a and then we can just click “Publish” right here. And once that’s published, all we have to do to create another service or product is click on this button right here that says “Add New” or on the left hand side under Services, we can click “Add New” right here. So what I want you to do is post this video and create one additional product or service so that we can have three of them for our Homepage right here. And when you’re ready, you can push “Play” and then we’re gonna create this section. So go ahead and pause this video and create your last product or service, and if you want you can create additional ones and you can have multiple rows. But at least create one more and when you’re ready push “Play” and then we’re gonna create this section, okay? So I will see you in a few minutes. Okay, so now that you’re back we should have at least three different services listed. So if you want you can check out how many services you have by going on the left hand side under Services and clicking on “All Items.” Now we have three. So if you have more than three that’s fine. All I want you to do is make sure that you have the same category for your services. So it doesn’t have to be type a like I put right here, but you wanna just make sure that you have the same label. And if you don’t, go ahead and hover over any of your services and you can click “Edit” right here and then modify whatever you wanna modify. So now we’re going to create this Homepage section right here. So what we have to do is go back to our WordPress Dashboard right here and I want you to go to pages on the left and then click on “All Pages.” And once you’ve come to this page, just come down to the Homepage and click on that. Once you’re on your Homepage, come over here to the right and click on this tab called “Page Builder.” And this is a plugin that we downloaded a little bit earlier and what we’re going to be using pretty much to customize our website. So what we’re gonna do is create a bunch of blocks for our Homepage. So let me just show you what I mean really quickly. On the demo website, this Services section is a block and then right below it we have this Call to Action, and this is gonna be another block. And then the Recent Blog post right here is gonna be another block. So let’s create the first block for our Services section right here. So back on the WordPress Dashboard right here, what I want you to do is click on this button right here that says “Add Row.” And this is gonna insert our first block. So what we wanna do is change the number of rows from 2 to 1 and then click “Insert.” And now that we have our block, we wanna add a widget. So click on this button right here that says “Add Widget” and then you’ll see all of these widgets right here and some of them come from our theme and then these other ones come from plugins that we downloaded. So we want a Sydney Theme widget. So let’s click on this link right here right at the top and the one that we want is the "Sydney FP: Services Type A" widget. So click on that and then you can see it right here it gets inserted. And now what we want to do is click on this “Edit” button right here and then we’ll get this pop up. And then we wanna put in a title. So right here type in “Our Services" or "Our Products” whatever you want. And then you’re gonna leave this as -1 right here. And then for whatever category that you created for your Services, I want you to type that in right here. So for me, I put in type a as the category. And then we can just click “Done” right here. And then just click “Update.” And once that’s updated, we can actually go to our Homepage and see what that looks like. So let’s click on this button right here that says “View Page.” And once we’re on the Homepage, we can just scroll down and we should see the first block that we just created right here – Our Services. So keep on mind that the Products and Services show up from most recent on the left side to the oldest or first one that you create on the right side. So the other thing that I wanna mention is you can see right here the short description shows up with a gray font and the title right here and the title of our block is a black font. So what I wanna do is actually change the body text to a black font as well. So if you wanna do that also, you can follow along. What I’m gonna do is click on this link right here that says “Customize.” And then we should see our Customize options right here and we can just click on this "Colors" tab right here and scroll down to body text and click on this right here where it says “Select Color.” And then just choose this black box right here and then we can just click “Save" and Publish.” And then click the X right here. And once we’re back on our website, we can just scroll down and we should see that the font color has changed right here. So if you update you website or refresh your website and you don’t see the changes yet, what you probably have to do is go back to your settings right here and go to WP Super Cache and delete your cache. And what that’s gonna do again is delete the files on your server so that you can see the changes right away; otherwise, you might have to wait a little bit of awhile to see the updates, okay? So now that we’ve created this block, we can move on and create the next block. So let’s me show you what we’re gonna create next. So if I scroll down on the demo website, the next thing that we’re gonna create is this Call to Action right here. And what we’re gonna have is a title with a background image and then two little sections right here with buttons that are going to be linked to different pages that we’re gonna create a little bit later. So you can follow along to create this section or you can feel free to also create whatever you want for your website because what I’m really giving you is the tools to customize your own website. So if you want this Call to Action, let’s go back to our WordPress website and click on this link right here that says “Edit Page.” And once we’re back on the Edit Homepage, the first thing we wanna do is add a new block. So go to this button right here that says “Add Row” and click on that. And we wanna change the number of rows from 2 to 1 and then click this “Insert” button right here. And so this is our new row. And before we add any new widgets, let’s go to this wrench right here and hover over that and click on “Edit Row.” And what we’re gonna do is customize this row a little bit. So right here where it says “Theme”, click on that and you get this drop-down. And the first thing we’re gonna do is come down to this section where it says “Top/bottom padding.” And in this box right here I want you to type in 50 or 5-0. And let me explain to you what this is gonna do really quick. So on the demo website right here, you can see that we have the Service row right here and then we’re creating this Call to Action right here. And in between there’s some space and we also call that “padding.” And there’s also padding down here between the Call to Action and the Recent Blog Post. So what we’re trying to do is minimize that padding or that space. So it says right here that the default padding is 100px. So by putting fifty in here, we’re gonna reduce that padding or that space by 50%. So make sure you put in fifty right here and then you can just scroll down to this section right here that says “Background Image.” And so if you wanna insert a background image in your row just like what we’re gonna do right here, all you have to do is go to this section where it says “Background Image” and click on this button right here that says “Select Image.” And then we can go to our Media Library. So if you’re already uploaded all of your images then we can just select one here. And if you wanna upload a new file, you can actually just click on this tab right here that says “Upload Files.” And click on this button right here that says “Select Files.” And then you can find whatever photo you want in your folders. But since we already uploaded everything, I’m just gonna just click on the "Media Library" tab and find the background image that I want which is this one right here. And so it’s the background.jpeg and once I select it, I can just push “Done” right here and that’s gonna insert the background image. And the last thing we have to do right here is go to Row Layout. And then in this drop-down right here, click on “Full Width” and then we can just click “Save.” And now we wanna add a widget in this block. So click on this button right here that says “Add Widget” and the widget that we want is the “Layout Builder.” So find that and click on that and now we can just click on this “Edit link" right here. And so the layout builder allows us to add rows within a row. And what I mean by that is if you go to the demo website, there is a Call to Action row right here. And within this large row, there is another row for our Text Title right here and a row for our Call to Action buttons right here. So what we’re going to do is add two rows within this larger row. So back on the Layout Builder I want you to click on this button right here that says “Add Row.” And let’s change the number of rows from 2 to 1 and click "Insert". And now we wanna add a Text widget right here for our title, so click on this button that says “Add Widget” and the widget that we want is the Text widget. So scroll down to the bottom and find the one that says “Text” and click on that. And now let’s click on the “Edit link" right here and we can add a title for our Call to Action right here. So what I’m gonna is go to the demo website and just highlight the title right here and copy that and paste that in. And once you’re done putting in a title, go ahead and click on the “Done” button right here. And now we’re inserted the Call to Action title right here. So what I wanna do is customize this a little bit. So let’s hover over the wrench right here and click on “Edit Row.” And what we wanna do is click on “Theme” right here to get this drop-down. And the first thing that we wanna do is change the Top/bottom padding. So right here I want you to put in zero and then scroll down to the section that says “Color.” And what we’re gonna do is change the font for our title to the primary color that we chose when we customized our colors. So right here click on “Select Color” and you can choose the primary color right here or you can put in the color code right here. So what I’m gonna do is go to the NYC Tech Club website and on the Text Tutorial on step 15, I’m gonna take the color code right here that is the same for the primary color that I chose and copy that and paste that in right here and then you can see that the color updates. And once I do that I can click “Save” right here. And now we can add our second row which is the Call to Action row. So right here click on this button that says “Add Row” and the first thing that we wanna do is change the number of rows from 1 to 2. And what we’re gonna do is add a Call to Action widget right here and then another Call to Action widget right here. And once you’re ready, click on this button right here that says “Insert.” And now we wanna add a widget right here. So click on this button right here that says “Add Widget.” And the widget that we want is the "Sydney FP: Call to Action" widget. So once you find that, click on that and we can just make a copy of this by clicking on this link right here that says “Duplicate.” And what I want you to do is click and drag one of these over to the left hand side. So now we have the left Call to Action widget and the right Call to Action widget. So let’s edit the left hand side first. So we’ll click on this “Edit Link” right here and what we wanna do is leave the title blank, but we wanna put in some text right here for the Call to Action. So you can type in whatever you want. I’m gonna go to the demo website and just highlight this text right here and copy it. And what it says is “Take some time and meet our employees” and then I’m gonna paste it in right here. Once you’re ready, come down to the next section right here. And this is where we’re gonna put in a web address for our buttons. So when your visitors click on the button, they get redirected to another page. So what I’m gonna do is type in a URL for a webpage that we’re gonna create a little bit later. And you can follow along or you can put in whatever web address that you want right here or you can leave it blank and put in something later. So I’m gonna type in www. - the web address - howtowebby.com/meet-the-team. And so once you put something here, come down to the next section and this is where you’re going to put some text for your buttons. So I’m just gonna type in “Meet The Team.” And once you put something in here, let’s come to the right hand side and what I want you to do is click on this “Attributes” tab. And you’ll get this drop-down right here and what we’re gonna do is paste in some CSS. And what this CSS is gonna do is help us create this black box or dark background right here to separate our two Call to Actions. So if you wanna do that, what you have to do is click on this “Attributes” tab and then you can go into the YouTube description to the Call to Action section and copy and paste the CSS into this section right here. Or you can go to the NYC Tech Club Text Tutorial and go to step number 18 – the Call to Action section and scroll down to the bottom. And there’s this paragraph right here that says if you wanna create that background box just highlight this CSS right here and copy that and then just paste that in right here and then we can click “Done.” And now we can edit the Call to Action on the right hand side. So let’s click on this link right here that says “Edit” and we can leave the title blank, but we wanna put in some text right here in the Call to Action. So I’m gonna go back to the demo website and just highlight this text right here that says “Review Some Facts About Us” and copy that and paste that in right here. And when you’re ready, come down to the next section where we’re going to put in a web address for our buttons. So I’m gonna type in a URL for a page that we’re gonna create a little bit later. So I’ll type “www.howtowebby.com/about” So we’re going to create an About page together in this tutorial. And then right down here I’ll type in some texts for the buttons. So I’ll type “Facts.” And when you’re ready, come over here to the right hand side and click on this tab that says “Attributes” and we’re going to paste in some CSS again to create that black box or dark background for our Call to Action. So if you have this CSS, you can paste it in right here; otherwise, you can go to the YouTube description and go to the Call to Action section and copy and paste that CSS right here or you can go to the NYC Tech Club website and on step 18, you can get the CSS right here. So we’ll just highlight it and copy that and then we’ll just paste it in right here and all we have to do now is click “Done.” And now we have our Call to Action right here. So the last thing that I wanna do is modify the padding. So right here under the wrench click on “Edit Row” and click on “Theme” right here and where it says “Top/Bottom Padding” and this box right here, put in zero and then click “Save” and then click “Done” and then we can just click “Update” to save our changes. And once our page is updated, we can click on this button right here to see what our website looks like right now. So once we’re back on the Homepage, we can just scroll down and we should see this Call to Action section right down here. And we should have our two buttons that we’re gonna create pages four in a little bit. So now we can move on to the next section of the Homepage. So back on the demo website, the next section that we’re gonna create is this "Recent Blog Post" section. So what I want you to do is go back to your WordPress website and click on this link right here that says “Edit Page.” Once we’re back on the Edit Page, all we have to do is click to "Add a new row" and we wanna change the number of rows to 1 right here and click this "Insert" button. And then we wanna drag this below the Layout Builder. So what I want you to do is click on this up and down arrow right here and then just drag it below. And right here we wanna add a widget. So click on this button that says “Add Widget.” And the widget that we want is the "Sydney FP: Latest News" widget. So find that and then click on that and we can just click “Edit” right here. And all we want to do is add a title. So right here I’m gonna type in “Latest News.” And then we can just click “Done” and then we can actually just click “Update.” And once the page is updated, let’s click on this button to view the changes. And once we’re on our Homepage, let’s scroll down to the bottom and this is the Recent Blog post section. So it doesn’t look anything that great right now because we haven’t written any blog post. So we’ll eventually delete this one and add some new blog posts later on to this tutorial. And we’ll also add some custom CSS a little bit later to get rid this button right here. So don’t worry about the look right now. As long as we have this section right now, we’re good to go. So let’s move on and create the next section of the Homepage. So if we go back to the demo website, we’re gonna create another Call to Action right here with a button that’s going to be in line with the text. Alright, so let’s go back to the WordPress website and click on “Edit Page” right here. And once we’re back on our Edit Page, the first thing we wanna do is add a new row. So click on “Add Row” right here and make sure the number of rows is set to 1 right here and then click the “Insert” button. And so your row might be inserted in between some other rows. And what we wanna do is drag this to the bottom, so to do that we wanna click on this up and down arrow right here and just drag it all the way to the bottom. So make sure you new row is underneath the Latest News. Once we have it right here, we can click and add a widget, so click on this button right here. And let’s add the "Sydney FP: Call to Action" widget, so click on that. And now we can click on the “Edit Link” right here. So we’re going to leave the title blank, but we wanna put in some text right here for our Call to Action. So I’m gonna go to the demo website and just copy and paste this text right here. So what it says is “We love what we do. Need Inspiration? Check out what our clients are saying.” So once I copy that, I’m gonna paste it in right here. And once you’re ready, come down to this next section where we’re going to put in a web address for a web page for our button. So what I’m gonna do is type in a URL for a webpage that we’re gonna create in a little bit. So you can follow along if you want. I’m gonna type in www.howtowebby.com/success-stories. And then I’m gonna come down here and put in “Success Stories” for the text for the button. And then what I want you to do is check this box right here that says “Display the button in line with the text.” And what that’s gonna do is put our button right here in line with this text right here for our Call to Action, okay? So now we can just click “Done” right here and what we wanna do before we save this is hover over wrench and click “Edit Row.” We’re going to change the padding and do some other stuff. So click on “Theme” right here. Right here where it says “Top/bottom padding, I want you to put in 30 or 3-0 and then scroll down to background color right here. And what we’re gonna do is change the background color to a darker color. So you can go to the YouTube description and find the color code or you can go the NYC Tech Club website. And on the Text Tutorial on step number 20 right here, there is a color code that you can copy right here and then we can paste it in right in this box and you’ll see that the color gets updated right there. And then the last thing we have to do is scroll down to the Row Layout and in the drop-down, select “Full Width” and then we can click “Save” right here. And now let’s click “Update.” And once the page is updated, we can just click on this button right here to see the changes that we just made and we can just scroll down to the bottom of our website and we should see our new Call to Action right here. So now we can move on and create the next section of our website which is going to be inserting the Social Media buttons right here. So let’s go back to the WordPress website and let’s click on this link right here that says “Edit Page.” And once we’re back to this page, we have to enable some widgets. So come down to plugins right here and click on “Site Origin" widgets. And once you’re o the Site Origin page, come down to the Disabled tab and click on that. And what we wanna do is turn all of these widgets. So click on this “Off” button right here and just go through all the widgets and turn them all on. And this is just going to give us the option of using these widgets as we customize the rest of our website. And we know that we’re going to be using the social media buttons widget right here and also the Headline widget right here. So once you’ve turned everything on, we can actually go back to the Homepage. So let’s go to Pages right here and click on “All Pages.” And now just come right down to the Homepage and click on the “Edit Link” right here. Once we’re back on the Edit Page, we wanna add a new row. So click on this button that says “Add Row” and make sure the number of rows is set to 1. And then click the “Insert” button. And if your row shows up between some other rows, what we wanna do is click and drag it to the bottom. So right here click on this up and down arrow and just drag it all the way to the bottom. And once it shows up right here, we can add a widget. So go to the bottom that says “Add Widget” and click on that. And the widget that we want is the “Site Origin Social Media Buttons” widget. So click on that and once it shows up right here, click on the “Edit Link” right here. And then we’ll get this pop up and what we wanna do is click on this “Add” button right here to add our first Social Media button. So click on that and then right here where it says “Select network” if you click in here, you’ll expand this section. And what I want you to do is go to this drop-down right here, and you can choose any type of Social Media platform that you want to create your social media button for. So I’m gonna select Facebook first and then right here I'll put in the NYC Tech Club URL. And right down here, I’m gonna leave the icon color the same as the default. But I wanna change the background color for the buttons. So what I’m gonna do is put in the black color. So I’m gonna click on “Select Color” and I’m gonna change the color code. So if you want the same colors as the demo website, you can go to the YouTube description and in the social media button section, you can copy the code and paste that in right here or you can go to the NYC Tech Club website. And on the Text Tutorial on step number 21, you can find the color code right here which is 252525 and copy that and then just paste it in right here and you’ll see the background color change. So once you’re done, click right here to collapse this section and let’s add three more buttons. So I’m gonna click “Add” right here and click this area right here and then I’m gonna select the “Twitter” button. And right here I’ll just type in n-y-c-tech club and I’m gonna just change the color background again to the custom code and then I will collapse this section and add another button. So I’m gonna add a “Google Plus” button even though I don’t have a Google Plus account and just change the background color. And you can add as many social media buttons as you want. So it’s really up to you what you wanna do. So I’ll collapse this and add one more button. So I’ll click right here, and I’ll just add a “LinkedIn” button. And even though I don’t have an account, I’ll leave the URL just as is. And right here I will change the background color to this darker color and then click right here. And now once you're done adding all of your Social Media buttons, come down to the next section where it says “Design and layout” and what we’re going to do is customize some of the settings right here. So where it says “Button theme” I want you to change it to flat and then just come down to padding down here and we can click on “Low.” And then for alignment, click on “Center” and then we can just click "Done" right here. And once we’re back on this page, I wanna customize this row a little bit. So let’s hover over the wrench right here and click on “Edit Row” and then click on “Theme” right here. And the first thing I wanna do is change the top/bottom padding. So right here I wanna type in 10 or 1-0 and then come down here to the background color and click on “Select Color.” We’re gonna change this to a darker color. So you can go to the YouTube description and get the color code and paste it in here or you can go the NYC Tech Club Text Tutorial on step number 21 still. And right here where it says the color code is 1C1C1C, we wanna highlight and copy that and then just paste that in right here. And once we do that, we just wanna come down to the bottom where it says “Row Layout” and then go in the drop-down and select “Full width.” And then we can click “Save” right here. And now let’s actually click the “Update” button. And once our Homepage is updated, let’s click and see what it looks like right now. So click on “View Page” right here. And once we’re back on the Homepage, we can scroll down and see what our website looks like right now. And we should have the social media buttons right down here. So we’re gonna come back to the Homepage a little bit later and finish off our customizations. But right now what we’re gonna do is create the About Page. So what we’re gonna do is put in a title, we’ll insert an image and wrap it around some text. I’ll show you how to embed a video and then how to create this section right here with some stats and then we’ll insert a Call to Action in our social media section again right here, okay? So what I want you to do is go back to your WordPress website and let’s go to the Dashboard. So hover over your website name right here and click on the “Dashboad” link right here. Back on the Dashboard, what we wanna do is create a new page. So come down to Pages and click “Add New.” And the first thing that we wanna do is put a title for our new page. So right here I’m gonna type in “About.” And once you’re ready, come down to the section that says “Page Attributes” right here. And what we’re gonna do is change the template of this page to the front page, so clicking this drop-down and select “Front Page” right here. And then if we go back to the section right here, you can see that there is a Permalink. And this is the URL for this page. And you can see that it has the web address/about. And that’s because we put in “About” as the title for our page. If you wanna modify of edit the Permalink, all you have to do is click on this button right here that says “Edit.” And then you can change any of the text right here. But since we’re actually linking this page to one of our Call to Action buttons, I’m gonna leave this as is. So I’m just gonna click okay right here. And if you’re ready, come down to this section right here where it says “Page Builder” and click on this tab. And what we’re gonna do is create several rows for this page. So the first thing that I want you to do is click on this button that says “Add Row.” And what we’re gonna do is change the number of rows from 2 to 1 and then click this “Insert” button right here. And now we can add a widget right here. So let’s click on this button that says “Add Widget” and the widget that we want is the Visual Editor. So once you find that, go ahead and click on it. And then once the widget is inserted right here, let’s click on this “Edit Link”. And so the Visual Editor allows us to add text and images and a bunch of other stuff into our page. So the first thing I wanna do is put in a title. So right here, let’s put in “About Us” and then let’s come down to this section where you can write up a description about your website, your business or anything about you. So what I’m gonna do is go to the demo website and just highlight and copy this text right here. So copy that and then I’m just gonna paste it in right her just to save a little bit of time. And now let me show you how to actually link some of this text to another page. So if I wanna link the contact us text to a "Contact Us" page, all I have to do is highlight this text right here and then I can click on this button right here that says “Insert/edit link.” And then I’ll get this pop up and I can just type in the web address that I wanna link the text to. So If I type in www.howtowebby/contact-us now if I click on this “Add Link” button right here, now the text is linked to another page, okay? So now let’s add an image that we’re gonna wrap right here on the left hand side and push over our text on the right. So what I want you to do is click on this button right here that says “Add Media.” And we’ll get this pop up right here and if you already uploaded all of your images then on the media tab, you’ll see them right here and you can just select the one that you want. If you wanna upload a new image, all you have to do is click on this “Upload Files” tab right here and then just click on this button that says “Select Files.” And then go into your folders and find the image that you want and then you can upload it that way. Since we already uploaded all of our images, I’m gonna click on Media Library right here and then just choose the image that I want which is this one. And then I’m gonna scroll down to the Display Settings right here and what I wanna do is change the alignment to left to wrap it around the text. And then right here where it says “Link to” I’m gonna select “None.” And then I’m just gonna click “Insert” right here. And now we should see our image inserted right here on the left hand side and our text on the right hand side. So if you wanna change the alignment on the image, all you have to do is click on it and then you can click on any of these buttons right here to change the alignment or you can click on the pencil to edit the image or the “x” to remove the image. So now we’re gonna move on and embed a video. So I’m gonna show you how to do this in two different ways. The first is going to the text tab right here and then just creating two new lines right here. And what we’re gonna do is go to a YouTube video right here. And all we have to do is come down here to this Share Link right here and click on this and then click on the “Embed “ tab right here and we’re going to copy this HTML in this box right here. So highlight and copy that, and then go back to your WordPress website and we’re just gonna paste it in right here. And now if we go to the Visual tab we can see this box right here. And this is gonna be where the YouTube video that we just embedded is gonna be. So let’s check out what it looks like. Let’s click on this “Done” button right here and before we actually publish this, I wanna edit this really, really quick. So let’s go to the wrench and click on “Edit Row” and then click on “Theme” right here and where it says “Top/Bottom Padding” let’s put in 40 right here or 4-0. And then scroll down to the Row Layout right here and in the drop-down select “Full width.” And now we can click “Save” right here and now let’s push the “Publish” button. And once the page is published, let’s click on this button right here that says “View Page.” And now we can see what our About Page looks like right now. So we have our title, an image right here, some text and then our video right here. So really quickly I’m gonna show you how to embed the video the other way and how we can make it go all the way across the entire webpage. So we’ll do that really, really quickly and then we’ll move on and create the rest of this About Page. So I’m gonna go back and click on this link right here that says “Edit Page.” Okay, so once where back on the Edit Page, I’m gonna show you how to add a full width video really quickly. So all I have to do is add a new row and make sure it’s set to 1 right here and click "Insert". And then I wanna add a widget. So I’ll click this button right here and I’ll find the Sydney theme widget for the video. So Sydney video widget and then I’ll click the “Edit Link” right here and all we have to do is paste in the URL for the video. So if I go to YouTube, and I go to the “Share” tab right here, I can just copy this URL and go back to the WordPress website, and paste in that URL right there and you click “Done” right here. And then just edit the row really quickly, so if I go to Themes right here, I can put in whatever type of padding I want. So maybe I’ll put in 20 and then all I have to do right here is kind of important is in the Row Layout, you wanna select the “Full width Stretch.” And once I do that, I can click “Save” and then click “Update.” And once the page is updated, let’s click on this button that says “View Page.” And now if I scroll down the page, you can see this is the first video that we embedded and then this is the full width video that we just embedded right now. And it goes all the way across your screen, okay? So now I have given you both of these options to embedding videos and we can move on to creating the rest of the About Page. So let’s click on this link right here that says “Edit Page.” And once we’re back on the “Edit Page” the first thing that I wanna do is delete the row that I created for the full width embedded video. So I’m just gonna hover over the wrench and click on “Delete Row” and then click on “Are you sure?” And now that row disappears. And before we do anything on this page, I wanna remind you what we’re gonna create next. So if I go to the demo website and scroll down, we’re gonna create this Fact section or a place where you can put in some statistics about your business or you, okay? So let me go back to the WordPress website and the first thing that I wanna do is add a new row. So I’m gonna click on this button that says “Add Row” and I wanna change the number of rows from 2 to 1 and click the “Insert” button. And now I wanna add a widget, so click on the button that says “Add Widget” and the widget that we want is the “Sydneyfpfacts” widget. So once you find that, go ahead and click on that. And now we can click on the “Edit Link” right here. And then you’ll get this page right here and I’ve already filled out my information, but I’m gonna walk you through exactly what I did. I just don’t wanna waste any of your time since this is just a tutorial. So if I go to the demo website, you can see down here on the Fact section that we don’t have a title right in the middle, but we do have four facts. And on each of these facts, we have an icon, a fact name and then a value. So what we’re gonna do on the WordPress website right here is first, you’re gonna put in a fact name. So I put in “Projects” for my first one. And then you’re gonna put in a value, so I put about 750,000 in terms of the number of projects. And then for the icon, you’re gonna put in a short code. And how you get the short code is you click on this link right here and then we’ll get this webpage right here which should look familiar to you because we used it when we created the Services section on our Homepage. So in this webpage, there’s a bunch of icons that you can choose from for each of your facts. So you have to find the icon that you want and once you do, all you have to do is highlight the short code like this, copy it and then go back to your WordPress website and paste it into the Fact Icon section right over here. So I created my four facts which are projects, designs, customers and awards. What I want you to do is post this video and fill out these Facts section right here and when you’re ready, push “Play” otherwise we’re just gonna continue on. So when you’re ready, I want you to come over to the right over here and click on “Design.” And what we’re gonna do is change the font color for our Facts. So I want you to scroll down to font color right here and push this button that says select “Color.” And all we’re gonna do is change the font color to white. So I’m gonna click on this square right here that is white and then we can click “Done.” And what I wanna do now is edit this row. So I’m gonna hover over the wrench and click on “Edit Row” and then click on “Theme” right here. And for the Top/Bottom Padding, I’m gonna put in 30, so 3-0. And then I’m gonna come down to the background color and choose the “Background Color.” So I’m gonna push “Select Color” right here, and I’m going to put in a custom color code. So if you remember on the demo website, the color for this section is a red color. So what I’m gonna do is go to the NYC Tech Club Text Tutorial and on step number 22 right here, I’m gonna scroll down to the Section number 17 and there is a color code right here which is D650. I’m gonna copy that and go back to the WordPress website and paste that in right here. And you can see that the background color gets updated and then all we have to do is come down to the Row Layout and in the drop-down, select “Full width” and then we can click “Save” right here. And now we can click on the “Edit Link” right here. And once our page is updated, let’s click on this button right here that says “View Page” just to see the new changes. And now we can just scroll down the page and we should see our Facts section just like this. So if yours looks like this, then we can move on to the next section which is creating our Call to Action right here, okay? So let’s go back to the WordPress website and make that Call to Action. So we’ll click on this link right here that says “Edit Page.” Back on the Edit Page, the first thing that I wanna do is add a new row. So I’m gonna click on this button right here that says “Add Row” and I wanna make sure that the number of rows is set to 1 right here. And then we can click the “Insert” button and if your row shows up in between some other rows, what we wanna do is drag it to the bottom. So click this up and down arrow and just move it to the bottom and now we wanna add a widget. So click on the “Add Widget” button and the widget that we want is a Sydney theme widget, so you can click on "Sydney theme" right here and then find the "Sydney FP: Call to Action" widget and click on that. And now we can click on the “Edit Link” right here and we’re going to leave the title blank, but we wanna put is some text for our Call to Action. So I’m gonna go to the demo website and just highlight this text right here and copy this and then paste it into the WordPress website right here. And then for the link, I’m gonna put in the Contact Us Page so www.howtowebby.com/Contact-Us. And we’re going to create this page in a little bit. And then the title for this button is gonna be Contact Us and I wanna leave this unchecked. And then we can click “Done” right here. And what we wanna do now is edit this row. So hover over the wrench and click on “Edit Row” and then click on “Theme” right here. And for the Top/Bottom Padding, I’m gonna put in 30 or 3-0. And then come down here to the background color and click on this. And what we wanna do is put in a color code. So you can go to the YouTube description and copy and paste the color code or you can go to the NYC Tech Club Text Tutorial and on step number 22, scroll down to this section where it says number 23 right here. And highlight the color code right here which is 252525 and then go back to the WordPress website and paste it in right here. And you can see that the color code is updated. Now what we wanna do is come down to the Row Layout and in the drop-down select “Full width” and then we can click “Save” right here. And now let’s click the “Update” button. And once our page is updated, let’s click on this button right here that says “View Page.” And once we’re on the About Page, let’s scroll down to the bottom and we should see our Call to Action right here. So now let’s create the last section of the About Page which is going to be inserting the social media buttons right here, okay? So let’s go back to the WordPress website and click on the “Edit Page Link.” And once we’re back on the Edit Page, the first thing we wanna do is click and add a row. So make sure the number of rows is set to 1 right here and then click the “Insert” button. And if you remember, if the row is in between any other rows, we wanna drag it to the bottom. So click this up and down arrow and just drag it all the way to the bottom and now we can a widget. So click on the button that says “Add Widget” and the widget that we want is the Site Origin Social Media buttons widget. So click on that and then we’re going to click on the “Edit Link” right here. And if you remember how to add social media buttons, all we have to do is click this “Add Button” right here, expand this section and select the platform that we wanna use. So right here is Facebook and I’m gonna type in NYC Tech Club right here. And then we need to change the background color. So you can change it to whatever you want. If you want the color code go to the YouTube description or the NYC Tech Club Text Tutorial and on step number 21 right here is the color code 252525. So I will copy that and paste that in right here and you can see that the color changes. So I’ll collapse this and then I’ll click and add a new button, expand this and I will add a Twitter button and then I will type in my URL right here. I’ll change the color code right here and collapse this. And we will add two more buttons. So I’m just gonna click “Add” twice right here and first we’ll do the Google Plus. So we’ll change the background color right here. And then I’ll collapse this and expand this next one and we will add a “LinkedIn Button.” And I will change the background color again and then I will collapse this. And once you’re ready, come down to Design and Layout and expand the section and all we have to do is change the button theme to flat and then the padding to low and align this to center. And then we can click “Done” right here. And now what we wanna do is edit this row. So let’s go to the wrench and click on “Edit Row” and then expand this Theme section right here and for Top/Bottom Padding, I want you to put in 10 or 1-0. And then for the background color, you can go to the YouTube description to get the color code or the NYC Tech Club Text Tutorial. And up here is the color code that I want so 1C1C1C. I’m gonna copy that and paste that in right there and you can see the color gets updated. And then all we have to do is come down to the Row Layout and select “Full width” and then we can click “Save” right here. And now let’s just click the “Update” button right here. And once the page is updated, let’s click on this button one more time. And once we’re back on the “About Page” we can just scroll down and we should see the social media buttons right down here. So if you’re ready we can move on to the next step which is creating the Meet the Team page or the "Employees" page. So what we’re gonna do is create a bunch of individual employee pages and then create this page right here. So what I want you to do is go back to your WordPress website and we’re gonna go to the Dashboard. So hover over your website name right here and click on "Dashboard." Once we’re back on the WordPress Dashboard, the first thing that we have to do to create our Employees’ Page is create some employee profiles. So on the left hand side find the employees tab and hover over and click on “Add New.” Once we’re on the new Employee Page, the first thing that we wanna do is add a name right here. So go ahead and type in the name for your employee. I’m gonna put in a fake name. So I'll put in Addison's son right here. And once you’re ready let’s scroll down to this next section that says “Employee Info” right here. And what you have to do right here is put in a job title. So I’m gonna type in “Designer” for this employee. And then right below that you can add their social media URL right here. So if they have account with Facebook, Twitter and Google Plus, you can add the web addresses right here. And then right below that you can put in a custom link that will link to their name on the Employees’ Page. So if you wanna create another page that has more details about this employee or there is an external link that you wanna link them to then you can put it right here. And you can always edit this later. So I’m gonna leave this blank for this tutorial. And once you’re ready let’s come over to this section right here where it says “Featured Image.” And what we’re gonna do is set a featured image for this employee. So click on this link right here that says "Set Featured Image." And if you have already uploaded all your images, then you can select the one you want in the media library; otherwise, you have to go to the upload files tab and click on this button right here and go into your folders and find the images that you want and upload it that way. So I'm gonna go back to the Media library and just choose the image that I want for this employee and before I click on this button, I do want to note that the dimensions for all of these images for the employees on this tutorial is 200 by 200. So if you need to, you can click on this "Edit Image" right here and then you can modify the sizes of your images. Okay, so let me click on this button right here. And then we'll see our featured image right here. And so the last thing that we have to do is add a category name for our employee. And we're going to be adding unique category names for each of our employees to help build out the employee page. So what I want you to do is click on this link right here that says "Add New Category" and I'm gonna type in "EMP1" and that's gonna stand for Employee number 1. And you can put whatever you want right here and once you're ready, click "Enter" and then you'll see this categories list update and now we can just push this button that says "Publish." And once this employee's page is published, let's add another employee. So let's click on this button right here that says "Add New." Once we're back on the Add New employee page, the first thing we want to do is add a name right here. So I'm gonna put in Margaret Jones right here and when you're ready, come down to the Employee Info section and right here we want to put in a job title. So I'm gonna URLs right here for the employee's account. And then if you want, you can put in a custom link right here and then when you're ready, come to the featured section right here and click on this link right here that says "Featured Image." And then we wanna go to the Media Library and select the image that we want, so I'm just gonna choose this one right here and then click this button right here. And then the last thing that I wanna do is add a unique category name since we're going to be doing that for each employee that we create to help us create the employee page. So all I have to do is click on this link right here, and then I'm gonna type in "EMP2" for employee number 2 and then just click "Enter" and then this category list will update, and then I can just click "Publish" right here. And once the Employee page is published, let's create one more together. So let's click on this button that says "Add New." And once we're back on the add new employee page, I wanna quickly show you how to create one more employee. So right here, let's type in a name. I'll put in "Bob Peters" and once you're ready, let's come down to employee info right here and we want to put in a job title. So I'll type in "Programmer" right here and then you want to add their social media links right here and then you can put in a custom link if you want right here. And once you're ready, come over to the featured image section and click on this link and we wanna go to the media library if you have all of your images uploaded and just select the image that you want and then click on this button right here. And the last thing that we wanna do is add a unique category name. So right here click on this link and then I'm just gonna type in "EMP3" for employee number 3 and click enter and then I will see this list update and then I can click on this button that says "Publish." And now we can see the Employee page is published. So what I want you to do now is pause this video if you need to, to create your additional employee profiles, all you have to do is click this button right here to add a new employee. And when you're ready, go ahead and push "Play" and what we're gonna do is create this page right here. So what' I'm gonna do is create a total of nine employees. So if you need, go ahead and pause this video right now and create your additional employees and push play when you're ready. Okay, so if you pushed pause, and now you're playing the video, hopefully you created your additional employee profiles. What I've done is created nine employee profiles. You can see right here that each of these employees have their own unique category name. So you wanna make sure that each of your employees have their own category name right here. And once you're ready, let's create the employee page. So what I want you to do is come over to the left. Under pages right here, click on "Add New." Once were on the Add New page, the first thing that we have to do is type in a title right here. So I'm gonna type in "Meet the team." And when you're ready, come down to the page attributes right here and what we wanna do is change the template. So select "Front Page" right here and when you're ready, come up to the page builder tab and click on that. And the first thing that we wanna do is add a row. So we click on "Add row" and change the number of rows from 2 to 1 and then click the "Insert" button. And let's actually edit this row. So hover over the wrench right here and click on "Edit Row". And then click on theme right here. And for the Top/bottom padding put in 40 or 4-0 and then click "Save." And then let's add a widget. So click on the "Add widget" button. And the widget that we want is the visual editor. So once you find that you go ahead and click on it. And then we wanna click on the edit link right here and all we wanna do is put in our title right here. So I'm gonna type in "Meet Our Team" and you can also put in whatever content you want right here if you want; otherwise, click "Done." And now we're gonna add another widget right below it. So click on the button that says "Add widget" and the widget that we want is the "Sydney FP: Employees" widget, so click on that. And now we can click on the "Edit link" right here, and all we have to do is change the number of the employees to show right here from -1 to 3 and then we want to put in the employee category names right here for our first three employees that we wanna show on the top row. So I'm gonna type in "EMP1, EMP2, EMP3" and then I'll just click "Done." So if you need your employee category names, all you have to do is come over to the left hand side where it says Employees and click on "All items." And you'll get this page right here that will have a list of all your employees and then on the right side, you can see the employee category names. Okay, so I'm gonna go back to the WordPress website and the next thing we wanna do is add another row for our second row of employees. So I'm gonna click on "Add Row" and just make sure that the number of rows is set to 1 right here. And then click "Insert." And let's edit this row really quickly. So under the wrench, click "Edit Row" and click on "Theme" right here. And let's put in 30 this time for the Top/bottom padding and click "Save." And now let's add a widget. So click on the bottom that says "Add widget" and the widget that we want is the "Sydney FP: Employees" widget, so click on that. And then we'll click on the "Edit link" right here. And again, we're gonna change the number of employees to show to 3 per row and then we're going to put in another set of category names right here for our employees. So I'll type in EMP4, EMP5, EMP6 and then I'll just click "Done." And now let's add the last row of our employees for the demo website. So click on "Add row" and make sure the number of rows is set to 1 and then click the "Insert" button here. And if your row shows up in between your other rows, we wanna click and drag it to the bottom. So click on this up and down arrow and just bring it down to the bottom. And now let's edit this row. So hover over the wrench and click on "Edit Row" and then click on "Theme" right here. And let's put in 30 for the top/bottom padding, so 3-0 and then click "Save." And again, we're going to add a widget. So click on the button that says "Add Widget" and the widget that we want is the "Sydney FP: Employees" widget so click on that. And then click on the "Edit link" right here and just change the number of employees to show that 3 right there. And then let's type in some more category names right here. So I'll type in EMP7, EMP8, EMP9, and then I can just click "Done." And now let's click on this "Publish" button right here. And once the page is published, let's click on this view page button. And now we can see what the employee page looks like right now. So if you hover over any of these images, you get additional details about the employee such as their job title and then links to their social media accounts right here. So the next thing that we wanna do for this page is create the Call to Action right down here. So let's go back to the WordPress website and click on "Edit page." Once we're on the edit page, the first thing that we have to do to create our Call to Action is add a new row. So click on "Add Row" and make sure the number of rows is set to 1. And then click "Insert" and if your row shows up in the middle, let's drag it to the bottom so let's click on this up and down arrow and move it all the way down here. And now let's edit this row. So click on the "Edit Row" link right here and what we wanna do is click on "Theme" and where it says Top/bottom padding, I want to put in 30 or 3-0. And when you're ready, come down to the background color and click on this. And you can go to the YouTube description or the NYC Tech Club Text Tutorial and copy in the color code that you need or you can choose whatever color you want. I'm just gonna type in the color that I want since I remember it. It’s 252525 and you can see right here the color gets updated. When you're ready, come down to the Roll Layout and select “Full Width” and then we can click "Save". And now we just wanna add a widget. So go to the button that says "Add Widget" and click on that and the widget that we want is the "Sydney FP: Call to Action" widget. So click on that. And now we can click on the edit link right here and all we wanna do is add some text right here for our Call to Action. So I'm gonna go to the demo website and just copy in this text right here. So highlight this and copy it and then go back to the WordPress website and paste that in right here. And then for the link for the button, I'm gonna type in www.howtowebby.com/contact-us and we're going to create this page in a little bit. And then for the title for the button, I'm just gonna type "Contact Us" and once you're ready, click "Done." And now let's click on this "Update" button just to save our changes. And once the page is updated, we can click on this "View Page" just to see what it looks like right now. And on the Employees page, if we scroll down, we should see the Call to Action right down here. So now let's create the last thing on this page which is the social media buttons right here. So let's go back to the WordPress website and click on this link right here that says "Edit Page." Once we're back on the edit page, let's add a new row for our social media section, so click on "Add Row" and make sure the number of rows is set to 1. And then click the "Insert" button. And now let's drag down the row to the bottom. So click on this up and down arrow and just bring it all the way down to the bottom. And now let's edit the row. So hover over the wrench and click on "Edit Row" and then click on theme right here. And what we wanna do is change the Top/ bottom padding to 10, so put in 1-0 right here. And then click on "Background color" right here. And you can choose whatever color you want for the background. I'm gonna put in the color code that I want. So I'll go to the NYC Tech Club Text Tutorial and again, on step number 21 where we create the social media section, what I want is the color code right here. So 1C1C1C. I'm gonna highlight and copy that, go back to the Wordpress website and just paste that in right there. And now you can see that the color code gets updated. So now, I wanna scroll down to the row layout and select “Full Width” right here and then click "Save." Now we can add a widget right here. So click on the button that says "Add Widget" and the widget that we want is the Site Origin Social Media Buttons widget. So find that and then click on it. And then click on "Edit" right here and if you remember, all we have to do is to click this "Add Button" to add social media buttons. So I'm gonna click this four times really quick just to get our four social media buttons and then I’ll expand each of these sections and select the social media platform that I want. So Facebook first, type in NYC Tech Club right here. And then again, remember, we want to change the background colors to be consistent with all of our other web pages. So I'm gonna click on "Select Color" right here and then go to the text tutorial and get the color code that I want. So it's 252525. I will copy that and then just delete this and paste it in and see it change right here. Then I'll collapse this section, open up the next one and then choose Twitter. Again I'll put in NYC Tech Club and then select the background color and change this. And then collapse the section, open up the next one, and choose Google Plus and then just change the background color since I don't have an account with Google Plus. Collapse this and then open up the last one and select LinkedIn. And again, change the background color code right here and collapse that. And once you're ready, come down to design and layout and expand this section and we're just going to customize this a little bit so where it says button theme, I'm gonna choose flat and then right words says padding, I'll choose low and then alignment, I'll choose center. And now we can just click "Done." And once we click done, let's go to the "Update button" and click on that. And once we're on the employee page, we can just scroll down and we should see our social media buttons right here. So we're pretty much done with this webpage. So now we can actually move on and create the next page which is the Portfolio or Image Gallery page. So this is what it looks like and if you click on any of these images right here, you get this pop up and then you can go through them with a slider like this. And so if you're ready, let's go back to the Wordpress website and we're going to be creating a new page. So you can hover over new right here and click on "Page." Once we're on our new page, the first thing that we wanna do is put in a title. So I'm gonna type in "Image gallery" and when you're ready, come down to page attributes and under template, let’s choose the "Front" page template and then let's go to the "Page Builder tab" and click on that. And we want to add a new row. So click on the button that says "Add row" and change the number of rows from 2 to 1, and then click "Insert" right here. And now let's add a widget. So click on "Add Widget" and the widget that we want is the visual editor. So click on this. And now let's click on the "Edit Link" and we wanna put in a title for our page. So I'm gonna type in "Our Work" and then come down to this section right here and this is where we're going to put in the images for our gallery. So what we wanna do is click on "Add Media." And then we wanna click on this link right here that says "Create Gallery" and what we can do is select images in our media library right here or we can upload new images if we click on this "Upload Files" tab and push this button right here. And then you can go into your folders and find your images and you can upload it that way. Since we already have everything uploaded, I'm gonna click on "Media Library" right here and just select twelve different images that I want. So all I have to do is push any of these images and you can see the checkmark right here and that means that these are selected. So let me just choose two more. So I'll choose this one and this one. And once you're ready, go ahead and push this button right here that says "Create a New Gallery." And what you'll see right here is your image gallery and what you can do is add captions right here or you can actually click and drag these two in different position if you want. So when you're ready, come over to the gallery settings and what we have to do is change the link to attachment page to link to media file. And then if you wanna change the number of columns per row, you can do that here. So I'm gonna select "Four" right here and then we can just click this button right here that says "Insert gallery." And then you'll see your gallery right here and if you ever wanna modify or edit this, all you have to do is click inside and then click on the pencil right here and you can edit. So once you're ready, go ahead and click "Done" right here. And now let's push this button that says "Publish." And once our page is published, we can click on this button right here that says "View Page" and you can see that this is what our portfolio page looks like right now. So we don't have any spacing in between these rows to separate these images. So if we wanna do that, we have to modify some settings in one of our plug-ins. So what I want you to do is hover over your name right here and click on the "Dashboard." And once we're back on our Dashboard, come down to appearance and click on this link right here that says "Light Box Plus." And all we have to do on this page is scroll down to the second set of settings right here, and check this box right here where it says "Use for WordPress galleries" and then click this button right here that says "Save All Settings." And once the settings are saved, we can just go to our portfolio page and check it out. And now we have our space between each row to separate our images. And if we click on any of these, we can see the pop-up and then we can slide through them and see all of our image gallery, okay? So now let's create the next section of this webpage which is going to be the Call to Action. So let's go back to the WordPress website and click on this "Edit Page" link. Once we're back on the edit page, we need to add a new row. So click on this button right here and make sure the number of rows is set to 1 and then click the "Insert" button. And now let's edit this row. So hover over the wrench and click on "Edit Row." And then click on theme. And the first thing we want to do is put in 30 for the Top/bottom padding, so 3-0 and then come down to the background color. And you can go to the YouTube description and get the color code or the NYC Tech Club Text Tutorial on the Create a Call to Action section and just highlight the color code which is 252525 and copy that and paste it in and then you'll see the color get updated. And then the last thing we have to do is change the row layout to full width and then we can click "Save" right here. And now let's add a widget right here. So click on the button that says "Add Widget. And the widget that we want is the "Sydney FP: Call to Action" widget. So click on that and then click on the "Edit Link." And what we need is to add some text right here for our Call to Action. So I'm gonna go to the demo website and just copy in this text. So I will highlight it and then I will copy it and go back to the WordPress website and paste it in right here. And then I'll create a link for the button, so I'll type in www.howtowebby.com/contac-us and we're gonna create this page in a little bit. And then we want to put in a title for the button. So I'm gonna type in "Contact Us" and then we can just click "Done" right here and then let's push this button that says "Update." Once the page is updated, we can click on this button right here that says "View Page." And now we can just scroll down and we should see our Call to Action right here. So now let’s create the Social Media section of our page. So let's go back to the WordPress website and click on this link that says "Edit Page." And once we're back on the edit page, the first thing that we want to do is add a new row. So click on "Add Row" and make sure the number of rows is set to 1. And then click this "Insert" button right here and if you need to, drag this row to the bottom. So what we're gonna do is click on this up and down arrow and just drag it on down. And now let's edit this row. So hover over the wrench and click "Edit Row". And then we're gonna click on theme right here and for Top/bottom padding, we're gonna put in 10. So 1-0. And then come down to the background color and push this button. And you can go to the YouTube description and copy paste the color code or you can go to the NYC Tech Club Text Tutorial and on the create social media widget section, we have to just highlight the color code right here. So that's 1C1C1C and then copy that and paste it in. And you can see that the color gets updated right here. And now let's just scroll down to the row layout and select “Full Width” and then click "Save" right here. And now let's add a widget right here. So click on the button that says "Add Widget" and the widget that we want is the Site Origin Social Media Buttons widget. So once you find that, click on that. And now let's click edit right here. And again, to add social media buttons, all we have to do is click this "Add Button." So I'm gonna click it four times just to add four buttons. And then I'm going to expand the first section and select Facebook and then I'll type in NYC Tech Club right here. And what I wanna do is change the background color of the button. So I'll click on this "Select Color" right here and then I wanna delete this color code right here. And I'm gonna go to the NYC Tech Club Text Tutorial and just highlight the color code that I want which is 252525. Copy that and paste it in. And then you'll see the color update right here. And then I'll collapse the section, open up the next one and select Twitter right here. And type in NYC Tech Club and then just change the background color to the color code and then collapse this one and then add the Google Plus button and just change the background color right here. And then let's do this one more time. So I'm gonna select LinkedIn this time and just change the background color right here. And once you're done, let's expand the design and layout section and let's customize this a little bit. So for button theme, I'm gonna choose flat and then for padding, I'm gonna choose low. And then for align, I'm gonna choose center. And then we can just click "Done" right here. And now we can just click this "Update" button right here. And once the page is updated, let's click on this button right here that says "View Page." And once we're on the portfolio page, we can just scroll down and we should see our social media buttons right here. So now, we're actually done with this page and we can move on and create the next page which is going to be the Contact Us page. So what we'll do is put in a small description or contact information right here. We'll embed a map and then put in a contact us form right here and then add the social media buttons at the bottom. So what I want you to do is go back to the WordPress website and let's go to the Dashboards. So hover over your name and click on "Dashboard." Once we're on the Dashboard, let's go down to pages and click on "Add New." Once we're on the add new page, the first thing we wanna do is put in a title. So right here, type in "Contact Us" and when you're ready come down to the page attribute section and under template, let's choose the front page template. And then when you're ready, come to the "Page Builder" tab and click on that. And what we want to do is add a row. So click on the button that says "Add row" and change the number of rows from 2 to 1. And then click the "Insert" button. And now lets' edit this row. So hover over the wrench and click "Edit Row", and then click on "Theme" right here. And for Top/bottom padding, let's put in 40, so 4-0. And then let's come down to the row layout and click on full width and then click "Save" right here. And now let's add a widget right here. So click on the button that says "Add Widget" and the widget that we want is the visual editor. So click on that. And now let's click on the edit link right here and what we wanna do is put in a title. So right here, type in "Contact Us." And when you're ready, go ahead and push "Done" right here. And now what we wanna do is add another row. So click on the button that says add row, and we wanna keep this as 2 this time. So make sure this is 2 and then in here, we wanna change this to 70%. So type in 7-0 and then change the other one to 30%. So type in 3-0 and then just click right here and you can see that this resize. And now what we wanna do is click "Insert". And now let's edit this row. So hover over the wrench and click on "Edit Row". And then click on "Theme" right here, and for the Top/bottom padding, let's put in 20, so 2-0. And then let's come down to the row layout and change this to full width and then click "Save" right here. And now we wanna add a widget right here. So let's click the button that says "Add Widget" and the widget that we want is the visual editor. So click on that and then click on the "Edit Button" right here. And if you push this button right here that says toolbar toggle, you'll expand this section and have some additional font settings right here. So what we wanna do is put in some contact details right here. So on the demo website, you can see we have our email, phone number and then actual address. So on the WordPress website, I'm just gonna paste in that detail right here and you can type in whatever you want. And you can also highlight some of those text and push this button right here and it will bold your text. So I'm gonna do that really quickly for all of these sections. So let's do it one more time and push bold. And then what we wanna do is add a horizontal line right underneath. So I'm gonna create a new line and then just push this button right here that says "Horizontal Line" and insert that right here. So right here where it says email, you can see that my email address is contact@howtowebby.com. So if you wanna create an email address that's going to be associated with your web domain, I'm gonna link you to a video that I created on how to do this in the YouTube description. So what you can do right now is put in the email address that you wanna create a little bit later right here or put in any other email address. And so we can also link this email if we want and all we have to do is go to the text tab and type in some html. So if you want, you can follow along. So right here, right before the email address, I'll put in a open bracket and then type in A space H-R-E-F. And then I will put equal sign and then quotes, mail to, colon and then I will have the email address right here. And then at the end, I'll put in quotes again and then a close bracket. And then you want to put in text that you're gonna link it to. So I'll type in contact@howtowebby.com and then we just have to do an open bracket, slash A close bracket. And now if we go back to the visual tab, you can see that your email is linked. So if your visitor clicks on it, they can just email you directly. So once you're ready, let's click on this button right here that says "Done." And now we wanna add another widget right underneath this. So click on the button that says "Add Widget" and the widget that we want is the "Site Origin Google Maps" widget. So click on that. And now let's click on the "Edit Link" right here. And what you can do is put in your address right here. I'm just gonna type in New York, New York and then when you're ready, come down to the height right here. And we wanna change the height to 2-50. So make sure you type that in and then we can just click "Done" right here. And now we wanna add a widget on the right side over here. So let's click on this button that says "Add Widget" and the widget that we want is the "Visual Editor." So once you find that, click on that. And we wanna get some shortcut that we can paste in here. So the first thing I want you to do is click on "Save Draft." And once the page is saved, come over to the left over here where it say contact and click on "Contact Forms." So the contact form is a plug in that we downloaded earlier in this tutorial and by default, they create a contact form for us. So all we have to do is come down here, and click on this link that says "Contact Form One." On the edit contact form page, come down to this tab right here that says "Mail" and click on that. And you'll see these two section right here. And inside is your default email address. And this is where all the messages that you're gonna be sent or gonna go. So if you wanna change this, go ahead and do that and if you wanna put in the web address that's gonna be associated with your web domain, you can do that as well as long as you create that later. If you make any changes, go to this button right here and click "Save" and if you don’t' want to make any changes, then let's go back to the contact forms page. So right here under contact, click on "Contact Forms." Once you're back on the contact forms page, all we have to do is come down here to the short code for this contact form. And we wanna highlight this section right here and copy that. And now we're gonna paste it into our visual editor widget. So we're gonna go back to our Contact Us page by hovering over pages and clicking on all pages. And now let's just come down to the contact us page and click on this "Edit Link" right here. Once we're back on the contact us page, just come down to the visual editor widget right here and click on the "Edit link." And once we're on this page, click on the tab right here that says "Text" and then paste in the short code right here. And that's gonna insert the contact us form. And now we can just click on this "Done" button right here. And now let's click this "Publish" button right here. And once the page is published, let's click on this publish button right here that says "View Page" and see what it looks like. And once we're on the contact us page, this is what it should look like right now. So now we can move on and create the social media icons right on the bottom. So let's go back to the WordPress website and click on this link right here that says "Edit page." Once we're back on the edit page, the first thing that we wanna do is add a new row. So click on this button, "Add Row" and make sure the number of rows is set to 1 right here. And then click the "Insert" button. And if we need to, let's drag this row to the bottom. So click on this up and down arrow and just move it down here. And now let's edit this row. So hover over the wrench and click on "Edit Row". And then we're gonna click on "Theme" right here, and for Top/bottom padding we're gonna put in 10 or 1-0. And then for the background color, you can go to the YouTube description or the NYC Tech Club Text Tutorial and get the color code. The color code is gonna be 1C1C1C for what we're using for the demo site. So you can see it gets updated right here and then we can just come down to the row layout and select “Full Width” and then we can click "Save" right here. And now we wanna add a widget right here. So click on button that says "Add Widget" and the widget that we want is the "Site Origin Social Media Buttons" widget. So click on that and then click on the "Edit Link" right here. And what we wanna do is add four buttons. So click on this button right here four times and when you're ready go ahead and click and expand this section right here and you can choose the platform that you want. So I'm gonna choose Facebook and then type in NYC Tech Club right here. And then I wanna change the background color of the buttons. So I'm gonna push this right here. And then you can get the color code in the YouTube description or the NYC Tech Club Text Tutorial on the social media widget section. Come right down here and highlight this color code which is 252525 and then copy that and paste it in right here. And then we can collapse this and open up the next one. And I'm gonna choose Twitter and type in NYC Tech Club right here. And then change the background color to the color code and then collapse this. And then open up this next one and choose Google Plus. And then change the background color, collapse. And then one more time, I'll choose LinkedIn and then just change the background color right here. And then collapse this. And once you're ready, come down to design and layout. And let's click and expand this section and just customize this a little bit. So for button theme, I'll choose flat. And then for padding, I'll choose low. And then for align, I'll choose center. And once you're ready, go ahead and click this "Done" button right here. And now let's push the "Update Button" right here. And once the page is updated, let's click on this button right here that says "View Page." And now we can see what our Contact Us page looks like. So we have our social media buttons down here and embedded map right here, some contact information right here and then our Contact Us Form right here. So now we can actually move on and create our next page which is the Testimonial page, also known as the Success Stories page. So this is what it looks like. And what we’re gonna do first is create some testimonials and then we'll create this client section and then we'll build out the rest of the webpage including embedding some videos that can be video testimonials, okay? So let's go back to the WordPress website and the first thing we're gonna do is go to the Dashboards. So hover over your name and click on the "Dashboard link" right here. Once we're on the Dashboard, the first thing that we're gonna do is make some testimonials. So come down to testimonials and click "Add New." On the add new testimonial page, the first thing that we wanna do is put in a name right here for the person that's giving the testimonial. So I'm gonna type in Helen Owen right here and when you're ready, come down to this section right here. And this is where you type in your testimonial. So what I'm gonna do is just paste in some gibberish just to save some time and then we can scroll down to this section right here. And this is where you put in a job title and a company name for the person that's giving your testimonial. So I'll put in "Director" right here and then just type in "Goldman Sachs." And then what we wanna do is come down to this section right here where it says "Featured Image" and we wanna upload an image. So click on this link right here that says "Set Featured Image" and I'm just gonna go to the media library and click on the image that I want and then click on this button right here. And then the last thing that we wanna do is add a unique category name for this testimonial. So click on this link right here and then I'm just gonna type in one right here and click "Enter." And we wanna create unique category names for each of our testimonials to help us create that testimonial page. So once you see the category name right here, we can click on this "Publish" button right here. And once the testimonial is published, let's click and add a new one together. So click on this button right here that says "Add New." And once we're back on the add new testimonial page, the first thing we wanna do is put in a name right here. So I'm gonna type in "James King" and then right down here is where you type in your testimonial. So I'm gonna paste in some gibberish and then we wanna put in a job title and a company name right here. So I'll put in Designer and then I'll put in Adobe. And then we can scroll down to the Featured Image section and upload an image. So click on this link right here. And then in the media library, I'll just select an image that I want and click on this button that says "Set Featured Image." And then you'll see the featured image right here. And now let's add a unique category names once again. So click on this link right here. And this time I'm gonna type in 2 and click "Enter" and then I'll see it update right here. And then we can just push "Publish." And once that testimonial is published, let's create one more together. So click on this button right here that says "Add new." And back on the add new testimonial page, let's put in another name right here. So I'll just type in Justin Bieber. And then right down here I'm gonna paste in some gibberish for the testimonial. And then I'll scroll down here and just put in singer/artist. And then, I'll come down to the featured image section and click on this link and go to my media library and select the image that I want. And then click this button right here. And then once the image shows up right here, all I wanna do is add another unique category name. So I'll click on this link right here and then I'll just type in 3 and push "Enter." And then I'll see the category list update and then we can push "Publish." Once that testimonial is published, the next thing that we're gonna do is create this client list with some logos. So on the WordPress website, let's go down on the left hand side to clients and click on "Add new." On the add new client page, all we have to do is put in a title right here. So I'm gonna type in "Client 1." And then we just wanna upload a logo. So if you come down to the featured image section and click on "Set Featured Image" we can either upload a logo using this upload files tab and clicking on the button here or if you already have your logos uploaded, then we can click on media library and just find the logo that we want. Click on that and then click on the "Set Featured Image" button right here and then you'll see the logo right here and then we can just push "Publish." Once our client is published, let's create another one together. So click on "Add New" and once we're back on the add new client page, the first thing we wanna do is add a title. So I'll put "Client 2" right here. And then we just want to upload a logo. So come down to the featured image and click on this link right here. And in my media library, I'm just gonna scroll down and find the logo that I want which is this one. And just so you know, the logos are 90 by 90 in dimensions. So keep that in mind when you upload your own logos. And so once you're ready, click on the "Set Featured Image" button right here and then we can just push "Publish." And once this client is published, what I want you to do is pause this video and create three additional clients. And the reason why we wanna create three additional clients is because we're going to have a row of five client logos right here. So once you're ready, go ahead and push "Play" and then we're gonna create this page. Okay, so if you paused this video and created your additional clients, then you should have a list of five clients right here. So now we're gonna create the Testimonial page. So what I want you to do is go to pages and click on "Add New." Once we're on the add new page, the first thing that we wanna do is put in a title right here. So I'm gonna type in "Success Stories: and when you're ready, come down to the page attribute right here and let's change the template to the front page template. And then what we wanna do is click on this "Page Builder" tab right here and let's add a row. So click on the button that says "Add Row" and let's change the number of rows from 2 to 1 and then click the "Insert" button right here. And now let's edit this row. So hover over the wrench and click on "Edit Row" and then click on this "Theme" tab right here, and for Top/bottom padding, let's put in forty. So 4-0. And then let's scroll down to the row layout and choose full width and then click "Save." And now what we wanna do is add a widget right here. So click on the button that says "Add Widget" and the widget that we want is the "Visual Editor." So once you find that, click on that. And now let's click on the "Edit Link" right here and we just need to put in a title. So I'm gonna title this "What Our Clients Are Saying" and once you put in your title, go ahead and click "Done" right here. And now what we wanna do is add a row below this. So click on the button that says "Add Row" and make sure the number of rows is set to 2 right here. And then click the "Insert" button. And now let's edit this row. So hover over the wrench and click on "Edit Row". And then click on the "Theme" tab right here. And then where it says bottom border color, we're going to put in a color right here. So click this button that says "Select Color." And what we're going to do is put in the primary color code. So I'm gonna go to the NYC Tech Club Text Tutorial and on step number 26 right here where it says "Create Testimonials" page, I’m gonna scroll down to the section where we create the page and right down here, I'm going to highlight this color code. So the color code is D63737 and I'll just copy that and go back to the WordPress website and paste that in right here and you can see that the color code gets updated right here. And then when you're ready, come down to the Top/bottom padding right here and what we're gonna put in is 20. So put in 2-0 and then click "Save" right here. And now I wanna add a widget on the left and a widget on the right. So let's click on the button that says "Add Widget." And the widget that we want is the "Site Origin Video" widget. So click on that. And now let's make a copy of this. So click on a duplicate link right here. And we can just click and drag this over. So now we have one on the left and one on the right. So let's edit the left hand side first. So click on the "Edit Link" right here and all we have to do is click on the button right here that says "Externally Hosted" and then we can just paste in the video URL right here. So if I go to the YouTube page and I find the video that I want, all I have to do is come down here to where it says "Share" and click on that and then take this URL right here and copy that. And then go back to the WordPress website and paste that in right here. And this is gonna embed the video on my webpage. So now we can click "Done" right here and we can do the same to the right hand side. So click on the "Edit Link" right here and then we wanna select "Externally Hosted" right here and now let's get the URL for our video. So if I go to another video which could potentially be one of your testimonials, click on the "Share Link" right here and then just get the URL and copy that. And then come back to the WordPress website and paste that in right here. And then just click "Done" right here. And now let's click the "Publish" button right here. And once the page is published, let's check out what it looks like. So let's click on this button right here that says "View page." So this is what the testimonial page looks like right now. So we have our title and then two videos that are potentially video testimonials. So the next thing that we're gonna do is insert the testimonials that we created a little earlier right here. So let's go back to the WordPress website and click on the "Edit Page" link. Once we’re back on the Edit Page, the first thing that we wanna do is add a new row. So click on the button that says "Add Row." And we wanna change the number of rows to the number of testimonials you have. So right here since we created three testimonials, I'm gonna put in 3 right here. And then we can click "Insert" when you're ready. And now we wanna drag this row to the bottom. So what we wanna do is click the up and down arrow and then just move it down. And now let's edit this row. So hover over the wrench and click "Edit Row." And then click on "Theme" right here and where it says Top/bottom padding, we're gonna put in 40 or 4-0. And then when you're ready, click on "Save" right here. And now what we wanna do is add a widget into each of these rows. So click on the button that says “Add Widget” and the widget that we want is the "Sydney FP: Testimonials" widget. So once you find that, click on that. And let's make copies of this. So click on the link right here that says duplicate two times and then we can just click and drag these over so we have one on each row. And now let's edit the left hand side one first. So click on the "Edit Link" right here and all we have to do is change the number of testimonials to one right here and then put in the category name for our first testimonial. So I'll put in 1. And if you don't remember what the category names are, all you have to do is go to your testimonials page and you can see a list of your testimonials right here and then you have your category names right here. So back on the WordPress website, once you put in the category name, all we have to do is push "Done" right here. And now we can edit the next one right here. And so again, we will put in 1 right here and then the category name right here is gonna be 2. And then I'll click "Done." And then I'll do the third one. On the right hand side, I'll click "Edit" change the number of testimonials to show to 1 and then just type in 3 for the category name right here. And then I'll click "Done" and when you're ready, we can click "Update." And once the page is updated, let's just click on "View Page" to make sure the updates are correct. And once we're on the testimonials page, we can scroll down and we should see the testimonials that we just inserted. So now we can move on and insert the logos right here for our clients. So let's go back to the WordPress website and click on this link right here that says "Edit Page." Once we're back on the edit page, the first thing that we have to do is add a new row. So click on the button that says "Add Row" and make sure the number of rows is set to 1. And then click the "Insert" button. And if we need to, let's click and drag this row to the bottom. So right here, click the up and down arrow and just move it down here. And once it's placed here, let’s hover over the wrench and click on “Edit Row.” And click on the “Theme” tab right here. And the first thing that we're gonna do is change the Top/bottom padding to 30. So put in 3-0. And then we're gonna change the background color. So select “Color” push that and what we wanna do is put in a custom color code. So you can go to the YouTube description or the NYC Tech Club Text Tutorial and on step number 26, just scroll all the way down to step number 25 right here and there is a color code that I want you to highlight which is E F E F EF and then copy that and paste it in right here. And you can see that it is a light grey color. And once we're done, we can come down to row layout and what we wanna do is select “Full Width” and then click "Save" right here. And now we want to add a widget. So click on the button that says "Add Widget" and the widget that we want is the "Sydney FP: Clients" widget. So once you find that, click on that and then we can just click on this "Edit Link" right here and all we have to do is make sure that this says "-1" right here and then we can click "Done" and now we can just click "Update." And once the page is updated, let's check out what it looks like. So let's click on this button right here that says "View page." And once we're on the testimonials page, we can just scroll down and we should see our client list right here. So if you ever wanna update this list, all you have to do is go to your clients page and then you'll see a list of your clients right here and you can hover any of them and click on the "Edit Link" okay. So now let's move on and the next thing we're gonna do is create this Call to Action for this page. So let's go back to our WordPress website and click on "Edit Page." Once we're back on the edit page, the first thing that we have to do is add a new row. So click on the button that says "Add row" and make sure the number of rows is set to 1. And then click the "Insert" button. And if we have our row inserted in between some other rows, we wanna drag it to the bottom. So click on this up and down arrow and just move it down here. And now let's edit the row. So hover over the wrench and click on "Edit Row" and then click on "Theme" right here. And the first thing that what we wanna do is put in the Top/bottom padding as 10, so 1-0. And then come down to the background color and what we wanna do is put in a custom color code. So I'll just type in really quick since I remember it. It's 252525 and you can find the color code in the YouTube description and on the NYC Tech Club Text Tutorial. So you see that the background color updates right here. And now we can just scroll down to the row layout, and what we wanna do is select “Full Width” and then click “Save.” And once you're ready, let's add a widget right her. So let’s click on the button that says “Add Widget” and the widget that we want is the "Sydney FP: Call to Action" widget. So click on that. And now let's click on the "Edit Link" right here, and what we wanna do is put in some text right here for our Call to Action. So I'm gonna go to the demo website and just highlight this text right here. So it says "For a free quote to start working with us today" I'm gonna copy that and paste that in and then for the link for the button, we'll type in www.howtowebby.com/contact-us. And we already created this page. And then for the title, I'll just type in "Contact Us." And then when you're ready, let's click the "Done" button right here and then we can just push "Update." And once the page is updated, let's check it out. So let's click on this button that says "View Page." And now on our testimonials page, if we scroll down, we should see the Call to Action right here. So now the last thing that we have to do is create the social media buttons right here. So let's go back to the WordPress website and click on "Edit Page" one more time. Once we're back on the edit page, let's add a new row. So click on the button that says "Add Row" and make sure the number of rows is set to 1. And then we can click this "Insert" button right here, and we wanna drag this row all the way to the bottom. So click on this up and down arrow and move it below the Call to Action. And once it's placed right here, let's edit this row. So hover over the wrench and click on "Edit Row" and then click on the "Theme" tab right here, and for Top/bottom padding, we're gonna put in 10, so 1-0. And then for the background color, just push "Select Color" right here and we're going to put in a color code right here. So I'm gonna go to the Text Tutorial and on the create social media widget section, I'm gonna highlight this color code right here which is 1C1C1C. And copy that and just paste it in right here. And then we wanna come down to row layout and select “Full Width” and then click “Save.” And now we wanna add a widget right here. So click on the button that says “Add Widget” and the widget that we want is the "Site Origin Social Media Buttons" widget. So click on that. And now let's click on this "Edit Link" right here and we want to add four buttons. So click on this add button four times. And then we wanna click inside of this to expand it and choose the social media platform that we want. So I'll choose Facebook and then I'll type in NYC Tech Club right here. And then we wanna change the background color of the button. So push "Select Color" and then we can put in a custom color code right there. So I'm gonna go to the NYC Tech Club Text Tutorial and write down here where the color code is 252525. I'm gonna copy that and then just paste that in right here. And then you'll see the color get updated and then I'll collapse this section and then open up the next one and choose Twitter. And type in NYC Tech Club and then change the background color. And then collapse this and then choose Google Plus right here and change the background color and then collapse this. And then choose LinkedIn right here. And one more time, change the background color. And then collapse this. And when you're ready, come down to design and layout. And let's expand this section and just do some customizations. So for button theme, I'm gonna choose flat and then I'll scroll down to padding and choose low. And then for align, I'll choose center. And then we can just click "Done" right here and then we push "Update." And once the page is updated, let's click on this button that says "View page" and see what it looks like now. Once we’re on our Testimonial Page, we can just scroll down and we should see our Social Media Buttons section right down here. So we’re actually done with this page now and we’re gonna move on and create some blog post. So I’ll show how to create a Featured Image and then add some content just like this. So let’s go back to our WordPress website, and we’re gonna go to our Dashboard. So hover over your name right here and click on "Dashboard." Once we’re on our Dashboard, we wanna go down to Pause and click on “Add New.” Once we’re on the Add New Blog Post page, the first thing that we wanna do is put in a blog title right here. So I’m gonna type in "Build Something Great" and you can put in whatever you want. And when you’re ready, come down to this section right here. And this is where you type in the content for your blog post. So what I’m gonna do is just paste in some gibberish. And if you wanna format your content, you can use these buttons right here. So I’ll let you mess you around with these on your own, but you can also click on this “Add Media” button if you wanna upload images. So now the last thing that we wanna do is come down to the Featured Image section and set our featured image. So click on this link right here and then we can go to our Media Library and select the image that we want or we can click on upload files and upload a new image. So I’m gonna stay on the Media Library tab and just come down and find the image that I want. And I’ll just select this one and then I’ll push this button right here that says “Set Featured Image.” And then we can add a category if we want for this blog post, but we’re just gonna leave this blank. So all I wanna do is just scroll up to this “Publish” button and push that. And once the blog post is published, let’s see what it looks like. So click on this “View Post” button right here. And once we’re on our Blog Post page, you can see this is what it looks like right now. So we’re going to be doing some additional customizations in a little bit including adding a comment section right here and customizing the right side bar, adding our author name right here, and then changing the permalinks up here. So what I want you to do right now is pause the video if you want and create some additional blog post. What I’m gonna do is create a total of six blog post and then we can move on to the next step. So what I want you to do is go to “New” and click on “Post” to create some additional blog post. Okay, so if you push “Pause” and created some additional blog post then you might have a list of them just like this. So you can see right here, I created six additional blog posts and we have the initial default one. So we probably don’t want this "Hello World" one that comes with the WordPress installation. So what we can do is click on “Trash” right here and then let’s click on this link right here that says “Trash.” And then we can just come down to the blog post and click on this link that says “Delete Permanently” or click on this button that says “Empty Thrash.” And once we’ve cleaned up our blog post, what we can do now is go check out what the Blog Post page looks like. So if you want, all you have to do is type in the web address slash blog, so howtowebby.com/blog is what I’m gonna go to. So you might wanna substitute howtowebby for your own web address. So let’s push “Enter” and we can see – this is the Blog Post page now. So I have six blog posts with featured images and you can see right here we have little excerpts and also the title and some additional details. So our visitor clicks on this, then it will go to the Blog Post page, okay? So now we have actually created all of the pages that we need for this web tutorial. But what we wanna do now is do some additional customizations. So what I wanna do is go to the Dashboard. So hover over your name right here and click on "Dashboard." Once we’re on our Dashboard, the first thing that we’re gonna do is allow for comments on our blog post. So what we have to do is come down to our settings and then click on "Discussion." On the Discussion Settings page, we have to check off some of these boxes so that people can leave comments on our blog post. So the first one we wanna check off is this one right here and this is allows people to leave comments and then we wanna check this box right here. So whenever someone leaves a comment, they have to put in their name and their email. And then we wanna uncheck this so people can leave comments if they don’t have a registered account. And we also wanna uncheck this one, so people can leave comments on older blog post. And then if you wanna be emailed whenever someone leaves a comment, check this box right here. And then let’s scroll down to this section right here where it says “Before a comment appears.” I usually check this box right here so I manually approve comments and this just helps with Spam. So if you check this box, what you have to do whenever someone gives you a comment is come to the Comments tab and manually approve them, okay? So I also usually uncheck this one so people can leave comments if it’s their first time. And once you’re ready, let’s scroll down to the bottom and just click “Save” over here. And once our settings are saved, we can go to our blog post and we can refresh this. And if we scroll down we can see the comment section right here. So if you don’t see your Comments section, then let me show you what else you can do. If we go back to our WordPress website, we can go to Post and click on “All Posts.” And once you’re on the Blog Post page, come over and check off this box right here and then go into the drop-down and click “Edit.” And then click this button that says “Apply” and then right here where it says “Comments” go into the drop-down and click “Allow.” And then click “Update” right here. And once this is updated, we can go back to our blog post and refresh. And if we scroll down now, we should see this comment section if you didn’t see it before. And the reason why you might not have seen it before is because we created this blog post before we updated the comment settings. So going forward whenever you create a blog post, you should see this Comment section right here, okay? So now we’re gonna move on and the next thing that we’re gonna do is create this right sidebar right here. So we’ll have this Recent Post section, a Twitter Feed and then this Facebook Like box. So what we have to do go back to the WordPress website and on the left hand side, go down to Appearance and click on “Widgets.” On the Widgets page, what we’re gonna do is drag some of these widgets on the left hand side into the sidebar right here. And so my sidebar might look a little different than yours because I’ve deleted some of the default widgets that come install with WordPress. And you can do the same by clicking and expanding the widget and then clicking the “Delete Link” right here. And then the widget gets moved back to the left hand side. And you can always use it if you click and drag it over to the sidebar. So the first widget that we wanna drag in is the easy "Facebook Like" box. And this is a plugin that we downloaded earlier in this tutorial. So all I wanna do is click and drag it into the side bar. And then we wanna paste in the Facebook URL right here. So all I wanna do is change this to NYC Tech Club and you wanna make sure there is no slash at the end. So if you have this slash right here, you wanna delete it; otherwise, this widget won’t show up on your webpage. And now we wanna scroll down to this section where it says “Responsive” and check that box. And then we can scroll down and click “Save.” And once this is saved, let’s actually click and collapse this section. And now we wanna drag in a text widget right here. So let’s scroll down to the bottom and find the Text Widget and we can just click this and check Sidebar right here and scroll down a little bit and click “Add Widget.” And now our Text Widget is right here and what we wanna do is add in some HTML for our Twitter Feed. So we have to get that HTML from our Twitter profile. So go to your Twitter Page. And then on your Twitter Homepage, what you wanna do is click on your profile picture right here and then click on “Settings.” And then right here on the left hand side, you’ll see this drop-down. And what you wanna do is click on "Widgets" right here. And now what we need to do is go this button that says “Create New” and click on that. And then we wanna click on this button that says “Create Widget.” So click on that. And right here, this is the HTML that we need for this Twitter Feed right here. But before we copy this, we need to click on this button that says “Save Changes.” So once the changes are saved, go ahead and highlight this HTML and copy it and then go back to your WordPress website. And in this Text Widget just paste in that HTML. And now we need to change the size of this Twitter Feed. So what we need to do is go to the NYC Tech Club Text Tutorial and on step number 29 right here, I want you to scroll down to this yellow box right here and highlight this HTML right here. And what we’re gonna do is copy it and then go back to the Text Widget and highlight the first line and paste in this HTML over it. And then we can click “Enter” to create a new line right here. And all we have to do is click “Save” right here. And once this is saved, we can click and collapse this. And all we have to do now is add the Recent Post Extended Widget. And this is a plugin that we downloaded earlier in this tutorial. So what we can do is click on it and then make sure this sidebar is checked right here. And then click this button that says “Add Widget” and this will be added right below the Text Widget where we want it. So what we wanna do is change the thumbnail size from 45 by 45 to 75 by 75. And then we wanna click on this box right here that says “Display Excerpt” and then we wanna change the Excerpt Link from 10 to 8. And then all we have to do is scroll down and click “Save.” And once this is saved, we can go to our Blog page and it should look something like this. So you can see that there's some extra space in between these widgets right now. But we’re gonna customize that in a little bit, so don’t worry about that. The one thing I do wanna point out is on the Recent Blog Post section, you can see that the font right here is a little gray and it’s not black. So if you wanna change that to a black color font, all we have to do is go back to our WordPress Dashboard and go to Appearance and click on “Customize.” And on the Customize tab, all we have to do is come down to Colors and then scroll down to the Sidebar Color and then click on that. And then choose the “Black Option” right here and then we can just click “Save" and "Publish.” And once this is saved, we can go to our blog post and we can refresh right here. And once it’s refreshed, we can scroll down and we should see black font now in our Recent Blog Post section. So now we’re good to go and we can move on to the next step which is creating the Header Menu right up here. So what I wanna do is go back to the WordPress website and what we wanna do is go to the Dashboard. So hover over your name and click on "Dashboard." Back on the WordPress Dashboard what we wanna do to create our Header Menu is come down to Appearance and click on “Menus.” On this Menus Page, what we need to do is click on this link right here that says “Create a New Menu.” And now what we wanna do is put in a title for our Menu. So right here, I’m gonna type “Header Menu” and when you’re ready click on this button right here that says “Create Menu.” Now what we wanna do is come down to the Menu Settings right here and click on this box next to Primary Menu. And then come to the Pages tab right here and select the pages that you want to show up on your Header Menu. So I’ll choose “Contact Us, Image Gallery, Meet the Team, About, Blog and Homepage. And once you’re ready, click on this button right here that says “Add to Menu.” Once you see your Menu Items right here, what you can do is click and drag them to rearrange them and you can also click and expand these sections and change the navigation label. So right here where it says “Meet the Team” I’m gonna change that to Employees and also for the Image Gallery, I’m gonna expand that and change this to portfolio. And then once you’re ready, go ahead and click this “Save Menu” button right here. And once our Header Menu is saved, what we can do is go to our website and see what it looks like. And now when we go to our Homepage, you can see right here we have our Header Menu. And all of these links go to different pages on our website. So now let’s move on and the next thing that we’re gonna do is create our Footer section with our website name. So let’s go back to the WordPress website and let’s go to our Dashboard. So hover over your name and click on “Dashboard.” Once we’re back on our Dashboard, what you need to do is come down to Appearance and click on “Editor.” Once you’re on this Edit page, come over here to the right side where it says “Templates.” And then find the Footer, so the “footer.php” and click on that. Once you’re on the Sydney Footer Page, I want you to make sure that you see this right here where it says Sydney footer. And if you wanna proceed with this section, you have to be really, really careful because if you mess up then it could ruin your website. So if you wanna continue, push this button right here that says “Proceed.” And once you see all of these CSS right here, what we wanna do is highlight all of it and we’re gonna delete it. So once you delete everything, you should see nothing in this box right here. So now what you need to do is go to the NYC Tech Club Text Tutorial and on step number 31 where it says “Modify Footer.” In this yellow box right here, there is Custom CSS. And what you need to do is highlight all of it from the top to the bottom and copy it and then paste it into this box right here. And then all we have to do is modify two sections. So where it says www.nyctechclub.com you can put in your web address right here and then right here where it says NYC Tech Club 2015, you can put your business name right here. Make sure that you have the two apostrophes right at the end and the beginning right here. Otherwise this will not work and your website will not show. So once you’re ready, click this button that says “Update File.” And once the footer.php is updated, we can go to our website and see what it looks like. Back on our Homepage, if we scroll down, we should see our Footer section with our business name now. So now what we’re gonna do is move this to the center and we’re also going to get rid of this button right here on our Recent Blog Post section on the Homepage. And then we’re also going to get rid of the extra space on the right side bar. So what we need to do is go back to our WordPress Dashboard. So go to your name and click on “Dashboard” right here. Once we’re on the Dashboard, what we wanna do is come down to Appearance on the left hand side and click on Custom CSS. And once we’re on this Theme Junkie Custom CSS Page, what we need to do is go to the NYC Tech Club Text Tutorial and on step number 32 right here where it says “Add Custom CSS” all we have to do is highlight all of the CSS in this yellow box, copy it and then go back to the WordPress website and paste it in right here. And then we can scroll down to the bottom and click “Save.” And once this is saved, we can go back to our WordPress website and check out what it looks like now. Back on the Homepage, if we scroll down, we should see some changes now. So right down here, there shouldn’t be a blog post button and also the business name should be centered. And then if we go to our blog post, the right side bar spacing should be fixed. And we also got rid of the timer that shows up when your site uploads. So the last thing that we’re gonna do is edit our permalinks and change the Site Tag Line right here. So what we need to do is go to our WordPress Dashboard. So hover over your name and click on “Dashboard.” Once you’re on the WordPress Dashboard, come down to your Settings and click on “General.” And then on the Settings page, what you can do right here on the tag line is change it or you can actually delete it. And that’s what I’m gonna do. And then right down here where it says “WordPress Address,” you can type in “www.” if you want that in front of your web address and also you can type that right here on the site address. So if you want, just type in “www.” and then scroll down to the bottom and all we’re gonna do is click “Save Changes.” And then we’ll be asked to re-login for security purposes, so all we have to do is put in our username and password and click “Login.” And once we’re logged back in, we wanna come back down to settings and this time we wanna click on "Permalinks." And once you’re on the Page, what you have to do is choose the Permalink that you want for your blog post. So the one that I usually choose is this one right here that says “Post Name.” And once you’re ready, all you have to do is come down here and click “Save Changes.” And once the settings are saved, we have successfully built a professional and beautiful WordPress website. So let’s go see what the final product looks like. So this is what our final website looks like. So if you found this video useful, please give it a big thumbs up. If you have any questions or comments, leave them below and please make sure to subscribe because we always put up awesome videos. So congratulations again and I will see you all later.
B1 中級 美國腔 如何免費製作Wordpress網站--2016年。 (How to Make a Wordpress Website FOR FREE - 2016) 335 22 Jack 發佈於 2021 年 01 月 14 日 更多分享 分享 收藏 回報 影片單字