Introduction to Elementor workspace - WordPress Tutorial

- [Instructor] Before we get into working with Elementor, I'm going to upload some media so I have some things to work with. I'll go into the media section of WordPress, I'm going to click Add New, and I'm going to navigate to my computer where I have a variety of media files that we'll be using in an upcoming project that we're going to work on for this course. If you go ahead and navigate to the website media folder, you'll see that there is a collection of images and there are different file types as well as a couple of videos. I'm going to select everything, and I'll drag this to the WordPress window. This will go ahead and upload this media into the WordPress environment. Great, now we have some media to work with. You'll notice that once you've installed the Elementor plugin, you'll see a new admin navigational element called Elementor. This is going to give you access to all things Elementor. You can look through these areas, but for our project, as well as most projects, we don't really need to make any changes to these settings, as all of these settings that we want to augment are also called settings or page settings and they're located within the Elementor Editor. I know this can sound a little confusing, but these are the primary settings that we want to edit and use to control our page. Let's take a look. In order to access these settings, we're going to need to access the Elementor plugin. To do this, we need to work from a page or a post. I'm going to create a basic page. We'll just call this page temp for right now. Once you name the page and you publish it, you'll have the ability to edit the page with Elementor instead of editing it right from WordPress. We'll go ahead, and we'll click Edit with Elementor. This immediately is going to put us into the Elementor portion of WordPress. Now let me introduce you to the Elementor Editor layout and the structure of how Elementor works. The Elementor Editor includes six main areas. The first one that we're going to be talking about is the panel header. And this gives us access to Site Settings. We also have the option to go and change some preferences as well as a Finder, which is a quick way that we can navigate other pages or other sections within our website. We'll be using this once we start building out pages. In addition to the Site Settings, we also have a link that takes us to the widget panel. If we want to return to the default view, we'll use this arrow, which takes us out of the Site Settings, and now we're back to the default view. When we click the widgets, the widgets of Elementor are going to be displayed. We can select a widget or modify a widget settings here. If you look through the widgets, you'll notice that some widgets have a little padlock in the upper right-hand corner. This is an indication that these are part of the Pro Version of Elementor. For now, we'll be sticking with the free Elementor widgets, but I did want to mention it so you know why some are not available right now. I'm going to collapse this section of the widgets so we can focus on the widgets that we'll be using in this course. The next area that we have is down at the bottom of the Elementor window. This is the panel toolbar. This contains several tools. It has a link called Settings as well. This is a basically a quick way that we can get to specific settings that are available throughout the course. It is worth noting that these are different settings from the settings that we access by clicking the hamburger menu and going to the Site Settings. In addition to the Setting tab, we also have options to open a Navigator, and the Navigator is a quick way that you can access the various page elements. Since I don't have anything on my page yet, this is not of much help, so I'll just close it for now. We also have a History tab, which allows us to go back. So if we make a mistake, we can recover previous iterations of our page. We have a Responsive Mode, which allows us to view our page at different sizes, and we have an option to preview changes, which will allow us to preview any edits that we make. In addition, we have an Update button, and this will appear green once we've made changes to our page, letting us know that we need to update the page in order to save those areas. The next area in the Elementor window is this content area. This is a blank slate, where you can drag and drop widgets and design the various page elements here. Within the content area, we have the Add New Section or the Add Template buttons. These will allow us to create a new section on our page by using the plus icon, or we can access pre-made templates. We can also make our own templates. This little icon right here will allow you to collapse or show the panel toolbar. So, sometimes, you might want to just get this out of the way so you can really preview your page and see what's going on. Now you're familiar with the various areas of the Elementor interface. Next up, we'll learn how we can utilize these to modify a page.