How To Make A STUNNING Portfolio Website with WordPress (Step by Step)

Welcome back , party people .

My name is Darrell Wilson .

And today in this video , I'll be showing you all how to create an amazing portfolio website with wordpress step by step .

A portfolio website allows you to showcase your projects or skills and is probably the determining factor if you get hired or not .

So it's really important to have a nice looking your website .

Now we realize people watching this video might not want to showcase a large image of themselves on their website .

So we prepared for this .

So in this video , I'll be providing you all with three different layouts to choose from that work with every niche to help you give some inspiration for your portfolio website .

So let's take a look .

All right .

So here is the portfolio website that we will be making today in this video , you guys will also get all of these demo images and pages created for you automatically to help you follow along in this portfolio tutorial .

Now , we've also geared this portfolio for a different type of agencies .

So this is more of a corporate agency portfolio website where we have this kind of corporate approach .

However , we've also created a specific template for those of you who are freelancers .

So if you're just a solo freelancer , we've created this uh special template for you as well .

We've also created one more for agencies .

So let's say , for example , you just want to have some sort of agency or you want to just display a really friendly presentation of your portfolio .

We have created a portfolio style for pretty much everybody watching this video .

So let me go ahead and walk you guys through the website and show you the various pages and also some really creative things that we added to this portfolio website .

Now , the first thing that we added here was this uh pop open uh canvas menu .

So here you can showcase portfolios , you can add in your Instagram here we added in some social icons and also we just have some general Upsell like a get in touch and directions and stuff like that .

So it's just a really creative uh way that we created this uh website .

Let's go ahead and scroll down here and just give you guys a little quick tour of the site .

So here we just have some general information about our websites and if we keep scrolling down , we just have some projects here .

Now , the thing that stands out from a um a portfolio website guys is this is your chance to be creative , you know , this kind of ventures off from your , you know , your traditional boring website , you know , portfolio websites , they need to be creative yet they also need to look very professional here in this section we've added in these awards .

So you can go ahead and talk about your accomplishments .

You can also showcase your testimonials .

So we did this in a really creative manner .

You know , it's a really nice creative style of a portfolio website .

And then here we have this parallax section where we have this image here and you know , you can link various projects .

And also if you want to showcase like a video , we have this uh pop up where , you know , you just place your video here and this can showcase your work and then we'll keep scrolling down and then we have this section which just talks about like how we uh you know , our business culture .

So here , you know , we're business focused , you know , all the general up sells and stuff like that .

And if they click on this , they can get more information about uh whatever it is that you want to talk about .

And then also we have these call to actions , not call to action , just uh boxes here and they're constantly moving to , you know , talk about your clients and just a really clean formats and then we'll keep scrolling down here and then we have some , you know , must read from our blog posts and stuff like that .

And then we have our footer here at the bottom with the call to action .

And then we have our uh our footer here at the bottom .

Also on the left side , you can see that we do have a parallax footer .

So you can see this image follows us , which is just really creative .

I really do uh like this website and I think you're really gonna like it too .

Now , we actually created this along with several other pages .

So let's say , for example , you guys want to see the career page , you guys can click on career and this will showcase your career section .

And um you know , you guys can go ahead and check this out .

I will leave this demo website for all of you in the description below of this video , but we spent a long time creating this and I think you're really gonna like it and we're gonna walk you through step by step on how to create a portfolio website that looks just like this .

But now let's talk about the actual portfolio itself .

So here we have portfolio and we have created three different style portfolios for you just depending on how you want to approach , showcasing your portfolios .

So here we have a general single layout , right ?

So we have just some images where we can showcase our projects and notice here how if we scroll up and down how the projects pop up in a really unique format .

And then below that , we have some information about the project , right ?

So you have the title of the project , you know , some general contents , the address , whatever , you know , you can , you can put whatever you want to hear , obviously .

And if we keep scrolling down , we have the design process where we talk about like , you know , this is how we do things and you know , we want to sound professional and you know , sound good and stuff like that .

And then just some more images of our projects and our foot are there at the bottom .

So that is the one of the projects .

Let me go ahead and scroll back up here and then we have other various project types .

So we have the portfolio single and then we'll do the portfolio gallery .

So this is basically if you guys uh want to just kind of , you know , have a gallery of stuff .

But here we have this just really a big image and this is showcasing various images , right ?

And we have this Kens burns effect where it zooms in .

So it constantly showcases various uh projects that you can uh you know , that you create and stuff like that .

And then I'm scrolling down , we have the general information and if we keep scrolling down , we just have some more content and this can also be projects as well .

And if they hover over it , we have this beautiful uh design here where it talks about the project .

And if they click on this .

Oh , sorry about that .

If they click on this , uh this can be a pop up or it can be a uh you know , it can go anywhere you want .

So you can link them to a specific project when they click on ads and then we'll keep scrolling down here .

And uh yeah , that is one of the portfolio types .

And then lastly , we have this last one here .

So I'm gonna click on the creative now .

This right here is more if you want to showcase various types of projects based off category .

So let's say , for example , you have a lot of different categories , you can showcase your projects off off specific type of categories here .

And if they click on one of these projects , they can go ahead and get more information about the project .

So here we have some small information about it and if they scroll down , they will get all the information they need about your specific uh portfolio slash project .

So we just presented it in a really clean format and stuff like that .

So keep scrolling down here and then we have some just other types of um you know , showcasing your projects and just again in a really clean formats .

So um yeah , you guys can go ahead and check out this demo website .

I will leave it in the description of this video because we do have a lot of other pages , but I don't want to hold you guys up , you guys can go ahead and check these out , but you guys can tell by yourselves that this is just a really beautiful portfolio website .

Now , before we begin this video , I want to be very upfront with all of you that parts of this layout are using the element or pro version .

For example , this part right here , this is the theme builder with element .

So I a lot of parts of this website are using the pro version .

However , a majority of this website is done with the free version .

But uh you guys will have to go ahead and just kind of modify stuff using the free version of Element or so we can make this completely for free .

But I just want to let you guys know that parts of this website are using elements or pro .

And if you guys do decide to upgrade and you guys want full access to every part of this layout , we do have a link in the description below to purchase Element or pro , but we can go ahead and make a majority of this website with the free version .

So what we're first gonna do is that we're first gonna make this uh home page right here where we're going to have this image , we'll have this title and then I'll walk you guys through on how to set all this up and then we'll go ahead and navigate through the rest of the website .

And then we will introduce you all to the pro version where we will introduce elements like this .

And also I'll talk about how to have a custom header and custom footer using the elements or pro version .

So I think you guys will really like this website .

It's completely free .

It doesn't cost you guys anything .

So let's go ahead and get started and create your portfolio website with wordpress .

So this portfolio website looks amazing .

You know , me and my designer , we spent about two weeks and we put this together and I think you're really gonna like your new portfolio website .

Now we're gonna be building this with a free theme and also a free plug-in .

However , the free plug in is called element and it does have a pro upgrade .

So first be showing you guys how to make your portfolio website with the free version .

And then later on if you guys decide to upgrade , I'll be showing you some of the pro features that come with the page builder .

So overall , I think this website looks great .

It's made for both free and pro users .

So if you guys are ready , let's go ahead and create your portfolio website with wordpress .

Now we'll be building your portfolio website in five simple steps and we will use this checklist off the video to help you follow along in this tutorial step one , we get your domain and hosting .

So this would be the name of your portfolio website .

So maybe it's your personal name or the name of your company .

Step two , we will install a free theme and a free page builder .

We'll then import a free template to practice on to help get you more comfortable with the page builder .

Step three will import our premade template .

This template is designed specifically for this tutorial and you won't find it anywhere else .

It looks great and I'll show you how to customize it and adjust your website to fit your style .

Number four , we'll create portfolios .

There's several different ways on how to approach this .

You can use a page builder or you can get creative and design your own custom portfolio page and I'll walk you through this step by step , step five website overview .

I'll show you guys different parts of the website and also talk about the pro version of a mentor if you guys decide to upgrade and then you'll be on your way .

Now , there is a link in the description of this video and it'll take you to a page to purchase web hosting and welcome to name hero dot com .

Now , I'm recommending name here dot com for years and people love it .

Uh This week alone , I've had zero downtime with name Hero .

So you guys will have a reliable website and also my websites load at under one second with name Hero .

So we do test these servers to make sure that you guys do get the best web posting possible .

Now , once you guys are here , you'll click on , get started now and then it'll bring you to four different pricing options .

So we have the starter cloud , the plus cloud , the turbo cloud and the business cloud .

Now , I personally recommend the plus cloud if you guys are just getting started out , like you're just getting your feet wet for the very first time .

But for those of you who have been using wordpress for a while and you want to upgrade and get some more performance , I would definitely go with the Turbo cloud because with the Turbo cloud , you guys do get the new NVB storage , which does just give you a little bit more performance with your website .

So you'll go ahead and pick a package that works best for you and your budgets and then once you guys uh figure your package out , you'll go to click on order now .

All right , and here you're going to enter in your domain name .

So this is the name of your new website .

So uh portfolio website dot com or you know , my news website dot com or whatever , whatever niche that you're building , you'll go ahead and put it here .

So I'll just put it in tutorial domain one dot com and see if that's available .

All right , cool .

It's available .

Now , I know it takes time to figure out the domain of your website .

So , you know , give it some time , you know , it , it does take some thought for your new websites .

Uh Once you guys figure it out , you guys will click on continue .

All right , cool .

So next we have the billing cycle and we have three years , two years and one year .

Now , personally , I'd recommend one year .

You can , you guys do get a large discount and this does give you enough time to decide this is for you or not .

However , if you guys are feeling very confident , I would recommend going with the two or three year plan .

You guys do get the uh deal the longer you sign up for .

So , uh it really depends on your budget .

But uh once you guys select a billing cycle , we'll scroll down and uh I don't recommend any of these up sells personally , you can do this with free plugins .

So yeah , you guys don't need those and then we do get a free SSL with name hero .

So that's pretty cool .

Uh Once you guys select your billing cycle , we will then click on continue .

All right , next , we have the domain configuration .

Now , I personally recommend the ID protection guys .

This will protect your personal information from spammers and people trying to sell you sco packages and Viagra and all sorts of nonsense .

Whenever you guys get those weird emails in your inbox , it's generally because they found your domain online .

So this will actually protect you .

So you don't get spam in your inbox .

So go ahead and click on ID protection and then click on continue and look at that for a year of hosting .

You're paying less than $100 you're paying only 70 bucks .

You guys can also go the cheaper routes and get the cheaper plan if you're on a really tight budget .

But I think this is a great deal for web hosting for the entire year for this specific performance .

So you guys are getting a reliable and a fast server for this price .

So it's definitely worth it .

So uh go ahead and scroll down , just keep scrolling .

Now , you're gonna go ahead and fill out your billing information here .

So your first name , your last name , uh additional information you'll put in your password and also a support pin .

So this would be the pin that uh they would use to verify that it's you .

And then also we have uh payment methods so you can pay with paypal coin base , which is Cryptocurrency and credit card here .

You'll go ahead and put in your payment details .

And if you guys do want to get their spam or their emails , they , they actually sent some pretty good emails , guys , I'm not gonna lie .

They have some cool uh promotional offers .

You'll go ahead and check that box and then you'll of course uh agree to their terms of service , right ?

I'm sure you guys are all gonna read .

Uh this here , right ?

You guys are all gonna read this .

I don't think anyone ever reads any of this stuff .

But uh yeah , you'll go ahead and uh check the terms of service and once you guys have checked out , I will meet you guys in the customer portal .

All right , and welcome to your new dashboard .

So this is your current dashboard .

As you guys can see , I had many different packages , many domains and I also have tickets with name Hero and they really help me out with all of my problems .

So this is just your interface on the left side , you can see your hosting packages .

These are your current domains , you can always register a new domain , uh also billing .

So if you want to see your payments or you wanna add funds or you wanna adjust your payment method , you can do that here and also the support .

So if you guys run into something weird , I know with websites things just kind of get weird sometimes uh you guys can always open a ticket here and they will help you out with all your problems and they are pretty fast .

I mean , I think maybe under one hour they can help you guys with all your problems .

So once you guys are here , let's go ahead and install wordpress onto our new domain .

You'll first click on my cloud .

Now , here we have hosting packages .

Now , you should probably only have one here .

So just go ahead and click on your hosting package .

And next we're going to see this log into C panel .

Go ahead and click on login to C panel .

All right , cool .

So now we're going to go ahead and install Wordpress onto our domain .

So up here we'll type in wordpress .

Here we go .

We have Wordpress Manager by Soulus .

We'll click on this .

All right .

And from here we're going to install wordpress .

You guys can see I had many installations of wordpress already , but right here you'll click on install and now we're going to look for the domain that we purchased .

So right here you have the choose domain section .

So you'll probably see your domain that you purchased .

I'll just go ahead and select this one , but you're going to select the domain that you purchased and for the protocol .

Make sure this is htps , which is the SSL now for Indi directory .

Make sure nothing is here .

All right .

I don't know why that's there by default , but oops , oops , but uh make sure nothing is there because that will install your domain onto like your website dot com slash something .

And you don't want that there .

It's it .

Yeah , just don't have that there .

Make sure that's make sure that's empty .

Now for the admin user name , go ahead and give yourself an admin user name and a password and this is what we are going to use to log into the website .

So whenever you want to build your website , you're going to use these login credentials .

So make sure you write these down .

I'll just put admin , never put past guys .

Uh Make sure this is something unique .

I'll just put uh Paddy whack and your admin email .

Make sure that this is an email that you have access to because when you forget your password , they will send this information to your email .

So I'll put in my , my gmail account here , my famous PC Hoarder , which I do get tons of spam .

And below that , you can always select your language .

We can always adjust the language as well uh inside the wordpress dashboard and I'll show you how to do that in just a bit .

And we're gonna keep scrolling down here to the bottom .

They have these other themes they want us to use , but uh we're not going to use these and right here you'll click on install .

Yeah , they said 3 to 4 minutes .

That was not 3 to 4 minutes right now .

Here we have install wordpress and this is the administrative URL administrative URL .

So just go ahead and click on this link and this will log you in to your website .

All right .

Awesome .

So now we have a wordpress installed and our website is now live on the internet .

And if you want to see what your website looks like right now on the internet at the top left , right here , you'll just click on visit sites and this is the current theme that they are giving us and it is really bland , really boring , ugly , but not to worry , we'll make it look really good .

So to go back to your dashboard , go ahead up here and click on dashboard now that we have our website online .

Now , let's go ahead and adjust some of these general settings .

The first thing we want to do is go to users and click on a profile .

Now in the future , if you guys ever lose your password or if you want to change the color scheme , this is where you're going to do it .

Uh , I think for this video we're gonna use midnight .

I just like midnight .

It's really easy to see .

Uh , these other ones are just really , really tacky .

I mean , this is , that's way too much , you know .

So , yeah , I think we're gonna go with midnight .

I just like that .

It's a lot easier to see .

And , uh , we're gonna scroll down here now .

You can always adjust your email .

So , uh , you can always change your email and remember .

This is important because if you forget your password , the password will be sent to that specific email .

So you can always adjust that at any time .

And below that , we have a new password , this is where you're going to , uh , change your password .

So for wordpress , if you ever want to change your password this is where you're going to do it .

And once you've made all the changes that you want , you'll go ahead and click on update profile .

Now , let's say , for example , you guys speak a different language .

On the left side right here , we have settings we'll click on in general .

Now , here you can enter your email or you can update it at any time .

So if you get a new email address and you want to update it , you would do that right there .

And below that , we have the site language .

Now , if you change this , uh this will actually apply to the back end , so you can put any language that you speak .

So if you speak Spanish , Portuguese , Arabic , Hindi , whatever you can adjust the language or your uh back end options .

And below that , we'll go ahead and click on save changes .

The next thing that we need to do is we need to adjust our Perma links on the left side .

You're go and see Perma links .

Now , here we have a few options , but you want to select this as post name .

And the reason why we do this is because when you go to a website , you see like you know your website dot com slash shop , right ?

Not like all this , you know , numbers and this looks really cluttered and ugly .

And the post name option is the best for seo purposes .

So once you select the post name , you'll scroll down and click on save changes right now , let's say , for example , you guys want to log in and log out of your websites , maybe you're at a friend's house and you wanna , you know , mess around with wordpress .

Uh First , what I'll do is I'll log out .

So right here , I'll go ahead and click on , log out .

So right now I'm logged out of my website and there's no way for me to enter it .

So whenever you want to log into your website and make changes , you'll go to your address , bar and type in dash WP dash , admin and press enter from here .

You guys can enter in your login credentials that you guys use to install wordpress .

So I believe mine was admin and it was paddy , right ?

Paty .

We can always take a look here , remember me and loin .

So that's how you guys can log in and log out of your wordpress website .

So you can pretty much work on your website from any location .

All right , good job party people .

So now that you guys have your domain and hosting , now , we can go on to the next step , which is to uh install the page bowler and also the word press team .

So the wordpress team gives like the structure of the website and the page builder kind of designs , everything within the theme .

So let's get started .

All right .

So now that we got the general settings out of the way .

Now let's install a wordpress theme .

So over here under appearance , click on themes .

Now this is gonna give our website life and color , you know , it's gonna actually add some design to it .

So under themes , press add new and then click on popular .

Now , here is a list of a lot of wordpress themes .

You know , there's tons of different wordpress teams to go through .

Uh A lot of these teams are becoming a little , I don't wanna say outdated , but they're just becoming used less and less because the page builders are doing more and more .

In fact , when you see all these demos , this is all done by the actual page builder of the actual uh website .

So right here , you're gonna see Astra .

We're gonna use as R for this video .

You guys can't find Astra , just go to search themes and type in Astra .

And then you'll see as you guys can see , I've already installed it on to my website .

But uh once you guys are here , you'll install it and then you'll click on activate .

All right , cool .

So now that we've installed it , we can go ahead and see what our website looks like .

So at the top right here , let's click on visit sites and you guys will notice how this kind of changed the whole color scheme , right ?

So we got rid of the ugly green and now we have this kind of gray blue style .

So now that we install the wordpress theme , let's add some pages to our website .

So at the top right here , let's go to plus new and click on page .

So as we continue to make our website , I just want to get you guys comfortable with wordpress and teach you guys the general basics before we jump into , you know , creating a portfolio and using the page builder and stuff like that .

So under the a title , I'll just , you know , I'll just write home page and then I'll click on publish and publish .

So this is my home page , right ?

It's pretty simple .

Now , let's go ahead and make another page .

So I'll click on this wordpress logo and then under pages , I'll click on add new .

You guys can make pages either from the top bar or from the back end .

It doesn't really matter .

And then this will just be like the About Us page , right ?

So about us publish and publish , right ?

And then I'll click on the wordpress logo and then I'll create one last page , which is the Contact Us page , right ?

So contact us publish and publish and then we'll click back on the Wordpress logo .

So here's a list of all of our pages .

Now , these two pages we don't need because this comes uh default with wordpress .

So to delete a page , just click on the pages , little check boxes and then move those to the trash and click on apply All right , cool .

Now that we've actually added these pages , we need to create a menu for our page because if you go to visit sites , you're gonna see our pages are there , but it's kind of out of order .

So we need to actually create a menu for our website .

So let's go back over here to our dashboard and then we'll go to appearance and click on menus .

So go ahead and give your menu a name .

Now , this is only for you .

People will not see the name of your menu .

So this is like the main menu of the website .

And this is going to be the primary menu and then I'll click on create a menu .

Next , we have pages , right ?

So let's click on view all and let's select all of these right here and add these to the menu .

So we have our home page , right ?

Or we have two home pages .

Now , this is a custom link and the custom link , you can essentially change to anything .

So you can make this like your Facebook group , right ?

Like Facebook group and then just add in the URL of your Facebook group here , you know .

So a custom link is generally a link to any part of the internet , not necessarily your website , it can be a link to anything , you know , even your social profiles .

But I want to delete this custom link , you know , I don't really need this .

So I'm gonna open this and click on remove .

Now , I want to rearrange my menu like that .

The home first the about and the contact us and then I'll click on save menu .

All right .

Now , let's go ahead and take a look at what we've done .

So here , let's go ahead and click on visit sites and now you guys will see that we have the home page , the About Us page and the contact Us page .

Now , there's one small thing that we need to change as well .

If you guys notice the home page , uh it kind of says like this home right here .

And if we click on our logo , this is the actual home page .

So we need to assign the home page as the first page , user visits when they go to our website .

So to do that , go over here and click on customize .

Now , this is the theme customizer and we'll come back to this a little later in the video , but this can essentially , you know , change your header , it controls your footer , it controls the layout and structure of your website .

But for right now , this just go to homepage settings and a static page .

And I want to select my homepage as our home page and click on publish and that's it .

And then I'll go ahead and close this .

So there we go .

So now you can see our home page is our general home page .

So now that we've actually created pages and a menu .

Now , let's install the page builder to design our websites .

Now , there is a free version of this page builder and there's also a pro version .

And uh I'll go ahead and just show you guys the free version , the layout that I'm going to give you guys , parts of it are in the pro version , but a majority of it is in the free version .

You know , I always look out for my free users guys .

I don't just try to sell people stuff all the time .

So uh over here under plugins , we'll click on add new .

Now , I know a lot of you guys watching this already know it's element , right ?

So under the search plugins just type in element to and this is the page builder that we use to build out our website .

It's by far the most popular uh page builder .

In fact , you guys can see there's just tons and tons of third party integrations for them .

I mean , it just goes down the list .

There's just so many uh integrations for this page builder .

So once you guys see the elementary website builder , click on install now and then we'll click on activate .

All right , cool .

So we have the uh page builder installed .

Now , we can go ahead and build out our website .

So let's go back to pages and click on all pages and then here we have home .

So let's click on edit .

And now at the top , you're going to see this edit with Element or button and this is what we can uh click on in order to build out our website .

So go ahead and click on edit with Element or All right .

So let's first get you guys comfortable with this builder before we jump into templates and all that stuff .

So I'm just gonna give you guys a small crash course .

All right .

So I'm gonna give you guys a quick crash course on this page builder .

Now , after you guys learn a little bit about , I do have another video dedicated on how to make a work press website with element or it's about an hour and a half long .

It goes through the core basics .

But uh I'll go ahead and give you guys a quick rundown and then we'll talk about the template a little bit later .

So on the left side , you're gonna see that we have elements right now .

You guys can drag and drop these elements onto the website .

So for example , uh we have this heading text .

Whoa , whoa , whoa , whoa , whoa , whoa , there we go .

We have this heading text right here .

I'll just go ahead and drag this on to the page .

Now , also you guys can click on this plus icon and we can select columns , right ?

So if you want one column , two columns , three columns or four columns , we can always go ahead and create columns .

And then you can also take your um elements either on the page or on the side right here .

And we can take this with this pencil icon and we can drag and drop these into the columns , right ?

So uh let's go go head back over here , I'll drag in an image , right ?

And then I'll click back on the elements and then they also do have some other elements .

These are pro elements .

So you guys will need to upgrade to the pro version , but you guys don't need to just yet .

Um let's say , for example , you want to add like an icon box or even like a star rating , they have stars , right ?

Or social , you know , social media icons or whatever .

And then on the left side , you're gonna see that we can adjust the elements , right .

So uh here I'll type in like uh how to make a website and then you can insert a link there if you want and the left , I'm sorry , the content tab , this controls the actual content , it controls what it said and it also controls the structure of the actual elements , the style tab will change the style .

So this controls the color , the fonts and it also adds some uh animations and uh drop shadows as well .

So for example , we can change it to black and also change this to uh Poppins , which is my favorite .

Go to fonts , right ?

Poppins , but Poppins is the only good when it's bold , it's really weird , you know , like for example , this is just really weird actually .

That kind of looks cool .

I like that actually .

But like the general font , I don't like , you see that , I just don't like it .

But when Poppins is bold , it just looks really friendly .

You know , in fact , our website over here , this is using Poppins Bold .

So , um yeah , that's just an example .

But uh you guys can go ahead and you know , design every element and then the advanced tab , this controls like the position and also gives you motion effects where you can have like animations and stuff .

Uh Let's see here .

You can see that we have the cool animations but don't , don't get too crazy with those guys .

It's a really quick way to make your website look really ugly .

But um that's how you guys can add in like animations and also stuff like that like uh motion effects .

And then for every element , you guys will see that we have the same options .

So we have the content , the style and then the advanced tab .

So just remember that the content changes the actual elements , the style is the color and like here you have the opacity adding in a board or stuff like that and also a box shadow .

So you can see it now it has that box shadow , but let's just go ahead and adjust this image .

So right here , I'll click on choose image and then we have media library .

So let's say , for example , you guys do want to insert a image onto your website .

You'll click on select files and then you'll go ahead and select the file .

Now , I already have two demo images for you guys .

So uh this is just to get comfortable with and you know , mess around with .

So I'm just going to insert this slider image and then click on insert media .

So there you go .

And you guys can actually uh take this and drag that there .

Like uh welcome to our , you know , welcome to the agency , right ?

Welcome to agency .

And then also , let's say , for example , you wanted to add in a button here that would link them to like a profile page or something like that .

So that's how you guys can uh use these elements to kind of build out your website .

Now , there is one thing I do want to talk about which is padding .

So let's say , for example , you guys added a new row , right ?

So let's just add in one row here and I'll just drag in an element .

So I'll just drag in this , this text heading .

You guys might notice here how this is just too close to these other elements .

There's two options .

You guys can either add padding to this column which is space or you can add padding to this column .

So for example , I'll click on this section here , go to advanced and for the padding , I'm gonna unclick this and I wanna add padding to the bottom .

You see that .

So we're adding space to the bottom of this section or we can go to this section and say , you know what I want to add space to the top , which is just pushing more space from the top .

So that's how you guys can add space in between your rows , right ?

So that's just a general crash course of the elements and element or , and stuff like that .

If you guys do need more practice , I highly recommend to watch my video .

Uh I'll be making an updated version very soon , sometime in uh sometime in 2022 maybe February or March .

But uh the tutorial is still very up to date .

But uh I'm gonna go ahead and delete all this and we're going to remake this page here .

Now , I know that looks a little tough , but it's really simple .

So first let's go ahead and delete everything , you know , let's just start from scratch here .

So now that we're comfortable with the page builder , let's go ahead and add in these uh elements .

So right here we have a text tab and we have a heading tab , right ?

So let's just throw that in there .

We have a one column row , right ?

We have a text editor , right ?

And here I just put in like web design professional right ?

Web design professional .

Now you're gonna see this little section right here , this little squiggly animation .

This is actually from the pro version .

So um when you guys do import this and you have the pro version , we can add that .

But so we can keep going here with the free version .

Now , I want to insert this in the middle , right ?

And I want to change the text to black and then we can add in like our own little uh you know , we can add in , you know , we can add in the , the font or whatever .

Let's just go with that 200 font actually or no 300 .

There we go .

That , that looks better .

Now , I know it's too close to the top , but don't worry , we'll change that in a bit .

I just want to create this structure .

So next , let's add in this section right here , which is the heading section .

So heading section , I can drag it under and then I'll center line that and then here it puts , hey , everyone check out portfolio , you know , you can put in whatever you want .

So , hey , everyone check out , check out is that one word or two words ?

Check out , maybe it's two words uh portfolio , right ?

So check out portfolio and then the same thing , we'll go ahead and adjust the color and also uh the topography as well .

Now , my personal advice guys , when you're building out your uh portfolio website , make sure you guys stick to one font .

You guys can use two .

But the two , the second font is like your secondary fonts and use it very sparingly like your footer and stuff like that .

Don't have it everywhere on the website .

Generally , what websites do is they have um one font but some websites like here , for example , we have pop ins and then we also have this other font .

I believe this is inter font .

I'm not sure .

But uh yeah .

So if you guys do add a second font , just make sure it's very , very sparingly and it's not the main representation of your website , right ?

So we have this section .

Now , next , we have this uh divider module , right ?

So let's throw in a divider module here .

Uh The divider module essentially adds padding in margin .

I'm sorry , adds in padding .

However , you can use it for design purposes .

So you'll see that we have this line right there , but it's too long .

So let's make this a little bit shorter , right ?

And I want to center this .

So there we go .

It's just enough right now under the style section , we can actually add in the weight , so we can make it very fat , right ?

And then you can also increase the gap size .

So here you'll see that it has a gap , we can reduce the size of this gap like that if we choose to do that .

So essentially all I'm doing here is I'm just adding in a style , right ?

And then next we have some more texts .

Now guys , I'm lazy .

You know , there's no reason to drag it in elements because we've already changed the fonts and everything .

So I'm gonna , right click on this element and duplicate it and then I'm gonna drag it below that , right ?

And then here , you know , we can just throw in some dummy text , right ?

So I'll copy and paste .

So dummy text .

This is dummy dummy text , right ?

We're adding a dummy text just because we want to see what this looks like .

Once we add a lot of contents to the page , you know , uh there's no reason for us to kind of uh keep , you know , keep adding and stuff and we we're not sure where it's gonna go .

There it goes paste and then paste and then do it one more time here , paste and then paste .

All right .

So we just added in some dummy content just to give it some structure , right ?

So you can see here how uh this has some structure .

Now , you guys might notice here how this looks a lot thinner , right ?

So in order to do that , we're going to go to the um style tab and then we're gonna go to now let's go back to our demo website .

Now you guys might notice here that this looks a lot thinner , right ?

So we can actually change the length of the elements because I don't want it to stretch across the page , right ?

I want to make it more compact .

So now let's go to the advanced tab and then we'll go to positioning and for the positioning , we can adjust the width here .

Now we can give this a custom width .

So uh we can see here uh we can kind of give it like a smaller width , right ?

I think maybe something like 506 is good , right ?

Something like that or 500 you know , even 500 whatever , you know , you guys get the points and then we'll go back to content .

Now , you guys might notice here how uh this is kind of like on the left side and I want it in the center .

So in order to adjust the elements inside of this column on this little column tab , we're going to select the uh middle and also I want this centered .

There we go .

So this will actually adjust the elements just to make sure that they're all properly aligned .

So this looks pretty good so far , right ?

We do have a lot of text .

So maybe we can just get rid of some text , right ?

Just a little bit more just to kind of make it look just a little bit .

There we go .

That's better .

Now , let's go ahead and adjust the width of this .

So I want this to be bigger and I wanna add a full width image , right ?

Just like this .

So up here , I'll click on the six dots and I'm gonna click on the um full width content .

And for the heights I want this to fit to the screen , right ?

So I want it a lot larger .

Now , we have a lot of white space here .

So this is where we can add in an image .

So under the style tab , we have a few options , we can give this a gradient color .

You know you can add in a gradient color where you can add in two specific colors and then mix and match them together like that .

Or you can add in a video from a youtube video or even add a slide show .

If you want to add in multiple images and have like a slider , you can do that .

And then also we have classic which is just a classic color but uh I don't wanna do that .

I wanna just keep this very basic .

So what I'm gonna do here is click on image right here and then I'll insert this specific image and click on insert media .

So next you can see that we have this image but it's not properly like centered in the middle .

So we can adjust the the positioning of this specific image .

So right here under size , I wanna click on a cover right ?

And then we can adjust the position of this .

So we can have center , center , center left you know , you can , you know , get comfort , you know , get customizable here , but uh top center looks pretty good .

So now you can see this looks a lot nicer , you know , it just looks clean and friendly and inviting .

The next thing we need to do is add in some buttons , right ?

So let's open this back up and under the element tab , we can go ahead and start dragging in buttons right here .

Let's go ahead and there we go and then I will center this and you know , this can be anything .

You know , you can go ahead and insert the text link .

So this is like uh I don't know view portfolio if you want to change it to something like that .

And then you would insert the link of your portfolio page .

So uh we will do that a little bit later and then under the style tab , we can always adjust the colors and stuff .

So you can see over here how I have this black and I have a white text .

So um we have the background type , right ?

Wait , wait , wait , where we go , background type , sorry .

And then uh you can see how that looks like black .

And then for the text , we'll go ahead and click on topography and this is where we can adjust the text and everything .

I'm gonna change it to Roboto Bold , right ?

So you see how the text is changing and then we have the text color .

So this is where we can adjust the text color , but uh I want to keep it as white .

So that's how we can add buttons onto our site .

Now , you guys might notice here how I have two buttons side by side , we can use an intersection for that .

So under the intersection , I can drag this and this is where we can actually , you know , we can actually add in more elements side by side .

So uh here we have one button , right ?

And for the contents , I will put this to the right side and then we can just duplicate this module , right ?

Drag it in this one .

And then for this one , we'll put on the left side and then from there , we can just change stuff , you know , and customize and design it and stuff like that .

But overall , I think you guys understand how it's to design and kind of build the structure of your websites .

Obviously , this doesn't look anything like this because this text is a lot larger and this text is all white .

So in order to change that guys just go to your heading text , you know , change it to whites , make it a lot bigger , right ?

A lot bigger .

All right .

And then we can also add in like a decoration like over line or underline , you know , whatever , you know , whatever you want to add , they do have a lot of options where you can get really customizable .

Now , I did add a small tech shadow to this .

So I believe I added a uh I think it's like a small , a small black , like a very hint of black here for my , for my drop shadow , something like a block here .

Let's go ahead and , and see what we got going on here .

Yeah , just a small blur .

You guys can see there's just a hint blur uh behind that .

So that's a way on how to achieve that look .

You guys can also go over here to topography and then you guys can also add in a drop shadow to this .

So here you'll see that if I scroll down , you'll see that that is without a blur and this is with the blur .

So the blur just kind of gives it a little bit more design emphasis .

And then all you need to do these other elements is just change the color , right ?

So change that to whites and then change this to whites .

And then here you'll go ahead and insert uh you know , you can adjust these buttons and then also you do want to change the divider module to white .

So that's just a small crash course guys on how to use the page builder .

If we take a look at this , it's very similar to our other sites .

Of course , we have to make these buttons a little bigger and there is some small text issues that we can improve upon .

But overall , I think this is kind of like a good crash course on how to use the elements or page builder .

And then of course , if you guys want to add in another section , you would just do the same process .

So click on the cell plus three and then you would add in just more elements and then , you know , you would go on your own very merry way and you guys can keep building the site as usual .

So element here is a very simple builder to use .

You guys can tell , just give it about like a few hours and you guys will be pros at this .

So now that you guys understand how to use the page builder and stuff like that , let's go ahead and talk about how to import a starter template and then I will show you guys how to customize it .

So I'm gonna go over here to uh elementary and click on update .

Now , sadly , guys , we're gonna have to delete this whole website .

I know .

So sad , but uh don't worry about it .

Your new site will look 10 times better .

So the page builder is pretty self explanatory , you know , after about an hour of using it , you guys can kind of get the hang with it .

So now let's go on to step three and let's import our portfolio kit .

Now , once we import this , you guys can design it to fit your liking .

You guys can add in your own images and make it look however you want .

So it's fully customizable .

So you guys ready ?

Let's get started .

Now , the first thing that you guys will need to do is go to my website Darry Wilson dot com .

I will leave a link to my website and the product in the description below this video .

And once you guys are here , you'll click on view layouts .

Now , I do have tons of free layouts coming as a bonus .

But um I'm going to be releasing those in about two weeks from now during Black Friday .

But uh by the time you're watching this video , they will all be available .

Once you guys are here , you'll click on elements or templates .

Now you guys can see uh I'm actually uh I'm , I'm protecting my product , but uh this will be available for free at the time of watching this video .

I just , I don't want to release it before the video because then I don't want people to download it , you know , stuff like that .

So you'll go ahead and download the uh Credo modern branding and Creative Agency elementary kits .

So you'll go ahead and click on this and then this is the layout that I'm gonna be providing you guys all for free so you guys can get a good little overview about it .

It's a great layout for our portfolio website , guys , me and my team , we worked on it for quite some time and it looks amazing .

So once you guys are here , you'll click on add to Cart .

All right .

And then we'll click on view Cart and we're almost done .

You guys can see , I designed my Cart page .

I , I love it .

You know , it looks really clean and friendly .

You know , if you guys do want more tips on , on how to make websites like this , just let me know in the comments below .

But uh I'll click on , proceed to check out and then I'll click on place order .

Now , this is completely free and it does not cost you guys anything at all .

All right .

And you , now you'll see that we have the download section and then here is the layout Credo .

So go ahead and click on download and then you'll see that we imported this zip file .

So elements or kits .

Uh Now we're going to take this and we're going to import it on our website .

So let's go back to our site right here .

Uh The one that we're working on and now let's go to a dashboard .

All right .

And let's go to wordpress .

And now we're gonna go down to mentor and we're gonna go to tools and on the right side , you'll see this import export kits .

Now , I used to actually have people upload the JSON files one by one and that just took too long .

So me and my team , we are using the template kit section , which makes it a lot easier .

So right here you'll see import a template kit , go to click on start import and now you're going to uh drag that zip file .

So here's the zip , I'll just go ahead and drag it here or you can go ahead and upload it uh by clicking on the actual uh select file and selecting the zip file .

Now , here you're gonna see that specific parts of this template guys are exclusive to the pro version .

So the header of the footer , the single posts and the 404 and a lot of the other pages are exclusive to the pro version .

This is out of my control , but we did use the element or pro to design this .

If you guys do decide to purchase Element or pro , I do have a link in the description of this video .

You guys can also go to Darrell Wilson dot com slash element toor .

So does have a pro version and I would highly go with the essential plan .

If you guys are just getting started out , you guys can also go with our $99 plan .

This will actually work on up to three websites .

I of course have the expert plan and I can install this on up to 25 websites and it's definitely worth it because I remember a portfolio is a representation of yourself guys .

You don't want to cut corners and have your site look like crap just over 50 bucks for the year .

I mean , I spend around $10 on coffee a day , so 50 bucks to represent myself for the entire year is definitely worth it .

And I do have other layouts for you guys that are coming very soon .

Uh You guys can see , I have all of these templates already uploaded to my website , but they're all on draft .

So that means I'm not releasing them just yet .

I wanna wait a little bit longer .

But um by the time you're watching this in about a month , all of these will be available for free on my website .

And me and my team has spent thousands of dollars uh creating these templates .

So I'm really excited uh to bring you guys , these templates .

I mean , we do have a niches like interior design , uh handyman , corporate business layout and so on and so forth .

So we do have a lot of amazing designs uh for you guys , but the one that we're using is re and this is hands down our best work yet .

So , uh once you guys actually go ahead and if you guys do decide to purchase Elementary Pro , you guys can go ahead and purchase it and then upload it to your wordpress website .

But uh I'm gonna go ahead and just keep going here and then we'll jump back to elementary a little bit later in the video .

So right here , click on next .

And now we're setting up the kits onto your wordpress websites .

So , just give us like one minute it doesn't take too long .

All right , cool .

So you can see that our site is now alive and now we can go back to , back to Dashboard .

All right .

Hey , guys , I want to walk you through the process of importing the tool kit one more time .

And also what happens if you may get errors , I'll go ahead and walk you guys through this because sometimes you may get errors .

Now , the first thing that I want you guys to do is make sure that you have element or installed .

And if you can also have elements or pro installed elements or pro will make the import process a lot smoother because it'll import all of the uh modules and elements and images perfectly just like the demo .

Now for the theme that I use for my specific demo , I just use the hello element or theme .

You guys can use astra .

In fact , you can use any theme that you want .

Uh However , the the hello element or theme uh it's very plain and it lets the page builder kind of do all of the work .

So right here , you'll see that we have hello element to .

So I'm going to install this specific theme .

Don't worry , you guys can always switch between themes and not lose any of your work because the page builder is doing all the work , so you can switch between themes and you will not lose your website .

Ok ?

I just want to make that very clear .

Now , once you guys do this , you guys will go over here to the element to and then let's just go ahead and just go to the settings really quick just to kind of show you my settings and make sure we're on the same page here .

So for the advanced , you wanna make sure this is set to enable , just in case this will enable uploads on your website .

So I'll go ahead and click on save changes .

All right , once you're done with that , uh you also want to make sure maybe that your uh memory limit is set to 2 56 on your server .

So over here , I'll type in PHP select PHP .

Now , if you guys are using hosting or , or name hero and you guys don't want to go to the C panel , just contact your host and tell them that you want your memory limit to be set to 2 56 with the highest level of PHP .

I'm sorry , the current level of PHP , not the highest but the current .

So if that changes for , you know , in a few months from now , don't worry about it .

So right here , you'll see that my memory limit is set to 2 56 .

OK ?

And I have the max uh file size upload to set also to 1 28 .

Uh The file is not that big , but uh I always have that set to 1 28 regardless .

So once you guys go ahead and go to my website , you guys will go ahead and add this and then you guys will download it , right ?

So you'll download it , you'll get to your checkout page and then you will download this and it'll be a zip folder , right ?

So here you'll see that this is elementary kit dot zip .

All right .

Now , also , I have left this in the description of this video in case you guys do have errors .

Sometimes with wordpress guys , errors just happen , but it's not a big deal .

Usually these things just fix themselves .

You try once or twice and then everything kind of just works out .

I don't know why that is but uh that's just how it really works .

But I hear they'll just give you some solutions of if you have errors when you upload it , uh they'll just go ahead and give you some additional instructions or just things to look out for .

But I do want to show you guys that this all works .

So uh once we have set all those settings , let's go now to the All right .

So once that's done , we'll go down over here to elementary and click on tools .

Now , you guys have seen this is a blank website and I have the same uh server settings as I did as I just showed you guys .

So right here we have import a template kit , just click on start import and I'm just going to select that zip file .

You'll see that I have the uh zip file here .

Wait , wait , there , there it is .

The elements are kits and I'll just go ahead and click on open .

I do also have many more coming as well .

So just be on the lookout uh on my uh website here , I have a lot more tool kits and I do have portfolio kits , uh additional ones coming as well .

So be sure to check those out now here , I'll click on next .

Now .

Sometimes this may cause an error .

But uh on the second try , it usually always works 100% .

So if it does fail on the first try , just give it one more time and you guys should have a smooth import uh process .

All right .

So my kit is now live on my website .

Let's click on back to dashboard analysis .

Take a look at our website .

Now , once you guys import this , uh obviously , all you need to do here is adjust the menu and you will need to adjust the theme builder settings .

But uh the whole website has imported just like the demo .

So if you guys do have issues , um just try it again .

And uh yeah , but I do hope you guys enjoy these tool kits again .

I do have a lot more coming Uh Right now I have around uh 10 more being made .

So if you're watching this from a few weeks from now , those should be available on my website and I do this just to bring value to the audience and you guys will have , you know , just so you guys will have a really nice looking website .

So , uh yeah , that's pretty much how you guys can import the toolkit .

If you guys do have any questions .

Let me know in the comments below .

All right .

And now let's go back and just take a look , make sure everything looks good .

All right .

So this is the new website and the only thing missing here is the images .

Now , the reason why the images are missing is because these are pro elements , but not to worry , we can always just insert images onto our website using the actual page builder .

Now , the first thing that we need to do is adjust the actual content layout of the website .

Now you guys might notice how this is full width and this is not .

So all you need to do here is just make this full width .

So let's go over here and click on customize .

And then for global , I just want to select this container with as a full with stretched and then I'll click on publish .

All right , cool .

So now we've set the websites to a full with , right ?

So next , let's add in the other pages that we imported on our website .

So let's go back over here to Dashboard and then we , we're gonna select the appearance and go to menus .

Now , you'll see a list of all the pages that we have created for you .

So right here in review , all you guys can see a list of all of the pages .

The one that I want to use is home page three .

And uh we can just go ahead and add that to the menu .

You guys can also just go ahead and click on all of the pages that you want and add those to the menu .

So for example , we will add in all of these other pages here just so , you know , we can have them all on the websites .

Here we go , click on add to menu .

Now , I don't want all these men these , these pages to be displayed on the entire menu because that'll make it look really long .

So we can just go ahead and create a dropdown menu , right ?

So I wanna go ahead and just , you know , I want to minimize the menu and make it look a little bit more cleaner .

So here we have home page , I'll put home page three and also home page two .

Now , a lot of these pages guys are using pro elements .

So if you find a part of the website that's blank , uh I'll go ahead and walk you guys through the pro set up in just a bit .

But uh I think this is good enough right here we have the blog , the career and then the contact , right , the contact us .

We have two of them .

But uh we can just get rid of one .

We don't need both .

But , you know , we can just go ahead and leave it like that and click on save menu .

All right , now , I'll take a look at our website .

So now you'll see that we have these other pages , right ?

And here I'll click on home page three and there you go .

So we have home page three and this is your new website .

And all you need to do here guys is just replace the images with your own images .

However , a lot of these are using pro elements .

So if you do see some missing , that's just because we did add some pro elements and you guys can actually just go ahead and insert the images that you want on your site .

So for example , I'll go ahead and click on edit with element or , and then we'll just start adding in some more information on our portfolio website .

All right .

So I'll go ahead and scroll down and on my other demo website over here , you can see , I just threw in some images between these two sections .

So right here I just threw in some images .

So uh let's see there , there they go , right ?

So just some images , right ?

And you guys can just insert them there .

So for example , uh image , you'll just go ahead and click on the choose files .

Now , these images have been uploaded to your website .

So you'll just go ahead and go through the process of , you know , designing it , how you want it to look and you know , make it your style and stuff like that .

But uh here we go , I'll insert these images and then we'll go ahead and just insert uh you know , a few more images or whatever you wanna do here .

Let's just throw in , let's just throw in like two more , you know , two more .

And we , we actually created this structure for you guys to add in this kind of broken kind of masonry look style , you know , to really kind of give you guys some design in the core for your portfolio websites .

So there we go , there we go .

So we have some images and you guys can always adjust these as needed .

So for example , if you want this to be bigger , you can go ahead and do that .

And uh yeah , so you guys can kind of go through these and mess around with these on your own free time .

But that's how you guys can add in the section with the images that are currently missing .

So you guys just kind of go through the website and make sure everything looks good .

Now , there are some elements that are missing like these here are pro elements .

So um that is only for the pro version .

So if you scroll down here , all you need to do maybe just add in an image right here .

You know , you don't even need to add in elements .

So for example , here I'll throw in an image and then we can choose an image here .

Uh I'll throw this guy , you know , there we go .

It , it works , you know , so you guys can see we have created this for both free and pro users .

We did our best to accommodate both audiences and I really do hope you guys enjoy this and we have designed this specifically .

So all you need to do here is just insert the images and you guys are all set and all ready to go .

So uh yeah , I'll go ahead and click on update .

All right .

So now that we have our portfolio website and it's ready to go .

Let's now talk about how to create portfolios .

Now there's a few different ways on how to do this .

You know , you guys can get creative and use the page builder and you guys can design your own portfolio page from scratch the way you want it to look .

Or you guys can actually use the element or uh portfolio widgets which will showcase your portfolios in sort of like a grid manner .

So that's a pro upgrade .

So let me go ahead and walk you through the different ways on how we can showcase your portfolios .

Now , let's talk about how to create portfolios .

Now , there's two ways to create portfolios and I'll explain that uh in this section .

So first we have this portfolio created , right ?

So I'll click on the uh portfolio single and here we have the portfolio .

So this would be the name of your project .

And then these are the images that we're using and below that we've just added in some content here , the location , the address the person and then just some other general information .

So this is all using the free version guys .

So we did our best to kind of , you know , make it suitable for both free and pro users .

But it's a great portfolio .

Now again , this is the single and if you want to edit this , just click on edit with element to and we'll go ahead and design the portfolio .

All right .

So let's say , for example , you have another image here .

You can just go ahead and say , you know what uh I don't want to use this image .

I'm working on another portfolio and I wanna , you know , showcase our beauty projects .

Oh , sorry , wrong one here .

This one here our our beauty projects or whatever , you know , you would go ahead and insert the image and I'll go ahead and replace this one over here .

We don't want this one , right ?

Let's go ahead and change that one to , I don't know the signature , you know , something like that , you know , it looks really clean , really nice .

I do like that .

And then um once you , you know , select the portfolio , you guys can go ahead and change the title here to the portfolio projects project .

And then you can always go ahead and add an element here to help represent this .

So it just looks really clean .

I really do like the layout and the style of this .

So that is the first uh single uh portfolio .

So I'll click on update and then we'll go ahead and take a look at the other uh portfolio styles we've created for you guys .

So over here we have portfolio single .

Now let's go ahead and look at portfolio gallery .

So the portfolio gallery just adds a much larger image .

And here you can see that we have this uh Kens burn effect .

So it kind of really emphasizes the images .

So it's just a different style of how to portray your portfolios .

And then below that , we've added in some more information where you can just go ahead and replace this content with whatever you'd like .

And then over here , we did have a pro element .

So you guys would just need to replace this with another element .

And then we have our footer here at the bottom .

OK ?

And then let's take a look at the uh other one we've created for you guys .

So this page is for the portfolio creative Now , this page is exclusive to the pro version .

And in this next section , I'm going to install the pro version of mentor and then I'll be walking you through how to use the pro elements of the element or page builder .

All right .

So we're back at the elements or website .

Now , there is a link in the description of this video .

It'll take you to this page if you guys do use our link , it really does help us to make these layouts and tutorials for you guys all for free .

So you guys will go ahead and select a plan that works best for you .

I think the essential plan is good for people that are just getting started out .

But you'll go ahead and go through the process of purchasing a um a plan .

So for example , just click on buy now here .

So next , you'll go ahead and you'll go through the process and you know , enter in your billing information and stuff like that .

Now , I already have Element or pro .

So once you guys do purchase it , I will meet you in the customer dashboard .

All right .

So here is my current dashboard and at the top right here , you'll see this download button , just click on download pro or download the plan that you purchased and then you'll see elementary pro being downloaded onto your computer .

Now , let's go ahead and upload it to our portfolio website .

So let's go back over here and I'll go to my dashboard and then we'll go to plugins and add new .

Next we'll click on upload , plug in , choose the file and then I'm going to upload the elements or pro that I just downloaded .

All right .

So there it is Element or 3.51 at the time .

I'm making this video .

That is the version .

They have tons of updates .

So expect that number to change over the few months .

But I'll go ahead and click on open and then I'll click on install now .

All right now , click on activate , plug in .

All right , once you guys upload elements or pro , you guys will then click on connect and activate and this is going to connect to your personal account with your website .

So right here , you'll click on update or I'm sorry , activate .

All right .

So now that we've installed the pro version , now let's go ahead and reimport the uh tool kit .

So the la that we downloaded here , I want you guys to reimport it one more time and this will actually make all the elements propagate that were part of the pro version .

It also gave us that really cool menu that we saw earlier earlier .

So on our other previous website , we have this really nice menu .

This is done with the element or pro version .

So I just wanna make sure that if you guys did purchase it , you guys do get like that nice style to your website .

So let's do that .

Let's go back to our website here and under element to , we'll click on tools and then we'll click on import kits and then under the importing kits , click on start imports and then we'll select the file that we downloaded from my website .

So I'll click on select files .

Here is the kit I downloaded and then I'll click on open .

So now that we have the pro version , you can see here how now we can import the headers , the footers , the archive pages and a lot of the other global widgets .

So uh on the bottom , right , let's click on next .

All right .

So the kit has been imported on our website and now let's click on back to dashboard .

OK ?

Now let's take a quick look at our website and make sure everything looked .

OK ?

All right .

And now you'll see that the website has been imported .

So you'll see that we have all of our images here .

And if we keep scrolling , you'll see that all of the modules are coming in .

So everything looks pretty nice .

Now , there is some small changes that we need to do and I do want to show you some other options .

But before we do that , let's continue with the portfolio before we jump into uh something else like the menu and also the uh header .

So over here we have our uh portfolio creative .

Let's go ahead and click on this .

And now you'll see that we're missing an element so we can go ahead and drag in an element onto our website .

So right here , I'll click on edit with element to .

All right .

Now , all we need to do here is we just need to drag in the uh pro element of the portfolio .

So this is exclusive to the pro .

So just go ahead and take this and drag it on your websites and there you go .

So now you'll see that we have all of these posts and these are all dynamically created for you .

And here you can adjust the columns and the post per page .

Now this is really up to you .

So you guys can approach this route where if you do want the portfolio displayed like this , you can do that .

However , if you feel like you want your um you know , if you want your portfolio displayed in the other way , like the other pages , you guys can use those as well .

So it just really depends on how you want to approach your portfolio websites .

So here is a list of your portfolios now element to will dynamically pull these from your posts .

So let me show you guys how to create a project before we go on to the next section .

So here I click on update and then we'll go ahead and go back to our dashboard , click on the wordpress logo and now let's go over here and we're gonna see posts .

So if I go over here and click on posts , you'll see that we have a list of posts .

Now , these are essentially projects .

So if I click on view right here , uh you will see that we have this specific post and then we have the project itself .

Now , you guys can uh create your own projects and you guys can also fix this as well in the uh customizer settings .

So let's do that really quick .

Before we jump into the actual uh project , I want to fix this section on the right side .

So over here , I'll click on customize .

Now , if you scroll down , we're gonna see sidebar , just click on sidebar and I don't want a sidebar .

So just say no sidebar .

So that'll just get rid of the sidebar on the right side for your projects .

So let's click on publish and let's just go back .

All right .

Now , let's go back to our dashboard .

And here under post , we'll just uh we'll just create a new one .

So just click on add new now , essentially post our project .

So you'll go ahead and give your uh project a name .

So this is the interior design project .

All right .

And on the right side , you're gonna see featured image .

Now , the featured image is the image that represents your project .

So for example , I will select uh see we got a bunch of , we got a bunch of placeholders here .

Obviously , I've been working on this demo for , for quite some time .

Uh I'll just go ahead and select uh this one here , the green tea or whatever , you know , the , that's the green tea project , right ?

And now you'll go ahead and insert all the content you want about your project .

Now , what we can do here , uh We can go ahead and publish this and we can actually use the page builder and design the project like we designed the home page on the other various pages .

So for example , I'll click on publish and publish and now I'll click on edit with element to , all right .

So then I'll go ahead and add any content you want about your specific project .

So for example , if you want to add in a text editor and you want to build this page from scratch , uh You can do that using the actual page builder .

So uh you guys already knew how to use the page builder .

So at this point , I'm not gonna really go through everything and you guys can kind of , you know , just look at it on your own and mess around your own time and you know , create your own uh structure for each project .

But that's essentially how you can kind of create um description for your projects .

So I'll just enter some demo text right here and then you can also drag in more elements .

So if you do want to showcase other uh you know , images or something .

You can go ahead and uh design your project from scratch .

So just like we designed the other pages , you can go ahead and do that on your project page .

Now , you guys can use the elements or page builder or you guys can use the actual uh default Gutenberg builder , which is what we did for various posts .

So here , click on update and now let's go ahead and just view this page really quick and there you go .

So this is your current uh project page and you can talk all about your project right here and include any details that you want .

So uh over here , let's click back on uh portfolio creative .

And now you'll see that we have the interior design project .

So all your projects will automatically be propagated right here , really nice and really convenient .

So I do like that style .

But let me show you guys one other feature , let's say , for example , you guys want to create specific categories for your um you know , for your projects , right ?

Maybe you have different categories for your projects here , we have the filter bar and we can turn this on right here .

Now , you can filter these projects based off of uh categories , tags or uh formats .

So for example , whenever you create a post , you can create specific project categories .

And then when they click on a specific category , it will display the projects based off the category that they are in .

So let me go ahead and show you guys how to do that and that pretty much sums it up for the actual uh portfolio section using elements or pro .

So let's go back over here to our post section .

Click on all posts .

Now , here's a list of all of our uh posts .

Right now .

We just created this interior design project .

So I'll click on interior design project .

And on the right side , we have categories and we can take these categories and say , for example , this is the uh drink category , right ?

We can go ahead and just create specific categories for our projects .

So that's how you guys can , you know add that to your site if you want to go that route with the pro version .

Now that you guys understand how to create projects and how you guys can add those pages to your menu and how you can adjust the menu .

I now want to talk about the theme builder .

Now , the theme builder is included in the pro version and this will help you create a menu and also uh design and customize your header and your footer .

Now , the theme builder is a little not I wanna say advanced , but it does have a small learning curve .

But I just want to show you how you can adjust your off canvas menu and also how you can adjust the header and the footer of your website .

So here we have the uh template section and we'll click on theme builder .

Now , when we created this template for you guys , uh there are various parts of the uh templates that are included .

So for example , we have our header and this is your current header right now , let's say for example , you guys want to design this header .

All you need to do here is go ahead and click on edits and this is how you guys can design and customize the header that we have created for you .

Now keep in mind this header is created by the actual page builder .

So you guys can change the background .

You guys can even drag in more elements and stuff like that onto your current menu .

Now , here we actually have this edit image and I want this to be the off canvas menu .

So right here , I'll click on this little image that we created for you guys and on the left side , you're going to see link and I want to select the pop up to be the off canvas menu .

So we created an off canvas menu and I just want to apply it to that actual button .

So when they click on this , it will actually open up the off canvas menu that we have created for you guys .

So uh I'll go ahead and click on update .

Now , you guys can go ahead and adjust this menu as you wish So for example , if you want to add in a button to your menu , you can do that .

If you want to uh add in your site logo as well , you can do that .

But I'm gonna go ahead and delete this really quick .

It looks really ugly .

This on the left side is an image and you guys can replace this with your own logo .

So all you need to do here is just go ahead and click on this and upload an image that you know , represents your website , you know , or or your portfolio .

I don't really have any other logos to use guys .

So that is the only one that I have .

So you guys will have to just uh use that one for now .

Uh something like I don't know , something like this right here , you know , that's another logo .

Uh It doesn't really look good .

I think we have to change the actual background , you know , I'm not gonna get too much into it guys .

I don't wanna waste your time .

So let me just go ahead and go back to there .

But uh that's how you guys can adjust your menu .

Now , there is also one other thing I do want to mention some users like a sticky menu and also a nonsticky menu .

So , on the demo that we created for you guys , this is a sticky menu , which means when you scroll down the menu follows you .

If you want a sticky menu under the advanced tab under the uh attributes .

I'm sorry .

Is it the responsive , no motion effects ?

Sorry , sorry guys , we have these sticky .

So this means you can place the menu sticky at the top of the page .

So now you'll see that the menu stays with you .

You guys can also add this to the bottom of your site .

So the menu would be at the bottom of the website if you want to go that route .

But uh I'll just apply this as a top sticky and then I'll click on update .

Now , while you're building your website , you guys can open your website in a new tab to make things a little bit easier for you to see what's going on .

All right .

So here is my websites and uh right away , if I scroll down , you'll see that we have this sticky menu .

So it stays with us .

And also on the right side , if I click on this , you will then see that we have this beautiful menu .

Now , the last thing I want to show you guys is how to design this menu , which is called the off canvas menu .

So let's go back to our dashboard here and we'll go back to Theme Builder .

Now , we're gonna scroll down to templates and click on pop-ups .

So here is the off canvas menu and this is the actual menu when people click on that specific icon .

So essentially we turned it into a pop up .

So to edit your off canvas menu right here , just click on edit with element or OK .

And now you'll see that we can now edit this off canvas menu .

And you know , we just chose to just add in some design emphasis .

You know , we added in this , this uh icon list we added in this gallery widget .

So when users click on it , they can scroll through your gallery , just a really sweet , clean way of adding in your menu .

I mean , this is a beautiful menu .

You guys can customize it to your liking .

Um You know , you guys can go through your own time and just drag in elements and get customizable with it .

But um I would leave the structure here .

But if you do want to change something like the color , remember this edit section at the top controls the color and you guys can control the position .

I mean , you can make this a full with pop up if you choose to do that .

But uh I just want to keep it simple here and maybe you want to add in just like a color , right ?

You can add an even a gradient to your background here .

So for example , if you want to add it in this like uh I don't know this blue and this other , you know , pink or whatever , uh we can go ahead and do that as well .

So it just looks really modern really clean and I really do hope you guys enjoy this layout for your portfolio website .

So let's exit to the dashboard .

I don't want to save these changes .

I'm just gonna kind of ignore them .

Now , there is another thing that I do want to mention as well .

So let's say , for example , you guys go ahead and take a look at your portfolio gallery , right ?

Or I'm sorry , your uh portfolio using the actual page builder here .

I'll click on one of these posts which are projects you guys might notice here how we created this to dynamically appear on all of your posts .

And then here is the actual project itself .

Now , we actually use uh elementary here .

And if you guys do want to see how we did this , you can just click on edit with element or , and then you guys can go ahead and customize it .

However , this is considered a single post and we did this with the theme builder .

So if you guys want to take this off or if you want to change it , we can do that with the theme builder .

So right here , I'll go over here to dashboard appearance , I'm sorry , templates and then theme builder , the theme builder essentially controls parts of the website that usually you cannot customize but with element or we can customize every part of this .

So I believe it is the single post and then you'll see pictures , right ?

So this is the 404 page .

So if someone goes to the 404 , this will actually appear uh here .

You can see we have the single post and if you do want to take this out , we can click on edit here and then we can say , you know what they're all , I think that's just too much .

I don't want to add it .

So I want to either delete this whole section or I want to adjust and change it .

So this will appear on every single post .

Now , if you guys do not want this to appear , you guys can just delete this or if you guys uh feel like that's just too much under the single post , we can select the conditions or you can even delete this whole section right here by clicking on trash .

So the theme builder essentially controls parts of the website .

So uh this is the header , right ?

This is the footer .

We have the single post page , which is the postage , but um also we have these other four or four pages and stuff .

Now , I didn't set any instances here .

So let's say , for example , you guys do want to add in the four or four page right here .

Under instances , we need to add some conditions just like for the uh conditions for the post , we do have conditions set .

So first let's change the 404 and then we'll change the post page .

So here the four or four , I'll add a condition .

So first , we need to add a condition here .

So I want the 44 to be displayed right here .

And this is the page that will be displayed when we have the four or four set .

So that's how we can assign a four or four page .

Now , also we have the post page .

So let's just say , for example , you guys don't want this to appear on all of your posts , just click on add a conditions and just delete it .

You know , you don't have to delete the post , right ?

You're just not using it essentially right now , it's just stored , but you're not really using it .

And um yeah , that's how we can apply the theme builder to various other parts of the websites .

So now let's go ahead and take a look at our projects and see if that's changed and if everything working now .

So let's go to visit site and then we'll go to our portfolio and then we'll select a project and now you'll see that that project is gone .

So or the header is gone .

So no matter what post I go to , you'll see that that header is gone and it is no longer being used .

So that's how you guys can use the specific um you know , uh theme builder for your projects .

So guys , I hope you guys enjoyed my video .

If you guys have any questions for me , feel free to let me know in the comments below .

If the kit did not import , there's several ways you guys can fix that .

You guys can just reimport the kits .

Also , if you feel like your site is getting overwhelmed and you have too many pages , you guys can just download this plug-in called WP resets .

And this will reset your entire wordpress website from scratch .

So for example , I'll just go ahead and install this just to give you guys an example .

A lot of beginners .

They tend to uh mess things up and then they , they're like , oh my God , where did I mess it up ?

And they go crazy .

You guys can always just reset your website here and then start over from scratch .

So for example , I'll go ahead and just over here , I'll type in reset in this box reset site and then I'll reset the website .

So right now I'm deleting everything uh that I just did .

You know , that's , that's a lot of work , but uh we can go ahead and just go through the same process again by importing the kit and everything else .

So I do hope you guys enjoyed this video .

If you have any questions for me , let me know in the comments below and enjoy your new portfolio website .

Well , party people , I hope you guys enjoyed this video .

Congratulations on your new portfolio website .

I really do hope you guys enjoy your new layouts .

I do also have other kits on my website that you guys can go ahead and check out .

But uh I hope this video brought a lot of value and it really did help you guys make a really nice looking website .

If you guys have any questions for me , let me know in the comments below and until then I will see all you party people in the next video , guys take care .