Beginners Guide to the Elementor Pro Part 2 - Theme Builder | Paul Charlton | Skillshare

Playback Speed

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

Beginners Guide to the Elementor Pro Part 2 - Theme Builder

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

8 Lessons (34m)
    • 1. Class Introduction

    • 2. What Tools Do You Need?

    • 3. Building a Global Header

    • 4. Building a Global Footer

    • 5. How To Build Archive & Single Post Templates

    • 6. Inline Template Editing Techniques

    • 7. How and Why Use Global Templates

    • 8. In Conclusion

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

Community Generated

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





About This Class

Part 1 of the Beginners Guide to Elementor.

If you're looking for a detailed quick start guide to building your first WordPress theme with Elementor Pro, this tutorial will get you there in double-quick time.

Learn the core skills and knowledge needed to get the most out of Elementor Pro's powerful Theme Builder.

The class covers the following core topics:

  1. The tools needed
  2. Building your global Header & understanding the conditions options
  3. Building your global footer
  4. Single and Archive theme files
  5. Global Templates... 

With the skills covered in this class, you should no longer be restricted to using pre-designed WordPress themes. You can let your creativity flow and build unique designs for yourself or your clients.

Meet Your Teacher

Teacher Profile Image

Paul Charlton

Designer & Trainer


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!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Class Introduction: in this particular class, I'm gonna be taking you through the whole process of creating a theme using elemental pros . Theme builder. We're gonna take a look at all the fundamental skills you need to know included some of the recent updates to things like theme styles on the ability to in line edit all these things to make the whole process of creating the custom things with elemental pro. A lot simpler, A lot more streamlined, a lot quicker. So if you're interested, join me in this class and I'm gonna take you through every single step of the end of it. You're gonna have a fully fledged knowledge exactly how to build your own themes using elemental pro. 2. What Tools Do You Need?: So the first thing we're going to do is download Install the hello theme. The reason we use the Hello theme is because even though we're kind of building our own theme, WordPress itself just needs to have a theme installed. We don't necessarily have to use it. And we're gonna use the Hello theme because it's basically just a bare bones theme by the developers off elemental itself. This makes sure that we've got wordpress happy and we don't need to worry about any extra bits and pieces getting in the way and causing problems when we set things up as part of our theme. Now on top off the hello theme, we also need to make sure that we've got elemental pro installed. Now you have to use elemental pro. The free version doesn't come with the ability to create theme files. We can save some basic templates like page and section templates, but not build a theme. So just bear in mind if you don't have the pro version, you can't really follow along with what I'm gonna cover in this particular video. So providing you got the hello theme installed. You got elemental on element or pro installed. We're ready to start moving on. So let's just jump over into the dashboard of Wordpress now and start taking a look at all the things we have to start building their own custom themes with elemental pro. 3. Building a Global Header: since I did my initial video on how to use the theme builder Enemy Elemental 2.0, things have kind of moved on. The core fundamentals are pretty much the same, but we now have some real time saving features that makes the whole process even more simple on evil, more comprehensive. But we need to set a few things that, first of all, so what they do is I'm just gonna come over into Elemental. We're going to come into the setting section from there. We're gonna take two options. We're gonna disable those the disabled default colors on default fonts to go check both those hit save changes. Now, why are we doing this? Because Elemental recently released the ability to create theme styles. And that means that we can set fonts, weaken set font sizes, colors, button colors, whole range of different things. All of this now means that when we create our own themes, we can also tell you all of that information as well. All those design assets we have to disable the default colors and default fonts. Otherwise this will work. The next thing to do is jump over to the appearance and the customizers so we can take a look at what options are available as part of the Hello theme just so you can see some of the things you can do in there, but primarily just to see that this is pretty much nothing to it. It's going to appearance and into customize. Once we come over into there, you can see we've got four tabs on the left hand side. The site identity menus, home page settings on additional CSS. If we wanted to apply some global CSS to the site, no. By using something like the Hello theme, we can benefit from some of the options that are available. If we come into the site identity, for example, we've got four different options. Weaken set up the logo, the title of the tagline on an icon, which is basically that give fabric on that will show up in the browser tabs. What I want to do is set the logo, so we're going to set this to use the dark logo on will say select. We'll skip cropping on. What this basically allows us to do is when we set up our head and we put our logo in there . We can use the logo widget as opposed to just use in ordinary graphic. And then if he wanted to change that global throughout the site that uses that particular widget, we simply have to come into the customizer. We come back out of this now, we could set up on menus inside you if you wanted to. All we can just do that in the normal way as part of the dashboard of WordPress. I'll leave it like that for now. It's gonna come back out. We're gonna leave everything else as it is and will hit. Publish. Just so we've got our logo at the top. Just a nice little head start on what we're gonna do. So now that we've gone through and set everything up, let's take a look at the actual theme building itself. If we come out of the template section on the left hand side, we've got theme builder. I'm gonna click on that, and that's going to take us into the basic theme builder section. Now you may be looking at this and thinking, Well, there's not really much going on. How do we work with it? Well, let me just explain this section, and then you'll see what we start to build things up, how this will populate with a different types of theme building files that we set up. So first of all, we've got the steam builder, which will show all of the different theme files that we create. Currently, there are none, but as we start to create them, they'll be listed here. We then have four different tabs, one for each of the different types off theme files that we can create. The header and a footer there pretty self explanatory. What they do, the single is basically, if you look at a blawg post, that's a single template. In other words, it shows the post where the archive will show a list of posts again. You'll see this as we go through now. If you had some really walk home it installed, you'd see some extra tabs inside your one for war. Commerce for single Ah, one for wall commerce archives works in the same kind of way. It just shows product as opposed to posts. That's the only difference between them. So let's kick this off by taking a look at the head of set up to click to go into header once we do that now, because we don't have no theme files set up in this particular section were presented with this first sort of create your first header. So we're gonna do is we'll say at a new header because we've chosen the head a tablet already knows that is ahead of we're going to create. But we click to expand that you can see we can choose from any of those other options plus some template files, which are things like sections and so on. So let's just leave that as head of That's perfectly fine. Next thing to do is give this template file a name. Now, what I tend to do is I have a naming convention that I tend to use for pretty much all of my projects. So if I'm going to create a template file, a theme file that's going to be used globally are always call it default something so in this example is gonna be default header. Now, if I wanted to create a head up for a specific section that will be different to the default header, I would name it something different but again, including header. So what I would suggest is just getting into the habit of creating a naming convention that you stick to because it'll just make your life easier when you come back to a project maybe six or 12 months down the line on your thinking. What did I name that particular template file? Use a logical naming convention. It just makes your life considerably easier. Okay, so we've done the two things we need to. At this point, we're gonna click on create template that will then go through open up, elemental on. If we've got any templates, we can pull in forms part of elemental or elemental pro. We could use those as the starting point. Or if we wanted to, we could start completely and utterly from scratch. Now, let me just take you through this section before we move on to start taking a look at actually building or changing things. If we take a look, we've got three tabs at the top. We've got blocks pages on my templates. Blocks, as this name was suggest are different block elements of a page. So things like headers, footers, hero services, those kinds of things. Those are all broken down into various different sections, which you can filter from on the left hand side, using this particular section because we're creating a header, it will automatically show us the header template files. That install is part of elemental pro. If we wanted to, we could change that to something else. So, for example, hero and they will show us all of the hero blocks I see. We want to stick to head the head of section because that's what we're currently working with, pages we don't need to worry about, because that's gonna show us full page templates. It's not what you want to use when we're creating Header on my templates. As we create templates, they will all be listed there so we can use those as and when we see fit, let's come back over the block section so that I do now is we're gonna find one of these pre designed templates and use those as a starting point for our particular design. So I don't take this particular header. Now you'll see that I will Logo is already inserted because we set that up was part of the Hello. Seem you see underneath we've got the place hold a widget, ready to put in our menu. But because we haven't configured a menu, nothing is showing up in the So we have now is a normal kind of page that we're gonna work with as part of Elemental. So we can click on any of these. We could make changes to anything we want. We can configure anything anyway we want. So we didn't want this green at the top. We could simply click on the Commodore style section, or we can choose whatever color we want from there. Such used this light blue We've no change that we've got our first template set up. Next thing going to do is gonna click on Publish. So once we click on publish, you can see it takes us over and says, we need to add a condition. And this is the sort of core fundamentals off. Using the templates as part of elemental pro To build up a theme, you just create conditions to say when on way a particular theme file will be used. So we can do is we can click on, add a condition and then We've got two different settings we've got include and exclude, so you can use whichever logic you want. So you say Include, and you see it currently says entire site. We click to expand that out for the drop down list. We have three options now. This is a context sensitive menu. All actor means is the menu will change based upon the theme file that were edited. For now, though, we're gonna say entire site is perfectly fine. If he wanted to weaken, add additional conditions, Suker's say at another condition, and you could choose exclude. So we could say Let's exclude this from the archives and I wouldn't say all archives and you can see we have extra options inside there so we could say now we set out to different conditions that this header would be showing the entire site excluding any of the archive pages. Let's just remove the second condition. We've no just set it up to say include the entire site. Let's hit saving close and that's our first theme file created. So we've now got a global head a little apply to every single page on our site 4. Building a Global Footer: Now, if we take a look at our test page, this is the home page before the head as being applied to it. So this is the Hello theme, basic bare bones layout. So let's just refresh this page on. There's our new header so you can see there's are Blue bar at the top. We've got a logo. Obviously, we're still missing that menu system, so we'll put that in a moment. So that's how easy it is. No, every single page we can take a look at one of these posts will jump over and you can see again. The actual single post template still looks absolutely terrible. What we do have is we've got a header applied to our page. So everywhere now this head is going to be evident. Now, before we move on, there's one other thing I want to show you. And this is one of the biggest things that have been added into elemental pro in the last couple of months and one of the reasons why I'm showing you this process of creating a theme from scratch again. So let's come over onto the left hand side. Broil widgets are well come to the little hamburger menu in the top left hand corner were clicked to open up. The different options, the preferences, the settings and all those kinds of things. What we're looking at is the third option called theme styles, so they can open up the theme styles. You can see it's no pops over and opens up a different set of options. We've got a range of different sections inside you. The background, which the global background color for entire site typography, buttons and so on. Now I'm not gonna go in this in tons of detailed because I've already covered how to use this in a lot more detail, his own dedicated video and also how I would actually personally use it. So I'll link those two videos down in the description below. So if you want to find out more about themes, styles and how the best way to use them is, check that out now. Another set the background for this and leave the background as it is, however, were committed the typography, and in there we can now configure all the typography options for our entire site. So let's do that. Let's set some of those up to start off with. So we're gonna do is going to the text color. I didn't They were going to set this to be a dark gray. Once you've done that, we're gonna come into the typography options, and from there we're gonna just choose the font family we want to use. So for this, we're gonna use Poppins. We have set a value of about 14 and you can see if we take a look on the right hand side. You can see this is changing things and we can see some basic examples of what we're doing . We could change the weight if we want to in here to whatever we want. We'll set that stomach 400 so it's a little bit thicker on. Will say we're happy with that Paragraphs basin. Well, it's up to us. We could set the values in pixels, EMS or VH. So let's just say well, set this to be something like 16 pixels. So we have a nice space between the paragraphs. So with that in place, if we want to, we can change our link color. So we could say what we're gonna do is so hard but we're just going to set this to be underlines will come in the typography set a decoration to underline and then on the normal , we're gonna set the color to be different. So we're set that to that light blue color so we'd know globally styled The link colors for the harbour on the normal state are going to see him for our headings. So what will happen is we can use this sort of hierarchies if we set the font to be a particular style. In this case, Poppins, you can see that the header has also styled to Poppins so we can leave that as it is, and it'll sort of cascade down through. However, if we wanted to, we could change anything to do with the different headings as well. So we can change the color on the topography. So let's just say for the typography we didn't want to use Poppins we wanted to use in a lake monster at we could choose that from there. You see, the font now updates and we want to We can change the font weight on there. And if you wanted to, we could also say that they go to the upper case so you can see we could easily come in. And the just things are just the sizing, all those kinds of options. And then we go. We could just basically do that through all the different headings one through to six to make sure that all the colors, the size, the styles, fonts, all those kinds of things have been set up. Buttons is exactly the same. We can come in to control the button typography, text shadow, the normal, the harbor state, the background colors, any border radius and so on. For fields images, we also have custom CSS At the end of it, the custom CSS would apply to the global styling of your site not specifically to a paid. So just bear that in mind. Once we've done that, we can click on update that will know to make any changes throughout the entire site. I've gone ahead, added in the menu structure just so I can show you how easy it is before we move on. Take a look of the footer to make changes and customize this the way that we want so we can do if you want to is we could easily come into any of these and make any adjustments we want to click on. The image will come into that. You can see we've got margin to the top bottle. Let's just step those to be a little smaller to do 10 of the top 10 at the bottom. Just we tighten that up a little bit. And if we come over to our menu widget juice, is there another menu widget? We've got a green color inside there which obviously doesn't make sense because not using the color scheme that we set up so we're gonna do is we're gonna come into this style section and inside there we can adjust the typography we could just to drop down the tobel button all of those kinds of things. So we just go to the harbor section. You can see there's the 0.2 colors being years, this sort of green color gonna change that for our blue were finally most over. Now we've got blue with the drop down. If he wanted to, we could adjust things inside. There will hit update What's he done that will jump back out our test page? Refresh that you can see there's no tighten things that the right colors are being used and so on 5. How To Build Archive & Single Post Templates: next of all, let's take a look Now are creating a footer for the theme builder. We're gonna talk to the foot of section, I would say, Agnew footer, you could see footless pre selected on a gambling with same thing. So default footer, click on create template Once you do that, that'll take us over And we could now take a look at the blocks. So what I do is I'm gonna find something I think is kind of in keeping to what we've been doing will insert that into our template, so that now puts our design into the page. Obviously, there are a couple of things we need to sort out. The colors are all wrong this point in time, so we need to correct that. It's very easy. Only to do is click on any of the items we call it the style tab. And you could just change this color to whatever you want. You could literally take it over there or you can set the color. Let's just clear that and then that will pick up any default colors that you said it was part of the themes down. If you want to override that you can simply come in and choose the color you want special set to this pale blue, for example under the same without button and leave who come into a button Come to our style section I'm gonna come down to your button Change that set that are blue color And we're now getting things back to the way they should be Same goes for the little line at the top You city come to a style section Could or border reset that to be a pale blue And finally we've got the navigation You state that toe blue as well Ok, so that's our foot dissection All set up hit, publish and we get the same thing again. We can now add other condition. They're gonna click on our condition. We'll leave that set to entire site. It's saving close. That's now our foot dissection. So it's come back on your website refresh our test page school down the page. Once you get the bottom, these our new for the section all set up in place and there every single page to go to one of the posts. You can see how for this action is all inside there. So surely archive tab again. We're presented with that same option that says create your first whatever which using. So I say creating a new archive. We're gonna call this default post. Okay? Who created a template? Once you create a template with be brought into the blocks area we're gonna do is gonna close this down. It's going to take us into our template area. Now, As you can see, our header is in place and I will Footer is in place. Let's create our archive. So when we open up on archived template, you could see on archive theme a template you can see on the left hand side. We've got three icons to start off with an R widgets, the archive title, the post of the author box. Because we've chosen an arcade for this particular theme file, it knows that those are probably going to kind of things that we're gonna want to do. Let's play in the archive title will just drag and drop that widget in. You can see that just pulls in some pre hold template information. So we're gonna do is we're gonna add a bit of space to this. So is simply gonna come over to this particular block. Now, you see, we've got a bit of an issue here because it's so close to the actual navigation. When we try to get to the little block, it makes it very difficult. Weaken, deal without quite easily weaken. Simply come over and use the navigator. Option clicked. Open the navigator at you can see Now on the right hand side, we got a new entry, at which point this will show us all the key sections, his birth bearing in mind. At this point in time, the header and the foot are not considered to be a section inside the archive template that we're creating. So that's why you're not seeing those. They it's only showing us the actual section. We've just dropped in. But what we can do is we can click on that that will activate the section. And now we come over on the left hand side and we can use the options in sage here. Let's just say we're gonna uncheck these values at the top. We're gonna add in 50 pixels of spacing. Now we've given us as a bit of breathing space at the top this comeback Goto widgets on the left hand side, and it's just drag in the archive posts and drop that underneath the title. You could see that no pulls in the basically out foreign archive page. They're just closes navigated down now on the right hand side again so you can see this has given us the title of the top on three posts from our archive. If we do it this way, we now have a lot of control over exactly how weaken style things, how we can lay things out. Now. You still have the same level of control. If you were using one of the pre defined blocks, however, you have a starting point than you might have to make changes to everything. This just starts off with only the elements you want to drag in without being said. We can simply choose this, that we can choose a different skin if we won't do it. A skin is just basically, the design that's going to be used currently is using the classic. Let's change that over the cards that already looks a lot cleaner and a bit more more than we've also got 1/3 option, which is full content on its not the nicest looking. But it's kind of what you'd expect is part of the default way that most themes work in WordPress. We're gonna take this back up and go to the cars Go. I think that's the nicest looking option we have now. All these different pieces of components inside this particular layer could be controlled so we could say the number of columns we could say. We only want to put two columns in. You can see that immediately updates. Do you want to show the image we can say yes or no so we could get rid of the image completely if we wanted to. We'll put that back to yes, image size. You can see it looks a little bit pixelated, though it doesn't look the best, so we can choose a different image. Science. We can go to the medium, and you can see that now looks a lot better, a lot clearer. The image ratio is basically how we Condell with the height of the size of this image. So if we just drive this down a little bit, you can see we can position that to get a much nicer looking layout, so we just adjust this a little bit. I think about 56 is gonna work perfectly for the ratio that I've got set up for all of my thumbnails. We've also got on categorized, which is just basically the meta data saying what taxonomy this is associated with so we can get rid of any of these kinds of things, including things like titles and excerpts and so on. So, you see, we could take the title out if you wanted to put that back in. We're gonna move the except we can change how much oven. Except they're actually, yes, we may say we want 30 words in there to give us a little bit more so you can see we can fine tune and configure this exactly as we want to. What kind of the bottom? We could say. We want to put some pagination in there, so we're gonna say numbers were say that numbers on previous and next. So when we get mawr actual entries into a blogging, the archive pages will have nice pagination at the bottom. So now that we're happy with the way that our new archive page isn't set up, we'll click on Publish. And again we brought back to those conditions. If you click on add condition this time, you can see we've got all archives is set up is the include condition. If we click to expand that, we now start to see some mawr. Those options that I talked about from this context menu. So because we're dealing with an archive, there are quite a few different types of archives throughout a typical WordPress site. But you can see we've got all our case, which will apply this template no matter what, it'll do it site wide. For every single archive, there's going to be used for a lot of cases that might be perfectly fine. However, if you want more granular control, you can choose different our case for different page layouts. So author archives could be different for the date RK from the search results page and indeed, the post arcades. You can see we've got the post our cave categories, direct Children or director child categories off. So if we chose something like that, you can see that no opens up another option, at which point we can then come in on. We can filter even lower. But we're gonna set this to be nice and simple and say all archives will hit Saving close. We've now created the archive layer for our WordPress site. So let's just jump back over now into a test page. Come back to our home and I shouldn't see now that's picked up the archive layer that we've just chosen. So everything is no set up the way that we want. If we click them to go into one of these, you can see we still have the single template that we need to update to make sure that looks as good as it possibly can. Gonna come into theme builder company, single option. Add new single. Well, I do know you see their single Select the post type with a click on there. Now, this is where things can get a little confusing. When you're working with WordPress, you may consider the fact that we've chosen a single and that's going to be for a single post. Why is that related to both posts on pages on the four or four page surely opposed to the page is different. Well, the way the WordPress works is it considers pretty much everything to be a post on when you group those post together. It considers that to be an archive. In other words, a group of posts. So once you kind of get that concept into your head, you stop thinking off them being different. They just have slightly different options. So we can set up a single template for both posts on pages on the four or four page. They could all be different for this example. We're start with the Post. Click on Post. We're just gonna call this default single, post it create template that'll take us in. Now we can choose any of the pre defined blocks. If we want to use one of those as a starting point. Let's just choose a design that I think is quite tidy and in keeping what we're doing. So it's just insert this particular one that'll download all the relevant files now and drop the design into our page for us. You see, there's all the layout all set up inside our design. Now we can again, like I say, make complete letter changes to this. You can see that the image at the top doesn't look quite right. We could come to that image there and you can see we can adjust the height of this So we could say we want to set that to be 600 for example will apply that and you'll see that'll adjust things accordingly. So we could go through now configured this, make any changes from this basic template that we've set up. Do we chosen on it Could easily come in and make any changes will hit. Publish on there. You can see again. We've now got conditions set up and again, we've got a range of different options. We open up the post section, you can see there are even mawr options inside you to get to a really granular level of control. Now, you could have you wanted to step. This is a global value for all singular. Obviously, that may not always make sense. It may be dependent upon the kind of citing setting up, so I don't leave this set to be posts. You can see that it says next. That is all. However, if we wanted to, we could click on there. We could filter that don't a specific posts, or depending upon if we choose something different inside year, we may say in child categories, for example, and then we can click and we can choose different child car degrees and filter those out. So it's a posts would say, saving close. And that's how a single template created Come back in your page will refresh this now. And there's our new design. All set up pulled him from that template. So a basic theme is now set up. Come back to our home page. You can see we've got our archive. We got a header. We've got our foot. If we come into any of these items, we've also got the option now to see exactly what we got laid out as part of that block post. So that's the basics of those four key theme files that we need to set up 6. Inline Template Editing Techniques: previously when we were working with designs and templates and so on, whenever you created on our cave or a single and those kinds of templates, your head on your foot area. If you wanted to make changes to those, you'd have to literally come out of the page that you're editing on. Go into either the header or the footer and start add it in there. You don't longer need to do that. You can come over any of these and you'll see it now shows us in yellow. Is opposed the normal blue for the head out if he scolded the foot with the bottom, does the same thing They we can now who want to simply click on that way, says Edit the header or footer Click that will no take us directly into the footer in this example, we could make changes to it. Yes, you can see we're still in line. We still have the whole sort of template that were working with in place so you can come in work. Whatever change he wants. Let's just say you want that logo. We want to set that to be the left. We can now click on update That's no updated the foot to template. When we're ready to go back to a normal page template, We could simply come back over that you can see that now is in yellow We click edit single and you find out we're back into editing The single template Could be the archived template Could be any other templates But you can see it's quick and easy And the same goes on to say For the header we can click on Edit Header We know Jump over to the head of section on We could know make changes in state you so we could click on this We could say, Well, this many of the bottom is kind of annoying me a little bit So we're gonna come under that gonna put some padding at the bottom, for example. Let's just say we gonna put 20 pixels of parting in the So we made some changes to that hit update on then our heading has not been updated. We just click back on edit single and we carry on editing the single post template. So it makes it much quicker and easier, not less round editing going on. We can kind of do in line editing so much quicker and easier more those just little updates that I want to bring your attention to because it just makes your life considerably easier . 7. How and Why Use Global Templates: There's one final thing I want to show you before I wrap this up. And that's global widgets. We covered this right back to the beginning. I just mentioned we're gonna take a look at it. So let me just show you what a global widget is and why I think they useful, especially when you're working with the whole theme building aspect. Let's just say that you had a testimonial section and you wanted to use this on the same area across all of your archive pages. But you had multiple different templates. For those are caves, like we just saw, you could set up multiple different temperature of various different parts of your site, even using the same kind of archival, the single and so on. The easiest way to do that would be to set up a global widget. And then, if you make a change to one of those, you could have that reflect upon all of your templates. Let me just show you how we do that. We got a new page. Doesn't really matter how you do this. I'm just gonna use a page as an example to show you the difference between pages and templates. And so So we're just gonna call this global widget? Well, just published this page We'll edit with Elemental once the elemental editors opened that we're getting a little search for testimonials, grab a testimony, which it drop that into the page we're going to do now is going to quickly make some changes to that. So we're just gonna add in an image, for example, will adjust the font styling and so on. Just so we've got some sending a little bit more unique than the default so we can see the changes we make. So we're gonna set that to be italic times the roller, So we'll say we're happy with that. So now what we need to do is save that as a global widget. Now, this is where you have to understand how global widgets work. This is a widget, not a section or anything else. So, for example, if we come into the section that contains the widget on we right click, we can say savers template. Every click saves template, weaken. Save it as a template we can't save. It is a global widget. So how do we get around that? What you don't You have to come to the widget that you want to save globally on. Then right? Click on that. And shoes Savers global. So now we say savers global, we're gonna call this global testimonial widget. Now you again you'll see that my name and convention just makes my life easier If I say global a beginning I know this is a global widget and I know global testimonial widget. I kind of know what is. It says it's on the 10 hit save. Once we do that, you'll see now where we normally have just the element we go A normal widget inside there if we come to the global section will now have a list of all of the global widgets we have on you. See, they've also got this little toe yellowy orange folder in the top left hand corner that Justin notes that we've got a global widget. So now update this page so you can see everything is set up in there has come out of this. Now go back to our dashboard and we're gonna come into a template section into a theme builder. We're gonna go into our default single. We're gonna edit that with elemental. We're gonna put this at the bottom of every one of our single post templates. So you come into this, we're gonna just had that global widget in so quick to out of new section. We could start this section anyway. We want, Like I say, it's independent off the actual global widget. So click on that will just put a bit of spacing above and below. Just we could make a bit of room on this which is 50 at the top on 50 at the bottom. So we got a bit of space. Now we come back into a widgets code of global. There's our global testimonial widget, weaken, drag, and drop that onto our page and you can see that drops it in there but also gives us some additional options. We can edit the global widget or weaken unlinked it from global. If we edit the global widget, any changes you make to that will be reflected throughout the entire site that's linked to that global widget. If we want to unlinked it and make a change to this one that doesn't reflect on all those other global widgets, we can do that. We basically unlinked its global connection. Hope that makes sense will say update on them. So we've now got this global widget set up. Now then, let's just come back of this. We could see we've got the Laura medicine text from John Doe. So you say we're happy without everything is all set up with exit door Dashboard will come back to our initial page That's got that in there will come into a global widget who edit that with elemental we're gonna do is we're gonna change the tax a little bit. So we're gonna click on this. We're gonna click, edit and they're gonna do is gonna grab this and we're just gonna duplicate it. So we'll put to lots of the same thing this we know. Got more tax in there, will hit update. That's the updated this instance of it. But also, if we come back and take a look at one of our single pages, just refresh that scroll down and you could see No, that's also been reflected in this particular section as well. So that link means is a two way link. We can update it on one and then that will reflect right there throughout their sites. This is a great way of doing things that you may have a sign up form for your mailing list that if you quickly wanted to change provider from select male chimp tomato light, you could make one change and then that will be reflected upon the entire site everywhere that uses that global widget. Super simple, a real time saver. 8. In Conclusion: so that's the class robbed up. Hopefully what this is demonstrated is that creating themes using elemental pro on the tools that are available not complicated but does give you a telescope for creating beautiful looking WordPress websites. If you enjoyed the class police check outs of my other skill share classes to help you expand your skills and knowledge in WordPress and lots of other related Web design skills, well, I see pull, See Hope you enjoyed the class and hopefully I see you again soon.