Elementor - Create A Wordpress Portfolio Website, With No Code | Jon Wolfgang Miller | Skillshare

Elementor - Create A Wordpress Portfolio Website, With No Code

Jon Wolfgang Miller, Digital Graphic Designer

Elementor - Create A Wordpress Portfolio Website, With No Code

Jon Wolfgang Miller, Digital Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 49m)
    • 1. Introduction

      2:03
    • 2. Class Project

      2:46
    • 3. Technical Backend

      5:45
    • 4. Elementor 101

      6:11
    • 5. Global Settings

      7:55
    • 6. Bonus Lesson - Image Uploading

      4:55
    • 7. Hero - Portfolio 1

      9:03
    • 8. Gallery - Portfolio 1

      11:10
    • 9. Contact - Portfolio 1

      4:59
    • 10. Hero - Portfolio 2

      11:43
    • 11. Gallery - Portfolio 2

      8:46
    • 12. Contact - Portfolio 2

      10:38
    • 13. Mobile and Tablet Design

      12:28
    • 14. Launching your site - Extra Plugins

      9:07
    • 15. Wrap Up

      1:15
  • --
  • 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.

128

Students

--

Projects

About This Class

00b13fbe

We all have massive creative skills and we all want to show them off to the world, in an online portfolio.

That can get tough though, you don’t want to use a pre-built template, cos that loses your own personal style. You want to build it up in Wordpress and start from scratch. That is totally possible if you use the Elementor.com page builder, so in this class I will talk you through all of that. I will show you how to make 2 different and very cool portfolio websites.

At the end of this you will have your online visual business card out in the universe.

Here is what you will learn:

  • Wordpress set-up
  • Elementor.com page builder basics
  • Global Settings
  • Image Uploading
  • How to make 2 different portfolio styles
  • How to make sure they work on mobile and tablet
  • How to make your site fast/appear in google searches

This course is perfect for:

  • Beginners - If you have never used Wordpress and you have never built a website this will talk you through the basics of , and show you how to take those into your own beautiful style
  • Experienced Website designers - For those of you comfortable with Wordpress this will show you the best page builder for being super creative, and it will talk you through what needs to be on show in your won portfolio, so you can impress anyone who visits

When your portfolio is complete and live post it here in the projects section and I’ll give you my full feedback.

You can see both portfolio pages included in the class here:

jonwdesign.com
jonwdesign.com/alt

Credits

Meet Your Teacher

Teacher Profile Image

Jon Wolfgang Miller

Digital Graphic Designer

Teacher

Hello, I'm Jon Wolfgang. I have been a professional designer for 20 years, I focus on digital, print and branding. Also I'm obsessed with the 80s and Super Mario!

I build websites for clients and help them figure out all their SEO. Here I teach Wordpress, and make it simple to use, which is perfect for all us creatives here. Wordpress can get a little confusing and a little complex, but when you understand how it all works you realise that anything is possible. Find that perfect balance between technology and all your creative bursts. 

Can you check out all my latest work on instagram on Dribbble and Behance.  

And I live over here at jonwolfgangdesign.com

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

phone

Transcripts

1. Introduction: We are all creatives here. We all have huge talents and we all need to online portfolios so that we can show the world these incredible skills. Maybe you're a photographer or an illustrator, or a graphic designer, either way your portfolio should come from you. They should show off your personality. If you're using WordPress and you kind of start with a pre-built template. Well, that's going to lose all of your own personal style. If you start with a blank page though, anything you want to happen can happen. We could do all of that using the element or page builder. So let's have a look at that. Well, I'm Jon Wolfgang Miller. I've been a professional designer now for 20 years and I'm here to help you build your online portfolio. Wordpress can get a little bit complex, especially if you've never used it before. In this class, I will teach you how to use the Elementor Page Builder as an online program and no coding knowledge is needed. It all just comes down to creative design fun. This class is perfect for WordPress beginnings. And even if you have a lot of experience, I will show you how to make two different portfolios styles. I will also give a lot of image advice, and I will show you which plugins are needed to make your site run super fast. At the end of all of this, you will have the skills needed to create your own portfolio and give it your own personal style. And therefore, you will have the most awesome looking website in the world. So go make yourself a cup of tea and sit down with me and let's get started. 2. Class Project: I'm going to show you how to build to different websites. He's a bunch of single-page portfolios with single pages, all that is needed to show off your best skills and get new clients that chance of getting in touch with you. Both portfolios are a little different. The first one that starts off with a grid gallery, giving you a chance to show off what your different scales in multiple different sections. The second one, well that's when it gets a little bit more creative. And that gives you the opportunity to show the world who you really are and what you do best. This class will teach you a number of different skills. We'll start with a few technical parks, and now I will start teaching you what you need to know before you start using the element tool page builder. It's very easy to use program, but I'll just show you the backend. Show you where everything is located, what you need to do to start moving things around and get them looking that little bit cooler. And then we will start to build the first portfolio. And I've split that up into three different lessons. In the first lesson, we'll take a look at the hero. That's the first thing that anybody sees when they visit your website. So it needs to look as cool as possible. And then we'll look at the gallery setup here in element, or I'll teach you the whole way that that widget works. And after all of that, we'll look at the contact button that goes at the end of the website so that anybody who visits the website can get in touch with you. When you have had some time to play around with portfolio warm, you will have a much better understanding of this whole program. And from that, we can start building portfolio to this one is going to use a few more unique elements, parts you can fully develop to bring in your own personality and style. For the whole class, I recommend watching each lesson men taken sometime after to work on each part yourself. Running at this pace will help you fully understand this awesome program. Late the understanding of each next lesson, much easier when all lessons have been watched. And once you have created both portfolios, will, that's when you can start getting super creative. You can take what you've learned here and development or to add in your own style. Or you can start again with another blank page and get even more super creative now that you fully understand the program, there's nothing stopping you from doing that. When it's all done, make sure you upload it into the project section on skill share mine. We'll take a look and give you my full and feedback. 3. Technical Backend: They sort of WordPress can gets a little confusing. So use follow me step by step and it will all seem a lot easier. We will look at setting up WordPress, setting up elemental, and also setting up your hosting company that's accompany the stores all of the date of your website. And then we'll take a look at your domain name, your URL. And when we are through with all of this, we can start playing around with the program. We will start looking at the element to a page builder. We need to set this one up first. You may already have it installed, and you may have already set up Wordpress. If you have, you can't move to the next lesson, but maybe just stick around to make sure you've done everything technically correct. Start off by pressing the Get Started button. On the next page, they will ask a couple of very simple questions. So let's answer those. First of all, I am creating a site for, for myself. If I had to choose one, I'd say I'm a yes web designer. And in the last question, just choose the one that best represents yourself. I'm going to choose the first option here. Then it will ask if you have your WordPress website setup. Some of you may have this. So click yes, but we don't. So I'm going to choose no. Then it will ask you to choose a hosting provider. That's the company that stores all of your website data. I normally use blue host for this, but you have a few options here. And these three companies are all three of the best within the industry. So any of them would be great. If you are just starting up though, you may only have a small budget. So maybe choose one that has a free trial. As you can see on the left here, Floyd whale has 30 days for free. So let's just choose that one. Means that we don't have to handle the any money until we've completed the whole website. And that will take you through to a little sales page. You don't need to read any of this. Just click, spin up a site and then fill in this page, choose your username. I'm just gonna go with John Wolfgang design. And then just set up your own password and email address. And on the next page, choose the name of your site. And then down here, this is where you choose the temporary domain. So this is choosing your domain name. And overall I will have my name as the full URL for this. But this will just set up a basic warm we're falling Whale site.com at the end of your name. We will look at changing that into the proper domain name later on. Then select your datacenter. I am based in Australia. And then choose the login details you want to use when you login to your own WordPress Dashboard. So that would just be your own username and your own password. Very simple. And then create your demo site. And then you'll get little spinning where what they are assessing up all of the technical backend for you. Then you will come through to this admin page. The first place to look is over on the right, Harris has domains. Now if you're happy just to carry on with this one is a test website. Just stick around with the domain name that they have set up for you. If you do want to add another one, now, click the add button. And in here I will write in the domain name that I own. And then I will choose to make that prime rate because I want this to be the domain name of my portfolio. I own this domain name, but it is hosted by another company. I use a company called Go Daddy For this. You then need to tell GoDaddy to point at this website we're about to set up. That can get a little bit complex. But if you just click down here on DNS help, all the details here will talk you through it. And when you have your domain name set up, make sure you also press this button on the right to make sure your site is secure. And when that is done, click up here on WP admin. Use the login details that you entered earlier. Now you come through to your WordPress dashboard. They seize your own personal back-end of your entire website. This is where you will build every single page where you will edit everything away. You'll install plugins to make your site run that little bit faster. As you'll see up here, elemental Page Builder is already installed. They did all the hard work for you. What you have installed here is the basic free version. Most of what I will make in these portfolios can be done in the free version. At some points though, you may need to upgrade to the pro version. Just watch all of these lessons and figure out what you do and what you don't need in your portfolio, and then you can make that decision. But for now, let's just start with a basic version and let's start getting creative hub that was easy enough to follow, an easy enough to set up. You should now have all of these parts ready to go. You will have Wordpress installed. You will have the element two page builder installed. You would have chosen your host and you will now have an account setup with that. And you would have chosen your domain name. If all of that is sorted. Let's move on to the next lesson. Next, we will take a look at elemental, see how awesome it is. 4. Elementor 101: Less than two, we can have a good look at Element tool and I will run through the layout of the whole program. So drag and drop and the menu system and what is very similar to Photoshop or Illustrator. So you should feel very comfortable with all of this. I will show you how all parts of a page I'll put together. We will look at sections, columns, and widgets when you know what do they stop having to play Maryland yourself? So now we're going to have a little play around with the element TO page builder. I'll talk through a lot of the settings for you and I highly recommend just having a good go with it before you even start on your own website, just save you a lot more comfortable with the program. So one way of using WordPress is to start off with a pre-built theme as a template. Nearly problem with that is image. Your website will look too much like other peoples. We want to start off with a blank theme, and that is what we have here. So you will see that we are using an elemental thing called hello. And in the example you can see some texts and images. But what we will start off with is a blank page. Hover up to pages and add you. That brings you to this page. And what we want to do in here is add the title of our page because this is my portfolio. I'm just going to use my name. And before we go through to element or we just need to set up one more thing. On the right-hand side you can see Page Attributes. And below that template in here, choose elemental canvas. That means we will start with a completely blank page that we can play around with as much as we like. Want to choose that head up to edit with elemental and press that. Elemental is an excellent program, so drag-and-drop, so it's so easy to use. You can see on the right-hand side it's blank at the moment. This is where our page will appear. And on the left-hand side is a list of elements, all the widgets that we're going to drop in to play around with. On the right-hand side here, you have two options. You click on the folder. This is where you can start dropping in some pre-built templates. Maybe have a go with that to get a better understanding of the program. But as we are building our own website from blank, we're going to use the red plus on the left-hand side. If I click on this, I can add a new section. It will ask you to select your structure. This is deciding how many columns you want in this section that you have just uploaded. I'm just gonna go for a simple too. At the top here you will see this blue box. This whole thing is the section. And up here we can add another, we can edit the section, or we can delete this action. Either side you will see a gray box. These are the columns. If we want to edit these, we hover over the gray logo and we can edit them in there. To play around further. I will go over here to my widgets icon. And I would drop in a couple of different widgets. So I can have a little play around. On the left-hand side are dropping an image. When you see this blue line appear, you can drop it there. That means you have selected the correct column. On the right-hand side, I will drop in a heading. And below that I will drop in a button. To edit the image. I will hover over until I see this blue pen all icon on the right. If I click on that, I can edit that widget on the left-hand side. Over here, I can play around with the size, the alignment. And also I can pick a new image by clicking on here. I'll pick a random one of my uploads. On the right-hand side. If I want to edit the text, again, click on the blue pen and I can write a new message in here. And then play around with alignment. Same with the button, blue icon. And you link. Play around with alignment. Change the size. Then if I want to change the appearance of this, I will click up here on the Style button. Here, I have the option to play around with colors, typography. Typography. I can play around with the phone used. All the options of that for you. It's good at this stage to have a real play around with this drop in as many of these widgets as you can see, what each of them do, see how you move elements around. That'll give you a better understanding before you get started on your own portfolio. When you're done here, you can hover over the section and if you click the X, that will disappear, it will delete that section. Another option is to go to the Clock icon down at the bottom and open up the history. This will give you the history of all the actions you are performed so far. Do you want to go back a step or two? This is where you can do that. I want to go back to the very start. So I'll scroll down to the bottom. Editing started, click that. And here I am back to a blank page. Now I can get started again and start getting very creative. Elemental can do many different things. And it's important to get a firm understanding of this Before you get started on your own website, you should now know a lot more about page setup and how to make sure that you start with a blank template. The difference between sections, columns and widgets. And a good understanding of each menu or the icon on the left-hand side. Take some time to have a good play around with elemental. See what you can do, what you can't do, and have a go all of that before you move on to the next lesson. 5. Global Settings: In lesson three, we will start looking at all the global settings with inside element or global settings are important for all websites and anything creative you may be making. And here we will start looking at all the default fonts and colors. This will ensure consistency across your entire portfolio. I will show you how each part works, gives you a few examples. So we're back in Element tool, and before we start work on our first page, what we're gonna do is have a look at the global settings of the entire site. In global settings, we can choose default fonts and default colors, and that means they will be used across the entire website. So in your menu on the left, click on your hamburger. And hey, you will see global style. And below that, the first thing, default colors. Let's take a look at that one. So up here we have four different colors that we can change across the entire website. We have the primary color, the secondary color, the main text color and accent color mixing color is for when we have links in the text. If you don't already have a primary color that you know you want to use. See if you can find something that best represents you and your style because this is your own personal website. Remember, my personal branding has a very sort of retro, 8-bit bright sort of style. So my primary color is this hot pink. It's FF 00 E F. You can see that when it pops up, I just click on this little plus here and this will add it to my color tool. By secondary colour, it is six e b, E4. At that one into the text color is a sort of dark purple. I want to go for a black. I have chosen black, which is almost full black, but not quite. The code for that is 121212. And then for my final box that accent color, I'm just going to add in the hot pink again. That will look cool if that is the color used for links in the website. And then click Apply. And then I'll go back over to the hamburger menu and choose default fonts. In here we will choose the default fonts. There'll be used across the entire website for primary headlines, secondary headlines, body tags, and again the accent text. So let's just see which font that we want to use for all of these. To best represent my style, I want to use a san serif font across the entire website. There's already a sans serif font in here that's being used. I like that one, but I have another choice for this. I'm going to choose open sentence. And I will choose that, hey, if for the primary headline, the secondary headline and all the rest. The other thing you can see we're using here is the weight of each of these. Obviously the primary headline is heavier than the secondary headline. And in the body text, we have a main weight, and then we have an accent text. Wait. So that when we have a link in the text is going to be slightly bolder than the main text to make it stand out that little bit more. And so once I have chosen each one of these, simply go up to the top and click apply. And so one more section that we should look at, again in the hamburger menu is Themes style. In here we have a lot more default settings that will be applied across your entire website. Again, if you have a 100 pages, these are going to be relevant to every single page. To the first one had its background type. It will allow me to choose a color or even image for the background. I definitely don't want to image and the color at the moment. Well, it's just a blank color at the moment. But let's say I wanted the entire background color across my entire site to be my hot pink. That's where I can change it. Click on hair like that one end hashtag, FF, 0, E, F, and they are, you can just see that it just changes to the hot pink. And that's very nice. But to be honest, I don't want that. I'm just gonna take it back to nothing. So just click on the white up here. The next thing I want to look at here is topography. And you can see options here for the body text, that's the main texts, the link that's on accent, and then H1, H2, H3, et cetera, et cetera. These are all set to the default font that we have chosen so far, which is open sentence. But it's worth just having a little play around with them. They're all different sizes. Again, set to default settings. Maybe there's warm that you want to change just to give you a second option. Once I have done is set up a temporary textbox and filled it with my name seven times and chosen the paragraph style, that's the body text heading one, heading two, heading three, et cetera, et cetera. I've also added in a link so I can see how that color looks. And this is where we can edit all of these things. Maybe one of these, I want to use a slightly different form. There is a condensed version of opens and lets just try one of those. So I'm going to use this as Heading three. So we're gonna topography, choose hair, Open Sans, condensed. And also there are some other options here, can play around with the size of this. We don't really want it bigger than the ones above, so I'll just apples that, that I can play around with the weight and the style. So let's just say, I want this one to be a very bold version as good for the biggest one there, 900, that's very bold. Then the other options here in transform, maybe all does uppercase. Let's just see what that looks like. Hey, I really like that. The other things I can play around with here, the letter spacing, just give them all so spaced out version. I quite like this actually. I'm going to leave that in and I just give me another option if I want to play around with, I'm still using the same font, still a separate phone, but I'm using a much bolder condensed version of it. It's another we've all done with that. Let's just scroll up to the top. Click the X. Again, I'll get the option to save these changes. Yes, I'm gonna save this because I'm happy with everything that I've done. And then I'll bring my main menu back. And then up here, what we've already played around with that this isn't anything that's going to exist on my page. So let's just delete that. And up here you can see the options here we can add a new one. We can play around with the section or quite simply delete the section. So there we go. That's everything setup as I like it. Once I start playing around with the website, I may want to make some changes and know more about that once I can see elements together. But for now I'm happy with everything. So let's get started on building our first page. You now have a much better understanding of global settings within a website of ydA, all important, a full list of things to look at here. Default colors, including your own primary and secondary swatches, will default fonts. How H1, H2, and all the other headings settings work, and what you can do for them. So get this all set up right now and remember, any changes that you want to make later on will be made across your entire website. All of this sorted now, and then move on to the next lesson where we'll start working on your first page. 6. Bonus Lesson - Image Uploading: And so in this lesson for you here about images, show you already have a folder full of images that you want to upload to your portfolio. However, consistency is very important here. So I will show you ways of ensuring the ratios are correct using Photoshop. I will then show you how to get your file size as small as possible. The smaller the file size, the faster your website will run. And that is important to everyone who will be visiting. So I'm using Photoshop and Photoshop is perfect for resizing images. But how do I know the exact size that I want them to be? We want to know an ideal pixel size for each of our images. But what's the maximum size they should be if we take a look in element or they can give us a good idea. We click on the hamburger menu and we go to global settings. We will see what the content width of our website is. Here. No width has been set. So we are using the default width, which is one hundred, one hundred and forty pixels. So if you're gonna save an image in Photoshop, make sure the width is never bigger than that. Now we want the file sizes to be as small as possible because that will make our site run faster. And a consistent image size ratio throughout the site is also very important. That will allow for more alignment. And the more that our website lines up, the cleaner it looks. When organizing my images have a selection of horizontal images, vertical images, and square images. And I always ensure they are the same ratio. Horizontal, I will go for a three by two ratio. And for vertical or two by three ratio. This is very easy to manage in Photoshop. First of all, go on up to your crop tool. And then in the ratio section, we choose three by two. I'll move this into position so it lines up. Perfect. So now I have the correct ratio for my horizontal images. And I know that I want the pixel width to be no more than 1140. So let's export it at that size. We'll go to File, Export as. And in the pop up, just make sure it's chosen to JPEG unless you need something with no background, if we want that, we would choose PNG. But we're gonna go with JPEG for this one, we can already see that the width is more than one hundred, ten hundred, one hundred and forty. So let's change it to that. And by changing the width, that will automatically change the height. This image is now the perfect width and height for our website. The next thing we want to do is ensure that the image is saved at a very small file size. If you look over on the left-hand side here, you can see the file size is 658 kilobytes. That is too big for a website. Ideally, what we want for website images is nothing bigger than a 100 kilobytes. So let's make it smaller. That's very easy to do. We go over here to the quality section. So I'm a 100% at the moment, that's too high than it needs to be for a website. So let's knock that down. I've got it down to 21%. That's quite small. And the file size is smaller than it needs to be. So let's go up a little bit. I've changed it to 45%, and that's now coming in at 91 kilobytes. That's absolutely fine. Let's save that one. And make sure the filename is something relevant to the image as this will help for Google searches in the future. Uploading all of the images to WordPress is very simple. Go to the Media tab, go to add new, and then select files. This will upload all of your images in one go. And now we can start using these anywhere across our website. We're all creatives and we all have these folders full of images that we want to use on our portfolio. We now understand how important consistency and file sizes though. So it's very important that you take a look at image ratios and keeping those consistent throughout the site. Final sizes, make sure you keep them as small as possible. And filenames keep them very informative to how with all Google searches for your work. So make sure you follow all of these rules and get all of your images uploaded. And then we can move on to the next lesson where we can start building that website. 7. Hero - Portfolio 1: We now know enough about element or that we can start getting creative. In this lesson, we will cover the hero section. That's the main part at the top of your website. And every visitor will see first, therefore, it needs to look awesome and show everyone who you are and what you do. When you have watched this lesson. Then you can go ahead and make your own portfolio section and make that look perfect for yourself. We're gonna get started on the gallery style portfolio. We will start by making the hero, the opening section of our website. So hover over the red plus and select your structure, which is going to go for a single column. Here. Above you can see the section has appeared. And if we hover over these dots, that will give us the option to edit section. On the left hand, the first one I'm going to choose a style. That's because there's a background option in here. That this first section, I want to give it my primary color background. So the first thing I do is hover over classic here and click that. That's giving me the option of putting in a color or an image. So I'm going to choose color. And from these colors here, I'm going to choose my primary color. Now, I will go back to the section. And in this little plus you can see under here and go to add another element. So I will go back to my widgets icon. And in here, I'm going to drop an image, hover over until you can see the blue line, of course, and drop it in. And you can see a giant gray boxes appeared under choose an image that I want to use him here. I want to choose this first one is a PNG version of my logo, which is fully white with no background. And I'll insert media. So this Logo sits very well on top of my highlight color. The issue is it's too big and the space around it is all wrong. So let's go ahead and fix that. So what we need to do here is play around with the margins of the column. So let's click on the column and then go into advanced. At the top you will see the margin auction. Let's type a 100 pixels into that. If you want different sizes inside that, just click on this icon over here. This is saying link valleys together. We turn that off. This means I can type any number I want into there. So let's just say on the top and the bottom I want a 100 pixels. On the right and the left, I want 0. That didn't change the position of the logo tool, but it means there is no margin around that part now. And the issue that I still have here is that the logo is too big, so let's hover over here again and click on the blue pen icon. This brings up this window on the left. And again, what we wanna do is go into style. I'm going to play around with the size of this. Do you have two options here? And at the moment they're set to a default setting of a 100%. So hover over the dot here and go up and down and get it to the size that you want. I'm gonna say about 25% should be fine. There are other options here. You can choose the pixel size or percentage earlier with percentage. Now I'm going to add a few more elements below the logo. Lets start off with some text. I would choose a heading and I will drop that in below the logo. We can't see the text because it has come in the same color as the background. So to change that, I will go to style text color, and then I will choose my black. Now, I will go back to content. And up here is where I can edit the text. This is your opportunity to write in some keywords. Anything important, they explains who you are and what your creative skills are. I am a graphic designer, so I'm going to choose digital print branding. I feel this is too large at the moment, and I want to change the HTML tag down here. It's currently H2. I'm going to choose the smallest one, H6, much better. I would also like it to be center aligned, perfect. And I want to make a few more changes to the typography. So I will go to style click typography. I'm happy with the Fontan, the weight. But in trends form, I'm gonna change this to uppercase. Excellent. There's one more change I would like to make, and that is with letter spacing. So I will drag this one out very wide. Yes, I really like that. I like the way it's rate of 3D spaced out. I think that draws your eye towards it. And now just one more change I want to make. It needs a little bit of space above it to sit away from the logo. And as I will be dropping in something below, I need a little bit of space below it. So I will go up to Advanced and inputting. I will unlink the values. At the top, I will add in ten pixels and at the bottom, 20 pixels. Perfect. What I would like to add below this awesome social media buttons. So I will go back to my widgets. And I can't see the social media one here yet, so let's just type it into the search box. There we are. I'm going to drop that in below the text. Three of already popped up for me. I do have three social media channels, but they're not Facebook, Twitter, and YouTube. So I'm going to change them. Let's click on the Facebook one. And as you can see, there is an icon here. Let's change that to the icon for the correct social media channel. I'll type Instagram into here. There we go. And insert that. And below this, that's where you add the link to your channel. Twitter. I'm gonna make that be hands. And utube. Let's make that dribble. So those are the three that are in there. But they didn't quite look right. Let's make some edits to them. First up shape. And the moment is surrounded box. But I'd prefer if that was a circle. Although they're a little bit big and a little bit too close to each other. So let's go to style. And we can play around with that hair first, up size. Let's drop that down a bit to see maybe 20. That would be good. Too close to each other sales. So let's play around with the spacing here. Drag it out a bit. Yeah, there we go. I think that's good. So size-wise and spacing wise, these are perfect, but there is one problem still, that dribble icon doesn't really show up because it's using the dribble color on top of our hot pink. So let's go back to content. And let's edit that one. So again, I'll click on drivel. As you can see here, color is already set to the official color. Let's change that. I'm going to go custom. Then I can choose the primary color of the circle and the secondary color of the icon. So let's go primary colors as white. Secondary colour as make that our hot pink. See how that looks. Love it, that looks cool. Now we have a completed hero section. So it was time to move on to the next part. We will have learned a lot there. Lock and go into your hero section. And it's important to keep it clean and simple. You now have a good understanding of whereas a drop a logo and the right size to use for that text use in your hero. Social Media buttons and how they work. And the spacing around everything, and the importance of breathing space across your entire website. You'll choice from here, either keep watching to the end of the first portfolio, will start making your own hero section before we move on to the next lesson, which is the gallery. 8. Gallery - Portfolio 1: In this lesson, we will continue with the first portfolio. And below the hero section, we will start adding in your first gallery. The gallery version we will use here can either be a single page or multiple different sections. Once you watch it, you will know which best suits you and your style. I will then show you the full lightbox settings matches the window that will pop up when any images clicks on. I think the hero section looks awesome. So let's start building our gallery. In the widgets menu, let's typing gallery. As you can see, there are a few different options here. The two on the left, basic gallery and gallery. These are the two that come from element or basic Gallery is the one that you will get if you're using the basic version. And the next one gallery is if you are using the Pro version, the Pro version is much more suitable to what we need to do here. So I'm going to drag that one in. The main reason we have chosen this gallery option, because at the top here you can see you have two different type options, either single or multiple. I'm going to choose multiple. This is because I want to have three different galleries that show off all of my work. One for digital footprint and one for branding. So let's set it up as three. And the moment we are born here, that's called new gallery. Let's just add two more. So they all still cool. New gallery. They all need a little bit to work to set up. Let's click on the first one and change that to digital. Print and branding. I'm going to display six images inside each one to show off different work I've done with inside each category. To select these, let's click on the plus here. So I'm going to pick my favorite digital images right now. If I use the command button, I can select more than one thing at once. Then I will click Create New Gallery. We now have a little button for digital. The display of this one now isn't quite right yet. Let's play around with that on the left-hand side. So below each gallery, we have a few options. Order by default or random, or keep it at default. Lazy load is an option you may want to choose if you have a very, very busy website, Guido need that. If quite a simple page. Layout, grid, justified or masonry, I'm going to choose grid. Columns or four is no good. Let's change that to three. That looks nice too, could work here as well. Let's see what that looks like. No, I think I prefer three spacing. Well, that's the gap in-between each one at the moment it's ten. Let's leave it at that. Link will keep that on media file. That's for the lightbox version, which I'll show you later on. Aspect ratio set to three by two at the moment, which is what I uploaded them as. Let's just play around with that. One by one. That'll be square. And that doesn't really work. But four by three, let's try that. That's a good size. I think. As you can see from these images though, they're not high-quality. They're all a little bit pixelated. And that's because the image size isn't set high enough. In this drop down here. Let's get that bigger. Let's try medium, large. And yes, they all look high-quality now. And now I will go into the print and branding galleries and add the images to them as well. I have added all new images to each individual gallery, and you can see that all three, and now what pairing above all of the settings we have set below, that's applies to all three galleries. Why would like to do is change the design of this one slightly. Firstly, I would like the background to be our primary color. So I'm going to hover over the section and edit that. That looks very cool. And if I click on the little arrow here, I can see the page live and click it back to carry on editing. The one thing I'm not happy with here is the border that is around this gallery. I want it to display in the full width of the page. So we can do that also when I'm editing the section, I click on layout. And here you can see content width is currently set to box. I'm gonna change that to full width. There we go. There is still a little border around the edges of this though. And that is because the gallery has some spacing around the side of that. So let's go to this gallery. Click on the gray box, go into advanced. And here you can see the padding. It has an automatic default padding of 20 pixels around everything. I want that to be 0. So I'm just going to type 0 in here. And now it's all fitting. It does still have spaces in between each image though, and I'm gonna take that out in the gallery. So again, let's go hover over our blue icon. And then let's have a look at the spacing ten pixels in between each one. Let's change that to 0. And if I click on the arrow, yes, this looks perfect. Now, I would like to change the text that appears in the nav bar above the images though. And also there's another option, therefore, all I don't want that there because when I click on that, that brings up every single image you mourn go and that's too busy for me. So to get rid of this, I'm gonna go to Filter bar and turn off the old filter. Now you can see it has disappeared. I would also like to change the text that appears here though. So I'm gonna click on style. And again, I will go to Filter bar and I would edit to the topography within haha. I will choose Open Sans condensed them. I will make this as bold as possible. I will make it to uppercase. And also I will make it white. As you can see, one of them remains black. That's because we have a few options in here. We have normal hover and active. If I hover over them, they changed to black. And if I click on them, that warm remains black. That just means we all know which section we're in at any given point. When I hover over each image, you can see a dog overlay. And when I click on it, the image pops up into a lightbox that displays all of the images in a scrolling version. If I would like to change the look of this light box, I can do that. Over here on the left. I go to the hamburger and I go to global settings again, as you can see, there's a lightbox option right there. Hey, I have multiple different options about what you can see in the light box when it pops up. If I hover over it, you can see numbers over here. This is the counter. I can turn that on or off. And over here we have other options. We have a full screen option, a zoom option, and a shell option. Click on each of these and you will see how they work. I am choosing to keep them all running for the moment. Over here on the left, one main thing I want to change is the background color. At the moment is just a dark black. I want to use one of my secondary colors in here. That, that's perfect. And then when I hover over here, we can see all of these icons are white. That looks cool to. The one main thing I do need to change though, is down here, this is just giving me the file name of the image. And we can edit all of that over here on the left as well. As you can see, there are two displays that will appear for each image. At the top we have the title and below that we have the description. For the first one, I'm going to choose alt and I'll show you why in a minute. And for the second one, I'll keep that as description. And let's go back into the gallery. And if I click on this, I can edit it. Gonna go to content again. And what I wanna do in here is sets up all of the words that appear when you open the light box. I'll give you an example here in digital. Let me click on the image is selected and choose them one by one. On the right-hand side here you can see a few different options for each image. The first one is alt text. I've chosen this one as the title because this is also the texts that Google searches for when you open up Google images. So in here I'm going to enter the title of this image. And then in the description section, I'm going to write a little bit about that, what I did for this job. And then I will do this for each image here. And when done, I will click Insert gallery. Now you can see when I click on this image, that information directly below the image that is perfect. Multiple galleries really worked for me. That was a good way of splitting up or different parts of work that I've done. But you'll know if that works best for you or not. And now you have a very good understanding of structure and how to keep that all looking very neat and clean. The image naming and how you can use that to tell visitors and little bit more about what you've done with each piece of work. And the light box, how to get that looking? Awesome, I'm really, really suit your style. Hopefully it will play around with the gallery. Haha, See what you wanted to do was different to what I've done here and make it work for yourself. When you've done all that, we can move on to the next lesson, which is wrapping up your first portfolio. 9. Contact - Portfolio 1: We'll first portfolio is now almost complete and it's still needs one more element. And either contact box at the bottom. This is important. It means any new client who visits your website can get Street in touch with you after you have impressed them. And this will be a very simple way of setting this up and it can all be done in a couple of minutes. So this portfolio website is almost complete. I'm going to add one more element. At the bottom of the page here. I want to add some contact details. So let's add a new section with one column. And I'm going to change the background here to black. Now I want to add a button here. This is going to be a contact button. So when I go back to my widgets, I can see the button option that I'm going to drag that in. This has come up with a very basic version of a button. We're going to edit that one right now. There are a lot of editing options for this over here on the left-hand side. But first of all, I want to play around with the spacing on this one is too close to the edges, so that's opened up the column. Go to Advanced and play around with the margins here I'm going to add another 100 pixels. Fall around. That's perfect above and below. But I don't want now on the right and left. So let's switch this one off. Set back to 0. Now I'm going to go back in and edits the button itself. Lots of options here, but let's just play around with the basic ones. First of all, text, not to say contact John. And then for the link down here, I need that to be a male. Two options that people can e-mail me. So I write in mail to and my email address. The alignment of this, we definitely want it to be in the centre size. Let's have a little look. I think it's quite big to be honest. I think extra small will be fine. That is fine. Icon and this is something I can add to the button unless I had one of those. And so I open up this page, loads of icons in here. I want an envelope porn. He composition before or after. I think before is good. Spacing as move it out late or bit maps. Good. Now I just need to change the style of this. First up, let's go topography. And let's make this condensed size-wise. Bring that up a little bit too big. Let's good. Most are going to make it uppercase. And Boda. Now I just want to change the background color of this button. Let's pick our primary color here. Yes, that's perfect. And the last thing I wanna do, it just play around with the border-radius. Maybe I'll put that at ten pixels. As you can see that as just bought in the edges a little bit, that looks a lot cooler now. So let's just click on the arrow here. And we can now see the live version. This looks absolutely perfect. I love the hover options over here. And when I click on each one, Look at that age, just reloads. And if I click on a single image, we can see that pop up in a light box. So now let's make this page live. Let's click here and then choose Publish. And then to get back to the dashboard, kinda the hamburger, an exit to Dashboard. And then the WordPress logo top-left is just a small element. As you can see, the contact box is a very important part of every single website. So throughout all of the lessons here, you are fully learned how to make an awesome looking hero section and make that stand out to tell visitors who you are within a millisecond. How to build a gallery, and how this is the perfect chance for you to show the world who you are and why a contact button needs to be there, and how important it is to every single website. So if you are built each element, as we've gone through all of this, you now have your first portfolio. If not, lets go back a few steps and let's start building right now. When that's all completes, we can move on to the next lesson, which is looking at Portfolio Number two. 10. Hero - Portfolio 2: Now we will move onto portfolio to this whole portfolio will be a little bit more complex, but all of the elements of skills you have learned so far, we'll make that nice and simple. Again, we will start with the hero section, and you will see what I've done here. I've used a much more unique style that really shows off who I am and what I'm about. And you can take that and you can develop that to show off everything about you were about to get started on the alternative version of our portfolio. This one will get a little bit more creative and therefore it needs a little bit more technical attention. But we'll come on to that later. Here we are back in the dashboard. And first of all, we're gonna take a look at all pages. What you can see here is the pages that have already been created. This privacy policy WAN is one that automatically goes in from Blue Host and element or you don't need to worry about that one so much right now. What we have here already though, this is the first page that I've worked on. Now if you are creating more than one page, you can edit them in here. So I'm just gonna do that. I'm going to hover over this quick edit. And because I'm making two, I'm just gonna call this one John Wolfgang Miller a. And then I'll also changed the slug to that. The slug is the part that comes at the end of the URL. I'll click update. That one is ready, and now I will add the second page. So I'll hover up here to add new. Let's call that one. John Wolfgang Miller B. And of course, in page attributes, make sure you choose elemental canvas. Let's click edit with Element tool. In this new version, I want the hero section to have a little bit more impact. I want something that is going to fail the entire page when first opened. I want a 50-50 split between left and right. On the left-hand side, I want to photo of myself. And on the right-hand side, I want the title and introduction to my page. So let's start creating that one. First of all, I will hover over that red plus. And when I select my structure because I want a 50-50 split, I'm gonna go for two columns. As you can see, the section here is just sat at the top of the page. That's what we want to play around with on the left-hand side. So let's go over here to layout in content width. Let's change that to full width. Columns gap, leave that as is height. Let's select that to minimum height. This means we can decide on the actual height of this box. What we want is a 100% So what we're gonna do here is select BH, which stands for vertical height. And we're gonna change that to 100%. So I drag it all the way to the end. Now as you can see, the blue box around here is filling every single gap within that. Next in column position. Let's change that to stretch. That means these columns are going to fill every single spot inside section and with vertical align, let's set that to middle. You won't miss any change there, but it just means that anything that is dropped into these sections will stay centralized. And that's what we want in here. We have a 50-50 split left to right, and we want everything to sit in the center. So now we're ready to start throwing in elements. The first thing I want to do is fill both columns with a background. We already know how to do that. Let's go up to the column. Click on style. And in background, I want to insert an image. Here I have an image of myself sat at a desk in black and white. I want to use this one. When that drops in. Obviously the size of that is just too big for the spot. So I'm gonna go to the science section here and then choose cover. That means it will follow the exact height of the page. And as that is filling the full page, we're very, very happy with that. On the right-hand side, or to edit this column. And I want to add a color. I'm gonna choose my primary color again, the hot pink. The purpose of doing this one as a full-page opener, that can be seen when I choose the live option. As you can see, it's filling the whole page now. And if I minimize this and play around with the size of the window here you can see that the line is always centralized. However, they visit the website and whatever the size of that window, this will always fail to full page. So now I want to add a heading to the right-hand side. This is where I want to include my name, the introduction to the website. So in here we choose heading and drop that in to the space. As you can see that a centralized, but we need to play around with this quite a lot. First up, I want to add in my own name. And I'm going to choose one. That's still isn't big enough though. I really to play around with this one. I get it fitting and get it looking beautiful. So let's go into style and play around with this one a lot. First up, text color, I want that to be point. That's showing up a bit more now. Then I want to play around with the topography. And I really want to play around with this one now. I want to do something completely different that stands out, that has a bit more impact. In the drop-down menu here, I'm going to choose a font I loved, that's called bungee. That looks great, very sort of eighties 8-bit style. The size of this though that needs to be a lot, lot bigger. Let's see what we can do. I love this BIG style, I love the size of it all. But the problem now is that my name runs over the edge, so we can change that and content. So what I will do is edit the text, split it up, and add M0 is technically a tiny little bit of code to tell it to have a paragraph break. This comes across with an angle bracket, p angle bracket. The angle brackets are the same as the greater than and less than symbols on your keyboard. So before the word John, angle bracket, p angle bracket, then I will knock down wolf angle bracket, p angle bracket. And that is now split up perfectly. The spacing of the text isn't quite right though, but we can change that in style. And then go down to typography and play around with the line height. Haha. Yeah, that's perfect. The last issue is that the text is too close to the photo, so we need to go into advanced and add some space to the margin. That is an excellent size and it is all centralized in the same style as the last portfolio. I wanna put my slogan below my name. We're going to use a slightly different style here though, I'm going to use an animated heading. This again is a Pro Widgets and make sure you've signed up to pro if you wanted to put this one in and drag that below your name. So this has dropped in using all the default settings. And I really liked I sort of spinning around circle. I want to keep that one in. So I'm just going to play around with this a little bit now. First of all, alignment, I want that to be left aligned. The spacings are the margins means it doesn't line up with the headline above. So let's change that one. I'm going to go into advanced. I don't wanna margin at the top of the bottom just on the left and the right. So let's unlink those and then do a 150 on the right and a 150 on the left. That's dropped everything down a little bit. The text is too big at the moment. We'll play around with that in a second. First of all, let's change the title. There are two options here. As you can see, there is before texts and highlighted text. The highlighted text is the one that's going up a little spinning circle around it. I wouldn't have to go around the whole thing. So I'm gonna delete this pump and then type in digital print branding into there. That all looks very, very cool. So let's go to style. And this is where we can play around with a few of the elements here. First of all, shape, that's the color of the circle that goes around the text. I want that to be white width. Let's make that a little bit smaller, I think. Yeah, that's good. I can also choose to bring that to the front so it sits on top of the text, but I prefer it behind headline. That is what we need to edit to get it all fitting. So first of all, let's go into topography of the text. And let's play around with the size of that. I think that's a pretty good size, to be honest. I'll just play around the letter spacing a tiny little bit, drag that out a bit more like it dragged. To change the color though, we need to go into animated text because that's what we have here. The whole thing is animated. So I'm gonna change that to my favorite black. Perfect. Now the issue with it is that is too far away from my names. Let's just play around with the margins for my name. So we'll go back into here and edit this. As you can see, the margins are all set to a 150. I need to not those down, so let's unlink them. And at the bottom, I'm gonna change that to 0. Yes, that's perfect. Now the slogan sits perfectly below it. I still think there's a bit too much space at the top of this one. Those are going to drop that down to a 100. Excellent, unhappy with how that all sets now all centralized to my picture on the left. Making this hero section right here is a very good example of how you can be with your website creation. You can dream it, anything can happen. So you've learned a lot here, including how a full page image works, and how that can perfectly fit within sight any browser window. And how you can get super creative with the opening title. And also how animated headlines will work within elemental. So what next? Well, this is the most creative part of the entire class. So now's your chance to really start playing around with elemental. See what you can do. C, What brings in your style, your look. Have some fun with this one before we move on to the next lesson, because that will be getting even more creative with your gallery. 11. Gallery - Portfolio 2: Your hero section is now looking awesome and it's all about you. So it was time to move on to the Gallery. Gallery style here. This is a bit more manual and a bit more unique is quite different to the last gallery. And that gives you the opportunity to do whatever you want. You can decide what goes, where, what sits next to each other, how it all pops up, us all down to you. This is another chance for you to really play around with element or start getting super creative with your hero section. Now complete, let's now build new gallery. In the previous version, we use the gallery widget. With this one, I want to get a little bit more creative. So I'm going to build it manually using images. So let's scroll down. I'm going to add in a new section. And for this one I'm going to choose four columns. As you can see, for empty columns have appeared, let's drop an image into this first one. Then I will choose an image. And that's just dropped in there. I will set up a few things now that I want to be the same on every single image that I drop in here, that will save us some time. So first of all, for link, I want that to connect to the media file. That's again will bring up the light box that she's currently set default, meaning that will show the exact same lightbox style that we set up in the previous version. Next, I'm going to go into style. And then I'm going to choose hover. As you can see at the moment, there is no HAVA element. When I hover over the image, I want to add something in that. So I'm going to add some capacity. Yes, that's a good amount. It's a little bit fast though. Let's put one in here. Now it's a little slow fade out. So we're very happy with this style. And I want to use that for every single image that I'm going to use in this gallery. What I'm gonna do is a big copy and paste. I will hover over the blue pen icon and right-click. You will see some other options here that we haven't seen before. This is where you can edit certain parts of your page. And I wanted to do a very simple copy and paste. So let's copy. And then below that paste. And we'll do it three times in this box, and then three times in every other box. Now we have space for 12 images inside this gallery. That's perfect, and that gives me a chance to show off everything I have done with digital print and branding. All I need to do now is select all of the images that will appear here. So I go over to my first pasted image here on the left, and I edit that one. And now I will go through each image block and choose the 12 images I would like to display all my portfolio. I now have 012 images displaying on the page. A couple of things I want to change here. First of all, the images too close to the header. So let's just add in some margins. I think maybe a 100 pixels should do. Yes, that's good. The spacing of them isn't quite right. I don't want them all to line up at the top. I want them to be sort of centralized, lined up to each other that way. So what I'm gonna do here is edit each column. I will go to Vertical align and change that to middle. There we go. That looks great, but I want to just move so many images around just so the balance is a little bit better. It's a bit too much high on the second column and a bit too low on the end column. So let's move some images around. When may also want to move a column from the left to the right. There we go. That took a little bit of playing around, but I'm very happy with the display. Haha. We've got a good balance of light images and Docker images. Also, as you can see, none of the images line up at the top or the bottom. So we've got a really good balance here. The other thing to remember is how it looks like. So let's have a look at that. That's awesome because that is filling an entire pages. I can see it. And when I scroll down from the opener, that will fills a single page. And that'll fills a single page. As you can see when I hover over each image, they all look the same as well. And when I click on them, we get the same lightbox display. Now I will go back into the editing section and I'm gonna make one more change to these images. I want to change the way they display when the page loads. So we'll go to the first image. And then I will choose Advanced motion effects. In here we have an option called entrance animation. This is what I want to play around with. In this drop down menu, I'm going to choose an option of fading. There's a lot of different options in here, but I liked the idea of them fading in. I also want them to fade in from different positions. So the ones at the top, I'm going to choose fade in down. There you are. You can see how that looks. We have animation duration set to slow. Yes, slow is very good for that. So I will edit all of the top image is to do that. Now for the ones at the bottom, I want them to do the opposite. So I will choose fade in, up and the left side. Let's get that to fade in from the side. And write fade in, right? What about the ones in the middle? Let's try something different for those. Let's just choose fade in. That's cool. I want to say a live version to see how it's all looking. I'm going to use a different system here. I'm going to scroll down to the eye at the bottom and click preview changes. That will open up another window. In here I can scroll down to see how the animation is looking. That is awesome. I'm very happy with all of that. So now we'll go back to edit with element. Another very good creative lesson for you there, to show you how galleries can be built using the grid will come just be built manually to whatever you want. You've learned a lot here, including how it can work with individual images and how about can all sit within sight different columns. You've learned about HAVA overlays and how that will look on top of each image. And you've also learned about entrance animation, very cool part of elemental that allows you to do lots of other creative things. You now have a very good understanding of how Element works. So stop playing around with the gallery section. See what you can do for yourself when you've done all of that. And we can move on to the last lesson for this portfolio, creating the contact box. 12. Contact - Portfolio 2: In this lesson, we'll again finish off with the contact section. In this one, we're going to get a little bit more creative again, do a few new things. And once you know all of this, you can start developing that much more for yourself. At the end of all of this, you will have completed portfolio to. Now we have a very cool opener, a very cool gallery. We just need one more element, the contact form at the bottom. The one we will put in here will be a little bit more creative than the last one. Let's scroll down to the bottom. And let's add another section. Here. I'm gonna go for two columns, but not centralized with the biggest side on the right that I want to call it the background of this. And I will again go for my usual black on the right-hand side. Rather than dropping in a button, I'm going to drop in a form. Find that one up here. There's a few options here. We're just going to choose the regular form, the element two rebuilt. That's just dropped in. And we want to edit this quite a bit. But first of all, let's get a little bit more space around this. Let's add some padding to the section. I'll turn off link values together and at the top I'll put a 100. And at the bottom also a 100. Now I will click on the form and edit this. There are quite a few options here, so let's play around with each one. I'm happy with the way this is setup. This is what I want from people who visit my website. I want their name, their email address, and a message from them. The spacing of this though it doesn't quite work. First of all, I'm going to turn off the label. This is because we have the word name above name, email above email. Let's turn that off. That's much better. Now I'm gonna go into name and edit this 1. First of all, I think the areas for name and email, uh, too long. I would prefer if they filled out 50% of the width here. So let's change that. And I will change that in email. Now I will go down to actions after submit. This is showing me what will happen after someone enters their details and presses the send button. Email, that's what we want. We want the email to come through to us. If I go to the email settings, you can see that he's already sets up for my email. If it's not, you can fill in all of these forms. Haha. When that's all complete, let's go to style and play around with the look of this. First up we have the gap between columns and rows. Both are a bit small. I'm gonna up them from ten pixels to 20 pixels. Then I will scroll down to field. And what you can see here is what the content inside each of the boxes is inside name, email, and message. First of all, I don't want a background color here, so I'm gonna take that off. I will select the black that I've chosen for the background. That was great, but now we need to change the color of the text to white. One more thing I want to change here is the lines that are around the boxes, so that's in the border width down here. First of all, I will set that equal to 0. Then I will turn off the linking values together. And I will put 1 at the bottom. There is a bit of a problem here though. You can see these little dots go on up the line there. That's because the border-radius is set to default. Let's change that to 0. That's much better. Now we go down to the buttons. As you can see, the button doesn't look great At the moment. I want to make it look more like the button that I set up in the last portfolio. So we will just go back to content. And we will choose buttons. And at the moment the column width is a 100% and that's too big. I'm gonna change that to 20%. Much better. Now let's go back to style. Go to buttons again. And let's play around with all of the settings in here. First of all, background color. Let's make that our primary hot pink, Excellent. Text color is white, that's perfect. Let's play around the topography. Condensed again. Heavy. Uppercase. Yes, dialogues. Great. Let's see how it looks like. That is perfect. In the box on the left, I want to add the word contact. So I'll drop in the Text Editor. I will write contact. And I would choose heading three. That's great, but let's make it white. This looks great, but I think there's a bit too much space in-between the word contact and the form. We can edit that. All we do, we hover over the column that we want to make a different size and we literally just drag it from left to right. Much better. Now, I just want to add one more element. I want the social media buttons that we included in the previous portfolio to appear below where I can start creating them again. Or I can go back into the previous portfolio and I can make a copy of that and paste it in here. So to do that, let's save this 1 first. Save draft. When that's finished, go up to your hamburger menu and go exit to dashboard. That will take you through to this page. Click on the WordPress logo at the top. And here you will see both portfolios that we have already set up. Let's go into the a version and edit that. When I hover over it, I want to edit with elemental and inhale. Let's hover over the social media icons, and let's right-click on the Pen icon. Here you will see an option that says Save as global. Click that one. In this window, enter something like Social Media buttons. Whatever you wanna call it, and click Save. You have now saved a global widget that can be used across any page on your website. So first of all, let's just update the page so it's saved. And then back out to your hamburger. Exit to dashboard on the WordPress icon again. And then edit the new page. And scroll down to the bottom. And choose global at the top. And now drag in your social media buttons. Now we have the option to edit or unlink. If we choose edit, that will change the appearance of this on every page where is used. We don't wanna do that, so let's unlink. And in the pop-up, let's choose unlink again. If we edit the button now, it will only be edited on this page. So let's do that. First of all, left alignment. And the only other change I want to make is the Instagram logo. The black is being lost on top of our black. So let's go to color, custom, primary color. And let's choose the hot pink again. And I would just like to change the space in-between the word contact and the social media buttons. So let's go to the word contact and select lab. And in advanced, let's play around with the padding in here. Let's set it to 0. And the margin that will be 0. That hasn't moved at a tool. I'll, I'll link those values and then I will put option to 20. I put a minus in front of them. And this is our whole page completed. Let's have a look at it live. The flow of the brightness from the opening page to the gallery, to the contact box is perfect. So let's save this one. Down here I will click Publish. And now both of your pages are complete. So we have now covered everything all over both portfolios. And in this lesson, you now have a very good understanding of elements of forms and how they can work best for your contact section. And saving global witches that can be used anywhere across your entire website. So you now have enough knowledge and you've learned enough that you can start building both pole failures. I really suggest playing around with those as much as possible. Before we move on to the next lesson. In the next lesson, we'll be looking at developing your desktop version of your website and making it work on tablet and mobile. 13. Mobile and Tablet Design: You now have two every cool-looking portfolios and they both look amazing on your desktop. But do they work on tablet and mobile? Possibly, yes, possibly know. Some page builders make that difficult to fix up an elemental of made that old, very easy. So here I will talk you through how all of this works. How you can change things for tablets and things for mobile, and how that won't change what you have done on the desktop version. I will show you examples of what I have done with both of my ePortfolios. And then you can do the same for your own site. Here we are in the dashboard. Let's take a look at each page individually. In pages hover over the one you would like to edit. On the right you will see edit with elemental that will take you straight through. The first thing you see is the desktop edit. But the bottom here, we have an option called responsive mode. Click on that. And here you can change between desktop, tablet and mobile. Let's start with mobile. In here you will see how your portfolio would look on mobile. All of the elements are still there that just kind of filling different sizes in different spaces. So let's have a play around with that now. Whenever we change here in the mobile version, will not change the desktop version that will stay exactly the same. Let's start with the logo. Go to style and make it bigger. That's cool. And the text style. Let's make that smaller. Let's drop the letter spacing down. That means we can get bigger text. And I think I'll even go up away. Yep, that's cool. Maybe slightly smaller. Love it. Social media icons. Again, I'm getting the edit or unlink option. I'm just going to unlink highlights this again. And I'll play around with the size is in here. That's cool. But now the problem is the spacing. It's kind of too much space around each element and at the top and bottom. That so set up inside the column, says hover over that. Go to Advanced. And you'll see blank boxes because that's what's being taken from desktops. Let's set them all to 0. And then you will see there is now no space. Let's turn off linked values together and let's add some padding to the top and the bottom. At top 50. And Bolton 50, maybe a little bit more at the top 75. That's cool. I just want to take up a little bit of space after the text. So hover over that. Again, go to advanced. Again, picking up default settings, set it equal to 0. I'm happy with the hero section. Let's hover over the gallery. And you can see is dropped in a few pixels underneath each image. I think it kinda needs a little space around the column as well. So let's click on that. Again. Go to Advanced and on padding. Let's turn off this and say on the right and left ten pixels. That should even allow. Yes, I like that. I like the way there was a border around this. Now, there's no space at the bottom though. Let's add that into ten pixels there. Yes, that's perfect. And one last thing, I think there's just a bit too much space around the contact button. So again, let's go to column advanced set equal to 0. See what happens? Unlink the values. Top 50. Bottom 50. Yes, that is perfect. So that's all looking great on mobile. I love it. And if I go back over here to desktop, you will see nothing has changed. And of course we need to check tablet as well. This is how it's all looking on tablet. I think the hair looks perfect. Again, I just want a little bit of space either side of the images in the column. So let's set that one. Right, ten pixels, left-hand pixels. And ten at the bottom again, that's spot on. So when you're happy with all of that, just click update. Let's go and edit option B. Again, choose mobile option. And this is how the mobile option is looking right now, as you can see, that really isn't working. So let's see if we can edit some of this. Will start off with the text, your name. Going to style. Make a size much smaller. That's an OK size. But the switch from horizontal to vertical, what is switched everything around. So I didn't think the splitting up of the words is really going to work on mobile. So here's what I'm gonna do. Got to hover over the blue icon. I'm going to right-click and choose duplicate as my two versions of the same thing. For the first one, let's click to edit and that's again, go to Advanced. And then we're going to turn this off for Mobile. To do that, we go to responsive. How you do on mobile. And then if we choose the second option, we will hide that on both desktop and tablet. Look at tablet again in a minute. But as you can say, if I click on the arrow here, this will show me how the live version looks. There's just one version, there are not two. And even though we just edited the top one, as I told you before, this will not edit land on desktop. So if we go back to desktop, will all looks a bit messy right now. But again, if I click on the arrow. You can see is all looking at the exact same way it did before. So this is safe. Let's go back to mobile. And then I'm going to play around with this text. Haha. I'm going to take how the paragraph breaks. And then I'm going to align it to the center. And then I'm gonna go to Advanced and take out all of the margins and padding. A much better display and sits much better on mobile. Is still needs a few more edits here though. For the animated headline. Let's centralize that. And let's take out the spacing again. Yes, that looks much better. The spacing above and below text is a bit too big scale. And if we go back to edit, and we choose a spacer and we drop in on top of the image at the top. What that's gonna do is just drag that box that has the photo background in it. So over here, I'll click on vertical height and I'll set that to 50%. Now when I click the arrow. Yes, that's perfect. I'm happy with all the space and the size of everything there. And asks for the gallery. Hmm. You know, I'm happy with all the spaces between each image that I just don't think the animation is really, really working on mobile. I think it would be better if they were static. So what I will do is turn off here and again, that would just turn off your mobile not on desktop. I select each image, go to advanced motion effects. It's showing the default settings taken what it already has from desktop. I will select none. And I will do that on each image. And the contact box, I think I just want the upper parts to be centralized. Yes, style is perfect. Now the whole mobile version looks great. And when I click on an image, I still get the same light box version that I got on desktop. And that looks awesome here. As for tablets, contact box, I'm happy with that. The gallery, very happy with that. As for the hay row, I'm going to use the same text version not used on mobile. So I'll switch this one all phone tablet. And make sure this one is viewable on tablet. This is almost there. Now, just a little bit more playing around with size and spacing so that it lines up the same way as mobile. Almost that this just needs another space or adding because it's not picked up the one that we used on mobile. Again, I'll set it to 50%. Yep, that looks perfect. Let's take a look at Gallery. Yep, I love that. And contact is taken the same version as desktop, but I think that works on tablet. Awesome. So I now click Update. And both versions of the page network on desktop, tablet, and mobile, so they are ready to go. As you can see, elemental isn't excellent Page Builder that makes all of that possible and makes it work perfectly. So you now have a very good understanding of the whole element to device menu, how it works between tablet and mobile. How some parts will work automatically on all devices, but some white. And how you can change every element. So it works everywhere but still looks cool across all devices. So just have a play around with all of these right now and see if you can fix the problems that you can see within your own portfolio. And then we will move on to the very last lesson, getting your website live. 14. Launching your site - Extra Plugins: Before you launch them, before you make them live, will just run through a few last technical parts just to ensure that it is all working perfectly. That will then show you two extra plugins that you can install for free. The first one that will make your site run even faster than it already is. And the second one that will help you improve your search engine optimization, your SEO score. So you may have already chosen a single version portfolio. Well, maybe you got super creative and you've got to be on the, with the design ideas here. Well, maybe you actually just want to make a combination of the two pages that you've made. That's very easy. Just saved certain elements from one page and copy them into the next page. Here's an example. If we scroll all the way down to the bottom of this portfolio version, maybe we like the entire contact box here, not just one small element within it, but the entire section was very easy to do. We hover over here, we right-click and we go save as template equipment best contact box. This will bring up a page showing you all of your saved templates. We close that. And then if we go back to the other version, scroll to the bottom and delete this entire section. And then choose the folder. In this window, choose my templates, and insert the one that you would like to use. And now you can see that entire section is at the bottom of this page. So the elements together. Back in the Pages section, you will see this extra page here that I mentioned earlier. As you can see that it's set as a draft. That means the page exists, but only you can see it. And we have to live pages right now. We're going to turn them on or off. We're going to set worn as a draft. For that I would choose option a. I will click quick edit. And in this section over here, I changed that to draft. Both the pages are there, but any one of them is live. And this is the one that I have chosen to be my main portfolio page. I'm going to make a quick edit to this one. The letter B at the end isn't really relevant now that we're beyond the editing stage. So I will quick edit, I will take the beat out and I will take the B out of the slug. Another thing you can see at the top here, which may be relevant to your page or may not, is coming soon active. And by clicking the button, you may come through to a page like this. I am hosting with blue host. So this is what I see. And to launch my site, very simple, just press the button. So the site is now live. But one more thing we need to set up, come over here to our parents and choose, Customize. Just ignore all the elements you see up here. This is not on the live page, but what we need to do is save which page is the homepage. So we click on homepage settings. And at the moment, no page has been set for that. If we go to this drop down menu, I can choose John Wolfgang Miller. And if I click on that, you can see it all uploading. This is the exact live page that everyone who visits will say, I just need to press publish. There are few extra options you can choose in here as well. Click on the arrow. I go to site identity. As we do not have a header on this page, we do not necessarily need a logo in here, but feel free to add a logo if you have one. What we do need though is a site icon. As you can see here. This is what people see in the browser tab when they have your page open. So it's important that you have that one up or you'll just end up with the basic WordPress one there. These are very easy to create. Get a version of your logo into a square image and then upload that. Here is a very good example of mine. I've just taken the j and the W from my logo and use those on their own. And as a little bonus note, here's a couple of extra plugins that you can add in. These will help improve the speed of your website and also help improve its appearance on Google. So go to plug-ins and add new. The two that I would like to show you a called smush and Yost. So come up here and type in both of those words, smush, install and activate. I'll do the same with Yost. Smush is a plugin that is very, very simple to use. All it does is it optimizes the size of your images. Even though we've worked around with images to get them as small as possible or ready. This will help compress them even further, and therefore the speed of your website will be even faster. Install the plug-in and then press the button to bulk smush now. And youngest is a plug-in that works quite differently. It's a plug-in that will increase your chances of being found on Google. The best way to edit this is to go to your pages, Choose Your Life page, and select edit. If you scroll down here, you will see an example of how a search fuel website would look in Google, and it's not quite right yet. First of all, the image, this is the image that has been picked out of all the images that you've uploaded, but it's not the best one to represent you. You can change that. Go over here on the right to featured image. I'm going to choose the same black and white photo that I've used of myself in the background. And then you will say it will automatically change in this little box here. So if people are searching for me, this is the photo that will show. If you want to change the text that appears, click edit snippet. Down here, this is your SEO title is picked up random things here. Let's delete all of that. And m here we can enter whatever we want, the thing that best represent who we are and what we do. So I'm going to write my name. My role is and then my location, which is currently Sydney, Australia. You can see this little line below is gone from red to orange to green. You want it to go green as much as possible. And that just shows that you're using the best use of the space there by saying as many words as possible. The more words that you can have in there, the more chance you have of being found in a Google search. Below this you will see meta description. And this is the section that appears up here below the title. Again, nothing has been written for this yet, so we can write in whatever we want. And what I've written in that has made the line below go green. If I was to write too much beyond that, it would go orange because that means I've gone too far. You want to keep it at a certain length. So just play around with this until the line goes green. And when all done, press update, then press preview. And here you can see your final website. Everything is live, everything is complete and it's looking the perfect way, the way that best represents you and everything you can do as a creative. You now have two portfolio pages. Follow all the rules and are ready to go. In here we covered and the last technical checks you may need to make. The plug-in that helped me speed up your website. And also the plug-in that will make your search engine optimization work that little bit harder. And that is everything we have covered here across all lessons you've learned absolutely loads here. And you can now take that and start building your own portfolio and show that to the world. 15. Wrap Up: What I've learned a lot of very useful information there. You will now have a much better understanding of WordPress, of elemental, What is needed when you're building a portfolio website. Also, if you followed each lesson with the actions at the end, well, you've already built two very cool looking portfolios. And what next? Well, you either have a website that's live and that you're very, very happy with. Or you can take a little bit longer developing this and get a bit more of your impersonal style in there. Another option, well, start again, start again from blank. You now know enough about element or that you can't start again from scratch. You can rebuild a completely new website that best suits you and your style. When you pull a failure was live. Make sure you post it here in the project section. Take a few screenshots and leave as a link so we can all go through and check it out and see how cool it is. For every website that is left here. I will look at it myself and I will leave you for feedback on what is looking cool and what looks best. So hope you really enjoyed this whole class. I had a very, very cool time making it. And now it's well, now my tape. So I'm gonna go in the room and make another cup. Thanks for watching. Chairs.