April 1, 2020
HOW TO MAKE A PARALLAX WORDPRESS WEBSITE FOR FREE! – 2019

HOW TO MAKE A PARALLAX WORDPRESS WEBSITE FOR FREE! – 2019


What’s up, everyone? It’s Jameson from NYC Tech Club. And today, I’m gonna show you how to make this Parallax WordPress website step by step. And you don’t need to know any type of coding or programming, whatsoever. It’s just gonna be a bunch of drag and drop and copy and paste. And what’s really cool about this Parallax WordPress Website is that you can make it a one-page website with custom animations just like this or you can make it amulti-page website with a few different pages just like this. So whatever type of website that you wanna make, I’m gonna show you how in this video tutorial And by the end of the video you’re gonna be a WordPress expert. So if you wanna save thousands of dollars building out this website yourself and if you wanna make a Parallax website using WordPress, the number one content management system on the internet then keep watching this video because I’m gonna show you how to make this exact website step by step. But first, what I wanna do is give you a quick tour of exactly what we’re gonna build right now. So this is the Home page that we’re gonna learn how to make. So what we’re gonna do is put in a custom slider image and have a fancy header and we’ll have a button right here that links to a different part of your Home page. And if you wanna customize these colors to another color, I’ll show you how to do that in this video tutorial. So if I click on this button, it’s gonna bring me down to the About section. So we’re gonna create this and if you wanna add a button to link people to a different part of your website, I’ll show you how to do that. And right below the About section, we’re gonna have the Services section. So if you wanna talk about your products or services right here, you can. And I’ll show you how to add these buttons that if you hover over them, they change to a different color. And right below this, we’ll have another section to talk about your business, and I’ll show you how to add these custom animations right here. And below this, we’re gonna have a Portfolio or Gallery section. So if you wanna add this, all you have to do is follow this video tutorial and then what people can do is click on these images and you’ll get this pop up and we can go through your album like this. And right below the Gallery section, we’re gonna have a Blog Post section. So if you wanna write blog posts, we can make them show up right here and we can also have this button to link to the Blog Post page. And below the Blog Post section, we’re gonna have the Contact Us section. So you can put in some details right here and we can also have a button to link to a contact form so that your visitors can contact you. And below the Contact Us section, we’re gonna have this map right here. So if you have a physical location, we can pinpoint where you’re located. And right below this, we’re gonna have a custom footer. And if we click on this button right here, it’ll bring us back to the top of the page and all of these links up here link to different parts of your Home page just like a Parallax WordPress website should, alright? So this is the Home page that we’re gonna create for this Parallax WordPress Tutorial. And now what I wanna do is show you what the About page looks like. So really quickly, this is the About page we’re gonna have a background image at the top and then a page title right here and then we’ll put in some information right here. And below this, we’re gonna have another section for your employees. So we’ll have this little section right here just to title this section and then we can put in some employee information right here. And below that, we can put in some details about your business and then we can have this contact section right here with this button to link to a contact form that we’re gonna create in this video tutorial, okay? So this is the About page. and now what I wanna do is show you what the Gallery or Portfolio page looks like. And on the Portfolio page, you can see that we’re gonna have a fancy header at the top and then we’ll have these images right here. And if your visitor clicks on this image, gonna pop up and they can click and go through your album just like this. And right below this, we’re gonna have another Contact section down here to link people to the contact form. And at the bottom of every page, we’re gonna have this footer and we’ll always have this back to top button to bring people back to the top of the page, alright? So this is the Portfolio page. and now what I wanna do is show you the Blog post page that we’re gonna make. So the Blog post page is very similar to the Gallery page. We’re gonna have a fancy header at the top and then we’ll have your Blog post right here and then we’ll just have our footer right here. So this is the Blog post page and what I wanna do is show you what an individual Blog post looks like. So if we click on this, so this is an individual Blog post and we can put in our featured image for this Blog post right here, and then we can have the date right here and below that we can put in the title and then all of the content right here. And below this, we’ll have some links to related post right here and then we’re gonna have a comment section so that your visitors can leave you a comment right here. And on the right hand side, we’re gonna have a sidebar and you can put in whatever you want. So what we’re gonna do is put in a Facebook Like box, some information right here, and then if you have a Twitter account, we can put in your latest tweets right here,, okay? So this is what an individual Blog post looks like. And now what I wanna do is show you what the Contact page looks like. And this is the last page that we’re gonna create in this video tutorial. So we’re gonna have a background image right here and then our page title and then we’ll put in some information right here and have some social media buttons right here, and then we’re gonna have a Contact Form. So if your visitors wanna contact you, they can write you a message and send it right to your email address, alright? So now you have seen the Parallax WordPress website that we’re gonna be creating today, and if you like what you see, then keep watching because now we’re gonna make our Parallax WordPress website step by step. The first thing that we have to do is register a domain just like this. And then we have to get hosting service which allows you to store your content and run your website. So for both of these, I recommend a website called hostgator.com. So what I want you to do is go to your web browser right here and just type in www.hostgator.com And once you do that, go ahead and push enter. And now you should be on the HostGator website right here. So I use HostGator on each and every one of my websites because they’re super fast, really reliable and they have a great customer service. And that’s why I’m gonna recommend them to you. So once you come to the HostGator website, all you have to do is come down here to this button that says “Get Started Now” and click on this. And now you should be on this page right here. So down here, you can see there are three different plans to choose from: the Hatchling Plan, the Baby Plan and the Business Plan. And the Business Plan is a little too expensive and more than what we need, so we’re just gonna focus our attention on the Hatchling Plan and the Baby Plan. So the Hatchling Plan is if you wanna build one website and one website only, you wanna choose the Hatchling Plan. If you plan on building more than one website and you wanna host them on the same account, then you wanna choose the Baby Plan. So I use the Baby Plan. So this is the one that I would select, but you can choose whichever plan And once you’re ready, just come down here and click on the button that says sign up now. And now, you should be on this page right here. So this is the HostGator sign up page and we’re gonna go through each and every one of these steps together. So step number one is choose a domain. And I’m gonna assume that you do not have a domain name registered but if you do, you can click on “I already own this domain” and then type in the domain name right here. So let’s make sure that we’re on this tab that says, “Register a new domain” and right down here where it says enter your domain, this is where we wanna search the web address that we wanna use for our Parallax WordPress website. So whatever web address that you wanna use, you wanna type it in right here. So I’ll type in parallaxdemosite.com and once I push “Enter,” I can search to see if this web address that I have right here is gonna be available so that I can register it. So once you’re ready, push enter. And once the search results come back, if you see this green checkmark and it says, “Added,” then we’re good to go and we can move on to the next step. Otherwise, what you have to do is change your domain name right here and then search to see if it’s available. So if you see the screen checkmark and it says, “Added,” then we can just scroll down and what I want you to do is uncheck this box right here, because this adds a service that we don’t really need right now and it’s just an extra cost. And we can always add this back later if we want. So uncheck this box and then we can scroll down to step number two. So step number two is choosing a hosting plan and right here in this dropdown, you can see that we have the Hatchling, Baby and Business Plan to choose from. So again as a reminder, the Hatchling Plan is if you wanna make one website and one website only and then the Baby Plan is if you plan on making more than one website and you wanna host them on the same account, you wanna select the Baby Plan. So I use the Baby Plan so that’s the one that I would select and then what you wanna do is choose your billing cycle. And there’s a few different options here and what I usually recommend is either 6 or 12 months just to give yourself enough time to know whether or not you wanna run a website or not, so I’m gonna select six months right here. And then you wanna create a username and a security pin. And once you do that, we can move on to step number three. So step number three is where you gonna enter your billing information, and I’m not gonna do this with you because I’ve already created my account but if you need to, you can pause this video and fill out all of this information and then just push play once you’re ready Otherwise, we’re just gonna move on to step number four. So step number four is adding additional services and by default, HostGator selects some of these for us. And what we wanna do is uncheck all these boxes because these are services that we don’t really need and again, they’re just extra cost right now. And we can always add these back later. And as a side note, I will link you to another video on how to create your own email address using your domain name for free. So again, you don’t have to pay for this. So make sure you uncheck all of these boxes, and once you do let’s scroll down to step number five. So step number five is entering a coupon code, and this is probably one of the more important steps because you wanna save as much money as possible. And by default, HostGator puts in a coupon code for you. And you can see that you save a little bit of money right here but what I want you to do is delete this coupon code and type in this special code that HostGator gave us: NYC Tech 3-0 and then click validate. And what you’ll notice is that your discount increases to over 50 percent off, and that’s because this coupon code, NYC Tech 3-0, is the highest coupon code available made by HostGator. So make sure you type in NYC Tech 3-0 and then click validate to see a larger discount than you would get anywhere else. But what you’ll also notice after you click validate is that now you have this line item called hosting add-ons. So what we need to do is go back up to step number four and we wanna make sure that we uncheck all of these boxes. And once we do, we wanna come back down to the bottom and you can see that that line item disappears. And now we’re ready to check out. So all we have to do is come down here and check this box that says, “I have read and agree to the terms” and then click this button right here that says, “Check out now.” So once you have your HostGator account, what you wanna do is go to your email inbox and you should see this e-mail from HostGator titled, “Your account info.” Go ahead and click and open up this email and you should see some additional information right here. And all we wanna do is go to this line where it says, “Your control panel” and we wanna click on this link right here so that we can install WordPress and start making our Parallax WordPress website. So go to your HostGator email and come down to your control panel and just click on this link. And once you’re on the HostGator login page, all you have to do is put in your username and password. So what I want you to do is go back to your HostGator email and over here, you can find the username and the password. So copy and paste both of those into these two sections right here and then once you’re ready, just click this login button. And once you’re logged in, this is your HostGator cPanel, and this is where we’re gonna go to install WordPress and this is also where you can go to create your email address using your web domain. But right now, the only thing that we’re gonna do is install WordPress. So on the left hand side over here, come down to software and click on that, and you’ll see this software section right here and all I want you to do is click on this link right here that says quick install. And once you’re on this next page, all you have to do is come over here to where it says WordPress and click on this. And once you’re on the install WordPress page, all you have to do is come into this dropdown right here and then select the domain that you just registered and then leave this blank and then click this next button right here. And now what you wanna do is put in a website name right here and you can always change this later. So don’t worry too much what you put in right now and then you can create an admin username. So I put an admin right here, and then put in your first and last name and then your email address right here. And after you do that, all you have to do is come down here and check this box to agree to the terms of service and then come over here and click this install now button. And once WordPress is installed, you should see this message right here and you should see some additional information right here. And what you wanna do is save the username and the password because we’re gonna need those to log into our WordPress website so that we can start making our Parallax WordPress website. Or what you can do is go to your email inbox and you should see this email right here that says, “Install Complete.” If you click and open up that email, you’ll see some details right here and you have your URL, your admin URL and then the same username and password. So if you have this email, you don’t have to write down that information on the HostGator website. So what we’re gonna do is login to our WordPress admin website in just a few seconds but first, what I wanna do is just show you what the website should look like now that you installed WordPress. So what I want you to do is go to this line that says, “URL” and we’re just gonna click on this link. And once your WordPress website loads, this is what it should look like. So if it looks like this, then we’re good to go and we can move on to the next step. So now what I wanna do is login to my WordPress website. So what you can do is click on this button that says admin login or go back to that email from WordPress. And right here where it says, “Admin URL,” just go ahead and click on this. So this is the WordPress login page and what we’re gonna do is put in our username and password right here. So I’m gonna go back to my email and just highlight the username right here. And then go back to the WordPress website and paste that in and then just go back again and get the password right here and copy that and then put that into the section right here. And I’ll check remember me but you don’t have to. So once you put in your login details right here, go ahead and click the login button right down here. And once you’re logged in, this is your WordPress dashboard. And this is where we’re gonna go to create all of our pages and post and upload all of our images and everything so you’re gonna become very familiar with this page as we go through making our Parallax WordPress website. And if you see right at the top, you should see this message that says, “Your site is currently displaying a coming soon page.” And that’s because we haven’t published our website yet but since we’re logged in to WordPress, if we go to our WordPress website it should look something like this, something very basic and something very generic. And what we’re gonna do is install a theme that we can customize to make our website look like the demo website like this. So what you need to do is go to the NYC Tech Club text tutorial and again, there is a link to this page on how to make a Parallax WordPress website in the video description. So click on that link and then come down to step number six. And step number six is installing the WordPress Theme that we’re gonna be using. So we’re gonna be using the Themify Ultra Theme and this is a premium theme. But what’s really great about watching this video by NYC Tech Club on how to make a Parallax WordPress website is that Themify allows us to share this theme with you for free. So all you have to do is come to this text tutorial and then come down to step number six and then click on one of these links that say Themify Ultra. And what you’ll do is download the zip file that we need to install so that we can use for our Parallax WordPress website. And I’ll always update these links with the latest version of the theme, okay? So come down to step number six, and let’s come right here to where it says, “Download the Themify Ultra Parallax WordPress Theme” and click on this link and you should see the zip file get downloaded right over here. And once you do, let’s go back to our WordPress dashboard. And now what we’re gonna do is install this theme. So come down on the left hand side to appearance and hover over that, and then just click on themes. And once you’re on the themes page, all you have to do is click on this button that says upload. And now, you should be on this add themes page and all you have to do is click on upload theme right here, but before I do that I wanna go to my downloads folder and just show you that you should see the themifydashultra.zip file right here but some of you will download this and it will turn into a folder like this. So if you see a folder in your downloads folder, what you need to do is right click it and then click on “Compress.” And that’s gonna turn the folder into a zip file and that’s what we need to upload. So make sure that you turn your folder into a zip file if it’s not a zip file already, okay? And once you do that, we can go back to this WordPress page right here and then click on “Upload theme” and you’ll see this section right here. And then just click on choose file and then go to the folder or wherever you saved the themify- ultra.zip file and select that and then just click open and then click install now. And once the theme is installed, you should see this message right here and all we have to do now is click on this link right here that says activate. And once your theme is activated, you should be brought to the Themify settings page and you’ll see this pop up right here and we wanna get rid of this. So on the left hand side, let’s click on Themify Settings just to bring us to the main settings page. And we’re gonna go through this stuff in just a few seconds, but first what I want you to do is open up a new tab and go to your WordPress website. And I just want you to make sure that the website that you have looks very similar to this because this is the website after you install and activate the Themify Ultra Theme. So if you see something like this, then we’re on the right track and we can go back to our WordPress Themify Settings page. And the first thing that we wanna do is click on this tab right here that says, “Skins & Demos.” So on this tab, you should see a few different options right here. And these are skins and skins are pre-made web designs that Themify has made with custom colors and custom settings already selected for you. So if you ever wanted to check out one of these demos, all you have to do is click on this button that say, “View demo” and if you liked any of them and you wanted to import the theme settings, then you can just select one of these and then click the save button on the upper corner. So by default, this one’s selected and if you want to create a website from scratch, this is the one that you would use. But sometimes, it’s actually easier to use one of these skins that have pretty much all the settings that you want and then you can just go in there and customize the colors and then change a few things. And that’s what we’re gonna do to make our Parallax WordPress website because this skin right here called Restaurant has pretty much all the settings that we want. So we’re gonna save some time and actually select this one instead of going through the settings our self and selecting everything So make sure that you select the restaurant skin and don’t worry about the name. We’re not gonna create a restaurant website unless you really want to and if you wanted to, you can actually import the demo content of any of these websites into your WordPress website if you want it also. But we’re not gonna do that because we have our own content and you’re gonna build your own website with your own images and content as well. So all I want you to do is select the restaurant skin so that we can import the settings to our WordPress website. And once you have the check mark right here, we can scroll up and then click the save button right here. And you can see that it gets saved. And now if we go to the tab with our WordPress website, this is what it looked like with the default theme or skin. And if we refresh this, now this is what it’s gonna look like with the restaurant skin. So you can see we have different colors here and we have this little icon and the font changes a little bit, but don’t worry about these colors or this icon, we’re gonna change this stuff to make it look however you want on your own WordPress website So if this is what you see now after you selected the restaurant skin, then we’re good to go and we can go back to our WordPress dashboard. And now we’re gonna move on to the next step. What we’re gonna do now is install some plug-ins and plug-ins are like tools that helps support us as we build out our WordPress website. So the first thing that we wanna do is come down to plug-ins on the left hand side and let’s click on this link that says, “Add new.” And once you’re on the add plug-ins page you’ll see some plug-ins right here and you can also filter by different categories right here. And you can also search for plug-ins right here. So again plug-ins are like tools that help you with your WordPress website So if there’s ever anything that you wanna do on your WordPress website and you need some help, you can always search for a plug-in and then you’ll get some search results and then you can install the one that can help you out. And that’s what we’re gonna do in just a few seconds but first what I wanna do is download some premium plug-ins that Themify has created for us to help us make our Parallax WordPress website. So what I want you to do is go to the NYC Tech Club text tutorial on how to make a Parallax WordPress website and again, the link’s right here. And then come down to step number seven. And this is where we’re gonna add some WordPress plug-ins. So we’re gonna download these premium plug-ins right here from Themify and again, I’m able to share these with you because Themify has allowed me to. All we have to do is click on each of these links to download the zip files for each of these plug-ins. So let’s download the contact plug-in, the map plug-in and then this portfolio plug-in. And you should get the zip files downloaded. And once you do, we can go back to our WordPress website and we wanna upload these plug-ins. So click on upload plug-in and then click on choose file, and you wanna go to wherever you saved these premium plug-ins. And again, if this show up as folders you wanna right click and then click compress to turn them i into a zip file. And what we’re gonna do is upload each of these individually. So first, I’ll click on the contact.zip and click open and then just click install now. And once the Contact plug-in is installed, we’ll get this this message right here and we can just click on this button that says activate plug-in And then we’ll be redirected to this plug-ins page right here and we wanna add the two other plug-ins. So let’s click on add new again. And once we’re back on the add plug-ins page, let’s click on the upload plug-in button and then click choose file one more time and then click on the post.zip and click open and then just click install now. And then we’ll click the activate plug-in button once again, and now we’re gonna add the last plug-in that we downloaded. So click on add new and then click on the upload plug-in button and then just click choose file one more time. And we’re gonna select the maps plug-in and then click open and then click install now. And once that plug-in is installed, again we’re gonna click the activate plug-in button. And once the plug-in is activated, you should be brought back to the plug-ins page right here. So if you see a bunch of different messages at the top, go ahead and click all of the Xs right here just to clean everything up. And now you should see a list of all your plug-ins right here. So you should see the three that we just downloaded and installed right here. So you have the Builder Contact, Builder Posts and Builder Maps Plug-in. And this is gonna be for our contact form, Blog posts and for our map on the Home page for our Parallax WordPress website. And now that we wanna do is add two more plug-ins. And these are gonna be the free plug-ins from the WordPress website. So let’s click on add new right here and once you’re on the add plug-ins page, what we’re gonna do now is search for some plug-ins. So right here in the search bar, what I want you to do is type in the name of two plug-ins. So on the NYC Tech Club text tutorial on how to make a Parallax WordPress website, at the bottom over here in step number seven, you can see the name of two different plug-ins. So the first one is called Easy Facebook Likebox. And we wanna highlight and copy that and then just paste that in right here. And then we can get our search results and the one that we want is this one right here by Sajid Javed. So just click on the install now button and once this installs, you’ll see this activate button right here and click on that. And once the plug-in is activated, you should see it in your list below, but before we go and check that out, let’s add the other plug-in. So go back and click on add new plug-in right here and once you’re on the add plug-ins page, let’s go back to the text tutorial and the plug-in that we want is the WP Super Cache. So I’ll just highlight this, copy that and then go back to the WordPress page and just paste that in right here. And then I’ll just let these search results come up and the one that we want is this one right here by Automattic. So just click install now and just wait for that activate button and then just click activate right here. And once your plug-in is activated, you should be brought back to this page right here. So if you scroll down, you should see some plug-ins that you installed and then some other ones that are installed by default. And you can leave them all as is. All I want you to do is make sure that you have the Easy Facebook Likebox plug-in right here and we’re gonna use this one for our Blog post pages. So when we have our side bar, we’re gonna have a box with our Facebook page and then your visitors can like your Facebook page right on that page. And also, if you scroll down you should see the WP Super Cache plug-in down here. And what this one does is it helps your website load faster. But what we need to do is we have to change some settings on the WP Super Cache plug-in so that we can turn on the Super Cache so that our website loads faster. So what you can do is click on settings right here or you can hover over settings on the left hand side and click on WP Super Cache. So whichever way that you wanna do it, go ahead and click on one of those links. So I’m just gonna click on settings right here. And once you’re on the WP Super Cache settings page, just come down to caching and select on right here and then click update status. And once that’s updated, the Super Cache is now enabled. So whenever you create any pages, all of that content’s gonna be stored on the server so it loads a little faster. And we’ll come back to this page a little bit later as we start making our pages for our Parallax WordPress website, because I do wanna go over one additional thing, but I don’t wanna confuse you yet so we’ll come back to this later. So we’re just gonna move on to the next step. And now what we’re gonna do is change our permalinks. So right at the top, you can see I have my website name parallax demosite.com and it’s missing the www dot in front of it. And we wanna include that and we also wanna select the permalink URLs that we’re gonna use for our pages and posts. So that’ll all make sense in just a few seconds. So let’s add the www dot in front of our domain name right now. So let’s go down to settings and underneath settings, let’s click on general. And once you’re on the general settings page, just come down to where it says WordPress Address and Site Address and I want you to be very careful in this section, because I used to put this at the end of my videos and after people spend hours and hours of work creating their WordPress website, they would do this section right here and they would delete something or add something extra, and then they couldn’t access their website anymore. And they had to delete everything and start all over again and I don’t want that to happen to you. And that’s why I’m putting this at the beginning of my video so we’re about 20 minutes in or so. So in case you do mess up, you haven’t really put in a lot of work yet. But I don’t want you to mess up, so I want you to be very careful. All we’re gonna do is come to where it says, “WordPress address” and we’re gonna leave everything as is HTTP:// and then right before your domain name, I want you to put your mouse there and just type in www. and that’s it. Make sure that your domain name is spelled exactly how it should be and then you have .com right there. And then do the same with the Site Address. After the HTTP:// just type in www. Don’t delete anything and don’t add anything extra. And I want you to double and triple check to make sure these are correct. And once you do that, just come down to the bottom and you can select any of this stuff if you want but I wanna leave everything as is and just come down here and click save changes. And now, you’re gonna be asked to log back into your WordPress website. So go ahead and type in your username and password and I’m gonna check remember me, and then click login. And once you’re logged back into WordPress, if you look at your URL right now, you should have the www. right here here and then your domain name.com.org or whatever else you have right here. So if you have this right here, then we’re good to go and now we can select the permalinks that we want for our pages and posts. So what I want you to do now is on your WordPress dashboard, come back down to settings and hover over that and this time around click on the Permalinks link right here. And once you’re on the Permalinks settings page, you can see down here there’s a list of options that you can choose from. So whichever one that you choose on the right hand side, that’s where your URLs would look like for all your pages and posts. And the one that I usually recommend is the Post name option so I’ll select that right here, because I think this is the best one for SEO and also really easy to type out. So I would recommend the Post name option. So if you select this one or you change to any of these other ones, once you’re ready just scroll down to the bottom and click save changes right here. And once the Permalinks are updated, we can move on to the next step. So what I want you to do is go back to the NYC Tech Club text tutorial on how to make the Parallax WordPress website and then come down to step number nine which is going be downloading a zip file with some demo images. So I do recommend that you use your own images to make your Parallax WordPress website, but if you need some images to follow on with this video, you can download a zip file right here that has images very similar to what we have in the Parallax Demo website. So if I click on this link, you can see that I download a zip file right down here. And once it gets downloaded, I wanna open up that zip file. So I’m just gonna wait for that to download. And once it does, I can go to the folder where it’s downloaded and you can see right here that it’s a zip file. It has the dot zip at the end. You wanna unzip this. So all I have to do is double click it and now we have this folder, and it should have all of our demo content right here. And that’s what you wanna do. So make sure you unzip the zip file so that it becomes a folder. And once you do that, we can go back to our WordPress website and now what we wanna do is upload all of those images and content. So on the left hand side of your WordPress dashboard, hover over media and then click on add new. And once you’re on the upload new media page, all you have to do is click on this button that says, select files and then go to wherever you saved your content. So I’ll go to my Parallax WordPress Content folder and I can select this stuff and upload them individually or I can select all and upload them all at once which is what I’m gonna do. So I’ll select everything and then just click open. And once everything is uploaded, you should see all of your images right here and you can also click on these links right here that say, “Edit” to edit the images. Or what you can do is go under media and then click on library. And on the media library page, you should see all of the content that you uploaded and if you wanna edit any of this stuff, all you have to do is click on the image, you’ll get this pop up and then click on this edit image button down here and then you’ll see this page. And you can change the size of your image. If you wanted to, you can actually take an area of your image and you can crop it by clicking on this button right here or you can rotate the image however you want. And after you edit the image, all you have to do is click the save button right here and then that’s gonna be your So I just want to give you that little tip but we’re not gonna actually do anything so we’re gonna close out of this. And now that we have the demo content uploaded, what we wanna do now is move on and we wanna create our Home page. So on this WordPress website right here, all I want you to do is either go to where it says, “New” at the top and then click on page. Or on the left hand side, we can go to pages and hover over that and then just click add new. And once you’re on the add new page, this is where I’m gonna show you how to make your Home page and for our Parallax WordPress website, all you really need is one page. But as you saw in the demo, we’re gonna create a number of pages just so that you become familiar with WordPress and also so that you can learn how to use the Themify Builder to customize your entire WordPress website to look however you want, okay? So let’s get started. Let’s create our Home page. The first thing that we’re gonna do is come right here to where it says, “Enter a title” and title our page home for Home page. And you can come down to this section and if you want to create a regular WordPress webpage, you can just type in your content right here but again we’re gonna be using the Themify Builder. So we’re gonna leave this blank and I’ll show you what the Themify Builder is in just a few seconds. So when you’re ready, let’s scroll down to the bottom and you should see this section that’s called Themify Custom Panel. If you don’t see this, what I want you to do is scroll up and on the upper right corner you can see this button that says screen options. Click and expand it and you should see these options over here. What you have to do is check this box next to Themify custom panel and then it’ll show up on the bottom. But by default, it should be selected for you. But just in case, come over here if you don’t see the Themify custom panel and check this box, okay? So we’ll close this and we’ll just come back down to the. custom panel over here And we wanna start on the page options tab. And we’re gonna select page options each time we create a new page. So if you wanna create something that looks very similar to the demo Home page, then just follow along and select the options that I select; 0therwise, you can play around and select whichever options that you want, okay? So for the sidebar option, I wanna select the one that says, “No sidebar. ” And then for the content width, I wanna select full width. And then for the hide page title, I’m gonna go into this dropdown and select yes because we’re gonna create a custom page title using the Themify Builder. And then we’ll leave these last two as the default so blank and no. And once you’re ready, let’s go to the page appearance tab. And once you come to this tab, we’re gonna skip this first section right here because we’re gonna paste in some custom CSS in a few steps that’s gonna allow us to choose the colors that we want for our entire Parallax WordPress website. So we don’t need to worry about this right now. So let’s just scroll down to the next section and you should see the header design option right here. And what we wanna do is select the one that’s called header horizontal. So select that and leave this sticky header as the default and then come down to the header elements. And on the header elements, what we’re gonna do is hover over each of these and we’re gonna click hide or show for each of these items. So let me show you on the demo website really quickly. This is the header and all we show on our demo Home page is the logo and also the menu items. So that’s all we’re gonna show on our WordPress page also. So back on this WordPress page in the header elements we’ll hover over site logo and click show and then for these other ones, we’re gonna hide. So site tagline, I’m gonna hide. Search form, I’m gonna hide. RSS link, I’ll hide. Header widgets, I’m gonna hide. Social widgets, I will hide and then menu navigation, we wanna show. So you can show any of these other ones if you want but again if you want your Home page to look like the demo, just select the same options that I did. And then come down to background type and we wanna choose the transparent header. So the reason why we’re doing that is if I go back to the demo and I scroll down a little bit, you can see that the header is transparent so you can see through it. So that’s why we’re selecting the transparent header, okay? So let’s go back to this WordPress page. And once you’re ready, let’s scroll down to the bottom. So now what we wanna do is choose the footer design. We’re gonna choose the one that’s called footer block and then come down to the footer elements. And again on the demo website, if I just scroll down to the bottom I can show you what the footer elements look like. So let me go down to the footer and right down here you can see that we have the back to top button, some social media buttons, some links to other pages and then our website or business name right down here. So if you want your footer to look like this, what you wanna do is go to your WordPress page and in the footer elements, you wanna hide the site logo and you wanna hide the footer widgets and you wanna show the menu navigation and then show your footer text and show your back to top arrow. And once you do that, we’re pretty much done with this section. We don’t need to change anything else, and we can just scroll up to the top over here where it says publish. And to create this page, all we have to do is click on this button right here that says publish. And once your page is published, we can’t click on this link yet to see our page because we have to go to our settings and set the Home page to this page. So what I want you to do is on the left hand side, go down to settings and hover over that and then click on reading. And once you’re on the reading settings page, all you have to do is come right here to where it says front page displays and then select a static page right here. And then for the front page, I want you to go into this dropdown and then select the page that you just created. And once you do that, go ahead and click save changes. And once your settings are updated, now we can go to our Home page and check out what our Parallax WordPress website should look like. So if I go to this tab right here, this is the Parallax demo website and this is what the website looks like after we installed WordPress and the Themify Ultra Theme. So what I can do is just refresh this and the new Home page should upload and it should look just like this. So we have our header elements and our footer elements right here. So if this is what you see, then we’re good to go and we’re gonna create the content for our Home page in just a few minutes using this Themify builder. If you don’t see this and you refresh your WordPress website and you saw the same exact thing, what you have to do is delete something called cache. And I don’t want to confuse you too much but I do wanna talk about it. So let me go to this tab really quick, and this is the WP Super Cache settings page. And we have this page because of the plug-in that we installed called the WP Super Cache. And if you remember, we came over here and we turned on our caching which stores all of your content on your server to make your website load faster but what it also does is if you update your website, the content on your website isn’t gonna update right away. It’s gonna take a few minutes for the server to refresh and upload the new contents and save that. So if you wanna see the changes right away, what you have to do is come to the WP Super Cache settings page and then click on this button that says, “Delete cache.” And that’s gonna delete the contents on your server so that it refreshes and uploads all of the new content. So you can do that and then see the changes right away or what you can do is come over here and just turn off your cache right now and then click update status. And then build out your Parallax WordPress website and see the changes right away, and then just turn this on once you’re done watching this video. So it’s up to you what you wanna do, but if you keep it on just come to this page all the time whenever you refresh your Home page if you don’t see any changes and delete your cache and then you’ll see the changes, right away, alright? So again, to come to this page on your dashboard, just come down on the left hand side to settings and then click on WP Super Cache. So what I’m gonna do for the rest of this tutorial is actually turn this off right now and then I will just turn this back on on my own at the end of the video. So I’m not gonna show you this but just make a note of it if you do turn it off that you wanna turn it back on to make your website load faster. So if you change this, make sure that you click update status and then we can move on to the next step, alright? So before we create the content for our Home page, what we’re gonna do is let me go back to the Home page, we’re gonna choose our settings for our Parallax WordPress website and then change the colors and all that stuff. So what I want you to do is go to your WordPress dashboard. So if if you’re on your Home page right now and it looks like this, then awesome, but now what we wanna do is just hover over our website name right here and then click on dashboard. And once you’re back on the WordPress dashboard, now what we’re gonna do is select the theme options that we want. So come down on the left hand side to Themify Ultra and hover over that and then click on Themify settings. And once you’re on the Themify settings page, what we’re gonna do is go through some of these tabs so that I can show you what we selected for the Parallax WordPress website. And if you wanted to, you can always go to these tabs on your own and select whatever options that you want. So you can customize your WordPress website to look however you want, okay? So what I wanna do is make sure that we’re on the general tab first and right at the top, if you wanted to upload a favicon to your WordPress website you can do that right here, but we’re gonna do this a little bit later in another section. So I don’t wanna talk about the favicon right now but I did wanna note that you can upload it over here. I’m gonna show you how to upload it another way a little bit later. So all I want you to do right now is just scroll down to the bottom of this page for the general tab to the Google Fonts section, and I want you to select this second bun that says show all Google fonts. And once you do that, you can click save over here to save your settings that you just selected or you can also scroll up to the top and there should be a save button up here. But what we’re gonna do is just wait till we’re done selecting all of our options and click save at the end, okay? So now what I wanna do is go to the default layouts tab. And once you’re on this tab, we want to come to where it says, “Default archive post layout” and we wanna select the settings for the archive post page. And before I get started, I do want to note that this is a YouTube video tutorial. So if I ever go too fast for you or you wanna re-watch something or you have something elseto do, you can always push pause or you can go back and re-watch that section. So don’t forget that as you go through this video tutorial, alright? So the first thing that we wanna do is come right here to where it says archive sidebar option and we wanna select “No side bar.” And then you can come down to post layout and we wanna select “Grid three.” And then we can come down to where it says “Post content layout” and in this dropdown, I wanna select “Polaroid.” And then for post masonry, I’ll keep it as yes and then post gutter, I’ll keep it as default and then for display content, I’m gonna go to this dropdown and select none. And we’ll leave all of this stuff as is and we’ll come down here to where it says hide post meta and I wanna hide a few of these. So I’ll hover over author and click hide, and then hover over comment and click hide and then hover over tag and click hide. And once you do that, just scroll down to where it says, “Image size” and for the width, we’ll put in 365 and then for the height we’ll put in zero. And for the default single post layout, I’m gonna leave everything as is so I’m just gonna skip this section and then come down to the default page layout. And again, we’re gonna leave everything as is, Except for this last thing where it says page comments, I wanna check this box to disable comments in all pages. And once you do that, we can click the save button if you want or we can just scroll up to the top and again you can click the save button over here or we can move on to the next tab which is the portfolio layouts tab. And for the portfolio layouts, we’re actually gonna leave everything as the default but I wanted to come over here just so that you can see what all of our options are so you can make sure that yours look just like this. So if you need to, go ahead and pause the video and make sure that you have everything selected that you see on the screen. So I’ll go through this a little bit slowly just so that you can pause the video again to see all of these different sections and everything that’s selected. And once you’re ready, we can just go back up. And now what we’re gonna do is go to the theme settings. And once you’re on the theme settings tab, we’re gonna leave the responsive design break points as is, so all I want you to do is just scroll down to the theme appearance section and before we actually get started on selecting some of these, I do wanna note as you go through all of these tabs and select our settings, they’re gonna carry over to your entire WordPress website. So if you wanna make any changes for certain pages or post, there’s also going to be an appearance setting section there where you can actually override the entire WordPress website settings for that page or post, okay? So that’s just something for you to know. So once you’re here in theme appearance, for the theme color and typography we’re gonna leave it as the default right now because in the next section or two, we’re gonna paste in that custom CSS that I’ve talked about that’s gonna allow you to select the colors that you want for your Parallax WordPress website. So let’s not touch these two right here, but come down to header design and there’s a bunch of different options that you can choose from here but the one that we use for The Parallax WordPress website is this one right here called “Header horizontal.” So I’ll select that one and then right below that you’ll see a list of options here. We wanna hide some of these for our header. So I’m gonna check exclude site tagline, search form, RSS link, header widgets and social widgets. So again, if you want your header to look like the Parallax demo website then just check these boxes right here. And once you’re ready, come down to footer design and we’re gonna leave this with the footer block right here but we wanna exclude some of these So I wanna exclude the site logo and the footer widgets. And we’re gonna leave these other ones unchecked and then we can just scroll down to the bottom to the footer text section. So all the way down here. And what I wanna do is scroll down just a little bit more. I wanna hide the footer two text, so check this box and it’s gonna collapse this section right here. And then what I wanna do is put in some text right here. So if I go to the demo Parallax WordPress website, in the footer over here, you can see I have the copyright studio designs. If you want something like this and you want that copyright text, what you can do is go to the NYC Tech Club text tutorial on how to make a Parallax WordPress website. And then come to step number 13 and scroll down to the theme setting section and right here in pink, I have the text that you can copy. And it’s gonna have that copyright symbol and you can copy that and go back to your WordPress website and just paste that in right here in the footer text one. And then you can change the studio designs to your website name or your business or whatever right here. And you can also put in your year and all that stuff. And this is gonna make the text show up in your footer, okay? So now that we’re done, we can click save right here or what we can do is just move on to the next tab that we wanna go to which is gonna be for our social media buttons. So come to social links and click on that. And what we wanna do here is link our social media buttons to the right pages. So let me show you what I’m talking about. In the demo Parallax WordPress website, in the footer right here we have some social media buttons for YouTube, Instagram, Twitter and Facebook and they all link to the right pages. So what I wanna do is show you how to add some social media buttons for whatever type of social media that you want and make sure that you link them to the right page. So what we wanna do is go back to the WordPress page and what we wanna do is come down here and we wanna fill out some information to create our social media buttons and link them to the right pages. So what I’ve already done is filled out all the information to create all of my different social media buttons just to save some time. But what I wanna do is just tell you how to do this really quickly so that you can pause this video and then create as many different social media buttons that you want and just make sure that you link them to the right page. So you should see some boxes right here. If you don’t, you can always come down to this link where it says, “Book page” right here. add link and click on that and it’s gonna create a new box. And what you wanna do is put in the title or name of the social media button that you wanna create. So right here you can see I put in Facebook and then what I did was I put in the link to the Facebook page right here. So you wanna put in the link so that you go to the right page if someone clicks on the button and then we can insert an icon. So to insert the social media button, what you wanna do is click on this link that says, “Insert icon” and you’ll get this pop up with a bunch of different icons right here. And you can filter by category if you want but the easiest thing to do is go to the search bar and just type in the social media that you want. So if I type in Facebook, you can see that I get a few different search results. And what I wanna do is choose the icon that I want and then just click on that. And what that’s gonna do is insert some short code right here so it create that button. And then what you wanna do is if you wanna change the color, you can come down to icon color and click on this button and you’ll get this pop up and you can drag this wheel to change the button to whatever color you want. But I like the default color so I’m gonna erase this and you can also do the same with the background color right here. So again, just click on that button and then drag this or add whatever color code that you want. But again I like the default so I will delete that and what you’re gonna do is just keep adding new buttons. So again, click on add link and then add a new button right here. And if you wanna delete any of them, just click on the X right here and then if you wanna rearrange these, you can just click drag to sort and drag it around to wherever you wanna put it. So what I want you to do is pause this video and create as many different social media buttons that you want. And once you’re ready, go ahead and click the save button right here and then just push play to watch the video. And what we’re gonna do after you’re done creating all of your social media buttons is we’re gonna insert them into our WordPress website. So for now, go ahead and pause the video and just fill out all these different boxes and create as many different social media buttons that you want, alright? So I will see you back in a few minutes. Alright, and welcome back and hopefully you spent some time to create some social media buttons and linked them to the right pages. So now, before we actually move on and add the social media buttons to our WordPress website, I wanna make sure that you click the save button right here. So let’s click the save and we should see this checkmark that says everything’s been saved because the last thing that we wanna do is go through all of these settings and select our options and then forget to save everything. So make sure that you click the save button right here. And once you do that, what we’re going to do is go through one more tab right now before we move on to add the social media buttons to our WordPress website. And we can always go through these tabs again later if we missed anything and we’re actually going to go through some of these a little bit later in this video tutorial. But all I want you to do right now is click on Themify Builder and right at the top, you should see the section where it says Themify Builder Options And right here where it says Themify Builder, make sure in this dropdown that enabled is selected. And you might wanna click save again just in case, so it’s better to be safe than sorry. And once you do that, we’re done with the Themify settings for now. So now what we wanna do is go and add the social media buttons to our WordPress website. So what I want you to do is come down on the left hand side to appearance, and hover over that and then click on widgets. And once you’re on the widgets page, what we wanna do is come to the right hand side and you’ll see a bunch of different boxes here and what these are are different sections on your WordPress web pages. So what we wanna do is add one of these widgets on the left hand side to the footer social widget. So what I want you to do is come down to the Themify Social Links widget and you can click on this and you can scroll down and click on footer social widget and if you scroll down some more, you can click on add a widget and it’ll add this widget to the footer social widget or what you can do is just click and drag this up to the footer social widget and just put it in here. And then there’s a few different options here so you can add a title or check these boxes if you want, but all I wanna do is just click “Save” because we’re gonna leave everything as is. So once this is saved, we can actually collapse this and now what we can do is go and check out what our Parallax WordPress website looks like. So if you want, you can hover over your name on the upper left and then just click on visit site. And once your WordPress website loads, this is what it should look like right now. So we have some social media buttons right here and then our website or business name right here. So the footer looks a little bit better, but it’s not great yet and we’re gonna fix that in just a few minutes. But first what I wanna do is delete the sample page so that we don’t have that link up here and we’re also gonna delete a sample Blog post page that we don’t need. So if your WordPress website looks like this, then we’re on the right track and we can move on to the next step which is gonna be deleting these pages that we don’t need and then we’re gonna paste in some custom CSS to change the colors on our Parallax WordPress website to whatever you want. And then we’re gonna start doing the fun stuff which is gonna be making the content for our Parallax WordPress website. So the first thing that we wanna do is delete these sample pages. So let’s go back to our WordPress dashboard. So hover over your website name right here and then just click on the dashboard link. And once you’re on the WordPress dashboard, let’s delete our sample Blog post first. So come down on the left hand side to post and click on all posts. And once you’re on the post page, this is where you’re gonna see all of your different Blog posts that you write. So right now, we just have this sample one that WordPress installs for us and we wanna delete this. So just hover over it and click on this link that says trash. And once the post is deleted, if you wanna go to your trash can and empty your trash, you can by just clicking on this link. But what we’re gonna do right now is go and delete the sample page. So come down to pages on the left hand side and now what we wanna do is click on all pages. And once you’re on the pages page, again you’ll see a list of all the pages that you create. So you have the Home page that we’re making right now and then also the sample page. So we wanna delete the sample page. So let’s click on trash right here. And once the page is deleted, now what we can do is go to our Home page and we can paste in the custom CSS that allows us to choose the colors that we want for our Parallax WordPress website. So hover over your Home page right here, and what we can do is just click on the view link right here. And once you’re on your Parallax WordPress Home page, what I want you to do is come to the top and click on this link right here that says, “Customize.” And now you should see this customize Themify options section. And you can see that we have two tabs: the basic and the advance. And just in the basic tab, there’s a bunch of different sections on your WordPress website that you can customize. So if I go to body right here, you can see there’s four different subsections and you can customize the body background, the body font and the body link and then also the body link hover. And this goes on with all of these other sections. And this gets a little messy if you go through all of these and you don’t actually know what you’re customizing. So you can spend a lot of time actually going through this stuff and trying to figure them out. And this is just the basic tab. If we go to the advanced tab, you’ll see even more options here to customize your WordPress website and we can go through all of these and select the settings and the options that we want one by one, but that’s gonna take up a lot of time and it’s gonna be really confusing. And my job as an instructor is to make your life as easy as possible to make your Parallax WordPress website. So what we did instead was we selected the restaurant skin that imports a lot of the settings that you would have to select here for you, so you don’t have to go through these one by one. And then what I did was I created some custom CSS that we’re gonna paste in right here that’s gonna format the rest of our website to look however we want and then it’s gonna allow you to change the colors to your WordPress website to whatever you want also. So we’re not gonna go through these tabs in detail, but if you’re a WordPress developer and you wanna make websites using the Themify Ultra theme, then I do suggest that you go through this stuff eventually and learn how to use all these different tabs to customize your websites. And I’ll probably make a video tutorial on it, but for now all we have to do is just come down here to custom CSS and click and expand this box because this is where we’re gonna paste in our CSS. And we’re gonna go through some of these tabs a little bit later but not in a lot of detail. So we will come back to this section. But first just come down here and expand the custom CSS box. And then what I want you to do is go to the NYC Tech Club text tutorial on how to make a Parallax WordPress website and come down to step number 15. And this is where we’re gonna get the custom CSS that we want. So there’s two links that you can click on: on one to the text version and another to the PDF. And it doesn’t matter which one you click on. So I’ll just click on the text version, and it’s gonna open up this tab right here with all of the CSS that we want. So what I want you to do is click right at the top and scroll all the way down so that you highlight all this text. And we’re gonna copy it so I’ll click control C. And then what we wanna do once we copy this is go back to our Parallax WordPress website, and all we have to do is just come down here and paste in our custom CSS so you should see all right here. And I don’t want you to be overwhelmed by this. The custom CSS is really not that bad. It just looks like a lot of text. And there’s a bunch of little comments hear that I’ll go through in the next section, but really all this stuff does is it just changes some of the colors for our WordPress website, which is what we wanna do. We wanna modify the main colors of our WordPress website. There is a section down here called custom CSS for formatting purposes and this is a comment. The slash star or asterisk slash is a comment so that’s not actual custom CSS. And below this are some rules that I have. And they’re really just a format: the footer and the header. So again, don’t be overwhelmed by all this text. It’s really not that bad. It’s just a format, a lot of the website colors. But once you paste in the custom CSS, one thing you should notice right away is the button right right down here for the back to top moves from down here to up here. And again, that’s because we have some formatting CSS here. And there’s gonna be a few other changes that you can’t see right now because we haven’t made our Parallax WordPress website yet. But as we go through making our website, the custom CSS rules will format the website to look like the demo. And again, the custom CSS really just saves you a lot of time so you don’t have to go through all of these tabs and select everything one by one. If you wanted to go through these on your own and select stuff individually, then what I recommend that you do is delete the custom CSS since it might override some of your selections here. Now, we are gonna go through some of these tabs a little bit later just to show you some things that you can format on your own and we won’t have to delete any custom CSS, because we don’t have any rules that are gonna affect what we’re gonna change up here if we do so. So just keep that in mind if you do select stuff here on your own that you might wanna delete the custom CSS since it might override some of your selections here. But since we’re building out something that looks like the demo Parallax WordPress website, I recommend that you just paste in that custom CSS right here. And once you do, now what we can do is go and select the main color that we want for our Parallax WordPress website. And before we do that, let me go to the demo website. And what I wanna do is just show you what the main color looks like because we’re gonna customize a few different colors, and I don’t wanna confuse you. So for my Parallax WordPress website, the main color is this yellow gold color. And if I hover over any of these other links, they also turn to the yellow gold color. And on my fancy header, you can see that the sub-headline is yellow gold and then by default, my buttons have a yellow gold border. And then if I hover over them, they turn to the main color that I selected. And even if I scroll through this website, you can see that we have the yellow gold in the fancy header right here and then a yellow gold button right here. And if I come down to the blog post section, you’ll notice that the text is even yellow gold. So the date is yellow gold and then if I hover over any of these links, they also turn to yellow gold. And if we go down to the bottom, even in the footer you’ll notice that the buttons have the normal color and then if you hover over them, they’ll turn to your main color. So again, it’s yellow gold because that’s what I selected for my Parallax WordPress website. And let me show you on a blog post page that you’re also gonna see the main color over here. You can see we have our date for this blog post and the background color is the main color that we choose. And then on our side bar, if we have any links over here they’re gonna show up as that main color also.And if we scroll down, you can see that we have our blog post title and if we hover over it, the link is gonna turn to that main color that we choose also. And even if we come down here to this blog post which is gonna be the next blog post that you can click to read, when you hover over it it’s gonna turn to that main color. So hopefully this gives you an idea of what the main color is. So what we wanna do now is go and find the main color that you want so that we can get the custom color code and then include that into our custom CSS. So the first thing that we wanna do is go back to our WordPress website and all we have to do is just edit the color codes in our custom CSS. And I’m gonna walk you through this so that we don’t mess anything up. So the first thing that I wanna do is just expand this box so that we can see all of our code. So I’m gonna click on this little icon on the upper right and you can see that the box expands. And what we can do is edit whatever we need to edit and then we can click X right here to close this and then we can save all of our changes. So really quickly, you can see that we have a bunch of different blocks of code and in each block, I have some comments that will tell you exactly what each block of code does S.o if you wanna know what each of these blocks do, you can read the comments right here. They’re always gonna be within the slash star to the slash star. So again, there’s another comment right here. And what we’re gonna do is just change the color codes at the bottom of each block in the first six blocks right now. So what we wanna do is find the color code that we want. So let’s go to the NYC Tech Club text tutorial on how to make a Parallax WordPress website, and again we’re on step number 15. And before we actually click on this link to go to a website to get our color codes, I do wanna note that I do have a text tutorial on exactly what we’re doing right now. So if I go too fast or if you get confused, you can just click on this link and it’ll bring you to this page right here. And we have the same exact steps that we’re gonna go through right now that you can follow, okay? So that’s just a little extra help for you if you wanna go to this page. But back on the text tutorial, what we wanna do now is go to this page called HTML color codes, and that’s where we gonna get our color code. So click on this link. And now you should be redirected to this website right here called htmlcolorcodes.com. And there’s a bunch of different websites that you can go to to get your color code but we’re gonna use this one for this video tutorial. So come to htmlcolorcodes.com and once you do, just scroll down to the first section right here. And you should see a color pad right here and also some information at the top and on the side right here. And I’m gonna show you two different ways to find your main color. The first is to play around with this color pad. So all you have to do is drag this little button around, and you’ll notice that the color changes right here and then the color code changes right here. So what you wanna do is drag this around until you find a color that you like for your main color so that we can take the color code right here which is the 6-digit code and copy that and then put it into our custom CSS. And if you don’t like any of the colors in this color pad, you can drag this rectangle to change the color pad to a different color and then just play around with it again. So this is the first way that you can go about finding the main color that you want. The other way is a little easier. All you have to do is come down to the next section called color picker and down here you’ll see a bunch of different preset colors and you can just hover over them. you click on one of these, what you’ll notice is that the color changes right here and then the color code also changes right here. So let me show you again. If I click on one of these yellow ones, you’ll see that it changes right here and the color code changes. So if you see a color that you like down here, then you can just click on one of these and we can take that color code and then paste it into our custom CSS. If you don’t like any of these colors here, what I want you to do is just scroll back up to the color pad and then play around with this to find the color code that you want. So what I want you to do right now is pause this video and either play around with the color pad right here or go down to the color picker area and then find the color that you like so that we can get the color code and then we can paste it into our CSS. And we’ll do that once you’re ready. So push pause right now and find the main color that you want and then push play once you’re ready and I’ll show you the next steps. Alright, and welcome back if you paused this video to find your main color. And what I did was I changed the main color to the one that I have for my Parallax WordPress website. So right up here, you should see a 6-digit color code. What we wanna do is highlight that code and yours is probably gonna be different if you have a different color and just copy that. And now what we’re gonna do is go back to our Parallax WordPress website and again, we should be in the custom CSS right here. And what we’re gonna do is paste this into six different sections. So I’m gonna walk you through this so you don’t mess up. So come to the first section that’s called general background color and right at the bottom, you should see the 6-digit color code that I have for my Parallax WordPress website right here. And all you have to do is highlight that and delete those six digits and then paste in your color code. So make sure that you have the hashtag and the semi colon right at the end. Otherwise, it won’t work. And once you paste in your color code right there, just come down to the second block of code and it should be the general border color. And right at the bottom, we’re gonna paste in our color code right here. And once you do that, come down to the next section which is titled “Header Menu Link Box Shadow.” And right at the bottom, you should again see the color code right here. So paste it in and make sure that you have the hashtag and the semicolon. And once you do that, we can come down to the next section called, “General Text Color” and all the way down here where it says color, just put in your custom color code right here. So again leave the hashtag and the semicolon And I’m saying that multiple times just to make sure that you have that because if you don’t, then the custom CSS won’t work. Once you do that, we can come down to the hover link section, and again at the bottom where it says, “Color,” just put in your color code right here. And then again, one more time right where it says post and contact form hover button color, put in the color code right here. And once you do that, what you should notice is there’s two other sections with a color code and they’re a little different. So these are gonna be for certain buttons on your blog post page and your contact form. So let me show you what I’m talking about really quickly and then you can decide whether or not you wanna have different colors for these buttons. So I’m gonna go to my blog post page and what you’ll notice on this single blog post is if we scroll down, we have this comment form down here with a button to post our comment. And the button has a background color. And if we hover over it, the background color changes to the main color. So if you look again, we have a darker yellow and if we hover over it, it changes to the yellow gold color. And the same thing happens on the contact us page. We have this contact form right here and we have this button right here that has a darker yellow and once you hover over it, it changes to the yellow gold color. So if you want this effect on your contact us page and your blog post pages, what you have to do is go to the HTML color codes page and find a background color that you want for your buttons in the color pad right here or the color picker below. And then you’re gonna take the color code right here and highlight it and copy it. And then go back to your Parallax WordPress website and you’re gonna paste it into these two sections right here. So the contact form button background color, you’re gonna put in that background color that you want right here and then also right here where it says, “More button customization,” you’re gonna paste in that color code right here. Now, if you don’t want that effect and you want your buttons to be the same color as your main color, then all you have to do is just take the color code that you have for the main color and paste them in right here and right here. And once you do that, we are done setting the color code using our custom CSS. So if you need to, go ahead and rewatch this section and put in your color codes that you want or if you need additional help, you can always go to that text tutorial that walks you through all you need to do to put in the color codes in your custom CSS, okay? So we are done with this section now. So what I wanna do is just close out of this. So I’m gonna click the X right here. And now what I want you to do is save all of your changes. So click on this save and publish button right at the top, and once everything is saved, let’s just go through how to change the body font color and then our page and post title colors since we’re talking about colors right now. So really quickly, let me go to the demo Parallax website to this blog post right here and you can see we have our title right here and then our body font right here and right here. And everything by default is a gray color. If you wanna change the color for your titles or for your body font, this is what you have to do. You have to go back to your customized tab in your Parallax WordPress website. And right at the top in the advanced tab is this body tab right here. So if you click and expand this, and then click on body font and come down to this section right here where it says, “Color” and and if you click in this, you can drag this wheel to find whatever color that you want for your body font. And you can also put in a color code if you have one. So if you wanna leave it the grey color, then just leave this blank. So that’s what I’m gonna do. But that’s how you change the body font color. And then for your post titles, what you wanna do is come down to the post tab and click on that and then click on post title. And at the bottom over here is the color section and you would do the same thing. So again, I’m gonna leave this as the default so I’ll delete this and I’m just gonna close this just to clean everything up. And then for the page title, just come down to the page title section and click on that. And then click on page title and right at the top is the color section. And again, you just click and drag this to find whatever color that you want for your page titles, okay? So that’s how you change the colors for your page title, post titles and body font colors. And if you did make any changes, just make sure that you click on “Save and Publish” right here to save all of your changes and then we are good to go. So I’ll remind you about the colors and how to change them a little bit later as we go through making our content for our Parallax WordPress website, but right now what we wanna do is just move on to the next step. So now what we’re gonna do is talk about how to upload your own custom logo right at the top or if you wanna change the name of your website over here, how to do that, okay? So all you have to do is come back to the Themify options customize tab over here and then click on the “Site Logo and Tagline” tab. And then just click on the site logo and you should see three different options at the top: site title, logo image and none. And we should have the site title selected right now. So whatever is in here should show up on the upper left on your Parallax WordPress website right here. And if you wanna update the site title, just change whatever you have in here and that’s gonna update on your Parallax WordPress website. And if you wanna show your logo instead, all you have to do is select the logo image option and then you can put in the URL for the site logo if you have that. Otherwise, what you need to do is upload the logo image. So click on the “+” button right here and then you’ll get this pop-up and then you can click on “Select Files” and then find your logo image and select that. And then just click on this blue button that’s titled “Insert image.” And that’s gonna upload your logo. And if you need to change the size of your logo, you can do that right here by putting in different lengths and widths. So you might wanna play around with the size if you need to. And for this Parallax WordPress website demo, we’re just gonna use the site title. And for this Parallax WordPress website demo, we’re just gonna use the site title. So I’ll select site title right here and that’s all I’m gonna do. But if you need to update your site title or you wanna put in your logo, go ahead and do that right now. And once you’re ready, go ahead and click the “Save and Publish” button just to save everything. And now what we’re gonna do is show you how to upload a favicon. So you can see right up here we have a little icon and what that is is a favicon. And there’s one over here too But on our Parallax WordPress website, we don’t have one right now. And sometimes, the favicon also shows up on your web browser next to the URL. And the favicon is very similar to your site logo so I know a lot of people people like to have favicons for their website. So I’m just gonna show you how to upload one. So what we have to do after you save your changes to your site title is go back to the basic options. So let’s click on this arrow right here and then just click on “Site Identity.” And this is where we’re gonna upload our favicon. So it’s also called a site icon. And if you have your own favicon, you can upload it here or you can use the one from the demo content. So just click on “Select Image” and if you wanna upload your own favicon, make sure that you’re on the upload files tab and then click on the “Select Files” button and find your favicon and select it. And then click on the blue button right here. If you wanna use the one from the demo content, click on the “Media Library” tab and you should see all of your your images that you uploaded a little while ago right here and just find the favicon. So it’s this one right here and once we have the check mark, that’s the one that’s selected and you can see that the name is favicon.png over here. So once it’s selected, all we have to do is click on this blue button right here. And we don’t need to crop it but you can if you want. So I’m just gonna click on “Skip Cropping” and now you should see the favicon up here. And if you wanna remove it, you can or change it right here. But all I’m gonna do right now is just save this. So I’ll click on “Save and Publish” and I recommend that you do the same. And once we do, we can click out of this. And the last thing that I wanna note is that down here you should see some buttons to different devices. And what they do are show you what the website looks like on the right hand side based on the device that you select. So we’ve been using the desktop view. So this is what the website looks like on a desktop. If we click on this last one, , we go to the mobile look. So this is what your website looks like on a mobile device. So this is just a helpful tool to see what your website looks like on different devices. You don’t really need to play around with this but I thought you should know about it, okay? So now we are done with our customizations and what we’re gonna do now is move on and create our slider image. So on the demo Parallax WordPress website, this is what we’re gonna make. We’re gonna have a background image with our fancy header and then a button to bring us to another part of our website. So now the fun really begins because now we’re gonna make our Parallax WordPress website. So what I wanna do is go back to the Parallax WordPress website, and we can just close out of this. So if you need to, go ahead and push the save button one more time just to save all of your changes and then click the “X” right here. And once you exit the customization area, you should see your home page right here and before we start making our slider, what I wanna do is make sure that you see your main color. So on the upper right, you should have a header menu and it should have the home page link that is in the same color as your main color. And then if you hover over your social media buttons, they should all turn to your main color. So if you see your main color, then we’re good to go but if you don’t see your main color what you need to do is click on this “Customization link” to go back to the customization area. And then go to the custom CSS and then add in the color code that you want for your main color, and then click “Save and Publish,” alright? So for everyone else that sees their main color, what we’re gonna do now is create our slider. So before we do that, I wanna have some fun with you because we’ve been doing a lot of work here and I wanna take a little break. So what I want you to do is leave me a comment in the YouTube comment section telling me why you’re making a Parallax WordPress website or what your website’s gonna be about. Or if you don’t wanna share any of that information, you can write something like “I love NYC Tech Club,” alright? And you can also give the video a thumbs up and I’ll respond to as many comments as I can. And now what we’re gonna do is start making our slider for our Parallax WordPress website. So to do that, we wanna turn on the Themify Builder. So we wanna come up to this link right here that says, “Turn on builder” and click on that. And once the Themify Builder is turned on, this is what it should look like. You should have some icons at the top and your home page should look like this. And the Themify Builder is a drag and drop builder. And before we start using it, I wanna give you a quick tour of the Themify Builder. So up here on the upper left, you should see this plus sign and if you hover over it, you should see some widgets. And what we’re gonna do is drag these widgets into our home page to make our Parallax WordPress website. And if you wanna see what your website looks like on a different device, you can click on these buttons right here. And then on the left hand side, we have the save button and if you wanna turn off the builder just click on the “X” right here. And in here, this is a row. And what we’re gonna do is create a bunch of different rows for our Parallax WordPress website. And on each row, you should have a toolbar. And on the left hand side, if you hover over this icon, you can select how many columns you want on your row. And then on the right hand side, if you wanna go to the row settings, just click on the pencil icon right here. And then you have this enter row right here and you can also go to the row settings by clicking on this little style icon right here. And if you wanna create some additional rows, just click on this “+” sign right here, okay? So that’s a quick tour of the Themify Builder and if it seems overwhelming, don’t worry whatsoever because we’re gonna go through using this Themify Builder over and over again to create and make your Parallax WordPress website. So the first thing that we’re gonna do is create our slider in this row. So what I wanna do first is go to the row options. So let’s click on this pencil on the upper right and now you should see this pop-up right here, and what we’re gonna do is go through these different tabs right here to select the settings that we want for this row right here. And you can select whatever settings that you want but if you wanna make your website look like the demo Parallax WordPress website, then just follow along. So the first thing that we’re gonna do is go to the row width and we wanna make sure that the default option is selected. And then come down to the row height and I wanna select the full height option. So click on that and then then we’re gonna come down to the row anchor. And what we wanna do is put in a name right here. So since we’re making a Parallax WordPress website, what we wanna do is have the navigation menu at the top linked to different sections on our homepage. So let me show you what I’m talking about. If I go to the demo website, we have our navigation menu at the top and if I click on the “About” link, you can see that it goes down to the about section. And that’s because we anchored this row to the about link up here. So what we wanna do since we’re making a Parallax WordPress website is anchor all of our different rows to different links up here. So if I click on the “Portfolio” link, it’s gonna scroll down to the portfolio section. And then same with the blog section. So right now, what we wanna do is anchor the first row to the home link. So when we click on the “Home” button, it goes back up to the top, alright? So what we wanna do is go back to our WordPress website and we wanna come down to the row anchor section and we wanna put in a descriptive name for this section. So I’m gonna type in home and you can do the same if you want. And we’re gonna anchor the rows to the navigation menu when we create the header menu. So right now, all we have to do is just put in the names right here. And once you do that, we’re done with the row options tab and now what we can do is click on the “Styling Tab.” And now what we wanna do is add our background image for this row. So right up here on the background type, there’s a few different options that you can select from. And the one that I want for my Parallax WordPress website is this image option. So once you’re ready, come down to the background image section and what we wanna do here is upload our image or select the background image that we wanna use. So to do that, we wanna click on the “Browse Library” link. Don’t click on the “Upload Link” because I think this one gives you an error, but you can do the exact same thing clicking on the “Browse Library” link. So click on this and you should get this pop-up. And if you wanna upload your own image, make sure that you’re on the upload files tab. And then click on “Select Files” and then find the image that you want and then click the blue button right here. . If you wanna use the demo content, go to the media library tab and you should see all of your images here, and you need to find the one called the sliderimage.jpeg. And so you can see I selected it here. And in the demo content, you might have this image or something very similar. I might put in some place holder And in the demo content, you might have this image or something very similar. I might put in some place holder since these images are copy written. So all you have to do is find the image that has this name right here, Slider-image.jpeg and once you find that image, go ahead and click the “Insert File” button right here. And now you should see the image get inserted into your row right here. And now what we’re gonna do is add the Parallax effect. So go to background mode and in this dropdown, select Parallax scrolling and what that’s gonna do is make this row have the Parallax scrolling effect. So if you want your other rows to have the Parallax scrolling effect, you always have to go into your row settings and then go to background mode and then select the Parallax scrolling option, okay? So scroll down to row overlay, and you don’t have to do this if you don’t want to, but go ahead and see what I do. So I have my background image here and it’s pretty red. And what I wanna do is just make this a little darker So I’m gonna add an overlay. So I’m gonna click on this color pad right here and then I’m gonna drag this wheel to the lower left corner so that I have the black color code right here. And then you can see that I have a number right here and it’s number one right now. So the overlay color is gonna be completely solid. And if I change this to zero, it’s transparent. So this is just the normal image. So this goes from zero to one with zero being transparent and then one being the solid color that you choose right here. So what I wanna do is choose something in between. So I’m gonna type in .55 and you can see that this is something in between transparent and solid. . So it gives me a nice tint. So that’s what I wanna do for my image and again, you don’t have to put in an overlay but I think it looks pretty good for this demo image that I have right here. So if you wanna do that, go ahead and do that. Otherwise, come down to the font section and all I wanna do here is change the font color for this entire row to white. So again, I’m gonna click in this color pad and I wanna drag this wheel to the upper left corner so that I have the color code fff fff, and this time around, I wanna leave the number one here so that my font is a solid white color. And then I’m just gonna come down to text align and then click “Center” so all of my text is gonna be centered. And then we can go to the next tab, because we’re done with the styling options for this row. So let’s click on “Visibility.” And we’re not gonna do anything on this tab but I do wanna mention it. So if you wanna hide this row on any one of your devices, all you have to do is click the “Hide” button and then you can replace this row by creating another row right below it. And then going into this tab and then “Show” for that device and then hiding them for the other devices. So this is just a cool little feature of the Themify Builder that I want to mention to you but again our website is going to be responsive so we don’t need to do anything here, okay? So now, let’s go to the animation tab. And again, we’re not gonna do anything here but I wanted to mention this because you can go into this area right here and then select the animation that you want for when this row loads. We’re not gonna choose anything here for this row but we are gonna animate some other stuff like the fancy header on this row. So this is just another option here for you to select some stuff. And again, you can always go through these row settings on your own and select and modify whatever you want, okay? So right now, all we’re gonna do is click “Save” right here. And you might also wanna click on the “Save” button here just to save your changes that you made on your Parallax WordPress website, but I’m gonna do that later. So right now, all we wanna do is drag in a fancy header right here so we can put in some text. So you can click on the “+” button right here and you’ll see your widgets on the left hand side or you can hover over the plus button right here and then you’ll see this section also. And the widget that we want is this one right here called the fancy heading. So hover over that and then just click the “+” button. And now you should see this pop-up right here and what we wanna do is put in our heading and subheading. So if I go to the demo Parallax WordPress website, right here is the fancy header. And The Parallax demo text is the heading and then the the welcome text is the subheading. So what I want you to do is go back to your WordPress website and right here in the heading I want you to put in whatever text that you want and then do the same with the subheading. So for my heading, I’ll type in “Parallax demo” and then for subheading, I’ll just type in “Welcome.” And then we’re gonna leave everything else the same. And once you’re ready, let’s click on the “Styling” tab. And make sure that you’re on the general tab right here and all we wanna do is come down to the padding section and we wanna add some padding. So what padding is is space between the content and then the imaginary box that surrounds it. So what I wanna do is add some padding. So come over here and uncheck this box to apply all padding and what that’s gonna do is expand this section right here. And all we’re gonna do is add some top padding. So right up here, I wanna go into this box and I wanna select the percent sign and then over here, I wanna type in 5.1. And I came up with this padding percent just by playing around with this, and what this is gonna do is just format the content a little bit. So if you want, you can play around with this. Otherwise, what we wanna do is just come down to where it says, “Margin” and I wanna add in some margin also. So what margin is is spacing between the box and then the outside of the box. So the padding is the inside and then the margin is the outside. So come into the margin section and uncheck this box right here. And this time around, I wanna add some margin to the bottom. So I’m gonna go in here and just select the percent sign again. And then right here, I’m gonna type in -3 So again, this is just gonna format the content a little bit, alright? And now let’s go back up to the top. And there’s also these other tabs here for heading and subheading. You can go into these if you want and change the font colors or the font type for your heading and subheading. It’s really up to you but again we already selected the white font color for this whole row. And that’s what I wanna leave for my Parallax WordPress website so I’m gonna leave this stuff blank, alright? And once you’re ready, let’s click on the “Animation” tab. And now what I wanna do is add an animation for the fancy header when it loads. So I’m gonna come to appearance animation and in this dropdown right here, you can select any animation option that you want. The one that I want is fade in down, so I’ll select that. And you can also see a preview of it once you select it. So go ahead and choose whatever type of animation that you want for your fancy header if you want one. And once you’re done, we are done with the fancy header so we can click the “Save” button right here. And now you should see your fancy header right here, and if you ever wanna edit this, just hover over it and then click the pencil right here. And if you wanna save your changes, go ahead and click the “Save” button right here. And once you do that, what we’re gonna do now is add the text that says, “Made in NYC” right below the fancy header. So if you wanna add some texts like this, what you wanna do is go back to your Parallax WordPress website and then hover over the plus button over here and find the t text widget. So once you find this one right here, click on the “+” button. And now, you should see this pop-up right here. And all you have to do is come down here and delete this text, and then type in whatever you want. And if you wanna format this text, you can click on any of these buttons over here. And then this last one, if you hover over it it should say toolbar toggle. And if you click on that, you’ll see some additional buttons here. But we don’t need to format this font and it’s already centered because we selected the text to be centered in the row options, so we don’t need to go to the “Styling” tab. All I want you to do once you’re ready is click on the “Animation” tab. And what we’re gonna do is select an animation for this text so when it loads, it has an animation. So I’m gonna go into this dropdown right here and again, I’m gonna select the “Fade in down” option. So select whichever animation option that you want and once you’re ready, go ahead and click “Save.” And now you should see your text right below the fancy header. So if you wanna click the “Save” button, you can. Otherwise, what we’re gonna do is just move on. And now, we’re gonna create the button right below all of this. So if you hover over it, it’s gonna turn to your main color and we can link this button to another webpage or to another section on our Parallax WordPress website. So let’s go back to the Parallax WordPress website and hover over the plus button right here. And we wanna find the button widget. So scroll up and then find the button widget and then click on the “+” button. And now you should see this pop-up right here and we’re gonna go through these settings together. So for the size, I like to use the normal size button and then for the button style, I wanna select the “Squared” option. And then for the text right here, that’s gonna be inside our button. I’m gonna type in explore. So go ahead and type in whatever you want. And then once you come down to the link, you can type in a URL to link your button to another page if you want. Or what we can do is link our button to another section on our Parallax home page. So that’s what I wanna do since we’re making a Parallax WordPress website. So I’m gonna delete this URL and to link the button to another sectionon our home page, what you have to do is always type in the pound sign or the hashtag. And then you wanna type in the row anchor name. So we haven’t created the about section yet, but what we’re gonna do later is anchor that section with the about name. So I’ll type in “About” right here and that’s gonna link the button to the about section now. So you can type in whatever section that you wanna link your button to or whatever URL you want and you can always come back to this section later. And once you’re ready, come down to the color section. And what you always wanna do when you’re creating a button following this video tutorial is you wanna click on the yellow color. Because for some reason by default, the Themify Theme makes the buttons a certain way when you select the yellow option. And that’s just gonna customize our buttons to look a little bit better. So just always remember to select the “Yellow” option here, and I’ll remind you as we go through this tutorial, okay? And once you’re ready, we can just move on to the next tab. So let’s click on “Styling.” And make sure that you’re on the general tab right here and then come down to the font section and come down to text align. And let’s click on this “Center” option just to make sure that our button gets centered. And once you do that, we can just scroll back up to the top and let’s click on the button link tab right here. And what I wanna do is add some custom color codes to the background section and then to the link section. So you don’t have to do this but let me show you what your button looks like by default. So if I go to another tab and load my Parallax demo site, this is what the home page looks like right now. And this is what the button looks like without adjusting the colors. We have the main background color and then when you hover over it, it turns white and the text turns to the main background color. So if you like that, then you can just keep the button as is or what you can do is change your button to look like the demo Parallax WordPress website where we have a transparent background and then when you hover over it, it turns to the main background color and the front inside is always white. So if you want something like this, what you wanna do is go back to your Parallax WordPress website. And all we have to do is come down here and we wanna put in a transparent background color. So click on the color pad right here and drag the wheel to the upper left so that the color code is fff fff and then just change the 1 to 0 right here. And then what you wanna do is put in your main color code in the background hover section. So if you remember it, go ahead and type it in. So mine is DFA 300 and then I wanna put in one right here. So if you need to get your main color code, you wanna go back to the customize tab to your custom CSS and then get the main color code and then you can put it in right here. And once you’re ready, come down to the link section and we wanna change the text to a white color. So for the color section, we can just go to the color pad and then drag the wheel to the upper left and make sure that the color code is fff fff. And we wanna keep the number one right here and then we’re gonna do the same with the color hover. So drag the wheel to the upper left and then you should have the same in both of these sections. And once you do that, we are actually done with this section right here. So now what we can do is go to the animation tab. And again, all you wanna do is come into this dropdown and select the animation that you wanna use. So I’m gonna select the “Fade in down” option again. And once you’re ready, we can click “Save” right here. And you should see your button now and it should have the transparent background color, and when you hover over it, it should turn to your main color. So let me just show you really quickly. Let’s click the “Save” button right here to save all of our changes and then I’ll go to my new tab and refresh my website and it should have all the animations. And now we should have the fancy header, the text and our button right here, and if we hover over it it should have the main background color. So if your website looks like this, then we are good to go. And now what we can do is move on to the next section which is going to be creating the about section. So if I come down here, you can see again we’re gonna have a fancy header and then some text right here and then another button that’s going to link to an about page, alright? So let’s go back to our Parallax WordPress website and let’s scroll down to the next section. So that’s gonna be this row right here. And the first thing that we wanna do is format this row. So let’s click on the pencil on the upper right. And now you should see this pop-up right here and all we have to do is come down to the row anchor and we wanna anchor this row. So this row is gonna be for the about section. So in the row anchor, I’m just gonna type in about and once you do that, let’s go to the “Styling” tab and all we wanna do here is go down to the padding section and add some padding. So over here, uncheck this box so that you see all of your options and we’re just gonna add some top padding and some bottom padding. So in the top section, go into this dropdown and select the “%” sign and then type in four percent. And then do the same with the bottom. So select the “%” sign and type in four percent right here and then just click “Save.” And now what we wanna do is add a fancy header into the about section. So click on the “+” button right here and find the fancy header widget. So it’s this one right here. And instead of clicking the “+” button, what I want you to do is click and drag it into this section right here. Because if you click the “+” button then the widget might go into this row right here which is the incorrect spot. So we wanna click and drag over here. So you can see this blue box. So that’s where we’re gonna drag it to and then just let go of your mouse button. And now you’ll get this pop-up right here. And what we wanna do is put in our heading and subheading. So for my heading, I’ll type in “Our Story” and then for the subheading, I’ll type in “Discover.” And then for the HTML tag, I wanna put in “H2” and we don’t need to do anything with the “Styling” tab but I wanna put in some animation. So click on “Animation” and then just go into this drop down and select the “Animation” option that you want. The one that I want is the “Slide in right” option, so I’ll select that one. And once you’re ready, let’s click the “Save” button. And now you should see your fancy header right here but we have our headline on the left hand side instead of the center right here. So what we need to do is hover over this section and you should see the grey buttons on the upper left, and I want you to click on the one that’s called “Styling.” And you’ll get this pop-up right here for the column styling and all you have to do is go down to the font section and go to text align and then select the “Center” option and then click “Save” right here. And what that’s gonna do is center the headline. So now our fancy header looks perfect. . And what we wanna do now is add some text below this. So let me go to the demo Parallax WordPress website and you can see that we have some gibberish right here. So what you wanna do is put in your story about your business or yourself right here. So I’m just gonna paste in this gibberish to save some time, but let me show you how to do this. Let’s go back to our Parallax WordPress website and all we have to do is drag a text widget underneath our fancy header. So let’s go to the plus sign and hover over that and then find the text widget. And again, we wanna click and drag this in and we wanna make sure that we put it below the fancy header. So drop it in right here and you’ll get this pop-up and all you wanna do is delete this text and then type in your story. So I just pasted in my gibberish just to save some time. And so if you need to, you can pause the video to type in your about section, and if you wanna format this, remember there’s a bunch of different buttons here. And if you don’t see this second row of buttons, what you wanna do is click on this button right here that’s called, “Toolbar Toggle” and it’s gonna unhide that section. So if you wanna change the font color, you can highlight some of it and then go over here and then select a different color. If you wanna link the font to another page, just highlight that font or that text and then go to this button right here and click on that. And then you can type in a URL and then click the “Apply” button or you can actually add images if you want to. Just put your mouse wherever you want and then click the “Add Media” button. And then you’ll see this pop-up with all of your images or you can upload a new file. And then down here, you can align the text to wrap around your text if you wanted to or you can just put it in the center and all that stuff. So some stuff that you can play around with if you want, but we’re not gonna do this right now. So I’m just gonna close out of this. And we have our font right here and what I wanna do is just make my first paragraph a little fancier. So one of the headings is actually a custom heading. So I’m gonna highlight the first paragraph right here and then go into this dropdown and select “Heading 5. And what that’s gonna do is make this font over here fancy. So if you want something like that, just choose the heading five for that text and then you’re good to go. So if you need to pause the video, type in your story and then once you’re ready push play because right now what we’re gonna do is go to the styling tab. So hover over “Styling” and click on this. And just make sure that you’re on the general tab and then scroll down to the padding section and again uncheck this. And this time around, what we’re gonna do is add some padding to the right and the left. And that’s gonna squeeze our content to make it a little bit more in the middle. So right here where it says, “Right,” I’m gonna go to percent and then I’m gonna type it nine percent. And then same with the left side. I’m gonna go to the percent sign and then type in nine percent right here. And that’s all we have to do. So once you’re ready, let’s go to the animation tab and this time around what I wanna select is the “Fade in left” option. So select whichever animation that you want and then we’re done styling our text. So we can just click the “Save” button right here. And the last thing that we’re gonna do in this section is add a button to the bottom to link to the about page that we’re gonna create a little bit later. So if you wanna have a button in this section, all you have to do is hover over the plus button up here and then find the button widget and click and drag that into the bottom and drop it in. And we’ll get this pop-up and I’ll go through these style settings again with you. So for the size, we’re gonna go with the normal option and then the button style, I like to go with the squared option and then for the text inside the button, I’m gonna type in about us. And then for the link, what I wanna do is put in the URL for the page that I’m gonna create a little bit later. So you can follow along if you wanna create an about page or you can always update this later if you want. So I’m gonna delete this link and then put in this link right here. So it’s http://www. my website name parallaxdemosite.com/about. And what this is gonna link to is the about page I’m going to create a little bit later. So if you wanna create an about page, just substitute this section right here with your own website name. And once you do that, remember what we always wanna do as we’re creating buttons using the restaurant skin is come down to the colored section and then select the “Yellow” option right here. And that’s just gonna format our button to look a little different, okay? So once you do that, let’s go to the styling tab. And all we have to do here is make sure that we’re on the general tab and what I like to do is come down to the font section. And I like to come down to the text align area and then select the “Center”option just to make sure that the button is centered over here. And once you do that, we can go back up to the top and we wanna click on the “Button Link” tab. And what I wanna do is just customize the colors of my button and you can do this if you want or you can leave the button as the default color right here. So what I wanna do is change the background color. So over here, I’m gonna type in the main color code which is DFA 300 and then put one right here so that the color shows up. And then when you hover over it, I wanna change this to white or transparent. So I can type in the color code or I can go into this color box right here and then drag this wheel up here and then I’ll get the color code fff fff. And I can leave this as one since my background is white or I can change this to zero and it’s gonna make it transparent. And I’m gonna leave this other stuff as the default, so I’m not gonna play around with the link colors but you can if you want. And you can also come down to the bottom to the border section and change the border color if you want but I’m just gonna leave it as the default. So once you’re ready, let’s go to the animation tab. And once you’re on the animation tab, you can add an animation if you want. So I’ll go into this dropdown. And the one that I want is “Fade in up s”o I’ll select this one right here and that’s all I wanna do. So once you’re ready let’s click “Save”. And once that’s saved, what I suggest that you do is click the “Save” button up here just so that we save all of our changes in the builder. And what we can do now is go to our website. So I’ll go to another tab and just refresh my parallaxdemosite.com and you can see we have our homepage right here.So I’ll click on this button to go down to the about section and now we should have all of this right here with our button right here. So if this looks like your website and you’re happy with it then we can move on to the next step which is now gonna be creating the services section. So you can see down here that we’re gonna have two different backgrounds for these two columns. And then we’ll have some text right here and right here and then two buttons that we can link to different parts of our website. So if you wanna add this to your website, let’s go back to our Parallax WordPress website. . And all we have to do is go down to a new row right down at the bottom and let’s edit this row. So let’s click on the pencil right here. And once we get this pop-up, what I want you to do is go to the row width and I want you to select the full width content. And what that’s gonna do is allow us to have a row that starts from here all the way to over here. And since we’re gonna have the background images for our column go right across the screen. That’s what we want. So once you do that, let’s come down to the row anchor and let’s put in a name. So this is gonna be my services section. So I’ll just type in services right here. And once you do that, we don’t need to do anything in the “Styling” tab this time. So all I’m gonna do is go to the animation tab and select an animation. So in here, I’m gonna select the “Slide in up” option. So I’ll select this one right here. And once I do that, I can click the “Save” button. And now what we’re gonna do is add a background image to this column right here. So hover over this module and then click on the “Styling” button right here and you’ll get this pop-up for the column styling, and we’re just gonna add our background image right here. So make sure that you select the image option and then right down here click on browse library. And if you wanna upload your own background image, click on upload files and then click select files and then find the image that you want. If you wanna use the demo content make sure that you’re on the media library tab and then just find the background image. So it’s gonna be this one right here. So it’s called service background – 1. And again, some of these images might not look exactly the same since these ones are copy written but the titles or names of them will be the same. So once you select the background image, go ahead and click the blue button right here. And now you should see the background image right here and if you want this section to have the Parallax scrolling, what you wanna do is come to the background mode section and go into this dropdown and just select the Parallax scrolling option, okay? So I’m gonna leave this blank and all I wanna do is just go down to the padding section. And I wanna add five percent right here. So let’s go into this dropdown and select percent and just put in five percent. And we’re gonna apply this to all of the padding. So if you uncheck this, you should see five percent for the top, right, bottom and left, okay? So once you do that, we can just click save right here. And now what I wanna do is close the gap between these two columns. So we’re gonna hover over the upper left icon right here and then go to gutter spacing. And in this dropdown, we’re just gonna select none. And what that’s gonna do is close the gap between these two columns, okay? So now what we can do is finish off this column. So the first thing that we’re gonna do is drop in a text module or text widget right here. So let’s hover over the plus button over here and then find the text widget and just click and drag it in. And once you see this pop-up, what you wanna do is put in your text. So I’ll delete this and paste in the gibberish from the demo site. And you can’t really see the font or the text right here because of the background image, but we’ll put in a background color behind the text so that you can see that in just a few seconds. But first what I wanna do is just format this text a little bit. So I’m gonna highlight everything and push this align center button. And if you wanna play around with these other buttons, you can to style your font or your text. And if you don’t see this second line, what you to do is push this button right here that says, “Toolbar toggle” and then you’ll see this line of buttons over here okay? So what I wanna do now is just change the font size for these first two lines. So I’ll highlight this line and then go into this dropdown and select heading two. And you can see that the text gets a little larger. And then for the second line, I’ll highlight this and then go into this dropdown and select heading five. And then you can see that the font looks a little fancier. So once you’re ready and you have your content here, what we wanna do is go to the “Styling” tab. And I’m gonna change the background color for this area because right now it’s transparent and you can’t really see the text. So I’m gonna come to background color and you can do the same. You can go in here and then drag this wheel or change your color however you want. Or if you know a color code, you can just type it in right here. So that’s what I’m gonna do. I type in 2b 2b 2b and I wanna leave this as the number one so that we get the solid color. And then what I wanna do is come down to the font section and I wanna make my font white. So I can do that right here. I can just drag this up to the upper left corner and now you can see that my font shows up on this background color. And again, you can click the center button if you wanna align everything center but I think you probably already did that on the text tab. So now what I wanna do is just add some padding. So I’m gonna go down to the padding section and I’m gonna uncheck this. . And I wanna add 10 percent to the top so I’ll change this two percent. And then for the right, I wanna put in seven percent and then for the left, I wanna put in seven percent as well. And once you do that, we’re done styling this text area. And since we animated the entire column or the entire row, we don’t have to do that here. But if you want, you can on your own. Otherwise, all I want you to do is click “Save.” And now you should see the text box right here and it should be formatted so it looks a little better. So if you like how that looks, what we wanna do now is just add a button right below. And once we do that, we are good to go with this first column. So let’s add that button. Let’s go to the plus button up here and then find the button widget and click and drag it in. And once you get this pop-up, we’re gonna create a button together one more time and then I’ll speed it up for the rest of this video. So the first thing that we wanna do is make sure that the size of the button is the normal option and then the button style we’re gonna go with is the squared option and then put in whatever text you want. So I’ll type in learn more and then for the link right here, you can put in a URL or an anchor name. So if you wanna link this to another section on the homepage, remember you’re gonna put in the hashtag and then the anchor name right here. So if you don’t have a link right now, what I suggest that you do is just put in the hashtag or the pound sign. And what that’s gonna do is give your button an active link but when you click on it, it’s not gonna go anywhere. So what I’m gonna do right now is just put in a hashtag and then I can always come in here and update the link later, okay? So after you do that, let’s go down here to color and again we always wanna select the yellow option just for formatting purposes as we use the restaurant skin. So you can see that it changes the format right here, alright? So once you do that, let’s go to the “Styling” tab. And what you wanna do is make sure that you’re on the general tab. And we’re gonna add some background color so that our button over here doesn’t have this transparent background, but instead we’re gonna have the same background color as our text box over here. So go over here to where it says, “Background color” and you can click on this color pad and select a background color if you want or what you should do is type in the same color code as the background on your text box over here. So I’ll type in 2b 2b 2b and you can see now that the background for my button has the same color as the text box. And make sure that you have a one over here for the color to show up. And once you do that, come down to the font section. And to center your button, what you wanna do is click the center option right here in the text align section. And once we do that, we’re gonna add some margin to the button so that we have some space below. But we’re gonna do that in the other tab, the button link tab over here. So let’s click on this and what I wanna do is just change the background color and the link color for my button. Since my button right now has the main color by default and the background for this section is a little different, so I wanna customize the color and the look of my button a little bit. So I’m gonna come to the background section right here, and you can do this if you want. What I wanna do is change the background color to match this section right here. So if you wanted to, you can go into the color pad and select the color or you can type in a color code right here. So I’ll type in 2b 2b 2b and then put in one right here. So now the background of my button is the same as this entire section. And then I’m gonna come down to background hover. And I wanna change the color or the background of the button when someone hovers over it. So I’m gonna go into this color pad right here and just drag this to the upper left corner so that I have the white color code which is fff fff. And then you can put in one right here. And once you do that, we can come down to the link section. And if you wanna change the text to a different color for this button, you can do that right here. And I like the white color but I’m just gonna drag this up to the upper left corner just in case to make sure that the color’s always gonna be white. So again, the color code is fff fff. And then when someone hovers over this, the background’s gonna turn white. So I don’t want the text to also be white or you can’t see anything. So in the color hover, I’m gonna type in the color code 2b 2b 2b and then just put in one right here, okay? So again, you can play around with the background and the link colors. The labels are right here for what each of these sections do. And once you find the colors that you want for your let’s go down to the margin section. So what we wanna do in the margin section is uncheck this box to expand the section and I just wanna add some bottom margin so that we have some space below. So what we’re gonna do is go in here and select the percent option and then type in 50. And what that’s gonna do is just give us some space below over here so that it matches the top. And again, you can always play around with your margin and your padding on your own. And once I do that, the last thing that I wanna do is come down to the border section and I wanna add a white border for this button. So I’m gonna go down here and just drag this to the upper left. And then what I wanna do is put in the thickness of the border. So I’ll just type in 1 P-X right here. And once we do that, you can see that our button is all fixed up right here. So once you’re ready, let’s click the “Save” button. And now you should see the the left-hand column right over here and you should see a button that’s customized just how you like it. And now we’re done with the left-hand column and the only thing that you might have to do is write yourself a reminder to come back to the button and update that link to go to another page or another section on your Parallax WordPress website if you didn’t put in a URL or an anchor name for your button already. So just remember to do that. And now what we’re gonna do is create the right hand column. And we’re gonna do the same exact steps that we did on the left hand side. So I’m gonna go a little bit fast and if you need to, you can pause the video or you can rewatch this section that we just did for the left hand side which goes a little bit slower, okay? So the first thing that we’re gonna do is put in a background image. So let’s click on the little style icon right here. And once you get this pop-up, let’s go and add a background image so let’s click on browse library and and find the image that’s titled service background-2. And again, it might not look exactly like this since this is a copy written image. So once you find this, go ahead and click “Insert File.” And now you should see the background image right here. And if you wanna go and select the Parallax scrolling, you can. . I’m gonna leave it blank and all I wanna do is just come down to the padding section and I wanna put in five percent. So make sure that you change this to percent right here, and you wanna leave this checked to apply to all padding and once we do that, we can just click “Save.” And now what we wanna do is add our text box right here, so let’s hover over the plus button on the upper left and then find the text widget and click and drag that in. And once you get this pop-up, what we wanna do is come down here and put in our text. So I’ll just paste in my gibberish from my demo Parallax WordPress website and I wanna format this. So I’m gonna highlight everything and then click the align center button. And what I wanna do is just change the font sizes for these first two lines. So I’ll highlight this line and go to this dropdown and select heading two and then for the second line, I’ll highlight this and go in here and select heading five. And again, there’s a bunch of different buttons that you can push to customize your text and there’s also this button right here. So you can play around with this stuff if you want. And right now, we’re on the visual tab. If you wanna use HTML, you can click on the text tab right here and then you can put in some HTML if you know it, okay? So everything that you see right now is on the visual tab. So once you put in your text right here and you’re ready to go, let’s go to the “Styling” tab. And what I wanna do is make sure that I’m on the general tab right here and we’re gonna add a background color for our text box. So you can go into this color pad and select any color that you want or you can put in a color code. So that’s what I’m gonna do. So I’m gonna type in ecf 2f4 and you can see the color right here. So if you want the same, go ahead and type that in. And then come down to the font section and what I wanna do is change the font color. So the font color by default is this gray color but what I wanna do is make sure that it’s the same color as this background color here. So I’m gonna put it in the color code 2b 2b 2b and just type in one right there. So now, the font color is the same over here as it is right here. And then for the text align, I’ll just click “Center” just to make sure everything’s centered but I already centered this stuff in the text tab over here. And once I do that, I can come down to the padding section and I wanna add some padding. So I’ll uncheck this box and what we’re gonna do is add some padding to the top, left and right. So over here, just change this to percent and then do the same for the right and the left. And for top, I’ll put in 10 percent, for the right I’ll put in seven percent and then for the left, I’ll also put in seven percent. And now you can see that the text box gets formatted with some more spacing, okay? And if you want, you can add an animation but we’re not gonna do that. So we are done styling and customizing our text box. So now we can just click “Save.” And the last thing that we wanna do is add another button down here. So let’s go back to the plus button on the upper left and find the button widget and just click and drag it in. And we’ll go through creating a button really quickly, so the size is gonna be normal, the button style will be squared. And then you can put in whatever text that you want so I’ll type in learn more. And again, you can type in a URL to link the button to a different page or you can put in an anchor name. All you have to do is type the hashtag or the pound sign and then the anchor name right here so you can link it to the about section or the blog post page or the gallery or wherever you want. And if you don’t have a link right now, just put in the hashtag or the pound sign and then you can come back here and update this later. So I’ll just put in the hashtag right now and I’ll come down to the color and select the yellow option just to format this. And once we do that, we can move on to the “Styling” tab. And what I wanna do is just change the background color for the button section, so over here I’ll type in the color code ecf 2f4 and then type in one right here. And then I’ll come down to the front section and I just wanna align this to the center. So click on center right here and that’s gonna move the button to the center. And now what we can do is go to the button link tab and I wanna change the background color for the button. So when you’re not hovering over it, I wanna change it to the same color as this background. So I’ll put it in the color code ecf 2f4 and then type in in one right there. And for the background hover color, I wanna change this to the same color as the font. So I’ll type in 2b 2b 2b and type in one. And then for the link color, right now it’s white so I wanna change that to 2b 2b 2b to make it darker and type in one right there. And then when you hover over it, it’s gonna turn to this color. So I want the font color to turn to that lighter color. So again, I’ll type in ecf 2f4 and then type in one right there and then I’ll come down to the margin section and uncheck this. And we’re gonna add some margin to the bottom just to close this gap and add some some spacing down here. So I’ll go in here and change this to percent and type in 50. And again, you can always play around with this stuff to figure out how much margin or padding that you want. And once you’re ready, let’s go down to the border section and we’ll just change the border to this black color or this darker gray color. So in here, I’ll type in 2b 2b 2b and then I wanna put in a one. And then the thickness of the border is gonna be one PX. So once I do that, I don’t need to change any animation or anything like that so we can just click the save button. And now you should see these two columns right here and what I want you to do is click the save button right here just to save all of your changes. And then we can go to a new tab and refresh our Parallax WordPress website. And then we can go down and you should see the about section. And then right below that should be the services section that we just created. So if you hover over the buttons, they should change color. And remember that you can always update these buttons to link to different parts of your website whenever you want, alright? So if you’re happy with this, then let’s move on to the next step. So now what we’re gonna do is create this section right here. So it’s gonna be very similar to what we just did. We’re gonna have some text, another button right here and then an image right here. So if you wanna create something like this for your Parallax WordPress website, then let’s go back to our WordPress website. And all we have to do is go down to the bottom to a new row and what I wanna do first is select the number of columns that I want. So I’m gonna hover over the left hand icon over here and the one that I want this time is this one right here. So I’ll select that and now you can see that we have a small module over here and then a large one over here for my image. So you can select whichever column options that you want. And once you’re ready, go ahead and click on the pencil right here. And now what we’re gonna do is leave everything as is. So if you wanna create a row anchor here, you can but I’m not gonna do that for this section. So I’m just gonna go to the styling tab, and I just wanna put in a background color. So I’m gonna have the same background color as up here so I’ll put in the color code right here which is ecf 2f4 and then I’ll type in one right there, and then I’m gonna scroll down to the padding section down here and just add some padding to the top and bottom, so I’ll uncheck this box. And then for the top, I’ll change this two percent and I’ll do the same for the bottom. And I’m just gonna type in eight percent here for the top and then seven percent for the bottom. And that’s all I’m gonna do so I added some spacing. And I wanna go to the animation tab and you can add an animation for this entire row or you can do it separately for each module if you want. So I’m gonna do it for the entire row so I’m just gonna go in here and I’ll select “Slide in up.” So I’ll come to the bottom and select this one right here. And once you’re ready, let’s go ahead and click the save button. And the first thing that I wanna do is put in a text box over here. So let’s hover over the plus button up here and then find the text widget and drag that in. And once you get this pop-up, we can just go down here and delete the sample text and then type in whatever we want. So I’ll paste in some gibberish from my demo Parallax WordPress website. And all I wanna do is just change the font for this first line. So I highlight this and go into this dropdown and select heading three. And you can see that this is what the text looks like and you can go in here and customize the font however you want with all of these buttons or you can go to the styling tab and you can come down here to the font section and then change the font color here also if you don’t like the default color. So go ahead and play around with this stuff. I’m not gonna change anything in the styling tab. So all I wanna do is add an animation for the text box so it slides in from the left. So I’ll click on the animation tab right here and then go into this dropdown and select the slide in left option. So it’s this one right here and you can see it slides in from the left. And now I’m done so I’m gonna click save. And now what I wanna do is add a button right below So let’s go to the plus sign right here and then click and drag the button widget in. And once we get this pop-up we’ll just go through this so we want the normal option, squared button style and then type in whatever text you want. And if I go a little too fast, you can always pause the video. So I’m not gonna put in a link link right now, so I’ll just put in the hashtag. And then I wanna click the yellow option right here just to customize the button since we’re using the restaurant style skin. And then we can go to the styling tab And what I did to save some time was just put in the options that I want to make the button look like this. So let me show you what I did. I went to the button link tab and you can see right here that I have these color codes. So if you need to, you can pause the video so that you can see these color codes and put them in yourself or what you can do is just follow along. So what I did was I put in ecf 2f4 for the background color and then the background hover is 54 54 54 and the reason why I use this color code is because the text by default is also the same color code. So I wanted to have the button look the same as this text color. And then for the link color, it’s the same 54 54 54 and then for the color hover, it’s the color code for white which is fff fff and make sure that you put in one for all of these. And then what I did was I just came down to the bottom to the border section and I made the border for this button the color code 54 54 54 and then I put in a one right here. And then the thickness for the border is gonna be one PX. And once I did that, I went to the animation tab and I put in the slide in left effect. And that’s all I did. So if you wanna do the same, go ahead and rewatch this section or maybe you just follow along, and once you’re ready we can just click save. And the last thing that we wanna do in this section is add an image right here. So let’s go and do that. Let’s go to the plus button up here and then find the image widget and then just click and drag that in. And once you get this pop-up, all we have to do is insert our image. So let’s click on browse library, and if you wanna upload your own file, go to the upload files tab and then click on select files and then find the image that you want. If you wanna use the demo content go to the media library tab and find this image right here which is titled section-image.png and once you select that, click the insert file button. And now you should see your image right here and you can always delete the image right here. And we don’t need to change anything here but you can always change the size if you wanted to. And this image has a transparent background so it matches the row background. If you need to change the background for the row, then you can do that the styling options for the row, okay? So the last thing that I wanna do is just add an animation for this image So let’s go to the animation tab and all I’m gonna do here is go in here and select the “Slide in right” option. So I’ll come down here and select the one that I want. And then I can click the save button right here. And you can see what we’ve made right here, so let’s click the save button right here. And if you want to, you can go to a new tab and go to your Parallax WordPress website just to check out what you’ve made so far, but what we’re gonna do is move on to the next step. So I’m gonna go to the demo Parallax WordPress website. And now what we’re gonna do is create the portfolio or gallery section. So we’re gonna have a fancy header at the top and then we’ll have some images here. And if you click on this, you’ll get this lightbox and you can go through the images that are on this page right here. And then at the bottom, we’ll have a button to go to another page if you have a bigger portfolio or gallery that you want your visitors to see, okay? So if you wanna make this section on your Parallax WordPress website, let’s go back to our website and what we wanna do is come down to a new row and let’s do some row settings So let’s go and click on the pencil and once this pop-up comes up, all we wanna do is come down here and put in a row anchor name. So I’ll put in portfolio and once you’re ready let’s go to the styling tab. And all I wanna do here is change the background color. So I’m gonna put it in a color code right here. So the color code is gonna be fbf 9f4 and I’ll put in a one right here. And you can see it’s a vanilla color. . So again you can select whatever background that you want and once you’re ready, let’s go down to the padding section. And what I wanna do is put in some top and bottom padding. So uncheck this box and then go to the top section and select the percent sign. And then put in four percent and then do the same with the bottom. So select the percent sign and then type in four percent. And that’s all I’m gonna do for the styling. So then I’ll go to the animation tab and I wanna select “Slide in up.” So you can see right here I already have it selected so I am good to go. So let me click the “Save” button. And now what I wanna do is just drag in a fancy header widget. So I’ll go to the plus button right here and click and drag this in. And this should be pretty familiar to you now. So for the heading, I’ll type in gallery and then for the subheading, I’ll type in snapshots. And then I just wanna change this to H2 for the formatting. And then if we go to the “Styling” tab, you can actually go to the heading and subheading tabs and you can change the font color and the font size and all that stuff here. So that’s just an option for you. I’m not gonna do anything in the “Styling” tab and I don’t need to select so I’m just gonna click “Save.” And now what I wanna do is add some images right below this, and this part gets a little tricky. So just try to follow along. The first thing that we’re gonna do is go to the plus sign and then find the image widget and click and drag that in. And now what we wanna do do is add some images right below this, and this part gets a little tricky. So just keep following along. The first thing that we’re gonna do is go to the plus sign and find the image widget and click and drag that in. And once you see this pop-up, we wanna go to the image style section and the one that I wanna select is image overlay. So click on that and then come down to image URL and what we’re gonna do is click the X right here to remove that image and then click on browse library. And if you wanna upload your own image, you click on upload files and then click on select files and then find the image that you wanna upload. If you wanna use the demo content, make sure that you’re on the media library tab and just find the image that were gonna use. So the one that I want right now is this one right here. So it’s called image-1.jpg. So once you select that go ahead and click on the “Insert File” button. And now you should see the image right here and you should also see it right here. And we’re gonna change the number of columns that we have for this row so that we can add three different images and it will resize it as we do that in just a little bit. But first let’s go through the rest of this stuff. So right over here, you can change the image appearance if you wanna check any of these boxes or you can change the size of this image. So that’s what we’re gonna do. I’m gonna type in 3-60 right here and then 2-50 for the height. And then what I wanna do is just come down to this next section and I wanna put in a title for this image. So I’ll type in Brooklyn Bridge and then what I wanna do is put in an image link so that when we click on this, it actually pops up on the home page So to do that, what we wanna do is go back up here and take this image URL and copy that and then paste that in right here. And once you do that and you click out of it, you’ll see that you get this section right here that says, “Open link in.” And what we wanna do is click on the lightbox. And so now what’s gonna happen is when someone clicks on the image, it’ll pop up like the demo website and then we can go through all of our images on the homepage. So we’re not gonna do anything else on this tab but if you want to, you can go through this stuff and play around with it. All I wanna do is go to the “Styling” tab and I wanna add some padding. But first, what I wanna do is come down to the font section and I wanna click “Center” so that the image title is gonna be centered on this image. So once you do that, let’s go down to the padding section and uncheck this box. And I just wanna put in some bottom padding. So I’m gonna type in 38 and I’m gonna leave this as PX. And what that’s gonna do is just give some spacing below this image for the next image that’s gonna be below it, okay? So we’re not gonna do anything with the animation tab, but you can always add an animation if you want. So once you’re ready, let’s click the “Save” button And now you should see this image right here and what we wanna do is have three different columns with images. So once you insert the first image here, you should have this toolbar and there should be a bunch of different buttons. And what we wanna do is go to this button on the left and if you hover over it, you can select the number of columns and the size of the columns that you want. So for this Parallax WordPress website, we wanna have three different columns so select this one right here. And then you’ll see that the image gets resized right here and then we can add another image right here and also right here. And once we do that, we can come down here and add some more images also. So you can add as many as you want. So what I wanna do is just add two more images with you together and then you can add as many more that you want on your own afterwards, okay? So let’s go back to the plus button right here and click and drag the image widget into this second column right here. And once you get this pop-up, come to image style and select image overlay. And then come to image URL and then click the X right here to remove the demo image. And then click on browse library and find the image that you want. So I’m gonna select this one titled image-2.jpg and then click the “Insert File” button. And now I can see my image right here. And then I’ll just come down to the width and type in 3-60 and then for the height, I’ll put in 2-50 and then I wanna put in an image title. So right here, I’ll type in French Lily’s. And again for the image link, I wanna come up here and copy this and then paste that in right here. And then just click out of the box so that I see this section right here and then click on the lightbox option. And then I wanna go to the “Styling” tab and then go down to the font section and click “Center” . And then come down to the padding section and just click to expand this and then type in 38 PX. And that is it. So let me click the “Save” button right here. And now you should see your image right here. So I’m gonna do it one more time but you probably don’t have to see this but we’re just gonna do it just to be safe. So let’s go back to the plus button and find the image widget and click and drag drag that in. And once you see this pop-up, I’m gonna go a little slower this time just to make sure that you get everything. And then what you can do is pause the video and create another row for the gallery section right over here. So go to image style and select the image overlay option. And then come down to image URL and click the X right here just to delete the demo image. And then what we can do is click on browse library and you can upload your own images by clicking on this link right here or you can go to the demo content by being on the media library tab and you can find this image right here which is image-3.jpg. And then just select that and then click the insert button. So now you see the image right here And all we’re gonna do is come down to the width and type in 3-60 and then come down to the height and then come down to the height and type in 250. And then what I wanna do is come down to image title and I wanna put a title like this over here. So I’ll type in something like Washington DC. And in order to get this image to pop-up when a visitor clicks on it, what you have to do is put in a link right here. So all you have to do is come back up here and get this image URL. So highlight this and copy it and then come down here and paste it in. And then click out of this box so you’ll see this little pop up over here so it says, “Open Link ln.” And what you wanna do is click on the lightbox option and that’s gonna make the image pop-up when someone clicks on it, okay? So that’s all we have to do here. And now we can go to the “Styling” tab and you wanna come to the font section and you wanna center this title. So click on center right here and then come down to the padding section and uncheck this box. And right over here where it says, “Bottom,” we’re just gonna put in 38 PX. So keep this as PX. And if you wanted to, you can add an animation. Otherwise, all you have to do is click “Save.” And now what I want you to do is click the “Save” button right here just to save all of your changes. And now what you can do is pause the video if you wanna create another row with images just like this and you’re gonna follow this same exact steps. And once you’re ready, go ahead and push play and what we’ll do is put in the button at the bottom and then move on to the next step, okay? So I will see you in a few minutes. Alright and welcome back. So if you paused this video to create a second row of images, it should look just like this. And now what we’re gonna do is add a button right down here to link to the portfolio or gallery page that we’re gonna create a little bit later. So you should be very familiar with these steps. We’re gonna hover over the plus button right here and then find the button widget and then just click and drag that in right over here. And once you get this pop- up, we’ll just go through these really quickly so we want the normal size, the squared option and the text is gonna save you more. And if you wanna put in the link later, you can for the button or you can just follow along and put in the link to the gallery page that we’re gonna create a little bit later. So delete this and then type in http://www.your website name so And what that’s gonna link to is the gallery page that we’ll create a little bit later, okay? So once you do that, come down to the color section and then select the yellow option since we’re using the restaurant skin and that’s gonna format our button to look a little different. And then go to the “Styling” tab and on the general tab right here, come down to be font section and then just click on the center option. And once you do that, come back up to the top and then click on the button link. And I wanna put in the background color. So right here by default it should be the main color but I’ll just type in the main color code right here. So DFA 300 and type in one. And then for the hover, I’m gonna make it white. So I’ll just go in here and click and drag this wheel over here. And that should change the color code to 6 Fs so fff fff and then it’ll put in a one right there. And then for the link color, the same thing fff fff and then just put in one. And then for the color hover, it’s gonna change to this color right here so I’ll just copy it and paste that in which is DFA 300 and put in one right there. And then I just wanna come down to the bottom to the border section and put in the main color code which is DFA 300 and then put in one there and a one right here. And once I do that, I’m good to go. I’m not gonna add an animation but you can if you want. Otherwise, just click the “Save” button right here and then click the “Save” button right here. And once that’s saved, we are done with this section. And I’ll just go to another tab right now just to show you what the Parallax WordPress website looks like right now. So I’ve already refreshed this home page and you can see we have all of our different sections. And right below this, we have the services section that we didn’t check out earlier and then right below this, we have the gallery section that we just made. And if we click on these images, you should see the pop-up right here and we can click on these arrows and then we’ll go through all of these images right here, alright? So if this is what you see then we are good to go and now what we can do is move on to the next section. So on the demo Parallax WordPress website, the section that we’re gonna make next is the blog post section. So we’ll have the fancy header and then some blog post right here and another button to go to the blog post page. So if you wanna do this, the first thing that we’re gonna do is actually create some blog post. So let’s go back to our WordPress website and this time around, what I wanna do is close the builder so that we can go and create some blog post. So again, make sure that you click the “Save” button right here and then click the X right here to close out of the builder. So now you shouldn’t see the builder and the plus sign, everything like that. And you can either go to a new blog post by hovering over new and clicking on post or going to your WordPress dashboard. So hover over your website name and then click on dashboard. And once you’re back on the WordPress dashboard, all we have to do to create a blog post is come down to post and then click on add new. And once you’re on the add new post page, the first thing that you wanna do to create a blog post is put in the blog title right here. So I’ll type in “Nothing Short of Spectacular” and then you can just come down here and type in your content. And what I’m gonna do to save some time is go to the demo Parallax WordPress website and just come down here and copy all of this text. And we’re just gonna paste this in because that’s gonna save a lot of time. So copy that and paste that in right here. So now I have all of my text and I can format this text by clicking on any of these buttons. And so if you hover over them, you can see what these buttons do so I’ll let you play around with these on your own. And if you wanna upload an image here just put your mouse wherever you want the image and then click on add media. And what you’ll get is your media library or that tab right here to upload files and then you can find the image that you want. So we’re not gonna upload any images but I did wanna show you that you can actually do that by clicking on that button, okay? So I’ll close out of this. And the only thing that I wanna do is come down to the bottom over here and set the featured image. So the featured image is this image right at the top. So if you want a featured image to show up on your blog post and also on your home page, what you wanna do is come down here and click on set featured image and we’re gonna get our media library and you also have that tab to upload your own images, but since we’re using the demo content we’ll stay on this tab. And I just wanna find the image that I want. So I want this one which is gonna be Blogpost-6. So once I select that, I’ll click on set featured image and now you should see the image right here. So it’s gonna appear on your blog post page and also on your home page, okay? And there’s a few other things, let me talk about. So you can categorize your blog post if you want to sort them or filter them but we’re not gonna do that here. But if you do wanna add a category, just click on add new category and then type in the category name right here and then click on add new category. And if you ever wanna delete the category name, go to categories right here and then you can delete it there. At the bottom over here is the Themify custom panel. So if you wanna change the look of the page for this blog post, you can do that over here by selecting any of these options. Otherwise, it’s just gonna default to the default Themify settings that we selected a little earlier in the video when we hovered over here and clicked on Themify settings, alright? So those are just some helpful hints for you. But we’re gonna leave everything as is so all we have to do is click the publish button right here. And once your post is published, we can click on view post right here just to check it out. And you can see we have our featured image at the top with the date, with the background color which is our main color and then we have a sidebar over here. And I’ll show you how to customize this in just a few minutes. And then we have our blog post title and then we have all of our content right here. And at the top over here, you can see that we have the admin name and that’s because that’s the author of this blog post. If you wanna change this to your name or someone else’s name, I’ll show you how to do that in just a few seconds. But first, let’s scroll through the rest of this. So down here as you make more blog post, you’ll see the links to the links to those blog posts also down here. But since we don’t have any, it’s blank right now but I can show you on the demo Parallax WordPress website. Down here you can see for the next blog post, we have a link over here and then related post because these are all the same category. If you change the category names, then the related posts are gonna be related to those categories. If I confused you right here, go ahead and leave a comment and I’ll try to explain it in more detail I reply to you, okay? So let’s go back to the Parallax WordPress website. And down here is the comment section and we have our button that if you hover over it, it changes to a different color. Awesome! So what I wanna do first is show you how to change the admin name to another name. And then what I wanna do is show you how to change the color of the page title and also the body font. We went over this stuff a little earlier but now that we’re creating pages and blog posts, I wanna show you again how to change the colors for the page title and also for the body font just in case you don’t like the default look. And then what we’ll do is customize our side bar so that we don’t have this stuff but we have something that looks really nice like the demo Parallax WordPress website over here where we have our tweets, hours, address and then a Facebook Likebox, okay? So the first thing that we’re gonna do is talk about how to change the admin name. So let’s go back to the WordPress dashboard. Let’s hover over our website name and click on dashboard. And once you’re back on the WordPress dashboard, the way to create a new username is to come down on the left hand side to users and then click on add new. And once you’re on the add new user page, just fill out this information right here and then come down to this dropdown and then select the role that you want this user have. Just be very careful because if you select administrator, then this user has the same rights that you have. So they can delete things, they can modify your website and they can change your settings. So if you’re just creating a username for an author or someone else to write blog post, then you might wanna select one of these two, okay? So I’ll let you do this and then all you have to do is click the “Add new user” button and that’s gonna create a new user. And once you do that, we can go back to our blog posts. So hover over post right here and then click on all post. And what you wanna do is find the blog post that you wanna change the author name for. So come to this one and then we can just click on edit. And once you’re on the blog post page, all you have to do is click on screen options on the upper right to expand this section and then check this box that says, “Author,” and what that’s gonna do is make this section at the bottom appear. So you can see right here it says, “Author.” And if you have additional users, then in this dropdown you’ll see those usernames and then you can select whichever username that you want for the author. And once you do that, go back up to the top and then just click the update button. So you can actually select the author name before you publish your blog post but we had to do this in a reverse order because I didn’t show you how to create a username beforehand, okay? So that section will always show up at the bottom of your blog post now that you have this box checked, alright? So now what we’re gonna do is talk about how to edit the page title and body font colors. So to do that, what we’re gonna do is go to our customize tab. So let’s hover on appearance over here on the left hand side and then click on customize. And once the customize page loads, we’re just gonna talk about some tabs here. So make sure that you’re on the Themify options and you’re on the advanced tab. So to change the body font color, come down to body and click and expand that and then go to body font and click and expand that. And then you have the color option over here. So you can click on this and then choose whatever color that you want for your body font. And you can do the same for the links that you have on your page and also for the links when you hover over them. So you can play around with these two tabs also. So let me close this. And what I wanna do now is show you how to change the blog post title. So right here, go to post and click on that and then come down to post title. And if you scroll down you should see the color section here. So this is where you’re gonna go to change the post title color. And there’s a bunch of other tabs here that you can also play around with with different link colors and everything like that. And I’m gonna talk about the page title color just because we’re on this tab right now So to change your page title color, all you have to do is go to page title, click and expand this and then go to page title and then you should see the color option right here, alright? So so the other thing they were going to talk about a little bit later is how to customize the colors for your footer but we’ll do that when we create our footer section. Just remember if you do make any changes to click the “Save” button over here, alright? So I’m not gonna change any of my colors but that’s how you do it so pause a video if you wanna change any colors. Otherwise, what we’re gonna do is close out of this. So click the X. And now, what we’re gonna do is modify the sidebar for our blog post pages and any other page that has a sidebar. So what you wanna do is come back to your WordPress dashboard if you’re not on this page right now and then just come down on the left hand side to appearance and hover over that and click on widgets. And once you’re on the widgets page, just come to where it says, “Sidebar” and what you’re gonna do is drag some of these widgets into this section right here. And whatever you have right here is gonna show up on your side bar for your different pages and post that have this side bar showing. So what I’ve already done was I deleted the default widgets and if you wanna do just click and expand the widget and then come down here and click the delete link. And once you do that, I can walk you through the widgets that I put in for my demo Parallax WordPress website, okay? So the first widget that I put in is the easy Facebook Likebox. So just click and drag that in and drop it in there and then just expand the section. And all you wanna do is put in the URL for your fan page right here. And this only works for a company page or fan page. It doesn’t work for your personal Facebook page. So just remember that if you’re using the EZ Facebook Likebox. And then come down here and I check the box for responsive and show faces and you can click on any of these other ones if you want. And then just come down here and make sure that you click “Save.” And once you do that, we can close out of this. And then the other two widgets that I put in right here are text widgets. So if I come down to the bottom, you can see there’s a text widget right here. You can click and drag it up or you can click on this and you’ll get this little pop up and you just wanna make sure that you select the “Sidebar” option and then click add widget. And what that’s gonna do is drop the widget in to the side bar section over here. And then you can click and expand this and you can edit this right here. So I put in the addresses title and then I put in the address for my made-up business right here. And the last line is some HTML to link NYC Tech Club to this URL right here which is my home page. So if you wanna have a link in your side bar, make sure that you add HTML just like this and then you can replace the URL inside the quotes and then also the text right here. And the last thing that I did in the text widget was I came down here and I checked this box that says, “Automatically add paragraphs.” So each time I push enter, it’s gonna create a new line for me. So make sure you do this if you wanna have new lines each time you push enter. And then make sure that you click “Save” right here and then just close out of this. And then this is the other text widget. It’s just for my hours and again, I checked this box down here. And the last widget that I added was the Themify Twitter widget. So you can see down here that Themify has a few different widgets that you can choose from and the one that I used was this one right here and just added it over here. And if I click and expand this, all you have to do is put in your Twitter handle right here and then you can check whatever boxes that you want right here and then make sure that you click the “Save” button. And the last thing that you have to do to make your Twitter feed show up is click on this link right here and you’ll be redirected to the Themify settings page in the Twitter setting section. And what you have to do is put in a consumer key and a consumer secret. So to do this, you have to go to your Twitter account. So the best way to do this is to click on this link right here called documentation, and all you have to do is follow the directions on the Themify settings page. So let me just show you how to do this really quickly. Click on create application and you’ll be redirected to this page right here and once you’re logged in to Twitter, all you have to do is fill out your name, your description, your website and then come down to the bottom and check this box right here and then click “Create your Twitter application.” And once your application is created, you’ll see these tabs at the top and what you wanna do is click on this tab called “Keys and access tokens” and that’s where you gonna see your consumer key and your consumer secret. And what you wanna do is paste those in right here and then just click the “Save” button, okay? So let me close out of this. And once you create your side bar, it should look just like this. We have our Facebook Likebox, some text boxes right here and then our Twitter feed right below if you put in your consumer key and your consumer secret, okay? So go ahead and customize your side bar however you want and once you’re ready, what I want you to do is pause this video and create some additional blog post. So I’m gonna make six total blog post and then I’m gonna start recording again to show you how to create the blog post section on your home page. So if you wanna make some blog post right now, pause the video and push play once you’re ready and I’ll see you in just a few minutes. Alright, and welcome back. So what I’ve done was I created six different blog post right here and now what we’re gonna do is create the blog post section on our home page. So we’re gonna have the fancy header, some blog post right here and then the button at the bottom to link to the blog page itself. So if you wanna learn how to make this section on your Parallax WordPress website, let me show you how. Let’s go back to our Parallax WordPress website and we wanna go to our homepage and turn on the Themify Builder. So let’s hover over our website name and click on visit site. And once you’re back on your homepage, let’s turn on the builder. And once the Themify Builder is turned on, let’s go down to the bottom so that we can get a new row and that’s gonna be all the way down here. And the first thing that I wanna do is style this row. So let’s click on the pencil right here. And for the row settings, what I wanna do is select the full width row container, and then come down here and just anchor the row. So I’m gonna type in blog and once I do that, I can go to the “Styling” tab. And all I wanna do over here is just go down to the padding section, and I wanna add some top and bottom padding. So uncheck this box right here and let’s change this to percent and then let’s change the bottom to percent right here. And let’s just type in four percent. So once we do that, we don’t have to do anything with visibility or animations. So let’s just click the “Save” button. And the first thing that I wanna do now is add a fancy header. So let’s hover over the plus button over here and then find the fancy heading widget and then just click and drag it in. And once you get this pop-up, all you have to do is type in your heading and your subheading. So I’ve already typed in latest news and featured right here and then I selected the H2 option just for the formatting. And we don’t need to do anything with these other tabs but I do wanna remind you that if you go to the “Styling” tab, you can change the color of the heading and the subheading by going into these tabs right here, okay? So we’re not gonna do anything here. All I wanna do is click the “Save” button. And once that’s saved, all I wanna do is make sure that the fancy header stay centered. So I’m gonna hover over this section and then I’m gonna click on the “Styling”icon right here. And once this pops up, I just wanna go down to the font section and just click “Center” right here for the text align and then click “Save.” And now what I wanna do is drag in a post widget right below this. So let’s hover over the plus button right here and then find the post widget and just click and drag that in. And now you should see this pop-up right here and we’re gonna go to the settings together. So the first thing that I wanna do is go to where it says, “Post layout” and I wanna select the grid three option. And that’s gonna change the layout over here. And if you wanna filter your blog post to show up by different categories, you can do that right here. I’m gonna leave everything as is. So all I wanna do is come down to where it says, “Post filter” and in this dropdown, I wanna select no right here and then for post masonry, I wanna go into this dropdown and select no also. And once we do that, we can come down to the limit section and I wanna show six blog post for this section. So I’ll change this to six and you can put in whatever number that you want. And once you’re ready, come down to display and go in here. And I don’t wanna show any of my content so I’ll click none right here. And then what I wanna do is come to the image width and the image height. And I wanna make the thumbnail a little smaller. So in the width, I’ll put in 240 and then for the height, I’ll put in 1-50. And you can put in whatever you want, and once you’re ready just come down to the “Hide post meta” section, and I wanna select “Yes” right here. And this last one should also be selected yes. And that’s all we have to do here. So once you’re ready, let’s go to the “Styling” tab. And in the “Styling” tab, I just wanted to show you that there are different options here to change the color and the font style for this section right here. So what you can do is go through these tabs on your own if you want. We’re not gonna make any changes here and I’m not gonna add an animation to this section. So once you’re ready let’s just click the “Save” button. And the last thing that we have to do in this section is add a button to the bottom to link to the blog post page. So let’s go back up to the plus button up here and find that button widget and just click and drag that in down here. And since we’ve already created a bunch of different buttons, I’ve already filled everything out just to save some time. The only thing that I wanna note is that I put in the URL for the blog post page that we’re gonna create a little bit later right here. So if you wanna do the same, just put in your own domain name right here instead of parallaxdemosite.com. And don’t forget to select the yellow option to customize your button since we’re using the restaurant skin. And once you’re ready, go to the “Styling” tab and then come down to the font section and make sure that you select the “Center” option. And then go to your button link and then just put it in the color codes that you want. So again, you can see my color codes right here and then I came down to the border section and put in this one. And again, we’re not gonna add any animations here so once you’re ready, go ahead and click the “Save” button. And now we are done creating the blog post section. So let’s save everything that we just made by clicking the save button up here. And once everything is saved, we can move on to the next step. So now what we’re gonna do is learn how to make the contact us section. So we’ll have this background image right here with a fancy header, some text boxes with some information and then a button that’s gonna bring us to the contact form. So if you wanna learn how to make this section on your Parallax WordPress website, let’s go back to our website and we wanna go to a new section. So let’s go down to this new row right here and let’s go to the “Styling” option. So let’s click on the pencil. And for the row options, all we wanna do is put in a row anchor name. So right here I’ll type in contact and then we can just go to the “Styling” tab. And what I wanna do here is add a background image. So I’ll click on browse library and I just wanna find the image that I want, so I’ll select this one which is the contact-background and then click on the “Insert File” button. And then what I wanna do is go to background mode and I wanna give this the Parallax scrolling effect. So I’ll click on Parallax scrolling right here, and then what I wanna do is just make the image a little darker. So I’ll come down to row overlay and I’ll go in here and select the black color. So that’s 000 000 and then I’ll change the transparency right here to 0.6-1 just to give it a grayish color. And then what I’m gonna do is come down to the font section and change the font color for this section to white. So I’ll go in here and then just click on the white color. So it’s gonna be fff fff and again this is just gonna change the text color to white. And then I wanna align everything center so I’ll click “Center” right here. And then what I wanna do is come down to the padding section and just add some padding to the top and bottom. So in here, I’ll change this to percent and same with the bottom. And what I’m gonna do is add eight percent to the top and eight percent to the bottom. And that’s all I have to do. So I’m not gonna change anything here or in the animation tab. So once you’re ready, let’s click “Save.” And now what we wanna do is add a fancy header right at the top. So let’s click on the plus button up here and then find the fancy heading widget and just click and drag that in. And once you get this pop-up, go ahead and put in your heading and subheading and then select “H2” right here. So I’ve already put in contact us and have a question right here. And then, all I did was I went to the animation tab and I selected the slide in down option right here. And that’s all we have to do. So once you’re ready, let’s go ahead and click the “Save” button.ou’re ready, let’s go ahead and click the “Save” button. And what I wanna do now is make sure that this stay centered. So I’ll hover over this section and then click on the “Styling” icon up here. And once this pops up, let’s just go down to the font section and right where it says, “Text align”, let’s click “Center” and then we can click “Save” again. And now what we’re gonna do is add some text boxes right below to put in some information about our business or website. So to do that, let’s hover over the plus button up here and then find the text widget and just click and drag that in down here. And once you get this pop-up, what we’re gonna do is put in our contact information in this first text box and then we’re gonna change the number of columns to three and then we’ll put in two additional text boxes over here. So the first thing that we wanna do is delete the sample text and put in our contact information. So I just pasted mine in right here. And now we can format this text. So for the first line, I’ll highlight this and go into this dropdown and select “Heading 3.” And I can click the bold button if I want, and then I will bold the phone text right here and same with the email text right here. So I’ll just highlight this and click bold. And then what I wanna do is make the email address a link. So I’ll highlight this and then click the insert edit link button right here and you should see it says, “Mail to” colon the email address. And to make this an active link, just click apply right here and you can always edit this if you want. So now what I wanna do is just make sure that the phone and the email address don’t have this big spacing in between. So I’m gonna go back to the same line for the two and then click shift and enter and that’s gonna close up the space in between these two lines. And the last thing that I wanna do is just highlight all of this and click the align center button and we are good to go. So once you’re ready, let’s go to the animation tab. And let’s just add an animation so I’m gonna select the slide in down option. And once you’re ready, click the “Save” button. And now what we wanna do is change the number of columns in the text area to three. So hover over the upper left over here and then select the three column option and that’s gonna change this section to three different columns. And what we can do now is add a text box right here and a text box right here. So let’s do that. Let’s hover over the plus button right here and then click and drag the text box in. And once you get this pop-up, what you wanna do is put in your information right here and format the text. And what I’ve done to save some time is added the second and third text box already and for both of these, I went to the animation tab and selected the slide in down option. So what I want you to do is pause the close up and add your second and third text box and add whatever animation that you want. And once you’re ready, go ahead and push play and then we’ll move on to the next step. Otherwise, what I’m gonna do right now is just show you how to add the button at the bottom right down here that’s gonna link to the contact form. So if you’re ready, let’s just go and do that. Let’s hover over the plus button over here and find the button widget and then just click and drag that to the center. And since we’ve already created so many buttons together, I already filled everything out just to save some time. So there’s just a few things that I want to highlight. The first is the URL. This is gonna go to the contact page that we’re gonna create a little bit later and that’s gonna have the contact form. So if you wanna fill this out, then just make sure that you put in your own web address right here and just make sure that you select the yellow color because we’re using the restaurant skin and that’s gonna format our button a certain way. And if you go to the “Styling” tab, just make sure that you select the “Center” option in the font section and then for the button link, you can see my color codes right here. So for the background color, it has the white color code but it has all zeros right here. And that’s gonna make the button transparent when no one’s hovering over it, okay? And the last thing that I did was I added a border color down here which is gonna be the main color code and then I added the slide in down animation right here. So if you need to, you can pause the video to customize your button and then just click “Save” once you’re ready. And then we are done with the contact us section what I want you to do is click the “Save” button up here. And once everything is saved, we can move on to the next step. So the next thing that we’re gonna do is add the last section on our homepage and that’s gonna be this map. So if you have a physical location, we can add this map and have this little icon right here to show where you’re located. So if you wanna learn how to make this on your Parallax WordPress website, let’s go back to our website. And what we wanna do is come down to the bottom to this new row and we can anchor this row and change some of the settings. So let’s click on the pencil right here. And once we get this pop-up, let’s select the “Full width content” option and then come down here and just anchor this row if you want. So I’ll type in map. And we don’t need to do anything in the “Styling” tab. So all I wanna do is go to the animation tab and select the “Slide In Up” option. So I’ll select this one right here and then click “Save.” And now what we wanna do is add a Maps Pro widget. So hover over the plus button over here and find the Maps Pro widget and click and drag that in. And once you get this pop-up, let me walk you through the options that I selected. So for the width, it’s gonna be a 100 percent, for the height put in 445 PX, the type is gonna be roadmap and then for the style, you wanna go to the top and select “None.” And then for the scrollwheel, we’ll put disabled and then draggable it’s gonna be enabled. And then for the map controls, just select “No.” And then for the zoom, I like to use anywhere between 12 and 16, so select whatever you want. And then what you wanna do is put in your location right here. And once you do that, copy that and then go down to the bottom and you wanna put in the location right here also. And what this is gonna do is enable that icon to show up on your map, okay? And once you do that, we’re not gonna do anything with these tabs up here. So all we have to do is click the “Save” button. And once it’s saved, you’re not gonna see the map right now because we have to get to our Themify settings and put in an API key. So before we do that, what I want you to do is click the “Save” button up here. And once everything is saved, let’s close out of this builder so click on the X. And now what I want you to do is go to your Themify settings. So hover over your website name right here and then click on Themify settings. And once you’re on the Themify settings page, what you wanna do is come down here to Google Map and click on this. And what we have to do is put in a Google map key. So to do this, what we wanna do is click on this link right here that says, “Generate an API key.” And you’ll be redirected to the Google Maps API page. And what you wanna do is click on this link that says, “Get an API key” and then click on this button that says, “Get a key” and you’ll be prompted to log in to your Google account. And once you login, you’ll come back to this page and click on this link again. And once you do, you’ll get this pop-up and what you wanna do is create a new project or select an existing one. So I already have a project that I created so I’ll just select this. And then I’ll click on enable API. And then your API key will show up right here and what you wanna do is copy it. And then go back to your Parallax WordPress website and paste that in right here. So I’m not gonna paste mine in for you since they’re all unique, but once you’re ready make sure that you click the “Save” button right here. And then we can go back to our Parallax WordPress website and check out what it looks like. And once you’re back on your Parallax WordPress website, if we scroll through the home page you should see the map section at the bottom now. So let’s just go down there and check it out. So right below this, we should see our map. And if you see your map and you have your little icon right here, then we are good to go and you have just completed your homepage for your Parallax WordPress website. So congratulations on making your home page. And don’t worry about this gap over here. This is gonna disappear once you log out. It only shows up because we have this link right here. So now what we’re gonna do is set our anchor rows for our header menu on our homepage. So to do that, we wanna go to our menus page. So hover over your website name over here and then click on menus. Alright. So now you should be on the menus page and what we’re gonna do is use all of the row anchor name that we created for the different sections on our homepage to link to the header menu items so when we click on those items they go to the different sections on our homepage. So instead of confusing you by saying that, let me show you exactly what we have to do. Come to where it says, “Menu Name” and type in a name for this menu. So I’ll type in homepage navigation and once you’re ready, click on the button that says, “Create Menu.” And once the menu is created, come down here and click on this box next to main navigation and that’s gonna make the menu show up on the homepage. And what we wanna do is create some custom links and link them to our row anchors so when your visitors click on the links, they go to different parts on your homepage. So let me show you how to do this. Click and expand be custom links tab and we wanna delete the text right here. And to link your items to the different row anchors, what you wanna do is type in the hashtag sign and then the row anchor name right here. So the first one that we’re gonna create is at the top of the page which is the row anchor name home. So type in home right there and then you can type in whatever text you want for your header menu item. So I’ll type in home and click “Add to menu.” And once this is added, , you can type in your second one. S o again hashtag and the row anchor name for the about section is about and then I’ll just type in about right there and click add to menu. And then we’ll create one for our portfolio gallery. So the row anchor name is portfolio. So again, remember the hashtag right here and then click “Add to menu.” And then we’ll make one for our blog post section. So you can just follow along or if you have different row anchor names, make sure that you type them in instead. And the last one that we’re gonna make is for the contact button. So type in hashtag and contact and then type in contact right here. And once you have your header menu items right here, if you wanna make sub menu items, all you have to do is click and drag these and then you can indent them like that. So I’m gonna leave everything as is. If you wanna change the order, you can just drag these around. The only other thing that I wanna do is add a border for the contact button. So if you wanna do that, and let me show you on the demo Parallax WordPress website what I’m talking about. So you can see we have our contact link and it has a border around it with our main color. If you wanna put a border around any of these links, what you have to do is go to your menu page and at the top, click and expand the screen options tab and then check this box next to CSS classes. And then what you can do is come down to your menu items and whichever one that you wanna have the border for, just click and expand that section and you’ll see this box with the CSS classes right here. What you wanna type in is highlight-link. So type in this text exactly like this and then all you have to do is come up here and click “Save” menu. And once the menu is saved, we can go and check out what it looks like now. So let’s hover over our website name and click visit site. And once you’re back on the Parallax WordPress website, now you should see your navigation menu at the top and if we click on these items, they should bring you to different parts of your website. So just click and make sure that they all work and if they do, then we are good to go. And the last thing that I wanna mention for the header area is that you don’t have to have a transparent background if you don’t want. If you wanna change this to a solid background color, what you can do is click on edit page and it’ll bring you back to this page right here. And all you have to do is come down to the bottom to the page appearance section and then scroll down to the header area right here and then come down to header background type and then you can click on image background right here and then select whatever background color that you want. And once you do that, you can click on the update button right here and that’s gonna change the header menu to a solid background color instead of transparent. So you have to do that for all of your pages that you create, okay? And the last thing that I wanna mention is if you don’t like the white color text right here, you can also change the white color to another color. If you click on the customize tab and it’ll bring you to this page right here with the customized options and then all you have to do is come down to the main navigation tab and click and expand that. And then come down to menu link and then you can put in whatever colors that you want over here. And the same with the menu link hover and active link, okay? Just make sure that if you do make any changes that you click the “Save” button right here. So if you have your menu navigation at the top and everything works, then we are good to go. And now what we can do is create the about page. So let me show you what that looks like. So this is the about page on the demo Parallax WordPress website and what we’re gonna do is have a background image with a custom page title and then a small descriptive section right here. And right below that, we’ll have another section over here for our employees. So we can add some social media buttons and a little descriptive section and then right below this, we’re gonna have another section that talk about your business or website and then we’ll round out this page with a little contact us section with a button that’s gonna link to the contact form so your visitors can contact you, okay? So if you wanna learn how to make this page for your Parallax WordPress website, let’s go back to our website and the first thing that we wanna do is create a new page. So let’s hover over new over here and click on page. And once you’re on the add new page, all we have to do is put in a page title right here so let’s type in about. And then we can scroll down to the bottom to be Themify custom panel and if you’re on the page options tab, all we have to do is select “No Side Bar” and then come to the content width and select “Full width.” And then go into this dropdown and say yes to hide the page title and then we’ll come back here a little bit later to select the custom menu when we create a menu for our other pages. So now let’s go to the page appearance tab and we can just scroll down to the header area and let’s select the Header Horizontal” option, unless you wanna choose any of these other ones. And then we can just come down to the header background type and select “Transparent Header,” unless you wanna put in a background color for your header. And that’s all we have to do. So let’s go back up to the top and let’s click on the publish button. And once the page is published, let’s go to it so that we can start building it out. So let’s click on view page. And once you’re on the about page, the first thing that we have to do is turn on the Themify Builder. So let’s click on this link right here. And once the Themify Builder is turned on, a lot of this is gonna be review for you since you’ve already made your homepage, but we’re gonna go through this step by step. So the first thing that we’re gonna do is add our background image to this section. So what I wanna do is click on the pencil right here. And once you get this pop-up, all we have to do is go to row width and select the “Full width content” option and go to the “Styling” tab and put in our background image. So let’s click on browse library, and I’m gonna be on the media library tab and just find this image right here which is pagetitle-background and then click “Insert File.” So now we have our background image right here. And I wanna make this a Parallax scrolling effect. So I’ll go into background mode right here and select “Parallax Scrolling.” And then what I wanna do is add an overlay just to make the image a little darker. So over here, I’ll go into this color box and just drag this to the lower left corner so that my color code is all black. So it’s 000 000 and then I’ll change the transparency right here to 0.5. So it’s gonna be a little darker. And then all I wanna do is come down to the padding section and I wanna add some top and bottom padding. So for the top, I’ll change this to percent and same with the bottom. And then I’ll put in 14 percent on the top and eight percent on the bottom. And that’s all I have to do. So once you’re ready, let’s click “Save.” And now what we wanna do is put in our page title. So we’re gonna drag in a fancy header. So let’s hover over the plus button up here, find the fancy heading widget and click and drag that in. And once you get this pop-up, go ahead and put in your heading and subheading. And this time around, leave it as H1. So I’ve already put in my heading and subheading right here. And if you wanna add an animation you can. Otherwise, all you have to do is click “Save.” And once you save the fancy heading, you’ll notice that the font is a little darker. So what we wanna do is hover over this and click on the “Styling”icon right here. And once you get this pop-up, all we have to do is come down to the font section and in the font color, go ahead and drag this up to the upper left so that we get the white color code and we can also text align this to the center. And once we do that, we can click the “Save” button. And now what we wanna do is come down to this section right here and add a little description area. So let’s go to the pencil first and go to the row options. And all I wanna do is go to the “Styling” tab and add some padding. So come down here to padding and uncheck this box and let’s put in “4%” on the top and the bottom. So select “%” right here and just type in “4” and then do the same for the bottom and then we can just click “Save.” And now all we have to do is put in a text widget right here. So let’s hover over the plus button and find the text widget and drag that in. And once we get this pop-up, all we’ll do is delete the sample text and then type in whatever you want. So I’ll just paste in some gibberish. And we don’t need to do anything else with these other tabs unless you want to. So once you’re ready, let’s click “Save.” And now what we can do is come down to the bottom and add another section for our team section. So the first thing that I wanna do is go to the row options. So let’s click on the pencil right here. And once you get this pop-up, all we have to do is go to the “Styling” tab and insert our background image. So click on “Browse library” and find the image that you wanna use. So I wanna use the one called “pagebar.jpg.” And then click on “Insert File” and now you should see your background image right here. And what I wanna do is go into background mode and select the “Parallax Scrolling Effect” and then I can come down to row overlay and make the image a little darker. So go into this color pad and drag this to the lower left so that you get the black color code and then we can change the transparency to 0.60 and that’s gonna make this a little darker. And then what we can do is just come down to the padding section and uncheck this box and change the top to percent and also the bottom to percent and then put in 12.25 right here and then 8% right there. And we don’t have to add an animation. So once you’re ready, go ahead and click the “Save” button. And now what we wanna do is add a title for this section. So let’s hover over the plus button and find the text widget and just click and drag that in. And once we get this pop-up, just delete the text right here and type in “Team.” And then we can format this text. So highlight this and go into this dropdown and select “Heading two.” “Heading two.” And then we can go to the “Styling” tab and in the general tab right here, come down to the font section and we can change the font color to white by dragging this up to the upper left. And then we can align this to the center by clicking on the center option right here. And then if you wanted to add an animation, you can. Otherwise, just click the “Save” button. And now what we wanna do is add our employee profiles right below. So the first thing that we have to do is go to our row option. So click on the pencil and once you get this pop-up, all we have to do is go to the “Styling” tab and go down to the padding section and uncheck this box. And we’re gonna add some top and bottom padding. So let’s change these to percents and then let’s add 6% to the top and 4% to the bottom. And once you’re ready, let’s click “Save.” And now what we wanna do is go on the upper left to this icon right here and then select the number of columns that we want for each row. So I wanna select the “Four column” option. So I’m gonna have four employees per row. So select whichever option that you want and once you’re ready, what we’re gonna do is put in our first employee image right here. So hover over the plus button over here and then just find the image widget and click and drag it in. And once you get this pop-up, the first thing that we’re gonna do is change the image style. So let’s click on centered image and then remove the demo image and click on browse library and find the employee image that we wanna use. So I’m gonna select this one which is “employee.jpg” and then click “Insert File.” And if you wanna change the appearance or the size of the image, you can do that right here. I’ll leave everything as is and all I wanna do is put in a name for this employee. So right here where it says, “Image Title,” this is where I would type in the name. So I’ll type in “Helen” and then if I scroll down to the image caption, this is where I can type in the job name or the company name. So I’ll type in “Designer” for the job title, and then what I wanna do is go to the “Styling” tab and in the font section, I just wanna come down to text align and center everything. And once I do that, I can click the “Save” button. And now what we wanna do is add some social media buttons right below this image. So hover over the plus button up here and then find the icon widget and click and drag that in. And once you get this pop-up, what you wanna do is select some options for the style of the buttons that you want. And you can see that I’ve already created my buttons right here. So let me just walk you through what I did. For the size, I selected normal and then the icon background style I selected square and then the arrangement is horizontal. And for each of your buttons, you have to fill out these boxes right here. So the first thing that you have to do is choose the logo that you want. So the first button that I created is for Facebook. So if you need your Facebook short code for the icon, what you have to do is click on this link right here that says, “Insert Icon” and you’ll get this pop-up. And what you can do is search for the logo. So if I type in Facebook right here, you can see there’s three different options and I can select the one that I want and that’s gonna insert the short code right here. And then you can choose the color for the icon right here. And I just want with the default color. And then what you wanna do is put in the link to that Facebook page or whatever social media page that you have right here. And then you wanna choose how you wanna open this link if someone clicks on it. So they can open it in the same window or they can go to a new tab. And then what you wanna do is create another icon doing the same thing. So again, it’s all the same steps. So right over here, I’ll choose new tab and then if I come down one more to the Instagram button, again it’s the same steps. I put it in the short code, the color, my link right here and then I choose whether or not I want to open up a new tab if someone clicks on the button. So what you have to do to add some additional icons is click on this link right here that says, “Add New Icon” and then you’ll get one of these boxes. So if you need to, you can pause the video and create as many social media buttons as you want. And then once you’re ready, what I want you to do is go to the “Styling” tab and what I want you to do is come down to the font section and where it says, “Text align,” choose the Center option so that your social media buttons are centered. And then come down to the padding section and uncheck this box. And we’re just gonna add some padding to the bottom. So change this to percent right here and then just type in “10.” And once you do that, go ahead and click “Save.” And the last thing that were gonna do for this first employee is add a text box right below so that we can have a small description. So let’s hover over the plus button right here and find the text widget and just click and drag that in. And once we get this pop-up, all we have to do is delete this sample text and put in our description so I’ll paste in some gibberish. And once you’re ready, come to the “Styling” tab and then go to the font section and come down to text align and select the “Center” option. And then we are done. So let’s click “Save” right here. And now what I want you to do is follow the same exact steps to put in this image, the social media buttons and this little description into these other columns right here. And then once you’re ready, push play and then we can create the section below this, alright? So I will see you in a few minutes. Alright and welcome back. So I took some time to create some additional employees and they all look alike. So now I have four in this first row and you might have more or you might have less. It’s really up to you, but now what we’re gonna do is move on to the next step. So what I want you to do is come down to this new row and we’re gonna create that additional business description section. So the first thing that we’re gonna do is go to our row option. So click on the pencil and once you get this pop-up, all I want you to do is go to the “Styling” tab and we’re gonna put in a background color. So right over here, I’ll type in the color code F0 F0 F0 and type in one right here and that’s gonna give me a grayish color. And then what I wanna do is come down to the padding section and uncheck this box and add some top and bottom padding. So I’ll change this to percent and I’ll type in “5%” at the top and “4%” at the bottom. And once you’re ready, let’s click the “Save” button. And now what I wanna do is change the number of columns from one to two. So on the left hand side, hover over this icon right here and select the second option right here. And what that’s gonna do is split the number of columns into two. So now what we’re gonna do is put in a fancy header and some texts right here and then an image right here. So for the left-hand column, let’s go and drag in a fancy header widget. So hover over the text button right here and then find the fancy heading widget and click and drag it in. And once you get this pop-up, all you have to do is put in your header and your sub-header and then select “H2.” So you can see I’ve already put in my heading and my subheading right here. And once you’re ready, all you have to do is click “Save.” And once you saved this, all I wanna do to make sure that this is centered is hover over this and then click the “Styling” icon right here. And once we get this pop-up, just go to the front section and then click the center option right here and then click “Save.” And now what we wanna do is add a textbox right below this so that we can put in a small description and you should already know how to do this. So let’s hover over the plus button and find the text widget and just click and drag that in. And once we get this pop-up, all we have to do is delete this text right here nd type in whatever we want. And that’s all we have to do. So once you’re ready, go ahead and click “Save.” And now what we wanna do is put in an image over here. So let’s hover over the plus button and find the image widget and just click and drag that in. And for this image, we don’t have to do anything for the image style so just come down to image URL and click on browse library and find the image that you wanna use. So I’ll click on this one and then we can just click on “Insert File.” And now we have our image right here and we don’t need to do anything in these other tabs. So once you’re ready, let’s click “Save.” And once that’s saved, we are actually done with this section so let’s click on the save button up here. And once everything is saved, we can move on to the last row. So what I wanna do first is go to the row options so click on the pencil. And once you get this pop-up, all we have to do is go to the “Styling” tab and let’s put in a background color. So over here, I’m gonna paste in the color code 24 24 24 and then I’ll type in one right here. And then I wanna go down to the padding section and uncheck this box and just add some top and bottom padding. So I’ll change these to percents and I just wanna put in 3% on the top and 3% on the bottom. So once you’re ready, let’s click the “Save” button. And now what we wanna do is put in a text box at the top over here. So let’s hover over the plus button and find the text widget and click and drag it in. And all I wanna do is delete this text and type in something like wanna get in touch and then I wanna format this. So I’m gonna highlight this and change this to H2 and then I’m gonna center it. And I wanna change the color and I can do that right here. As long as it’s highlighted, I can go into this button and then just select the white color. And now my text is gonna be white. So that’s all I have to do and if I click “Save” right here, then you can see my text right here. And the last thing that we’re gonna do is add a button down here to link to our contact form page. So again, let’s go to the plus button and find the button widget and then just click and drag that in. And once you get this pop-up, all you have to do is select your options and put in your text right here and if you wanna put in the same URL, go ahead and type this in. Just put in your own web address and this is gonna link to the contact page that we’re gonna create in just a few minutes. And make sure that you select the yellow color to format the buttons since we’re using the restaurant skin. And then go to the “Styling” tab and on the general tab right here, come down into the font section and make sure that you select “Center” right here. And then what you can do is go back up to the button link. And if you wanna have the same colors as this button, you wanna put in these color codes right here. And for the background color, this is a transparent background color because I have all zeros right here, okay? And then what I did was I came down and I put in the white border color right here. And I didn’t put in an animation so once you’re ready, go ahead and click “Save.” And now we’re actually done creating the about page, so what I want you to do is click “Save” right here. And once everything is saved, we can close out of this builder right here. And now your about page will look just like this. So if we scroll through this, it should look exactly the same. So if this is what you see then we are good to go. And now what we’re gonna do is create the next page. So the next page that we’re gonna make is this blog page. So we’ll have a fancy header at the top and then your blog post right here. So if you wanna learn how to make this page for your Parallax WordPress website, then let’s go back to our website. And the first thing that we have to do is create a new page. So hover over new right here and click on page. And once you’re on the add new page, the first thing that you wanna do is put in a page title. So let’s type in blog right here and then come down to the bottom to the Themify custom panel and go to the page options tab. And what we wanna do is select “No Side Bar” and then come down to the hide page title and click yes. And we’ll come back to the custom menu option a little bit later. And once you’re ready, let’s go to the page appearance tab and what I want you to do is come down to the header design area and select the “Header Horizontal.” And then come down to the background type area and if you wanna have a background color for your header, you wanna select the “Image Background” option and then select your color right here. Otherwise, what I want you to do is click on “Transparent header” and then you can come down to the footer section and if you want, you can hide some of these. So I don’t think you have to do this but I’m gonna do it anyways. I’m just gonna hide these first two and then we can go back to the top to the query post and click on this tab. And what I want you to do is go into this dropdown and select all categories. And that’s gonna expand this section right here. And now what we can do is select the layout that we want for the blog post page. So come to post layout and select “Grid three” and then go into this dropdown for the content layout and select “Polaroid.” And then for post masonry, enable it and then come down to infinite scroll and enable that. And then put in the number of post that you want per page. So I wanna put in nine right here. And then for display content, I wanna go in and select “None.” And then for image dimension, what I want you to type in is 365 by 0. And once you do that, let’s go down to hide Post Meta. And I wanna hide the author name and also the number of comments. So once you do that, let’s go back up to the top and let’s click on this blue button right here that says, “Publish.” And once the page is published, let’s click on view page. And once you’re on your blog page, it should look just like this. So what we have to do is some formatting. So the first thing that we wanna do is turn on the Themify Builder. And once the Themify Builder is turned on, what I want you to do is go to this top row and click on the pencil to go to the row options. And once this pops up, let’s go to the “Styling” tab and all we have to do is go down to the padding section and add some top padding. So uncheck this box and then change this to percent and let’s type in “10%” right here. And once you do that, let’s click “Save.” And now all we have to do is put in a fancy header right over here for for our page title. So let’s hover over the plus button and find the fancy heading widget and click and drag that in. And once this pops up, all you have to do is out in your heading and your subheading and let’s leave this as H1 this time. So you can see my heading and subheading right here. And once you’re ready, let’s click the “Save” button. And once that’s saved, we are done editing our blog post page so what I want you to do is click the “Save” button up here. And now we can turn off the Themify Builder. And now your blog post page should look just like this. So if this is what you see, then we are good to go and now we can move on to the next step. So now what we’re gonna do is create the portfolio or gallery page. So we’ll have a fancy header at the top, some images right here and then a contact us section right here. And if you click on any of these images, you should get a lightbox and you can go through your album just like this, alright? So if you wanna learn how to make this page for your Parallax WordPress website then let’s go back to our website. And again the first thing that we have to do is create a new page. So hover over new and click on page. And once you’re on the add new page, the first thing that we’re gonna do is put in a page title. So let’s type in gallery and then come down to the bottom to the Themify custom panel and go to the page options tab. And what we wanna do is select no side bar and we wanna select “Full width” and hide the page title and we’ll come back to the custom menu option a little bit later. So now go to the page appearance tab and just come down to the header design and choose the header horizontal. And then come down to be background type. And again if you wanna put in a solid color for your header background, then select the “Image Background” and select the color that you want or you can select the transparent header which is what I’m gonna use and that’s all we have to do. You don’t really need to hide anything here because we have the Themify settings already set. So let’s just go back up to the top and let’s click on the publish button. And once the page is published, let’s just click on view page. And the first thing that we wanna do is turn on the first thing that we wanna do is add some padding to the top. So click on the pencil. And once you get this pop-up, all we have to do is click on the “Styling” tab and then go down to the padding section and uncheck this box. And we wanna put in 10%for the top. So change that to percent and just type in 10 and then click “Save.” And now what we wanna do is put in a fancy header for our page title so hover over the plus button and find the fancy heading widget and click and drag that in. And all you wanna do is put in your heading and your sub heading and then leave this as H1. So go ahead and do this and once you’re ready, click the “Save” button. And just to make sure that the fancy header is centered, what I wanna do is hover over this and click on the “Styling” icon. And once we get this pop-up, go down to the font section and click “Center” right here and then click “Save.” And now all we have to do is put in a gallery widget right below for our portfolio. So let’s hover over the plus button and find the gallery widget and click and drag that in. And now you should see your media library right here and what you can do is click and add the images that you wanna put into your gallery but we’re gonna do this in just a few seconds. So right now, what I want you to do is click the “X” to close out of this and you should see this pop-up right here. And what we’re gonna do is choose the layout that we want for our gallery. So right here where it says, Gallery Layout” in this section right here, I wanna choose three columns and then what I wanna do is click on “Pagination” and then for images per page, I’m gonna type in nine. And then what I wanna do for the thumbnail with is type in 250 x 200 and that’s all I’m gonna do. And now what we can do is come up to the insert gallery short code and click on “Insert Gallery.” And now you should be redirected to the media library page and this is where you can go to select the images that you want to add to your media library. So select all the images that you want and if you wanna upload any images, you can click on “Upload Files” and upload them there. And once you’re ready, what I want you to do is click on the “Add to Gallery Button.” And now you should see some short codes inserted right here and you should see all of the images inserted right here So if you ever wanna edit this gallery, all you have to do is click on “Insert Gallery” and then click on “Edit Gallery” and then you can modify the images that you have inside your gallery, okay? So the only other thing I wanna do is add an animation. So click on “Animation” and go in here and I wanna select “Slide in up” just for fun. and add the contact us section. So the first thing that I wanna do is go to the raw options so click on the pencil. And once you get the raw options, all you have to do is go to the “Styling” tab and we’re gonna put in a background color. So right over here, I’ll type in 24 24 24 and then type in one. And then we’ll go down to the padding section and all we’re gonna do is add some top and bottom padding. So go in here and select percent. And then type in “3%” on the top and “3%” on the bottom. And once you’re ready, let’s click “Save.” And since we’ve already created the contact us section before, I’m just gonna go through this really quickly. So the first thing that we have to do is add a text widget. So hover over the plus button and find the text widget and click and drag it in. And once you get this pop-up, just delete this text and type in something like “Want to get in touch.” And then we can format this if we highlight it, we can go into this dropdown and select “Heading 2” and we can center this and then we can turn it white. So once we do that, we can go to the animation tab and add an animation. So I’ll just select “Slide in up.” And once you’re ready, let’s click “Save.” And now all we have to do is add a button to link to the contact page. So let’s go back to the plus button and find the button widget and just click and drag it all the way down here. And once you get this pop-up, you can see that I’ve already created my button so you can see the options that I selected. And right down here, if you put in the URL for the contact us page that we’re gonna create in just a few minutes, what you wanna do is put in your own web address right here. So make sure that you do that and make sure that you select the yellow color option to style your button since we’re using the restaurant skin. And if you wanna go to the “Styling” tab, you can see that I’ve selected the center option in the font section and then for the button link, I put in these color codes. So the background color is transparent since I have all zeros right here and then you can see these other colors. And then I put in the color code right here for the border. And then the last thing that I did was I put in an animation so I put in a slide in up animation. So go ahead and customize your own button and once you’re ready, click the “Save” button. And once that is saved, we are done creating our gallery page. So what I want you to do is click on the “Save” button up here. And once everything is saved, let’s close out of this Themify Builder. And now you should see your portfolio page right here and if you click on these images, you should be able to go through your gallery and at the bottom of this page, you should have the contact us section. So if this is what you see then we are good to go. And now we can create the last page together So we’re gonna make the contact us page. So again, we’ll have a background image, our fancy header, a little text right here, some social media buttons and then a contact form right here. So if you wanna make this for your Parallax WordPress website, then let’s go back to our website and again the first thing that we have to do is create a new page. So hover over new and click on “Page.” And once you’re on the add new page, the first thing that you wanna do is type in your page title so I’ll type in “Contact.” And then we can come down to the Themify custom panel and on the page options tab, select no side bar and select “Full width” and then check yes right here. And we’ll come back to the custom menu in just a little bit. So now let’s go to the page appearance tab and all we wanna do is come down to header design and select “Header Horizontal” and then come down to the background type over here. And either you wanna select the “Image Background” and select the color for you header background or you wanna select the transparent header. So that’s what I’ll select. And all I have to do is go back up to the top and we wanna click the “Publish” button. And once your page is published, let’s click on the “View Page Link” and once we’re on the contact page, the first thing that we wanna do is turn on the Themify Builder. And once the Themify Builder is turned on, the first thing that we wanna do is put in our background image at the top and also add some padding. So let’s click on the pencil over here. And once the row settings pop-up, what we wanna do is click on the “Styling” tab and the first thing that we’re gonna do is put in our background image. So click on “Browse Library” and find the background image that you want and click on “Insert File.” And then what we can do is add the Parallax scrolling effect, so go into background mode and select “Parallax scrolling.” And then what I wanna do is add an overlay and this might be familiar because we did this on the about page also. So come down to the row overlay section and go into this color box and drag this to the lower left corner. And what we wanna do is change this to 0.5 and that’s gonna make it a darkish gray color. And then I wanna come down to the font section and just change the font color to white. So go in here and drag this to the upper left and make sure that says, “1” right there. And then we’ll align everything to center right here and then let’s just go down to the padding section and add some top and bottom padding. So uncheck that box and select percent right here and also percent for the bottom and then we’ll add 14% to the top and 8% to the bottom. And if you wanna add an animation, you can. Otherwise, just click “Save.” And now what we wanna do is add a page title at the top. So let’s go and drag in a fancy heading widget. So hover over the plus button and find the fancy heading widget and click and drag it in And once you get this pop-up, just put in your heading and your subheading and let’s leave this as H1. So you can see right here I put in contact us and I put in get in touch right here. And once you’re ready, let’s click the “Save” button. And then what we wanna do just to be safe is hover over this and click the “Styling” ” icon right here. And once you get this pop-up, go to the font section and where it says, “Text Align” let’s just click “Center” and then click “Save.” And once that’s saved, let’s just go down here and we wanna add some top and bottom padding to this new row. So let’s click on the pencil right here and once you get this pop-up, let’s go to the “Styling” tab and just go down to the padding section and uncheck this box and select percent for the top and percent for the bottom. And let’s add in 4% for the top and 2.75% for the bottom. And once you’re ready, let’s click the “Save” button. And now what I wanna do is add a textbox right in the middle. So hover over the plus button over here and click on the text widget and drag it in. And once you get this pop-up, let’s delete the sample text and type in whatever you want, so I’ll type in some gibberish that says, “Get In Touch.” And I wanna format all of this. So I’m gonna highlight everything and click “Align Center” and then what I wanna do is change some of the size of this. So for the first line, I’ll highlight this and go into this and select “Heading 4.” And for the second line, I’ll highlight this and go into this dropdown and select “Heading 5” and then click the “Italicize” button. So if you wanna format your text, you can. And once you’re ready, click the “Save” button. And now you should see your text right here and it should look a little fancy. So if you like how this looks, go ahead and use the same heading options. And what we wanna do now is add another text widget right below for our social media section. So again, hover over the plus button and find the text widget and just click and drag that in over here. And once you get this pop-up, let’s delete this and type in something like “Follow us” and let’s format this. So I’m gonna highlight it and click “Center” and then just go into this dropdown and select “Heading 4” and then click “Save.” And now what I wanna do is put in some social media buttons right below this text. So again, hover over the plus button and find the icon widget and click and drag that in over here. And once you get this icon pop-up, you can see that I’ve already selected my options right here and I’ve already created my social media buttons down here just to save some time. So let me show you what I did. For the size, I selected extra large and the background style I selected none. And then what you wanna do to create your social media buttons is fill out these boxes right here. So the first icon that I created was for Facebook. And what you have to do is find the logo. So click on insert icon and you’ll get this pop-up and you can use any of these logos or what you can do is search right here for Facebook and you’ll get some results over here. And then select the icon that you want So if I select that one, it’s gonna insert the short code right here. And then what you can do is select the color that you want for your button so I’ve selected black. And then all you have to do is put in the URL to your social media page right here. And then come down right below that and what you wanna do is select same window or open in a new tab when someone clicks on this link. So it’s really personal preference. And then what you wanna do is the same thing for your next social media button and also the other one. So if you wanna create additional social media buttons, what you wanna do is click on this link right here that “Add New Icon,” okay? So go ahead and create your own social media buttons. And once you’re ready go to the “Styling” tab and all you have to do is come down to the front section and go to text align and make sure that you click “Center” to center these buttons and then we are good to go. So now we can click the “Save” button. And the last thing that we have to do on this page is add a contact form right below this. So hover over the plus button and find the contact widget. So that’s this one right here and click and drag it in. And once you get this pop-up, we can leave the layout as the default and what I want you to do is come down to the sent to section and put in your email address. So when someone writes you a message, it’s gonna be sent to this email address. And I’ll also link you to another video on how to create an email address using your web domain. So you don’t have to use a Gmail or Yahoo email account if you don’t want, and then you can put in a default subject line if you want but I’m gonna leave this blank. And then what you wanna do is select the fields that you wanna show up on your contact form down here. So I’m gonna leave everything as the default, but if you wanna play around with this, you can. Otherwise, all we have to do is click the “Save” button. And now we’re actually done creating our contact us page so what I want you to do is click the “Save” button right here. And once everything is saved, we can just close out of the Themify Builder by clicking on the X right here. And now you should see this contact us page right here and if we scroll through this, it should look just like this. So if this is what you see then we are good to go and we can move on to the last steps in this video tutorial. So everything that we’re gonna do now is super easy. And the first thing is if you want a footer with some links to different pages down here, what I want you to do is create these pages on your own. So pause this video and create these pages and then push play. And once you push play, what we’re gonna do is create the navigation menu for all of our different pages up here other than our home page so that they link to all of these different pages. And then we’ll come down to our footer and insert these links right here and then I’ll show you how to customize your footer to be whatever color that you want. And then we are done learning how to make our Parallax WordPress website, alright? So if you want, you can pause the video and create these pages. Otherwise, what we’re gonna do now is create our navigation menu at the top for all of our different pages. So to do that, we’re gonna go back to our WordPress website and hover over our website name and click on “Menus.” And once you’re back on the menus page, what we wanna do is create a new menu for the other pages So click on “Create a new menu” and once you’re on the create menu page, what you wanna do is put in a menu name. So right here, I’ll type in other page navigation and once you title this, let’s click on this button that says, “Create Menu.” And once the menu is created, what you wanna do is come down here to where it says, “Pages” and you should see a list of all the pages that you’ve created right here and what we can do is check the ones that we wanna add to our header menu for our other pages. So I wanna add these ones right here so I’ll click add to menu. And once the items get added right here, if you wanna rearrange the order just click and drag these around and you can also change the name of the navigation link. So if you click and expand this, right here where it says navigation label, I can change this from gallery to portfolio just by typing it in. And then if I wanna add the border around the contact link, I can just go into this one and come down to the CSS class right here and type in highlight-link. And once you’re ready, let’s click the “Save” menu button. So put that in if you want that border around the contact link and then we can close this. And once the menu is saved, what you have to do is click on “Pages” on the left hand side and that’s gonna bring you to this page right here so you can see a list of all the pages that you’ve made. And what you wanna do is click on “Edit” for all of these pages except for the homepage and it’s gonna bring you to the edit page So this is the about page and what we have to do on each and every one of these pages is scroll down to the bottom to the Themify custom panel and then click on “Page Options” and come down here to the custom menu and go into this dropdown and select the new header menu that you just created. So I’ll select “Other Page Navigation” and then come up and click on the “Update” button right here and that’s gonna save your changes. So that will link the header menu to this page right here. And what you wanna do is do that to each and every one of these pages right here except for the home page because the home page has a special header menu. So make sure that you do that to each and every one of these pages and then click the “Update” button for all of the pages. And once you do that, the last thing that we’re gonna do is create a navigation menu for our footer so that we can put in these links right here. So if you wanna do this, let’s go back to our WordPress website and we wanna go back to the menus page so that’s right here. And we wanna create a new menu. So let’s click on this link that says, “Create A New Menu” and the first thing that we wanna do is name our menu. So let’s go in here and type in footer navigation. And once you’re ready, let’s click on “Create Menu.” And once your menu is created, what you can do is come down to pages and if you created those pages that I mentioned, they should be in this list and you can just check them right here and then click “Add To Menu.” And once the menu items are added here, you can rearrange them if you want. Otherwise, all you have to do is come down here to where it says, “Display Location” and check this box next to footer navigation so that it’s gonna add this menu to the footer and then click “Save” menu. And once the menu is saved, the last thing that I’m gonna do is show you how to customize the colors of your footer. So on the left hand side, hover over appearance and then click on “Customize.” And once you’re on the Themify options, make sure that you’re on the advanced tab and at the bottom over here you should see the footer tab. If you click and expand that in the footer wrap, this is where you can change the background color. All you have to do is go in here and select the color that you want and it can change the color right here. So I’ll put this back at the default and then you can also change the link colors over here by coming down to the footer link section and also the footer link hover, okay? So if you do make any changes, always make sure that you click “Save” and publish right here. Otherwise, the only thing that we have to do is publish our website. So let’s close out of this and once we’re back on the WordPress dashboard, all you have to do is come down here and we have to click on this link to make our website public. So let’s click on this link and now you should see this message that says, “Congratulations! Your site is now live.” So let’s go and check it out. So now you should have a Parallax WordPress website and let me be the first to say congratulations and thank you so much for watching this video on how to make a Parallax WordPress website. Please give the video a big thumbs up, and if you have any questions or comments whatsoever, leave them below and always make sure to subscribe because we’re always coming out with new content. Congratulations again and I will see you later. [Music]

100 thoughts on “HOW TO MAKE A PARALLAX WORDPRESS WEBSITE FOR FREE! – 2019

  1. Hey!!!First of all thanks for data you provided…One question can we use this theme for creating client website without having the membership??thanks in advance for reply!!!

  2. How do I make the map more interactive, so that when people click on it; they are given directions to the store? because right now it just pin points the location on the map with no directions. Thanks

  3. Awesome tutorial! On 1:44:11 from builder I applied the text widget, but after I drag it in the section I have no options to edit the text. Example, no BOLD…no "A" underline….ect…ect. It just lets me paste my copied text and paste…no editing. Thanks and keep up with these tutorials. You are a master of your craft!

  4. your theme and this video is … great. i have just one question. have site with more galleries and would like to put in the each gallery different song as background music. is it possible? thx 4 answer

  5. Hello and thank you for your tutorials. I have done several webs following your youtube videos and its been very helpful. Since a couple of weeks i'm having problems working on my sites, the builder goes crazy, i give one command and it takes other actions i didnt want nor commanded to do. I tried to update themify but is asking me for a user and pass that i dont have. Thank you very much for your feedback on this issue.

  6. Thank you so much . Great video . You are awesome . Can i use this theme for commercial use or it's for personal use only ?

  7. Hi, I'm building my website following your video! (it's awesome).
    I have 1 strugle. I have a dropdown menu in the main menu but the color is just a white background and black color for the text. How do i change the color into transparant and the yellow color for the dropdown menu?
    (maybe something is wrong with the CSS?)

  8. Hi Jameson. Great video! What I can't figure out is which fonts you are using for this demo website. Can you tell me where I can find this? In the CSS? Thank you.

  9. Suddenly the Themify Builder link disappear so i can't turn it on, also the Edit Page and Marketplace..I changed color in custom css, i clicked save and then publish and then the 3 of them disappeared..
    Edit——–solved!

  10. Hey Jameson 🙂
    Great tutorial! However, im stuck on the contact page, because I don't have a contact widget?
    Did themify remove it?

  11. hi,thanks for How to make parallax wordpress website video i followed all the steps and i noticed some colour codes are not sticking if i out my code and save it returns to your colour codes. also if i send email from Contact us the email is not reaching my email account.regards

  12. Great tutorial – thanks a lot! How do I change my header font in normal, not capital letters? In fact, maybe I should delete the template – how to? – and follow along and do everything from scratch.

  13. i have only little problem. "rray_merge(): Argument #1 is not an array in theme-functions.php on line 2593

    function themify_woocommerce_params($params){
    return array_merge($params, array(
    'option_ajax_add_to_cart' => ( 'yes' == get_option('woocommerce_enable_ajax_add_to_cart') )? 'yes': 'no'
    ));
    }

  14. Hi Great Video thanks 🙂 I'm trying to embedd a pop up form from mailchimp, can you tell me where is the best place to copy the code to? Thank you so much!!

  15. The contact button does not appear on the builder page. Is there a problem on this addon ?
    Can you help me about this. I'm using now v.1.8.9 themify version 🙂
    I made this site by watching you https://cemtur.com
    Its our school service company in turkey, and I want to create contact form for our company because who want to apply for a job.
    If you answer, I will be so much happy. I could not solve the problem.

  16. Warning: array_merge(): Argument #1 is not an array in /home/u546795085/public_html/wp-content/themes/themify-ultra/theme-functions.php on line 2612

    how to solve this error please…?

  17. Questions: I updated my WordPress to 4.9 and I am no longer able to update text fields and it broke my custom CSS. No matter what I do (clearing cache (including WP), deactivating plug-ins, deleting and redoing pages, I am still having this issue. So I have had to roll back to 4.8.5 and all seems fixed.

    Do you know if Themify is going to come up with a fix for the free version? I have seen that others have contacted them numerous times and the promised a fix (this was over 3 months ago). My customer is frustrated as I have just now realized what the issue was.

    Also, the logo image shrinks when you scroll down the page – I have added this code to my custom CSS

    #logo .fixed-header-on #site-logo img {
    height: 60px;
    width: auto;
    transition: all .3s;
    }

    But it does not seem to have fixed my issue. Do you know of a fix? http://www.purposemarketinginc.com

  18. Hi, Not all the addons are working, after buying the compleet add on package it respons with : your not a member. What to do?

  19. Hello, I hope I can be helped. I like the Site Logo on the desktop view, but I wish to remove the Sitelogo on the mobile version. Is there a way through CSS? and where to put the CSS?

  20. Hi Jamie

    Please I need your help this is my 3rd time now attempting to build the paralex website but I have 1 issue with my text widget, it keeps repeating the text on every page i created. Also by background mode I have no option that will allow me to leave it blank.

    Any suggestion please

  21. Hi great tutorial, I just have one problem;
    when I am in the blog section I cannot use the main navigation on the top, it is not linked, when I am in a individual blog post page.
    I dont think you explain that in the tutorial, so now in any of the individual blog posts it is not linked.
    How to fix that please

  22. also when I am in the authors page etc. I cannot use the main navigation on top, it also is not linked, the link goes;
    http://localhost:8888/(website)/(post name or author name etc.)/#home, …/#about, …/#gallery etc.
    How to fix that please?

    EDIT
    Your website http://www.parallaxdemosite.com has he exact same problem, when you go to http://www.parallaxdemosite.com/build-something-great/ or any other post you have the same problem, cant use the main navigation on top to go to other parts of the website.
    You have to go to the blog first and then click on one of the posts first and then try to click on home or somewhere else on the top menu
    Someone knows how to fix this???

  23. DRAG N DROP LIKE A BOSS!!!
    Speed Up Development Time By 90% And Get Your Plugins & Themes On The Market 10X Faster > http://bit.ly/2IqdzmY

  24. hello NYC TECH club, are there more options than highlight-link, here for example on the contact button? maybe animated css classes? i suppose a css class isnt just normal css which has more dots and numbers and all, can we put normal css inside without class?

  25. It doesn't save my social links, when I open my page, it doesn't show me the icons …,
    Also when I try to change color codes, there is no button save and publish, only publish, and when i click it nothing happens.

  26. Great tutorial keep up the great work. Every time I edit the text it reverts back to what I had put in earlier seems like a problem with the theme I was going to purchase the theme however without knowing if the problem is taken care of I will have to hard code what I want to do or find something more stable.

  27. thumps up for tutorial. my header is not transparent (set on transparent) and double the size the company name on top level and menu button on bottom level.

  28. helo thank u very much for this tutorial it's amazing. But I have a little problem i'm in local host for yet and when i click on the main menu sections … nothing. It's just writte localhost/mywebsite/#portfolio or #about but… but nothing change.
    Help me if U can and thank U VERY MUCH for this tuto

  29. Hi Jameson. For some reason when I try to do the extra text under the Fancy Header under the About section, the text will not change. It keeps following the text that I entered under the Home page, even though I save it, it keeps defaulting back to the text I put under the first text box I added. I even went in and tried to correct it in the backend and now it is taking the new text, but I can't change it!!! It's weird. Any ideas on what I need to do? Thanks for the very thorough and detailed video. Just having a few issues right now.

  30. Hey! Do you know what the font is called used for the "paragraph"? It automatically applies it to text if I select "paragraph" but I need to know what it's called so I can match other text around the website thank! 🙂

  31. Hi, i just have a slight problem while doing the css in the color code.. i cannot save my work as there is no saving menu only publish. how do i go about it? thanks

  32. Hi ,, sorry ,, do you have the latest Themify Ultra version 2.0.1 ? do I have to download a paid version of WooCommerse in order to have the eCommerce skin? thanks

  33. Life saver. Love Themify. Easy to use front end builder. Video easy to follow and helped me understand WordPress. I am an author and a novice. I don't want to spend my life building websites. I want to write. Thanks

  34. Great video! Just one question
    – in animation, how do I remove all animations from a section?
    Any help would be greatly appreciated
    Cheers
    Dave

  35. I hope you are still checking this video. I followed along with your video, however, my template download did not come with the contact module. I even try to do one of the contact page templates and everything shows up except the form. What do I do? Also, please add me to your mastermind group on facebook!!!!

  36. Hi Jameson,
    Thank you for the video. It is very helpful.
    I have few issues . Please , Will you help me with this ?
    1. I have three text boxes – if I add text in the first box then the same text will be overwritten in another two text boxes.
    2. I get an update notification to update themify. if I do not update it, Does it going to be an issue in future? because I am designing this for my business so the database will be in large volume.
    3. I am using woocommerce as well. so I hope there won't be any issue.
    4. I also need to customize it according to my need – Like I need a tracker / Status update widget (Like Papa Jones and Dominos's ) customer will get a notification of there order. Also, I need to interlink this site with another app where the manager will add customer details and will create job cart.

    Please request you to help me with this it would be a great help.

  37. HELP PLEASE!!!! I have done all this now at the end and content keeps glitching on me. It will auto fill the content boxes with the same text repeated. Do you have any suggestions? Thanks! Jeff

  38. Thank you for the well instructed video.
    I added a pricing table, but when I tried to edit it showed nothing…
    Any help?

  39. Hello Friend, your video is very detailed. It's incredible! I have a question that I can not solve. The "yellow bar" above the activated menu of the header, how do I change this color?

  40. Jameson your tutorial was the most outstanding one I have seen in years. You Sir, are an excellent, articulate, and kind instructor. I never would have been able to create a great web site without your help. Congratulations on your future, I'm certain it will be bright.

  41. Hi, I’ve found your tutorial amazing for building a parallax site and I’m a novice. Thank you! I’m in Themify Ultra, Social links, I’ve tried to add a image for LinkedIn, but had the “Not found” the requested URL /wp-admin/admin.php not found on this server….

  42. Hi, This very nice tutorial. I've facing some issue if i add full width content image in the background and visit website to watch that image after saving. that image are showing but when i go to the "turn on builder" the image didn't showing in the row. Could you help please.

  43. Hi Jameson, I followed your 2018 tutorial and was able to setup a perfect and good looking homepage.
    So, first of all, THANK YOU!

    The same, I kindly ask you help with menus.

    I set up the two menus. I chose the second for all the pages except the homepage. This setting looks as not working because even if in the menu field shows "other-page-menu" the page displays the "homepage-menu".

    Can you give some hint about where to look to solve this issue?
    Many thanks in advance!

  44. Thank you for this great video! I have followed it and have completed my website! However, I have one question, I have made categories and now when I go onto these categories pages, the main navigation for those specific categories pages don't work. You can check it out here and try testing my main nav: http://www.hpcode.co.uk/category/drupal-events-website/
    Thank you!

  45. Fabulous. I am however having a big problem with the text boxes. They are all saying the same thing i.e the message I typed the first time is duplicated in all the others no matter how many times I retype it. I am saving each time but the problem persists!

  46. Hi, I would like to change the color of welcome text is it possible? and how we can add search bar option on the header? Plz help me to required changes. My website is – www.sugamgyaansangam.com

  47. Hello Jameson, I am having trouble saving work sections. When I edit a section the entire text on different sections changes to read the same with the corrected section. Is there anything I am doing wrong???

  48. I am also having issues navigating through pages that I have created. the parallax page works fine but once I go to the other pages the link doesn't work it will show this address www.citygospelchoir.co.uk/#about/home which doesn't link back to the home page.

  49. What would be super helpful, Jameson, is putting the time code for each step on your text version of the instructions. Like Step 30: Create Blog Post Page is at 3:23 in the video. That way when we go back to retool things we don't have to comb through the video to find them. LOVE YOUR STUFF! You are really great at this 🙂

  50. Thanks for this awesome tutorial. It helped me set up my first business website. Ive got one small issue though. Once you visit a blog post the navigation menu doesnt work (cause its the same as on the homepage). So far i havent found solution for this.Any options?

  51. Hey. I really loved your video. My site is almost perfect now but I ran into a problem. Everytime I use the fancy header, I have this huge space right between the sub header and the header. It's like they is invisible content between

  52. Hello Great job on this tutorial clean and easy to follow. I'm having a problem with the maps section. I download Maps pro plugin it's showing activated but not showing in the modules section. I have regular maps there so I tried to follow with that and Map is saying can't load Maps correctly. Can you help or point my somewhere? Thanks

  53. good morning bro i love your videos they are amazing but am having some challenges whenever i edit a row the changes does not reflect and even the padding and margin does not reflect also . how ccan i fix it pls its urgent?

  54. best tutorial i have seen. only the contact form is not working here? "There was an error. Please try again" any suggestions

  55. Dear NYC TECH CLUB, All the tutorial in the videos are not working again, pleaase kindly check it on behalf of those of us that want to be part of the tutorial

  56. Great video! Pretty much worked my way through it, but I don't remember seeing how you got the social media buttons into the footer? Maybe you could provide a quick clue?

  57. Great video, just a few issues though, the themify page builder is having all sorts of issues, no previews, text not aligned all after its saved. Im assuming it needs to be upgraded and paid for in order to work properly.

  58. I can't focus!!! "Right here…Right here…Right here…" WIsh I could have learned from you! Just some positive critique 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *