if you wanna build a super professionalwebsite, watch this video, and i’ll show you how step by step. what’s up everyone? it’s jameson fromnyc 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 gonnabe a bunch of drag and drop, and copy and paste. and by the end of the video you’regoing to be a wordpress expert. and as you can see, this website is just beautiful. it’ssimple yet stunning and just super professional. what i tried to do was incorporate a lot ofthe design aspects of leading businesses such as apple. and spotify. and square. all ofwhich are multi-billion dollar businesses.
that have spent millions of dollars on webdesign research. so what i created was something with a greatuser experience, something that creates an amazing first impression and something thatyou can be really, really proud of. i wanted to build something that not only representsyou, but represents your brand. and i really think that we were able to accomplish thatwith this website. and the best part about this web tutorial is it’s gonna save youthousands 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 superprofessional, super beautiful, mobile-friendly and responsive website, then keep watchingthis 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 gonnabe creating today. i’m gonna show you how to create this full width image slider righthere. we’ll also put in a transparent header menu right at the top, and i’ll show youhow to create a custom logo right here. on each of our slider images, we’re gonna havea headline, a subheadline and a call to action button. and the reason why we’re gonna dothis is because all of the leading business websites also do this. so if i go to apple, you can see right herethere’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 callto action buttons right here. and what we wanna do is incorporate the best of the bestand 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’sgonna bring me down to the next section that we're gonna build. so the next section we'regonna create is the "services" section right here and what you can do here is highlightwhat you and your business is all about. so you can add as many or as few products andservices 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 righthere. 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. andonce we’re done with this section, we’re gonna create a recent blog post section thatlooks just like this, and then we’ll create another call to action right down here withanother button that really just funnels your visitors wherever you want them to go on yourwebsite. and right down here in the footer, we’ll have social media buttons. we’llhave our website name down here and if i click on this button, it will bring us right backto the top. and we can actually customize any of the colors on our website. so i’llshow you how to do that. and again this website
is responsive, so it works on any computeror laptop, any mobile device. it will just resize on its own so you don’t have to worryabout that. so now, let me just quickly show you what the other pages that we’re gonnamake look like. so this is the about page that we’re goingto 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 thenwe’ll put in a little description right here about your business. and then we’llput in an embedded video right here. and what we could have done if we really wanted towas put this video full width so that you don’t have any white space right here. buti 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 playright here. and underneath this video, we’re gonna put in some facts or statistics aboutyour business right here. and then we’ll have another call to action right here, andthen 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 isthis employee's page and you can add as many or as few employees as you want. and we canalso add a call to action right down here. so what’s really cool is if you hover overany of these images, you get additional details
about your employee along with their socialmedia 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’regoing to love this page because what we’re gonna create is this image gallery right herethat your visitors can actually click on each individual image and then get a pop up ofthat 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 testimonialspage next.
so this is the success stories page or testimonialspage and what this page is gonna do is give you a bunch of social proof. so what we’regonna do right at the top is add some videos right here. so if you have any video testimonialsyou can embed them right here, and if you don’t have any videos, we can add imagesor texts or anything else we wanna write here. and right below that, we’ll add some testimonialsright here with the image of the person that’s giving the testimonial, their name and thenmaybe 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’llput in a call to action right here and then our footer right here. so once we create thispage, we’re going to create our blog page
next. now we’re gonna create a very simple, butelegant and professional blog post page just like this. and what you’ll see is we’llhave a featured image for each of our blog post with a title, the date that the blogpost was written and also a little excerpt right here. and if any of your visitors clickon one of these blog posts, this is what the blog post will actually look like. so thisis a single blog post page right here. and right below, we also have a section for yourvisitors 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 ina facebook like box, your twitter feed right
here, and then recent blog post right herewith thumbnails. so once we create our blog post page and some blog post, we’re gonnacreate one additional page. so the last page that we’re gonna createis this contact us page right here so that your visitors can get in touch with you. sowe’ll put in some contact information right here and we’ll embed a map right below ifyou have a real location and then we’ll put in this contact us form right here thatyour visitors can fill out and it will send a message right to your inbox. so pretty much, this is the website that we’regoing to be building today. so if you wanna build a website that incorporates a lot ofthe design aspects of multibillion-dollar
companies and you really, really like whatyou see, then follow this tutorial and you’re going to build an amazing website. so if you’reready then i’m ready. let’s get started. the first thing that you have to do is registera domain like this, and then we have to get hosting service. and hosting allows you torun your website and store all the content on your website. so i recommend that you goto hostgator.com for both your domain and your hosting service. so right here, typein www.hostgator.com and click "enter." so i recommend hostgator.com because they’refast, reliable, cheap and they have great customer service. so all i want you to dois click on this button right here that says, "get started now!†on this next page, wecan just scroll down and you can see the three
different hosting plans available. there isthe hatchling plan, the baby plan and the business plan. the business plan is a littletoo expensive and probably more than what we need, so i’m going to focus our attentionon the hatchling plan and the baby plan. so the hatchling plan is if you plan on buildingone website and one website only, and the baby plan is if you plan on building morethan one website and you wanna host them on this account, then the baby plan is probablythe 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 fillout some information to register our domain and get hosting service. so on step number1, it says “choose a domain.†so what
i want you to do is type in a domain thatyou 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 domainis available and we can just move to step number 2. so step number 2 is actually where you chooseyour hosting plan. so in this drop down right here, remember we’re choosing between thehatchling plan and the baby plan. in the hatchling plan is if you plan on building one websiteand one website only, and the baby plan is if you plan on building multiple websitesand 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-monthbilling cycle just to give yourself enough time to know whether or not you wanna runa website or not. so i’m gonna choose 6 months right here. and then all you have todo 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 toenter your billing information. and i’ve already done this, so i’m not gonna do itwith you. but if you need to, go ahead and pause this video and fill out all this informationand then just push “play†when you’re ready. otherwise, we’re gonna move on tostep number 4. so step number 4 is adding additional servicesand by default hostgator actually selects
all of these for us. what we wanna do is unselectthem because these are just extra cost that we don’t need right now, and we can alwaysadd these later. so make sure you uncheck all of these and then let’s move on to stepnumber 5. and so step number 5 is entering a couponcode. and by default hostgator puts in this snappy code right here. and what i recommendis you change this to n-y-c-tech-3-0 and click "validate" right here. and you’ll see thediscount actually increase right here, because this coupon code n-y-c-tech-30 gives you a30% discount code instead of the 20% the hostgator gives you. so once you put this coupon codein right here, go ahead and scroll down and click “i have agreed to the terms.†andthen just click this button right here that
says “check out now!†once you’ve signed up for hosting and registeredyour domain, i want you to go to your inbox, and you’ll see this email right here fromhostgator.com that’s titled “your account info.†i want you to click and open thatand you’ll see a bunch of links right here and the one that we wanna focus on is thisone that says “your control panel.†i want you to click on that link right hereand then you’ll get this pop up that allows you to login to your cpanel. and inside our cpanel is where we’re goingto install wordpress and also create our email address. so if you need your username andyour password, go back to you email and right
here, this is where your username is and thisis where your password is. so go ahead and copy those and paste them into these two sectionsright here and then just click “log in.†once you’re logged in, all we have to dois scroll down to this section right here that says “software and services.†andwhat we’re gonna do is install wordpress. so you might have to wait a few minutes forgodaddy and hostgator to connect but if you don’t, go ahead and just click this buttonright here that says “quick install.†now all we have to do is come down to thissection right here that says “popular installs†and click on "wordpress." and then we’llget this pop up right here and all we have to do is click on this button that says “installwordpress.â€
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 andthen put in your email address, a blog title that you can actually modify later and thenan admin username. so i’m gonna put in admin right here and then i just put in my firstand my last name right here. and then i’ll scroll down to this green button and justclick “install wordpress.†once you've installed wordpress, you shouldsee this message right here that says “your install is complete!†and right over hereif you click on this arrow, you can see this information that allows you to login to yourwordpress dashboard. and you can write all of this down if you want or you can go toyour 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 loginto your wordpress dashboard. so before we actually login to our dashboard, let me showyou 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 simpleand really plain. but we haven’t installed the theme yet. so we haven’t started customizingand making our website look like this. but we’re gonna do that right now. so what iwant you to do is either go back to the install page or your email inbox. and then click onthis link right here that says “admin url.†and we’re gonna login to our wordpress dashboardright now.
on the wordpress login page, what you haveto do is put in your username and your password. so if you need to, go ahead and go back toyour inbox and go to your email with your login information. and right here is yourusername and right here is your password. go ahead and copy and paste those two intothese two sections right here. and once you’re ready, go ahead and click this button thatsays “log in.†once we’re logged in, this is the wordpressdashboard. and this is where we’re gonna do all of our customization and add new blogposts, upload images and videos, create new pages and approve and reply the comments andall that good stuff. but the first thing that we have to do in order to customize and buildour website is install the theme for this
wordpress website. so go to appearance andclick on “themes.†once you’re on the themes page, what i wantyou to do is go to this button right here that says “wordpress.org themes†and clickon 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. andthen it should pop up right here and what i want you to do is click “install.†andthen on this next page, just click this link right here that says “activate.†and oncewe’re back on the themes page, you can see right here the sydney theme is the activetheme. 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 stillnothing as great as what we’re gonna make it look like in a little bit. so go back to your dashboard if you’re notalready on it. and the next thing we’re gonna do is install some plugins that arerecommended to us. and plugins really just make our life a lot easier. they’re liketools to really help us build our website. so right here where it says “begin installingplugins†i want you to click on this link right here. now on this next page, i wantyou to check this box right here next to plugin and then click on this drop-down right hereand click “install.†and then click this button that says “apply.â€
and once we get to this page that says “everythinghas been installed successfully,†i want you to click on this link right here thatsays “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 righthere. and what i wanna do right now is actually install the other plugins that we’re gonnaneed for this web tutorial. so right here where it says “plugins†i want you tohover over that and click “add new.†on the add plugins page, what we’re gonnado 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 thelink in the youtube description to the nyc tech club homepage and go to the text tutorialor you can go to nyctechclub.com and click on this link right here to the web tutorialand it will bring you this website right here or this webpage. and what this is, is justall the instructions to the video tutorial that we’re going through right now. andwhat i want you to do is go down to step number 8 where it says “download plugins.†andwhat we’re gonna do is install and activate all of these plugins right here. so what youcan do is just highlight this and then just copy it and then just go to the search barright 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 allwe 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 nowi wanna install another plugin, so right here click “add new.†and then we’re gonnago back to the website and we’re going to copy the next plugin that we need. so contactform 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 andonce 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 pluginsthat you’re installing and activating are listed right here. so if you ever wanna deactivateor delete any of these, you can do that right here as well, okay? so let’s add anotherplugin. so right here click on “add new.†and now let’s go back to the nyc tech clubwebsite and highlight the “easy facebook like†box and copy that. and then we’regonna paste it into the search box right here and search for that. and then the plugin wewant is this one right here by sajid javed and so we’ll click “install now.†andthen 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 techclub website and if you wanna go to this section
yourself and go a little bit faster, you cantotally do that. i just wanna make sure you download the right plugins, so that’s whyi'm gonna do it with you. so right here highlight this next plugin and copy that. and then just go back to the dashboard andpaste it in right here and let’s search for this one. and the plugin that we wantis this one right here, so go ahead and click “install now.†and once again we’llclick “activate†and we have two more plugins to go. so this should be pretty familiarto you. right now we’re gonna click “add new†once again and then go back to thenyc 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 searchfor that. and then we’ll see the plugin right here, so click “install now†andthen we’ll click “activate†right here. and now let’s click “add new†once againand go back to the nyc tech club website and highlight this last plugin that we need andcopy that. and then we’ll paste it into this search bar right here and search forthat. and we wanna install this first plugin right here, so go ahead and click “installnow.†and once again, let’s click “activate plugin†right here. okay, so once we’ve installed and activatedall the plugins that we need for this wordpress tutorial, i want you to go back to the nyctech club website. and scroll down to step
number 9 right here. what i want you to dois 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 eventhough you might have your own images and your own logo, i want you to download thisanyways 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, iwant you to go to the folder where you saved it. and in my downloads folder, here it isright here, and what i want you to do is double click it. and this is gonna unzip the fileand we’ll get this folder right here. and
if we open it up, you can see all the contentsright here. and what we’re gonna do next is actually import the theme settings. soright down here where it says “sydney-settings.xml†we’re gonna import this into our wordpresswebsite. 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 iscome 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 andall we’re gonna do is select the file “sydney-settings.xml†and choose that. and then click this buttonright here that says “import file.â€
and then on this next page, just scroll allthe way down to the bottom and push this button that says “import.†and once everythinghas 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 additionallinks for clients, projects, testimonials, employees and services. and we’re actuallygoing to be using these to build up our website. so the next thing i want you to do is actuallyadd one additional plugin. so go to “plugins†and click “add new.†once you’re onthe add plugins page, just come back to the search bar right here and type in “lightboxplus colorbox.†and what this is going to be for is for our image gallery. so once youtype that in, go ahead and push “enter.â€
and the plugin that we want is this one righthere on the left by dan zaponne. so go ahead and click “install now.†and again wecan just click “activate†right here. and back on the plugins page right here youshould see the lightbox plugin down here. and if you have that, then we’re good togo and we can move on to the next step. and so the next step is going to be uploadingthe 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 howto upload images. on this upload new media page, what i’mgonna do is actually show you how to upload all the images and the logo that we downloadedin the zip file. if you wanna use your own
images and your own logo, you can upload thoseas well or you can actually upload everything one at a time as we go through this websitetutorial. so it’s really up to you. i’m just gonna show you how to upload everythingall 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 dois highlight everything, all the images, and then just click “choose†right here. oncewe’ve uploaded everything, you’ll see them all listed over here and we can actuallygo 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 anyof these images and edit them. so if i click
on the first image right here, i get thispop 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 youcan crop the image if you wanted to. and all you have to do is click on these buttons uphere and then push “save†right here. but i’m just gonna close out of this. so this is how you upload images and you canactually upload them one at a time by clicking on this button right here. and i’ll showyou how to upload images and other types of media one at a time as we go through buildingour post and pages. but the next thing that we have to do is create our homepage. so whati want you to do is go to pages right here
and click “add new.†we’re gonna createtwo new pages. the first page that we’re gonna create isthe homepage and then we’re gonna create a second page that’s gonna be our blog postpage. so right here i want you to put in a title. i’m gonna type in homepage and thenwhat 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 wantyou to do is click on this button right here to add a new page. what we’re gonna do iscreate the blog post page. okay, so let’s title this new page our “blog†page. soright here type in blog and we don’t need
to change any of the page attributes for thispage. all we need to do is push this button right here that says “publish.†so i’mjust gonna push this and once our page is published, now we just need to set the homepageand the blog page. so what i want you to do is come down on left hand side to appearanceand then click on “customize.†so on this page right here, on the left handside you’ll see a bunch of different tabs. and we’re gonna go through all of theseto customize our settings and also customize our website. but the first thing that i wantyou to do is come down here to static front page and click and expand that. and you canscroll down right here and you’ll this section that says “front page displays.†i wantyou to click the bullet right here that says
“a static page†and then you’ll getthis drop-down right here. and where it says “front page†click in the drop-down andselect homepage and then for post page, click in the drop-down and select blog right hereand then just click “save" and "publish." and once that saved, we can actually see thechanges right here as we make them. this is pretty much like a visual editor page righthere. but if we wanna see the change that we actually made, we can go to the tab thathas our old website open. and right here if you remember we have all this white spacedown here when we installed the theme. so if i actually refresh this right now, it shouldactually update and all we should see is the slider image right here. and then we haveanother page that has all of our blog posts
if we go to that, but right now we don’thave a header menu link right here to actually go to that page. so i’ll show you that alittle bit later. the next thing that we’re gonna do in thisweb tutorial is create the slider image right here and we’re gonna modify or change theslider images. so let’s do that right now. let’s go back to our dashboard and go backto this customize page right here. and what we’re gonna do is scroll up to the top andclick on “header" area right here. once you’re in the header area, i want youto come down to the header type right here and click and expand that. and make sure thisbullet is selected right here where it says “full screen slider†and then right downhere where it says “site header typeâ€
i want you to select “no header†righthere. 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 changethe slider speed and also the text speed in your slider images right here. we’re gonnaleave it at the default 4000 milliseconds and if you really want to you can change thisyourself. but if not we’re gonna just move down to this next section that says “firstslide.†and what we wanna do is actually change this first slider image. so what youcan do is push this button right here that says “remove†or just click this buttonthat 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 isclick on this tab right here that says “upload files.†and then you can actually clickthis button right here that says “select files†and then you find the image thatyou 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 thati want and just choose image right here. and then you’ll see it actually refresh righthere. so now what i wanna do is actually modify the text for the first image slider. so righthere 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. andwe’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 secondimage slider. and you can add up to five different images here. so i’m just gonna add 2 andwhat we wanna do is actually change this one right here. so we can click again “removeor change image†right here and then we get to our media library. and what i wannado 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 thesub-headline, i’m gonna say “find out
what we’re all about.†and then we canjust scroll down. if you wanna put in any more images, go ahead and upload them hereand also the text; otherwise just come down to bottom and come down to the section thatsays call to action button. and what we’re gonna do right here is changethe text to "learn more." and then if you wanna put in a url to redirect people to anotherpage 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 willgo 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 “headerimage.â€
we’re not actually going to modify the headerimage, but i do wanna show this section in case you wanted to replace this image or puta new image that shows up on all of your pages right at the top with your header menu. whatwe’re gonna do in this website tutorial is actually create custom titles with ourown 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 thisnext section right here that says “menu styles†and click on that. on the menu style tab, we’re actually notgonna change any of these options right here. but i do wanna talk about them just in caseyou wanna change your own menu settings. so
if we go to the demo website, you can seeright here, this is the transparent header menu right at the top. and if we scroll downthe page, you can see that the header menu actually follows you down the page. and that’sbecause the “sticky†option is chosen. if you don’t want the header menu to actuallyfollow you down the page, you wanna choose the “static†option, so it stays at thetop of the homepage and the rest of the website. so if we go to the customize page again, youcan see right here the sticky option is chosen and then we can come down to the menu styleright here and you see that the “inline†option is chosen. and what that means is thesite title right here and the navigation bar are going to be on the same line. if we wannasee what it looks like when we center it,
we can click on this button right here andthen you can see that this is what it looks like if it’s centered. you’ll have yoursite title or logo right here on top and then you’ll have your navigation bar right herebelow it. so we’re just gonna use in line for this website, but you can choose whateveroptions you want. and when you’re ready, just click “save" and "publish†righthere. 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 ismake some suggestions that you can follow or you can actually modify any of these settingsand 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 downall the way to the bottom to the last section which is the “body font size.†and whati wanna do is change this from 14 to 16. and once i do that, i just wanna come downto this next section which is "colors" and click on that. in the colors section, whatwe’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 thatwe’re gonna be modifying. so if you see right now on our website, the red is a littleis off red. and what we wanna do is actually make it a little bit brighter. so if i goto the demo website, you can see right here this red looks a little bit brighter. andif we scroll down, you can see that the menu
actually changes to the same color that we’regonna put in for the primary color. and by default the menu color is black. and you canleave that black if you want. i just like to match it up with the primary color andyou’ll see that the primary color shows up throughout the website. so in these littlesections right here, you can see if we hover over anything, the primary color actuallyshows up too. so you can modify the colors to whatever colorsyou want, but if you want the colors that we’re gonna put on this website or throughthis web tutorial, what i want you to do is go the nyc tech club website and got to thetext tutorial and on step number 15 right here where it says “colorsâ€, what i wantyou to do is highlight this hex code right
here. and this is going to be the color codefor the color of red that we want. so once if you highlight and copy that, goback to the dashboard right here and where it says “primary colorâ€, go ahead andpush this button right here where it says “select color†and all we have to do isjust paste in the code right here. and then we’re gonna do the same right down herewhere it says “menu background.†just click on that button and then delete thishex code and paste in that code right there. and now the colors will actually change tothat brighter red and all we have to do is click “save" and "publish.†and once this is saved, we can scroll up tothe blog options tab and click on that. and
this is where we’re gonna modify the blogpost page. in this section right here, we can modify the blog post layout. so if i goto the demo website, this is what the blog page looks like. this is the masonry gridstyle. so if we want a blog page that looks like this for our website, we have to selectthe masonry grid style option. so on the customize page right here, i’mgonna select masonry grid style. and right below it we have the option of creating afull width single post page. so if a visitor clicks on a blog post, this is what it lookslike right now. you’ll see the blog post with a right side bar. if you wanna get ridof the side bar and just have all of your content go full width, then you would clickthat 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 itsays “excerpt length.†i wanna change the 55 to 20. and the reason is, right hereis where the excerpt is and 55 is a little bit too long and a little bit too messy. sowhat 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 settingsin these tabs if you want. but we’re actually done with what we need to modify to buildout our demo website. so first let’s go to our old website and refresh it and seethe changes that we made. and you can see
right here we have our slider image with sometext and then on this button right here we have our primary color. so now we can move on to the next step whichis creating a custom logo that we’re gonna put right here. so what i want you to do isgo to a website called logomakr.com, l-o-g-o-m-a-k-r.com. so the word “makr†doesn’t have theletter “e.†this is where we’re going to create our custom logo. so the first thingthat you have to do is click "next" "next" "next" and "done." and what we wanna do iscome to this search bar right here and type in an image or a graphic we want. so i’mgonna type in a compass. so that’s what i use for the demo website, and then i’llscroll down and find the one that i wanna
use which is this one and i’ll just clickon it. and you can see the image right here and you can actually change the colors towhatever color you want using this color spectrum right here. but the first thing that i wantyou to do is actually click on this corner and drag it in to about fifty by fifty. andthe reason why i wanna do this is so that we make sure that it fits within our headermenu. so if you remember, we have this transparent header menu up here. and what i’ve donewith my logo is i created a white logo because i think it looks really nice on this fullwidth image slider. so that’s what i’m gonna use again, but you can make your logoany color you want. so let’s go back to logomakr and what iwanna do is change this to white. and the
logo is still there but it looks like it disappearedjust because the background is also white. and all i wanna do now is click on this discright here to save and download the logo. so if i click on that, i’ll get this newtab right here. and the logo, if it’s white, it actually shows up right here but you can’tsee it. so what i want you to do if you have a white logo is go to the center and thenjust 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 whati want you to do is close this tab and then x out of this and then actually if you havea white image here, i want you to change it to a color; any color you want. if i selectthis – and the reason why i wanna do this
is because we’re gonna resave this logoand we’re gonna upload it as our favicon right here on our web browser so that ourlogo shows up next to our web address. so again i’m gonna click on this disc righthere and download this and then i’ll right click and save it. and then i’ll save asanother name, and then we’re good to go. so i’ll close out of this and then i’llcome back to our dashboard right here where we’re customizing everything, and i’llclick back right here. and right now what we’re gonna do is upload our logo and ourfavicon. so right here where it says “site title/tagline/logo,†i want you to clickon that. and if you wanna just update your site title right here or your tagline, youcan do that right here; otherwise, let’s
upload our logo and replace the text righthere. so let’s click on “select image†right here and if you need to upload yournew logo, go ahead and click on the “upload files†tab right here and click “selectfiles†and find the logo in your downloads folder or wherever you saved it and uploadit; otherwise, you can go to media library if you have it already uploaded and we alreadyhave 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 onour 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†clickon that. and then we’ll go to our media library again. and if you need to upload yourfavicon again, again just click right here on “upload files†and then click on “selectfiles.†but since we already uploaded everything, i’m just gonna select on this image righthere and click “choose image†and then you’ll see that the favicon actually shouldupdate once we refresh this page. so what i'm gonna do is "save" and "publish." onceeverything is saved, i wanna show you what our website looks like right now. so if igo to another tab and type in our web address and click "enter" we should see the changesthat we just made. so we have our logo right here and then our favicon right here.
so if your website doesn’t update and showthese 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 clickon “settings.†and what you need to do is delete your cache. so just click on thisbutton right here and it will delete the files that are stored on your server. and what thecache really is is a way to speed up your website because it stores everything on yourserver. but since we’re updating and modifying our website, we actually wanna delete everythingevery time we update our website so that we can see the changes. so you might wanna keepthis tab up in and just click "delete" every time you wanna see the changes as we go throughthis web tutorial, okay? so now that we have
our website right here, let’s move on tothe next section. so let me show you what we’re gonna create next. so back on our demo website, we created thissection already. so now we’re gonna move on to the next section which is the servicesor 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 dois go back to your wordpress website and all we’re gonna do is click on this x righthere 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 gonnaclick on is “add new.†on the add new service page, the first thing that we wannado is put in a title for our product or service. so i’m gonna type in “photography†andyou can put whatever title you want. and when you’re ready, come down to this next sectionwhere we’re going to put in a short description about the product or service that we’recreating. so what i’m gonna do is go back to the demowebsite and just highlight this short description right here and copy and paste it in just tosave a little bit of time. but if you want, go ahead and type in a short description righthere and when you’re ready, scroll down to this section where it says “service icon.â€
and right here, this is where we’re goingto select the icon for this product or service that we’re creating. so what we can do isclick on this link right here to see a list of all the icons that are available. and sowe’ll get this new tab with this website and if we scroll down, you can see all ofthe icons that we can choose from. so once you find the one that you want, all you haveto do is highlight the short code just like this and then copy it and then go back toyour wordpress dashboard and paste in that short code right here. and that’s gonnainsert 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, yourvisitors can actually go to your website and
click on the icon or the title and it willredirect them to another page. but you can see right here, we don’t actually have anotherlink to another page. so we’re gonna leave this section blank right here. and if youwant, you can always come back to this page and edit this later. so what i want you to do now is go to thecategory section right here and i want you to add a category. so click on this link righthere that says “add new category†and we’re gonna add the same category for allthe products or services that we’re gonna create because this is gonna help us createour 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 nowall we have to do is click on this button that says “publish.†and once our serviceis published, let’s actually create another one together. so right here click on thisbutton that says “add new.†and once we’re back on this add new service page, rememberthe 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 goingto put in a short description. so i’m gonna go back to the demo websiteand 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 theservice icon section. and since we already
have the webpage open that has the full listof icons, we can just click on that tab and then find the icon that we want. so i wantthis one right here. so i’m just gonna highlight the short code and copy that, and then goback to the wordpress website and paste that in right here. and again we’re gonna leavethis box blank unless you wanna redirect your visitors to another page. and then right herewhere we have our categories, since we already added the type a category or whatever categorythat you listed for your first service, we can just click this box right here insteadof 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 servicepage, 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 ashort description, again, i’m going to go back to the demo website, the descriptionright here and copy that, and then go back to the wordpress dashboard and paste it inright here. and then i’ll just scroll down to the service icon section and since we alreadyhave the website open that has a full list of our icons, i’m gonna click and open thattab right here. and then i’m gonna find the icon that i want and just highlight theshort code and copy that and go back to the wordpress dashboard right here and paste thatin right here. and then i’m going to leave this box blank for the service link. and righthere where we have our category, since we
already added the type a category or whatevercategory that you did for the first service or product that you made, we can just checkthis 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 isclick on this button right here that says “add new†or on the left hand side underservices, we can click “add new†right here. so what i want you to do is post thisvideo and create one additional product or service so that we can have three of themfor our homepage right here. and when you’re ready, you can push “play†and then we’regonna create this section. so go ahead and pause this video and create your last productor service, and if you want you can create
additional ones and you can have multiplerows. but at least create one more and when you’re ready push “play†and then we’regonna create this section, okay? so i will see you in a few minutes. okay, so now that you’re back we shouldhave at least three different services listed. so if you want you can check out how manyservices you have by going on the left hand side under services and clicking on “allitems.†now we have three. so if you have more than three that’s fine. all i wantyou to do is make sure that you have the same category for your services. so it doesn’thave to be type a like i put right here, but you wanna just make sure that you have thesame label. and if you don’t, go ahead and
hover over any of your services and you canclick “edit†right here and then modify whatever you wanna modify. so now we’re going to create this homepagesection right here. so what we have to do is go back to our wordpress dashboard righthere and i want you to go to pages on the left and then click on “all pages.†andonce you’ve come to this page, just come down to the homepage and click on that. onceyou’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 whatwe’re going to be using pretty much to customize our website. so what we’re gonna do is createa 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 havethis call to action, and this is gonna be another block. and then the recent blog postright here is gonna be another block. so let’s create the first block for ourservices section right here. so back on the wordpress dashboard right here, what i wantyou to do is click on this button right here that says “add row.†and this is gonnainsert our first block. so what we wanna do is change the number of rows from 2 to 1 andthen click “insert.†and now that we have our block, we wanna add a widget. so clickon this button right here that says “add widget†and then you’ll see all of thesewidgets right here and some of them come from
our theme and then these other ones come fromplugins that we downloaded. so we want a sydney theme widget. so let’s click on this linkright 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 ina title. so right here type in “our services" or "our products†whatever you want. andthen you’re gonna leave this as -1 right here. and then for whatever category thatyou created for your services, i want you to type that in right here. so for me, i putin type a as the category. and then we can
just click “done†right here. and thenjust click “update.†and once that’s updated, we can actuallygo to our homepage and see what that looks like. so let’s click on this button righthere that says “view page.†and once we’re on the homepage, we can just scroll down andwe should see the first block that we just created right here – our services. so keepon mind that the products and services show up from most recent on the left side to theoldest or first one that you create on the right side. so the other thing that i wanna mention isyou can see right here the short description shows up with a gray font and the title righthere and the title of our block is a black
font. so what i wanna do is actually changethe body text to a black font as well. so if you wanna do that also, you can followalong. 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 justclick “save" and publish.†and then click the x right here. and once we’re back on our website, we canjust scroll down and we should see that the font color has changed right here. so if youupdate you website or refresh your website
and you don’t see the changes yet, whatyou probably have to do is go back to your settings right here and go to wp super cacheand delete your cache. and what that’s gonna do again is delete the files on your serverso that you can see the changes right away; otherwise, you might have to wait a littlebit of awhile to see the updates, okay? so now that we’ve created this block, wecan move on and create the next block. so let’s me show you what we’re gonna createnext. so if i scroll down on the demo website, the next thing that we’re gonna create isthis call to action right here. and what we’re gonna have is a title with a background imageand then two little sections right here with buttons that are going to be linked to differentpages that we’re gonna create a little bit
later. so you can follow along to create this sectionor you can feel free to also create whatever you want for your website because what i’mreally giving you is the tools to customize your own website. so if you want this callto action, let’s go back to our wordpress website and click on this link right herethat 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 andthen click this “insert†button right here. and so this is our new row. and beforewe add any new widgets, let’s go to this
wrench right here and hover over that andclick 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 thefirst thing we’re gonna do is come down to this section where it says “top/bottompadding.†and in this box right here i want you to type in 50 or 5-0. and let me explainto you what this is gonna do really quick. so on the demo website right here, you cansee that we have the service row right here and then we’re creating this call to actionright 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 thatpadding or that space. so it says right here that the default padding is 100px. so by puttingfifty in here, we’re gonna reduce that padding or that space by 50%. so make sure you putin fifty right here and then you can just scroll down to this section right here thatsays “background image.†and so if you wanna insert a background image in your rowjust like what we’re gonna do right here, all you have to do is go to this section whereit says “background image†and click on this button right here that says “selectimage.†and then we can go to our media library. so if you’re already uploaded allof 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 clickon this button right here that says “select files.†and then you can find whatever photoyou 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 imagethat i want which is this one right here. and so it’s the background.jpeg and oncei select it, i can just push “done†right here and that’s gonna insert the backgroundimage. and the last thing we have to do right here is go to row layout. and then in thisdrop-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 wantis the “layout builder.†so find that and click on that and now we can just clickon this “edit link" right here. and so the layout builder allows us to add rows withina row. and what i mean by that is if you go to the demo website, there is a call to actionrow right here. and within this large row, there is another row for our text title righthere and a row for our call to action buttons right here. so what we’re going to do is add two rowswithin this larger row. so back on the layout builder i want you to click on this buttonright here that says “add row.†and let’s change the number of rows from 2 to 1 andclick "insert". and now we wanna add a text
widget right here for our title, so clickon 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 ourcall to action right here. so what i’m gonna is go to the demo websiteand just highlight the title right here and copy that and paste that in. and once you’redone putting in a title, go ahead and click on the “done†button right here. and nowwe’re inserted the call to action title right here. so what i wanna do is customizethis 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 thefirst thing that we wanna do is change the top/bottom padding. so right here i want youto put in zero and then scroll down to the section that says “color.†and what we’regonna do is change the font for our title to the primary color that we chose when wecustomized our colors. so right here click on “select color†and you can choose theprimary color right here or you can put in the color code right here. so what i’m gonnado is go to the nyc tech club website and on the text tutorial on step 15, i’m gonnatake the color code right here that is the same for the primary color that i chose andcopy that and paste that in right here and then you can see that the color updates. andonce i do that i can click “save†right
here. and now we can add our second row which isthe call to action row. so right here click on this button that says “add row†andthe first thing that we wanna do is change the number of rows from 1 to 2. and what we’regonna do is add a call to action widget right here and then another call to action widgetright 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 wecan 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. sonow 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 titleblank, but we wanna put in some text right here for the call to action. so you can typein whatever you want. i’m gonna go to the demo website and just highlight this textright 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 nextsection 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 whati’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 hereor you can leave it blank and put in something 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 nextsection and this is where you’re going to put some text for your buttons. so i’m justgonna type in “meet the team.†and once you put something in here, let’s come tothe 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 somecss. and what this css is gonna do is help us createthis black box or dark background right here to separate our two call to actions. so ifyou wanna do that, what you have to do is click on this “attributes†tab and thenyou can go into the youtube description to the call to action section and copy and pastethe css into this section right here. or you can go to the nyc tech club text tutorialand go to step number 18 – the call to action section and scroll down to the bottom. andthere’s this paragraph right here that says if you wanna create that background box justhighlight this css right here and copy that and then just paste that in right here andthen we can click “done.â€
and now we can edit the call to action onthe right hand side. so let’s click on this link right here that says “edit†and wecan 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 thatsays “review some facts about us†and copy that and paste that in right here. andwhen you’re ready, come down to the next section where we’re going to put in a webaddress for our buttons. so i’m gonna type in a url for a page that we’re gonna createa little bit later. so i’ll type “www.howtowebby.com/about†so we’re going to create an about page togetherin 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 sideand click on this tab that says “attributes†and we’re going to paste in some css againto create that black box or dark background for our call to action. so if you have this css, you can paste itin right here; otherwise, you can go to the youtube description and go to the call toaction section and copy and paste that css right here or you can go to the nyc tech clubwebsite and on step 18, you can get the css right here. so we’ll just highlight it andcopy 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 wannado is modify the padding. so right here under
the wrench click on “edit row†and clickon “theme†right here and where it says “top/bottom padding†and this box righthere, put in zero and then click “save†and then click “done†and then we canjust click “update†to save our changes. and once our page is updated, we can clickon this button right here to see what our website looks like right now. so once we’re back on the homepage, we canjust scroll down and we should see this call to action section right down here. and weshould have our two buttons that we’re gonna create pages four in a little bit. so nowwe can move on to the next section of the homepage.
so back on the demo website, the next sectionthat we’re gonna create is this "recent blog post" section. so what i want you todo is go back to your wordpress website and click on this link right here that says “editpage.†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 clickon this up and down arrow right here and then just drag it below. and right here we wannaadd a widget. so click on this button that says “add widget.†and the widget thatwe want is the "sydney fp: latest news" widget. so find thatand then click on that and we can just click
“edit†right here. and all we want todo is add a title. so right here i’m gonna type in “latest news.†and then we canjust click “done†and then we can actually just click “update.†and once the page is updated, let’s clickon this button to view the changes. and once we’re on our homepage, let’s scroll downto the bottom and this is the recent blog post section. so it doesn’t look anythingthat great right now because we haven’t written any blog post. so we’ll eventuallydelete this one and add some new blog posts later on to this tutorial. and we’ll alsoadd some custom css a little bit later to get rid this button right here. so don’tworry about the look right now. as long as
we have this section right now, we’re goodto go. so let’s move on and create the next sectionof the homepage. so if we go back to the demo website, we’re gonna create another callto 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. andonce we’re back on our edit page, the first thing we wanna do is add a new row. so clickon “add row†right here and make sure the number of rows is set to 1 right hereand then click the “insert†button. and so your row might be inserted in between someother rows. and what we wanna do is drag this to the bottom, so to do that we wanna clickon this up and down arrow right here and just
drag it all the way to the bottom. so makesure you new row is underneath the latest news. once we have it right here, we can click andadd a widget, so click on this button right here. and let’s add the "sydney fp: callto action" widget, so click on that. and now we can click on the “edit link†righthere. so we’re going to leave the title blank, but we wanna put in some text righthere for our call to action. so i’m gonna go to the demo website and just copy and pastethis text right here. so what it says is “we love what we do. need inspiration? check outwhat 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 ina web address for a web page for our button. so what i’m gonna do is type in a url fora 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 putin “success stories†for the text for the button. and then what i want you to dois check this box right here that says “display the button in line with the text.†and whatthat’s gonna do is put our button right here in line with this text right here forour call to action, okay? so now we can just click “done†right here and what we wannado before we save this is hover over wrench and click “edit row.†we’re going tochange the padding and do some other stuff.
so click on “theme†right here. righthere where it says “top/bottom padding, i want you to put in 30 or 3-0 and then scrolldown to background color right here. and what we’re gonna do is change the backgroundcolor to a darker color. so you can go to the youtube description and find the colorcode or you can go the nyc tech club website. and on the text tutorial on step number 20right here, there is a color code that you can copy right here and then we can pasteit in right in this box and you’ll see that the color gets updated right there. and thenthe 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 thechanges that we just made and we can just scroll down to the bottom of our website andwe should see our new call to action right so now we can move on and create the nextsection 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 herethat says “edit page.†and once we’re back to this page, we have to enable somewidgets. so come down to plugins right here and click on “site origin" widgets. andonce 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†buttonright here and just go through all the widgets
and turn them all on. and this is just goingto give us the option of using these widgets as we customize the rest of our website. andwe know that we’re going to be using the social media buttons widget right here andalso the headline widget right here. so once you’ve turned everything on, we can actuallygo 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 homepageand click on the “edit link†right here. once we’re back on the edit page, we wannaadd a new row. so click on this button that says “add row†and make sure the numberof rows is set to 1. and then click the “insert†button. and if your row shows up between someother rows, what we wanna do is click and
drag it to the bottom. so right here clickon this up and down arrow and just drag it all the way to the bottom. and once it showsup right here, we can add a widget. so go to the bottom that says “add widget†andclick 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 righthere 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 ofsocial media platform that you want to create
your social media button for. so i’m gonna select facebook first and thenright here i'll put in the nyc tech club url. and right down here, i’m gonna leave theicon color the same as the default. but i wanna change the background color for thebuttons. so what i’m gonna do is put in the black color. so i’m gonna click on “selectcolor†and i’m gonna change the color code. so if you want the same colors as thedemo website, you can go to the youtube description and in the social media button section, youcan 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 whichis 252525 and copy that and then just paste
it in right here and you’ll see the backgroundcolor change. so once you’re done, click right here to collapse this section and let’sadd three more buttons. so i’m gonna click “add†right hereand click this area right here and then i’m gonna select the “twitter†button. andright here i’ll just type in n-y-c-tech club and i’m gonna just change the colorbackground again to the custom code and then i will collapse this section and add anotherbutton. so i’m gonna add a “google plus†button even though i don’t have a googleplus account and just change the background color. and you can add as many social mediabuttons as you want. so it’s really up to you what you wanna do. so i’ll collapsethis 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 clickright here. and now once you're done adding all of yoursocial 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 whereit says “button theme†i want you to change it to flat and then just come down to paddingdown 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 wannacustomize this row a little bit. so let’s
hover over the wrench right here and clickon “edit row†and then click on “theme†right here. and the first thing i wanna dois change the top/bottom padding. so right here i wanna type in 10 or 1-0 and then comedown here to the background color and click on “select color.†we’re gonna changethis to a darker color. so you can go to the youtube description and get the color codeand paste it in here or you can go the nyc tech club text tutorial on step number 21still. and right here where it says the color code is 1c1c1c, we wanna highlight and copythat and then just paste that in right here. and once we do that, we just wanna come downto the bottom where it says “row layout†and then go in the drop-down and select “fullwidth.†and then we can click “saveâ€
right here. and now let’s actually clickthe “update†button. and once our homepage is updated, let’sclick and see what it looks like right now. so click on “view page†right here. andonce we’re back on the homepage, we can scroll down and see what our website lookslike right now. and we should have the social media buttons right down here. so we’regonna come back to the homepage a little bit later and finish off our customizations. butright 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 avideo and then how to create this section
right here with some stats and then we’llinsert a call to action in our social media section again right here, okay? so what i want you to do is go back to yourwordpress website and let’s go to the dashboard. so hover over your website name right hereand click on the “dashboad†link right here. back on the dashboard, what we wannado is create a new page. so come down to pages and click “add new.†and the first thingthat 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†righthere. 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 backto the section right here, you can see that there is a permalink. and this is the urlfor this page. and you can see that it has the web address/about. and that’s becausewe 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 thenyou can change any of the text right here. but since we’re actually linking this pageto one of our call to action buttons, i’m gonna leave this as is. so i’m just gonnaclick okay right here. and if you’re ready, come down to this sectionright here where it says “page builder†and click on this tab. and what we’re gonnado is create several rows for this page. so
the first thing that i want you to do is clickon this button that says “add row.†and what we’re gonna do is change the numberof rows from 2 to 1 and then click this “insert†button right here. and now we can add a widgetright here. so let’s click on this button that says “add widget†and the widgetthat we want is the visual editor. so once you find that, go ahead and click on it. andthen once the widget is inserted right here, let’s click on this “edit linkâ€. andso the visual editor allows us to add text and images and a bunch of other stuff intoour page. so the first thing i wanna do is put in a title. so right here, let’s putin “about us†and then let’s come down to this section where you can write up a descriptionabout your website, your business or anything
about you. so what i’m gonna do is go tothe demo website and just highlight and copy this text right here. so copy that and theni’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 linksome of this text to another page. so if i wanna link the contact us text to a "contactus" page, all i have to do is highlight this text right here and then i can click on thisbutton right here that says “insert/edit link.†and then i’ll get this pop up andi can just type in the web address that i wanna link the text to. so if i type in www.howtowebby/contact-usnow if i click on this “add link†button right here, now the text is linked to anotherpage, okay?
so now let’s add an image that we’re gonnawrap right here on the left hand side and push over our text on the right. so what iwant you to do is click on this button right here that says “add media.†and we’llget this pop up right here and if you already uploaded all of your images then on the mediatab, you’ll see them right here and you can just select the one that you want. ifyou 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 thengo 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 wantwhich is this one. and then i’m gonna scroll down to the display settings right here andwhat i wanna do is change the alignment to left to wrap it around the text. and thenright here where it says “link to†i’m gonna select “none.†and then i’m justgonna click “insert†right here. and now we should see our image inserted right hereon the left hand side and our text on the right hand side. so if you wanna change thealignment on the image, all you have to do is click on it and then you can click on anyof these buttons right here to change the alignment or you can click on the pencil toedit 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 tothe text tab right here and then just creating two new lines right here. and what we’regonna do is go to a youtube video right here. and all we have to do is come down here tothis share link right here and click on this and then click on the “embed “ tab righthere and we’re going to copy this html in this box right here. so highlight and copythat, 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 gonnabe where the youtube video that we just embedded is gonna be.
so let’s check out what it looks like. let’sclick on this “done†button right here and before we actually publish this, i wannaedit 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’sput in 40 right here or 4-0. and then scroll down to the row layout right here and in thedrop-down select “full width.†and now we can click “save†right here and nowlet’s push the “publish†button. and once the page is published, let’s clickon this button right here that says “view page.†and now we can see what our aboutpage looks like right now. so we have our title, an image right here, some text andthen our video right here. so really quickly
i’m gonna show you how to embed the videothe other way and how we can make it go all the way across the entire webpage. so we’lldo that really, really quickly and then we’ll move on and create the rest of this aboutpage. 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 dois add a new row and make sure it’s set to 1 right here and click "insert". and theni wanna add a widget. so i’ll click this button right here and i’ll find the sydneytheme 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 thewordpress 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 putin whatever type of padding i want. so maybe i’ll put in 20 and then all i have to doright here is kind of important is in the row layout, you wanna select the “full widthstretch.†and once i do that, i can click “save†and then click “update.†and once the page is updated, let’s clickon this button that says “view page.†and now if i scroll down the page, you cansee this is the first video that we embedded
and then this is the full width video thatwe just embedded right now. and it goes all the way across your screen, okay? so now ihave given you both of these options to embedding videos and we can move on to creating therest of the about page. so let’s click on this link right here thatsays “edit page.†and once we’re back on the “edit page†the first thing thati wanna do is delete the row that i created for the full width embedded video. so i’mjust gonna hover over the wrench and click on “delete row†and then click on “areyou sure?†and now that row disappears. and before we do anything on this page, iwanna remind you what we’re gonna create next. so if i go to the demo website and scrolldown, we’re gonna create this fact section
or a place where you can put in some statisticsabout your business or you, okay? so let me go back to the wordpress websiteand the first thing that i wanna do is add a new row. so i’m gonna click on this buttonthat 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 “addwidget†and the widget that we want is the “sydneyfpfacts†widget. so once you findthat, go ahead and click on that. and now we can click on the “edit link†righthere. 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 yourtime since this is just a tutorial.
so if i go to the demo website, you can seedown here on the fact section that we don’t have a title right in the middle, but we dohave 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 gonnaput in a fact name. so i put in “projects†for my first one. and then you’re gonnaput in a value, so i put about 750,000 in terms of the number of projects. and thenfor the icon, you’re gonna put in a short code. and how you get the short code is youclick on this link right here and then we’ll get this webpage right here which should lookfamiliar to you because we used it when we created the services section on our homepage.
so in this webpage, there’s a bunch of iconsthat you can choose from for each of your facts. so you have to find the icon that youwant and once you do, all you have to do is highlight the short code like this, copy itand then go back to your wordpress website and paste it into the fact icon section rightover 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 andwhen you’re ready, push “play†otherwise we’re just gonna continue on. so when you’re ready, i want you to comeover to the right over here and click on “design.†and what we’re gonna do is change the fontcolor for our facts. so i want you to scroll
down to font color right here and push thisbutton that says select “color.†and all we’re gonna do is change the font colorto 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 wrenchand click on “edit row†and then click on “theme†right here. and for the top/bottompadding, i’m gonna put in 30, so 3-0. and then i’m gonna come down to the backgroundcolor and choose the “background color.†so i’m gonna push “select color†righthere, 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 techclub text tutorial and on step number 22 right
here, i’m gonna scroll down to the sectionnumber 17 and there is a color code right here which is d650. i’m gonna copy thatand go back to the wordpress website and paste that in right here. and you can see that thebackground color gets updated and then all we have to do is come down to the row layoutand 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 “viewpage†just to see the new changes. and now we can just scroll down the page and we shouldsee our facts section just like this. so if yours looks like this, then we can move onto the next section which is creating our
call to action right here, okay? so let’s go back to the wordpress websiteand make that call to action. so we’ll click on this link right here that says “editpage.†back on the edit page, the first thing that i wanna do is add a new row. soi’m gonna click on this button right here that says “add row†and i wanna make surethat 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 dragit to the bottom. so click this up and down arrow and just move it to the bottom and nowwe wanna add a widget. so click on the “add widget†button and the widget that we wantis a sydney theme widget, so you can click
on "sydney theme" right here and then findthe "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 putis some text for our call to action. so i’m gonna go to the demo website andjust highlight this text right here and copy this and then paste it into the wordpresswebsite right here. and then for the link, i’m gonna put in the contact us page sowww.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†righthere. and for the top/bottom padding, i’m gonna put in 30 or 3-0. and then come downhere to the background color and click on this. and what we wanna do is put in a colorcode. so you can go to the youtube description and copy and paste the color code or you cango to the nyc tech club text tutorial and on step number 22, scroll down to this sectionwhere it says number 23 right here. and highlight the color code right here which is 252525and then go back to the wordpress website and paste it in right here. and you can seethat the color code is updated. now what we wanna do is come down to the row layout andin the drop-down select “full width†and then we can click “save†right here. andnow let’s click the “update†button.
and once our page is updated, let’s clickon 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 nowlet’s create the last section of the about page which is going to be inserting the socialmedia buttons right here, okay? so let’s go back to the wordpress websiteand click on the “edit page link.†and once we’re back on the edit page, the firstthing we wanna do is click and add a row. so make sure the number of rows is set to1 right here and then click the “insert†button. and if you remember, if the row isin between any other rows, we wanna drag it to the bottom. so click this up and down arrowand 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 thatand then we’re going to click on the “edit link†right here. and if you remember howto 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 facebookand i’m gonna type in nyc tech club right here. and then we need to change the backgroundcolor. so you can change it to whatever you want. if you want the color code go to theyoutube description or the nyc tech club text tutorial and on step number 21 right hereis the color code 252525. so i will copy that
and paste that in right here and you can seethat 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 googleplus. so we’ll change the background color right here. and then i’ll collapse thisand expand this next one and we will add a “linkedin button.†and i will change thebackground color again and then i will collapse this. and once you’re ready, come down to designand layout and expand the section and all
we have to do is change the button theme toflat 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 andclick on “edit row†and then expand this theme section right here and for top/bottompadding, i want you to put in 10 or 1-0. and then for the background color, you cango to the youtube description to get the color code or the nyc tech club text tutorial. andup here is the color code that i want so 1c1c1c. i’m gonna copy that and paste that in rightthere and you can see the color gets updated. and then all we have to do is come down tothe 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’reback on the “about page†we can just scroll down and we should see the social media buttonsright down here. so if you’re ready we can move on to the next step which is creatingthe meet the team page or the "employees" page. so what we’re gonna do is create abunch of individual employee pages and then create this page right here. so what i wantyou to do is go back to your wordpress website and we’re gonna go to the dashboard. sohover 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 employeeprofiles. 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 isadd a name right here. so go ahead and type in the name for your employee. i’m gonnaput in a fake name. so i'll put in addison's son right here. and once you’re ready let’sscroll down to this next section that says “employee info†right here. and what youhave to do right here is put in a job title. so i’m gonna type in “designer†forthis 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 addressesright here. and then right below that you
can put in a custom link that will link totheir name on the employees’ page. so if you wanna create another page that hasmore details about this employee or there is an external link that you wanna link themto then you can put it right here. and you can always edit this later. so i’m gonnaleave this blank for this tutorial. and once you’re ready let’s come over to this sectionright here where it says “featured image.†and what we’re gonna do is set a featuredimage 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 wantin the media library; otherwise, you have to go to the upload files tab and click onthis button right here and go into your folders
and find the images that you want and uploadit that way. so i'm gonna go back to the media libraryand 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 thistutorial is 200 by 200. so if you need to, you can click on this "edit image" right hereand then you can modify the sizes of your images. okay, so let me click on this buttonright here. and then we'll see our featured image righthere. 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 buildout the employee page. so what i want you
to do is click on this link right here thatsays "add new category" and i'm gonna type in "emp1" and that's gonna stand for employeenumber 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 thatsays "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 nameright here. so i'm gonna put in margaret jones right here and when you're ready, come downto the employee info section and right here we want to put in a job title. so i'm gonnaurls right here for the employee's account.
and then if you want, you can put in a customlink right here and then when you're ready, come to the featured section right here andclick on this link right here that says "featured image." and then we wanna go to the medialibrary and select the image that we want, so i'm just gonna choose this one right hereand then click this button right here. and then the last thing that i wanna do is adda unique category name since we're going to be doing that for each employee that we createto help us create the employee page. so all i have to do is click on this linkright 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" righthere. and once the employee page is published,
let's create one more together. so let's clickon this button that says "add new." and once we're back on the add new employee page, iwanna 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 hereand we want to put in a job title. so i'll type in "programmer" right here and then youwant to add their social media links right here and then you can put in a custom linkif you want right here. and once you're ready, come over to the featured image section andclick on this link and we wanna go to the media library if you have all of your imagesuploaded 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 clickon this link and then i'm just gonna type in "emp3" for employee number 3 and clickenter 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 additionalemployee 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 pageright 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 pushplay when you're ready.
okay, so if you pushed pause, and now you'replaying the video, hopefully you created your additional employee profiles. what i've doneis created nine employee profiles. you can see right here that each of these employeeshave their own unique category name. so you wanna make sure that each of your employeeshave their own category name right here. and once you're ready, let's create the employeepage. so what i want you to do is come over to the left. under pages right here, clickon "add new." once were on the add new page, the first thingthat 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 dois change the template. so select "front page"
right here and when you're ready, come upto the page builder tab and click on that. and the first thing that we wanna do is adda row. so we click on "add row" and change the number of rows from 2 to 1 and then clickthe "insert" button. and let's actually edit this row. so hover over the wrench right hereand click on "edit row". and then click on theme right here. and for the top/bottom paddingput 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 findthat you go ahead and click on it. and then we wanna click on the edit link right hereand 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 thatsays "add widget" and the widget that we want is the "sydney fp: employees" widget, so clickon that. and now we can click on the "edit link" right here, and all we have to do ischange the number of the employees to show right here from -1 to 3 and then we want toput in the employee category names right here for our first three employees that we wannashow 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 clickon "all items." and you'll get this page right
here that will have a list of all your employeesand then on the right side, you can see the employee category names. okay, so i'm gonnago back to the wordpress website and the next thing we wanna do is add another row for oursecond row of employees. so i'm gonna click on "add row" and just make sure that the numberof 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 putin 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 "sydneyfp: employees" widget, so click on that. and then we'll click on the "edit link" righthere. and again, we're gonna change the number
of employees to show to 3 per row and thenwe're going to put in another set of category names right here for our employees. so i'lltype in emp4, emp5, emp6 and then i'll just click "done." and now let's add the last row of our employeesfor the demo website. so click on "add row" and make sure the number of rows is set to1 and then click the "insert" button here. and if your row shows up in between your otherrows, we wanna click and drag it to the bottom. so click on this up and down arrow and justbring it down to the bottom. and now let's edit this row. so hover over the wrench andclick on "edit row" and then click on "theme" right here. and let's put in 30 for the top/bottompadding, so 3-0 and then click "save." and
again, we're going to add a widget. so clickon 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 changethe number of employees to show that 3 right there. and then let's type in some more categorynames 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" buttonright here. and once the page is published, let's click on this view page button. andnow we can see what the employee page looks like right now. so if you hover over any ofthese images, you get additional details about the employee such as their job title and thenlinks to their social media accounts right
here. so the next thing that we wanna do forthis page is create the call to action right down here. so let's go back to the wordpresswebsite and click on "edit page." once we're on the edit page, the first thing that wehave to do to create our call to action is add a new row. so click on "add row" and makesure the number of rows is set to 1. and then click "insert" and if your row shows up inthe middle, let's drag it to the bottom so let's click on this up and down arrow andmove 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 andclick on this. and you can go to the youtube
description or the nyc tech club text tutorialand copy in the color code that you need or you can choose whatever color you want. i'mjust gonna type in the color that i want since i remember it. it’s 252525 and you can seeright here the color gets updated. when you're ready, come down to the roll layoutand select “full width†and then we can click "save". and now we just wanna add awidget. so go to the button that says "add widget" and click on that and the widget thatwe want is the "sydney fp: call to action" widget. so click on that. and now we can clickon the edit link right here and all we wanna do is add some text right here for our callto action. so i'm gonna go to the demo website and just copy in this text right here. sohighlight this and copy it and then go back
to the wordpress website and paste that inright here. and then for the link for the button, i'm gonna type in www.howtowebby.com/contact-usand 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'sclick 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 employeespage, if we scroll down, we should see the call to action right down here. so now let's create the last thing on thispage which is the social media buttons right here. so let's go back to the wordpress websiteand 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 numberof rows is set to 1. and then click the "insert" button. and now let's drag down the row tothe bottom. so click on this up and down arrow and just bring it all the way down to thebottom. and now let's edit the row. so hover over the wrench and click on "edit row" andthen click on theme right here. and what we wanna do is change the top/ bottom paddingto 10, so put in 1-0 right here. and then click on "background color" right here. andyou can choose whatever color you want for the background. i'm gonna put in the colorcode that i want. so i'll go to the nyc tech club text tutorial and again, on step number21 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 justpaste that in right there. and now you can see that the color code gets updated. so now, i wanna scroll down to the row layoutand select “full width†right here and then click "save." now we can add a widgetright here. so click on the button that says "add widget" and the widget that we want isthe site origin social media buttons widget. so find that and then click on it. and thenclick 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 toget our four social media buttons and then
i’ll expand each of these sections and selectthe social media platform that i want. so facebook first, type in nyc tech club righthere. and then again, remember, we want to change the background colors to be consistentwith all of our other web pages. so i'm gonna click on "select color" right here and thengo to the text tutorial and get the color code that i want. so it's 252525. i will copythat and then just delete this and paste it in and see it change right here. then i'llcollapse this section, open up the next one and then choose twitter. again i'll put innyc tech club and then select the background color and change this. and then collapse thesection, open up the next one, and choose google plus and then just change the backgroundcolor since i don't have an account with google
plus. collapse this and then open up the lastone and select linkedin. and again, change the background color code right here and collapsethat. and once you're ready, come down to design and layout and expand this sectionand we're just going to customize this a little bit so where it says button theme, i'm gonnachoose flat and then right words says padding, i'll choose low and then alignment, i'll choosecenter. and now we can just click "done." and once we click done, let's go to the "updatebutton" and click on that. and once we're on the employee page, we can just scroll downand we should see our social media buttons right here. so we're pretty much done withthis webpage. so now we can actually move on and createthe next page which is the portfolio or image
gallery page. so this is what it looks likeand if you click on any of these images right here, you get this pop up and then you cango through them with a slider like this. and so if you're ready, let's go back to the wordpresswebsite and we're going to be creating a new page. so you can hover over new right hereand click on "page." once we're on our new page, the first thingthat we wanna do is put in a title. so i'm gonna type in "image gallery" and when you'reready, come down to page attributes and under template, let’s choose the "front" pagetemplate and then let's go to the "page builder tab" and click on that. and we want to adda new row. so click on the button that says "add row" and change the number of rows from2 to 1, and then click "insert" right here.
and now let's add a widget. so click on "addwidget" and the widget that we want is the visual editor. so click on this. and now let'sclick on the "edit link" and we wanna put in a title for our page. so i'm gonna typein "our work" and then come down to this section right here and this is where we're going toput in the images for our gallery. so what we wanna do is click on "add media." and thenwe wanna click on this link right here that says "create gallery" and what we can do isselect images in our media library right here or we can upload new images if we click onthis "upload files" tab and push this button right here. and then you can go into yourfolders 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 thati want. so all i have to do is push any of these images and you can see the checkmarkright here and that means that these are selected. so let me just choose two more. so i'll choosethis one and this one. and once you're ready, go ahead and push this button right here thatsays "create a new gallery." and what you'll see right here is your image gallery and whatyou can do is add captions right here or you can actually click and drag these two in differentposition if you want. so when you're ready, come over to the gallery settings and whatwe have to do is change the link to attachment page to link to media file. and then if youwanna 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 canedit. so once you're ready, go ahead and click "done" right here. and now let's push thisbutton that says "publish." and once our page is published, we can click on this buttonright here that says "view page" and you can see that this is what our portfolio page lookslike right now. so we don't have any spacing in between theserows to separate these images. so if we wanna do that, we have to modify some settings inone of our plug-ins. so what i want you to
do is hover over your name right here andclick on the "dashboard." and once we're back on our dashboard, come down to appearanceand click on this link right here that says "light box plus." and all we have to do onthis page is scroll down to the second set of settings right here, and check this boxright here where it says "use for wordpress galleries" and then click this button righthere that says "save all settings." and once the settings are saved, we can just go toour portfolio page and check it out. and now we have our space between each row to separateour images. and if we click on any of these, we can see the pop-up and then we can slidethrough them and see all of our image gallery, okay?
so now let's create the next section of thiswebpage which is going to be the call to action. so let's go back to the wordpress websiteand click on this "edit page" link. once we're back on the edit page, we need to add a newrow. so click on this button right here and make sure the number of rows is set to 1 andthen click the "insert" button. and now let's edit this row. so hover over the wrench andclick on "edit row." and then click on theme. and the first thing we want to do is put in30 for the top/bottom padding, so 3-0 and then come down to the background color. andyou can go to the youtube description and get the color code or the nyc tech club texttutorial on the create a call to action section and just highlight the color code which is252525 and copy that and paste it in and then
you'll see the color get updated. and thenthe 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. soclick on the button that says "add widget. and the widget that we want is the "sydneyfp: call to action" widget. so click on that and then click on the "edit link." and whatwe need is to add some text right here for our call to action. so i'm gonna go to thedemo website and just copy in this text. so i will highlight it and then i will copy itand go back to the wordpress website and paste it in right here. and then i'll create a linkfor the button, so i'll type in www.howtowebby.com/contac-us and we're gonna create this page in a littlebit. and then we want to put in a title for
the button. so i'm gonna type in "contactus" and then we can just click "done" right here and then let's push this button thatsays "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 righthere. so now let’s create the social media sectionof our page. so let's go back to the wordpress website and click on this link that says "editpage." and once we're back on the edit page, the first thing that we want to do is adda new row. so click on "add row" and make sure the number of rows is set to 1. and thenclick 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. andnow let's edit this row. so hover over the wrench and click "edit row". and then we'regonna click on theme right here and for top/bottom padding, we're gonna put in 10. so 1-0. andthen come down to the background color and push this button. and you can go to the youtubedescription and copy paste the color code or you can go to the nyc tech club text tutorialand on the create social media widget section, we have to just highlight the color code righthere. so that's 1c1c1c and then copy that and paste it in. and you can see that thecolor gets updated right here. and now let's just scroll down to the row layout and select“full width†and then click "save" right and now let's add a widget right here. soclick on the button that says "add widget"
and the widget that we want is the site originsocial media buttons widget. so once you find that, click on that. and now let's click editright here. and again, to add social media buttons, all we have to do is click this "addbutton." so i'm gonna click it four times just to add four buttons. and then i'm goingto expand the first section and select facebook and then i'll type in nyc tech club righthere. 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'mgonna go to the nyc tech club text tutorial and just highlight the color code that i wantwhich is 252525. copy that and paste it in. and then you'll see the color update righthere. and then i'll collapse the section,
open up the next one and select twitter righthere. and type in nyc tech club and then just change the background color to the color codeand then collapse this one and then add the google plus button and just change the backgroundcolor right here. and then let's do this one more time. so i'm gonna select linkedin this time andjust change the background color right here. and once you're done, let's expand the designand layout section and let's customize this a little bit. so for button theme, i'm gonnachoose flat and then for padding, i'm gonna choose low. and then for align, i'm gonnachoose center. and then we can just click "done" right here. and now we can just clickthis "update" button right here. and once
the page is updated, let's click on this buttonright here that says "view page." and once we're on the portfolio page, we can just scrolldown and we should see our social media buttons so now, we're actually done with this pageand 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 embeda map and then put in a contact us form right here and then add the social media buttonsat the bottom. so what i want you to do is go back to the wordpress website and let'sgo to the dashboards. so hover over your name and click on "dashboard." once we're on thedashboard, 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 whenyou're ready come down to the page attribute section and under template, let's choose thefront page template. and then when you're ready, come to the "page builder" tab andclick on that. and what we want to do is add a row. so click on the button that says "addrow" and change the number of rows from 2 to 1. and then click the "insert" button. and now lets' edit this row. so hover overthe wrench and click "edit row", and then click on "theme" right here. and for top/bottompadding, let's put in 40, so 4-0. and then let's come down to the row layout and clickon 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 clickon the edit link right here and what we wanna do is put in a title. so right here, typein "contact us." and when you're ready, go ahead and push "done" right here. and nowwhat we wanna do is add another row. so click on the button that says add row, and we wannakeep this as 2 this time. so make sure this is 2 and then in here, we wanna change thisto 70%. so type in 7-0 and then change the other one to 30%. so type in 3-0 and thenjust 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 thenclick on "theme" right here, and for the top/bottom padding, let's put in 20, so 2-0. and thenlet's come down to the row layout and change this to full width and then click "save" righthere. 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 thenclick on the "edit button" right here. and if you push this button right here that saystoolbar toggle, you'll expand this section and have some additional font settings righthere. 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 wordpresswebsite, i'm just gonna paste in that detail
right here and you can type in whatever youwant. and you can also highlight some of those text and push this button right here and itwill 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 horizontalline right underneath. so i'm gonna create a new line and then just push this buttonright here that says "horizontal line" and insert that right here. so right here whereit says email, you can see that my email address is contact@howtowebby.com. so if you wannacreate an email address that's going to be associated with your web domain, i'm gonnalink you to a video that i created on how to do this in the youtube description. sowhat you can do right now is put in the email
address that you wanna create a little bitlater right here or put in any other email address. and so we can also link this email if we wantand all we have to do is go to the text tab and type in some html. so if you want, youcan follow along. so right here, right before the email address, i'll put in a open bracketand then type in a space h-r-e-f. and then i will put equal sign and then quotes, mailto, colon and then i will have the email address right here. and then at the end, i'll putin quotes again and then a close bracket. and then you want to put in text that you'regonna 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 emailis linked. so if your visitor clicks on it, they can just email you directly. so onceyou're ready, let's click on this button right here that says "done." and now we wanna add another widget rightunderneath this. so click on the button that says "add widget" and the widget that we wantis 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 justgonna type in new york, new york and then when you're ready, come down to the heightright here. and we wanna change the height to 2-50. so make sure you type that in andthen we can just click "done" right here.
and now we wanna add a widget on the rightside over here. so let's click on this button that says "add widget" and the widget thatwe want is the "visual editor." so once you find that, click on that. and we wanna getsome shortcut that we can paste in here. so the first thing i want you to do is clickon "save draft." and once the page is saved, come over to the left over here where it saycontact and click on "contact forms." so the contact form is a plug in that we downloadedearlier in this tutorial and by default, they create a contact form for us. so all we haveto do is come down here, and click on this link that says "contact form one." on theedit contact form page, come down to this tab right here that says "mail" and clickon that. and you'll see these two section
right here. and inside is your default emailaddress. and this is where all the messages that you're gonna be sent or gonna go. soif you wanna change this, go ahead and do that and if you wanna put in the web addressthat's gonna be associated with your web domain, you can do that as well as long as you createthat later. if you make any changes, go to this button right here and click "save" andif 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 wannahighlight this section right here and copy
that. and now we're gonna paste it into ourvisual editor widget. so we're gonna go back to our contact us page by hovering over pagesand clicking on all pages. and now let's just come down to the contact us page and clickon this "edit link" right here. once we're back on the contact us page, just come downto the visual editor widget right here and click on the "edit link." and once we're onthis page, click on the tab right here that says "text" and then paste in the short coderight 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 oncethe page is published, let's click on this publish button right here that says "viewpage" and see what it looks like. and once
we're on the contact us page, this is whatit should look like right now. so now we can move on and create the social media iconsright on the bottom. so let's go back to the wordpress websiteand 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 anddown arrow and just move it down here. and now let's edit this row. so hover over thewrench and click on "edit row". and then we're gonna click on "theme" right here, and fortop/bottom padding we're gonna put in 10 or
1-0. and then for the background color, youcan go to the youtube description or the nyc tech club text tutorial and get the colorcode. the color code is gonna be 1c1c1c for what we're using for the demo site. so youcan see it gets updated right here and then we can just come down to the row layout andselect “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 originsocial media buttons" widget. so click on that and then click on the "edit link" righthere. and what we wanna do is add four buttons. so click on this button right here four timesand when you're ready go ahead and click and
expand this section right here and you canchoose the platform that you want. so i'm gonna choose facebook and then type in nyctech club right here. and then i wanna change the background color of the buttons. so i'mgonna push this right here. and then you can get the color code in the youtube descriptionor the nyc tech club text tutorial on the social media widget section. come right downhere and highlight this color code which is 252525 and then copy that and paste it inright here. and then we can collapse this and open up the next one. and i'm gonna choosetwitter and type in nyc tech club right here. and then change the background color to thecolor 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 linkedinand then just change the background color right here. and then collapse this. and onceyou're ready, come down to design and layout. and let's click and expand this section andjust 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 aheadand click this "done" button right here. and now let's push the "update button" righthere. 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 socialmedia buttons down here and embedded map right here, some contact information right hereand then our contact us form right here. so
now we can actually move on and create ournext page which is the testimonial page, also known as the success stories page. so thisis what it looks like. and what we’re gonna do first is create some testimonials and thenwe'll create this client section and then we'll build out the rest of the webpage includingembedding some videos that can be video testimonials, so let's go back to the wordpress websiteand the first thing we're gonna do is go to the dashboards. so hover over your name andclick on the "dashboard link" right here. once we're on the dashboard, the first thingthat we're gonna do is make some testimonials. so come down to testimonials and click "addnew." on the add new testimonial page, the first thing that we wanna do is put in a nameright here for the person that's giving the
testimonial. so i'm gonna type in helen owenright here and when you're ready, come down to this section right here. and this is whereyou type in your testimonial. so what i'm gonna do is just paste in some gibberish justto save some time and then we can scroll down to this section right here. and this is whereyou 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 whatwe wanna do is come down to this section right here where it says "featured image" and wewanna 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 thenclick on this button right here.
and then the last thing that we wanna do isadd a unique category name for this testimonial. so click on this link right here and theni'm just gonna type in one right here and click "enter." and we wanna create uniquecategory names for each of our testimonials to help us create that testimonial page. soonce you see the category name right here, we can click on this "publish" button righthere. and once the testimonial is published, let's click and add a new one together. soclick on this button right here that says "add new." and once we're back on the addnew testimonial page, the first thing we wanna do is put in a name right here. so i'm gonnatype in "james king" and then right down here is where you type in your testimonial. soi'm gonna paste in some gibberish and then
we wanna put in a job title and a companyname right here. so i'll put in designer and then i'll put in adobe. and then we can scrolldown 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 buttonthat says "set featured image." and then you'll see the featured image right here. and now let's add a unique category namesonce 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 thisbutton right here that says "add new." and
back on the add new testimonial page, let'sput in another name right here. so i'll just type in justin bieber. and then right downhere i'm gonna paste in some gibberish for the testimonial. and then i'll scroll downhere and just put in singer/artist. and then, i'll come down to the featured image sectionand 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, alli wanna do is add another unique category name. so i'll click on this link right hereand then i'll just type in 3 and push "enter." and then i'll see the category list updateand then we can push "publish." once that testimonial is published, the nextthing that we're gonna do is create this client
list with some logos. so on the wordpresswebsite, let's go down on the left hand side to clients and click on "add new." on theadd new client page, all we have to do is put in a title right here. so i'm gonna typein "client 1." and then we just wanna upload a logo. so if you come down to the featuredimage section and click on "set featured image" we can either upload a logo using this uploadfiles 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 thatand then click on the "set featured image" button right here and then you'll see thelogo right here and then we can just push "publish."
once our client is published, let's createanother one together. so click on "add new" and once we're back on the add new clientpage, 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 clickon this link right here. and in my media library, i'm just gonna scroll down and find the logothat 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, clickon the "set featured image" button right here and then we can just push "publish." and oncethis client is published, what i want you to do is pause this video and create threeadditional clients. and the reason why we
wanna create three additional clients is becausewe're going to have a row of five client logos 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 youradditional clients, then you should have a list of five clients right here. so now we'regonna create the testimonial page. so what i want you to do is go to pages and clickon "add new." once we're on the add new page, the first thing that we wanna do is put ina title right here. so i'm gonna type in "success stories: and when you're ready, come downto 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 adda row. so click on the button that says "add
row" and let's change the number of rows from2 to 1 and then click the "insert" button right here. and now let's edit this row. sohover 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 therow layout and choose full width and then click "save." and now what we wanna do is add a widget righthere. 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 "editlink" right here and we just need to put in a title. so i'm gonna title this "what ourclients 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 "addrow" 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". andthen 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 techclub 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'mgoing to highlight this color code. so the
color code is d63737 and i'll just copy thatand go back to the wordpress website and paste that in right here and you can see that thecolor code gets updated right here. and then when you're ready, come down to the top/bottompadding 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 anda widget on the right. so let's click on the button that says "add widget." and the widgetthat we want is the "site origin video" widget. so click on that. and now let's make a copyof this. so click on a duplicate link right here. and we can just click and drag thisover. so now we have one on the left and one on the right. so let's edit the left handside first. so click on the "edit link" right
here and all we have to do is click on thebutton right here that says "externally hosted" and then we can just paste in the video urlright here. so if i go to the youtube page and i findthe video that i want, all i have to do is come down here to where it says "share" andclick on that and then take this url right here and copy that. and then go back to thewordpress website and paste that in right here. and this is gonna embed the video onmy webpage. so now we can click "done" right here and we can do the same to the right handside. 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 couldpotentially be one of your testimonials, click
on the "share link" right here and then justget the url and copy that. and then come back to the wordpress website and paste that inright here. and then just click "done" right here. and now let's click the "publish" buttonright here. and once the page is published, let's check out what it looks like. so let'sclick on this button right here that says "view page." so this is what the testimonialpage looks like right now. so we have our title and then two videos that are potentiallyvideo testimonials. so the next thing that we're gonna do is insert the testimonialsthat we created a little earlier right here. so let's go back to the wordpress websiteand click on the "edit page" link. once we’re back on the edit page, the first thing thatwe wanna do is add a new row. so click on
the button that says "add row." and we wannachange the number of rows to the number of testimonials you have. so right here sincewe 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 isclick 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 whereit 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 theserows. 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 makecopies of this. so click on the link right here that says duplicate two times and thenwe can just click and drag these over so we have one on each row. and now let's edit the left hand side onefirst. so click on the "edit link" right here and all we have to do is change the numberof 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 haveto do is go to your testimonials page and you can see a list of your testimonials righthere and then you have your category names so back on the wordpress website, once youput in the category name, all we have to do
is push "done" right here. and now we canedit the next one right here. and so again, we will put in 1 right here and then the categoryname 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 showto 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 clickon "view page" to make sure the updates are correct. and once we're on the testimonialspage, we can scroll down and we should see the testimonials that we just inserted. sonow we can move on and insert the logos right here for our clients. so let's go back tothe wordpress website and click on this link
right here that says "edit page." once we'reback on the edit page, the first thing that we have to do is add a new row. so click onthe button that says "add row" and make sure the number of rows is set to 1. and then clickthe "insert" button. and if we need to, let's click and drag this row to the bottom. soright here, click the up and down arrow and just move it down here. and once it's placedhere, 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 paddingto 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 youtubedescription or the nyc tech club text tutorial
and on step number 26, just scroll all theway down to step number 25 right here and there is a color code that i want you to highlightwhich is e f e f ef and then copy that and paste it in right here. and you can see thatit is a light grey color. and once we're done, we can come down to rowlayout 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 thewidget that we want is the "sydney fp: clients" widget. so once you find that, click on thatand then we can just click on this "edit link" right here and all we have to do is make surethat 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 checkout 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 ourclient list right here. so if you ever wanna update this list, all you have to do is goto your clients page and then you'll see a list of your clients right here and you canhover any of them and click on the "edit link" okay. so now let's move on and the next thing we'regonna do is create this call to action for this page. so let's go back to our wordpresswebsite and click on "edit page." once we're back on the edit page, the first thing thatwe have to do is add a new row. so click on
the button that says "add row" and make surethe number of rows is set to 1. and then click the "insert" button. and if we have our rowinserted in between some other rows, we wanna drag it to the bottom. so click on this upand down arrow and just move it down here. and now let's edit the row. so hover overthe wrench and click on "edit row" and then click on "theme" right here. and the firstthing that what we wanna do is put in the top/bottom padding as 10, so 1-0. and thencome 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 findthe color code in the youtube description and on the nyc tech club text tutorial. soyou see that the background color updates
right here. and now we can just scroll downto 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 buttonthat 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" righthere, and what we wanna do is put in some text right here for our call to action. soi'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 thatin and then for the link for the button, we'll type in www.howtowebby.com/contact-us. andwe 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 justpush "update." and once the page is updated, let's check it out. so let's click on thisbutton that says "view page." and now on our testimonials page, if we scroll down, we shouldsee the call to action right here. so now the last thing that we have to do is createthe social media buttons right here. so let's go back to the wordpress website and clickon "edit page" one more time. once we're back on the edit page, let's add a new row. soclick 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 allthe way to the bottom. so click on this up
and down arrow and move it below the callto action. and once it's placed right here, let's editthis 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 forthe background color, just push "select color" right here and we're going to put in a colorcode right here. so i'm gonna go to the text tutorial and on the create social media widgetsection, i'm gonna highlight this color code right here which is 1c1c1c. and copy thatand 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â€
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. andthen we wanna click inside of this to expand it and choose the social media platform thatwe want. so i'll choose facebook and then i'll type in nyc tech club right here. andthen we wanna change the background color of the button. so push "select color" andthen we can put in a custom color code right there. so i'm gonna go to the nyc tech clubtext tutorial and write down here where the color code is 252525. i'm gonna copy thatand then just paste that in right here. and then you'll see the color get updated andthen i'll collapse this section and then open up the next one and choose twitter. and typein nyc tech club and then change the background
color. and then collapse this and then choosegoogle plus right here and change the background color and then collapse this. and then chooselinkedin 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 sectionand just do some customizations. so for button theme, i'm gonna choose flat and then i'llscroll down to padding and choose low. and then for align, i'll choose center. and thenwe 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 canjust scroll down and we should see our social
media buttons section right down here. sowe’re actually done with this page now and we’re gonna move on and create some blogpost. so i’ll show how to create a featured image and then add some content just likethis. 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 postpage, the first thing that we wanna do is put in a blog title right here. so i’m gonnatype in "build something great" and you can put in whatever you want. and when you’reready, come down to this section right here. and this is where you type in the contentfor your blog post. so what i’m gonna do
is just paste in some gibberish. and if youwanna format your content, you can use these buttons right here. so i’ll let you messyou around with these on your own, but you can also click on this “add media†buttonif you wanna upload images. so now the last thing that we wanna do iscome down to the featured image section and set our featured image. so click on this linkright here and then we can go to our media library and select the image that we wantor we can click on upload files and upload a new image. so i’m gonna stay on the medialibrary tab and just come down and find the image that i want. and i’ll just selectthis 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 gonnaleave this blank. so all i wanna do is just scroll up to this “publish†button andpush that. and once the blog post is published, let’s see what it looks like. so click onthis “view post†button right here. and once we’re on our blog post page, you cansee this is what it looks like right now. so we’re going to be doing some additionalcustomizations in a little bit including adding a comment section right here and customizingthe right side bar, adding our author name right here, and then changing the permalinksup here. so what i want you to do right now is pause the video if you want and createsome additional blog post. what i’m gonna do is create a total of six blog post andthen 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 defaultone. 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 thislink right here that says “trash.†and then we can just come down to the blog postand click on this link that says “delete permanently†or click on this button thatsays “empty thrash.†and once we’ve cleaned up our blog post, what we can do nowis go check out what the blog post page looks
like. so if you want, all you have to do istype in the web address slash blog, so howtowebby.com/blog is what i’m gonna go to. so you might wannasubstitute 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 youcan 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 thepages that we need for this web tutorial. but what we wanna do now is do some additionalcustomizations. so what i wanna do is go to the dashboard. so hover over your name righthere and click on "dashboard." once we’re
on our dashboard, the first thing that we’regonna do is allow for comments on our blog post. so what we have to do is come down toour settings and then click on "discussion." on the discussion settings page, we have tocheck off some of these boxes so that people can leave comments on our blog post. so thefirst one we wanna check off is this one right here and this is allows people to leave commentsand then we wanna check this box right here. so whenever someone leaves a comment, theyhave to put in their name and their email. and then we wanna uncheck this so people canleave 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 wheneversomeone leaves a comment, check this box right
here. and then let’s scroll down to thissection right here where it says “before a comment appears.†i usually check thisbox right here so i manually approve comments and this just helps with spam. so if you checkthis box, what you have to do whenever someone gives you a comment is come to the commentstab and manually approve them, okay? so i also usually uncheck this one so people canleave comments if it’s their first time. and once you’re ready, let’s scroll downto the bottom and just click “save†over and once our settings are saved, we can goto our blog post and we can refresh this. and if we scroll down we can see the commentsection right here. so if you don’t see your comments section, then let me show youwhat else you can do. if we go back to our
wordpress website, we can go to post and clickon “all posts.†and once you’re on the blog post page, come over and check off thisbox right here and then go into the drop-down and click “edit.†and then click thisbutton that says “apply†and then right here where it says “comments†go intothe drop-down and click “allow.†and then click “update†right here. and once thisis updated, we can go back to our blog post and refresh. and if we scroll down now, weshould see this comment section if you didn’t see it before. and the reason why you mightnot have seen it before is because we created this blog post before we updated the commentsettings. so going forward whenever you create a blog post, you should see this comment sectionright here, okay?
so now we’re gonna move on and the nextthing that we’re gonna do is create this right sidebar right here. so we’ll havethis recent post section, a twitter feed and then this facebook like box. so what we haveto do go back to the wordpress website and on the left hand side, go down to appearanceand click on “widgets.†on the widgets page, what we’re gonna do is drag some ofthese widgets on the left hand side into the sidebar right here. and so my sidebar mightlook a little different than yours because i’ve deleted some of the default widgetsthat come install with wordpress. and you can do the same by clicking and expandingthe widget and then clicking the “delete link†right here. and then the widget getsmoved back to the left hand side. and you
can always use it if you click and drag itover to the sidebar. so the first widget that we wanna drag inis the easy "facebook like" box. and this is a plugin that we downloaded earlier inthis tutorial. so all i wanna do is click and drag it into the side bar. and then wewanna paste in the facebook url right here. so all i wanna do is change this to nyc techclub and you wanna make sure there is no slash at the end. so if you have this slash righthere, you wanna delete it; otherwise, this widget won’t show up on your webpage. and now we wanna scroll down to this sectionwhere 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 bottomand find the text widget and we can just click this and check sidebar right here and scrolldown a little bit and click “add widget.†and now our text widget is right here andwhat we wanna do is add in some html for our twitter feed. so we have to get that htmlfrom our twitter profile. so go to your twitter page. and then on your twitter homepage, whatyou 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 youwanna do is click on "widgets" right here. and now what we need to do is go this buttonthat says “create new†and click on that.
and then we wanna click on this button thatsays “create widget.†so click on that. and right here, this is the html that we needfor this twitter feed right here. but before we copy this, we need to click on this buttonthat says “save changes.†so once the changes are saved, go ahead andhighlight this html and copy it and then go back to your wordpress website. and in thistext widget just paste in that html. and now we need to change the size of this twitterfeed. so what we need to do is go to the nyc tech club text tutorial and on step number29 right here, i want you to scroll down to this yellow box right here and highlight thishtml right here. and what we’re gonna do is copy it and then go back to the text widgetand 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 collapsethis. and all we have to do now is add the recent post extended widget. and this is aplugin that we downloaded earlier in this tutorial. so what we can do is click on itand then make sure this sidebar is checked right here. and then click this button thatsays “add widget†and this will be added right below the text widget where we wantit. so what we wanna do is change the thumbnail size from 45 by 45 to 75 by 75. and then wewanna click on this box right here that says “display excerpt†and then we wanna changethe 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’regonna customize that in a little bit, so don’t worry about that. the one thing i do wannapoint out is on the recent blog post section, you can see that the font right here is alittle gray and it’s not black. so if you wanna change that to a black color font, allwe 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 andthen scroll down to the sidebar color and then click on that. and then choose the “blackoption†right here and then we can just
click “save" and "publish.†and once thisis 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 theheader menu right up here. so what i wanna do is go back to the wordpresswebsite and what we wanna do is go to the dashboard. so hover over your name and clickon "dashboard." back on the wordpress dashboard what we wanna do to create our header menuis come down to appearance and click on “menus.†on this menus page, what we need to do isclick on this link right here that says “create a new menu.†and now what we wanna do isput in a title for our menu. so right here,
i’m gonna type “header menu†and whenyou’re ready click on this button right here that says “create menu.†now whatwe wanna do is come down to the menu settings right here and click on this box next to primarymenu. and then come to the pages tab right here and select the pages that you want toshow 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 thatsays “add to menu.†once you see your menu items right here, what you can do isclick and drag them to rearrange them and you can also click and expand these sectionsand 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 expandthat 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 isgo to our website and see what it looks like. and now when we go to our homepage, you cansee right here we have our header menu. and all of these links go to different pages onour website. so now let’s move on and the next thing that we’re gonna do is createour footer section with our website name. so let’s go back to the wordpress websiteand 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 andclick on “editor.†once you’re on this
edit page, come over here to the right sidewhere it says “templates.†and then find the footer, so the “footer.php†and clickon that. once you’re on the sydney footer page, iwant you to make sure that you see this right here where it says sydney footer. and if youwanna proceed with this section, you have to be really, really careful because if youmess up then it could ruin your website. so if you wanna continue, push this button righthere that says “proceed.†and once you see all of these css right here, what we wannado 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 nyctech club text tutorial and on step number
31 where it says “modify footer.†in thisyellow box right here, there is custom css. and what you need to do is highlight all ofit 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 canput 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 apostrophesright at the end and the beginning right here. otherwise this will not work and your websitewill not show. so once you’re ready, click this buttonthat says “update file.†and once the footer.php is updated, we can go to our websiteand see what it looks like. back on our homepage,
if we scroll down, we should see our footersection with our business name now. so now what we’re gonna do is move this to thecenter and we’re also going to get rid of this button right here on our recent blogpost section on the homepage. and then we’re also going to get rid of the extra space onthe right side bar. so what we need to do is go back to our wordpress dashboard. sogo 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 customcss. and once we’re on this theme junkie custom css page, what we need to do is goto the nyc tech club text tutorial and on step number 32 right here where it says “addcustom css†all we have to do is highlight
all of the css in this yellow box, copy itand then go back to the wordpress website and paste it in right here. and then we canscroll down to the bottom and click “save.†and once this is saved, we can go back toour wordpress website and check out what it looks like now. back on the homepage, if wescroll down, we should see some changes now. so right down here, there shouldn’t be ablog post button and also the business name should be centered. and then if we go to ourblog post, the right side bar spacing should be fixed. and we also got rid of the timerthat shows up when your site uploads. so the last thing that we’re gonna do isedit our permalinks and change the site tag line right here. so what we need to do isgo to our wordpress dashboard. so hover over
your name and click on “dashboard.†onceyou’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 itor you can actually delete it. and that’s what i’m gonna do. and then right down herewhere it says “wordpress address,†you can type in “www.†if you want that infront 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’regonna do is click “save changes.†and then we’ll be asked to re-login for securitypurposes, 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 wewanna click on "permalinks." and once you’re on the page, what you have to do is choosethe permalink that you want for your blog post. so the one that i usually choose isthis one right here that says “post name.†and once you’re ready, all you have to dois come down here and click “save changes.†and once the settings are saved, we have successfullybuilt a professional and beautiful wordpress website. so let’s go see what the finalproduct 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 questionsor comments, leave them below and please make sure to subscribe because we always put upawesome videos. so congratulations again and
i will see you all later.
Tidak ada komentar:
Posting Komentar