Getting Started With Elementor Hosting [Walkthrough]
Learn how to create your first Elementor WordPress website with Elementor Hosting.
In this series, you’ll learn how to create your first Elementor website. We’ll cover:
✔︎ Elementor My Account Dashboard and hosting settings
✔︎ WordPress Admin Dashboard
✔︎ Installing an Elementor website kit
✔︎ Editing your website in Elementor
✔︎ And much more!
Welcome to our Getting Started with Elementor Hosting walkthrough, where you’ll learn how to create your first Elementor website.
My name is Aviva, and I’m an educator at Elementor.
In this walkthrough, we’ll cover:
- The Elementor My Account Dashboard and an overview of the hosting settings, including connecting a domain.
- The WordPress Admin Dashboard, where we’ll install a website kit and take a tour of the WordPress Admin,
- And finally, we’ll cover the basics of the Elementor Editor and edit our website homepage
- and header, as well as learn how to add new pages and content.
The walkthrough is split over several videos, so you can quickly find your way to any topic, if you ever need to go back.
Ok, let’s get started!
Learn how to manage your Elementor account and hosting settings from the My Account Dashboard.
In this video, we’ll cover:
✔︎ Elementor My Account Dashboard and hosting settings
✔︎ Contacting support (CX)
✔︎ Website staging
✔︎ Connecting a custom domain
✔︎ Site lock
✔︎ Website Backups
✔︎ Website Reset
✔︎ Access the WP Dashboard
✔︎ And much more!
This is the Elementor My Account Dashboard. And as you can see, I’m logged in over here and this tile here represents my website and we’ll come back to that shortly. And on the left, we have a panel, and you can see the first tab on the panel is website. So that’s where we’re located now. And below that we have the subscriptions tab.
And the subscriptions tab takes you to manage your subscriptions. And there you can manage your billing and your auto renewal. And below that we have a few other links, including frequently asked questions and support. So speaking of support, you can see down here in the lower right corner we have this icon and you can use it to contact support at any time, either from here or from the WordPress dashboard or from the Elementor editor.
So basically anywhere you’re editing your website, you can contact support. So that’s pretty handy to have there. Okay. So now let’s go over to the website tile and you can see when I hover over it, I have three options.
So the first option is edit with Elementor and if you click edit with Elementor that will take you directly to your homepage in the Elementor editor where you can edit it with Elementor add below that we have “Open WP dashboard,” so that is pretty much as it sounds. It takes you to the WordPress admin dashboard.
And the next option is “Manage this website.” So let’s go ahead and we’ll click there. Okay. So this is where we’ll manage most of our hosting settings. And you can see the first thing we see here is our default website domain or your URL. This is the domain that comes by default when you set up your website so you can see mine is getting started.
Yours will be something else. And then below that you have your subscription ID and below that you have the staging environment. So if your plan includes staging, then you can create a staging environment by clicking here. And basically a staging environment is a place for you to test out changes on your website before you push them live. So you could test out new plugins or updates to plugins or just about anything.
Below that, we have “Manage domains.”
Manage domains is where you can connect your custom domain and you can see the first link here is to buy a domain. And if you click this link, it will take you to some information about purchasing domains and domains in general. If you don’t have a custom domain yet, that’s fine. You can go ahead and work on your site as long as you’d like with your default domain.
But once you do have a custom domain, you’re going to want to click Connect my Domain. So I’m going to go ahead and click connect my domain. Okay. So I’ll go ahead and type in or paste in my domain name and click. Let’s begin. So as you can see, it’s recognized that my domain is registered with GoDaddy, so it’s giving me instructions for connecting my account on GoDaddy.
If you have a different registrar, the instructions will be a little different, but it will still take you through step by step. So I’ll go ahead and sign in. And the next step is to click Connect. Great, success! I’ll hit close and one more time “connect my domain” and okay, great. So basically I’m done with my part and setting up the domain.
The rest is kind of happening behind the scenes, the technical stuff, and we can go ahead and go back to the dashboard. Just keep in mind that the process can take up to 72 hours. For me, it’s personally always gone faster, but just know that it can take up to 72 hours. So I’ll go ahead and click back to the dashboard and here you can see that it’s in the process of setting up.
It’s showing the steps. The URL has been added, and now it’s checking the DNS. So meanwhile, we’ll continue on and below that we have email authentication so you can set that up once you’ve connected your domain. And this is just to make sure that emails that are coming from your website, such as form submissions, have your custom domain as their email address.
Okay, below that we have Site Lock. Site Lock is used to hide your page from visitors while you’re building it. It is on by default. When you set up your element to our hosted website and if you do want to share it with, let’s say, a colleague or a client, you can click here to view the code and you can copy it from here.
And once you copy it, you can send it to your colleague or client to view, and you can also reset the PIN if you want. And when you’re ready to go live, all you need to do is hit the toggle button and turn it off and your site lock will be off and public.
Okay, So below that, we have Backups. Backups are created every day by Elementor Hosting automatically and you can restore previous versions of your website if you ever want to go back and you can see you have options to rename your automatic backups, you can restore them, you can export them and you can delete them as well. Now you also have the option to create a new backup.
So it’s a great idea to do that before you make any big changes to your site. And it’s basically like a big undo button. So to do that, you can just click create new backup and you can give it a name and then you would click create new backup. So I’ll go ahead and cancel that out. Let’s scroll back up and okay, great.
Ok, first of all, I have a message telling me that my domain is already connected, so that’s wonderful. You can see how fast that was, and if we click here, we have this option to reset our website. So resetting your website takes it back to the very beginning. Before you had any content or any pages or settings or anything.
So only use that if you really want to start completely fresh. Now we’re going to go into the WordPress dashboard.
Install an Elementor website kit, and tour the WordPress dashboard.
In this video, we’ll cover:
✔︎ WordPress dashboard tour
✔︎ Kit Library
✔︎ Installing a Kit
✔︎ Posts vs pages
✔︎ Themes vs kits
✔︎ Accessing and editing pages
✔︎ And much more!
So this is the WordPress Admin Dashboard, and you can see here we have a large screen with video and a few links here. You can go through them. And on the left we have this panel with various options and settings and we will go through the essential settings soon. But prior to doing that, I wanted to show you the pages section.
So I’ve clicked on pages and you can see I have the sample home page here. This is because I did not set up a kit when I created my element to our hosting website. And so instead it comes with this default sample home page. And if you didn’t create a kit, yours will look something like this as well.
I want to go ahead now and install a kit so you can see how to use a kit on our website. So let’s go ahead and we’ll move over here to the template section and to the Kit library. Okay. So this is the kit library. And the Kit library has a number of website kits, and a website kit is basically a full collection of matching templates you can use and you can edit to create your own website.
So you can see here down the left we have various ways to filter and we can also search our kids and you can just scroll through if you want to see all the different website kits. And when you want to view a kit, you can click on it and clicking a kit takes you into the preview. So here you have your page and you can scroll through and you can see some of the content on the home page.
You can see the footer down here at the end and it has a pop up. You can also click through the different pages on the website and you can see the website at different screen sizes. So you can view of that tablet size and you can view it at mobile and you can also click here to overview. And that basically gives you a bird’s eye view of all the pages and parts that are included in your website.
Once you’re ready, you can go ahead and click Apply Kit, and then I get a prompt asking me if I want to customize the kit and just apply certain parts of it, or if I want to apply the whole thing, I’ll go ahead and click, apply all and I get another prompt asking me to enable unfiltered file uploads.
So basically this is for SVG files and if your kid has SVG files, it will ask you for this and you’ll only be prompted one time so you can go ahead and click enable and you shouldn’t be prompted again for this. And if you don’t have the SVG files in your kit, you won’t receive this prompt. Okay, now it’s going ahead and setting up our kit and this can take a few minutes because there are a lot of pages and assets and images to add to our website.
Okay, great. Our kit is now live and it shows us a list of what’s been added and we can go ahead and click close and now we can take a look at what was included in our kit. So let’s take a look.
Okay. So the first thing you’ll notice across the top is this black toolbar. And this toolbar is not actually a part of your website. Your visitors will not see it. It’s basically an administrative toolbar and you can turn it off if you don’t want to see it. The below that we have this header and in our header we have the logo and right now it’s a placeholder logo will replace that soon and we have some navigation links and a button and if we scroll through you can see we have content and here’s the popup at the end and I can go ahead and close that out.
And then if I click on work, this is our portfolio. So you can see this portfolio here. And if I click on it, any individual portfolio, I’ll get the link to the post. So posts are used in blogs and portfolios and basically anywhere you have a listing website and we will go back to the WordPress dashboard to talk about those.
Okay. So back in the WordPress dashboard, we said we have posts, so I’ll go ahead and click on posts and these are the posts that were included with the kit. Now you can go ahead and you can edit them or you can delete them and create your own. And again, posts are for listings and portfolios and blogs. They are not the same as website pages.
Moving on, we have media and if I click on the media library, this is where all the media items are located for my website. So that includes things like images, and audio files, video files, etc. And what you see here is everything that was included with this kit. So they’ve already been added to the media library below that we have pages.
And if you recall before, when we went into pages, we only had the sample home page because that was what came with our website when we didn’t install a kit. So now that we have a kit, we have all these other pages here about contact US home, etc. and we don’t need the sample home page anymore. So I’m going to go ahead and delete that.
I’ll hover over it and you can see now I have more options and I’ll click trash to delete that page. And as you can see, it’s moved to the trash and it’s not really gone until you go into the trash and delete it permanently. Okay, So we’ll come back to editing the home page in just a moment, but we’ll first continue our tour of the dashboard.
So next we have comments, which is where you manage your blog comments. And below that we have our mentor with some settings and tools, and I’ll go ahead and click tools and click import export kit. And if I scroll down here, you can see that I have the option to remove this kit. So of course we’re not going to do that.
I just wanted to show you how to do that in the event that you decide that you don’t want to use this kit and you would like to start with a new kit rather than install one on top of the other, you can go ahead and remove it for a fresh start. Okay. So below that we have templates which we were in before, which is where we had the kit library and we installed our kit and you have some other template options there as well.
And below that we have appearance. In appearance you can see we have themes now, themes are different than kits and a theme is something that is required by WordPress in order to run your website. And in the case of element or hosting, it comes with the hello theme pre-installed. And the hello theme is what we call a vanilla theme or a starter theme, and it’s a really minimalistic theme without much styling.
And the reason for this is that we will use our kit and the element or our editor to style our website. So there’s no need for you to go into the theme or the customizer to customize it, because again, we’ll do that from the kit and the element editor. And below that we have menus, which is where our navigation menus are managed and we will come back to that in a bit.
Below that you have your plugins, which is where you can manage your plugins and below that we have users, which is where you can manage your users and you can also turn off your top toolbar that I showed you in the website preview from there and below that you have various other tools and settings, but these aren’t essential to getting started.
Okay, so now looking back at our pages, you can see the homepage has the words front page next to it. This indicates that it’s our home page. In the event that your home page was named something else, you could quickly locate your home page. And also the browser will understand that this is your home page. So let’s go ahead and edit our home page now.
So I’ll click edit with Elementor.
Learn the basics of using the Elementor Editor.
In this video, we’ll cover:
✔︎ Elementor Editor
✔︎ Web page structure
✔︎ Editing widgets and page content
✔︎ Global styles
✔︎ Adding new content
✔︎ And much more!
Welcome to the Elementor Editor. Let’s take a quick tour of the Editor and we’ll go into the details in a bit. On the left, we have this panel, and you can see in this panel we have what we call widgets. And widgets are used for designing and building your website. And you can see we also have a number of other settings and options at the bottom.
On the right, we have what we call the canvas. And this is where you will structure and style your Web site. And you can see here we have our homepage from our kids. So let’s take a look at how it’s built in Elementor. Here at the top. We have our header and you can see us the header because it says added header.
And as we scroll down, we can see our page content. So here we have a section with some content in it and elements and you can scroll down, we can see we have more sections. And then at the bottom we have our footer, and you can see that it’s our footer because it says edit footer over here. And in this case it’s quite a large footer.
So we’ll scroll back to the top now and let’s take a look at our page structure. So first we’ll open the navigator with Command or Control + I. And, as you can see, this brings up a panel to help us better understand our structure. So if I click here on this handle, you can see it’s selected both in the canvas and in the navigator.
And you can tell that it’s a section because over here on the left it says edit section. So if I go back to the navigator and I expand this section, you can see it’s made up of columns or in this case, one column. So I’ll select the column. You can see you have this great icon with the gray dotted line around your column, and if I expand it further inside columns, we have what we call widgets.
So here we have a heading widget, text editor widget and an image carousel widget. Okay, so let’s select our heading widget. And once again, if you didn’t have the Navigator open and you weren’t sure which widget you were in, you can check over here—it says Edit Heading. So we know we’re in the heading widget. And before we start, let’s just take a look at our Navigator in case it’s in our way.
So you can move the navigator anywhere on the page. You can dock it and you can also close it. So that will completely hide it. And if you want to bring it back again, command or control, I will bring it right back. You also have an option down here in the lower left corner for the navigator. So I’m going to move the navigator out of the way and I want to edit this heading widget.
So let’s take a look at the different settings within the heading widget. We have three tabs over here, Content, Style and Advanced, and you’ll find these three tabs in nearly every widget. And so the settings will change throughout different widgets, but these tabs stay pretty consistent. Okay, so let’s go ahead and ad our title over here so you can either paste in your text or you can type in new text.
I have my text ready. I’ll go ahead and paste in my text. Okay, great. And you can see that it updates simultaneously in the canvas and you can type directly in the canvas as well if you prefer. Now, below that we have the option to add a link. So if you wanted to link this headings elsewhere, you can do that, but I’ll show you links a bit later in the button since they pretty much work the same throughout.
Below that, you can see we have this HTML tag. It’s set on H1 and I’ll leave it there. Since it’s the main heading of my page, you have an alignment option. You could align to the left, to the right, justify, etc. I’m going to leave it in the center and now we can move on to style. Okay, so here we have style and you can see we have options to style our text, color and typography, as well as various other options.
So you can see here next to the text color, there’s an icon in the shape of a globe. So when it’s colored as opposed to gray, it indicates that it’s what’s called a Global Style. And when I click it, I can see a list of all the global styles, global styles or styles that have been added and saved already.
And in this case, the kit has already added several styles for me. So I can quickly scroll through and I can select any of these global styles. Let’s say, for example, this white style. And just like that, my color changes if I don’t have a global style and I want to pick another color, I can click on this color swatch here and create what’s called a custom style.
So I’ll click that and I can use the color picker to pick any color from here and notice that the globe icon has turned gray. When I made the custom edits and if you’d like to use a specific color, you can copy and paste in a hex code. And then if we want, we can save this color to our globals.
If I’m only going to use it one time, then there’s really no need to save it to the globals. But if, let’s say it’s a brand color or a color I want repeating across my site, I can save it to the global list. So I’ll hit the plus icon and now I have an option to name it. So we’ll name it and then hit create and now you can see that the global icon is colored again.
And if you click it and you scroll down, you can see it’s been added to your global list. So that’s how you add a global color. Next, let’s move on to typography. Typography also has options for globals, and I’ll click the global icon here and I can select any of these pre-defined global fonts.
I’ll click the pencil icon here to make my custom edit. And as you can see, both the pencil icon and the globe are colored at the same time. So that does happen occasionally. And we can just click here to reset it back to the default and now we can make our custom edits. Okay, So I’ll choose my font family and you can scroll through and you can select a Google font or you can type in the name of a Google font.
So I’m going to type in the name of the font. It pops up and I will select it, and then I can go ahead and I can change the size…I can change the weight…I can change the transform. So instead of Capitalize, I’ll select Normal and you have many more other options you can go through and change, like line height.
And once you’re set, you can either add this to your global fonts or in my case, I’m only using it one time on this website. So I will leave it a custom font. So I’ll go ahead and click the icon to close out and then you can see you have more options like text, stroke and text shadow and blend mode.
And I highly encourage you to play around with these different options. Okay. We’ll move on now to the text editor widget. So I’ll go ahead and select that and I will go ahead and I will close the navigator for now and I will paste in my text here. Okay? So I’ve pasted in my text. And the main difference between the text editor and the heading widget is that the heading widget is more forward display style text and the text editor is more for paragraph style.
So you can see here I have two paragraphs and they’re separated by an enter or a return. And in this case I only need the first paragraph. I just wanted to demo both paragraphs so I can go ahead and delete the second paragraph and you can see in the text editor you have a bit more control over parts of your text so I can double click and choose a formatting option like Bold, or I can double click a word and choose to link it.
Next, you have options for a drop cap and add in columns and some column options. So let’s go on and style it now. And in the style tab you can see we have OP alignment options and I will leave mine in the center and once again we have text, color and typography. So now we can go ahead and click the global icon for text.
And now that we have our blue here, we can just go ahead and click it and then we’ll go ahead and we will choose a global font so we can scroll through. I’ll choose this one and you can see how global styles can really help your workflow. Okay, so now you have an idea of how to edit widgets.
Let’s see how we can manage our widgets. So we’ll scroll down a bit and the first thing I’ll show you is that if you right click a widget, you can delete it and you can also duplicate a widget. I’ll right click this widget and I can duplicate it and then I can just go ahead and I can drag it to another column or section even.
And now I have an exact copy of it and I can quickly just change my content and you can see how this can save time. You don’t have to go and restyle everything. Okay, So now let’s say you’d like to add some content to your page because it’s not included in the kit and you need to create something from scratch.
So in order to do that, you can hit this plus icon above a section and you’ll hit the next plus icon, and then you’ll be asked to select your structure. So I will select a two column structure and I can see I have two columns added and now you can go ahead and drag in your widget. So let’s say I wanted to drag in an image widget and an icon widget.
Go ahead and drag that in and I can edit them. So editing an image widget is pretty similar to a text widget in that you have a content tab, but instead of text you’ll use an image. So I’ll click here to choose my image and you can either upload images or you can use file from your media library.
So I’ll go ahead and click the media library and I can choose something from here. So let’s say I choose this image and now you can see that you have an option to add alt text. So I highly recommend adding alt text. It’s important for your SEO and also to help make your website more accessible. So anytime you have an image that is functional, you should go ahead and add alt text.
Once you’ve added your all text, you can go ahead and click select and you can see my image has been added and once again I have alignment options. I can add a caption or a link to the image. I can go into style and from here I can change the width and I have some other options like opacity, and it gives us filters.
And these are some fun options that you can check out and see how they work. I do want to show you how to add a border. So under border type, I will select solid and then for the width I’ll use a pretty large width just so you can see it. So I’ll type in 25 here and I will select a color and once again I’ll use a global color so you can see it.
I’ll use red just to make it more visible. Now if you want around your corners, you can go to the border radius. So I’ll go ahead and type in, let’s say 20 or if we want to see it more dramatically, we can try and 50. And that’s how you round corners. So let’s move on to the icon widget and here you have the option to change your icon so you can click here and you can choose another icon from here and you can insert it.
Okay? So before we move on to edit our header, we will click update to save our changes. And now I can go into the header.
Learn how to customize your website header in Elementor, as well as how to add a new page to you website.
In this video, we’ll cover:
✔︎ Theme Builder
✔︎ Site identity, logo, and favicon
✔︎ Navigation / WordPress menu
✔︎ Responsive mode
✔︎ Buttons and links
✔︎ Adding a new page
✔︎ And much more!
So as we mentioned, the header is here at the top of the page where it says “Add header” and a word about the header, the header is actually a template. It’s not located in the page, you’re only previewing it in the page, and it’s located in the Theme Builder. So let’s take a quick look at the theme builder. If we click the hamburger icon, and then theme builder, you see that the theme builder opens here and we can see all the website parts that were included with our kit.
So that includes the Single post, the 404 page and the Header and Footer. So I could also edit my header from the theme builder, but I prefer to edit it from within the context of my page. I just wanted to show you where it’s located so you’ll know where to find the theme builder so we can close out the theme builder.
And now I’ll click edit header and now I’m in the header so you can see in the header we have three columns and each column has a widget in it, so let’s go through them widget by widget to fix up our header. First of all, I’ll click here on the site logo and I have a prompt here to change the site logo, so I’ll go ahead and click that and as you can see, I’ve now been taken to these site settings area and changes here affect our whole site and not just the page.
So while we’re here, we can go ahead and set up our other site settings. We’ll start by typing in our site name and then we’ll type in our site description. And next we can add our site logo. So I will click to choose an image, and in this case I will be uploading my own file and I will go ahead and drag it in and once again I can type in my alt text and click select and next I can add in my favicon.
So the favicon is this little icon that appears on the left side of your browser tab that shows up here in your browser and allows your visitors to quickly identify your website. So don’t forget to add that to your site. Go ahead and click here to choose an image and once again I will upload my own file. So I will just drag that in and I’ll go ahead and select.
Okay. So in case you’re wondering why you don’t see the logo yet or the favicon, we’ll first go ahead and click update. Then we will refresh our page. And as you can see, our logo has been added. And if we click on the icon down here at the bottom to preview our changes in another tab, you can see that the favicon has been added up here.
So we’re all set on that and we can go back to editing our header. So we’ll click back inside edit header and I will select the logo and once again I have options to change the alignment caption link and style it. I can change the width. I don’t want to change it too much since that is my logo.
So let’s move on now to the next widget and I’ll go ahead and select that and we’ll go ahead and we’ll change our NAV menu or WordPress menu. So you can see here that on the left, when we go into our options that we have a suggestion to go to the menu screen to manage our menu. So we’ll go ahead and we’ll start by doing that.
As you can see, it’s opened in the menu section and I have two menus here. If I click here, I can see I have two menus, I have the footer menu and the main menu, and I want to work on the main menu now. So I’m going to go ahead and click main menu and click select. And you can see now I’m working in the main menu.
So these are the links in our main menu. And if I want to add another link to the navigation menu, I can choose it from over here on the left. So let’s say I want to add the Contact Us page. I can add it to the menu like that and you can see that now it’s been added to below and I could drag it or I can drag it to change the order, or if I want to use it as a dropdown, as a sub item, I can just drag it a little to the right and place it where I want it to dropdown.
So once my menu is ready, I’ll go ahead and click Save menu and now I can go back to the home page and I can choose the menu that I want to use. I’ll choose Main menu. And as you can see, I have the contact us added as a sub-item. Now we can go ahead and edit the settings of our menu so you can see first of all, we have layout options.
You can make it vertical or drop down. And if you wanted to only use an icon, I’m going to go ahead and put it back to horizontal and then you can change the alignment if you want to the left or stretch it. I’ll keep mine in the center and then you have the pointer. So the pointer by default, as you can see, is set to underline, and that’s the line that appears when I hover over.
And now a menu item and I could change that to another pointer, you can go through and check them out and you have the animation, which changes the way the pointer displays. Below that you have the sub-menu indicator, and that is this little triangle you see here. You could turn it off completely if you didn’t want any indicator, or you could change it by clicking it and opening.
In the Icon library. You can see I have a few suggestions and I’ll choose the chevron. If I wanted, I could go through and choose another icon or even upload my own. I’ll go ahead and insert it. And you can see it changed to the chevron. Next, we’ll talk about mobile dropdown. In order to explain mobile dropdown, I will go into responsive mode so you can do that from this from the bottom panel here.
If I click it, you can see that I get this black bar across the top, which has various screen sizes. So right now I’m in desktop and my breakpoint is set to mobile portrait. So let’s see what that means. So as I said, we’re here in desktop and our menu looks like this and when we switch to tablet, our menu still looks pretty much the same.
But when I switch to mobile, it turns into a hamburger menu, and that’s because the dropdown has been set to mobile. If I wanted I could change it to tablet, but I will leave it on mobile since it all fits in tablet. And now let’s click it so we can see what it looks like when it’s open. So this is our open menu in mobile, and if you wanted, you could turn off full width.
I’m going to leave it on full width. You can change the alignment, let’s say to the center, leave it aside, and you can also decide on what you want for the toggle button. Right now it’s a hamburger icon when it’s closed, but if you didn’t want any icon there, you could turn it to none. So I will leave it on hamburger and here I have the options to actually change it to a different icon.
So if I wanted to have an icon but not a hamburger icon, I could click in the Icon library and I could change it to something else. I’m going to leave it on hamburger, since I think that’s the most recognizable icon for a menu. Okay. And then we can also change toggle it if we wanted it to align to the left or the center, I’ll leave mine on the right.
So that’s our menu content. Now we can go ahead and style it. So I’ll click on Style and I will close out responsive mode. Okay, So I’ll go ahead and change the typography. I’ll choose a global font…I’ll choose a global color as well. Notice here that I’m on the normal state, so I will choose my blue color, but I can change that for hover and for active.
So for example, right now when I hover over, it’s red, and if I click on hover, you can see it’s red and I have the option here to change that. You can go through the different normal and hover options and you also have an option for active. So that’s when you’re actually on that page and you can set up the styling there.
Let’s go ahead and continue through the options we have. A divider can add a divider. You have options for the divider. You can try those out. You can also change the color of the divider and you have some other options you can go through and play around with. You also have the dropdown options. So this is the dropdown.
If you recall, you could change the styling for that and you can go through and check them out and you also have options for the toggle so you could change those as well. Okay. So let’s move on to the button. So I’ll go ahead and click the button and this is a great time to show you the the in page preview option.
So if you click here, you can see the page in full width or you can use command or control. P Okay, so let’s set up our button. First of all, we have text. I’ll go ahead and change it to contacts and I will add a link. Right now I have a default link in there from the library and if I want to change my link, I can remove that and start typing in the name of the page.
So in this case I’d want it to go to the contact page. So I’ll type in the word contact and as you can see, my contact us page pops up and I can just click it and it will add a link for me. I can change the alignment of the button. In this case, I have a small column, so it’s not changing, but if you had a wider column, the alignment would change.
I can add an icon, for example. So if I wanted to add an icon, let’s say I want an envelope, I’ll just type start typing in the word envelope, select it and insert it. And now I can move it to after if I prefer the icon to be on the other side and add some spacing and then we can move on to style our button.
So a lot of these options should be looking pretty familiar by this point. You can change the typography and you can change the text color. Let’s quickly check out the cover. So if I click on Hover and I go over to my button, I can hover over for preview. So right now you can see that the button color is the same color as the background.
But let’s say I wanted to change that. I can click here and select a different color. And now when I hover over it, you can see it’s changed to white. So those are some ideas for buttons and that pretty much wraps up the header. So let’s go ahead and update our header. I will scroll down the page and let’s take a quick look at the footer.
So once again, you have the footer here and similar to the header, you can just click here to edit your footer and you can edit the widgets in the same way we did for the header and the page. That’s pretty much it to edit in your homepage. So let’s go out now and we will go back to our WordPress dashboard so I can click here to exit.
So now I’d like to show you how to add a new page to your website. So I’ll go ahead and click pages and I’ll click Add new and I’m prompted to name my page. So I’ll call it info and I’ll hit save and it opens directly into the editor to my new page. It doesn’t look like a blank page yet, but it’s actually just pulling in our header and footer and it’s showing the page title here as well.
I don’t want to show the title, so I’ll go to my page settings and I can switch the toggle to yes to hide the title. Now the title has been hidden, but if you wanted a completely blank page with no header or footer, you could switch the page layout to element or canvas. Okay, so now I have a truly blank page.
If you change your mind and you want to switch it back, you can select element or full width. Once your page is ready, click publish. You also have a few options here. You can save it as a draft or save your whole page as a template. I’ll go back out to the WordPress Dashboard now and you can see it’s been added here in my pages.
And that wraps up our walkthrough of Elementor Hosting. You now know everything you need to take the first steps in creating your Elementor website.
So go and create your website. We can’t wait to see what you come up with.
I’d like to take this opportunity to invite you to our exclusive Facebook group, Elementor Beginnings. You’ll find the link in the description.
To learn more, visit the Elementor Academy.
Thanks for watching!