Elementor Complete Tutorial 2022 ~ Build a Full Website with Elementor

if you're looking for the best elementor tutorial on how to build an element or website with easy to follow steps in 90 minutes or less at no cost to you then you've come to the right place hi i'm bethany and i love to travel right now i'm at couples tower aisle resort in ocho rios jamaica one of my favorite travel spots i recently got the idea to make a wordpress website so i could share my travel experiences and give advice to people who are new to traveling abroad i wanted my website to be mobile friendly easy to navigate and simple for me to update it turned out so well that my husband and i decided to make a tutorial to show others how to use wordpress i hope you enjoy making your website as much as i had fun making mine [Music] thanks bethany hello i'm yoda welcome to my remote office san souci resort ocho rios jamaica in this elementary tutorial i'm going to show you how to build an elementor website with easy-to-follow steps no hidden costs in less than two hours of your time this video will use all the current web design and web development techniques to create a fully responsive website that will automatically adjust to meet the screen needs of any type computer laptop tablet phone or any other handheld device i think we're ready to get started so without further delay let's go ahead and visit bethany's new website your ultimatevacation.com which is the website we're going to build today now her website starts out displaying a youtube video and basically we're going to be able to embed that into your website now initially you see this and you can already feel a little overwhelmed it's like wow look at all this complicated stuff but the truth is the software we're going to use is going to do all the complicated stuff all we have to do is tell it what to do now to start with bethany's going to have a logo at the top left corner we're going to learn how to make this logo for free online we'll then learn how to find free video content that you can insert into your website and then we'll learn how to insert that video content into your website now as we scroll down notice how the content animates in until it gets to its final destination i'll show you how to do this animation yourself it's actually very simple we'll learn how to insert pictures into your website we'll learn how to add text and change the size and the color we'll learn how to make these little wave dividers there's actually lots of different dividers to choose from this is just the one we chose we'll learn how to do call to action areas notice how the icon pops out and the button pops out and we can control the colors of all this and the size and everything about it change the icon as well we'll learn how to do these accordion lists where we could basically do any kind of frequently asked questions we want to do notice how you click on the different sections and it brings it up now you're not actually doing any of the coding to make this happen all you do is providing the content the software we're going to use is going to do all the real work we'll learn how to do a photo carousel notice you can force it to go to the right or the left or if you let it sit long enough it'll just scroll on its own notice in the testimonial section how the animation brings the content in nicely we'll learn how to make this testimonial section with images and the different text sizes we'll be able to control all this to whatever you need it to be then we're going to do this parallax background notice how the image slides up and down inside of the window then we'll learn how to add this floating box on top with a join our email list inside of it at the very bottom we have a footer it has four separate sections you don't have to use all four sections but i generally do you have complete control of the content that goes in your footer notice that column four has complete navigation that can take you anywhere from here or you can hit the button at the bottom right which takes you all the way to the top of the website then we'll build her about us page and on the about us page in the header is this other logo we're going to learn how to make that now also we'll learn how to put this movie in the header at the top now this could also just be a graphic or an image we have full control over that here's another two-column section that has some text to the left an image to the right and then under destinations you'll see that destinations is not clickable we'll learn how to make that not clickable it could be clickable but we're going to learn how to make it not clickable and then we're going to build individual pages under that for example the destinations jamaica page we're going to learn how to make this really nice header in fact if i turn around where i'm sitting right now that's exactly the view i have it's just unbelievable how beautiful it is here we scroll down you'll notice these little progress bars we'll learn how to make these and have complete control over those we'll also learn how to make these buttons that allow you to jump down to a particular place in the page for example if we scroll down to things to do you can see that takes quite a while to get there but if i click on the button it takes me right there immediately we'll learn how to make these pictures go all the way to the edge like this we'll also learn how to put the text in the boxes and how to control the spacing around them and we'll go back up to the top we'll learn how to make a gallery and one of the things this gallery has is called a light box in the light box all that means is when you click on an image it brings it up in a highlighted box and then you can click to the right or left from here notice when we close that picture it doesn't matter which picture you click on it'll start rotating from that point again you're not doing the mechanics of this you're simply going to drag a photo gallery in tell it which pictures you want to do and it's going to do all the work for you then we're going to build a travel tips page which includes all the travel tips that bethany's collected over the years just an incredible list of helpful tools for people who want to travel abroad our goal of course is to build the page it knows it has all these really cool accordion pull downs and all we did was provide the content it did the work for us and then finally we'll build a contact us page and on the contact us page we'll learn how to do these separate sections again these can be ordered however you want this is just one example of how it can be done so you have phone email and address the phone will be clickable the email could be clickable we try to encourage people to use the messages form so we made it not clickable here then we'll show you how to make the name email and phone fields required whereas the subject and your message fields are not required and we'll show you how to make the send button go exactly where you want it to go and we'll learn how to insert a google map into your website notice how the map can be moved around it can be zoomed in it can be zoomed out and we should be able to complete the actual construction of the website itself in a little less than two hours now all professional websites have certain intrinsic costs you simply can't avoid for example you're going to need quality website hosting and that's going to run you about ten dollars a month and you're also going to need a domain name that's how you access your website and that runs about 12 a year i'm going to show you where i get these services from a discount permissional rate but if you choose to purchase your web hosting somewhere else in your domain somewhere else this course will work just fine but outside of those costs that's it there's no extra cost to follow if you're concerned you're going to run into troubles while taking the course don't i've been a webmaster instructor aka the web yoda for over 20 years and i'd love to hear from my students so as you work your way through this course feel free to express your comments suggestions and questions below the video if you have any troubles just ask i'd be more than happy to assist you but in exchange please pay it forward like the video share the video subscribe to the video tell your friends about the video is the best way for me to get the word out there to help as many students like yourself as possible so we're ready to start on our website but before we can build a website we have to have a place for our website to live and that's what web hosting does for you otherwise you'd build a website on your local computer but only you'd be able to see it you want to be able to have the world see it so you have to get hosting so everybody else can see your results the next question is who are you going to get hosting from because obviously there's a lot of choices out there finding great web hosting solutions in the matrix of hundreds of choices can be frustrating at best you have to understand that nearly all web hosting review sites make sure that the web hosting company they are affiliated with always get the best review so basically that web hosting company is number one to them because they get paid if you decide to use that company i have been hosting websites for over 30 years with the first five years being me supplying my own hosting i have used at least 10 of the hosting companies shown here either personally for my clients obviously not all web hosting companies are created equal and there are only a few that stand out from the rest but how do you reveal the best web hosting provider with all the fake reviews out there as puzzling as this might sound i was able to find my answer while not allowing my own bias to interfere for me i like to turn problems inside out in this case i was looking for the web hosting review that reveals a web hosting company that sucks the least so first the quick answer to the question of who is the best web hosting company for me is simple hands down it's hostgator hostgator is definitely the best web hosting solution for me my clients and for web yoda but the obvious next question is why is hostgator the best choice well webiota did some research to try to find some authentic web hosting reviews and they settled on some results from pc magazine you have to understand that pc magazine has been around for nearly 40 years providing essential technology information to the end user for our purposes every year pc magazine does an editor's choice award to determine the best web hosting companies and shown here are the top six web hosting companies for this year with hostgator being number one it turns out the hostgator's been rated the number one web hosting provider by pc magazine for many years running basically hostgator collectively has the features you need their server reliability is amazing their 24 7 support is amazing their prices are good or better than anybody out there i personally been using hostgator for more than three years now i host over 200 domains and websites with them webiota also decided to go with hostgator for all their needs in fact webiota partnered with hostgator and as part of that partnership webview to students receive up to 75 off plus a free domain name now for you to take advantage of this offer you simply need to go to your browser and type in hostgator.com front slash web yoda now this takes you to the partner page for hostgator and web yoda and it reveals our three choices for hosting plans currently as part of this partnership hostgator is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most affordable choice for us if we scroll down we can reveal the pricing for each of the plans all three of the plans come with one click install so that means when we go to install the software it's gonna allow us to build our website we can just click a link and it'll install everything for us they also come with unmetered bandwidth which means we don't pay for the traffic that comes to our website no matter how small or large that might be and finally they also come with a free ssl certificate which typically runs around 99 a year and you say okay what is that what do i need that for well that's a little lock up here in the top left it allows your page to be secure so the information going to and from your website is secure at this point you need to decide which one of the plans is best for you for our purposes i'd recommend the hatching plan if you have one domain or the baby plan if you plan on building multiple websites and then if later you find you need additional features you can just upgrade to the business plan and pay the difference so in your case you probably need the hatchling plan which is just a single domain so we'll choose that the first step is to pick a domain name that works best for your purposes in my case for this example i'm going to use choose my domain name and if we click to the right it'll tell us if it is available in our case it is available so we're going to scroll down the next item is domain privacy protection and basically what they'll do is for 14.95 a year they'll hide your name your address your information like your email and stuff like that from people being able to see it now for me it's going to be on the website anyway so i don't feel like i'm giving anything away so i'm not going to choose to pay for that next where i picked our package type we chose the hatchling plan because we only have one domain so we want to look at our billing cycle within the billing cycle you purchase one month it's 5.48 but it's only for that first month and then the price goes up if you go all the way up to 36 months it's going to be 2.71 and it's going to be 61 off now to get the free domain you're going to pick 12 months 24 months or 36 months so let's go ahead and pick the 12 months it says 76.40 but let's see if we can do a little bit better than that now we're going to pick a username in my case i'm going to pick admin yoda and a security pin then we want to put in our billing information now scroll down to additional services now we don't need any of these services but i'll explain them real quickly the first is an ssl certificate we already get that for free so we don't need to add that the second is for them to protect us from hackers i know firsthand they're going to give you protection whether you ask for it or not so there's no reason to pay for this additional thing they're going to want to protect their servers from both the internet and from you so they're going to definitely stay on top of this next we don't need to pay for an email for our domain name i'm going to show you how to make an email forward for your domain at no cost at all next they offer a backup service where to do daily backups but i know firsthand they do monthly backups for you i'll go ahead and give you a video that'll show you how to make your own backups without having to pay them a regular fee like that if you're looking to make scheduled automated backups of your wordpress website where you're in full control as well as make manual backups at any time that you can store locally on your own computer then you'll want to check out my wordpress backup and restore video at some point we'll turn that off and finally hostgator offers some seo tools for nearly three dollars a month but there's plenty of free tools out there so we're not going to worry about that if we scroll down you want to make sure the web yoda coupon code automatically spawned in here so you get the best possible price and we look down and we see that now we're at thirty three dollars which is really a great deal that's money for the whole year it also includes our free domain name at no cost to us and that comes with 24 7 365 support instant activation of our account money back guarantee which is awesome 45 days collectively all these features leave me feeling very confident that i'm making the right decision today so we're going to scroll down we need to agree to their terms and now we're ready to check out but in my case i own the domain i'm going to use so i'm going to do one last thing at the top so scroll to the top and i'm going to choose i already own this domain and i'm going to change this to say choose your domain name.com that's the one i own so now we go back down to the bottom and we're ready to check out now and my purchase is complete it is now setting up my account once our hostgator hosting account is complete and ready to go you're likely to get a survey that looks like this one but at this point we're going to go ahead and go off script and save ourselves a lot of time and a lot of questions if you didn't have this video to follow obviously following these steps would probably get you to the goal that you wanted to do but we're going to be able to get there faster and easier we're ready to set up our email forward and install wordpress so to proceed you're going to go ahead and head to your email and you want to look for an email from hostgator.com that says your account info at the top if you purchase a domain name while setting up your hostgator account then the next piece of information will not apply to you if you already owned your domain name and didn't purchase one with this process you're going to need to get your domain name to point to your hosting area to do that you need to point your domain name to the name servers for hostgator all of my domain names live at godaddy.com so i needed to go into the dns at mygodaddy account and point that domain to the hostgator name service as shown here now if you're not using godaddy.com it should be a similar process and if you have any trouble just contact your domain company and they can give you further assistance to log into our hosting account we're going to need our username and we're going to need a password we're going to take that password and we're going to copy it to the clipboard and now you want to go to the control panel which is how you access your hosting space so we'll click on this link and that takes us to the control panel login page now my username and password are already there so i can just choose login and that takes you to your hostgator control panel also known as your cpanel as promised i want to quickly show you how to make an email forward under popular links you can find email forwards here if for some reason it doesn't show up under popular links you can click on email on the left and that'll bring up all the email options and then you can choose email forwards now we're ready to set up our email forward we're going to choose add forwarder and we're going to put in this case i'm going to put yota there's my domain name and where do i want it forward to i want it to forward to in my case yoda at www.com scroll down add forwarder and now any email sent to yoda at chooseyourdomainname.com will be sent to my email address yoda at www.com obviously this would be your domain name and whatever email you wanted to send to now we're ready to install wordpress if we click on hostgator at the top left it takes us back to the control panel at the time of making this video there was a wordpress installer inside the popular links but this particular method of installing wordpress is going away for a much easier method so on the left hand side under our website section we're going to choose softasculous apps installer and that takes us to the softasculis options at this point simply choose wordpress as the option and this will display the wordpress installer so to be completely thorough i wanted to throw in one additional tip when you come down and you click on softasculous apps installer there's a chance that wordpress doesn't show up in your list a very very small chance but let's assume it doesn't in that case you simply click on any of the other ones and in the box just type wordpress you click on wordpress and you're back to the same installer now before we proceed with our wordpress installation i wanted to address how to deal with wordpress installation errors in very rare occasions when you're trying to install wordpress you may get an error i've already installed wordpress so that i can demonstrate that error then i can show you how to correct the error then we'll install wordpress correctly so let's go ahead and click on install now like we think this is going to work and don't worry about the settings right now we'll worry about that next time through and i'm going to click on install at the bottom it starts the install and then it gives you an error now in this case it's just telling me it already exists but this error could be any area where something went wrong our goal is to get rid of the install error so we can reinstall correctly to get started click on softascules at the top left and right here is a list of our installations if i click on that it shows the one installation we had we know that we don't want it because it didn't work so we can simply click this x we can scroll to the bottom remove installation are you sure yes we're sure that installation has now been removed and now we're ready to install wordpress so at this point we can go back to softaskulis choose wordpress and now we're back to the installer and we'll click on install now and we'll go ahead and proceed to install our wordpress the first option is which version do you want to use the default will be the latest version we'll use that next you'll choose your domain if you have multiple domains they'll be in that drop down now over here it says what protocol do we want to use the problem is it can take a little while for the secure key to be activated so we're going to go ahead and turn this off for now we can activate it later so we'll just choose the regular one like that and it shows that currently our ssl certificate was not found and that's because it takes hostgator about 24 hours to get that up and running under site settings the site name is the company name so let's say this was for web yoda i'd put webview and then the description is whatever the description for the company is so let's say i put free online courses you can leave this unchecked we want to pick a username and a password i'm going to pick yoda user then you want to pick a secure password let's hide that so i can put a secure password in there now the admin email is where any email associated with a website will be sent so for example if you needed to reset your password that's where it would go now since we didn't set up this email forward that's not going to be good enough for us so in my case i'm going to pick one that does work so for me it's going to be yod.webuta.com for you it'll be whatever your regular email address is you can choose a different language if you like we don't need to select any plugins we're going to do all that ourselves no reason to make any adjustments to the advanced options and no reason to select a theme now we're going to do that ourselves as well when the installation is complete where do we want to send details to i'll use the same email address and now i can click install this says that it could take three to four minutes i've found it doesn't take really that long at all now that wordpress has been successfully installed we're ready to open up a new tab and look at our website at this point we're probably going to have to take a small break and that's because we just set up a hosting account that has a new domain the hosting is immediately available but the domain takes a while to propagate across the internet so that it's able to be accessed to test to see if your domain name's ready simply open up a new tab in your browser and go to your domain name and if your domain's not ready you'll get a message that says this site cannot be reached so you're likely need to take a break for about two hours and then come back again and go back to your domain and refresh and see if it works when it's ready you'll get a page that looks like this one that says website coming soon or you might get your new website home page so let's go ahead and close that test tab now we're looking at our completed wordpress installation page again now that wordpress has been successfully installed we're ready to open up a new tab and look at our website to access our website we simply go to our domain name and go to our website before you can start editing your website you need to be able to access your website admin to do that you simply go to your domain name front slash wp dash admin hit enter a login box will come up now simply enter the username and password you created during your wordpress installation so in my case yota user password paste that in hit log in and now we're logged into our wordpress now we're ready to log into bethany's wordpress admin so in my browser i'm going to put your ultimatevacation.com front slash wp-admin obviously you'd use your domain name here we'll use the username and password for her site then we're going to click on login now we're logged into the wordpress admin for bethany's new website now when you see the wordpress admin come up for the first time it can be very intimidating but fear not we're not going to be using any of this craziness we're going to have a very simple way for you to do this if you have any troubles at all you just leave questions under the video i'll answer and help you get you moving again this little message here we can just dismiss that now before we proceed i want to go ahead and clean up our tabs a little bit we no longer need this one so we can close that one we no longer need this one so we can close that one and now i want to open up a tab to the right that is the website we're going to build and to do that we're going to highlight right here and then if we right click here it brings up a menu where we can open up our website in a new tab now our website is here so we can click on that and as of now you can see it's a whole lot of nothing and now i want to open up a new tab over here to put bethany's version of the website as our reference site so i opened up a new tab and now we'll go to her web address now we can go back to our dashboard at this point i want to take care of a couple of frequently asked questions the first of those is how do i go back to a particular spot in the video to review it or to reuse it in another website and the answer is go to the video that you watched in this case the one you're watching now and then scroll down below the video and look for where it says show more and when if you click on show more and scroll down in that there's a section called time stamps in any of these time stamps if you click on it it takes you to the review for that particular piece of the video now these time stamps were for a different web yoda tutorial but the idea is the same now that our wordpress is completely installed there's a few other things we need to install to get everything ready for us to work on our real website the first of those is called a theme we're going to click on appearance and themes and then we're going to be adding a new theme but first we need to do is download the theme we're going to use and so we're going to make a new tab in our browser and then we're going to go to front webyota.com themes and this brings up the themes page on the web yoda website and now we're just going to scroll down to the project we're working on in this case your ultimatevacation.com and the theme for this website is oceanwp theme so we're going to click on that and it will download it to our downloads folder and each time i do a download like that might automatically brings up a window like this yours may not and i can click close on that and now i'm ready to upload our new theme and to do that we can go ahead and close this tab we're going to go back to wp admin and at the top of themes there's an add new button we clicked on that and now we're going to click on the button that shows up in the same spot upload theme and we're going to choose a file on our local computer in this case it's in my downloads folder and it's called oceanwp.zip i click on open and now i'll click on install and it will install that theme and once the theme is installed you make sure that you click on activate which is right here and that makes it the active theme that you're going to use for your website now oftentimes when you do an install of the theme it's possible that they've made updates to it which they do fairly regular and you'll see an update button if you see one just click on the update button and it'll give you the latest version of that now there's one last thing we need to install before we can actually start building our website and that item is plugins now plugins are the tools that are going to allow us to build our website much like a contractor has tools to build a house wordpress uses plugins to build websites so on the left hand side we can click on the word plugins now inside of plugins there's going to be a list of all the plugins that come by default within your wordpress environment but these plugins are for somebody else's website not for ours so our first step will be to delete all of these wordpress plugins and then we'll proceed to install the plugins we'll use with our website to delete plugins you first have to deactivate them and on the left hand side you'll see a box that says bulk actions if you do the pull down you can choose deactivate and just below that is a box you can click called plugin that allow you to select all the plugins at once now we're going to click apply this point is going to deactivate each one of them now they're deactivated at this point we can go to the bulk actions option again we can choose delete we can choose our plugin button to select them all again and then we click apply click ok yes we really want to do this and we watch one by one as they get deleted and clean up our environment so now all the plugins are deleted and we're ready to start installing our own plugins to install our plugins we first have to download them to our local computer then we can upload them into our wordpress environment to do that we're going to make a new tab in our browser we're going to go to com front slash plugins now on this page scroll down to the project we're going to be doing in this case your ultimatevacation.com and one by one we're going to click on each of the plugins that download them to our computer first plugin we're going to download is elementor and this is the page building plugin that's going to allow us to build our amazing website today every time i download a plugin i get one of these pop-up boxes i don't need all these so i'm going to close these as i go along the second plugin is contact form 7. now contact form 7 is the most popular contact form plugin for wordpress it allows us to build the contact forms where we can send information from our website to us from the users the third is cf7 elementor and this allows a contact form 7 to work inside the elementor environment the fourth is oceanwp extra and these are extra plugins that work well with the theme that we installed and the final one is the duplicate page plugin and this thing is amazing it allows you to take for example the destinations to make a page and make a copy of it and call it a hawaii page and then we can just change the content to be the new page we need now that we've downloaded all our plugins it's time to start installing our plugins we're going to go back to wp admin and from here we're inside our plugins and at the top we're going to click on add new at this point click on upload plugins choose file and just go to your downloads folder that's where they should be at we'll start with the one at the top duplicate page we'll click on open install now and once it's installed you need to click activate plugin once that's complete we'll click on add new again upload plugin choose a file oceanwp install now activate plugin and three more to go click on add new upload plugin choose file our third one install now activate plugin add new upload plugin choose file pick our fourth one open install now activate plugin and we have one more add new upload plugin choose file elementor open install now and activate plugin and we are officially ready to start working on our website now elementor is going to come with a brief overview but you don't need that you have me so we can close this out and there's one last thing i wanted to bring up if you notice near the top left that says updates to and lower down it says plugins too basically that's telling us there's some updates that can be done and if you click on whatever the item is in this case plugins you scroll down you can hit update now next to each one of these and this makes sure you're running the most up-to-date versions you'll notice that even though we just installed wordpress there's a message here at the top that says that there's available for a new update now this is likely because the default installed version was not necessarily the most up-to-date and now there's a newer version available that's good because now we can learn how to update our wordpress now to update wordpress basically when you log in to your dashboard you'll see a message like this and if that message shows up all you need to do is go ahead and click to update now so we'll click on update now and at the top of the wordpress updates page is important notice to backup your database and files now if this is a new wordpress environment where you haven't built anything yet you don't need to worry about the backup but if you've got your website already up and running you're looking to update your wordpress you'll want to back those up if you're looking to make scheduled automated backups of your wordpress website where you're in full control as well as make manual backups at any time that you can store locally on your own computer then you'll want to check out my wordpress backup and restore video at some point or you can simply click on the link at the top right and visit it now at this time we're going to go ahead and click on update now and this starts the update process for the wordpress now the update's complete it usually doesn't take too long and from here we can just click on dashboard to get back where we were at before we started the update okay our first step in building our website is to create some pages to do that we're going to click on pages on the left hand side and first we'll go ahead and delete the pages that are there these are just sample pages we don't need those but i can choose those book actions move to trash apply and now we have no pages now to add our first page we're going to click on add new and from here we don't need this little box it's not going to be helpful we're going to set a couple of defaults the reason why we're going to do that is so once we've finished our first empty page we can copy it and the defaults for all the new empty pages will already be set so first let's set a title for the page since this is our first page we'll call it home and then under content layout we're going to use a hundred percent full width and finally under title we're going to set the title to be disabled and these are just the defaults that are going to work for the site we need to build so now at the top right we'll click publish and click publish again and now our page is complete and if we go back to pages we'll see that it's listed as our first page that's available now there's one more default i want to set on our initial page so if you highlight the name of the page it comes up with these extra options and we're going to choose the option quick edit in here there's a template and we're going to choose elementor full width because that's the one we're going to be using for this course now we can click on update and our first default page is complete so to copy this page if we put our mouse over the home name again this menu comes up and the right is duplicate this that's how you duplicate one but how many duplicates do we need let's go back up to bethany's site and we have our home we need one two three four five empty pages so we'll come back over to our wordpress admin and we're going to make five empty pages so first if we highlight home we see duplicate this we'll click on that and now we have one copy duplicate this again now we have two copies three copies four copies and now five copies so at this point we just need to rename each of these to be the individual pages they're going to be so if we hover over the name we can choose quick edit and the first page is going to be about so we'll put a title of about and the slug name is basically the name of the page itself when you go to click on it and we're going to make that lower case because the server is case sensitive and now we can hit update now our second page name is going to be destinations so we go into quick edit title of destinations and slug name destinations lowercase update now we're ready for our third page we click on quick edit set the title of gallery the slug name of gallery lowercase and we click update now we're going to do the travel tips page we click on quick update so we're going to give it a title of travel tips a slug name of travel tips with a lowercase t a dash and another lowercase t and the reason why we like to use a lot of these words is if you're using keywords in your slug names it makes the search engines like you better so now we need to scroll down a little bit so we can see our update button we'll click on update and now we're ready to change our last one so we hover over the name click on quick edit title of contact slug name contact lower case roll so we can see the word update and now all our individual pages have their own individual names now i did forget one thing and that was that these are all in draft mode instead of published mode so we're going to quickly change that and you can see how that works so i can go back into quick edit under status choose publish and update and i'm going to do it for all the rest of these and you'll see that draft will go away and now all of our pages are published and are ready to start building our first page to edit the pages of our website requires us to access the elementor plugin and to do that it's the same for all pages first you want to make sure you can see the list of your pages by clicking on pages on the left and then choose the page you want to edit let's say we want to edit the about page so we clicked on the about and at the very top there's a button that says edit with elementor and we're going to click on that button this loads our page in elementor and now we're ready to make edits now let's say we're done making edits we need to get back to the dashboard you come to this hamburger icon you click on that and at the very bottom is exit to dashboard now at this point we can go back to our pages and choose a different page to work on now notice that the about has elementor next to it that means it's in the elementor mode that also means when we go to edit it if we click on it again now instead i have an icon at the top it has one right in the middle of the page and we click on that icon going forward to make edits to that page and if you're ready to work on another page click on pages and choose another page that you want to edit you'll notice the link for the destinations page is now changing to destinations jamaica this is because the actual page is destinations jamaican but the link at the top is destinations that we'll need for the menu now before we start adding content to our pages so we go back to bethany's site notice this menu across the top we want to go ahead and build that menu before we do anything else so let's go back to our dashboard now to add a menu we need to go to appearance and menus and in the box next to menu name we're going to put main menu and save menu now we're going to pick all the pages that we just created and we're going to add them to menu then we'll scroll down and under custom links we'll add another menu item destinations and we're going to use a pound sign as the url for now click add menu and now we have our menu we need to organize it the way we're going to use it so we wanted our home button at the top and then about and then destinations and then gallery and then travel tips then contact and then destinations jamaica is a sub menu for destination so we're going to bring it up here and then set it just to the right under destinations now as a final step we're going to go into this custom link which is destinations and just take that out and that's how you make it to where it's not clickable so we can click on save menu and now our menu is saved and then at the bottom we want to choose this to display as our main menu and then we'll click on save menu again and now if we go over to our website and we hit reload you notice now we have a menu and each of these items is clickable and they take us to those default pages that we've made so notice that destinations is not clickable but the pull down destinations jamaica is clickable all the pages obviously look the same because they're empty right now within bethany's website she had a black menu bar with these lighter colors now it's not totally black and the letters aren't totally white that makes it a little easier to read um to make that effect we're going to go back to our wordpress admin and under appearance this time we're going to choose customize and within customize we're going to choose header and so you may need to scroll down a little bit to see it and inside a header we're choosing general and that's going to have the place where you're going to change your background color now if you click on select color it comes up with this pad where you can basically move around and pick whatever color you want or choose from these different choices here and then move it around some more and decide what color you want now in our case bethany went to a lot of trouble to go ahead and make a lot of information for us so for example the titles and slugs were there that she used in her website as are the default colors that she used all the logo colors and things like that so for her the menu she wanted to have it black but not totally black and this color is a little less than black and i'll show you how that works me come back over here if i pick black notice it's all zeros or if i pick white it's all f's well all f's is white all zeros is black and anything in between makes the number go up and down now for her she picked a color that was almost black and that way it has a little softer look to it now at that point we need to change the letters now so we can actually see them again so we'll go ahead and click on publish to make that change to our site and now i'm going to scroll back to the top and then i'll hit the left arrow to take us back one menu and now we're going to go into the menu options and from here we can make the change to the color so notice here's the link color so i'll go back to bethany's document and i'll pick the off-white that she chose as opposed to this full white and we go back in here we can change this link color and i noticed if i picked white it's really really bright but if i pick the one that she chose it's a little less than white it's a little easier on the eyes and then i want to go back and pick her menu accent color and i'll show you how that works notice this blue here when you come over here you can see that little line there well if i change that to the color that she chose it's just green and then i come down there's another place down here where you can change the same thing now when we come over here it'll have this nice little green accent on it now we want to go ahead and change the background and link color for the drop down to match what they are up here so we do that under the drop down styling we go in here to our background color and set it to the background color we used and then we'll scroll down to the link color and use the color that she chose there now when we come back over here you'll see that those things match up just fine in bethany's menu this menu is to the left over here so if we scroll to the top here's our option position left center right we'll choose left and we'll choose publish and now the only thing left is to build the logo that's going to fill in this spot and so we'll go ahead and do that next now i'll go back to the wordpress dashboard by clicking the x at the top left so some of you will already have your own logo there's no reason to build a logo as part of this course but if you're in need of a logo simply click on the link at the top right and learn how bethany built the logo she needed for her website online for free to add a logo to the menu bar you're going to go under appearance and then you're going to choose customize you're going to choose header and then you're going to choose logo now we're going to do select logo we currently don't have a logo in here so we're going to do select files we're going to choose our logo dash menu hit open hit select and we're just going to skip cropping because we want to use the full thing and it's going to fill in right here and whoa it's really big so we're going to make some updates to that but down here we've got in width and height that we can set so let's just try 200 200 first and that actually looks pretty good but i think i'm going to make it just a tiny bit bigger on both of these so that the you're in the dot com look a little bit bigger i think that's good so we're going to go ahead and click on publish and we'll come back over to our website and let's hit reload and look at there we're making progress now we're going to go ahead and add our favicon icon that's the little icon that'll go right here so we're going to go ahead and go back to our wordpress admin and again for the sake of being thorough we're going to go back to the dashboard and from here you're going to go to appearance customize site identity and then down here we're going to select image and we currently don't have the image uploaded yet so we're going to do upload files select files pick our logo transparent our real big fancy one click open now we'll click select and it is the correct cropping already so we'll say crop to image now the favicon has been added and we can click publish and now if we go up here and reload it should show up and it did well done now one of the things we need to do is define our home page we have a home button and that does take us to the page that would be our home page but the main home page is going to be whatever it is when you come into here which is just your url by itself and this is a page that isn't going to exist in our site to set our home page we're going back to our wordpress admin and again for the sake of being thorough we're going to start at the dashboard under appearance we're going to pick customize then we're going to choose home page settings and now we're going to choose static page and for our home page we'll pick home now we can hit publish and now we come back over here and we hit the logo again and that shows that it comes back with our empty page it no longer shows that default page from before so we have now updated our home page if you notice when we click on one of our pages the names of these pages have index.php inside of the name and what we want to do is we want to change our naming convention and to do that we're going to go back to our wordpress go back to the dashboard and from the dashboard we're going to go to settings and then we're going to click on permalinks and this is the different types of naming conventions the most popular is called post name and the reason is is basically it's your url and whatever you gave your slug name to be it's clean and it's helpful for the search engine so that's one we want to use so now we can scroll down hit save changes now if we come back to our website and we reload the about us page just comes with the word about so now it's working correctly now not all websites can benefit from a search option for example bethany's website the navigation itself should get you to just about everything you need so we're going to go ahead and remove the search option from her website to do that we're going to go back to our wordpress admin and under appearance from the dashboard we're going to go to customize then we'll go to header menu and then we're going to scroll down until we see the option that has to do with the search box search icon style it says drop down and we're going to say disabled and notice it went away over here we'll hit publish now we go back to our website and we reload and it's no longer there next i want to remove this little white line here because that's going to become a problem when we have our video pushing right against here to do that we're going to go back to our wordpress admin and we will go to the dashboard and from the dashboard you go to appearances customize header general and then we're going to turn header border bottom off and publish and finally we need to remove the spaces above the menu bar but of course it'd make too much sense for it to be right here so once again we'll go back to our dashboard from there we're going to go to appearance customize and from here we're going to go to top bar general and where it says enable top bar we're going to turn that off and that one goes away hit publish and everything's finally cleaned up nicely now let's go ahead and change the copyright information in the footer to say what we want it to say and to do that we're going to go back to the dashboard and from here click on appearance then customize then scroll to the bottom and choose footer bottom and now we can change it to say whatever we want in this case we'll just put webiota inc now we'll hit publish and now notice it has this little oceanwp underscore date that's a special code that says when you're actually on the real page to fill in a year and so when we hit refresh on our page now it'll say webview to inc so our empty page is totally complete and we're ready to add real content to our website and of course we're going to start with building our home page to do this we're going to go back to our wordpress admin go back to the dashboard now we're going to go into pages and pick the page we want to work on in this case home now notice again it doesn't say elementor next to it because we haven't used home homepage with elementor yet we click on home so the first time through the edit with elementor button is here we'll click on that and it brings up our new page inside elementor here's the tools we're going to use here on the left and here's we're going to be building our page on the right in the same way that driving a vehicle for the first time can be disorienting and maybe intimidating using elementor is going to have that feel at the very beginning as well now as opposed to doing a general overview of everything that it'll do step by step what we're going to do is build pieces step by step and you're going to learn the overview as we go along and the reason is is only about 20 of elements are you ever going to use 80 of the time so there's really no reason to cover a whole bunch of stuff you'll never use as opposed to just showing you everything that we're going to use on a regular basis so the basic mechanics of the elementor environment are you have widgets here on the left and they're the things you're going to use to build your page and then you're going to have your content area over here where you're going to build it now the left item is for creating a new section whereas the right item is for inserting templates and the templates are basically sections that have already been created and so one of the nice things is once you've built a section you can save that as a template and later bring it back in to recycle code all websites require content to create the website so in your case you're going to need content for your website which is any text and information you have as well as the pictures that go along with it in our case bethany's provided that for example for the content she's provided a google doc that has all of the text and information about what fonts and things she wanted to use to build the entire site so that allows us to get a head start and it turns out that collecting the content can be a little bit frustrating but if you already have your content in order it's going to make it a lot easier to build your website now bethany also provided a folder that had all the different files she's going to need so here's the files for the destinations there's going to be a gallery here's some additional images some testimonials videos and audio different related stuff so again being organized and having your content available um certainly some of it in advance is going to make it much easier for you to build your website now suppose you don't have good access to images and videos for your website what are your options if you're looking to access the best royalty free photos and images online at no cost to you then you'll want to check out my best free stock photos and images video at some point or you can simply click on the link at the top right and visit it now so now we're ready to add our video and to do that we first need to create a section so we're going to click on this plus sign here and it gives us choice how many columns we want now we can add columns as of we want we can adjust the columns but this is kind of a default now for our beginning section it's only going to have one column so we'll choose that and it made this little area up here now on the left hand side it has three different things you can do you can control the layout the style and advanced features of the particular section now in this case under layout i'm just going to set the height to be fit to screen and that made this really big area and it's going to allow us to put a background video in that spot now to add a video background you first have to have a video and in our case we're going to provide you with some resources below this video to get access to free video clips the first one of those is youtube it's obviously the most popular and one of the advantages to the youtube environment is any video you use from youtube you don't have to worry about licensing because part of the agreement is is if they put it in youtube it gives you the privilege to at least display it in your own personal website in the search box i'm going to type 4k beach and the 4k is for basically really high resolution videos and beach be obvious we're going to click on the first one and here's this really nice beach scene now we can actually just copy the url up here to our clipboard and we're going to be able to paste that into our website and make it a background and this little ad is not going to show up in there let's go ahead and go back to our website and now to do the backgrounds we're going to click on style on the left and then the first section you see is about backgrounds and the types of backgrounds you can choose from is classic which is just basically an image gradient and movie let's review each of these to see how they work so let's look at making a background here we can click here to add an image and then we're going to upload an image that we want to use we're going to select files and then we're going to go actually there's an easier way to do this let's use bethany's folder and we're going to go to images and then we're going to just drag this over here now her image is loaded we can just click on insert media at the bottom right and it's going to place that image in there now initially our background is black and we're like well that didn't give us what we were looking for if we come over here to positioning on the left here we can choose center center and then scrolling down you'll see there's always extra options if you scroll let's set the size to cover all of a sudden now it kind of makes sense the second option is this gradient if you want to choose a gradient and it's going to choose between two colors to gradient between so let's pick a second color pick this green and so it gradiates from one to the other now once you've picked a color you have to click on the color box to get the display to show you your options again and now down here at angle you can choose the angle that you want that gradient to be at you can also choose the type of gradient so if it's linear that's basically left to right and then we could do radial that goes from inside to out now the last background type is the video so we'll click on the video icon and here where it says video link we just paste that video link that we had in there and and it'll just show up in the box for us and that's just really spectacular so we're out of nowhere we went from having a website that didn't have any content in it to having this pretty video we like the way it looks so we're going to click on update at the bottom and now we can go back to our website and click on the home page and now we have this spectacular background for our home page now in bethany's situation she created her own video so if we go to youtube in another browser tab then we do a search on your ultimate vacation it'll come up as one of the top listings and here's the video cover she's going to use and in her section here it has the credits to all the people that contributed some of these were purchased and other ones we were just given the opportunity to use we appreciate that we'll also put these video credits at the bottom of the video you're watching now so for us to use this video we simply copy that url to the clipboard we're going to go back to our wordpress and in the box we put in the new url and it'll show up with the new video we click on update we go back to our website we can click the home button again and we see that it shows up now at this point we can go back to our home page and we're ready to start on our next section and so to add our new section in her case if we go back to our home page we're going to be looking to build this section right here now i know there's text on this we're going to add the text that video a little bit later but we want to build this section right here now in this section we've got a column with the left that has an image and a column on the right it has content at the top and bottom of the section are these little swoosh things we're going to add the swooshings later once we built them with the majority of this page we're going to go back to our wordpress so now we're back at our wordpress and to do our new section we're going to scroll down we're going to choose a plus sign to add a new section and in this case it's going to have two areas one for the picture on the left and for the content on the right so we'll choose that and now we have these two little boxes we're going to want a picture in the left box let's go ahead and come to the left hand side i clicked on that plus to bring this up and we're going to put an image in there and we're just going to drag this over to that little box and now we can choose our image so we click on this and now we're going to need to upload a new image so we're going to go back to bethany's folder and choose her profile picture so we'll pick that one drag it over it's done loading insert media and now it's added to the page we'll worry about resizing that in a minute what we want to do now is put some content on this side over here and to do that i'm going to click on this box now what's interesting is there's three different types of things you can edit just to give you a good idea notice this tab just like this one that's for editing the section so when i click on that it shows me the section controls so for example if i click on this one it shows me the section controls for this one now over here notice there's this little block here well that's for editing the column which that picture is in and this is editing the column that there's nothing in so far whereas the little icon over here is for editing the contents of the column in this case this image so we can edit the section which gives us controls we can edit the column which gives us controls and we can edit the item itself which gives us controls so now we want to add some text to the right column and if i click on that box it comes up with the options over here and we're going to put a header in there first so let's drag a header over there just like that and it shows up with some default text now it's possible to edit the text here but you're better to edit it on the left hand side it ensures you don't accidentally get some additional funny formatting in there so we're going to come in here and put our new text your ultimate vacation guide and now i want to add another line of text below that now when you're in a section and you want to get the widgets to show back up you can click this little icon right here and it'll show your choices and so we're going to drag another header over here and notice how the blue line is where the widget will be inserted and then we're going to change the text for that and then we're going to add a third item and we're going to do a text editor this time because we want to put a bunch of text under that and then we'll come over here and we'll paste in our content for that now for this section bethany used the green background of the color scheme that she chose so we're going to click on the section tab and then we're going to go to style and notice where the background thing is where we did the video before we're going to choose classic which is going to give us the opportunity just to choose a color because you can either do just a color or you could do an image and we're going to put in paste in the green that she gave us and then again click on the color icon to close that out and now we have the green background that's going to match what she had on her website at this point we're ready to format the rest of this text to make it look correct let's take a quick field trip back to bethany's site and notice that she has some large text here that's white medium text here that's black and smaller text here that's white and these turn out to be three separate fonts and she gives us those fonts so if we look in the document that she gave us she told us what she wanted these fonts to be and one of the things that's really nice about wordpress is that instead of having to define all the fonts every single time you use them you can actually set defaults and so that's what we're going to do next we're going to go back to our wordpress and now over here at the hamburger icon we're going to click on that and we're going to click on default fonts now the primary headline is the large white text bethenny to use the secondary headline is the medium text she used and the body text is just the regular everyday i'm reading in a website text now accent text we haven't used and so we're not going to be setting that today so we're going to go ahead and set the three types for bethany's website now the primary headline for bethany she chose latto and then the weight we're going to leave as the default is 600. basically the weight is how bold something is and when you look inside of there default you got bold and then you've got a gradated scale and six i think 400 is basically regular bold the 600 is a little bit more bold than that next for the secondary headline she wanted to use roberto slab and that ends up being the default in this case so that worked out well and we'll also use the same weight for that's the default there and then we're going to click on the body text as our last one and for body text she chose open sans so we'll go ahead and choose open sans and we'll also use the default weight for that at this point we can hit apply and now all of our default fonts have been set now one typical question that comes up often is how do you know what the fonts are well let's go over here to our tab and then we're going to type in google fonts and hit enter and then from here just click on the first link it'll be fonts.google.com and these are all the fonts that are built into wordpress that are usable by you and they're broken down by the different types of categories and trending fonts and different things like that so basically if you're interested in a certain font let's say well what does latto look like well i can go and type it in and then i can see well that's what laddo looks like now with our default font set we can go in and set the color and size of the different fonts we're using we're going to head back to our wordpress and just a reminder remember if you click here you're editing the section which is this entire area it's the con the information that applies that whole area if you edit in either these little black boxes you're editing the particular columns and if you edit the little right edge of these these are for the particular items that are within the columns so there's three levels of editing now in this case we want to change the size of this particular piece of text so we're going to click on the little blue box here and it brings up the controls for that on this side now remember there was something called a primary heading which is the large text that's white and the secondary heading which is the medium text that is black well to choose those it's down here in under this html tag we want to choose h1 which is going to make the primary heading the choice for this text right here now we're going to click on the style options for that and typography is going to allow us to set style for that particular font whereas above that is text color now that text is supposed to be white so we'll click here and we'll go ahead and choose white and again click on the little box to exit out of there so now our text is white now we can do the typography and the typography is going to allow us to set the individual attributes for the font so for example if we want to change the size we can scroll in and out on this or we can manually set it we're going to set it to 50 in this situation and then the weight we could set that that's going to be our default now for transform if you want it to be all uppercase it'll do that for you all lowercase capitalize which makes the first letter capital on each word normal and we're just going to stick to the default also under style you can pick normal italic or oblique in this case obviously default and the decorations allow you to say whether it's going to be underlined over line line through or none or choosing default and at the bottom you can choose a line height which is how much space is between the lines and you can choose how much space is between the letters and by putting nothing in these boxes you're going with the defaults on those as well and for me i'm almost always using the defaults because they're set to a standard for a reason all right so that typography is fixed now text shadowing allows you to set text shadowing around it to a particular color so let's say we want to have it to be black we can choose black and then as we scroll up or down you notice that the letters over here are getting a line around them bigger and smaller and if i close out of that i can choose a blend mode so it gives you a lot of different options as far as ways of having special effects on your text now for me i'm just going to have normal and i'm not going to have that particular feature on this one so i'll pick default now i'm going to set the text for the next box so i'll come over here and click on that and i'm going to go to style and we want to use black for this one so we'll choose black exit out of that and then under typography it turned out that she had decided even though her secondary headline she wanted to be roberto slab that in this particular use you wanted to make it montserrat and so we're going to choose that and we'll set the size to 32. we can exit out of that and now we'll click on the text for our edit box we're going to go to style this text is supposed to be white so we'll choose white close that out and now we'll go to typography and default is the font and for the size let's put 18. now we've closed out of that and we're ready to edit the settings for the picture now one problem is even though this is a great picture it's way too big and it's certainly not what bethany has on her site notice how much smaller it is and the reason is is that the default when we gave it two columns was fifty percent and clearly she's made hers less than fifty percent so we'll go back to our wordpress and then we'll click on the column itself and now we can make a change instead of 50 let's try 30. that looks a little bit more like what she had we'll click on update we'll come over here we'll reload our page and that looks significantly more like what she had now at this point notice that this stuff is centered and ours is not so we want to go back and make that center adjustment as well so we can come back over to our wordpress and then we'll click on this text and at the bottom we can center it and then we'll click on this text and at the bottom we can center it and now we can update and go back to our website and hit reload and now it's also centered if you notice in our version there's a lot of space on either side whereas in bethany's or not so this particular section she has full width instead of boxed in so let's go ahead and go back to our wordpress and then for that particular section we're going to select that section and then on the left we're going to turn on section stretch and then we're going to turn on content full width to be full width there like that and then we're going to click on update and now we'll go back to our site and we'll hit reload and now it basically looks the same as her site now we want to go back to bethany's website and notice the dividers it has with a little wave looking thing and the extra space at the top and the extra space at the bottom and again the wave thing we're going to go ahead and make those updates to our version so if we go back to wordpress the first thing we're going to do is add some space in the top and bottom of this section so let's go ahead and click on the section itself and if you go to the advanced tab we can add padding to it now if you add padding in here it adds it all the way around so for example if i put 40 in here it'll do it at the top and the bottom and the left and the right well if i don't want it that way i can click on this little guy here because i didn't really want it on the left and the right so much maybe but i wanted it on the top and the bottom so that allowed me to add the spacing at the top and the bottom just the way we wanted to now we're going to add the spacer in between here that looks like a little wave and it actually is added to the bottom of the top section so we're going to click on the top section and make it the active one we're going to go to style and at the bottom of style there's a thing called shape divider and inside shape divider you can put a divider at the top or at the bottom or both we're going to choose bottom and then we're going to choose the waves brush and it shows up down here and now we're going to click on to change the color and use the green that bethany used exit out of that and then we're going to set the height of this to say 60. and now we have that wave divider there now to put the wave divider at the bottom we're going to come into this section we'll scroll down and then we're going to go back into our style for this one and we're going to scroll down shape divider and we're also going to put it on the bottom and then we're going to choose our shape of the waves brush and it's the white the same as hers you see if we come over here hers has a white one at the bottom but that's okay but it's too tall so we'll go in here and change the height of that to say 60. and then there's not enough space in between these anymore it's a little close so we'll go back to our advanced tab and where we had 40 for the bottom let's try 60 and maybe 70. so now we have enough space we have the divider at the bottom and the divider at the top so we can hit update and then go back to our website and hit refresh and we have the divider at the top and we have the divider at the bottom and we're ready to do our next section now we're going back to bethany's website to review the next section which are these three call to action areas and notice when you move your mouse over the icon they pop out a little bit and over the buttons they pop out a little bit we're going to create one of these call to action areas and then we'll make two copies and then just change the content on those so let's go back to our wordpress and now we're going to make a new section and this section is going to have three columns in it and now for the first column we're going to click on that we're going to want to add what's called an icon box so we're going to scroll down and there's our icon box we're going to drag that over and look at that little blue line where that blue line is that's where it's going to insert it at and now i'm going to go back up here and i'm going to click on this icon to bring the list up again and i'm going to grab a button and we're going to bring it down here and we're going to add a button below that as well and while we're here we'll go ahead and center our button so our button's in the right spot now we want to style our icon box so we're going to click on that to make it active and up here where it says star we're going to pick sun because that's the one we used the title we're going to use is destinations and the content is that now at this point we want to make the changes for colors and things to this so we're going to come into the style tab and under primary color we're going to pick the yellow that bethany used in her website close that out and then under content it has two areas it has the title which is this guy and it has the description which is this guy for the title we're going to set the color to the teal that she used it was in her list of colors we'll close that out and now under typography we're going to make the font a little bit bigger let's say 28 and then for the description size of the font let's go down here and make it a little bigger we'll choose 18. go out of that now we'll scroll back to the top and under advanced we want to add a little spacing around here so for our padding let's put 20 all the way around that gives it a little space around there and then notice that our icon doesn't bounce so let's go back to the style and under here it has normal and has hover and basically when you hover over it's when it happens so we're going to click on hover and then our hover animation we scroll down and it says bounce in and now when we move our mouse over it bounces like the other one now i don't want these words as spread out in this section as they are so we're going to click on that or go into our style for that section at the bottom is the content and this is the description so we'll go into typography and scroll to the bottom of that and we'll see that there's a line height and let's just put that at 1.3 that's a lot better now let's make some changes to our button so we'll click on the button item and the text on the button should say learn more the link should be for our destinations to make a page and then we're going to set the color of the button under style we'll just click on the background color and put bethany's green in there and close that out now we're ready to update and we can go back to our website and see what it looks like we'll click up here and then we'll do reload and our call to action is ready to go and we can make our two duplicates now to make our two duplicates we'll go back to our wordpress and then we'll come over and look at the or highlight this icon in the left hand corner that's the column icon if we right click it there's an option to duplicate if we right click it again there's an option to duplicate well now we've got to come over here and right click and delete the two that were extra that we had and right click and delete that one so now we have our three areas and we just need to update the content on those and maybe do some magic and make that happen pretty quick now our content has been updated for the two here and we're ready to hit update and go back to our wordpress website page hit reload and there we have all three of our call to actions now we want to add our wave divider at the bottom and in bethany's site it's that teal color so we're going to come back over to our wordpress we're going to select this section because it's going to go at the bottom of this section then we're going to go to a style in inside of shape divider we're going to choose the bottom one and then we're going to come inside of here and choose waves brush we're going to set our color to that teal close that out and we're going to set the height to 60. clearly there needs to be more space here so to do that we're going to go into advanced and then we're going to unlock this and then we're just going to add a whole bunch at the bottom let's say 70 and maybe we'll try 80 and that looks good we can hit update go back to our site hit reload and the call to action section is complete okay okay that's almost complete but when you go across these buttons they don't light up and they don't bulge out so let's come back to our wordpress we'll click on a button we've got to go to style and we got to set the hover for those and then the background color is going to be bethany's yellow i'll close out of that and then the animation is going to be our bounce in and now that one bounces and then we're going to magically do the other two just the same and now they all work and we can hit update get back to our website hit reload and we really are done now now we're ready to do the next section on bethany's website the next section is this travel tip section basically frequently asked questions about travel and it uses a header and then it has this accordion effect where you're able to put content inside of each of these items and at the bottom there's a button we want to head back to our wordpress and we'll add a new section at the bottom going to be one column and now in that column we want to first put a header so we'll add that in there and then we'll pick another item which is called an accordion we'll scroll down and that one's right there and then finally we're going to put a button in there the very bottom and so now we have the three items we're going to put in there now we just need to add content and style them so to start let's just go ahead and change out our content so we'll click on that and the header for that will be top 5 travel tips and the first item in our accordion if we click on the accordion it comes up over here first item in there we'll put the name here it's going to be make a list and then we can scroll down here and this is where the content is going to go we'll need to delete the content that's in there and then put our own content and so now we have our first one and now we're ready to edit the second one so we can come down here and we click on the second one right there and the title for this one is that and then we'll replace our content and you can stretch that box so you can see exactly what you're putting in there and now we have two of these see they both work and then you can add a third item like that and we'll put our title here for this one like so and then our new content and we can scroll down actually we can close that one by clicking there and then we can add another one for our um fourth of five title there put our content there close that one down and add our last one like that and so now this is where the title will go this one will be sunscreen and the content sunscreen is good use sunscreen and now we have a fully functional accordion with a title and a button but we still have some more work to do on these now we're ready to style this section so we'll start by styling this header and we'll come into the style section and the color for this header is going to be bethany's yellow and then we're going to go into typography to set the size and let's go ahead and set that at 30. and we can close that out now we'll click on the accordion go into the style for that and then under title we'll set the color of the titles to white now that's obviously going to make it disappear for the moment so we'll pick white close that out and now we'll go into the background and we're going to set the background to that teal that we use but to do the teal it needs to be in the section so we need to click on the section and then go to style because we want the whole section to be teal then we get a background type classic and we're going to set the color and set it to that teal and all sudden everything shows back up we can close out of that let's go back into our accordion and we want to go back to the style for the title because under typography we wanted to make that funnel with bigger so let's say 30. close that out and then for the content itself we want typography and we're going to set that content to say 18 and then we need to set the color for that to black and that might do it now that looks kind of big though so let's change that out go back into title typography right 20. then if we click on that that looks really good okay so now we need to work on the button but i'm going to actually delete the button and i'm going to delete it for two reasons number one it's going to be styled the same of these so basically if i make a copy of this one i don't have to put all the bells and whistles on it i just have to change a few settings on it and secondly i want to save this section as a template so we can use it on our travel tips page later so let's go ahead and delete our button so we can come over here and right click and choose delete and now we want to save this as a template now to save this as a template we go up to the section tab we right click on it and then we choose save as template and then we give it a name so i'm going to say your ultimate vacation dash and we're going to call this travel tips save it and now we have that particular travel chip saved and when we go to our travel tips page we'll be able to insert that and we'll have to build it again so that'll be real helpful so close that out now we're going to make a copy of this button i'm going to right click duplicate and now i can drag this button down here and notice it bam right center just where we want it so now all i have to do is make the updates to this button so this button if we click on it over here is where we need to change our text and the button should say more travel tips and the link will be that and now we've got everything set up and ready to go we can click on update go back to our page hit reload see our new accordion in action everything's working now the one thing is this is a little close to the top so we should add some space at the top and the bottom and we're going to find that we do that all the time so we're going to come in here get back into the section go into the advanced tab unlink all those and then for the top try 30 and for the bottom 30. that should do it i'll do update back to our site hit reload and that section is ready to go now one thing i forgot to do is that in bethany sites there's no lines around it and our site there is and it actually turns out that there are lines around hers you can't get rid of the lines but you can tell the lines to be the same color as the background which basically makes them go away so we're going to do the same thing on ours so we're going to come back over here and then we're going to choose the accordion and then we're going to go into style and then the border width nothing matters you put zero it doesn't work but you can come in here and change it and use that same teal and then when you go to update and you look at the site those lines will disappear and so we have the effect we want now i went ahead and went back and re-saved our template without the line so when we use our template later it'll be correct as well now we're ready to do our next section and on bethany's website you'll see it says image carousel and the dividers actually overlay into the images so they're actually inside both of those are inside that section so we'll be adding those as well so let's go back to our wordpress and then we'll scroll to the bottom create a new section one column and on the right we're going to make this full stretch full width with columns having no gap so we're basically wanting this thing to be as wide as possible now we're going to click on this icon to bring up our list and we're going to do the image carousel and it's going to be located a little bit farther down drag that over and now it's entered in there now we need to add images so we can click on images here and we're going to upload images then we're going to go to bethany's image folder and inside of her folder is a gallery and then we're going to select all of these there's 24 of them drag them over to the left and it'll insert all those for us now our images have uploaded and we can click on create a new gallery and just choose insert and here's our gallery now we're going to set the image size to full and then we're going to tell it to do three at a time to show three at a time i think that's the default and then we're going to do slide three at a time now i like the arrows but i don't really like the dots so we're going to scroll down and there's a place to modify the navigation and we're going to choose just arrows now we need to put our little dividers on the top and the bottom and to do that we need to pick this particular section go to style and under shape divider we're going to do the top one first and we're going to pick our same wave brush and then we're going to set the color to the teal that bethany likes and then we'll close that out and then we're gonna set the height to 60. and it's not showing up but the reason is is we need to turn on this spring to front because the carousel sitting on top of it so now we can see it and now we're going to pick the bottom we're going to pick waves brush we're going to pick color white and close that we're going to pick 60 and then we're going to turn that on and now we have a fully functioning carousel now it's interesting if you come in here and try these different ones you'll see they do lots of stuff so don't just decide on one you can actually go through and try a whole bunch of different things it does neat stuff i just happened to pick this one actually bethany picked it because it looks really good for what she's trying to do so now our carousel is complete we can click on update go back to the website hit reload and we're ready for the next section this carousel we're actually going to use on multiple pages so let's go ahead and go back and right click on the section and save as template and we'll give it a name your ultimate vacation carousel save it and now we have these two that we'll be able to recycle and use later so earlier we talked about how to find free stock photos and images for your website but we didn't really discuss how to size them correctly by default most stock photos and certainly the ones that you're going to take yourself are huge however the smaller your photos and images are the faster your web pages will load so for example if you could reduce the width and height of your images by two you effectively reduce the file size by four and that means those files will load four times as fast if you're looking to edit photos and images online at no cost to you then you'll want to check out my how to edit photos online video at some point once you've changed the width and height of your images to be the best size for your website you can then take it a step further and optimize your images and reduce the file size even further without affecting the visual quality of your photos and images if you're interested in optimizing your photos and images in your website as well as making your website load three times as fast then you'll want to check out my wordpress need for speed video at some point now we're ready to go to our next section and that section will be the testimonials now i notice the animation and stuff we're going to show you how to do all that animation later but at this point we're just going to learn how to build this testimonial page it's going to have a header it's going to have one testimonial and then we'll clone it and then we'll make another clone to have four of them total and a button at the bottom so that's our goal so let's go ahead and get started and we're going to go over to our wordpress start a new section we'll have one cell we're going to make it a stretch section full width and then inside of it we're going to put some different widgets so let's go to the menu of widgets we're gonna have a header at the top and pick another widget and then we're gonna have this intersection and basically what an intersection is it's kind of a sub widget basically allows you to put two columns within it and the reason why i'm using this is that when you display this on a mobile device whatever's in this cell will nicely wrap under the one that's there and since all these testimonials are kind of look the same but some may be taller than others this is going to make it look better on a mobile device and then at the bottom we're going to need a button so we'll come up here and we'll right click on that and we're going to do duplicate and we'll drag that button down here somehow now we got them in order that was tough so next we're going to put the text that we need to have in here which is testimonial so we'll put that there and then we want to go to the style right here and we're going to set the color of this the bethany's green and then we're going to go to do the size of this so we'll set the size to 40. and bethany had a special font she wanted to use i'm not going to begin to try to pronounce that and we're going to use a weight of 300. close that out go back to content we'll center it now we need another widget we're going to scroll down we want an image box drag it in there and notice that our image is at the top right now we want our image to the left just like that and now we need the image so we're going to come over here and click on image and we need to upload some images and to do that we're going to use bethany's folder so go back to here and then under testimonials and we'll go ahead and drag all these in at once and then we're going to pick that one i think is the first one let all those load and that's the item we're going to pick for the first testimonial so we'll insert that media and then we're going to click on the heading for this and the heading is going to be that now in html instead of just an ampersand you're supposed to put that particular code so you want to make sure you do it the same way that's there so that it works in all browsers now we need the content that's going to go in here so we'll put that in there like that and now we have a testimonial built and now we just need to style it to be the same as bethany's so now we'll go over to our style tab and this determines the space between here and here so let's say if i put 20 in there it makes a little bit bigger and this decides how big this is let's say we'll put 40 there and at the bottom we can modify the content for these two things for example the title we want that to be black so we'll scroll down and choose black and close that out and then we can check in on the typography see what our options are there let's go ahead and set this to 20. that might have been the same but it looks good close that out and then when we go down to the typography or the bottom and scroll and look at that go ahead and make that 15. that's a little bit bigger and that should do it the only weird thing is there's a little tick mark in there so let's go in and change that and get rid of that now we have one testimonial that's completed now to build the second one we just right click and choose duplicate and then we can drag that one by that little handle there over here and now we can right click on this section this intersection and duplicate and now we have the four that we need and then finally we need to update this button to do exactly what we need it to do so it's going to say more testimonials and the link is going to be testimonials so our testimonial section is complete except that we need to change the content on these other three and we're going to go ahead and use some magic again to change those all at once and now all of our testimonials are updated and we're going to have a testimonials page so again we want to make ourselves a template so we're going to right click there save as a template name our template your ultimate vacation testimonials hit save and now we have three templates to use later on we'll close that we'll hit update go back to our site hit reload and the testimonials there we just will have our little border thing that we'll end up doing at some point let's go ahead and get started on our next section we'll go to bethany's website and we're going to build this parallax section down here at the bottom where this image slides like that really nicely and then we're going to put a join email list in that so let's go ahead and go back to our wordpress and we're going to go to the bottom and we're going to create a new section one column and then under advanced for that column we're going to unlink those we're going to go to 130 for the top 130 for the bottom that spreads that out i'm going to go to style and we're going to set the background type to just a regular image and we're going to choose our sunset image insert media and now at the bottom we're going to set attachment to fixed scroll down a little bit and set size to cover and that's starting to look nice next we're going to go back up and we're going to add an inner widget and then we're going to delete one of these cells we're going to set the width of our inner widget to say 500 i'm going to go back to our widgets and we're going to put a header in there for now as a placeholder and then for this particular column we're going to come in and set a background and let's say we'll set the background to that color we're going to give it some transparency if we come down in the border section we can round the corners with border radius let's say 12 and now we'll go ahead and add our separators for this so we'll come into that section we'll go to style scroll down and for our dividers we're going to do the top one it's going to be white so we'll pick our waves brush we'll pick a color it's already white and we'll set a height of 60 and then we'll choose bottom waves brush we'll set the color on this one to bethany's black and we'll close out of that and we'll set our height to 60. and we have that piece completed we'll click on update we'll go back to our website hit reload and we have that working now we need to put in our join email list form in here so we're going to go back to our wordpress and now we're going to need to exit out of this page and go back to the dashboard because we're going to work on the contact form 7 it's going to allow us to build the mechanics that are going to make that work so on your left hand menu you'll see a contact and you can click on that and then when you scroll down you'll see there's already a form there we're going to click on that form and we're actually going to make our contact us form and then we're going to make our join form so we don't have to come back here later and we're just going to rename that contact us and i can hit save just to make that change now if you scroll down you'll see they've already done most of the workforce but i want to show you how the mechanics of this work so this particular form is going to have your name your email a subject and your message well suppose that you wanted to have the telephone number in here i can go in here and add an um spot in between i can click on this telephone option here and then i'm just going to click insert tag now all we need to do is make the content that goes along with this look the same as the other so for example i'm going to copy that to the clipboard i'm going to paste it there now if i take the telephone tag and i copy that i can just paste it where the one on this one was and so now we effectively have the telephone number that's going to be in the form itself now notice up here in the text in the email fields there's an asterisk that asterisk tells it to be required field so if we want the telephone field to be required which we do in this case we'll put an asterisk there and now that will be required now for the label we'll just simply rename it to your phone you can make it whatever you want and notice that it says required here but that's just text we actually had to put the little bitty asterisks here to make it required we're just saying tell the person that's going to use the form this is going to be a required field now obviously this is just one example we added phone but you could add any of these other things with the text area drop downs check boxes radio buttons and it'll do all the mechanics for you just be instructing on what you wanted to do at this point we want to hit save and that will tell the system that we have this new field in there and then we're going to go into the mail tab and make some adjustments in here now the first thing we're going to do is set the two the two field is where do you want the email to go to by default it's the admin you set up for your wordpress environment but we want in this case to go to comments at your ultimatevacation.com you can make this go to any email you want so you can make it to go to your personal email if you chose as well next we're going to make an adjustment to the from field meaning who did the email come from and we're going to put no reply at your ultimate vacation.com now obviously that's not who it's really coming from but that keeps the server happy who it's really coming from is under these additional headings that they already put there for you where it says your dash email and if you look back at the form that's the email they've submitted so in reality it's going to work the way we want and we're going to keep the server happy by setting that finally we want to scroll down to the body of the message and currently in the body of the message it does not have the phone number we added on the form itself so we can come up here copy that to the clipboard that is our field for our telephone and then inside of our form the bottom we can make some space we can put phone and then we can add our tag and now it'll add that field when we receive an email we can come back up here hit save and now our contact form is complete next we want to make our join our email form and to do that we're going to click on contact on the left again that brings up our list and it has the contact us we created if we highlight that we can make a duplicate of it now that duplicate comes up automatically and then we can change the name of it right here now we're going to put our name for our new form in here we'll call it join our email we'll scroll down and look at the fields for the form in this form we only need the email and the name of the person so we're going to delete those three and so now it just has the person's name and their person's email and we can click on save over here on the right and now we're going to make some adjustments to our mail tab and if we go in there and scroll down where it says subject we're going to change this out and we're going to change that to say join our email the rest of this can stay the same and in the bottom section we only need the person's name and email so we're going to delete those we'll come over here and put a space here the email get rid of the less than and greater than now we'll just be receiving their name and email scroll back up hit save and now both of our forms our join email form and our contact form are ready to be inserted into elementor so now we'll go back to elementor so we'll click on pages we're going to scroll down and click on home because that's the page we're working on edit with elementor and then we're going to scroll down to the bottom and we want to make an adjustment here we're going to add our form in right there to add our form we're going to go down and we're going to pick the very bottom one which is going to be this void contact form 7 and we will just enter it right there and it's just an empty form at this point and then we're going to pick the contact form it's going to be and it's going to be our join our email and now we want to change some of the styling settings so let's go ahead into styling we'll click on that and at this point we're going to need a tiny bit of coding in our first field at the top we're going to put color colon white semicolon then we're going to scroll down to where it says all input css we're going to put the same thing color colon white semicolon and then we're going to scroll down one more time and we're looking for the part where the submit button is and we're going to put the same thing again color colon white semicolon and now we're also going to add one more piece of code here which is the background color background colon and then this is the code for bethenny's yellow now at the end of that you'll notice we put a semicolon every time you do css there's a semicolon at the end of each of those and that particular piece of code made this yellow button and it made the text on it white and then the two that we added up here this the second one we added change the code that's inside of these boxes so that it shows up white and then the very top one at the top was doing the your name and your email so that's what that did so at this point what we're going to do is we're going to click on this column that's inside of here then we're going to go to style going to scroll all the way to the bottom go to typography and then hit center and that allowed us to center these different things here to make that look nice now we want to change the header up here to be what it's supposed to say so we're going to come back over here and in this box we'll put join our email and now we'll go into style typography we're going to set the size let's say 28 and we'll make the color i'll say white and that should do it so we can now hit update and go back to our website and hit reload and now our site has a fully functional join email form so we're ready to do the next section which is going to be the footer let's head back over to bethany's website and we're going to look at the footer we're going to have a picture of her as our guide we're going to have a follow us section we're gonna have a contact info section and then we're gonna have navigational section let's go see how to add those and first let's go back to our wordpress so we can get started to edit the footer we need to exit back to the dashboard so we're gonna click the hamburger icon and choose exit to dashboard now on the left hand side we're going to choose appearance and then we're going to choose widgets you'll notice over here there's four sections here's the footer one butter two foot of three footer four and those relate to one two three four now for footer one we're going to put a picture of bethany so let's scroll down and find the image widget we click on that and then you want to choose footer one add widget now we can put a title your vacation guide we'll pick a picture and we'll use the one we already have for her right here add to widget and for a link we're going to put a link to what will be the about us page we'll hit save and come back over here and reload and we have our first section so let's go back over here and get ready to do section two and for footer two we're going to use the social icon so we'll scroll up and find that widget choose footer two add widget and then we're gonna use all the defaults but we're gonna be adding in her social media right here and we used a little magic to make that happen real quick now we can scroll down and click save go back to our page hit reload and now we have a fully functional follow us section with all of our social media we're ready for the next section come back over here and for footer three we need to scroll to the top we're going to choose the contact info option and we'll pick footer three add widget and for this one we're going to use a lot of their defaults but we'll change out a couple things for example we're going to put text and say we would love to hear from you now for the address section we're not going to do that on this section so we're going to take those out and for the phone section we'll just change out the phone number that'll be for this website for the mobile and fax section we won't be using those so we'll take all that information out and then for the email section we'll put the email for this website and last for the website we're going to actually use this to do a message s box as opposed to doing a website so for a title we're going to put message us and for the url we're going to make it go to our contact us form and for our url text we're going to put message us now we won't have any skype so we'll turn that off we can hit save come back to our website hit reload and there's our third section ready to go so for our final section we'll go back to wordpress and we're going to do a custom menu that's how we're going to get the navigation in there so we'll scroll back up near the top there's the custom menu widget and we're going to do that for footer 4 add widget and again mostly defaults we'll set the title to where to next then we'll choose our menu which is the main menu we have for our link color we're going to choose the color that was bethany's white and then for the hover color we're going to use bethany's green and the rest is just defaults we can hit save get back to our website hit reload and we have a fully functioning footer now notice that our little wave separator is a different color and that's because that's the one that bethany wants to use for the menu and for the footer so we're going to actually have to go back into the customize section to change the footer background color so let's go ahead and head back to wordpress and from here we're going to go to appearance customize and we're going to scroll down and go into footer widgets scroll to the bottom of that and where it says background color we'll change this to bethany's black we'll hit publish come back over here hit reload and now our footer is complete now that also means that our entire first page is complete and i think hopefully at this point you're like wow you know this actually is doable i can make this happen it may take longer than i might have thought it would but it's going to be easier than i thought it would as well so we're ready to get started on the about us page and to do this go ahead and go back to wordpress and from here we can just close that and we'll go into pages and we'll pick our about page and then just click on edit with elementor to get started now notice now our new blank page has our footer on it as will all of our pages so we'll go back to bethany's website and we want to see what her about us looks like it's going to have a little movie at the top special version of the logo we're going to see how to do that some text on the left picture on the right and our carousel so we'll be inserting the carousel that we've used before we're going to go to youtube so we'll make a new tab and then i'm going to do a search for landscapes nature relaxation 4k and we'll pick on the first one you'll notice that this video has the background that i want to use but it also has a bunch of text and other stuff going on another problem is if you click out way farther in the video it's about something other than what we're trying to do so the trick is is that we only want to use a certain piece of the video so if we click back over here we can find a starting point we want to start at so for example anywhere in here if i want to have a starting point i can just choose to pause it and when i pause it for example i pause it right at one minute when i right click on this and then choose copy video url and current time and i paste it in my browser it shows 60 what's the number of seconds well that can be my starting point and then let's say later on in the video i kept playing it for a little bit and it went forward in time a little bit then i can pause it again i can right click on that choose copy video url with time and now it says it's 186. so i can have a starting and ending point and we want to use those in our video to only loop through that small piece of time copy that url to our clipboard and go back to elementor and we're ready to add in that background at the top of this new page so we're going to click on there we're going to choose a single section we'll go to style and we're going to do video and we're going to paste the video name in there and then i'm going to give it the starting and ending point in seconds so 60 to start with and i chose 130 seconds for my ending point and you can see the little video playing in here we're going to give it some space we'll unlink that at the top we'll put 30 and at the bottom we'll put 60 because we know we're going to do our wave divider go into style first and then scroll down and choose shape divider we'll go to the bottom and then we'll pick our wave and then we'll set our color to bethany's green set our height to 60. and now we've got this section getting close to what we want it to be so now we're going to go ahead and choose put another widget in by clicking that icon we'll put a header in here this should say about now we can go into style to style that and let's tell it to be white we'll use that fancy font that bethany used before let's say we'll set the size to 40 and we'll close out of that and let's get a little shadow so we'll just go in and give it a black as a color and ramp that up and you can see a little shadow behind it now we'll go over the content tab we'll center it and now we're going to add an extra column so we're going to right click on this column and add a column now just between these you can grab on the middle and shrink it like that and now all of a sudden it's starting to be where we want it to be at now for this particular column we're going to add a background to it so we'll come in here use that and we're going to use our logo that we used earlier we'll insert that and we need to choose center center and we'll set the size to cover and it's starting to look like the logo we want let's click on the text again we're going to go in it to advanced and we'll give it 20 at the top and 20 at the bottom and now we have our logo at the top go ahead and go down to the bottom and click update now we can go back to our website and hit reload and our header shows up we're ready to add the next section so let's go ahead and go back to elementor we're going to add a section this is going to have two columns the right column is going to have a picture left column is going to have text let's go ahead and set the background color for that section while we're here we'll pick color i'll use bethany's green again and now we need to pick a picture for the right hand side so we'll go up here to choose so we can drag in the image widget we'll choose the upload file option we'll go back to bethany's images and inside the images we'll find the image we're looking for and it'll be this one we'll drag that over and that loaded and we can click insert media and now we want to put some text on this side so we're going to go back to widgets and we're going to choose text editor and we want to put the content in here that goes there so we will replace with the right content choose a style tab go into here color white close that let's make the funnel a bit bigger and we can scroll down and that section is complete we can hit update go back to our page hit reload and we can see that's been added and we just need to add the carousel at the bottom now so let's go back to elementor when i come to the bottom and now we're going to choose this folder instead of this icon instead of the plus because we're going to go in here and we're going to choose my templates and there's our my templates and there's our carousel i'm going to insert that i always choose no on this and it inserts our carousel now notice that it's got the wrong color at the top and because it's i'm going to leave the footer at the bottom it has the wrong color at the bottom so we're going to change those out so we're in the section and we'll go in here shape divider change the top color to that we'll go into bottom and we'll change the bottom color to match the footer color which is the bethany black and we next out of that we can hit update we can go back to our website and hit reload and the about us page is done just like that now we're ready to go to the next page so we're going to go back to elementor and then we go to the icon up here exit to dashboard and now we need to go back to pages and pick our next page so we'll scroll down pick destinations jamaica as our next page to edit click on edit with elementor and now we can start on the destination jamaica page the first thing we'll do is make a column one column in that section we're going to stretch it full width and now let's set the background and we're going to use an image so we'll pick classic and we're going to need to load an image from here so we need to go to bethany's folder so we'll go to back up here destination jamaica and over here we needed to do the upload folder now we can just drag this over now that's added we can insert media and it shows at the top we're going to set attachment to fixed size to contained and now we're going to put some content in here so we'll go back up here and let's just drag this widget in there three times so the first one will be destination so we'll put that in there then we'll go to style we'll set the color to white we'll go into typography we'll set this to say 23. um she wanted to use a different font for this we're going to use this vega font 200 for the weight close that we're going to go into the shadow we're going to do 5 and 2 2 this will kind of offset the shadow to the bottom right now we'll go into the next text we'll change that text here and then we'll go into settings under the style again we'll set the color to white we're going to do typography this time we'll do 33 font the vigo again and then we can close that out and we'll do the shadow the exact same way 5 2 2 close that out for the last one it's going to say jamaica go to style in this one we're going to set the color to bethany's green we'll close that typography we're going to pick another font that bethany likes squatter one i'll make this really big 330. close that go back to the color i wanted to make this a little bit transparent like that and then we're going to go in the shadow do the shadow the exact same way five two two close that and now for the blend mode on this we're gonna do luminosity it's fun to play with a different one to see the kind of effects i notice this hangs down a little bit as far as the word jamaica we're going to move it up some but it's still going to look funny in here but when we produce it in our update you'll see that it looks correct also on this edge here these are too close to the left so let's go ahead and choose that section and inside of here we're going to unlink the padding and for the left hand side let's set that to 20. that moves it in a little bit and now we want to edit the position between here and here this is a neat trick so we're going to choose the jamaica text and we're going to go in advance and now we're going to use margin this time we're going to unlink those now one of the neat things you can do with margin is you can also give margins negative numbers so this top margin up here i'm going to say negative 30. and notice how it pulled it up there real nice like that now if i hit update and i come in here and i reload you'll see that it fits in there really nicely destination is a little high up here so i want to move it down a little bit that'll move everything down just a tad so we'll click on destination advance we'll unlink this and for the top on this we'll put 20 and then we'll hit update and then we'll come back in here and hit reload and it's a little much because this is starting to show at the bottom so we're going to move this um space get a little bit of that space out of there and a little bit of the space out of here so i'll come to destinations i'll come in here and we'll do that same trick we're going to go into margins unlink that and for the bottom margin now i'm going to put -10 and notice how i pulled it up a little bit and then for the jamaica where we had minus 30 let's try -40 and we'll do update come back in here reload and it looks perfect now so let's go ahead and view bethany's website and we'll see that she has the header at the top it's got a title here some text here and then it has these fancy little progress bars and they're in two columns so we're going to do an inner column to do that and then we got a button a bunch of buttons across here that we're going to add those as well so let's go ahead and work on that first section so we'll come back over to our wordpress and then we're going to scroll down and we're going to pick to make a new section and this section is going to be one column now we'll go over to our widgets we'll put a header in there come back to the widgets we'll put a text editor in there just below that go back to the widgets i'm going to put an intersection just below that and go back to the widgets and i'm scrolling down looking for what's called progress and we're going to put a progress bar in the first one of those and then once we build it we'll make a bunch of copies and we'll copy them to either side so we'll start by adding some style to the text header we'll go to the content and choose center and we'll set that to say introduction and then we're going to style it we're going to set the color to be bethany's teal and then we're going to set the typography to the fancy font that bethany likes size of 50. close that out now we'll edit this text paste in our content go to style and come into typography we'll use default font but make it bigger and we're going to use black here and now we're ready to edit our progress bar so we'll click on that and the top here is what goes right there so we'll change that to say accommodations then this sets the percentage of the bar we'll say 80 and the inner text inside the bar is that text right there now we've got one of them completed we're just going to make duplicates of these to make all six and then we can change the content for those so basically i can come here duplicate duplicate duplicate drag one of those over here duplicate duplicate now while i'm thinking about this text is a little too high up so we're going to click on that text go to advanced unhook those and then on the top of that let's make that 30. that brings it down so it looks a lot better okay so now we have these that need new content and we'll go ahead and use some magic to do that so the progress bars are complete but in bethany's site she didn't have the percentages on here because these really aren't percentages those are kind of just approval ratings and so really we want to go back and change that and so what we need to do is click on each one of these so for example we can click on the first progress bar and under display percentage we just put hide just like that now we'll just quickly adjust the other five to do the exact same thing and our progress bars are complete and we're ready to work on our next section and for here we're going to add another intersection so we're going to come back up to our widgets and then we're just going to drag this intersection to here and in bethany's website it has the yellow coming up next so let's go ahead and add this little bar in between our separator so i'll come into here we're going to choose that section go to style shape divider we're going to do a bottom and we're going to choose our waves brush and our color is going to be bethany's yellow close that out i'll put a height of 60. now we can see that it's there but it's a little bit close on here and obviously it's going to change when we put the other stuff in there but while we're in here let's go ahead and go to here and we'll unlink the padding and let's try 60 in here and now we're ready to start working on our button bar so we're going to come back up to widgets and we're going to choose a button we'll drag that in there and we're not going to need this empty column because we'll just copy the button column that we have to the left so we'll right click that and delete it and now for our button we'll just come over here and tell it to be centered and we're ready to add the rest of our formatting for that button from here we'll click on style we'll set the background color for the button to bethany's green and then we're going to choose hover and set the background color for the hover to bethany's yellow and now we move over the button we'll see that it highlights as we would want it to so we're going to duplicate our button six times well five we need six we'll right click there on the column duplicate and we'll do that four more times so now we have our six buttons and we're ready to get our buttons to point somewhere but first we need the sections that are gonna point to because this button is going to point to the next section let's go ahead and start the next section and we're going to make this a single column we'll go into style we're going to set the background for this section the bethany's yellow now we're going to add some widgets to that so we'll come in and put a title widget there and an editor widget under there like so and then we're going to start putting the content in for those two and there's actually a subheading so we're going to put another heading in here like so we'll go to edit the first heading style and we're going to pick bethany's fancy font and we'll set the height to 50. and we'll go ahead and set the text to that to be places to stay and under style we'll set the color to be white now we're ready to do the bottom one here text will be that go into style we'll set this also to white close that typography default font let's try 30 and then for the text for the bottom section just change that out and now we're actually going to need another section of text below that because we're going to put numbers next to it and show you how to do that let's go ahead and go back up here to widgets we'll put another text editor down here and for the one that we started with let's go ahead and to style we'll set this to black close that typography default font but let's go with 18 for the size and then we'll do the same thing for the one down here we'll go into style color black typography 18. for this particular piece of content we want to make this a numbered list and to do that to make this software work well you want to have the individual pieces of content have a space between them now i did this in a text editor to make it work well for me and so in this case i'm going to highlight the five different areas i have copy that to the clipboard and then i can come over here and i can paste it in and when i scroll up you'll notice there's an individual line between each one of those if you don't have that individual line when you apply the line numbers it'll only give you a 1 at the top so now we can select all that and i'm going to go click on line number and if you notice now there's nice line numbers next to them now from here we're going to go ahead and put in the bottom wave separator so let's come up to the section for that we'll go to style and then we'll get a shape divider this will be for the bottom we're going to use our waves brush and we'll use bethany's green for this because that's going to be the next section below that and we'll set this to 60 and now we scroll down we can see that there's not enough space there so again come into advanced unlink those and for the bottom let's set this to 60 and now we've got plenty of space there now let's go ahead and visit bethany's website again and for the sake of time notice that most of this is very similar to what we're already doing the sections are changing colors and things like that we have this special section here i'm going to show you how to do but all the rest of this is very similar and at the very bottom there's also a photo gallery i'm going to show you how to do that but for the most part that content is very similar so i'm just going to do that behind the scenes as a bonus for making it this far through the course i'm about to show you everything you need to know about using elementor templates you've probably already figured out there's a duplicate version of this website obviously because the site has the content for bethany's already in it so there also is a back end for that one we're going to go into that backend and here's the section for the places to stay that's completed so in this section i'm going to right click on this and i want to save this as template and i'm going to give it a template name that has the word original on it so i know it came from the original site now click on save to make a copy of that now it's listed in our list of templates for this particular site but i need to use it in the new one we're doing so i'm going to come over here this little icon and i'm going to export it and it comes up with this box and i want to save it as a file and now that's been downloaded to my computer and if i go to my downloads folder you'll notice that it's listed but it has a really funny name and you definitely want to change these names so i'm going to go ahead and rename that and i'm going to rename it what i named it originally that way when i go to recycle it it's going to make sense now we're ready to insert this version of the template into our version of the website so let's go back to our elementor we need to save our updates that we were already working on and now we're going to have to go back to the dashboard because you have to import them from the dashboard that's the only way you can get the new templates back into your site that are exported so we're going to click on elementor and it should just bring up your templates by default if not there's a my templates option as well and now from here we're going to import new templates so we'll click on import templates choose file choose the template to import and import now and now you see it shows up in our list of templates that we can use now we can go back to pages so we'll click on destinations jamaica edit with elementor and now we're back to our jamaica destinations page and before we can insert the new piece we need to come down here and remove the old section that we had so we'll remove that section and now we're going to go to our folder here and inside a folder we'll be able to get to my templates now before we insert our template i want to tell you about blocks and pages blocks are basically sections that you can add into your website project now any of them that say pro next to them if you want to access that you pay a one-time fee to elementor to have unlimited access to all their pro versions which gives you access to the really nice ones if you scroll down you'll see that there's really a lot of stuff here just keeps going on and on and on it's just wonderful what they've done and many of them are free there's also a lot of pro versions as well we end up getting the pro version to have access to all the additional ones because it really wasn't that expensive now under pages these are entire pages that are complete so if you wanted to have an entire page that was done and used it a certain way you could go in here and just click on it and again the ones that don't say pro or free and the ones that say pro you paid a one-time small fee to them and you get access to all those unlimited also elementor is a partner with web yoda just like hostgator was a partner with web yoda so if you end up deciding you need the pro version a portion of those proceeds go to help provide additional free training for training centers and students online all over the world who can't afford training and then under my templates are the ones that we've created or we've imported or we've saved and notice that now this one's available because we added it to our library and so i'm just going to click on insert i'm always going to choose no for this and now it's added to the site but notice it has all the content so not only does that save us the trouble but i saved me the trouble of having to write this whole thing in there a second time notice in our import that the text is now no longer black this seems to be an import issue i'm sure elementor will fix quickly but in our case i just went back and set it to black in the page now suppose you don't want to just save one section what if you wanted to save the whole page well the way you do that is down here if you click on that little arrow there's an option to save as template and that would save the entire page as a template and that allows you to import entire pages as templates in fact that's exactly what i did here once again our import resulted in our black text becoming gray fortunately bethany provided me with a solution that we will apply later in this video if you scroll down you'll notice that now all the content is in the site except for the small piece i'm going to show you how to do here and the photo gallery at the bottom now at the very top we had these buttons and now these buttons have names because we imported those now when you click on one of these buttons it shows a name here now notice that name has a pound sign in front of it and the pound sign is required and then next to it is whatever the name of the link we're going to link to inside of a page so this case is going to be places to stay and each one of these has its own name things to do now to get it to go to that place we have to add a special widget so let's go to our widgets and scroll to the bottom and it's called a menu anchor and we're going to drag that menu anchor just above the heading there and then over here we can paste in the name of our anchor but we got to take off the pound sign now at this point when we scroll down and we hit the places to stay button it automatically jumps to that spot now it turns out that all the other ones we've already put into place so you can see that one goes there and if you go down to the budget it goes straight to the budget section so if we hit on update and we go back to our website and hit reload now this will be the new version and each of these buttons will work and go to particular areas now at this point we're ready to go ahead and fill in those little sections that were left over from before so let's go ahead and go back to our wordpress and from here we're going to scroll down to the section that we want to work on and we're going to work on this section right here we're going to set this to stretch full width column gap no gap next we're going to need some pictures to put in here i'm going to go ahead and make a duplicate of this because we're going to use it twice and so now we're going to go back and get an image widget put one in there scroll down i'm going to do the same thing here another image widget it's going to go in there now we're going to choose an image for this one we're going to upload one and we're going to use bethany's folder and then we're going to take this one i'll drag it in just like that insert media and i'm want to come over here and do this one same thing we're going to add another file this time we're going to have that one insert media and now we just need to put the content in these two fields and those are going to be the text editor widget so we'll grab one of those for each one of those sections we can go ahead and style these we can set the color white we'll close that typography we'll put 18 as the font size and we'll do the same thing over here style color white clothes typography 18. now each one of these is also going to have a little header on it so we'll go ahead and pick a header and drag one of those on each side now we can style the headers so we'll go into style we'll set the color to white and do the other one the same way style set the color to white and we'll use the rest of the defaults and now we just need to change out this content for these two sections now the content is now updated we can hit update here go back to our website hit reload and now we have that section complete except look at this these are really close on this one and this one's not really close this is that column and we're just going to put 12 on here i did it on that one i forgot to do it on this one we'll do update come back over reload and now it fits there just fine and we're ready to fill in our photo gallery let's go back to our wordpress scroll to the bottom we're going to put a photo gallery right here a bunch of images so go to widgets scrolling down looking for image gallery drag that in now we want to add some images to it so we're going to click on add images we're going to go back to bethany's folder and then we're going to select all the images that we want to be in the gallery drag them over and let those load now those are loaded we can click create new gallery now we'll click insert gallery and we're just going to change our image size to 300 by 300 and that looks really nice and pretty but if you wanted spacing between them you can go to style spacing custom and then put however spacing you want now i can do update go back to our page hit reload and now our photo gallery is complete and are ready to solve the mystery of why the text is gray inside of elementor originally i thought wow you know the import's not working right can't really figure it out and i pointed out that bethany is a little frustrated she goes what are you talking about all you need to do is set your color defaults and i was like color defaults well that makes a lot of sense so basically we go back to our dashboard and when you scroll up here's this gray text well she had her default color set now if we come to this icon over here we can go into default colors choose text hit black hit apply and all sudden is exactly the way it's supposed to be so we'll go back to our page we'll hit refresh and everything's right now to get started on our gallery let's first look at bethany's gallery so we'll go back to her site we'll go to the top we'll click on gallery and you'll notice that the top is basically the same as our about us so we can recycle that and we're going to enter another image gallery just like we had in the last one but we're not going to put any spaces in between them so let's go back to our wordpress we need to go back to our dashboard choose pages scroll down to our gallery page choose that edit with elementor and we're ready to start creating this page now at the top of this page we want the about us header and i actually went to the trouble to go ahead and do that behind the scenes for us so it's in my templates now and there it is right there so we're going to insert that we'll click no and there it is it's already at the top of our page now we can just click on that text and instead of saying about us change it to gallery and now we want to add a new section so we're going to click on section we're going to put a gallery in there so let's go in and put our image gallery choose that drag the image gallery in there like so we'll click on that and we're ready to pick pictures for that so add images and from here we're going to choose the images that were from our original carousel but we don't need bethany's profile picture in there so that'll give us 24. we can say create gallery insert gallery now we're going to set the image size to medium large columns three now we're going to go back in for that section and set the style and we're going to set the background the bethany's green like so and then at the top over here we had a little text editor so we're going to add one of those text editor guys right here we're going to change out the text go back into style color white close typography 18 we'll hit center now we need to add the waves brush to the bottom so we'll choose this section and we'll scroll to the bottom we'll go to advanced let's go ahead and unlink that and choose 80 as our bottom now we'll go into style shape divider bottom type equals waves brush and the color is going to be bethany black and then we'll come down here and set this to 60 and we should be ready to go we can hit update go back to our website click on gallery and our gallery page is complete now ready to go onto the travel tips page and start that one with all the resources we've already created the travel tips page is going to be really straightforward so go to bethany's website and let's look at her travel tips page and notice it has the same header as the about us it has these accordion sections that we saved one of those and all we're basically doing is making a whole bunch of those and changing out the content and at the bottom it has a carousel just above the footer so since we've already done all these things i'm just going to go ahead and insert the travel tip page because i'm pretty sure you already figured out how that piece is going to work and we're ready to move forward to the contact us page let's visit bethany's contact us page and we'll see that again it has the same header at the top as we had for the about us there's a little section here where it's got two columns and down here it also has two columns we're going to be putting in a new form we already made the back end for that and we'll be adding a map so let's go ahead and get started so we'll head back to our wordpress and from here we need to go back to the dashboard we'll click on pages we'll click on contact us elementor and we're ready to get started on our contact us page from here we're going to click on the folder go to my templates and we're going to insert the about us header click no and then basically we just need to change this out to say contact us next we're going to add another section we'll make that two columns and we're going to do the same thing again and then for this first section we're going to set the color to bethany's green close that and then we'll come to this section we'll go into style for that one set the background to bethany's yellow we'll close that now inside the first section we're going to go into advanced we'll unhook that we'll put a top margin of 20 a bottom of 60. then we're going to go into style shape divider and we're going to put our wave at the bottom and we're going to choose the color of bethany's yellow close that that 60 and now we'll basically do the same thing to the bottom section so we'll go there advanced unlink set 20 bottom to 60. we'll go into style set the shape divider to bottom waves brush and the color for this will be the footer black so it's not all the way black we'll close that and we'll set the height of that to 60. and now all we need to do is put the content in those two sections so we're going to come back into the widgets and we're going to pick a header and put it in there like that we're going to go to style we're going to set the color to white close that typography we're going to pick robo slab and we'll set the size to 26 then we'll go back over to content and we'll put in the content for the first one which will be phone email and now we'll come over here we'll right click we'll make a duplicate drag it down there and we'll make another duplicate drag it over there and another duplicate drag it down there and now the content is updated we're ready to add a little icon list under each of these two so go back into our widgets and we'll choose this icon list we're going to put it there we'll go ahead and format this list now we're only going to need two of them here spacing between if you add something here it just spreads these apart a little bit under icon we're going to set the color of our icon to black close that and then we're going to set the size of our icon let's say to 18 make it a little bit bigger we'll go into text we're going to set the color of that to black and then we'll just use the rest of the defaults i'm going to right click and i'm going to duplicate this because we're going to use another one on the other side that's very similar and now we want to make adjustments to the content itself and to do that we'll select the widget and over here when you click on it it'll do a pull down you can set the text that's going to be over here to the right and then you can choose an icon so for example we want it to be phone so we can click down here and that will open up the second one and put the title for that one that shows up over here and then we can pick the icon we want it to be and now we're ready to work on the one on the right hand side so we'll choose that one first item heading for that will be that and then we're going to choose the icon and for the second one we don't need an icon so we're just going to click this x box to get rid of it all together and then for the list title item 2 we'll put the second part of the address now notice this is in inset here we really want it to line up over here but the problem is if you come here and you add spacing before this regular spaces won't do anything so we have to use a different trick to make it work and what we're going to do is we're going to come over here right click and we'll make a duplicate and then in the first one we're going to delete the second line and in the second one we're going to delete the first line and now in the second one we can come up to advanced and we can unlink this and let's say pick 23 and that'll line up and then we just have to adjust the spacing between these two and we can move that up using our little trick here so on the top let's try -15 that looks about right now we're ready to add our message box we'll go back to our widgets and at the very bottom is our void contact form seven we'll add that in right there and then we'll come up and choose our contact us form and we're ready to do some styling on that so we'll click on styling in our first box we're going to put color black and that changes the color of that text in our all input css box we're going to put this which is going to change this box to white and allow black text inside of it and then in the text area css we're going to put the same thing which will allow that box to be white and allow black text inside of it and everything else should be fine so for our final section we need to add a map so we're going to go back to our widgets choose google maps drag that over there like that and then over here we paste in whatever the address is i'm going to leave the zoom at the default and then we're going to set a height and this height is going to be based on how tall we need it to be to fill that window and once you get it exactly right you're ready to hit update we'll go back to the site hit contact us and now we have a fully functional contact us page that's ready to go so at this point our website is pretty much complete but if you look at bethany's website on the homepage there was some animation that we want to show you how to do as well we'll click on the home button and now when we scroll down notice how this content kind of scrolls in like that and then we come down and that swooshes in and that swooshes in we're going to look real quick at how we do that and then after that we're going to look at how to get this text to come in like that so let's go ahead and head back to our wordpress and we're going to add animation to our home page we need to go back to the dashboard go to pages scroll down choose home edit with elementor scroll down and we want to animate this first section content animation is one of those super complicated looking things it's super easy to do so for example to add animation to this section we're going to click on bethany we'll go to advanced and there's entrance animation from here we can do the pull down and we can say zoom in we can pick the header here advanced entrance animation let's do fade down we can choose the next header advanced animation fade from the left and then this piece of content here advanced animation we'll do zoom in again now this is complete for that section hit update get back to our website hit the home button and we scroll down and now that all animates now scroll down to the next section and we're going to apply animation to the columns it works the same way for the left column here i can choose that go to advanced i can say animate in from the left on the column in the middle i can go to advanced animation in from say the top i can choose the third one advanced animation from the right now we can click on update and go back to our site scroll down and watch as that animates in and we scroll down to the next section that animates in and i went ahead and applied the animation to the rest of the sections let's go back to bethany's site to look at the final animation effect we want to be able to accomplish so we're going to click on home page and notice how this text is flying in and it changes over time now this actually is a pro feature and there's lots of amazing pro features i just didn't cover those because i promise you could make this site when it'll cost to you and i'm going to show you how you can put this text in where it doesn't fly in for free but if you want to have this fancy flying thing it's going to be the pro feature it's not really expensive go.elementor.com front slash web yo to get you to the partnership and get you a discount and get you these amazing pro features but let's go back to our home page and add this to our site and from here we can scroll to the top and let's do the free version first if we click in here we can choose the header we can drag it in there you can put whatever text you want you can center it you can go in and style it we'll say we want it to be white and let's say we want it to be the permanent marker font and then we'll make this let's say 70. and then let's say you wanted to be a little bit transparent you can come back in there and so now you have a version of this that is free now if you want to animate this we got to do a different way so we're going to have to delete that one we're going to click on our widgets icon again and i've added the pro version down here so that we can have access to this animated headline i'm just going to drag that in right there but let's see what that animated headline looks like and i want you to just see a short piece about what you can do with just this look it's an underline thing going on here make this text come in like this make this text rotate like this make this text highlight like this so all of these things is just one particular pro feature in this particular one's one we're going to use let's edit our animated header so we'll click on it and choose it for style we're going to pick rotating for animation we'll choose drop in and we'll put some text in and each of these lines are going to rotate through over here now notice the before text that shows up here the after would show up after it if you don't give any at all then it's just going to rotate the text that's being animated now we can go to style and we can set typography and let's set this to 80. we'll come back out of that and then we're going to set it specifically for the animated we'll come in here we'll set it to white and we'll make it a little bit transparent we'll close that we'll come into typography down here we'll choose the font permanent marker and now we have this text rotating but notice it's shifted to the right now if we update that and we go back to our website and reload and scroll up you'll notice that it's not shifted to the right so it worked the way we wanted it to now let's go back to elementor now notice as these lines of text come in there's no delay in between each line of text if you want a delay you come back to content and just put an extra space between each of the lines of text so basically it's displaying empty text in every other space so we can hit update go back to our site hit reload and now we have that extra space in between and as a last section for this tutorial we're going to look at how to ensure that your website is both mobile and other device friendly first let's look at how to look at our website in different modes this little tab right here when you click that this basically shows what it looks like on a desktop computer now at the very bottom there's an option here and we can select tablet at this point we can see what it looks like on a tablet but notice the section of the top doesn't look as good as we might want it to look like as well as other sections below may also need adjustment now let's look at our website on a mobile device come back here now we click on mobile now at this point it looks like things may be working okay up here but when you close this out you're actually really seeing it in mobile mode now in this case the technology for doing video backgrounds is not supported on some mobile devices so in our case we just want to go ahead and remove that feature altogether so to do that let's go back to editing and now notice we're in editing for the mobile mode i can choose that particular tab right there and then under advanced at the very bottom let's close that there's a responsive area and under the responsive area i can tell it with this thing right here let's just turn that section off now when i close that now that section's gone all together and it actually looks pretty good however if we look down here this your ultimate vacation guide thing really isn't working well what if we just wanted to remove that so we can come back over to our tab now we can click on that and go back into advanced and then go back into the section at the bottom that's responsive and we can tell it to hide that particular item on mobile as well and now we can push that back out and now when we look at our website this is what it looks like on a mobile device and this is looking really good now from here if we scroll down we'll see that our website looks pretty good the front page on this particular format for the mobile device and i think what we're ready to do is to look at what this is going to look like on a tablet and make our adjustments there so to make tablet adjustments for our main page we'll click this little icon it comes back out and now at the bottom we're going to choose tablet and i'll go ahead and close that to get it out of the way and now what we want to do is we want to change this because that's really not working well so what if we were to change this to where it didn't have a video but instead it had a image so first thing we'll do is we'll come up to the top and we'll choose that section we'll go into advanced and then under responsive for tablet will also turn that off and so when we click here now that goes away now we want to add our new image at the top so let's go back to our edit mode for tablet and we'll click here to add a new section we want that section to be one column we'll stretch it we'll make it full width and now we'll go into style and we're going to set a background image and we'll click here and then we want to go to upload files and then we want to go to bethany's folder we want to drag that over now that's loaded and we can hit insert media and now we have the media here at the top let's go into advanced we'll unclick these let's set this to say 400 and now let's show you what it looks like and see now we have this image at the top but it really doesn't have the exact look we want it to have so go back to our edit mode we have the background here and we want to go back into style position center size cover now we can look at it again in tablet mode and that's looking really good at that point now one of the things you need to be careful about is when you make these adjustments they only show up on the pages you want to show up so for example if we go back and then we choose at the bottom to look at this in mobile mode and we go back out you'll see that that image shows up on the mobile mode which obviously wasn't what our intention was so we can go back into edit mode that sections already selected we can go to advanced and then under responsive we're just going to tell that to be turned off on both the desktop and the mobile and now when we go back to the mobile version and we close that out now it looks the way we want it to look now let's proceed back to the tablet mode for editing because i had another adjustment i wanted to make if you come down here you'll notice that the section right here that these things are really tight on each side what we want to do is adjust the padding only in the tablet mode to give those more space so we'll come back into edit mode and we'll choose that text we'll go to advanced and in here let's say i just put five go to here advanced five and here advanced five and that gives us a lot more room but now we need some padding at the bottom of this because clearly it's hitting a wave so let's go into that area advanced and now on here we had some space at the top but now for tablet mode we're going to put some space at the bottom let's put 60 and 60 looks about right now we can hit update go back to our website and hit reload and we notice that none of the changes that we made for the tablet in the mobile device version have affected what happens in our main site now that was just a small sample of the type minor adjustments you can make to ensure your site is mobile friendly and other device friendly but feel free to use those exact same techniques throughout your entire website to get everything looking perfect on every possible device [Music] so that about wraps it up you should now have all the tools and skills needed to build your own professional wordpress website i hope you've enjoyed the course i certainly have enjoyed being your instructor please remember to like share and subscribe to the video below to help me spread the word to as many aspiring web designers as possible again my name is yoda it's been a pleasure being your instructor today i look forward to hearing from you below but until then have a great day peace out you're still here it's over go home

Channel: WebYoda

Views: 418,662

Keywords: elementor pro, elementor, elementor tutorial, elementor pro 2021, elementor pro tutorial 2021, elementor wordpress, elementor Free, elementor pro tutorial, elementor tutorial 2021, wordpress elementor, elementor wordpress tutorial, wordpress elementor 2021, elementor templates tutorial, elementor wordpress tutorial 2021, how to use elementor, elementor free tutorial 2021, Wordpress Elementor Tutorial, elementor homepage, elementor page builder, wordpress tutorial elementor

Id: tm_FEaULxf8

Length: 164min 26sec (9866 seconds)

Published: Sat Nov 07 2020