Are you ready to build your first WordPress website? Learn how to choose the right platform and hosting provider, and how to set up, create, and manage your WordPress website.
Together we’ll build a portfolio website. You can also apply the same concepts and techniques to build a blog or any other type of website. We’ll use Elementor Hosting, the fastest and safest way to start building our WordPress website.
See also:
Containers Playground: elemn.to/flexbox-playground
Intro
In this video, you’ll learn how to build your first WordPress website.
Hey there, I’m Aviva from Elementor, and I’ll help you build your WordPress website, from choosing the right platform for your website to selecting a hosting provider to actually building your first WordPress website, today. In today’s course we’ll build a portfolio website, but you can use what you learn here and apply the same concepts and techniques to a blog or just about any other type of website.
Before we begin, I’d like to encourage you to subscribe to our channel. But first, why WordPress? Well, there are a lot of website building platforms out there. WordPress is still the most popular and professional option, powering 43% of all websites worldwide.
WordPress is one of the most versatile platforms. Thanks to its active and supportive global community, numerous plugins, themes, and templates, and since it’s open source, you have full ownership and control over your content. In this video, I’ll be using Elementor Hosting. It’s the fastest and safest way to get started building your WordPress website.
We’ll talk more about it later in the video.
Cost of building a WordPress site
Despite the word free, often being associated with WordPress, building a website using WordPress does come with costs. Although the WordPress content management system or CMS is open source and free. Additional services, (such as a domain name, hosting templates, a page builder, and some plugins and themes) are not. The cost can vary significantly based on the type and complexity of the website you aim to build.
What is hosting anyway?
You can think of hosting like renting space in a building. Only, it’s a place for your website’s files and media. But some hosting companies still follow the “old school way” of doing things where you have to install WordPress and install additional services. Some hosting companies will install them for you, but there may be a hidden fee.
Luckily, as I mentioned earlier, we’ll be using Elementor Hosting, which provides us with an up-to-date way to use WordPress. Elementor Hosting comes with everything you need for your website pre-installed. Perfect for WordPress beginners designing your website.
Every WordPress website requires a theme. A theme determines the look and feel of your website, including things like page layout, color schemes, and font types. But the process of customizing a theme is not at all straightforward, which is why page builders were invented. In general, page builders allow you to drag and drop elements to build a website without writing any code.
Elementor Pro gives you even more control as it lets you design every part of your website, including your header and footer to name a few. This is perfect for us since we’ll be using Elementor Hosting, which already comes with the Elementor Pro page builder plugin pre-installed.
But what are plugins?
In short, a WordPress plugin extends the functionality of a WordPress website and adds new features. There are lots of WordPress plugins, such as plugins for backups, security, performance, and forms, to name a few Elementor Hosting comes complete with the Elementor Pro plugin, and together covers all these and many other plugins.
Having fewer plugins means less time wasted on updating plugins and worrying about plugin compatibility. Elementor Hosting has you covered.
All right. Now that we know why to use WordPress, we’re ready to dive in and start creating your first WordPress website together.
Sign up
We’ll get started by setting up our Elementor Hosting account from elementor.com.
Click Get Started. Here we’re prompted to choose a design to start our website, but we’ll choose our design later. So click, skip and start with a blank website. Now we’re taken to a purchase page where we can choose our plan. Go ahead and click buy Now. we’ll go through the checkout process. Okay, great.
We’re ready to start creating our website. The first thing to do is to choose a name. This will be your temporary domain. Click next and next again. Okay, great. Our site is ready. Click let’s go.
WP Dash
This lands us in our homepage in the Elementor Editor. But before we begin editing our website, we’ll take a tour of the WordPress admin dashboard and install our website kit. Click the E at the top to exit to WordPress.
This is the WordPress admin dashboard. On our left, we have a panel with various options and settings. We’ll go through the essential settings shortly, but first we’ll enable a few Elementor features.
Enable Features
Hover over Elementor Select settings, and click the features tab.
We’ll set Flexbox containers to active so we can work with the newer containers feature, which allows us to create more complex layouts faster. We’ll scroll down a bit and set the editor top bar to active for a more minimalist workspace in the element or editor. Next, we’ll set nested elements to active.
And finally, we’ll scroll down to menu and set it to active as well. Depending on when you’re watching this course, you may find that some or all of these features are already active, in which case you can just leave them as is. We’ll scroll down and save changes. Okay, great. Now that we’ve activated these features, we can install a website kit in the left panel.
Install Kit
Go to templates kit library. The Elementor Kit Library offers a selection of full website kits for us to choose from. A website kit is the collection of matching templates you can use to quickly create a full website and then customize with your content for your own unique website. Here in the library on the left, we have various ways to filter and search for kits, or we can scroll through to browse.
Click any kit to preview it. You can scroll down and click through the different pages, view it at different sizes. And click overview for a bird’s eye view of all the pages and parts included in the kit. This looks like a great kit for a portfolio, so we’ll click apply kit to use it. We’re given the option to customize the kit and just apply certain parts of it, but we’ll click apply all to use everything that’s included in the kit.
Next, we’re asked to enable unfiltered file uploads to allow the kit to add SVG files to our website. We’ll click enable. Okay, great. Our kit is now live. Click close and let’s take a look at what was included in our kit. First, we have the header, which includes a placeholder logo, navigation links, and a button.
Scrolling down, we have content, and back at the top, we’ll click on the Work page. The projects displayed on this page make up our portfolio. If we click any individual project, we’ll get a link to its post. You can think of a WordPress post similar to an article, which can be used for blogs and other listings, or in our case, portfolio projects.
WP Dash Tour
Let’s go back to the WordPress dashboard and see where these posts are located. We’ll click to enter posts. Here we see a list of placeholder posts that were included with our kit. Later in the course, we’ll see how to customize these posts to use them for our portfolio.
Next, we have the media library where our site assets are located, including image and video files. We can also access the media library from the Elementor Editor.
Below, we have our website pages. We’ll come back to pages in just a moment. Next are comments, which is where we manage visitor comments. Below is Elementor with various settings and tools as we saw when we activated a few features. Below that, we have templates, which we saw when we entered the kit library.
In Appearance, we have Themes. As we discussed earlier, every WordPress website requires a theme. Elementor Hostin g comes with the Hello theme pre-installed. The hello theme is a minimal theme without much styling, but there’s no need for us to customize our theme.
Rather than relying on our theme for our website styling, we’ll style our site using our kit together with the Elementor Editor.
Next we have plugins, which is where you manage your plugins. It’s a good idea to keep your plugins up to date for maximum security.
Users is where we manage administrative access for anyone else helping to manage our website. We have various other tools and settings, but these aren’t essential to getting started. Okay, let’s go back to pages. We don’t need the sample homepage since our kit comes with its own homepage, so let’s delete it.
Click more options and click Trash to delete that page. It’s now moved to the trash where it will stay until we delete it permanently. Note that the homepage has the words front page next to it. Now we’ll click edit with Elementor to edit our homepage.
Elementor Editor
Welcome to the Elementor Editor. Let’s take a tour.
First, we have the Elementor top bar, which gives us quick access to the settings we use most while working in Elementor. We’ll go over these options in the top bar as we progress through our website. In the left panel, we have widgets. These are the elements used for designing and building your website.
On the right we have the canvas where we’ll structure and style our website
This floating panel, is the Structure panel, which shows us the structure of the current webpage. We’ll come back to it soon.
We’re currently looking at our kit’s homepage, so let’s see how it’s built in Elementor. Here at the top we have our header. And as we scroll down, we can see our pages’ content, and at the bottom we have our footer.
We’ll scroll back to the top now and let’s take a look at the pages’ content structure with the help of the structure panel. If I click on the handle here, we can see this box has been selected both in the canvas and in the structure. These boxes are called Containers, and I know I’ve selected a container because in the left panel it says “Edit container.”
The container’s layout and style is controlled from the left panel, here. We’ll talk more about containers later. Expanding the container from the structure panel, we can see it holds a number of elements or widgets. Inside this container, we have a heading widget, text editor widget, and an image carousel widget.
You can close it to hide it and bring it back with the keyboard shortcut, command or control I. Note that you can move the structure panel anywhere on the page. I’ll move it aside for now.
Edit widgets
Let’s see how to edit widgets. Starting by selecting the heading widget, let’s look at the different settings within the Heading Widget.
We have three tabs in the left panel, content, style, and advanced. Each tabs options and settings will vary in relation to the specific widget, but you’ll find the same three tabs consistently in nearly every widget. Okay, so let’s go ahead, and in Content, add our title over here. I’ll go ahead and paste in my text, and you can see it updates simultaneously in the canvas.
Below, we have the option to add a link to the heading. We’ll cover links a bit later when we get to our button widget. Below that, we have this HTML tag. I’ll leave it as H1or heading one since it’s the main heading of my page. Next we have an alignment option. I’ll leave it in the center.
Global styles
And now we can move on to Style. Here we have options to style our text color and typography, as well as various other options. We’ll start with text color, where we have an icon in the shape of a globe. Whenever this icon is colored as opposed to gray. It indicates that it’s a global style. Global styles are Style presets, which we can save to our website, for fast access.
We’ll click the icon, and now we can see a list of all the global color styles. In this case, the kit has already added several styles for us, so we can quickly scroll through and select any of these global styles. Let’s say, for example, this white style, and just like that, our color changes.
If we want to pick another color that we don’t have a global style for, we can click on this color swatch here and create what’s called a custom style. We’ll click the swatch and we can use the color picker to pick any color or type in a hex code. Notice that the globe icon has turned gray. After making the custom edits, if you have brand specific colors you want to repeat across your site, you can save them to the global list.
Hit the plus icon and now you have the option to name it. We’ll click create and now we can see that the global icon is colored again. If we click it and scroll down, we can see it’s been added to our global list. To change and manage all the existing global color styles from one place, we’ll click the gear icon.
This brings us into the site settings. We have this style guide preview on the right, which we can use as a handy reference. By default, we have these four system colors, which define the primary secondary body text and accent colors. We can edit any of these colors by clicking in the panel or the preview and adjust the color accordingly.
I’ll go through and change the system colors.
We can also add and edit more colors as needed below in the custom colors. In the case of our kit, four colors have been added, plus we added one just a moment ago. I’ll delete the first color altogether, edit the second color, and delete the color we just created in the editor. I’ll leave the other colors as is. Now, Save changes and go back to edit the homepage.
Next, we’ll move on to typography. Typography also has options for globals. Font styles work much the same way as color styles, but in this case, we have a pencil icon to make custom edits.
Rather than make a Custom edit, let’s go ahead and set up all our global fonts now. Starting with primary, I’ll go ahead and choose my font family. You can scroll through and select a single font or type in the name of a Google font and select it. You can change the size, weight, transform as well as many more options.
You can modify any other font styles you’d like, and you can always come back later to update any style and it will sync across your site. Save changes, and we’ll go back to editing the homepage.
We have more options like text, stroke, text shadow, and blend mode. And I highly encourage you to play around with these different options and see what works for your site.
Write with AI
Okay, we’ll select the widget below. This is the text editor widget, which we can use for paragraph text.
I’ll paste in a short amount of text. I’d like to make this text a little longer and more descriptive. Work smarter, not harder, is what I say. So let’s let AI do some of the work here. Click Write with AI, we’ll need to approve the terms and click get Started. Then click Make it longer. Cool. But that’s a bit too long now, so I’ll click make it shorter.
That’s great. I’ll just make one small edit to my text. And by the way, we can also type directly in the canvas. In Style, I’ll select a different global font. You can see how global styles can really help your workflow. Feel free to use whichever style works for your website.
One more thing, the text editor widget now takes up the full width of the container.
I’d like to make the line width of my text narrower, to make it easier to read. To do this, we’ll click on the advanced tab and set the width to custom. Then drag the slider until we’re happy with the width. Then we’ll set a line self to center.
Okay, so now that you’ve got the hang of basic widget editing, let’s talk about managing widgets as well as adding new widgets to our page.
We’ll scroll down a bit and select the next widget, which as we can see in the left panel, is the image carousel widget. Let’s close out the structure panel for a better view. The carousel widget makes for a nice scrolling image display, but I’d prefer to have several of Sloan’s portfolio projects displayed front and center on our homepage.
Portfolio widget
Instead, we’ll remove the main carousel and replace it with the portfolio widget. If we right click the image carousel, we’ll see options such as Duplicate, Copy, Paste, and Delete. We’ll click delete to remove the widget from our page. Great. Now we’ll go over to the left panel and scroll down to find the portfolio widget, click and drag it into the Canvas.
Let go when the pink line appears where you want to place the widget. If we look in the content tab under query, we can see that the source of the projects displayed here is posts. If you recall, during our WordPress dashboard tour, we took a peek at the post section where our portfolio projects are located.
Currently, the widget is pulling in the kits placeholder posts. Once we update the posts with our own projects, they will automatically, or dynamically, be displayed in the portfolio widget. We’ll continue editing our homepage now. Later, after we’ve edited our projects, we’ll come back to preview the portfolio and edit it settings if necessary.
Let’s scroll down to the About Us container and see what we have here. First, we have this interactive image on the left. We’ll select it, and now we can see that it’s the call to action widget. It has several content options available, including image, content, and ribbon, but in this case, our kit is using only the image option.
Let’s swap out the Kit’s image for a profile photo. Click Choose image, and here we have several options. We can select an image from the Media library, which currently only has media assets from our Kit. Or upload an image, either by selecting one of our own images or dragging in an image file. I’ll drag in an image of Sloane.
Feel free to use whichever image best suits your website. On the right. We’ll add alt text to describe the image. Alt text is important, both for search engine optimization or SEO, and for making your website more accessible. We’ll go ahead and click select. Great. Next up, we have a heading widget. Let’s update the text.
The pre-applied global styles look great so we can move on to the next widget, which is also a heading widget, and update the text here as well. Let’s select the next widget. It’s the text editor widget. We’ll go ahead and update that with our text. I’ll paste in my text, and of course you’ll use your own about text.
Buttons
That brings us to this button. I’ll scroll down a little and select it in the content section. We’ll change the text.
Let’s talk about links. We have a few different ways to enter links to other pages on our site. This applies to buttons as well as any other widget with the link option. Let’s first remove this default kit library link.
One way to create a link is to start typing in the name of the page we want to link to, for example, the About page, then select it when the page name pops up. And now we have a link going straight to the About Us page. But if at any point we were to change the name of the page, for example to “About me,” for Sloane, this link will no longer work.
Dynamic links
A better way to link internally is through Elementor Dynamic Link Options. To do this, we’ll click the Dynamic tags icon, then choose Internal URL, since we’d like to link it to a page on our site. We’ll click the Wrench icon, and for Type, Choose Content. Once again, we’ll begin typing in our page name and select it.
It’s now a dynamic link and will always lead us to the About page, even if we change its name at any point in the future. I recommend using this method whenever you add links to your website. Moving on, we have other options like alignment, adding an icon, and more, but I’m happy with the button content the way it is for Sloan’s website.
So let’s move on to style. I’ll go ahead and change the typography. Below that, we have more options, such as text color, background type, and color, as well as Border. We also have a border radius. We can remove the border radius to square off the corners, but I’m going to leave them rounded.
We also have options for the button hover, which is how the button appears when we mouse over it. Right now when I hover over this button, it turns purple. I like it like that. So I’ll leave it as is. We’ll check out the button, hover in more detail later, when we edit our website header.
We’ll scroll down a bit to the Our services container. I don’t need it for Sloan’s web website, so I’ll go ahead and remove it, but if you’d like to use it on your website, you can edit the widgets to fit your website style.
I’ll remove the Get inspired containers as well, since we’ve added a portfolio widget at the top of the page. Okay, great.
Now we have client feedback. I do want to keep this container and update it with Sloan’s client feedback. Let’s select it and make our edits.
First we have a heading widget, which I’m happy to leave as is. For the next heading, we’ll update the text. The style is perfect, so we’re done with that.
Testimonial carousel
Let’s select the testimonials. Now we can see that it’s the testimonial carousel widget, which is great for social proof. We’ll go ahead and update the testimonials. You can see we have three items and each one represents a testimonial.
We’ll click item number one and change the content. Next, we’ll fill out the name under title. I’ll use the company name. Okay, great. Now we’ll move on to item number two, which is the second testimonial, and we’ll add in our content.
We’ll do the same for item number three.
We have loads more content and style options, but I think it looks great, so I’ll leave it like that. Let’s scroll down a bit more, and here we have an image carousel widget. In this case, it’s displaying logos from different companies. If you’d like to use this widget, you can swap out the images in the content tab by uploading your own.
Sloan is a freelancer working with smaller companies, so I’m going to remove it from her site.
Responsive
And that brings us to the end of the page content let’s discuss responsive layout. Every Elementor kit comes optimized for responsive, so there generally isn’t much left to do to make websites built from kits responsive.
Let’s review the homepage and make any necessary tweaks as we go. Scroll back to the top of the page and take a look at the responsive options in the Top bar. Right now we’re in desktop view and clicking the Tablet icon takes us into tablet view. Now we can scroll through the homepage and make sure everything is optimized.
Our heading and text look great, and we’ll leave the portfolio for now. Scrolling along, everything looks good. We don’t really need any changes to tablet, but I’ll select a heading widget so we can take a look at which settings can be changed for different screen sizes.
Notice that on the left next to some of the settings, you have this Viewport icon. The viewport icon indicates that we can adjust a particular setting for different screen sizes, but, and this is important to note: if there’s no viewport icon next to a setting, that setting will remain the same for every screen size. For example, this HTML tag doesn’t have a viewport icon. That means it will remain as H2 or a secondary heading at every screen size.
Generally, when we change a setting with a viewport icon next to it, we’re changing it for that screen size and smaller. If you recall, this heading was aligned to the left on desktop view.
Alignment has a viewport icon next to it, and it’s been set to the center on tablet. If we move to mobile, we can see that here too it’s been set to the center. I’ll align it to the left for mobile. For demonstration purposes, I’ll do the same for the text editor, and button widgets. As you can see, each of them has a viewport icon next to their alignment option.
So these are the basics of responsive editing and We’ll revisit responsive layout again soon in the header. Great. Let’s go back to desktop view and click publish to save our changes.
Theme Builder
So what exactly is a header? While we can edit our header directly from our page, it’s actually a template pulled in from the Theme Builder and displayed at the top of every page. Let’s take a quick tour of the Theme Builder so you’ll know what it is and how to access it. From the top bar. We’ll click the E and select Theme Builder.
Here in the Theme Builder, we can find all of our site’s global parts, which are templates that may be repeated across our site or have special conditions set for them. This kit comes with a single post, which we’ll discuss when we create our portfolio, a 404 error page, and the header and footer. We could edit the header directly from here, but I prefer to edit it from the page for better context.
Header
We’ll close out the theme builder and go ahead and edit the header from our page. We’ll click to enter the header. We’ll select the container and bring back the structure panel with command or control I. Let’s expand the header container. Inside we have a site logo, a WordPress menu widget, and a button widget.
Close out the structure panel and select the site logo widget. Click to change the site logo.
Site Identity
This takes us into site identity. Since we’re here already, let’s go ahead and update all our site identity settings. We’ll fill out our site name and add in a site description.
Site Logo
For the site logo, click Choose image. You can use nearly any image type including JPG, GIF, PNG, and SVG. I like to use SVG files because they display great at any size. So I’ll go ahead and drag in my SVG logo file, add alt text, and click select.
Favicon
Now we can add in our favicon, which is the little icon in the browser tab that helps identify our site. It should be a circle or square image. Once again, I’ll drag in an SVG file. We’ll click Select and Save changes.
If you’re wondering where our logo is, it’s not showing up yet because we first need to reload the page and there it is. And what about our favicon? Click the preview icon here to preview our website in a new tab.
Ta-da. Okay, let’s go back into the header and to the Site logo. In Style, change its height. Looks good to me.
Nav Menu
Next is the navigation menu. Select it, and we see that it’s the WordPress menu widget. Now, the WordPress menu widget is the old school way of adding a menu to our website and requires going to the WordPress admin to set it up.
But we have an updated menu widget with more customization options and capabilities. So let’s right-click and delete the WordPress menu, and we’ll drag in the Menu widget Instead. At the top of the widgets panel, we have the search bar. Type in the word “menu” to quickly find it and drag it in, placing it in the header.
Just like with the testimonial carousel, on our homepage, we have a list of expandable items, so let’s go through and define them. I’ll call item number one portfolio and for the URL, once again, we’ll use a dynamic link, click the dynamic tags icon and select Internal URL. Select Content for the Type.
Recall from the beginning of the course that the portfolio page was named work. So we’ll type that in and select it from the dropdown. If we change the page name later, it will still direct our visitors to the correct page.
Let’s move on to item number two. I’ll call it Services and follow the same steps to link it dynamically. And finally, I’ll define item number three in the same manner.
Feel free to add more Menu items to your website. Under Item position, we’ll click Center. Great. Next, we have options for the Menu toggle, or what’s commonly known as a hamburger menu icon.
And below that we have Responsive settings, which define the breakpoint, or where the text-based menu will switch over to the hamburger menu. The breakpoint has been set to tablet, which works for this website.
Now let’s Style our menu. We’ll adjust the space between items and then the typography.
I’ll choose the font style smallest title, but it’s not quite large enough, so I’ll make a Custom edit by clicking the pencil and increasing the size. I’ll save it as a Global font and call it “nav menu.” And change the font color.
Next, we’ll enter Hover settings. I’ll change the hover color. Great, and I’d like to add a Hover animation to make it playful. We have a number of options to choose from. I’ll choose Grow.
Fun. Finally, we’ll change the Active color, which indicates the currently active or selected page, so our visitors will know where they’re located. Okay, great. Now we’re ready to move on to the button. Select it and change the text now for the link.
We can see there’s already an internal link. Let’s see where it goes. It’s the Contact page. Perfect. I’ll leave the other settings as is. We’ll go to Style and I’ll change the typography to my newly added global font. I’ll change the text color to be the same color as my background and the border color to transparent. For the hover, I’ll change the text color and the border color, both to secondary, and let’s add the same hover animation that we added to the menu.
Looking good. Time to preview and optimize our header for responsive. Tablet size looks good and mobile, well, it could use some tweaking. We’ll select the site logo and in style, reduce the height. I’ll also change the toggle color. Since this setting doesn’t have a Viewport icon, it will apply to tablet. too. We’ll go back to desktop and Publish to save our work.
Footer
Okay, time to edit the footer. Like the header, the footer is a template that repeats throughout our site, and you can also access it through the Theme builder, but we’ll edit it right from the page.
We’ll scroll down and click footer. I don’t need the first container for Sloane’s site, so I’ll click the X to delete it. In the next container we have the site logo, which is great as is. Let’s update the text. Next up are internal site links. I don’t need them, since the same links are always visible in the Header. I’ll delete the container. Great.
Onto contact info. We’ll select the text and it turns out it’s the icon list widget. That’s actually perfect because now we can make each list item clickable and add an icon too. We’ll click to expand the first item and I’ll paste in Sloan’s email address. I’ll click to choose an icon.
Search for an envelope icon and click insert. We’ll use a dynamic link again, but this time under Actions, select Contact URL, click the wrench and choose email. We call this an action link and it takes visitors directly to the right app; in this case, email to send a message. We also have options to add a subject and a message.
We’ll delete the next two items, and make a copy of the first–one to save us the step of clicking dynamic tags each time. I’ll update my second item with Sloan’s phone number, a phone icon, set the action link Type to Tel, and input her number here as well.
I’ll copy this item, use her WhatsApp details, update the icon, and action link.
Okay, great. In style, we have loads of options like changing the spacing, alignment, and adding a divider, but I’ll just change the icon color. We also have an option to style the text, but I’m happy with this as it is.
The contact info and join our newsletter headings have two different styles. To quickly apply the style from contact info to join our newsletter, we’ll right click the Contact info heading and select Copy. Then select Join our newsletter. Right click and select Paste style, or use the keyboard shortcut Command or Control Shift + V. Voila. I’ll update my text, and we’ll move on to the signup form.
Select the Form first. We have the form name. I’ll leave that as “Newsletter form” for reference. Next, we have our form items, or in the case of this form one item, we’ll expand it to view its settings. We’ll leave the Type as Email for this form, but we have many different options here for the field type.
We also have the label and placeholder text. I’ll update the placeholder text and we can see the changes in the canvas. I’ll leave it on required to make sure our visitors provide their email address. The column width is set to 60%. We’ll see what that means in a moment. If we wanted to create a longer form, we could add different form fields like name and phone number.
Let’s see how to manage items. We can duplicate an item, just like we saw before in the icon list. We can also click add item to remove an item. Click the X to delete it. We can also choose to show labels which stay visible as our visitors type.
For the form button, the Column width is set to 40%, and if you recall the email field’s Column width was 60%, equaling 100% altogether. We can adjust these values as desired.
Next, we have options for multi-step forms, but since our form is only one step, we’ll skip straight to the Submit button where we can update our button text. Once again, we have an option to add an icon, but I’ll leave it as is.
Actions after submit is where we define what will happen when a visitor clicks the Submit button. Collect submissions and Email submissions are already selected here. Below we have the settings for each selected action. To add other actions, click the plus icon and select from the available options, like redirect or choose from various email marketing platforms. I’ll select another action to demonstrate how a new setting displays for this action below. Okay, I’ll delete it now and leave the original settings.
Under Collect submissions, we have a note letting us know that collected submissions will be saved to the Elementor submissions tab in the WordPress dashboard. We’ll expand the email tab. The account email address is already entered, and submissions will be sent to it.
We have some other settings like the email subject and message you’ll receive with the submission. We have a few more options below, but we can leave everything on their defaults.
Let’s check out the form Style options. We can adjust spacing between the fields with the columns gap and rose gap sliders.
Now let’s go to the button style and click to expand it. First, we’ll set the Typography. Then we’ll change the background color and the text color.
Let’s preview the hover. Currently there are no visible changes on hover, so let’s click hover to set that up. We’ll change the background color, text color, and the border color. Perfect! And that wraps up the form.
Now I’d like to adjust the spacing of the elements in the main container. We’ll cover containers later when we learn how to add new content. But for now, we’ll start getting familiar with some of the container settings. Select the container and under justified content, we’ll select space around which gives us evenly spaced containers.
Next, I’d like to add some space above this container so the testimonials aren’t flushed with the footer. Click the advanced tab, and here we have options for margin and padding margin controls. The amount of space around the outside of the element and padding controls the amount of space around the inside of the element.
We already have padding of 5% applied to the top and sides of the container. We’ll add a margin and click the link icon to unlink it. We’ll set the top to 150 pixels, giving us more space above the container.
Let’s scroll to our last container. Select the first element, which is a copyright statement. It’s a text editor widget, but instead of static text, a dynamic tag has been selected and set to current date and time. Let’s take a look at what that means. Click the wrench. The date format is set to Custom, and the custom format is Y for year, so the display will show the current year. We’ll click Advanced, and the before text is set to the copyright symbol, which displays before the copyright year, and we can leave as is. Then we’ll edit the after text to suit our website.
Finally, we’ll select the social icons widget here on the right, which allows us to add links to our social profiles. These items are similar to the items we’ve seen before in the menu icon list and forms widgets. I’ll go ahead and delete the Facebook and Twitter icons, and I’ll drag Instagram to the top and LinkedIn to the bottom to reorder them.
Let’s edit Instagram first. We already have the Instagram icon here, so we just need to add a link to Sloan’s Instagram profile. Note that we have an option to change the individual icon color by selecting Custom. Next we have Dribble. I’ll swap it out for Behance by clicking the icon and searching for Behance. Then click insert and change the link. And now we’ll update the LinkedIn settings. We have more options below where we can change the icon shape and the number of columns and alignment.
Okay, this looks great.
Responsive
Let’s optimize our Footer for responsive. We’ll click the tablet icon to preview The logo and text look great, but the contact info and join my newsletter are aren’t aligned.
So let’s see how we can align them. We’ll start by selecting the contact info container. It’s set to a width of 50%, meaning it takes up half the width of the main container. Now let’s take a look at the container below. We can see that its width is set to a hundred percent or the full width of the main container.
So let’s change this container’s width to 50% and it now takes up half the space and can move up to the row above to fit next to the other container. With each container now taking up half the space, they fit perfectly side by side. It’s looking better, but they’re still not quite aligned. So let’s take a look.
In advanced, we can see that the top margin is set to 6%, which is giving us that extra space margin. Has a responsive icon next to it, which means that we can change it for tablet view without it affecting desktop. I’ll change it to zero and now it aligns to the top with the other container. We’ll select this text and align it to the left.
Great. The bottom container looks good, so let’s move on to mobile. Looking pretty good. We’ll just make one change to the contact info container. Select it and change the width to 100%. We’ll publish, and that’s it for our footer. We’ll go back to desktop. We can preview our page without leaving the editor by clicking here to hide the left panel or using the keyboard shortcut command or control P.
Let’s review what we’ve done so far. First, we have our header with a site logo, navigation menu, and contact button. Then we have our page content with headings, a portfolio about me and testimonials. At the end, we have our footer where we added contact information and newsletter, subscription form, and social links, and we optimized it all for responsive.
Posts
We’re ready to move on to our portfolio. Click the E at the top to exit to WordPress. From the WordPress dashboard, we’ll click posts. We have these placeholder posts here that were added by our kit, and we also have this Hello World post. This is the iconic default post by work press. We don’t need it though, so let’s go ahead and delete it by clicking Trash.
Edit posts
We have a couple of options now to add in our portfolio work. We can either edit the placeholder posts or add new ones. Let’s start by editing a post in Gutenberg, the native WordPress block editor. Hover over the first post and click edit.
First thing’s first, we’ll change the name of our post. The post layout has already been structured by the kit, so we can just go ahead and replace its text with our own.
Adding new text automatically sets the block type to paragraph. We can change the block format and choose Heading. It’s set to H2, or heading two, by default. We have a few text formatting options as well, such as Bold. Italic and adding a link to our text. You may notice that we don’t have nearly as many style options as in the Elementor editor, so we’ll soon style this text from the single post template.
We’ll continue adding text…and done. Now we’ll add our portfolio project images. Scroll up and click the first image and click replace. Go ahead and drag in all the images for this post and let’s add in our alt text. Choose one image to add here and click select. Great. We’ll scroll down and replace the rest of the images.
If you want to add more elements, you can click this plus icon and choose from the available blocks.
Now let’s take a look at the side panel. On the right, where we have Settings for this post, we can add Categories to our posts. I’ll click add new category and call it “Packaging,” and I’ll add another one and call it “Branding.”
Next, we’ll update the featured image. And we can add an excerpt.
We’ll click Update and Preview in new tab. Looks pretty good, but the text still needs to be styled. We’ll do this from our single post template, but first, let’s go back to posts and update the rest of the placeholder posts with our own portfolio projects. Great.
Add new posts
To add new posts from scratch, click add New. We now have two options for adding new content.
We can either use the Gutenberg editor or we can use Elementor. The Gutenberg editor is a great option if you’re just getting started and prefer a simplified method of creating posts. As we just saw, the styling options are a bit limited, but you could still create attractive project layouts with it.
Once you feel more comfortable creating an Elementor, you can click edit with Elementor and use the Elementor Editor to design completely customized portfolio projects.
Portfolio pages (posts widget)
Now that we’re done adding our posts, we’ll set up our portfolio page. We’ll go to pages and hover over the work page, click more options and rename this page to Portfolio. Click Done and Edit with Elementor.
And here at the top, now we can see the name of the page is “Portfolio.” We’ll select the first heading and change the text.
Now select the Text editor and change its text. In Style, we’ll click typography and select a global font style.
Next, we’ll select the post widget, which now displays the featured images from the posts we’ve updated.
We have several different layout options such as skins, columns, and posts per page. I’ll leave them on our defaults, but feel free to explore them for your own portfolio. Note that we also have options to Hide the Title and Excerpt. I’ll leave both of mine showing and that takes care of the portfolio page. So let’s publish it.
Single post template
Now we’ll move on to the Single post template. We could go back to the theme builder to open it, but I have a shortcut for you. Type Command or Control E to open the Elementor Finder, which gives us quick access to various areas across our site. We’ll start typing single and select Single post template when it pops up.
This brings us directly into our single post template. Our post content widget isn’t displaying anything, so let’s add a preview. From the top bar. Click the settings gear, and from the left panel expand Preview settings. We’ll type in the name of one of our projects and select it when it pops up. Then click Apply and preview.
Now that we’re in the Elementor Editor, we can style the template for all our posts. The alignment and default color are good, so we’ll leave them as is. We’ll click typography and select a more readable global font style. Perfect. Click Publish.
Portfolio widget
Now we’ll go back to our homepage and finish setting up the portfolio widget.
Hold down Command or Control E to open the Finder, type in “home”, and select it. The first thing we’ll notice is that our portfolio is now updated with our projects. Amazing. Similar to the post widget, we have several layout options to choose from.
In Style, under items, we’ll adjust the Columns and R ows gaps using their sliders to add some space between the projects.
In Item overlay, we have options for the background text, color, and typography. I’ll change the text color and leave the other options as is.
Now, let’s Publish and click the eye icon to preview. Nice. The first thing you may notice is this toolbar at the top of the page. This is an administrative toolbar and visitors won’t see it on our live website.
You can hide it from your own view as well. We’ll open the finder and start typing in WordPress. The Finder displays several WordPress shortcuts. We’ll select Dashboard. Click Users, hover over your username and click edit. Uncheck show toolbar when viewing the site. Then scroll down and click update profile.
We’ll go back to our preview and refresh the page. No more toolbar. Let’s scroll through. Our completed homepage looks amazing. Sloan’s phone will be ringing off the hook.
Adding new content
Great, so now that we’ve created our homepage and portfolio page, you can apply what you’ve learned to customize the other pages of the kit to suit your website needs. Next, we’ll learn how to create new content from scratch. We’ll start by creating a new page from the WordPress dashboard. We’ll go to pages, add new, we’ll give our page a name and click save.
This brings us to the Elementor editor, where we have a blank page. Aside from the header, footer and page title, let’s remove the page title. From the top bar, we’ll go to settings and from the left panel. Switch hide title to Yes. Great.
Containers
Now let’s see how to use containers To add new content, we’ll click the plus icon from the top bar to get our widget menu
We could either drag in a container for a default layout or click the plus icon in the canvas to specify our container structure. Selecting the down arrow aligns our content vertically into one column, and the right pointing arrow aligns our content horizontally. We also have more complex layouts to choose from.
We’ll choose the first structure, and sure enough, our direction is set to column vertical. Let’s add an image to our container. By the way, you can also single click on a widget instead of dragging it in to insert it into the selected container. I’ll use a square image. You can use any square image to follow along in style.
We’ll change the size. We have a number of different units we can use to set our image size, but if you’re just getting started, I recommend using percent or pixels. I’ll set the width to 150 pixels, although the image width is set to 150 pixels, when a container’s direction is vertical, the widget itself takes up 100% of the column’s width.
Let’s see what that means. We’ll right click and duplicate the image. Since the first widget takes up the entire width of the container, it forces the second widget down to the next row. Let’s duplicate it again. Now we’ll select the container. We’ll change the direction to row. Horizontal RO takes into account the image wit, as opposed to the widget wit, we can adjust the widget spacing using the justified content settings.
Start is the default setting center and. And space between are used commonly, and there are a few more justification options for even more control. Next, we’ll cover container content width and min height. But first I’ll add a border to the container to help demonstrate the content width and min height settings.
The default content width is set to boxed, which means that while the container always takes up the full width of our view port, its content takes up the width specified here under width. In other words, the content is boxed into the container. If we change the width to full width, you can see from the border that when we adjust the width, the container itself takes up the specified width, but its content takes up the full width of the container.
By default, a container acquires the height of the widgets placed within it. But we can also specify a container’s minimum height, which means that the container will always take up at least the specified value regardless of its content. We can also apply custom settings to an individual widget from the advanced tab, such as alignment.
We can even place containers inside containers and customize their individual settings too.
The flexibility of containers really shines in responsive layouts. You can adjust nearly every setting for different device sizes.
There are more container settings to explore for advanced layouts, but these are the basic layouts to get you off to a great start. The best way to get comfortable with containers is to get hands-on and play around with the different types of layouts.
Start with simple layouts and gradually work your way up to more complex container layouts until you’re a pro. We’ll include a link to our Flexbox containers playground in the video description where you’ll find 10 interactive container lessons.
Hosting
For the last part of our course, we’ll learn how to access and manage our Elementor account and hosting settings, including connecting a custom domain and taking our website live.
Navigate to your Elementor account. It should still be open in another tab or go to my.elementor.com. This is the Elementor My Account Dashboard. We can access our profile settings from the upper right corner, and this tile represents our website. On the left, we have a panel with various tabs such as Subscriptions, where you can manage your billing details and auto renewal settings.
Below we have a few other links including frequently asked questions and support. Speaking of support, in the lower right corner, we have this icon which will follow us throughout editing our website. Click it to contact support at any time. Hovering over our website tile, we have three options. I’ll click Manage this website.
Here is where we’ll manage most of our hosting settings. First, we have our default website domain or URL. This is the domain we were assigned when we set up our website. Below we have staging environment. If your plan includes staging, you’ll have the option to create a copy of your website to test out changes.
Next, we have Manage domains where we can connect a custom domain, by clicking connect my domain and following the step-by-step instructions on screen. If you don’t yet have a custom domain, you can continue to work on your site as long as you’d like with your default domain. Once you’ve connected your domain, you’ll be able to set up email authentication to make sure that emails that come from your website use your custom domain as their email address.
Next we have Site Lock, which hides our website from visitors, while we’re building it. It’s on by default. If we’d like to share our website meanwhile, say with a colleague or client, we can view and copy the code. We can also reset it. Once we’re ready to go live, we can switch the toggle to off to make our website public.
Below, we have backups. Backups are created automatically every day by elementor hosting, and we can restore previous versions of our website at any time. We also have the option to create a new backup manually. It’s a great idea to do that before making any big changes to our site. I like to think of it as a big undo button.
And those are the essentials of managing our Elementor Hosting settings.
Outro and conclusion
Congratulations. You now have the tools and knowledge you need to build your first WordPress website with Elementor Hosting. To learn more about web creation and how to grow your business online, subscribe to our channel and check out the resources listed in the description.
We hope you enjoyed this course and feel confident in using Elementor hosting. Please feel free to ask questions and share links to your work in the comments. Till next time, see you soon and thanks for watching.
