How to create a WordPress website with Elementor Hosting in 2023 | Full Course

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 where you can learn more about creating websites growing your business and so much more 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 percent 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 plug-in compatibility Elementor hosting has you covered alright now that we know why to use WordPress we're ready to dive in and start creating your first WordPress website together 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 once you've typed in your site name click next and next again okay great our site is ready click let's go this lands us in our home page 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 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 Elementor 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 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 a 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 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 hosting 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 home page since our kit comes with its own home page 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 home page has the words front page next to it now we'll click edit with Elementor to edit our home page 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 which 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 web page we'll come back to it soon we're currently looking at our kits home page 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 Page's 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 Page's 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 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 tab's 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 H1 or heading 1 since it's the main heading of my page next we have an alignment option I'll leave it in the center 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 home page 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 [Music] save changes and we'll go back to editing the home page 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 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 align 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 home page 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 post with our own projects they will automatically or dynamically be displayed in the portfolio widget we'll continue editing our home page now later after we've added our projects we'll come back to preview the portfolio and edit its 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 kits 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 Sloan 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 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 Sloan this link will no longer work a better way to link internally is through elementor's 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 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 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 and that brings us to the end of the page content where we have the website footer before we move on to edit the header and footer 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 home page 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 home page and make sure everything is optimized our heading and text look great and will 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 is 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 will revisit responsive layout again soon in the header great let's go back to desktop view and click publish to save our changes so what exactly is a header well 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 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 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 for the site logo click choose image you can use nearly any image type including jpeg 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 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 a 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 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 in our home page 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 drop down 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 [Music] 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 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 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 Sloan'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 header I'll delete the container great on to 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 Sloane'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 a 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 tell 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 sign up 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 a column width is set to 60 percent 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 percent and if you recall the email Fields column width was 60 percent 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 justify 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 flush 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 five percent 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 day 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 I'll 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 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 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 percent meaning it takes up half the width of the main container now let's take a look at the container below and 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 percent 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 six percent 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 percent 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 the 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 a newsletter subscription form and Social Links and we optimize it all for responsive 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 WordPress we don't need it though so let's go ahead and delete it by clicking trash 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 things 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 2 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 [Music] 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 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 can 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 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 posts 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 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 now we'll go back to our home page 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 posts widget we have several layout options to choose from in style under items we'll adjust the columns and rows 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 home page looks amazing Sloan's phone will be ringing off the hook great so now that we've created our home page 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 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 rotates into account the image width as opposed to the widget width we can adjust the widget's spacing using the justify content settings start is the default setting Center end 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 with admin height settings the default content width is set to boxed which means that while the container always takes up the full width of our viewport its content takes up the width specified here under width in other words the content is boxed in to 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 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 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 sitelock 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 congratulations you now have the tool 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 foreign

Channel: Elementor

Views: 93,914

Keywords: elementor, elemntor, wordpress, wordprss, page builder, elementor pro, elementor tutorial, wordpress hosting, elementor hosting, wordpress website

Id: iGLN5Y_zFdc

Length: 61min 12sec (3672 seconds)

Published: Thu Jul 27 2023