Beginners guide to building a Photography Portfolio Website | Don Horne | Skillshare

Beginners guide to building a Photography Portfolio Website

Don Horne, All Round Creative Guy

Beginners guide to building a Photography Portfolio Website

Don Horne, All Round Creative Guy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (3h 16m)
    • 1. Photography Website Intro

    • 2. Day 1 - Siteground Domain & Hosting Wordpress Setup

    • 3. Day 1 - Wordpress login Theme Plugins

    • 4. Day 1 - Demo Pages & Menu

    • 5. Day 1 - Elementor Intro Header 1 Responsive

    • 6. Day 1 - Home Page

    • 7. Day 1 - Homepage Settings Permalinks

    • 8. Day 1 - Creating a second Header & Popup Menu

    • 9. Day 2 - About Me Page

    • 10. Day 2 - Projects Custom Post Type & Home Page

    • 11. Day 2 - Projects Single Page Template

    • 12. Day 2 - Portfolio Pages

    • 13. Day 2 - Home Projects Styling

    • 14. Day 2 - Homepage Responsive Photos

    • 15. Day 3 - Blog Categories Demo Content Single Page Template

    • 16. Day 3 - Blog Category Template

    • 17. Day 3 - Blog Archive Responsive Fixes

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

Community Generated

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





About This Class

In this 3+ hour class, I go through every little step in building a photography portfolio website using WordPress and Elementor.

Because I'm going into so much detail, You will be able to be very comfortable to build more websites by yourself.

This is a beginner's course, so I start right at getting a domain and hosting and walk you through step by step.

Meet Your Teacher

Teacher Profile Image

Don Horne

All Round Creative Guy


Hey Guys!

I'm Don, I'm an all-around creative guy. I've been into Web Design & Graphic Design for over 17 years now. Working for large companies doing anything from 2D Animations in the Casino Industry, Then all the way over to Web Design and User Experience Design for Dell Computers.

Over the last 12 years, I found a love in Photography & Videography. Starting out doing Documentary photography where I did a big 4-year project on Homelessness in Ireland. I then moved over into the Fashion Photography & Videography industry.

I have always loved teaching people new skills that can help them grow.

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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



1. Photography Website Intro: Hey, guys. Welcome to this, uh, little tutorial when I say little, it's probably not going to be a little, um I was recording this tutorial for quite a while now, so it should be kind of long. So sorry about that. Um, what we're going to create today is a photography portfolio website. Um, we have a couple cool things that we're gonna build. Ah, we are on the front page here. So we have, um, a little section here for your latest projects. And this is just if you do a couple photo shoots, like per week or per month, and you just want to add in. Ah, like all the best photos off that project on, then we have a latest news or ah, blawg section that will go to the blawg. Andi. Then we are going to you have a portfolio section. Um, that is nice, big and beautiful. Um, I I'm using any tested off Scott's photos, um, to create this ah portfolio. So it's just a demo page. It's not her actual website, so don't stress too much about that. Um, let's see. So what else do we have? So we have a blawg we have about section, we have a contact section. So I'm gonna go through step by step on how to create every single little piece of this website. 2. Day 1 - Siteground Domain & Hosting Wordpress Setup: All right. So in the first section, we need to sort out hey, domain and hosting for you a new website. So there's loads of options out there for domains and for hosting some cheap domain places , I will probably have ah, couple links in the lesson description below. Um so So definitely check that out in terms of pricing. Um, Now, the thing is, if you by your domain at one place and host your website on another place, we need to make a small little change to the domain, but that will be covered in one of the lessons coming up. So don't worry too much about that. Um, so ah, in terms of hosting, um, I use a couple places. Um uh, the one is a VH. Um, they're not very beginner friendly. Um, but I've got a bunch of domains on there. Um, but one hosting company I've used a lot is side ground. I think I've used it for maybe 8 to 10 years. I think, um, there they're fast. They're affordable. And most importantly, the customer services is amazing. Um, now I have to say that for my free course, I, um, at the the only way I make money out of this is with ah, with my affiliate link to Cite Ground. Now, the thing is, there's other hosting companies that pay pay better. But personally, I don't like them. Um, no, there's Ah, there's blue host. Um, uh, there's host gator and a whole bunch of other places, but I've used them before, and I don't like them. So that's why um I'm going with with site ground because I've just used them for for a long time. Um so just know that I'm not just pushing some sort of website hosting because they pay a whole bunch of money. Um, so And also, one important thing is when you get this hosting package, you don't pay anything extra. You just pay the normal side ground. Her sing fees and site ground gives me a small little cut. Um, so there's there's knows no extra cost for you. Um, so, technically, um, we have a big company like site ground that pays for this course instead of you paying for the course. So it's something that you need, um, to to have a professional website. Um and yeah, so I just get a small little cut. I just wanted to be, um, upfront with that, um, but they are really amazing hosting company. Um, So what we need to do is we need to go. The link is down below in the description, so you can just ah, just click on that, um, and then go over to to cite ground. Um, and they do they do offer a discounts are? Yeah. So that's look at this page. If you get this page, um, you can just click on the managed WordPress hosting, and that will take you to this page where we have a couple options. So this is basically, if you are planning on just having one website, just your your portfolio website or, um, a mentor website, whatever website you want to build. If you're If you're only gonna do one website, then I would suggest to do the start up. Ah, package. Um, Then if you plan on doing a couple couple websites for yourself, um, I would suggest that grow big because you can have unlimited websites and you get 20 gig of web space. Um, and maybe you really get into this whole Web design thing um, and you want to start offering some services? Teoh People, friends, family, whatever. Um, you can go for the for the go geek account. Um, this is, um it's unlimited Websites have 30 gig of space and more of monthly visits. Um, so if it's just a single website, I'm just click on get plan. Step number two. Um, you can read stir and new domain. Or if you already have a domain with another company you can click on already. Have a domain. Sir. Um, you concert for your domain here. It's 15 95 per year. Um, so I'm gonna go with I already have a domain. I'm just gonna type in. There we go. Build it, click on proceed. And this is gonna have bringing up to the review and complete. So this is where you just put in your details? Um, your client information. Um, your car details, um, and then this section here, it's your plan. Your data center. This is going to change according to way you are in the world. Um, that will just make sure that your website is closer to your audience period. You select. Um, how long you want this, Um, and then you don't need any extras. Click. Confirm. Um, And if you want to sign up for the newsletter, expect that and you click pain now. And a soon as you've paid, everything's gone through. You will get an email from side ground with with all your lug and details. Um, with within a couple minutes. So for this Ah, this first segment, I'm gonna take you through the, um, the set up of your your domain and you're hosting. Um I'm using a client's domain and hosting two to run you guys through this. So they've actually registered the domain on go Daddy. So it's actually good, because I will be able to to show you guys how to point your domain to the hosting. So let's get started. Um, so to get started, a soon as you've registered with site ground, either you bought the domain through side ground, or you already have a domain with another place. Like go, daddy. Um, as soon as you lug in, you will get the new site ground. Um, panel. So this is actually my first time doing doing this with the new site ground interface. So we both. We're both gonna do it for the first time, So Ah, just looking around. The first thing that I see is set up your side. Um, so I'm just gonna go ahead. It's pretty straightforward. Um, so I wouldn't stress too much on this screen. Um, you have my great website or start a new website. So we're building a new one. So we're just gonna go with start the new website, my great a website is if you've built a website on another hosting company, um, then you can just get them to transfer it over to psych grand. But that's not why you're here. So, um, let's go ahead and select start new website. And soon as act that selected, you will see, we can do a WordPress WordPress and we commerce weebly and other. Um, we are just interested in WordPress right now. I'm just going to do a plain old wordpress website. So let's go ahead and select that. So set up your Le Guin. Um, let's see. Gonna use one of my email addresses, um, dot co and then the password, Just something that I will remember and that I use for for my Web design projects, so just click continue. But we're just going Teoh, try and skip that, Um, if you if you do want it, go ahead and get it. But I'm just going thio going to skip that and do any security plug ins later. So let's click. Finish. Um, say possible. Now, the only thing with this is I will have to move, um, the domain name from Go Daddy to cite ground. Um, so that that's basically just changing to address is on the domain name. But I will take you guys through that. Um, I'm just going to stop the recording for now until this is done. All right, So, uh, the set up was finished. It only took about a minute, minute and 1/2. Um, so the next step that I have to take, um, is I need to change the name servers off the domain name. Um, if you registered with side ground, um, you will be able to just go straight to the to the word purse installation for anybody that has already registered on A on a different company like GoDaddy, you would need to change the name servers. So this little section here will give you the name servers. Now, just keep in mind. These are not always the same. It depends on where you are and where you've selected your website to be hosted. Um, my client is based in Asia, so they've given me the name servers for, um, a server in Asia. I get first step. I'm gonna go over to go. Daddy, um, and I have to blur some stuff here. So, um, as soon as you've loved into GoDaddy or whichever domain red string company you picked, you can go to the domain. So we're gonna go here and then click on the DNS settings button, and this will open up another page with a whole bunch of stuff that you really don't need to worry about. Um, it's not what we here for. Um, the thing that you would need to look for is, um is the name servers? And right now, this is, um it's with Go, Daddy. So I would need to go ahead and click change button. I'm eclectic custom, and that will bring up to input fields here. So that's just where you go ahead and you paste the 1st 1 you go. You copy the 2nd 1 and you put that in and then you click Save. Um, depending on who you went with, um will depend how long it will take. Um, usually, it's pretty quick, Um, by we'll see when? When we when we do this. All right. So the name servers have been updated. So if you go to your your domain name and just refresh it on may be just delete your your browser history and stuff like that, it will come up with, um, with very clean installation of WordPress. 3. Day 1 - Wordpress login Theme Plugins: it's the fastest way to log into your admin panel is to just go to the website ford slash WP admin and then hit Enter. That's gonna bring up this WordPress log in pages, put in your user name email, and then your password offered to save that. So I'm going to log in, and then you will get this this page here. So as soon as we have those, we have a couple couple things that we need to do just to start building. Um, I'm gonna go ahead and install the theme that we're going to use and some of the plug ins. We'll just install everything, and then we'll go ahead and build the site. So just go straight to Let's install the theme first. So click on themes click on Add New, and we are going to use the the Heller theme by L. A mentor. It's just super fast. Um, they only give you, um, just the essentials that that you need. So we'll go ahead and stole that, and there we go. So activate that. What I'd like to do is just click on these other two themes and just hit delete eso you just delete those now, Um, what I would like to do after this is go over and install plug in that will help me create a child theme. So we use child themes. It's almost like a copy off the actual theme. So as soon as thes guys, um, send out a new version off this theme and you've made some serious changes to I didn't say the occurred or the C s s. It's going to affect your your actual site. So to make sure that that doesn't happen, we since we install or activate a child theme. So we need to go into plug ins again. Click on add new, and then we're just gonna type in, um, child theme, and this is going to bring up a little plug in. That just makes things a whole lot easier for us, sir. It's this 1st 1 here click and stole, and then we click on activate. So once this is done, um, we can go over Teoh tools and then child themes at the bottom so you can see it's gonna give you ah, step by step process. Step Number one is create a child theme number to select your theme. We are using the hello. Themes are It's already selected Click on analyze and do all of that. And I am just going to rename this so that we can see laters are, um, photography. Seem you can call that whatever you want on. I'm gonna copy that because we're gonna need it again. So step number five, select where to save new styles. So I'm just going to say in a separate style sheet, just in case they update the style sheets. I don't want to override anything that I do so have of their arm select parent theme. Um, we can just ignore all of that and then step number seven, show hide. Um, just so that we know. Um, I am going to pace that in Give it whatever name this does not affect anything. You can change this if you want. Um, let's see. Copy menus and widgets. Step number eight. Select that and then create new child theme. Okay, so now it's busy updating doing doing everything it's supposed to do. Um, let's scroll down and step. Number nine is, um configure child theme. So once this is done, um, we can go over to appearance themes. And there we go. There's the new child theme so we can go ahead and activate that. All right, so that's active. Um, now we can go ahead and install the rest of the plug ins, so let's click on add new. Um, we are going to use the l A. Mentor plug in. Let me see. Am not sure if I already know I haven't installed it yet, so just click on that. Andi, just search for El Aumentar. So that's going to come up. Um, And in this tutorial, we we are going to use elemental Per, um, it's Ah, it's very powerful. Um, and very easy to use. Um, so let's just click activate. So we've got that activated. Go back to plug ins for the the rest of the stuff. Now with elemental Per, um, you need Teoh to register on the website, get the the one side license if you're only gonna create one website, But if you're gonna create more, just have a look at what packages they have. So once you get that license, um, you would basically come back here, you get a download and then you just go upload plug in, select file on and there we go. So select the file that you just downloaded for Elemental per and just hit and stole. Click on Activate. Now this is going to ask you, Teoh, connect and activate. It's just gonna wait for that on and go see Connect. And there we go. So that's active. I think what I'm going to do is, um because we want to do a portfolio site where we have sections of, let's say, swimwear, beauty and fashion. Um, we we can create those those portfolio pages, um, on their own. But at the same time, I want to create a, um, a separate page where you can add your latest projects. It's kind of handy, like if if you do projects every every week, you can upload it almost the same as uploading a blood post. But it's gonna be more of a, um ah projects kind of kind of thing. So we can go through the normal blood post type thing, or we can create ah whole new section here called projects. So in order to do that, we need a couple more plug ins, so the next thing that we're going to install is custom first type. You I, um So what this is going Teoh? To help us do is create a new section here called Portfolio or projects or some pretty much anything that you can do in Ah, blood posts. You can create a whole new one, so it keeps it separate. And for this for this website we are going to create maybe a portfolio er section is do one more plug in, um, and then we can start, um, start doing some some cool stuff. So let's dio advanced our customers. Whoops. So advanced custom fields. Okay, so now we just installed this guy. Click on Activate and Yeah. Okay. So right now, um, let's look at what we have here so far so that these two comes standard with the site ground installation. We have elementary and elemental pro. We have custom post type you I the child theme configuration er and then advanced custom fields. Um, so now we can move on to creating one of the pages. Or maybe the header and footer 4. Day 1 - Demo Pages & Menu: the first thing that I would like to do is actually create some. Some dummy page is just so that we have that when we need it. Um, and also, we need to upload the logo. So first of all, I'm gonna just go ahead and create a couple pages go here to pages. I'm add new. I'm just gonna create the couple basic ones. So we just go home, publish. We don't need to worry about any content right now. Let's just create the pages. So we go click on add New again, see about me Click Publish published again at New and we are going Teoh Cold us Oh, projects. This is the page that we're gonna use to to show all latest project on Click on Publish Publish again on gets you We have home about us projects. Um, let's do we're gonna do three categories. Anita's website. She does fashion, beauty and swimwear. So let's go call this one fashion to beauty and swimwear. And I think the last one Let's just do a contact me page click on publish. So we have all these pages to work with, Um, what I want to do next is go to appearance menus. Um, it always helps to kind of create this stuff before we start building out the header or footer. It's just just a whole lot easier. So let's see. Um I'm just gonna call this, um, top menu. Just easier to remember. And it's already given me some some suggestions off the pages. Um, let's see, we got home about me or projects. Now, one thing that you can do is you can actually just drag these up here, um, at sea. Herm, we don't need, um swimwear fashion. Contact me. Contact me has always lost, um, so we can go old projects about me we dragged down. So what you can do is you can have these like this, or you can put it under a portfolio. Eso It's a drop down menu on the way to do that is if you go to custom link, just remove that and had one of these hopes one of these hashtag things. So that basically means that it if you click on it, it's not gonna go anywhere. Sir, the link text is this link that at this text that shows up um, just going to say portfolio and then had to menu. So let's go. Maybe under there. Now, what we going to do is make this a sub menu. So you just drag it a little bit? Yeah, Meaning so. When people roll over a portfolio, these three are gonna show up. Um, so we've got the name. We've got the menu sorted out, and we just click on create menu. All right, so we have the menu sorted out. We have the demo pages, so let's ah, upload the logo on. We will go over here to appearance and customize the first thing that's going to cite identity under longer. We can upload that. Um, just going to you select a white one for now. Um, use two versions of the logo one, uh, white one, and then one black one. So let's just wait for this to be uploaded. Uh, go ahead and select that skip cropping, and we can publish that so we won't see it now because the dark version, um, I'm thinking, um, it's the front page of the website. We're gonna do a full screen with one of your portfolio images underneath that, sir. It depends. What photo you decide to use. Um, but I think for this one, let's she just bring up the black one, just in case just to, um, make the page with. And then we can decide later. So we go select, skip, cropping. And then here you can also just add in your site. Um, they're on Ben Action and photographer and we go on, we click publish, and that is done so we can just exit out of that. 5. Day 1 - Elementor Intro Header 1 Responsive: So the next step is Let's Ah, let's create the header and maybe the footer Real quick. Um, so we will go over to templates and then clean builder. Once we're here, we can either click on hitter up here. Click, add in your header or just add new. So let's just go add new header. This is the header that we creating and just say Maine header and create a template. So l a mentor is going to bring up a couple pre made kind of headers. So this gives you a bit of a head start. Um, So you can also just click on the little magnifying glass and you'll get a preview of how this will look. Um, I think we will create to, um and just see, see how it goes. Um, because I would like to create the, um, the very simple page here. Ah, full screen background logo and then the hamburger menu that brings up a custom menu. But then, at the same time, I want to create something that the menus are already here. So let's go ahead and maybe just creates create this one first. So I'm going to go. I mean, just have a look at these. Um, but your social links up there, that could be pretty good. Um, actually, yes. Let's Let's go with this one. So we click on insert, and this is going to have everything ready for you. So, uh, what we can do is just click on publish, add condition. So this is going to add it to the whole website. Like every single page on your website can have a different style of hitter. As soon as this is done and we create the next one, I will show you how to do that. But for this, we are just going to say entire site will change that later. So that is updated. And then you can preview that by clicking this little I. And then there. So now a gun. So it's got the little icons are but funky at the moment, but you can see that it shows up. Actually, I forgot one little thing that I like to do is I like to get rid of this top hitter so I can actually see what my final design looks like. So what I do is I just go to edit my profile. And then there is this one little tick box here, this toolbar. And if I take that and then go down update profile, Um, you will see that as soon as I go to the page that it's gone Now we can see everything the way it should be. Quick little introduction Tol aumentar Um, the most important thing is this little button down here is your navigator. This is almost like a photo shop. Ah, for the shop layers. So you can either dragged us around and do your building. I kind of like to just throw it into the corner there. So you have everything here. So everything you see on this page is this in here? So you can see we have one section here and then inside that we have three columns. So we have one column, two and then three, and inside that the 1st 1 is the side loader. Um, we have the navigation menu and then the social icons. Right. So this is pretty handy to just kind of skip through whatever you trying to work on. So every time you click on these, you'll see that the properties with the ah, section properties updates. So for every single one, you have different settings. So let's see. So the site social icons. You have your icons here, But as soon as I click on menu, this changes. So you're always kind of bouncing around the right hand side to the to the left hand side. I'm going to show you real quick how to customise this. The first thing, Um, let's just bring up that page and see what we need to change for now. Um, so obviously I don't like that. So first thing is the logos, but too small. So what I can do is I can just click on that click on that or right click at site longer. And this over here If you set this to anything else, um, it kind of takes the quality down. So especially for the logo to get a nice crisp look, click on full. You can play around with the alignment if you want. I'm just going to leave it as it is, and then for the actual size, you can go to style and then you have your width. You can change. Chose that. Let's do 230 update and let's thanks. So that's a little bit big. I think, um, it's gonna take that down, Teoh. Say 200 and the max with I kind of like to do 100. Um, I just do that. Just hit, refresh and see. Okay, so I like to keep the Maxwell 200 but then also have the with the actual size that you want . Um, OK, so we have we have that. Now, let's look at, um, the menu. So we can either click on the menu on the side here or we can just go right click and read it now. So a couple things here is the alignment. Um then stretch. Just do center. So there's little thing. I'm just go over here, that little blue line that's called the Pointer, and the way you can change that is, if you don't want one, you can set it in None. Just click update. You go there, you can see there is nothing there. Also, one thing that I want to do is remove this little border of their the pointer. I'm just going to do underline the animation. You know you can select to grow. I'm not gonna get into too much detail about about that. I'm just going to leave it with that. You can guard his style. You can change the the actual fund. Whenever you see this little pencil, you can click on that and you can change the the typography. So I'm just gonna go with a fund that I that I really like. Let's go that, um, railway you can play around with the size of the buttons. I'm just gonna go with maybe 13 to get nice and crisp the weight. Um, also, depending on your style. You know, you can make very bold and fat. I'm just gonna go with nice and clean. Um, And then there's there's a couple other things. So the transform Utkan dual lowercase, uppercase, capitalize, capitalizes all the first letters of the word. Um, for this, I'm just gonna go with the upper case with style. Um, changed that the decoration. Underline overline. Strike through if you want. Um, it's gonna need that to default. And we have line height, which we weren't really use here because it's only one line and letter spacing, um, spacing between the letters. I'm just gonna have that just That's too much. It's just put that on. Just keep that on one. So we just click update. Now, the next thing is, I want to change the color of this roll over, um, with hover. So under that, we just changed the text. So now we can change the actual text color. You know, whatever you feel like doing, um, I'm just gonna leave that right there and then the hover image. So we have the text on the pointer. You can see that it's that blue color. Um, I am not 100% sure what color I'm gonna go for yet. So just for the for the Demmer, I am going to choose may be that color kings. We have that. Now. We just need to change the point to the same one. What you can do is just just highlight that and copy it. Click on the pointer, highlight that and then paste it in so that it's the same kind of color. Um, Also the thickness of the pointer. You can make it. I think if you want, I am just gonna keep it nice and clean. Remove that thin little border and I just select the main kind of folder, the section, this whole thing and go to style border. And we should see it right here. So this is one pixel thick. I can just go ahead and click. None update. Go. We go. Okay, so we got the pointer back. Perfect. Um, the next thing that I would like to do is maybe make thes icons a bit smaller. So I just click on that and then go over to style the size going to bring that down. And we can also make this a custom color. So let's see. It's just what kind of a gray, great kind of color click updates we go. So we can also do a I can't cover. So what we need to do is go to nab menu like the hover. Make sure that we grab this color again just so that when we roll over these, I wanted to turn the same color as the menu items. So we'll go down to social icons under I can hover primary color. Change that. And I think this one needs to be a white color. There we go. Click update. You know, when we roll over we have the same accent color as the menu. Also, another thing that we we haven't dealt with yet is this drop down menu. So it's still got the old color. So what I'm going to do is click on, um, the knave menu and go down here to drop down. So let's see, we changed the fund. So I'm going to go ahead and change it for the drop down to I think we had it on 13. Not 100% sure. Yes. Yes, we have that. We have the hover and we go that same green green color background color. I'm just going to change a little bit and see what that looks like. Yeah, I just update also the active color. I think I'm gonna go with that same kind of green, so I'm not 100% happy with that to yet. What I'm going to do is we just got dropped down this first, but that, you see, would be under normal. So we changed that slight gray. I'm just gonna copy that over to the hover, and we just make sure that that is the same. So now, Ernie, the text changes color basic hitter is done. Um, you can click around, but there's not gonna be anything. These are just the demo pages that we created. So just before we create the second menu, there is something that we we also need to do, depending on the browser that that's being used, we need to work on a desktop version, which is this one, um, looks looks pretty good. Ah, Then the other ones would be, Ah, ipads tablets, that kind of thing and then also mobile phones. So for every page that we're gonna create with kind of creating it three times, but it's not necessary necessary to create three different headers. So, um, the way we go about it is this little computer, um, icon, which is responsive mode. So we can click that and we can go into tablet mode. You can see that it changed, and from a normal menu, too. The hamburger menu. We just need to click through and into the that, um, the Mobile 12 and just see that it looks good on all of them. What I would like to do, IHS maybe change that so that it's a a bit bigger. Um I need to change the the column with here. So this is on 30. Um, and see 30. This one is on 40 and then this one is on 30. So we need to make this one, Uh, let's make this one 40. That one over there can be 30 and then this lost one. Um, we can keep at 30 but I think maybe we should change that to 20 and then just change so that it's ah aligned, um, to that. So technically, we're working with, ah, 100% here. So it's we have 40 30 and then this one, actually, this one. Let's change that to, um, to 40. And then the lost one should earn maybe 20. Um, just so that we have it. I lined to to the side. So now we can go back to the to the to the Luger and just changed the size of it. And obviously we worked on the desktop menu. So now we need to do the the colors again. So let's just go in there. We have that. It's just grab this color so we can use it again and change back to tablet mode. Now we just need to change a couple things. Um, sir, under the styling, we have the hover and then the active. That's fine. But we have the toggle button. You can see it's it's ah, it's black. But then the hover We need to change that to the green. So now we can see that it changes. Andi, we have a lot these guys here. So if you want to change this So this here recon centered tuggle line gonna beat that on the right hand side. Um, the full we can have it full width, or we can just change that. But I'm gonna change, keep it to full with, and then we can go over to style the drop down. We have a whole bunch of vertical padding you know we can play around with, so I'm just gonna leave it kind of there. Let's see the divider. Just change that. You're color that we can see. We have solid their border. What? I'm just change that toe one. So if you do want it separated like that, I'm not going to you. But option is there. Um I guess so. We have our tablet now let's go over to, um, to mobile and just see how that looks. So right now, let's do that. And I think for the mobile version, I don't want these icons here. So I am going to go over to this column here, Gonna go to advanced, click on Responsive, and then click this little hide on mobile, and it's still going to show up there. But if you click on this little thing and we'll give you a preview as it is on on the actual phone, um, I guess so that does not show up on mobile. Now, the next thing that we need to do is look at the the logo for this. So we changed that 200% on, then has just changed that 220 click update. And let's see. Click on that. There you go. I think one thing that still stands out to me is this menu is a little bit big. So go to, um, toggle button. I'm just going to change the size a little bit. 20. Just update and preview. We got that. Okay. So you can see those. A little gap here too. Um, let me show you. Um, so have that. You have the drop down. Um, so here we go. So it's the actual distance. So if I click on the menu the distance I changed. So now I have it on minus 39. So that's obviously not gonna work. So let's just change that, too. Um, 25 see the car. So it's kind of hard to see on this view, but you can just close that. You can see if it works, so probably need to move it up a little bit more. Um, meaning this sugar down. Do that. Here we go. So it's been better, but you'll see a soon as you have some some content. Um, if that needs to be changed again, so they're cool thing about this is you can see that this little thing is highlighted in blue. So this is only for the mobile tablet and then the desktop view. You can see that changes with each one of them. So, you know, whatever you did in mobile, it's not going to affect the desktop view 6. Day 1 - Home Page: So now that we have the the menus sorted, let's go ahead and create the front page. What we need to do is go to pages all pages and find home and just click edit on and on this page you will find that little button it says edit in L a mentor to go ahead and click that I already got that open and started working on that. I just need to find it. So here we go. So this is what I want to create. I want ah, full screen image. And then you have your, um, your button and your longer on the sides. Um, and then there is still gonna be some content when you scroll down. Um, So what I did here is let me just go ahead and just delete this. So obviously the logo and the button is still there. So what we need to do is click on this guy. Um, just one column, uh, this section here. Ah, garbage is style. And we can either. I just have a solid color, which we're not going to do. Um, Grady int full screen video if we want or slideshow and then I just below that. We have this section here, and you can upload image to use on that. But I've already got the image that I want. So I'll go ahead and insert that, um, and then what I'm going to do is just look at the settings here, uh, content with will change that. Full with column gap. No gap. The height and minimum hide. Then we need Teoh. Select this. So this is the view port height, and we need to set that to 100 so it's 100% off the height. Um, then we just need to make sure that we don't get this image tiling effects are Let's see, Vertical line. Um, sorry. Let's go over to style and do that. I'm so position. Um, just select center center attachment. We can leave that, as is for now, But I'll show you a cool, cool little thing that we can do. So repeat, no repeat, and then the size we select cover. Um, so let's just update that and have a look. So there is still this top section that we need to sort out. So if I refresh, you'll see that we're gonna have this little gap here. So the way we fixed that is, we click on section, go to advanced, um, on DTIC this link thing, and then we put in minus 120 pixels and maybe even at the bottom, we add 50 pixels there. Let's update and see what that did. We go, here we go. So we have full screen and menu works. We have that. Now I'm gonna show you a little something real quick. If I scroll down, I'm just going Teoh had, um just some empty contents are You can see how this works. You don't need to do this. I'm just using this. Give you example. So as soon as the content goes down there, um, this thing that we, um the attachment, the scroll, um, and fixed. So if I update that and refresh so you can see this is, um the image stays where it is, but the rest of the contents grows so that that's nice. Nice little effect, but for this, I am going to just keep it a default 7. Day 1 - Homepage Settings Permalinks: that we need to do is just make sure that the the front page is set to the home on this page that we created S. R. We have a dedicated term page. Where is that s so right there. We need to set that as the the front page. Um and then, yeah, and then we'll move on. So we need to go down to settings and then reading and select static page home page. And then just like that, the post page, we're gonna leave empty for now. Um, we're gonna decide if if this is old projects is going to be the actual blawg or maybe create a separate block. But I think for now let's select that click save. So whenever we click on the main, uh, the logo or click on home, it is going to come to the actual front page. We need Teoh link the the logo, too. Actual front page. So let's going to that and select this image. So the link would go to a custom euro click on dynamic and in the sight Euro, sir, when we do the dynamic thing, we don't need to change it later. If we change the website address, it will still be linked. Okay, um, what I want to do is go into the admin section and just go over down to settings, um, and then permit links. Sir. What? Pirmin links is basically the way your, um, your link is going to be displayed. And when it comes Teoh, Google and other search engines, you'd need to make sure that your pure link does not show you sure, any weird characters or anything like that? It should be nice, nice and friendly. So in the Perma link page, we just simply just click on post name, um, and then click save. So now when you go to the page, you're gonna have your domain and the actual page name. 8. Day 1 - Creating a second Header & Popup Menu: Okay, um, moving on to the the next hitter. Um, we need to create a new template. So we're gonna go over to templates theme builder, and then click add new select. We have header and just called out. Whatever you need, new hitter create template. And that is gonna bring up some header templates over here just to give you guys a bit more practice in elemental. We are going to build that from scratch, So just exit out of that we're going to do next is actually go over to the first menu because we have the page properties, um, to display on the entire site. So I'm just going Teoh, remove that click save. And now we can focus on the new the new menu, so we'll just go ahead. Click publish. Had condition. So the entire site click on save What we need is basically two columns. We have the loader on left and the hamburger menu on the right hand side. So what we do is click on this little guy here. Um, do two columns. So we have the two columns up there, and we can see here. So first is the the left hand side column. What we going to do is grab the put the site longer in here. So we click on this little guy appear and we can just drag in the site logo, and that should come up. If that does not come out, just press update, and sometimes you need to refresh the page and then we go. So we have the logo. Don't worry about the size just now. Um, next thing to do is, let's add in that little ham hamburger menu. Um, we are going to create the pop up with a really big menus. So all we need to do is just add, like, a little button that will open up a pop up. So let's go onto this thing and then just type in. I can just drag that in so we have icon there, which is going to be a button. So let's click on that. That's see. OK, so it's called bars. Um, just saved you some scrolling. Okay, so we have that now, and we are going to deal with the pop up in a second. But let's just try and get this looking good. Um, so we have the site logo. We can go to styling. I'm changed the size of things. Um, this is satu percent at the moment. Um, so I'm gonna have that same Yeah, 40% and 40%. Um, let's click on the icon. Changed sides of it. Oh, that's big. I think I might just use this and change it to That's 30. And you know why I would want to rotate it. So not going t. Um uh, I guess so. We have that. We have the icon, the hover, um, we can changed the and the color of it. So I'm going to change it to that same kind of color. So we have a hover. Um, I think they might be a little animation that we can add. See, pulse. So there's a whole bunch of options. Um, I am not going to mess around with that too much. Just move all of this down a little bit. So we click on the section of here. Good, advanced. And just unlinked this because if it's linked, you can change. One animal changed the other one, So I'm just gonna unlinked that we only need We only need spacing at the top. So we changed the bottom to that. I think Let's go with 40. Or maybe 50. Go that, and we can weigh preview that. See what that looks like. Okay, Have that the next step is to create a papa. So if you go back to your menu section and templates and then pop ups create a new pop up and let's call this remain menu, the problem just create elementary is gonna give you some really cool templates to work with. And we are just going to, um, just use this one, and then we're going to pretty much delete most of this stuff. Um, so this guy here, the insert, I'm just using it, uh, just to kind of speed things up a little bit. So the menu we pressed to lead, um, delete that to lead, and we have all of that, then next, I'm just going to go and change this to let's just say, 30% and then 70. We have that, um, so we are going to work in the right hand side. All right, So what we need to do now is just create the the menu items. Um, and what we gonna do with this is we are going to just use the button element. I think that's probably gonna be the the easiest. So let's just bring that in and look at the styling that we can do here. So, um, type. Just leave it as default. Let's just do go home. The link. We are going, Teoh sort out in second in the alignment. Let's just put it on the side. Um, we're not gonna add any Icahn. You don't need to worry about that. We're going to change that. And let's go over to the styling. So I don't want buttons. I just want the text eso What I'm going to do is just run through the styling real quick. Um, I just used the front that I was using Bring that up right away. Do in the size. Um, and then I think for a nice and thin on transform maybe, uh, kind of kind of like it that way. So we have that. Now we want to get rid off the button background. So let's just go over there. Just dragged us all the way down. So the button itself is transparent. Um, and then the text color. We are going to change that to a color that we can actually see. So I'm just gonna do kind of a gray color, and then the hover, um, is nothing is happening at the moment. So I'm gonna get that same green color, sir, I can get that over there. The style hover and just just copy that. But we can use that over here. Text color. Just, um, just paste that in so we can see. Okay, it hovers with that color. So have our animation. You can kind of play around and see. See what you like is ah, whole lot of trash over there. Um, so I am. I'm not I'm not gonna have anything on there, but just see, maybe you like something. Um, yeah. Just just play around. Um, I guess so. For now, that's that's fine. For now, I'm just going to double click this and just call this home. So it's nice and organized, and I can just go ahead and duplicate this. So let's see, what else do we have? We have Herm old projects, so I'm just gonna go there, click on Oh, projects. So it's got the same same styling as the first button. So we don't need to go through that same kind of styling stuff again. Duplicate that, and what I'm going to do is, instead of having that dropped down, I'm gonna say beauty, fashion and swimwear. Um, so this is oh, projects, this one, Ines Beauty. You get the point about renaming these things? I want to do it, but it's just gonna take too much time for me. So I'm just gonna go ahead on and just go ahead and do that, sir, it's somewhere duplicate that. Call those fashion. Duplicate that again. I think about me and contact us. Barrack me duplicated one last time and just say contact so you can see this is ah, pretty big. And we might need to adjust a couple of things. So obviously you don't need to redo everything. Um, once you've done that. But there is one thing is this spacing in between the buttons, you can go click on a column and then this widget space. You can put that to zero. And another thing is, if you go to the main one under layout, you see column gap union say no gap, so sometimes it does. It does affect the actual gap. So right now, I think what I'm going to do is make the buttons a little bit smaller. You can see that it's got a bit of padding at the top and bottom. So if you do need to make it smaller, you can, um, remove the actual padding by just clicking this. And then if you need to add more, you know you can change the padding over there. Um, so I'm just gonna add that to zero and just remove this again. So we have that. Now. We need Teoh. Do the same for all these other buttons. So a quick way to do that is just right Flick, you say, copy and right. Click on that and say, Paced style sounds going to do that with all of them. Go paced style. So let's say, um, let's say I want to add a bit of space to separate that the portfolios, Um, one quick way to do that is if I go, let's see. We need to add about space above beauty and a bit of space below fashion so we can go ahead to the elements section and grab this spacer, and we just drag that in in just above beauty so we can see there's a bit of space there. Now. I also want to add some below fashion so I can just go ahead and duplicate this and this guy's the same as photo shop. You can just drag it underneath the different layers, basically, So I just drag that down. We have all of all of these. Um, so it's a big full screen menu. Um, obviously, you can work a bit on the styling. Um, so the only other thing that I want to do right now is, uh, this little close button. I just want to move that around of it. So where they put that over those settings is you go down to settings. Um, you have all your your settings over here. Um, so let's just see general settings, a preview or style. I get close baton. So now we can play around with where that is positioned. Um, just see where that it works for you. So I'm gonna go se 30 pixels and 30 pixels. Um, I am going to change the the color. Actually, the hover color to that original color. And I might, uh, increase the size a little bit. 2 45 Seeing as everything is a big and bold, um, and just click update saving closed. What we can do is just preview that so you can see big, bold menu. Um, I think what I might do is just work a little bit on the styling. So let's just go back to this. Um, I'm not 100% happy with that. Um, I think make it a little bit there, see what 60. Looks like. Um, I think going Teoh, just copy that paced style. You know, it's starting to look a bit better. Go, Can you updates click save. Just have a preview. Okay. Yeah. Um, I think what we need to do is change Change this little bit, I think. Or projects. Um, I'm gonna call it projects. Just I'm more concerned about how it looks then, uh, Anything else? So s So we have the pop up sorted. Now we need to go over to coming back into the main hitter. Um, thing that we need to do now is I'm just going to make sure that that saved. Yeah, that saved. So now that we have our pop up and we created the main kind of header, so what we need to do is basically let this button open up the pop up. So let's click on the icon, going to content and here you'll see a link. Um, we need Teoh. Click on this dynamic and click and where is that? All right, click on action the pop up and then assumes That's then you click on it again, Open pop up. Click on that and it should, Um, if you don't see it come up, you just have to type in the name of the pop up that you created. So let's just go main menu pop up, Okay? And soon as we have, um, the pop up selected, we can just go ahead and preview this. And now hopefully, when we click this, the probable will come up. Have There we go. Now we have a close button that's gonna fade out. You can also work on the speed of things on the way it fades in, fades out, but basically, um, have that. So let's look at, um, the way it it appears. Um, let's go over to this. Um, go down to settings. Have layout. Let's see. Um, the entrance animation entrance animation speed. You can get, like, a little preview. So this is the duration. I just want to make it nice and fost It's gonna take that down. Uh, click update. Saving close. I'm just refresh at sea. Okay. What we need to look at is the actual actual links. So let's go, uh, home content and then just changed this. Teoh, uh, home is always going to go to your main page so you can go the site. Your L um Let's see, projects here. You can just type in projects, and it should come up with the actual page. Have that have spacer. Yeah. This one is beauty. Um, so purity. It's like that. This one is swim swimwear. You get the point. So I'm just gonna fost forward through this on. There we go. So now we can update saving close, Enrique. Unjust. Fresh. That and just preview. So now if I click on beauty, it's gonna move over to beauty and open that. Go back to the home. Um, So there is one small little thing is, this background is a slight gray. Yes, sir, We can change that so that it's just pure white. So let's do that. So the way we do that, it's usually this. This column has a color on it so we can click on column style and you can see this under background color. You can change the color to whatever we want. So I'm just going to change that Teoh Pure white. Um, another cool thing is, um, we can have it a little bit transparent, but I think for this one, I just want to have a pure white. If you do want to make it transparent, you can play with this second slider, so if there's content below it, you will be able to see that. But for this we are just I'm just gonna go with pure white. So, like, update close and then just a preview. This we go. So it's all pure, pure white And yeah, there we go 9. Day 2 - About Me Page: OK, moving on to the about me. Page, Um, this is a very, very simple page that I created. Um, obviously, this is a lot of duplicate content. Let's see what I created here. Um, this is a very, very basic page. So when you creating this, you would go over to your pages, go to a, um, to about and edit and then edit with L a mentor that is going to bring up a empty page. Um, I am just going to create, like, a new it's called that knew about, uh, just so that I can do the basic set up again. So you get this empty page, you go down to settings, select elemental, full width and height title. Um, and then click update. So from this page, you can see I have ah, whole bunch of sections here. Um, I have the heading in that little insurer. Um, and then I have a new section with the about me section a photo and then thes sections here . Um, so I will just run through real quick. Um, what we did over here, um, I think I'm going to make it a little bit different, so we create that with one column? I know that all the other pages have a margin of 70 at the top. Then I'm gonna go ahead and, um uh, keep everything into this section. I'm just gonna update and refresh, So the never the navigator items show up. Oh, yes. So we have is one section, and I am going to use intersections inside that, and you can see it's created two columns. Um, and we for this section, we only need one column. Um, so I'm going to right click on this and the lead. So we have one column. Now, what we need to do in is drag in, heading, go back to elements, text element. And this is the about me section. All right, I am just I'm just gonna copy the styling, and you can do it from from the previous pages you've done to just to speed things up. Um, it's right. Click on that and then paste style. Um, and then just do about me. Yeah, Let's just update that. Okay, so we have that sort that out. Let's see the text. I'm just going to copy this so I don't have to type it again, Um, that just paste it in there. And then you can also just copy the styling for this, um, or any other text that you've created before Go there like paced style. Now you can see the spacing up here. The way we normally do that is just going up to the actual column and under layout, this widget space pixels. We just put that to zero. It's a default sizing. So let's see what we need. No. Now we need another intersection with two columns. So what we'll do is we'll just close that and we will go to the elements, look for intersection and just drag that just below that, we have two columns Now. We need the about me text. We can just drag that end. Then we need the image on the side. So we'll go to elements on just drag in an image. So this image we will select way we can either upload or if it's already there. Yeah. All right. Okay. Scrap that image and we can have look at the settings center, line it the actual style. We can change the width of it, and you can see on this page. I made the borders but rounded. So where you create that is if you go on the image under style, Um, it's the border radius, so you can just click and hold. So you see, it creates the edges. So I'm just gonna go with 15 for this. Also, this text you can copy from any other page you've created before, which I'm going to do here copy, paste paced style. She I'm gonna copy all this about section so that it looks the same. So they go, I say So the next thing that we have is, um, maybe another intersection here and then, uh, one more with three columns so we can go ahead. And actually, let's create a whole new section. So we have the interest section here on Let's create another section with just one column, um and then we will drag in intersection. We only need one column, So we right click and we can delete that. And this is where we bring in in this title up here. So I am going to maybe just grab this one. I can duplicate that, and I can actually just drag it all the way down and then just changed the size. So this is the areas of focus. And obviously, you can change that to whatever you think fits with you. Um, and the style shows that too 45 or 35. So under that, we need intersection with three columns. So we do is we can. What I'm going to do is show you a little shortcut. Um, so we are going to duplicate this guy, and then I need the text editor gonna go in there. Obviously, um, this heading is a little bit smaller than this. Heading is a bit smaller than that one. So I'm just gonna copy that just so that, um, we have the right size paced style. And in this text, it's just Demi texts are the shortcut I was talking about is we created this, right? So the first thing let's do that and, uh, change the column. Gap to know Gap. Um, the main column. We need to set that to zero again. Maybe this section two. Okay, so, no, we just need to make sure that we keep changing this, like the no gap things that weaken style. Later. Um, me. See this one So that's no gap in this column again turned that to zero are get so we can work out the spacing between these in a second. But shortcut I was talking about is this column here with the heading and text element, we can just right click on that duplicated and duplicated again. So now we have these three columns, and so if we preview that, you'll see there's no spacing in between these. So I'm gonna preview that. You can see the spacing is all wrong and it should be like that. So now we can go and look at the spacing. So I'm gonna click on this intersection. The intersection has thes three columns and under the no gap that we changed. We can change that tune error or extended. So that's gonna automatically create some spacing between the items. So we will just click update and then just preview. Yeah, so it's created that. But I'm not a big, big fan of that. Um, So what we need to do is change that to no gap, and what I'm going to do is click on this first column, go to advanced, and I am just going to add some padding on the right hand side. I would say on this one, maybe 10 pixels. Uh, the middle one had some padding on the left hand side. The same with this one left. Sir, there are a couple ways of doing that. Okay, We need a bit more space, and then we can work on the spacing here. So let's look at the spacing below this. We can go to advanced margin the bottom. That's 10 above. We're going to add about 30 pixels. She was change that 20 and 40 just to give it a bit of space. Just see what that looks like. Okay, so we have this. Um, no, it obviously looks a bit strange because the actual text is different. So I'm just going to change that. This is obviously all just demo content, but you get the idea on how to stall the pages. Um, let's look at the original page now. What? How I got to that point. So, um, I added a bit more spacing over there, I think. Let's see what I did here. Click on that. I had extended under the column Gap. That's why the spacing is pretty good like that. This whole section down here, I just duplicated everything and then just renamed things except except the titles. So this is obviously a good good place to add any publications that you've been attitude? Um, yeah. So you just need to play around and see what works for you. Um, as I mentioned, there are loads of templates available. If you click this little folder under pages, there's loads of little bits that you can grab. You don't necessarily need to grab the whole page. But if you like a certain element, you can import the page and then delete the rest of the stuff. You can also go up here two blocks and there is a whole bunch of categories. So if I go to about, um, you know, this is, um, some really cool stuff. So this, for example, I can just, like, insert, and that's gonna bring up this section down at the bottom here, Um, and let's just preview that click update good to this section. So there's loads and loads and loads of options folder blocks category or about, um, you could go on about and just see what else is there is this large options? I would suggest he just import stuff, See if you like it. If you don't, you can change it. Um, also any of these templates, you can change the way it looks. So, for example, this is not the same kind of styling. Um, so I can just go ahead and select my styling by pressing copy, go down here and then paste style. So now it has my fund and the size. Andi, I would obviously just make that a little bit smaller. And those text I would change to my text. These images, you can go ahead and select whatever images you want. There was the last one, so update. So yeah. So that's about it. For the about me page, let's move onto the contact page. 10. Day 2 - Projects Custom Post Type & Home Page: So in order to create the the projects or the portfolio, sections were going to come down here to the custom post type and then add edit post types and you'll see in a second why we're doing this. So let's just call this, um just call it Projects Projects Project. This is singular, and we are just going to scroll down. Don't look at all these settings, she said. That true has archived exclude from search. I don't need that. We set this to true. And then what else is here? So supports first formats, I think. Comments custom fields. Um, okay, yes, sir. Let's do tags and categories. So let's add post type. So once you've done that, you'll see on the side here it's added a whole section for products. So the good thing about creating this once is now you can have a blood post o r. Blawg with, um, with all the blood post in there, the categories and tags. And then you can separate your projects into categories and tags. Um, s O that that was not too technical, but it's done. So let's have look into projects. Click into old projects. You can see, it looks pretty much the same as, um as the blood posts. So, um, what we going to do is, uh, maybe load up a couple a couple projects, so let's click on add New and this is pretty much the same thing. Um, you have your featured image, which is going to show up on, um, the the layout on the front page. So let's just select this one here. It's cool. It, um, bar you and we obviously don't have any categories just yet. Um, so let's just publish for now, um, let's just go over two categories. Just so before we get started with loading after the project, we're just going to create a couple categories. And if you go down to projects categories, um, you'll see you have name slug parent category and description. Um, what I'm going to do is just create one main one, which is furnish, uh, photo shoots. Um, the slug is basically the Let me just go there. So appear if I click on projects. So this little section here, So that name of there is the this leg. So you need Teoh. Uh, think in terms of search engine optimization. So for this one, it's just going to be, uh, photo shoots or latest photo shoots, latest dash photo shoots and the description, um, 100% sure what to say, but maybe we can saves collection. My latest fashion. Further shoots don't make it too long, but definitely be descriptive. So, parent, uh, category, this is going to be the main one. So just add that and let's do, um she fashion, um, for her shoots. And there we select a photo shoots, has the parent category at that, and I'm just going to do the same for a beauty on swimwear. Okay, so now we have two categories. Um, let's go have a look in, uh, the projects. No. When there we created, we can just just update. Let's have a look at a couple of things in here. So we have We can put it under photo shoots, which is gonna be the main, um, the main category. And then this will be under swimwear. You can add tags if you're going to have a lot of projects or Ah, Soon as you start working with blood posts, you can add some tags. So we have the featured image. And let's see Perma link. You can change this to so Bali villa photo shoot and you'll see that the link that's going Teoh come up. So we'll just update that. And I'm just going to create, um, a couple a couple more. Um, so just fost forward through this. Okay, so now we have three projects loaded up, and the one is in swimwear, um, fashion and then beauty. So now we can go back to the home page, and then we can start adding a little section. Sir, Um, I'm just gonna remove this, So if you're still just have that the big image, you can go ahead. And, um uh, you can go ahead and click this little rogue I one column and what we're gonna do is just add a little little section. Um, and we need to look for the portfolio element. Drag that in. So I'm going to do is I'm thinking to do maybe four columns and then post per page. Um, there's four. We're gonna change that to eight. This will make sense in a second. If we go down to query, um, we can, uh, she we need Teoh, just refresh this. Otherwise is not going to show up. Um, so let me just go back down there. And now with the query at the we need to basically pull in all the projects. So we need to go here and then select projects. That's the one that we just created Now, um, and I'm thinking we need to go back up here. We will just add this to three, and then we do six. So update that and see what that looks like. Just go back to the front page. Got here. Now we have your projects showing up. So what I would like to do is just add a little section here. Maybe just a heading. Yeah, and mostly gonna go back and had in some texts just below that. Let's just see, just go for it. My, uh, latest photo shoots do the styling girl and change this to two railway the size. I'm thinking maybe that's a big and transform that too. Upper case. Maybe a little bit more content. Just center alignment. And this column I'm gonna add a bit of spacing above there. So I go over to advanced, and, um, the padding at the top. I think we will just make it about actually, let's go for 80 pixels. And so this text over here, what I would like to do, um, this is where you have a small little paragraph about your project. It doesn't have to be a specific project, but just in general, what type of photography you're doing this will definitely help with with search engines. Eso just just add, like, a little paragraph for this. I'm not going, Teoh. Try and make something up right now. I'm just going Teoh stew, a bit of stylings, our center align it the typography. I'm gonna use the same same fund at that time. Changed that. You something smaller than that? Because it was huge. Change that three, maybe 200 and and we're going to do is just ah, at some padding. But I'm going to change a 2% unlinked this and just add some padding on the left and the right. Sir, let's just change that to 30 on 30 just to see what it looks like. Um, so that's pretty good for the desktop. Uh, one thing that I want to do is just go over to the column, and, um, just this space is it's kind of a default space. Just put that down to zero, and then for the actual portfolio, I'm gonna add a bit of space at the top here. So with margin on tick that the top on, I think should be probably probably was the same as the space up here. So let me just see what I did there. Go over there. So it's 80 now. Just go back to portfolio on change. That too. 80 actually. Let's me. Let's change that to 60. So OK, so we have that. Let's have another look and see what's going on here. So we have full page, I have the menu and then we scroll down and we have my latest project. Um, I might just duplicate thes three real quick, Um, just so that we get a better a better idea of what's what's going on. Okay, so now that we have a couple of projects uploaded, whose gonna refresh so that we can see what's what's going on? No, I get So now we can see we have the project's loading. Um, you can obviously choose the the different categories that you want in here. So, um, have the projects include term? And this is way you would go. Maybe you just want swimwear in there. So now all of that is gonna disappear in. It's only gonna be the swimwear. Um, photo shoots, sir, You have you have some options where you have everything here, or I mean, six of them, but it's a mix between the latest projects. Um, so you have some some good options there. I'm just gonna remove that. So let's look at the options that we have here. We have the layout right now. I'm doing 33 columns, so let's see what that looks like. Serve three columns. Let's see. Um, what options we have here? The masonry thistle is going to change things depending on the the aspect ratio off the image. So update that on just preview. So yeah. So this change is if you have portrait landscape photos, Um, but for this, I'm going to just keep it like this. Um, see, So actually, let's stay with content. There is a little, um, filter bar there we can have here. That's categories. And this will bring up the little menu at the top. Um, sir, this is a lie. Beauty fighter shoots. So the names of this is the actual category names. If I do just a quick at it there. So beauty fashion. Edit that again? Yes, As updated. Swimmer. Okay, so let's go back to this page on. Just refresh answer. Now, we have beauty fashion photo shoots that needs to be needs Teoh be disabled, gets all the projects. And I'm kind of changed my mind about this. This main category, the photo shoots think that's gonna be a problem later. So I'm just gonna go ahead and delete that for now. Um, if we need it later on, we can put it back in. Um, see you. Why is it not Okay? So that is gone. Um, let's open this thing up again. Just refresh are fresh here too. So now we have six projects showing up and we have the at the little filter here. So if I click on beauty, it's only going to sure in beauty, fashion, swimwear on all of them. Um, what I do need to do is, um I need to create another section here, you know, But a spacing just so that we can see the whole thing. So you don't need to do this right now update and just wait for this thing. Um, just refresh this so we can see what's going on. So So in my latest photo shoots, so we have all of this. Um, obviously, this is gonna go to the photo shoot page, but we haven't worked on that yet. Let's just go back. Everything is still working. So the next thing that we need to do is create the actual project pages. Um, we need to create 11 template file, and it's going to be used for every single page. 11. Day 2 - Projects Single Page Template: but let's get started on the project page. What I've created here is just ah, a simple little, um, project page. It's like Like I said, if you do photo shoots every week or a couple times a week and you want to put a old, like, a whole bunch of photos from one photo shoot into one project, you can do that, um, of us day. I want to keep the the, um the actual individual portfolios nice and simple and only the best. So what we need to do is create one small little feel. Just Teoh, um, put the actual description in there. This is also gonna help quite a bit with with a CEO. So, um, if we look at the projects thing that we created earlier, um, let's say we had new um, this little section down here is not not going to be there. Right, Um, so because it's an empty kind of project, um thing the thing that we build, um, there is only space for a title, and then content, right. Um and I want to save this content for the actual gallery. So what we need to do is just go down to custom fields and click on field groups. So I've already created one, but I will create another one. Eso you just click on, add new and just say new, um, new projects. And then down here, you just say add field and this way going to you just need to call it, ah, project description or something like that. So I'm just gonna because I already have one. Um, I'm just gonna say new projects this is gonna order complete and the field type. We need to change that to text area so that we can add a couple of paragraphs. And then there's a couple options here. Um, so new lines we can say automatically add paragraphs so you can just copy and paste if you want Teoh or just just type normally. And just off to every if your paragraphs finished, you just press enter. Go to the next line. So once we have that, we can click publish, Um, and this over here can be used for for anything really sore. Let's say we just add it a section that will pull this in this description, you can do a separate one for the title Or maybe you want Teoh had something like, um, uh, project? I don't know. Project. See the project date. You can already pull in. That's not a problem. That's maybe something to do with the location rights. Ah. Ah, project location and a field name. Just a plain text field is fine. Uh, and the rest of the case will save that. Now, one thing that we need to do for this to work, um, is look at this location. So we know that projects is a post type, um, and it's equal to post. So right now it's going to go into the block post section. So we just need to change this to project, because this is the project that we created. So now we can just click update, And as soon as we go into project and add new, you'll see that we will have, um, in this section here. Just ignore this bottom one, because I've already created that earlier. But you basically have your your project description on then project location, sir. What I will do is I'm just going to go ahead and delete. Um, the previous one that I did, um, average you let me just copy some text first just so that I can pace this later. So I'm just going Teoh, just delete the one that I created before. So now if I go into projects at new, we are going to see is the title. So just some cool project. Uh, and in Bali, Um, the project description. This is where you get into a little bit of detail about the photo shoot. Who was it? Four. Is that just a a test shoot that you did for swimwear fashion, that kind of thing. This is old things that will help with with search engine optimization. Um, so just don't get too crazy with it, But just add some details at the basic keywords like fashion photographer, fashion, photography, location. Um, you know, just basic photography stuff, sir. Location? Say barley. Indonesia. Um, I am going Teoh put it under swimwear. Um, you can add some tags if you want, but I'm not going to bother with that. So, with this template here, um, I'm pulling in the featured image over here, and then I have gallery on the side. So this featured image. Um, sorry. Let me go back So this featured image. I am just going to grab this one. Um It obviously works better if it's a landscape photo. Um, because it's just a tiny little preview. Um, and then just so that we have it, I'm going to add this gallery on. I'm just going to select a whole bunch of random photos here. Um, just you can click on one shift and then click the rest of them. If you don't want a certain photo, you can click on that to remove it, and then you just click on creating your gallery. This here, um, I would recommend to actually click on each image that you add. Add some all text and description off. What this image is What type of photo Shoot it. It was It's all gonna help you get the get discovered on Google, sir. Let's say everything has to do with, um um, swimwear photography. You would add something about, um, Swarmer photography and Bali. Um, Barley photo shoot, Bobby swimwear photo shoot, that kind of thing. But just ah, nice. Simple. Um, let's see this barley swimwear photo shoot on. This is further shoot Polly swimwear, photo shoot and barley Indonesia. You will obviously need to figure out what your your niches, What are you into? Are you into waiting? Waiting photography, street photography, swimwear, fashion that that type of stuff And you will know the the industry kind of keywords that you need to be using. So, um and so for this, um, we have a couple options on the side. Here. I am just gonna go for a two column, A link to none. Um, so we have some demo content here, and I'm just gonna hit. Publish. What we need to do is, um, guard to templates theme builder, and we're just create a single just add new. So here we need it's ah, single page and post type would be project. We're going to create a separate one for the block post, but this one is specifically for the project and just say, and school or whatever you want. But I'm just going to say my projects and we can create the template. So let's see what we created here. Um, so I have a previous and next, but basically we have two sections. The bottom section who we can actually delete. We There's nothing in there. So So we have one section with two columns. So when the screen comes up, you can just close that, um, can go down here for settings. We'll just set everything up real quick. Previous settings, projects, and then at the demo project that we created. So we have that now we can create the two columns. So we have two columns now. A couple things that we need. We need the previous and next that and then the gallery section here. So the 1st 1 would be the post title. And I am just going to I just need to disable this real quick one second. Okay, Say that. Okay, so now you can see that it's pulled in the demo projects title. I was pretty easy. The next thing we need to do is maybe this, uh, this item here. It's post navigation, so we can go into the search thing and just say, post navigation and just drag that above that. Don't worry about the styling just yet. Let's just bring everything in together that we need. So this here is the post content. We'll go there. Say post content, drag that below. So that's gonna bring in your your images so you can see there's two columns here. If you want to change that, you can come to the the individual posts. And you can change that, too. Two columns, three columns, Press update. So if we update this and refresh, you will see that this is going to change to three columns. Um, oops. Just and do that just for this, I am gonna do two columns. I think it just looks a bit better for this. Okay, so let's see, what else do we have? We have the, um, post info which goes into this post in for, and these are all pre created elements. So it's nice and nice and easy. Um, and I just want the actual date so I can go onto the side here, removed. Comments the time and the author Permian Sea. We only have the date. Um, the next thing would be had the description. So this is going to be a custom piece that we add. So we need to grab a text editor drag. It's just dragged on there. We can just move things around later. So now this is just some some demo content we can delete that. But, um, to bring in And this, um, content here, we can go ahead and click on Dynamic Scroll all the way down to advance custom fields. Click it again and then between select new projects. If it doesn't show up, just switch between between the two s. So we have the description coming in, and I think, um, what I would like to do is just add just a little location, um, thing at the top here. And I am just going to use a heading, bring that in and then go over to, um, content dynamic all the way down to you. Advance custom fields. Select that and then project location. Um and, ah, one cool thing that you can do instead of having to write photo shoot location in in this, uh, section here, this, uh, advanced custom Fields has this really cool thing where you can add stuff before or after. So if we click on this thing again and go down to advanced, we have before after and then fullback. Um, so before, if I say further shoot photo shoot location, we got. So now, whenever I put it in a location. I only need Teoh. Add in the actual city name or or the location, and then this is going to be added every single time. Obviously, it looks a bit weird at the moment, but you can just style it. I say, just making ice and small. We're gonna get to styling in a second. Um, they're 12 200 nice and thing. I think photo shoot location is a bit too long. So what I'll do is just change that just to location and just click update. Okay, so we have that. The next thing we do we can do is pull in the, um, the featured image. Uh, so here in the elements section, we have featured image. Bring that in, and it's just going to pull in that future to image. Um, so let's look at the the styling. Obviously, I changed the colors and the sizes and then the fund so we can go to click on that and go over to style and just change it. Whichever way you can play around whatever funds you decided to use. Let's see. What did I do here? I did. Railway 54 300 as usual, um, 300 and I think I might have changed it'll too. Upper case. So you can play around and just see what works best for your style. But you have quite a bit of control. I've already done all of this so I can just go copy paste the style. All of these elements that we just added, You can just click on that good Asyl, um, text and just style it your usual way. Um, we have that. And then the actual color here, let's just make it gray color. Um, the icon up here, Gray. Um, and same with this one, you can just click in and choose the styling. I'm just going Teoh, right click and say paced style. So it has all the style. Now, One thing is, if you're wondering about the spacing in between these, you can click on the column here and come to lay out. And here the default is 20. So you can at that 20 Um, let me just do it on this one, too. So now there's no spacing there. So now we can do that individually. So for there for the heading, we go over to advanced. Just untech this, um, at the top, we can add. I'm spacing there at the bottom. Um, sorry. 50. Actually, I think this should be 20. And the top one should be 50 maybe, Um, the same with this. I think we need to add a bit of space and top here. Image to, uh we just had a bit of margin. 20 top. Another cool thing that you can do is add some padding on the sides here so you can click on the this column here. And when you go over to advanced, you can add some some padding on the right and the left. So go padding on the right. 15 on the left, we add 15. So just spaces things out a little bit here. You know, we can do the same on the left hand side. Column. Go to advanced on. Take this right. Had 15 and then 15 on that side. I'm just click, refresh and have a look at what? We create it. Sir, there's obviously a couple things that that I would do that I'm that I did with, um with the first version that I did. So I think this guy here. Spacing is too much. So I would just add that. And then also, there's no space at the top here. So what I'm going to do is click this main section and go to Advanced on and I'm take their the linking and it's just at 50 pixels to the top for now. Andi hit refresh, but refreshing. And see, There's a bit of space at the top there. Um, I don't like the space in between these two. So going to undo that, Uh, maybe just 55 pixels. Uh, this main section. I'm gonna change that to 70 hat. Just refresh. Okay, so now these are aligned, you have your description, and you can go over to your other projects. So this description did not show up. Um, because the actual blood post does not have the new the new description. So then you just do that real quick. So this is the really cool photo shoot, Dennis. Week old projects click edit. So that was obviously removed because I deleted the first version of the advance custom fields. So just paste that in, um, location would be Cape Town, South Africa. It's under fashion. It doesn't matter right now. We have this image and see, What else can we use? Uh, I just use that guy. I mean, that girl. Um, so, no, if I refresh that, it should have the description. 12. Day 2 - Portfolio Pages: All right, so let's move on to the actual portfolio pages. So from the start, we knew that we were going to create a beauty some way and fashion. Um um, portfolio, um, thes are pretty straightforward. And we also have a couple really cool options. Ah, this one I created a full with. But I'll show you a couple options. As as we go on. Um, it's just the basic title description. Um, I might change this a little bit still. Um, and then we have the images that opens up in a overlay. So let's go over two pages. Old pages. And remember the Demmer pages that we created before, um, I've already created the the beauty one. So I think for this one, I am going Teoh, just create the fashion one. So let's go and click on Ed. It was going to bring you into the page, and then we just need to click on edit with l A mentor. So once we're here, um, let's do a couple small things so we can go to settings Gertie page layout and elemental full with, and then also hide Title the pain. Just click update. Um, now that we have everything. I might just refresh real quick. So we have everything. Let's see what we created here. So we have a basic one column section here. Um, we have the heading. We have the just the description. It's purely for Seo purposes. Um and then we have a gallery. So let's create that. Um, let's click on this single column. So we have that. I know that the spacing from the logo down to where the contents start is about 70 pixels. So I'm gonna click on this, go to advanced UN, select the linking and at the top, I'm going to add 70 pixels. Um, the next thing that we need to do is go to the elements and let's add in a heading and text editor. So let's just drag that in. Go back text editor. So we have that now. The next thing we need to add is the actual gallery, so we'll go back to elements when we can just search for our gallery. I'm going to use this gallery thing here, so we have that now inside the gallery section, we have, I think, for for the images, if you want to add one gallery for all three portfolios. You can do multiple here, so you'll see. This is, um this could be fashion. The next one could be yes, somewhere. And the way this will work is a soon as we add some content. I'm just gonna go ahead and just select the couple images just for this Demmer. I'm swimwear. I'll just add a couple more. So as soon as we add in images, you will see that now we can filter these so you can technically have one portfolio page if you want. And you can let people filter through here. Sir, um, for this, I'm gonna have separate separate pages for the three portfolios because I can change the the heading and description to help a bit with s year. So I'm gonna go back to single. Um, this is the fashion page, so I'm going to upload a whole bunch of fashion photos from Anita. Um, go to fashion on, just select all of them, and I will just fost forward through in this section. So if you want to change the order of how it's displayed, you can come here and you can drag them around whichever way you want. So go insert gallery and there we go. So the next thing that you need to do is just work on the actual styling and how you wanted to be displayed. So let's click on preview. So we have that. So right now, um, the beauty one is a full wits. Um, and this one is inside this column, so you can also change the the amount of columns, depending on how many images you put in. Um, so I'm just going to change this. You see, the quality of these images are a bit low. It's this setting here, the image size. I'm just going to set that too large for now, so it looks a bit better. So we have two columns. There's also a whole bunch of settings here, the grid justified and masonry. So we're going to go through a couple of them and just see what options we have. So now we have two columns, so let's have a look and see. So we have grid. We have justified this one. You need to play around with the row height so you can see when you drag this, you can get different results, so it is quite quite flexible. Um, you know, you have the grid justified. The masonry is gonna change depending on uh huh and the actual dimensions of your photo. So you can change that. Let's say three columns. You can see it's goes up there. This photo's a little bit. The height is a little bit less than this one. So it just does that. You can also do some spacing in between. Now, if you do want to go for full wits, um, portfolio, which you can do is you go all the way, appear to section under layout. You change this to full width column gap to no gap. Click apply, and you'll see that this is full with. So then the anything that you need to do is just work on your and you're styling. Uh, sorry. So we have that content weaken center line. It, um Also the spacing between these two. Go over two column on under layout. We have a default value of 20. So we just changed that to one. Um, this text of here go over to style center, align it. Um, what you can do is if you want to make it, Um, kind of Cut it off. You can either add some, uh, line break over here and then just do, uh, the text over here, the line height in C that changes of their so changed line high to that and maybe adds says and patting at the top, go to advanced on. Take this, Andi, maybe add it's not 50. We just need five. Or maybe 10. We have 10 on and do the same. You changed your funked in front. If you do you want to 30 300? Uh huh. Maybe that's 15. And then this is, um, fashion for earlier curved styling. Typography. Really? I think probably 30. I think I'm just going Teoh and copy the previous one. So I'm cheating a little bit, but you can do that from from the other pages to it keeps things consistent. So just copy on the one. And then on a new one that you building going to say paced style. Uh huh. Same with this one. So just copy and then paste style. So this one we need to you just fix because I did it a little bit different than the previous one. I think I just added some some padding. Uh, so now we just need to go back. Yeah. Term. That's percent. And then this guy, we just need to add some space at the top, and I think might have been about 20 or 30. We go. So let's jump back into this new template. Uh, just changed that, too. 30. It's update and see what that looks like. So you go. So now you have a fashion portfolio. We have a description, Um, just to help with s here. And also, if you're wondering about the quality of these images, you can go and just make sure that the quality is good under content on this image size of here, you can change too full, but it is going to load, um, for a while, so I would maybe ah, not go completely full. You will see when you work on it. What? What works for you? Um, also, this should probably be maybe four columns. If you have four columns, the images are smaller, and that means the quality will look a bit better. So we have four columns work on that. Now that we've created one template. What we can do is we can actually save this as a actual template and use it across all three portfolio items. Whatever you are creating, um, and the way we do it, I am going to just delete everything that I created. Now just everything is deleted now. So what we need to do is go to the thing that you just created, or the page and the main, uh, section we just right, click on it and save as template. So we will call this port failure template. So we created ones, and then we use it for difference for different portfolio pages. So we have that. Now what? We can go into the new page. So this one is the fashion one. I'm just going Teoh update and refresh so that the new template shows up. So now that I've created the template, I can just click this folder and my template at the top here and this. We need to go down here to port failure. Template. It's the one we just created. Click on. Yes. No. The template was made for swimwear. So all we need to do is go to swimwear. Here and just call that fashion changed the description Tiu some sort of fashion related description and then also the gallery. We can just delete that and go ahead and upload the fashion photos. So I'm just going to select a couple here just for his Demmer. And then, like I said, you can change the order click concert. So now we have that. That's just going to your update. Okay, so we obviously have a duplicate there, but it's fine. We know how to remove it. So now we have the fashion one, and we have the swimwear one, and they're exactly the same. Um, you know, it's not a big jump. It's only the the names, the description and obviously different images. Um, se if you want to create that for, um for the beauty, um, we would go over to let me just Sorry we had This is supposed to be the bt page. Um, let me just see. Okay, So this one was supposed to be the beauty beauty put for earlier that and changed the images real quick just so that we can see what's everything changes. So we have that. No, I will just up Leard. A whole bunch of beauty images go, so just fast Forward the section again. Okay, so we have that create a gallery, change the order if we want or removed some photos I got. So we have. Thus now we can just press update and beauty should be updated. All right, so I'm gonna move on to So we have beauty. We have fashion. Now I just need to create the swimwear one, um again. So just click on exit to dashboard Gertie pages, Um, and the swimwear one I get. So we click on edit in it with L a mentor. And now, because I've already created everything, all I need to do is just go down to settings, change this to full with high title update and click on this folder. My templates, Port failure. Template here. Okay. Yes. So we have everything over here, but this is so this is the actual actual somewhere, which we've already done. Um, but yeah. So you would just change the name of the portfolio, that description and the actual images. You can just remove that on, upload the new images, So let's see, we have What do we have here. So we have fashion swimwear and beauty. And as you saw it, we have Ah, like a lot of options in terms of styling. Um, thats it lets me run to the next section. 13. Day 2 - Home Projects Styling: All right, let's spend a couple minutes Just talking about the styling off this, um, projects section over here. Um, we have the heading. We have a description, and and we have the project itself. Um, we have a little filter. So I think what we're gonna do is just, um, see what options we have for this. Um, obviously, it depends how many projects you want to display. Um, right now, I have it in three columns, but you can, You know, if you do a lot of shooting and you want to share a lot of stuff, you can change. They're the columns. Um, click on portfolio. You can change the columns here, so let's say you want to add five. Let's see what that looks like. Yeah, click refresh. So you can have five of them. And also, what you can do is because this top image is the full width of the browser. You can do the same thing with this, and the way you would do that is just by going clicking on this whole section, you go over to lay out and under the content with you change that to fool with no gap and just hit update. It's refreshed. This. Now you can see it goes from edge to edge. Um, this would be pretty good, but you need to make sure, uh, that you have enough projects to show their so right now, um, we have six. So I think what will do ISS Let me just select a portfolio. The columns, we will do three update. Just refresh. Obviously, it's gonna be a bit a bit bigger, but you can see that, um, it looks pretty good. And let's see, So we have that. Let's have a looker around and see what we have. So the image size is not the actual dimensions off the image. It's more about the quality off the image. So you will see when you change this to ah, the thumbnail, you can see that the quality has gone down. Um I mean, just update that, and as soon as we refresh this, you will see that the quality has gone down quite a bit. So I would not suggest that when you have just three columns and this type quality. Yes, I will load fast, but it weren't look that great. Um, but as soon as you go to, let's say, five columns. It should look. It should look decent. It's still not not the greatest. Um, definitely. I wouldn't go full or any of that. I would maybe just go for either medium or medium large. I'm just gonna go with that and then changed back to three Click Update, and then we will have a look at other options. So I said I went through this before. It's the masonry that's going to change depending on the type of photo that you upload. Um, I'm just gonna keep these squares, but actually changed that right now so you can change the look of these. So let's just have a look at this. So now it's it's full with, and it's a different aspect ratio, so there's definitely loads of cool options. I'm just going Teoh, uh, keep this at one. So we have. We have the square. The next one is sure a title. So when you roll over, it went sure the title or will share the title, Um, and then over to the styling part, we can have a gap. I would make the column gap the same as the road gap. You have that, and it's just refresh, so you can see it added a small little gap in between the images, sir, you can definitely play around quite a bit with us. The next thing is the border radius. Um, changed this to say 15 and you can see that it created a nice little radius. Uh huh. So, depending on the style that you're going for, um, you get you can get pretty cool, cool effects. So I think, um, let's go down to the image overlay. So the image overlay, depending on what, um, your theme is I am going to just grab this green that we've been using from from the start , and I'm just gonna go say that overlay. I'm gonna change that to that green. So we have that. Now. All we need to do is just changed the transparency a little bit, so it gives it a little tent. Um, this color here would be the actual text color. So I think that's fine with White, um, this text. But we can change to the default kind of text that we've been been using. It also changed the size of it. They, uh, going to change that to upper case. Maybe just change that, too. 20. So you can also change the filter bar to rendered transform up a case, think 15. Yeah, so it's gets, um it's got some good good options available. Um, I think for this page, I'm going to go back to to a boxed what? Update? That Just refresh. Um, yes, we have that no regard. So we have the rollovers, we have the text sharing, and I think for the next, the next step we are going to work on had the actual project pages. 14. Day 2 - Homepage Responsive Photos: just a quick little thing that I forgot to mention, Um, the the home page. Um, let me just go there so we can see what I'm talking about. So when you view this page on on a mobile device, you will see that this image does not fit. So I'm going to go back into the front page. I'm just open in l a mentor. James. What I want to share you is just the, um, the responsive mode. So if you go down here to responsive mode, click on tablet might actually, um, work with tablet to, um, signal the menu for now. Um, that's see section here. So you will see the section under, um, let me switch over to desktop. So right now we have that image on the desktop. But if we go Teoh tablet, this image won't do so. What I would like to do is just for tablet and mobile. We are going to switch over to a different image, so I'm going to select this image. It's more of a portrait orientation. Then there's also a little space the top here that I want to sort out. So I'm going to do that and go to minus 150. I think. See how much we need. Um uh, I think about 135 should be fine, sir. Now, we can do the same with the mobile version. We have that, um one thing that I would like to do is just add a bit of padding. Actually, let me just I mean that up to roughly. It's a 75. Um, but I also want to add some padding down at the bottom. Um, just 20 and just save that. So now when we view the desktop version different background, more of a landscape orientation, we have desktop, and then we have mobile. 15. Day 3 - Blog Categories Demo Content Single Page Template: the next step would be to create some sort of ah, blawg. Luckily, it's a whole lot easier than creating that the project, because everything is already built into, um into wordpress. So because Anita does fashion beauty and somewhere, I'm thinking that it would be a good idea to add three different categories and this the blogging would be more of a behind the scenes kind of, ah type of blawg. You already have projects which is dedicated to just the pretty stuff that future clients might see with your portfolio. Um, the the blogger is more more aimed at, um, you know, just just trying to get him to traffic onto you. Your website. You might decide to do some tutorials. I know any Ted does tutorials. Um, so we are going to create a couple categories, so we're just going to post categories. Um, and we have these categories already. Um, and this this is way you would add a description off that if you decide to have a, uh, let's say lightly or tutorials just call this free light room tutorials and then just add, like, a nice, nice little, um, description. Um, was mother free like him. Tutorial owes, um, for somewhere fashion and beauty photography, and this is going to bug me. So I am going to change that capital out. Just add a character category. If you are going to blood a whole lot, I would recommend just to have a couple main categories and then anything else that might be, um, it's a beauty photo shoot. With some tutorials, you can add tags and you can filter that later. Um, so let's go over to posts. Now, we need to create a couple demo posts so that we can use when we build the actual template . So let's go add new. So, um, let's see Bali beach photo shoot behind the scenes, so this will go under under somewhere. This is where you add some tags. I'm gonna set another featured image. I am going to just select this one here, Select featured image, and then let me just and some Demmer demo text. So with the the the block side of things, what we can do is just have a standard blawg s. So that means we can add, you know, if you want to add some some images, some behind the scenes images, you just press enter. And you have all these elements that that you can add paragraph, gallery image. Let's I had a gallery, so you can see Just add four of them. Insert gallery. So you have that. And you have all these options available here. So four columns for images and add a couple images. Um, just to go through your day, Like what happened on the photo shoot? How did it start? How did you plan it? Who was the team? Um, gonna go over there and maybe add a single image. Um, just at this one. Do you have there so you can keep keep blogging? Um, add your team. Um, how did you How did you set up? How did how did you plan everything? Um, so yeah, so let's see, it's under swimwear. Um, we had that click publish. Um, and let's just go to all posts. So previously I saw suggested Teoh get this, um, plugging cold. Um, it's It's a way to clone or duplicate the post, sir. Um, if you haven't installed it yet, you can just you can just go to add new type and duplicate post and it should be this one Here we click on install and activate. So now, um, this is only if you want Teoh make copies of it real quick. So I am going to just do that quick edit. I'm just gonna fost forward through this. Um, I'm just creating a whole bunch of different ones so that we can see how it looks. I got so we have some some dummy content. So the next thing that we need to do is actually create the template for the block posts. So this is what I've created. I created everything from scratch. Um, it you can use one of the templates just to speed things up, but I wanted to create, um, this myself. So I have the heading. I have some post details who wrote a post and then the actual published date. Um, and then I have ah column here with ah, three related blood posts. Um, and these will obviously be different, but because we duplicated the posts, Uh, the featured images the same. Here we go. Ok, so announce its a bit different looks, but better. Um, so let's look at how I created this. Um, we need to go down to templates again, theme builder, and then go over to and a single post. And you can see I've created this blood post here. Um, and I'm going to create another one. So you click on add single and the post type. This time, we need to select posts instead of projects on, then just knew blawg template. You can call that whatever you want so that you know what it is and just click and create that. So this is where you will see some of the templates available. You can just insert a certain template and see if you like it. Um, I created everything from scratch, so I'll just show you real quick how I did that. But first, I need to, uh, just disable the one that I created, so we'll just turn that off. So that's saved. So I created to Collins, right? So we have the main content, and then we have a column for related posts. So we need to do you click on this and then select two columns. Um, I know that the related persons just going to be a thin little section, so I'll just select that guy, and you can click here and you can see. Okay, what percentage You want it? I'm going. Teoh put it on 70 30% then first thing I'm going to do is call them Gap column. Gap is no gap, and then we can start pulling in some information here. I'm not going to spend too much time styling it, Um, but you can click around on and just change it the way you've been starting the rest of your site. So let's see, we have this section up here, which is just bringing up. It's here. So this first section is the Post info so you can go ahead and just search for post in for drag that in. So we have that next we need to grab the post title. Drag that in there. Um, and then we have the actual content. So, um, we can go to the elements a post content, and we can drag that in, so let me see. All right. Put everything into a intersection, which you don't really need to. Um, so this one should look kind of the same. Um, see, this is not showing up, so we just need to click published posts and all. Save that. Just hit. Refresh. So they got, um, we have the top section title on the actual block posts. No. The next thing we need to add is this related post section. So, um, we can just go over here and search for posts. So it's just this thing here, we drag that in, and we're gonna do the styling in a second. But we also just need to bring in heading and cold us heading, um related persists a center. Align it and let's go down to the actual posts. So in the post. So you have a couple options? Yeah, cards, columns. We need to set that to one column so you can see this is a card. Um ah. Full content. I wouldn't suggest that, um, so full content is just gonna bring every single bit of information in, so we don't need that. It's going to cards. We have one column. Um, I have anyone three blood posts to show up. Um, you can change the image ratio if you want a little preview. Sure. The title. Um intra text gonna remove that? This the metadata is basically this date here. November. No comments. Um, and you can just remove that, or you can add them. If you really want them read more, we'll keep in the badge. Um, is this little category badge up here? Um, we're going to remove that. The avatar removed that just to make it look a little bit better. Um, then up into styling where you can say so. The column gap. We only have one column so we can ignore this. The road gap. We can change the spacing between them. I think I will leave it on to that. There's a whole bunch of, um, settings here. So the background color if you want that changed bunch of freedom, the content itself. Um, you know, you have the text color read more color. Uh, depending on the style of your website. Obviously, you can change the funds. Ah, I just do my fund real quick. You know, that's so it's obviously not gonna look too good right now because of the the styling. So real quick. I think this one should be Congar Oh, to advanced at some spaces top here. I'm gonna add 70 pixels at the top. Um I'm gonna add some spacing between these two columns. Um, I see quick way of doing that is going here. Onda column Gap, I suppose Aiken to nearer or extended. Click on update. Did you see? There's a bit of space there. Um, so I obviously spent, but a time changing the colors. Um, this section here, if you want to remove some of that stuff. So the comments at the time, the author and the date You can also drag it up if you want the date first. And then the author there. So you have that you have your title and your plug posts. Um, so small little things that I did. This is the final one. I obviously just, um, added some padding at the top here. So under advanced this padding up here, um, I decided to go on 2 30 Um, I used for the posts. I used the classic one column, three posts, and then I just adjusted the the styling off everything. Um, so, yeah, that that's, um that's the basic kind of blawg set up. Obviously, when you save and, uh, do that, the display conditions, um, you select include posts and all posts 16. Day 3 - Blog Category Template: All right, So now that we have the projects page working, we need to look into creating a similar page just for the block posts. Um, So what I'm going to do is I am going to, um, save in this top section just so that I can use it again in the block section. So I am going Teoh, right? Click on it. Saves template and just say archive hitter. So save that. Here we go. So it's saved. Now we can go over to to dashboard again. You go down to templates theme builder, and then go over to the archive section so we can just go ahead type of blood post or whatever you wanna call it. Create template. Luckily, that is pretty, pretty quick weakened Isgur into the archive header. So we have the section and one column, and at first I just use cards. Badge avatar. I switched that off, so I just needed to create this, uh, page again instead of a page. I had to make it a a template. So I am just gonna fast forward real quick and do the styling for this. Bring that river and just hit. Refresh. Now We just need to change the heading to latest and blood persons. Click publish ad conditions and then whole archives. I need to refresh this page. Sorry. Um, so we have our latest projects. If we go to Blawg, it's going to show the new Blawg style. 17. Day 3 - Blog Archive Responsive Fixes: There is also something that we need. Teoh check on all the pages that we created. We've obviously just created everything for the desktop versions. But we need Teoh throw down here to the response of murdered and just click on tablet and then mobile just to make sure that everything looks good on old devices. So small little things. Um, I would just changed that. You know, you can change this to maybe maybe three columns or I think two columns actually works. And so that's That's good. Let's move on to Mobile. This heading is a little bit too big and it's too far down. So let's change that. I think the size may be 25. Yeah, I think 25 is good. This one we can go to styling on maybe 13. And also the spacing at the top. Just remove that and just change that too. I think maybe maybe 30. Let's see what 30 looks like, Um and yeah, There you go. So it depends what you want for your mobile version. You can change it to two columns. I don't think it looks that good. So I will obviously just keep it into one column, but now you can save it. Um, and this goes for any other page that you create. You need to just click between desktop tablet and mobile, see if everything looks good.