Beginners Guide to Building a Website with Elementor (Part 1) | Paul Charlton | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Beginners Guide to Building a Website with Elementor (Part 1)

teacher avatar Paul Charlton, Designer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (1h 10m)
    • 1. Course Introduction

      0:46
    • 2. Introduction to Elementor's Interface

      13:07
    • 3. How to use Theme Styles

      13:35
    • 4. Elementor Blocks & Templates

      12:19
    • 5. Building your Homepage

      23:24
    • 6. Building your Contact Page

      5:47
    • 7. Wrapping Up The Course

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

223

Students

--

Projects

About This Class

Learn how to build your first website with this Elementor Pro WordPress Tutorial.

I'll show you the core skills and help you get comfortable using Elementor & Elementor Pro to build your first website.

Learn how the use the Elementor interface, how to setup Theme Styles, the basics of working with templates and get to grips with building your first WordPress theme files.

By the time you've worked through this detailed guide, you should be in the perfect position to start building your own WordPress websites with Elementor.

You don't need any prior knowledge of working with Elementor, but you do need to know how to do the following:

  • Install WordPress
  • Install plugins & themes

>>>> Second Class in the Beginners Guide Series: Elementor Theme Builder <<<<

Meet Your Teacher

Teacher Profile Image

Paul Charlton

Designer & Trainer

Teacher

Hi, I'm Paul, from South Wales, UK and I am a passionate Musician, photographer, professional web & graphic designer, mountain biker and gamer who enjoys all things technical! 

I've worked as a professional web designer for over 15 years and an IT trainer for 10 years prior, specializing in digital media and design. I've been lucky enough to provide work for some amazing industry magazines (.Net, Digital Photographer, Computer Arts, etc.) and had my photography featured in magazines and online.

I'm the owner of a successful web & graphic design company trading for over 14 years alongside developing over 600 training videos on a range of design, photo editing and audio production topics as well as authoring 2 eBooks on photography and Adobe Lig... 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.

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.

Transcripts

1. Course Introduction: thank you for joining me on this skill share course on working with elemental, elemental pro on WordPress. What we're gonna do is we're gonna cover those core fundamental skills is going to get you up to speed with understanding how to use this powerful combination to create great looking WordPress websites. So if you're completely new to working with this combination, or you just want a kind of overview of how elemental works with WordPress, this course is going to do just that. We're not just gonna cover things like click this button, do this. We're gonna take a look at why you do certain things. So the time you finish this, you'll have an understanding of how a typical elemental page is actually made up that will make the whole process of designing your WordPress websites using elemental, much easier moving forward. So join me in this course. They take you through all those core fundamental skills 2. Introduction to Elementor's Interface: So for this part of the tutorial, we're gonna be creating something that looks very similar to this. As you can see, it's a nice, clean, simple design on a great starting point to get you up to speed. So first of all, let's just take a quick look at what we've got set up inside WordPress itself. So they come over first of all, into the appearance and into themes. You can see that the theme that are going to be using for this example is the hello theme. Now, first of all, I'm gonna say the reason for this is because it is a bare bones theme that has pretty much just the things that WordPress needs to keep it happy. And then we can use elemental, elemental pro to create a with a different page design elements that we want. So in this tutorial, we're gonna be using this. But however, if you wanted to use something else like generate press, ocean WP Astra and so on, you could use those along. The skills you gonna learn in this series of videos should carry over to pretty much whatever theme you want to use alongside elemental, elemental pro. Next up, Let's just jump over into the plug in section and see what plug ins we currently have installed. So while I'm using is elemental, elemental pro, that's all we need to install for this tutorial again. Obviously you're probably going to find is gonna be additional plug ins that you want to install to get your website up and running fully things like Seo Tools and so on. This is all about how you use elemental on elemental pro. Okay, so we've seen what's installed. Let's take a look at the elemental interface is the first we're gonna do is we're gonna come in and create a new page. We're gonna add a new page. I was simply gonna name this home page. This is just going to be the basis off our first page will just click on, publish on. Once you've done that, we're now ready to start working with elemental itself. Now, the thing to bear in mind is, once you create a page, you still need to pull it elemental to use it to create the page layer that everything else pretty much on the page is going to be ignored in favour of elemental. So we need to do is click on Edit With Elemental that will open the editor up on. We see the editor for the first time, So let's just take a quick look at the interface itself. If we look on the left hand side, we've got a selection of different widgets. Now, if you using just the free version of Elemental, you'll see a lot less options. In here. You'll have all the basic options you won't have pro, but you will have some additional things like General and so on. So just bear in mind if using the free version you can follow along with most of this tutorial. But you are going to find some of the options that we're gonna be using won't be available in the free version. So widgets, What exactly are they? They're the fundamental building blocks that we create any kind of paved design out off things like headings, images, videos, buttons and so on. And then we put those into a grid layout. So what, I mean by a grid layered. If we take a look on our page of the moment, you can see we've got this serrated block that just says Drag a widget You. If we drag a widget over pleasure say, will drag in, this text editor will drag that over. That's no a single roll on a single column if you want to split that column into two so we could have two separate columns with different content in we could do. Just that we need to do is come over this particular section. We're gonna click on this little option in the top left hand corner. I don't explain all these different options as we go through. What we can do is we can right click on. We can just say that new column on this. Our second column. Comeback Auto. We just if you want to dragon image over and drop a placeholder image inside there. So if no created a two columns with a single roll layout. So as I said, everything is done in rows and columns. That's basically the fundamentals of it. Yes, you could override that with things like absolute positioning and so on. But that's a little bit beyond the basics of what I want to cover in this first video. So once you see that kind of thing. It's very, very easy. You start to see exactly how you can build these various different elements that are different design aspects to it, and you can create very complex looking layouts or using the symbol building block tools. So next of all, let's take a quick look at the actual rolling columns, these different icons and things that we've got available to us. If we choose this section, you can see we currently have three different icons. We've got ads section, which will do exactly that. Allow us to add another section above the current section. Two. We click. You can see that no pops up and says, What kind of sections you want to add? We can add in a new section. We could come in and we can choose from things like Single Row column, dual role column triple and so on. So we have pre designed column layouts that we can tap into and use those if we want to. Alternatively, if we wanted to, we could also choose an option to add a template that will take a look a templates, briefly, a little later on, but they just basically pre designed layout pieces, pages, blocks and so on. So again, legacy will take a look at that is so dedicated Section a little later in this video, so is the first option. The next option is basically just the edit section. So we click on that Doesn't matter. What would you we may have selected. So if I just come over click to edit this image you see on the left hand side Now we've got edit image on. That's currently what this panel is going to do. Allow us to edit the image where we know come over this section. We can click on that it no switches over to edit section and we can add it'll the parameters to do without section itself. Finally, you've got the X, which is the delete section. So we click on that that will delete that section out of the page. We can if we want to undo anything. We come down to the bottom. We have a history option being click on there. A lot of different things we've done since the first edited stage are all listed inside there. So we could say we removed that they're just click back to the previous stage and you can see it brings it back so we can very easily pull back anything we may have accidentally deleted, removed, moved whatever we did. So now that we've seen how we can choose sections and added those duplicate those delete those and so on. Let's take a look at each of these different columns. If we take a look, you can see each column has this little icon in the top left hand corner dependent in which column you go to. You'll see that icon appear. If we click on that, you can see now on the left hand side. The panel changes over this timeto edit column. So now we make changes to that column. It only applies to that specific column any adjacent columns or any columns of verbal below . Whatever your design will not be affected by any changes you make. So, for example, when we select this week unjust, select this column and then we could adjust the vertical or the horizontal online to commit the vertical. We could say middle and you see that now positions it directly inside the middle of that particular column. So it's very easy to set up the way you want to style various different things inside each of these columns, sections and so on. One other thing I want to draw your attention to is if we come down to the bottom left hand side. We've also got another option called Navigator, and this could be very useful when you start, have more complex designs or longer designs that you want to move things around, select things and all those kinds of different options. If you click on the Navigator that will open up this section on the right hand side, you can see it tells us exactly what's on your page so you can see at the top it No, says section, which is what we've just inserted. If we click to expand that, we have the two columns, the left hand column, which has the tax in it, the right hand column, which has the image in it. If you click to open up any of those columns, we can see exactly what widget is placed inside that column. We can if we want to move things around. So if we created additional sections, we can simply drag and drop things around so If I open up the second column and I just grab this image, I can reposition that now above the text on the left hand column, removing it from the right hand column. If we want to put that back, I can simply drive that back down into the position. I want it and you can see it now updates in real time. So the navigate it could be something that's very, very useful. When you're working on more complex decides or you quickly want to move things around, you may want to sort of change sectional line, months, positions and so on. Well, you could use this. It's also very useful because once you select anything inside the Navigator, the left hand column changes over to all the options associated with that selected item. So if we come back to the section, you can see we now have edit section. If you come into the column, it says. EDIT COLUMN If we come to the text editor, which is the left hand column, you can see edit Text editor is no selected, so it's very quick and easy to jump around, find exactly what you want and do all kinds of editing and all those kinds of good things. So the Navigator is absolutely your friend. So now that we've seen the various different ways, we can select things, let's take a look at the actual options on the left hand side, you can see we have three different tabs. We have content. We have style on. We have advanced. The content will change depending upon the type of widget you have selected. So if we select this text, we get this one a lot of options. If we select the image you can see, we get different options. If we select the row itself with section itself, I should say you can see we get different options again. So this is what's called context sensitive. It changes contact in the options that are available depending upon what you currently have selected. The style option works in fundamentally the same way. This is how you can go through the process of styling whatever you have selected. So again, if we choose the text and we joined the styles, you would see we do things like that. Just the alignment that tax color typography. If we jump to the advanced option. We have the option to do things like adjusting and setting margins padding Zed Index. We could apply custom C s I. D C. S s I ds classes. We have some more advanced options, things like motion effects. So if you re using elemental pro, you have access to things like enters animations and you could make things sticky. All those kinds of very useful things background, border positioning, responsive tons of really useful things available to you. So that's the basics off the editor that you'll see most of the time. The other thing we also have is the option to use responsive mode. Now, when you're working with elemental, you can switch between three different modes. You can have desktop tablet and mobile. So if we click between any of these, you see, we switched responsive mode, weaken, jump over to tablet screen, will then shrink down. On. Ally was to make edits to make sure that whatever we're creating and designing looks good on a tablet and the same goes for mobile devices we can click on. We can edit things so you can see where we've got things like the title or the logo at the top of the navigation A little bit of a mass at the moment. So we want tidy. Those have to make sure they looked great across all those key devices. So this is where it is very useful when you are working on creating a website that you want to check, See, it was gonna look like and make changes. This is exactly how you do it inside the editor. So that's the basics of the editor. We do have some extra options as well. If we come down to the settings in the bottom left hand corner, we can click on there. This opens up all the settings for the page of a currently working on. So you can see at the moment the title for the page of the home page, which we set up when we created the page. We can adjust the status so all the normal status is you have as part of WordPress draft pending review and so on. We're gonna sign a feature image if that's applicable to the design that you're working, whether it's a page or a poster so on. If you want to use that, you can do that inside here we can hide the title if we don't want that to display, so we can just click. That will hide the title from the page on. Then that will allow us to create our own title and used as part of the whole style set up inside elemental itself. Finally, we have the page layout, but you see it says default. When you got elemental installed, you have a couple of extra options. The elemental canvas will basically take any header or for two templates. You may have a sign as either part of your theme or as part off the actual theme builder, which elemental Pro has, which we will cover in a future video. And finally you got elemental full width. This will leave all the element on the page, but it means you have full width. Controls will go from the entire size of the screen, and then you can control exactly what will display and how it displays. For now, we'll leave their set a default. We've also got some options. If we come to the top left hand corner to this little hamburger menu, we click on, open that up. You can see, we've got things like default colors, fonts, theme styles, global settings and so on. If we open up from the global settings, you can see the default fallback font the content with With between the spaces between each of the widgets, all those kinds of useful things. We can also control exactly how light boxes used for images on if we actually want to use a light box it all now, as we go through things and creating our website is partners. Beginner's Guide will be taking a look at some of the options inside you and how we'd actually use them. Specifically the themes style, which is a very powerful sort of recent addition to elemental, elemental pro. It allows us create global styles. We can apply to the entire site and everyone make changes. We can come back into one location. All those changes will ripple through the entire site, so we will be taking a look at that, an in depth as part of a future portion of this particular video. For now, just to note, this is where we get the information from. So that really is the very basics off how the elemental editor works. We're not gonna take a look at how we can start to take some of the different elements we have and start to build out our first page. 3. How to use Theme Styles: in this section, we're gonna be taking a look at one of the key. New features have been added into elemental in the recent months. On that theme styles, what exactly are theme styles as their name was suggested? It allows us to globally style lots of key elements for our design. So things like your headings, your body text, your forms, your buttons, you images, all those kinds of things. And the nice thing is, we can simply go make a change to the steam styles and that will then filtered down through the entire website for us. Now, before we go any further with theme styles, it's worth bearing in mind that they work best when you use in a bare bones theme like the Hello seem. That's the key reason why I have chosen it for this to toil. If you intended to use a theme like Ocean WP or Astra, you may well find that it's easier and more consistent to control a lot of these things via the customizer. However, because this is all about elemental, elemental pro, I want to show you how important theme stars Cumbie, so the first thing we need to do before we even start styling. This is make sure there are settings and war configured correctly. So every change we make is all reflected throughout the entire site. So we need to do is come back out of this exit to our dashboard, going to the elemental menu and inter settings. Make sure the disabled default colors and disabled default phones of both checked, never hit, save changes. That means now that these themes styles, we're gonna create gonna make sure that they work throughout the entire site. Now, we could just go back into any of our pages or posts come back in and we're gonna edit with Elemental. We're gonna go back in and start configuring everything. Now, with this section sent out, it means that I can style things and I can see exactly what's gonna happen as I go to the styling process. So you come back over into our theme styles. I'll switch is over now into the Themes style editor. As you can see, we've got a range of different tabs on the left hand side, or we can simply come into any of those start configuring the various different options. So we see, we've got body background, typography, all those kinds of things. We can configure all the different aspects. So the background is gonna be the global background color for entire site. So we just changed that to something else. So we're gonna click on. We could just say this red color. You can see you know everything on the page. The background has all been set up to be read on every single page. Unless we change that on a page level would all have that red color set is the background. Let's just clear that. Reset it because obviously we don't want to put a red background in. This design is gonna look a little bit jarring. So we're gonna leave the background type as it is for now, coming to typography. And from there we can no set up the basics. So the first thing we've got is the body, and that's going to relate to your normal paragraph text throughout your entire design. So we can if we want to adjust the typography in here Now, one thing that's nice about elemental is the typography. Controls are generally fairly good. Yes, we could do with some extra options inside there to get even more control. For the most part, for most users, we've got everything we need. So we open up the typography options you can see inside there, we can choose things like the font family the size based upon the different types of devices. So if you remember back when I said we could take a look at open at the different responsive modes for tablets, desktops and Mobil's, we can set different values inside there for each of those three different devices to make sure that our typography for in this example the body text looks good across all those different devices. So we're gonna do is we're gonna change the font family, adjust the weight on just make some settings inside you and see how that reflects our design. So I start off by changing our fund family for this example, we're going to be using quicksand, which is one of the free Google fonts. So click on quicksand. You see now everything changes to display in quicksand. That's because we've got basically a flow off all the different styles and things we sent up right at the top. If we choose something like, for example, the body or different fonts underneath that are gonna take on quick sound is being there. Font family. We can change that. Then through the heading options as we go through. Well, that's something we will take a look at doing next once you set up our body text. So just bear that in mind. The same goes if we take things like text, color and so on as well. Okay, so now we've done that. Let's just change some of the other values for this. We're going to set this font size to be 16 pixels. You can see we could adjust the size on there. We can come into control it. We don't have to work in pixels, either. We kind of we want to work in pixels, EMS, rams or VW, so you can choose whatever four months you want to work with. And let's stick to pixels for this example, this isn't about best practice. This is just about showing you the easy way of going through and setting things that if you want to work on any of those other values, then by all means do it. The process is exactly the same next that we don't get the weight. And the weight is basically how heavy the front looks. So, for example, if we choose something like 900 you can see we get a very bold font. Whereas if we choose in like 100 we get a very thin front. Now, even though we've got quite a lot of different values inside you, not every font is going to support that weight. So you may find that you change between some different values and nothing changes on the page. That's just because the thought doesn't have all those weights created for that particular font style to just remember that if you wonder why you said of value and it may look the same as the previous value we can if you want to set things to default normal, bold. If you want to just use a global kind of value bold and not worry about there being any kind of phone Wait, you could do exactly that for this example, though, we're going to set this to be 400 because I think that makes it nice and easy to read. Transform just means we can do things that put everything in upper case, lower case capitalize and so on. So for example, if we did upper case, you can see everything is now capitalized. If we chose lower case, everything is lower case of no capital, that is in the beginning. If we chosen like capitalized, that'll put a capital letter at the beginning of every single word which makes it very hard to read but can work really nicely for headings. We can also do normal or defaults. We're gonna need them to default. As you can see, that just puts everything back to where it waas the style normal italic on oblique. So if you wanted to italicize something, you could do that. We're gonna leave again. A default on decoration is things like underlying overline. Strike through and so on we leave that a default as well. The next two options. We have a line height and let the spacing again. You can see you consent these specific to the device. You may be viewing things on, So when we switch over and take a look, a t at the views will take a look at how that impacts these as well. So when it comes to line height. You can see we've got pixels and M values on there as well, so we can adjust that to whatever we want to to make sure everything looks nice and neat and makes it readable. That's the key thing. When you're working with this, when you're set in your father's styles up, make sure that everything is nice, clear and readable for the end user on all the different types of devices you're going to be using, let us facing. That just allows you to adjust how much spaces between each individual letter now generally for body text. I would normally leave that to zero unless the fault was a kind of weird looking front. However heading you can get a lot more creative if you want to. Okay, so there's the basic value set up inside there. Now let's take a quick look at the size on the spacing. Also want across the different types of devices we can. If we want to use the little icons, you it to switch between those different molds or win come down and use the responsive mode switcher at the bottom of the left hand panel didn't tell you to you how you want to work so we're gonna do. First of all, is adjust things on cue for the font sizes. Let's just make sure that nothing looks good on both desktop tablets on mobiles. So click will change the tablet mode on the font size. Everything looks pretty good on they will switch over now to the mobile on Everything was pretty good in there, too. So you don't need to make changes on everything, the options that they if you want to. So next up, let's just change the link colors. Switch this back to the normal mode to go back to desktop, and I shouldn't see we've got a link position in part of our text. So we need to do is come to the links section and we've got normal. We've got Harbor. Let's just change. The normal color would change. That will change it to this blue color. Also gonna make it a little heavier so we can adjust the color on. We're gonna just the typography. So let's just make that a little more solid so that links stands out. That already stands out a little bit better, and we can also do is we can come in and we're gonna say we're gonna put some text decoration. We're gonna underline this so it looks a little more in keeping with the traditional looking link. Then we can jump out of the Harbor state on if we don't make any changes on the everything will stay exactly as it is a week hover over, which gives no kind of visual feedback. So we're gonna do is we're gonna change that as well. So gonna change that over. We're going to say this is going to go a reddish kind of color on will remove the underline so we'll just simply come in to our decoration on. We'll just at that have been done. So now we hold her over, you can see we no get visual feedback. We've controlled that every link that's a normal link inside your text and so on will all pick up that natural styling. It's also reflects, as you can see after the navigation, the top, unless we override it. No, this is one of those little concepts that once you kind of understand what's going on with it, it'll help you move forward and make sure that your style things and set things that in the best possible way, theme styles are a global change. So when you make something on the everything that uses that particular styling will be updated throughout the entire site. So, for example, if you just seem with the links, all links will be a blue underline on on a harbor they'll be read, however, you can change that, but you change it on a widget level. So what I mean by that is, if you didn't want that of the case with, for example, the heading, then you could style it differently inside the widget itself. And we'll take a look about a little later when we take a look at making styling on the widget level. But just bear that in mind. If you make changes in the widget, typography colors and those kinds of things that will override anything, you set up inside the theme styles. So what, you understand that keep in the back of your mind you know that if you see a problem, that could be the reason why you start something inside the widget, and that's overriding your themes style. Now I'm not gonna go through and make you watch me style everything on here. You've seen how the styles work. You've seen how we can apply them. I'm not gonna go ahead, apply the styling that I want to the headings one through six and then I'll come back and show you how we could make some changes to some of the other things that the forms, the buttons and so on. It's all pretty much the same thing. But if you know it used to working with forms and things, there may be some options inside there that an explanation just could make the whole process a little easier. Obviously, if you're comfortable with this, you can skip to the next section by using those time stamps in the description below. Okay, so there's my headings, all styled up. Everything is looking nice and neat and tidy. Now take a look at how we can do things like the forms and buttons and so on. So you click on the buttons, you can see we can adjust things like text, color, typography, text chatter on all those kinds of very useful things. But we want to do is make sure that we've got the color scheme and everything set up. So although buttons look the same like the links we've got normal hover states, we can adjust things on there, so it's quickly configure some of the basics that shoes off background color. We're gonna use this pale blue color and you see that immediately changes the button color text color. We're going to set that to be white to make sure it stays white all the time. I'm gonna come into the typography, and from there we just gonna just a few things. So the first thing we want to do is just set this to be the same front as we using, which is quicksand sighs. We're gonna just that to about 20 pixels on. We're going to set the weight to be 500 will transform that uppercase. So you can see. Actually, it's just drop that down a little bit. Looks a bit too big. OK, so you will see. Now we've configured some basic parameters on their door to the Harbor state and we can do the same thing. This would come in, choose old background color. We're gonna make that a little darker, so it gets some kind of separation when you hover over it. And now because you created a new color and we want to use that maybe somewhere else in the site tohave, you know, everything consistent. We could simply click on this little plus and that will add a new picked color so we can click on there that know as that in If we want a position it somewhere else, we can easily move that over. Now we've got our harbor and we've got our normal state for old buttons. Same again. We're gonna come into our text and set that toe white. No, we hover over. You can see we get visual feedback on exactly what's going on. So this first part, then we can come into our form fields if you want to, and we can adjust any of the form field information and again we can do all the same things . We could adjust the label, the field, the typography for normal along focus and focus just basically means when you click inside this particular full element, it changes slightly. You can see the airplane is a little darker. Take on the next one and the next one, so you can adjust those kinds of things so you can make any changes you want they including , like I say, any font styling and so on. But we are still getting that flow of font styles down through the various different elements. So I believe everything else inside the as it is, and the final thing we could take a look at do it if he wanted to, is setting up styles for the images. I'm not gonna worry too much about that right now. We can come back at a later time if we need to, instead of any kind of global settings. Now, once we've configured those kind of elements or inside the theme style section, we can no hit update that will now reflect those changes and save them for us and only create new pages, templates and so on. As long as we don't overwrite any of these settings on a widget level, these will now style all those those different elements wrote an entire site on That is the very, very basics of how we use theme styles. But hopefully what you can see in this section is once you set these things up in the beginning. It makes it incredibly easy than to either make changes later on down the line or just a style. Everything you need to have that flow throughout your entire site on just speed up the process of designing and styling everything. 4. Elementor Blocks & Templates: So in this section, with no going to start taking a look at how we can build up our website of the various different components that make up both a page and also some of the key template files that we can assign Tore entire site now working with template files or theme files if you want accorded that, just speed up the process of creating various different parts. So, for example, things like your header with your navigation in your logo, your foot up with maybe contact information and things like that you want to create those in the sign those globally to your entire sites. You don't have to do that on every single page. Elemental pro makes this very, very easy. We can start to take advantage of the template ing system or the theme files. So we're gonna do is we're gonna take a look of building our headed another footer. I also take a look at things like blocks and templates and things like that. So what I do is really commit the template section on the left hand side and we gonna come down into the theme buildup. Now don't be daunted or put off by the fact that's causing a theme builder. We're not gonna be building an entire theme, but we are going to be creating some of the key components. So we look at the theme builder. You can see we've got the theme builder tab, which is an overview off any of the theme files we may create. Now, on moving forward. We then got four key areas in which we can group things together. Headers, footers, single on archive. Now, in this tutorial, this first part, we're not gonna even touch the single in the archive will look at those in their own dedicated to toil on the theme builder. But we are gonna look at the head and foot two sections, so the first thing to do is we're gonna create a headache that's gonna apply to the entire site. So we'll click on header once we come into there because we've got no theme files created, were asked to create our first header. So we're gonna do is click on add new header. You can see it pulls up the choose template type option, but because we're already in the head of section, it knows we're gonna create a header. Next thing we're gonna name this so we're gonna do is gonna call this default head up. Now, I just use the term default for anything that's going to be the standard theme file. There's gonna be used across our entire site. This doesn't limit you in any way. It just means when you come back and look at any other theme files or templates you may create, they just have a logical kind of grouping. So with that being said, we're gonna say, create template. Once that's gone through, we're gonna open up the elemental editor and open up the library where we can choose from three different sections. Now, don't be worried about this. We're not gonna go into tons of detail. This is just a quick and easy way of using these, either as a starting point or as just something you want to take exactly as it is, and then maybe make some changes. Just a pulley in things like our logo and so on. So what we have at the top we take a look. Our blocks pages on my templates. Blocks are exactly as his name suggests. Small block pieces that could make up an entire page. So, for example, you can see we're currently looking at the head of section. So all of these are basic templates for headers. If we come out to the left hand side, you can see we've got a drop down that allows us to go through and take a look at any of the other blocks. So what exactly are the use of blocks? Well, they've got a couple of different uses. If you want to use them to quickly prototype a design idea, you could pull in all different kinds of block pieces, create a page, create template files, create theme files, use those then, as a quick starting point, going to configure things to make them look a little bit more unique. Alternatively, you could just use things like headers and footers and ignore all of the other blocks. There's lots of different use cases, So with that being said, we've seen, we've got these different blocks under the pages section. If we jump over there, we've now got templates for pages, so these are instead of being blocks where it's an individual piece, maybe like a hero or head of section or a foot a section thes our entire pages so you can see if we click on any of these. We've got them little magnifying glass so we can preview it if you take a look. This is made up of entire group of different sections to create an overall page. Anything that's missing off these with most of the templates, at least, is the header on the Footer because they are a global element. Click back to our labor and if we wanted to, we can go through and take a look at all of these. You will find some mawr of the new designs, are grouped together for various different types of pages and have an overall theme applied to them about a theme. I just mean a style so you can see we've got this one for a photography portfolio kind of site. We've got a home page on about page, a contact page and so on. So these are all pages that or four together under one design theme. You could pull those in and then adjust them to meet your own requirements. Then, finally, we've got my templates now. Currently, there's nothing in here because we haven't created any kind of template file whatsoever. However, if you start to create templates, they will be listed inside you on. Every time you go into either create a theme file or a normal page or post or so on, you can access your own template faster. It's a great way we have the create reusable pieces and then just use those whenever you want in your page designs. For this, though, we're going to stick with the blocks click on blocks we're gonna find ahead of. That's in keeping with the clean style that we're going to use for this particular Web design. So because most of our design is nice, clean, simple white space, we're gonna choose ahead of this in keeping. So we've got a couple of different options we can choose from. And if you want a preview to see if it's gonna be something we like, we can hover over. Click the little magnifying glass on take a quick look at this one looks perfectly fine with only use. This is a starting point, and we can change any aspect of this should we want to. So you say is we insert this that will then insert this into the page for us. Close out that Broza and then allow us to start making changes. Now what you can see. We've got things happening here that don't make it look exactly the same as that preview did. You can see the get started looks a little bit weird. We've also got the home of the Blawg. Don't look exactly as we expected to. That's because thes haven't been styled on the widget level. So they're picking up the global styling. We just said that was part of the theme styles, so we can if we want to make changes to any of those aspects. This entire section is simply made up of normal, elemental widgets, so we can change anything we want. Let's do that. Let's First of all, let's get rid of this button. We don't want that as pilot designs recently gonna click on this option that allows us to select the row and then we can right click on. We can just say delete that will take that out of it and please that side of things up. If we come over now on the left hand side, we can get rid of this other call. There's no longer need is we're gonna click on there, right click, choose, delete. You see that? No puts our logo on a little bit large and not necessarily. We wanted to be, so we could make some adjustments there as well. We can select this particular object so you click and see that it's site logo. So again we get in the context information on the left hand side. Well, they do position that over to the left. If you want to make any changes on there, you can do exactly that. We could jump with style if you want to. We can control the maximum with that's going to be displayed So we don't want this to be absolutely massive. Will say we're gonna keep this to something like the maxim size is going to be 55. We could do maximum. What do you want to with whatever we want to do with it? Okay, so that being done, it's sort of the right hand side with a click on day, and this now is ended the knave menu. So now we can control exactly how the various different parts of this look. So we don't want this to be in this blue color with the underlines, we're gonna jump over a style tab, and from there we're gonna change things inside there. So I'm gonna come in and we can reset this back to defaults to make sure that we're not using any pre defined styles. Anything that's being set up in this widget is part of the template. So now you want to weaken simply come in, change the text colors. We're gonna set that to be this great color. You can see that No changes. We could adjust that as well. Just get anything we want. We can adjust any padding, we can come into our typography. And from there were going to say we want no decoration, and you see that no immediately removes that underline will change the way to make it a little heaviest. They stand out a bit better. That looks pretty good on. We're gonna transform this to the upper case, and we're just gonna drop the size this down to about about 15 actually. Just make that 14. So you can see now we've adjusted this on the widget level on that then overrides any settings we configure as part of those themes. Styles. Hopefully, this is kind of making sense the way it's all going. Let's adjust the horizontal parting. Just tighten those up just a little bit. We set those to about 15. That looks better now we want to We can adjust the harbor so you can see if we come over it . Nothing is really happening. So we're gonna change the text color on the this pale blue When we hover over, we now get the pale blue effect. So we started to style things the way we want active. We're going to the statement said There we want to set the active state on what that really means is let's just say, for example, we were looking at the contact page. Then it would mean that in the navigation of the top contact being the active page will be highlighted in whatever color we want. So we'll set that to be the slightly darker blue. So we keep in that theme styling. Everything is now nice and consistent. We've got everything the way we want. We've got a drop down here the moment we're gonna take that office part of the whole process. I've just got a couple of posts inside they we don't need. But if you want to style the drop down, you could do that inside Shiras. Well, at all. The same kind of controls, the normal, the hover, the active, your tax colors, background colors and all those kinds of things are available to you circus style, that anywhere you want. Okay, So final thing I want to do is select the entire section on from there really come to style . We're gonna make sure that border at the bottom is taken off. We're gonna sit me, set that to be zero. We have no border at the bottom. We can if we want to, though, we could apply things that drop shadows, whatever you kind of want to do to style this to make it unique. So what you've seen is we've used those block level elements. We pull that in. We've used that is the starting point on. Then we've gone through and made changes to the way or looks to make sure it is in keeping with a styling that we want to set up for our entire design. So These are great starting points, but we have full control over configuring every single aspect of the moving forward. Okay, so now we said at the styling, Let's hit Publish on Because this is a theme file, we need to apply a condition to it on all the condition. Means is when is this theme file going to be used? Because this is ahead of its going apply to the entire site. The condition is incredibly simple. All we do is click on add condition and you see the default option is include entire site. We can include or exclude, and we click on entire site. You can see we've got three options, entire site archives or singular. We're gonna leave this to entire site and we'll take a look at all these different options in a lot more detail in the dedicated tutorial to dealing with anything to do with building a theme with Elemental Pro. For now, we're gonna keep this really simple, straightforward. So this now will apply to the entire sites and hit, save and close that's now applied that that header will be on every single page we have on the site right now on also when we add noose new pages as we go through and build the site out. So now that we've completed the header, we can repeat the same process and create the footer. So let's just quickly do that. I'm not gonna go through in the same amount of detail, but it's just going to show you how quick and easy it is. So exit back out of their spectral dashboard back into our theme builder this time will choose Footer will add a new footer and we'll name this default footer Create a template. And from there, that'll take us into the browser. We can choose from all the blocks, pages and templates. We're gonna find something that I think is in Keep into this design and we'll just pull this one in. So we're just gonna insert this into a design. Once that's done, you can see that's pull that in. And now he wanted we could make changes to any of the styling want you. However I want to do is I'm gonna delete this particular section so deep that we're gonna keep this really nice, plain and simple. So there's ever foot of sections we're gonna hit publish out of a condition like we did, she was include entire site and say, Saving close. That's our header on Our footer created, adjusted and applied to the entire site. So that's how we start to work with these basic template files on build out some basic elements for a theme. 5. Building your Homepage: so know that the header and footer in place. Let's take a quick look at what this looks like. Insider design Before we move on, it's not creating our home page. We can do that in a couple of ways. Inside, Elemental. When we're in the editor, we can't simply close up the left hand panel on that will show us what the page will look like. And we can interact with ALS, the different elements on the page. Or we can come down and we can choose the option. That's like a little able click on there and say Preview. I'll open up a new tab and show us where to look like in a clean, fresh Broza. So now we've seen that there's a couple of things I want to rectify on here. We can ignore this default footer and content area. Those are basically going to be ignored later on. Anyway. They just sort of placeholders just to say that this is the content area. Let's close this town. Come back in. We're gonna do is what we're currently editing the footer. If we see something in the head, we want to make a change to do we need to jump back out of this and then go back into the template for the theme. Far for the header. We used tohave to do that. But now with the newer version of Elemental Pro, we get past that because we've got was called in line editing. So if I come up over the header, you can see one second over that I know get a sort of orangey yellow box at the top that outlines the head at and give me the option to edit the header. Now, if we click on that would switch over and start editing the header would no longer editing any other template. Files were specifically working with a header. So what I want to do is I want to make sure that this is separated. So we're going to click on it, click on section, we're gonna add in a little drop shadow of the bottom. So you come to the style section, come down to border on form. They were gonna choose Bach Shadow. Click on that. You'll see that no puts a faint shadow at the bottom. We can configure that in any way that we want to say gonna make it a little lighter. It's with a little more subtle And what's he done that I'm happy with, the way it all looks. So with that in place, there's one more thing I want to do. Currently, this sort of fits the entire width off the page. I don't want that to happen. So again, making sure we got the section selected but a comeback Odo layout and you see currently it as content is full width a select not gonna send it back to be boxed. That will know. Make sure that as the page size grows, it will make sure that it only goes so far before it stays in place. I just think that's a nicer way of working. So if we know just close this down, you'll see that now sits exactly where I wanted to and stays in line with. The way that the footer is currently set up has come back out of that will hit update and no one I want to go back to carry on editing the page that was originally working on. All I need to do is come back down to that section. In this example, the footer and you could see the footer is now in yellowy Orange says Edit Footer. We click back on that and now about to edit in the actual original page or template file theme Far that we were working with. So that's what I wanted to show in this particular part. Will now read the move on. Start building out our first page, knowing that our head on foot is already in place. So what do we can click on Come out of this exito dashboard on Was simply going to go back into our pages. Could all pages. We're gonna create a new page called Home Page and click on that. We're gonna name this home page and they were gonna publish this. I'm going to say edit with elemental. I want to go back into the elemental editor. We're now ready to start building things. The first thing I want to do is get rid of this really ugly home page title of the top. We don't want that. This is something that's part off the template for the single page. We'll get to that basically coming at the settings in the bottom left hand corner on where it says the option to hide title. We just enable that now with our title girl, we're ready to start building that page. So take it all of the skills that we've learned so far It's very easy now to start building things up because we know that everything is working in rows and columns. We've got widgets, weaken, drop in and we can build a various different parts of a page out from there. So I'm gonna go through this fairly quickly because the process is more a case of how do each of the sections working, walk, grief, configure inside there as opposed to how does elemental work? So the first you want to do is add a new section at the talks were gonna click to add a section on. We're gonna put in this single row column section Click on that that no positions that at the top vote page and we know ready to go through a start configuring what goes on with that, how it works and how we style it. So let's take a little look. We've got selected. We're gonna come over now. First of all, take a look at the layout options on from day we're gonna configure some basic values we're gonna do is we're gonna just come down until we get to the height option. The company is set to default. We're gonna use this a sort of nice slider image section at the top to draw attention to what's going on on the page on the kinds of things that we do as an architect in this example. But change that. We're going to set this toe, have a minimum height, is gonna click on the and that no opens up some additional options. You also see that the outline the blue outline has started the change based upon the value there's currently set as default, which is 400 pixels. Now you can see we've got that same option to adjust this for the different types of devices you may be looking at. So desktops, tablets and Mobil's We've also got the options for a pixel value. VH and VW, well, then also got the value you want to use. We're going to set this to be 650 pixels. So we have a nice, really nice looking ahead at the top that's gonna display some of the work that this particular architect has worked on. We then got column position. Now it depends if you want to put content into this, we're not putting content in. There were just prints of images as a background, so we don't need to worry about configuring anything. Inside these options. We jumbled the style section and from the style section. This is where we can no configure things. So currently you can see we've got background is set to normal. We'll also set the harbor so we can have a different background or different effect based upon where we most over this section or not what we want. Though one of these four options underneath, we've got classic the click on There. We can either choose a color on image. We can click on Grady Int. We can create a Grady in effect if we wanted to. We've also got video so we could drop a video into the background and wanted to use one, and we can use things like YouTube or Vimeo. You could even use a file that's located on your own system as well as selling the server. What we want, though, is slideshow, and this allows us to create a nice later with the top of the page. We have no images currently selected, so we no need to go in and configure this and set up some image you want to use. So we're gonna do is click this. Plus, we have no images. I bloated the moment. So what I'm gonna do is I'm gonna upload some images that have already sized, ready to start working. So drag and drop these images that let those upload and we're gonna pull in the sleigh does that we want to use. So this is the first light. That image we have on we do is we just gonna call this building one? It's always good to make sure you put some all text in there that relates to what's actually being used. We're gonna uncheck all these other options because I don't want to use those inside here because we didn't with a sort of gallery, a sort of sleight of background kind of thing. We could select multiple different images. Next up were to choose the second image on. We're just gonna call this building too, so I could say good for Seo purposes, and we're just going to say, Create a new gallery to click on that It was a insert gallery on. You can see now our images are placed into the background. These will transition through based upon the settings that are now set underneath. So you've got things like infinite loops. In other words, this will constantly keep going around between all the different images inside this particular section. The duration is is basically how long each image will state on screen transition. You can see we can do things like slides. We can do things like fade. So it's up to us to do exactly what we want there. So, you see, we got slide up that will wait for the 500 milliseconds or 5000 milliseconds, I should say, and then adjust. Put about the fate of prefer that transition duration as its name suggests, how long the transition of the fade lasts. So you can configure anything else you want on there. But I'm gonna leave that as is because I could say this is the focus of this particular part of the page. They come down underneath now, and the next thing to do is we're gonna drop in another new section. So gonna clicked at a section this time. We want to drop in a three column section, you click on that that's dropped in our three columns, but we want to make a bit of space above and below. Just to give this some breathing space, we're going to select the section, come over to our advanced section, and from there we can now adjust the different values for padding and margins and so on. So we're gonna do is gonna come in unlinked these, which means we can set the values independently. We're going to set the 1st 1 to be 100 for the top on 100 for the bottoms. It gives us lots of nice breathing space around. All the different parts of our site was section. We're also gonna jump back into the layout on we're gonna change the column. Gap column. Gap is, as its name suggests, how much space is given between each of these individual columns. We don't want things to be squished up next to each other so we can control that very easily. Gonna come in. We're going to say we want this to be extended. That just gives us a bit more space around the outside, edges off our content, speaking about content. What are we gonna put in here? The first of all, we're going to sit. We drag in a heading, widget and drag and drop that into this first section. Also come back a select a text editor to drop that into that section. So, you know, created three columns we put in our header. We put in our content, and obviously, at the moment, this head of just looks way too big. I don't see the text isn't what we want to say. So I'm gonna do is we're gonna change that text first of all, so we can select it, and then we can edit it in one of two ways. We can edit it on the page itself by selecting it on, just typing in what we want. Or we can use this section on the left hand side and do exactly the same thing. So we'll do that for the 1st 1 But as you can see, we know put our text in, but it still looks too big. So what? I'm gonna do is using the power of that theme style that we've set up. We're gonna change the html tag. So the moment is set to hate to we're gonna set this to hate four. So now the easiest way off replicating this is to simply come over select duplicate. And then we can just drag and drop that over to the same again weaken, duplicate, weaken, drag, and drop that over there as well, and then just make the changes that we want. So when you do is click on. We're just gonna change this now too. The second heading Super Easy. Finally, we could do the same thing you know is a couple of things you could do. Let's just take this call about Let's just delete that we know set this to be to What we could do is we're not just limited to duplicating widgets. Weaken duplicate the layout options as well. So, for example, we want to add in another column. There's gonna look exactly the same as the other two so we could do it Just right. Click on the column on, then just say duplicate. We now have not only a comp duplicate of the column but also a duplicate of the content in that column. So it's very easy. There's lots of different ways in which you can tap in and make the whole process of editing what you're doing just so much easier. So let's just finally put in the information for that Final One. We've created the first section of the top, both page and also the three key points of what our business is all about. Do you go about your section to add into the site now? And that's basically our little bit of a portfolio kind of thing to draw attention to some of the projects we carry on working on sewing Click. To add that in at a news section in. Once he got that section in place, we can come over and we're going to just choose the gallery option. Recently, Elemental Pro released the gallery updated Plug in, which just gives it a lot more functionality over the original one, which really was quite Paul. So thankfully, we now have a lot more control over how things look, such as Dragon that widget into place, and now we can come in and choose exactly what images are going to be used inside you, so we can do is we can click to add in either single or multiple galleries. We're gonna keep this simple and just use the single options. We're gonna click. No, when the nice things with this gallery is, it doesn't matter too much if your images are not all the same aspect ratio. So I'm gonna choose six images, most of which have the same aspect, but one that doesn't. So I say create new gallery will insert that gallery on this were poorly information in. Now, As you can see, everything looks nice and neat and all in line and matching. That's because this new gallery version has a lot more control over exactly how the images are going to be displayed, which gives us a lot more creative freedom to not worry about the aspect ratio of images. So let's take a look at some of the options we can lazy load if we want to end. All that really means is that they won't load the images in until the user scrolls down the page and kind of triggers this section on the site. They will then fade in. This helps speed up the low time on any pages you're working with, so it is something that can be very, very useful. We'll leave that as as we leave the lazy load on that. We then got the layout, and you could see we've got three options Grid justified and Mason me. Currently, the grid option does exactly what's name suggests. It creates a nice grid, and it will then set the aspect ratio for each of those images to make sure everything looks nice and neat. Justified will kind of do it slightly different thing you can see. We've got different aspect ratios, but it makes sure that everything fits into the layout and looks great. So if you are dealing with various different size and shape images, this is a great option to make sure that your Gary's look really, really nice. The third and final option is masonry, which does a similar kind of thing but doesn't respect the sort of that the shape of them as much you can see this bottom one drops down little underneath, so it kind of looks at the overall and then doesn't worry with the bottom role as it were. That's at this point to be the grid options. I want everything to be the same. So we're gonna set that to grid all march up columns. We're gonna change that from four. We're gonna set it the three, so it just looks a little nicer. And we've got bigger images to look at. Speaking of the images, they do look a little bit pixelated, a little bit low quality. That's because currently we using the image size of medium, which is 300 by 300 pixels. So let's just change that now depend upon how you've got your WordPress configured, you may see different values inside you, but just a normal wordpress. You should have thumbnail medium, large and full. We set this to be medium large, and you'll see that now increases the quality of those, but obviously also increases the final size a little bit. We have just the space in. So we gotta admit more of a gap around. Each of these different images were set that about 30 pixels, that looks quite nice. What we can do, that we can control what these images linked to and also the aspect ratio is being displayed. So the link by default is gonna go to the media file. You could change it to none. So you can't click on these. They just let me there to show you those different images you can choose. The media follows the default or a custom URL we leave it to media found, then that'll open it up. Insight A nice lightbox effect. The aspect ratio that you can see. We can configure that Anyway, we want to three by two looks quite nice, but you could if you want to do four by three, it would then refresh those and change the size and aspect ratio accordingly. You could do something like 1 to 1 if you wanted to, To make sure they're all nice and square entirely up to you and just let your creative juices flow on that we're gonna set that back to three by two. That looks pretty nice. If you want to, you can apply an overlay. So you see, when you're most over them, it does this overly effect, which is nice. If you are offering the ability to click and it opens up, that's pretty cool. You've also got the option to have either text go over there or just leave it as is. The default is it will just create a hover effect with nothing else. However, you could set the title in the description you can see if we click to expand those out. We got title caption ault description. So on. So each image. When you upload it to your media library, you can put things like all text descriptions and so on that would then use that data if you include it when you hover over entirely up to you. If you want to use something along those lines is one final thing I want to do now forever Gallery. And that's put a title on there just so people know exactly what this is all about. So it's just a list of our current projects. What we're gonna do is come over here, choose to drop a heading in above our gallery, which could put in the title off our current projects on will Set that to be hate three, which fits in quite nicely with the sizing. Once we hit updates, all those changes now are committed, so we can do is we can take a look at this on our page and see how this home page interacts with the header and footer that we've just configured as part of our theme that's going to preview this and you can see these. Our head of section will let that transition between the two images. You can see it in action. We scroll down, there's our three columns. There's a gallery, lazy loading. And if we click, exhibit opens it up now in a nice lightbox, there are a couple of things that we want to sort out. First of all, we haven't taken a look at how this will look on mobile devices and tablets, so we need to rectify that. We also see that we are a little bit too close to the foot of section. So again, all these things are incredibly easy to rectify. Has closed this down to go back into elemental. We're gonna grab this section which is our portfolio sexually click on that coming to the advanced tab on. All we're gonna do is unlinked the padding options and we're gonna apply 100 pixels at the bottom. This thing gives us a nice amount of white space underneath our gallery for the photo, so that's the first part. So next we need to go and make sure this looks good on all those different devices, says Click. To Open up, Responsive mode will start off with the tablet. No changes we make on the tablet mode will flow down to the mobile, so it's always worth bearing in mind. Some things you can change in Tablet on Bulwark Perfect your mobile and vice versa. You might see. Sometimes you have to make changes in the mobile to be specific to a mobile device. So let's take a little look. Our head of section looks okay, maybe a little on the large side. Plus, we've also got out of a navigation hamburger menu. Looks a little bit out of place there, being sort of stuck in it. We'll come back to that in a moment. Let's first of all, let's just deal with the page where then we worry about the headroom footer we'll click to edit. This section we're gonna do is we're a code or layout. We're gonna just own minimum height. So at the moment we see we've got minimum height and it's just picking up the value from the desktop. Let's adjust that to make it a bit more in keeping. Let's just say something like about 360 pixels. That looks quite nice on a tablet, which gold down there and we've got this area. The gap is probably a little too big at the moment. So will come into our advanced section. We're gonna just this not unlike these values have been to stay at the top, will try 50 and they and 50 in the bottom. That looks a little bit better. If he wanted to adjust these, we could adjust these as well. So let's just see. We want to adjust the size of this so we can easily come in that we could change that this in the cage five. You wanted to all. We can leave it at hate. For now, we can come to the stale tab, and we could adjust it on the widget level so you could say Let's commit the topography So we keep that hierarchy off the heading and we just adjust The size for this particular layout will adjust. That was set that to 15 she said. The 14 we might find you have a problem with the next one. We'll do the same. Then underneath will just click on this and we're just gonna come into our style tub, come into our typography and will adjust the size of that ever so slightly. We will also adjust the line height just to tighten things that there's what looks a little better on this kind of device. Okay, so we've no adjusted. That's what looks better on a tablet. We gotta go to the same process now for the other two instead of how to do it manually. There is a quick and easy way to do it if we right click on any of these widgets. So this example we've got the little text widget. We got a copy to come out of the tax widget in the next one going to right click. I would say paced style. And you see that no picture of the style we do the same for the next one. So paced style again. We could do the same for the head and we can right click on it. We can copy come over the next head in pace style on the same on the next one paced style, so we can easily adjust those to make sure that everything is in keeping the way that we want. I'll see you spend a little bit more time adjusting this to make sure everything fits perfectly, but it gives you an idea of how things work. So finally, we're gonna come over now into our little portfolio section. We're gonna choose this heading and we're the same again. We're gonna come into style section. I was simply going to adjust the size of that. So it's a little bit more in keeping with a visual hierarchy that we've got throat or site . So that will no override that. But only on this tablet version we come down, select the calorie, we come to our settings and from there were going to say we're gonna just this. We might say you want to still have three columns on there, so it all kind of fits a little bit better. And finally, we're gonna come in the advanced tab, and from there we're gonna just the bottom spacing. We're gonna set that to be 50 now. Well hit update. That's our tablet version modified. Finally we're gonna come in and choose a responsive mo from mobile. Click on there and you can see now things have changed again on the nice thing is because we using elemental widgets a lot of the control over how things resize and changes like that kind of control on that level. So there's a lot of things that are already done for us in the background. However, we can still adjust things. So where we've kind of gone over No, to this layer. We need to adjust the head of still start off, though with this slider section. So again, you can see this is pretty little too big. We'll adjust that bit more in keeping with Step that to about 200. I don't mind the spacing on the rest of it looks okay, but what I do want to do is change the alignment. So these no sit center so I'm gonna click on the heading we're gonna do is come over to the content set the heading so set that to be centered under the same. Then underneath were set that to be centered on we can use the same trick again. We can right click copy, right click pay style, right click pe still. So it's a quick and easy way of being able to quickly style one thing and then not have to go through the whole process of doing it every single time. So everything else looks okay on the page. That looks pretty good being a single section. Obviously we can adjust anything we want to on there. So the final thing we need to take a look at now is the head of section. So before we make any more changes, let's update that so we can save everything we've done on this page. Unless just use that in line editing that we switch over to start working with the header. So switch it back. First of all, over to Tablet Boat, Let's edit the header. Let's choose this option. No, we can just configure the way everything works on here. So you can see we've got this empty section over on the right hand side that we want to kind of deal with. So do is going to set that column. We're gonna set that to be 50%. You got that? No. Positions that over on the right hand side correctly. If we switch over now to Mobile Ville, we could do the same thing again. So we can do is we can click on that this time we're gonna set that to be 70 just so we have a little bit more because the locals have been the small say they're on again. Like I say, we can adjust any of the aspect of this to make sure everything sits perfectly hit update with no gone through Configured Header The footer The content for all the different types of devices. Such a switch back to desktop. As you can see now everything sits the way you'd expect it to switch over the tablet. It adjusts for Georgia Mobile Just's again. So we've configured all three different types of devices very quickly and very easy. All inside the elemental Editor 6. Building your Contact Page: So this section we're going to take a quick look at how we can create another page. This example is gonna be the contact page. So I've already got ahead and created a normal blank page inside WordPress. So we're now ready to open up elemental to start creating the content. Once you've opened that, at first I'm gonna do is come down to the setting section and disable that title like we did before next, that we're gonna put in the first section which is going to be, in this example the map to the location of the business to do come back to our widgets and we're gonna use a Google map now because we know this is going to be a single row column. I could if I wanted to click on add a new section or I could just drag the Google mapper, drop it over this little box. You can see it no goes blue. I can let go and no knows what want to do is just basically drop that into the page. So there we go. There's the first part of it done. Now we just need to set up the styling, said there's some different parameters, and so the first thing to do is select the section. Take a look on the left hand side. First thing, get rid of this column caps. We're gonna click on that and say, No Gap, What's he done that we're gonna say? We want the content to be full of wit, sister, to expound the entire full width of the patient about how big it is. Click on that. You can see that now goes up to the ages to keep this in keeping with the front page where we had this head of section with the image is set to 650 pixels high on the desktop. We're gonna do the same thing on here, making sure that we've got the actual widget selected. This time we're going to set the height to 650 pixels. You can see no the container. The section will automatically adjust for the size we said happiness. We don't need to set the height of this that's being dictated by the actual widget inside the next, we're going to set this up to be 14 on the zoom level, so a little bit closer to the location off this particular business, So there's the first part of it done. Next thing to do is gonna drop in another section that puts in the address contact details on a contact for says Click. Add in a two column widgets in a click. Choose this 70 30 layout and click on that. Choose the section, coming like we did before and just to play 100 pixels padding at the top on the bottom just to give us that nice space around things. First thing to do is drop in. The contact forms will come back with your widgets, scroll down until we get to a form dragon. Drop that inside there you could see there still picks up that styling we set up earlier on as part of the overall theme style. So that's nice to see. We can now go in and configure the various different aspects of this form before we do. Let's set this section this column come in and we're gonna put a bit more spacing around. That's we're gonna just come in. We'll set that to be linked and will put will try 50 pixels, 550 pixels. That'll do that looks quite nice. Let's choose our actual form. Elements will remove those labels. Come in now and we're just gonna set up some other things that are not gonna make this form all work. That's not woman to cover in this particular section. This is more about just the basics of building your pages and the fundamental skills involved. That's a justice, some roll gaps that set that about 25. That's looking pretty good. So there's the first part now we're gonna do is come over. We're gonna grab a tax data tear, drop that into the right hand side on which you could have put in the address. Let's just drop the text inside there. Let me go. Going to do now is make sure that this all sets nice and neat and tidy so you can see we've got padding on this section. But we don't have it on here so we can deal with that in a couple of different ways. We could add some padding in every wanted to all. We can just set this column to come in on set that to be middle. It's up to us exactly how you want to style. This one more thing to do is they're gonna select this section and we're just gonna put a little bit of a border around this Never drop shadow, maybe just to make it stand off the background. But I'll see you could get creative in any way you want it to says, Just choose a border with Set This to be solid were said to be a very pale grey on them was set this to be one pixel with the border radius off. Let's just six of like eight, maybe a little darker, so it stands out a bit better. There we go. So we know created a little border section around there. We can hit update on. That's the basics off our contact page all set up again. We can't just click the preview. The changes on the there's a remarkably school down. These have a contact for these, our tax for a dress, and so obviously there's a ton of things we could do to. This is one more thing I want to show you before we close this down. Let's just say you want to add a little bit off animation to this. Let me ring with a breathing space on their first divorce would just come in patting on the left hand side and was set that to be 20 just it stands off their actual. Just set that to be 50. Here we go. Let's just say you want to animate some of these aspects coming on the page. We could select this section coming to advanced kind of motion effects. Now we can If we want to create an animation for the entrance animation, just click. I want to say Fade in, right Click on that. You see, it fades in from the right. What we can come in and say Fade in left. Little failure for the left hand side. We could set the right hand column to do the opposite if he wanted to see you do motion effects. Come in and we're just going to say, Slide in or fade in left or fade in right? I said no. Let's just preview this page and we'll find that those aspects as we scold out, they animate in from the left and right outside. Let's refresh that you see it, probably. There we go. So we could easily are the different animation effect and should we want to to give the patient a little bit of life? But hopefully what you've seen is it's not complex to start working with elemental, elemental pro. 7. Wrapping Up The Course: So that's how we go about using elemental or elemental pro alongside WordPress to start creating more beautiful looking websites. The beauty of this is it's not that complex toe work with cuts out any need to start coding , but you can create amazing looking visual WordPress websites. Hopefully, this is where your appetite to the kinds of things you can do with this powerful combination. And if it has, make sure you hit that follow button below to be notified when the 2nd 3rd and fourth parts of this serious comes out so you can get past the basics past those core fundamentals. I start to really explore some of the powerful things you can do with this combination for building WordPress websites. So the future parts of this course we're gonna be taking a look at the theme builder will also be taking a look at the Papa builder and also how you can use dynamic content and think it through. The plug ins like advanced custom feels ports and so on to create a really unique WordPress websites again without the need to touch any form of code. While my name is being poor, see, this has been my skill share class on getting started with WordPress and Elemental Hope You enjoyed it. I look forward to working with you in future classes.