Elementor WordPress Tutorial 2021 ~ A Complete Elementor Page Builder For WordPress Tutorial

Elementor For Beginners [Music] Elementor Made Easy Complete Elementor Tutorial Elementor Step By Step Guide Let's get started! hello I'm Yoda welcome to my remote office San Souci Resort Ocho Rios Jamaica in this Elementor 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 elementor website that will automatically adjust to meet the screen needs of any type of 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 elementor website your ultimate vacation 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 elementor plugin we're going to use is going to do all the complicated stuff all we have to do is tell it what to do enough to start with Bethany's gonna have a logo at the top left corner we're going to learn how to make this logo for free online well 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're learning how to insert pictures into your website we'll learn how to add text and change the size and the color well learn how to make these little wave dividers there's actually lots of different dividers to choose from this is just one we chose well 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 well 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're doing is providing the content the software we're going to use is going to do all the real work we 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 a content in nicely well 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 when we go to build this you'll see that there's plenty of options to make this exactly what you want it to be you have total control at that level 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 I'll show you how to make the two fields that are required and we'll also show you how to make the Cinnabon and go exactly to who you want it to go to at the very bottom we have a footer it has four separate sections you don't have to use all four sections but I didn't really 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 gonna 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 to Collin section that has some text to the left and image to the right and then under destinations you'll see that destinations is not clickable well 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 destination is Jamaica page which is definitely one of our favorite destinations 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 definitely one of my favorite places in the world to develop is right here at San Souci Resort Ocho Rios Jamaica we scroll down you'll notice these little progress bars we'll learn how to make these and have complete control over those it's basically a status bar we control the text and the percentage 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 well learn how to make these pictures go all the way to the edge like this we'll also learn how to put the text into boxes and how to control the spacing around them and we'll go back up to the top well learn how to make a gallery and one of the things this gallery has is called a light box and 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 that's what's really incredible about this product it really does all the work all we do is tell it what to do 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 and notice 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 will 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 to 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 but we try to encourage people to use the message touch 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 that 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 cost 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 twelve dollars a year I'm going to show you where I get these services from in a discount promotional 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'm in a web master instructor aka the web biota for over twenty 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 mean happy to assist you but in exchange please pay it forward like the video share the video subscribe to video tell your friends about the video is the best way for me to get the word out there to help so 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 well web biota did some research and they came across some very non biased results where PC Magazine conducted an Editors Choice Award for web hosting and shown here are the top six results from that Editors Choice Award in of the six Hostgator was the number one pick for PC Magazine Editors Choice Award and this was because their features were amazing the reliability and security was amazing and their 24/7 support was very proactive with all of this their pricing was as good or better than any of the other options out there so web yeutter decided to go with Hostgator and they use that for all their students and any websites that build and will also be using Hostgator for this course as well so at this point we're going to go to hostgator.com frontslash web Yoda and the reason for that link is that now web Yuda has a partnership with Hostgator thereby every time a hosting package is sold through that partnership a small portion of that goes to the web unit of foundation and the web you had a foundation in turn uses that money to build more free courses like this one as well as to provide free training for training centers and online students all over the world who may not be able to afford professional training so let's go ahead and go to the link hostgator.com front slash web Yoda and this will show the web hosting options that Hostgator has to offer now Hostgator has three levels of hosting their recommended hosting packages the hatchling plan in this plan is for a single domain so if you're doing a single website or if you're student taking this course then the hatchling plan is for you now no matter which plan you get they all come with 1-click installs now what this means is for example when we install WordPress there'll be an individual click inside of our control panel we click that once and it'll do all the work to install our WordPress next all three plans come with unmetered bandwidth and what this does for you is no matter how much traffic your website gets you're not going to be charged any extra and finally what to me is outstanding is they offer you a free SSL certificate well what is that why do I want one well it's the secure key it will key up here in the top left and as of earlier this year Google is basically favoring websites that are secure and also favoring websites that are mobile-friendly so we're going to build a website that's mobile-friendly using WordPress and thanks to Hostgator when I have a free secure key so Google's gonna like us even more now normally you could pay thirty five to a hundred dollars for a feature like this and Hostgator is basically given that to us for free and when your hosting options start at just two seventy eight a month it's just really hard to beat if you're going to have multiple web sites you need to go with the baby plan because that allows you unlimited domains basically unlimited web sites within your account and then if you're doing even larger things where you need a dedicated IP and you need a lot of SEO tools then the business plan is probably the package for you now the hatchling plan is going to work fine for us for this example Bethany only has one web site so let's go ahead and click the Buy Now button now we're ready to complete our web hosting application so we can activate our hosting and our first decision is do I need to register a new domain or do I already own a domain in most cases you don't own a domain so you need to enter a domain in this box unfortunately lots of domain names are already taken so it may take you a while to find a domain that'll work for your company then also is available for this example I'm going to make up one choose a domain name.com and then I'm going to click to the right of the dot-com button here and it says that domain name is not available so I'm going to pick a new domain name choose another domain name.com and then I'll click to the right again that one is available so we're ready to go and we don't need any other names because those are for somebody else's website not ours now if you scroll down the next thing you'll see is domain privacy protection so let's turn this off to see exactly what this is now for 1495 a year if somebody goes to look up your domain name the result they'll see will say that it's owned by Hostgator comm have their address their phone number and their email if you choose not to pay this fee then if somebody looks your domain name up is going to have your name your address phone number and email but this is likely on your website already just like it's going to be for Bethany so for us there's really no benefit in paying the 1495 so we're going to choose to avoid that fee now in Bethany's situation she already owns her domain so we're gonna scroll back up to the top and we're gonna choose I already owned this domain so we'll enter her domain in the box your ultimate vacation com then we'll click to the right and it shows it at it again a bunch of additional choices but we don't need any of those and notice when we scroll down that the privacy option is gone now because that's only applicable if you're purchasing your domain name through Hostgator now we're ready to set our details for our hosting plan we already chose the hatchling plan but in any time if you need to upgrade you can just contact them they'll just charge you the difference your next choice is your billing cycle and this goes all away from 36 months at their best price at 278 a month down to 548 a month for the first month now obviously the longer you commit to the better your price is but on top of that we're going to give you a promotional code web Yoda and that's going get you an additional 60% off of whatever your purchase is today now we need to choose a username in my case I'm just going to choose admin Yoda and a security pin of nine none now we need to enter our billing information and they give you an option between credit card and PayPal which is nice I'll be entering this information behind the scenes now we're going to look at their additional services and decide which one's work best for us the secure key is the first one it's free so we're definitely keeping that one the second one is protection for the website well they already offer great protection of their servers because they want to make sure that their servers aren't hacked by anyone next they're going to offer protection from you so that you don't accidentally mess up their servers so in my opinion if you pay for this you're paying for a service you really don't need next for five dollars a month they'll give you a professional email web Yoda has a video that shows you how to make an email forward for free on your Hostgator account and that helps you avoid this fee next there's a backup option for 2395 a year we're going to opt against this for two reasons one Hostgator does monthly backups on an automated basis for us and two web Yoda has a video on how to backup your WordPress website and thereby avoiding the annual fee the last option under there additional services is an SEO package and I really don't want to tie an SEO package to my web hosting package at this time maybe once the web site is complete I can address that the next box is the coupon code box in this box you'll want to put web Yoda this is going to get you 60% off your entire purchase today if you found an option out there better than that please let us know because our partnership with them pretty much guarantees that no one's gonna have better than 60% off you do the math over here you'll see it's basically 60% off now we don't have the domain name in here because Bethany already owned her domain so your price may be a little higher than this also if you choose a longer term your price will go up from here and you'll still get the 60% off your total purchase but in our case this 583 is really an outstanding price for what we're getting today at this point we can scroll down and we're ready to checkout you'll notice that the checkout Now button is disabled that is because we need to agree to their terms of service and cancellation policy before we can proceed so if we just click the box over here to the left then we're ready to checkout and now we're ready to click the checkout Now button to complete our purchase at this point our purchase is complete we're waiting for Hostgator to finish setting up our account once complete it'll refresh to the next page and our order is complete and we're ready to proceed our next step is to login to our control panel for our new hosting account that we just purchased and to do that we first need to go to our email and there's mine now so we want to click into your email and you'll be looking for an email from Hostgator that has your account information in it it's going to have the domain name that's associated with your hosting account it'll have the username that you chose it's gonna have a password they created for you so your need to highlight that and copy the clipboard because nobody could possibly remember that password it also includes the link to your control panel for your hosting account and you're going to need to make a copy of this link or make a bookmark to it or something because you're going to be going back to that periodically alternatively you could also refer to this email they sent you so now we're going to click on our link to our control panel this will create a new tab at the top and it says cPanel login you want to click on that tab and that brings up the box to login to your control panel and then you want to enter your user name in this case admin yota and then you're going to paste in that crazy password you just copied from the email next you're going to click the login button and now you've successfully logged into your cPanel your control panel for your web hosting account now we're ready to install WordPress in the section at the top called popular links you want to look for build a new WordPress site first we need to select our domain name for installation simply click the pulldown and click on your domain name now since we use this account for more than one thing there's lots of things in our box so in our case we're going to pick Bethany's new site your ultimate vacation com as for a directory name you don't need to choose one we're simply going to click the next button now we're going to enter the blog title which is basically the website name so for Bethany's site we're going to put your ultimate vacation from our WordPress admin user I'm going to use Yoda user and for the first name and last name I'll just choose Yoda Yoda then for the admin email I'm going to use Yoda at web Yoda com we want WordPress to automatically create our database for us we'll leave this checked then we need to agree to their terms of service so we'll click that and now we're ready to install so we'll click on install you can see at the top that it's spinning away then it says installation complete even though our installation is a hundred percent complete if you look to the right the overall website progress is only sixty percent now if you scroll down you'll see why that is they basically want to up charge you for different features well we don't need to pay for any extra features because I'm going to show you how to do the rest of the install for free under the installation details you can see that our WordPress has been installed to your ultimate vacation com or our username is the one that we selected in this case go to user and then they've also generated a really fancy password for us so we're going to copy that password to our clipboard and next we're going to click the login button now we're at the login area for our WordPress admin in the first box you want to type in your username in my case yo to user and then we're going to paste that crazy pass where they gave us into the password box then we're going to click on login now when you see the WordPress admin come up for the first time it can be very intimidating you're like oh my god what have I got myself into this looks really complicated how am I going to build that website we looked at earlier using this stuff but fear not we're not going to be using any of this craziness we're in a very simple way for you to do this if you have any troubles at all you'll just leave questions under the video I'll answer and help you get you moving again you can get through this trust me 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 on a 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 we want to open up a new tab over here to put Bethenny'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 and we're ready to proceed at this point our WordPress application is officially installed but as the next step I like to go ahead and show you how to change that crazy password they gave you to something that's more manageable what you're looking at is the dashboard for your WordPress admin on the left hand side about three-quarters the way down it's an option called users this is where you can update add and delete users to your system let's go ahead and click on users now I notice that our mouse is a little difficult to see so I figured I'd turn on highlighting and make it easier for you to follow now that's a little bit better now let's go ahead and click on the username and this brings up the profile for the user and as we scroll down the profile there's a section near the bottom called new password generate password when you click on generate password it's yet another fancy password that craziness nobody's gonna want to be able to remember and so we're gonna delete that and then we'll click on hide so people don't see us typing our new password and as we start typing you'll notice it'll say very weak and maybe you'll say weak and then you had to type confirm use or click on confirm use weak password you really won't want to do that you want to pick something that's got strong and then that'll give this and that little message goes away that way you have a really fancy password but yet it's still something you can remember so it's the best of both worlds at this point we just go ahead and click on update profile and up here it shows profile updated so now we now have a new password at this point I want to take care of a couple of frequently asked questions the first of those is how do you log into your WordPress how do you come back to it log into it and the answer is in your URL basically it's your domain name slash wp-admin and that'll take you back to the login box for your WordPress so if I hit enter on that I would normally get a login box since I'm already logged in it just takes me to my dashboard but typically you type in your domain name front slash WP admin and that's how you get to the login box now the next frequently asked question I get a lot 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 and that there's a section called timestamps 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 stands for for a different web you had a 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 web site 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 on our browser and then we're going to go to web yet accom front slash themes and this brings up the themes page on the web Jetta website and now we're just going to scroll down to the project or working on in this case your ultimate vacation comm and the theme for this website is ocean WP theme then we're going to click on that and it will download it to our downloads folder and each time I do it download like that mount 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 ocean WP dot 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 inside a plug-in so it'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 pulldown you can choose deactivate and just below that is a box you can click called plug-in 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 plug-in button to select them all again and then we click apply okay 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 for our local computer then we can upload them into our WordPress environment to do that we're going to make a new tab on our browser we're going to get a web.com front slash plugins now in this page scroll down to the project we're going to be doing in this case your ultimate vacation comm and one by one we're going to click on each of the plugins that download them to our computer first plug-in we're going to download is Elementor and this is the page building plug-in that's going to allow us to build our amazing website today every time I download a plug-in 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 plug-in is contact form seven a contact form seven is the most popular contact form plug-in 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 element or environment the fourth is ocean WP extra and these are extra plugins that work well with the theme that we installed and the final one is the duplicate page plug-in 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 yet we'll start with the one at the top duplicate page we'll click on open install now and once its installed you need to activate plug-in once that's complete we'll click on add new again plug-in use a file ocean WP install now activate plug-in and three more to go click on add new upload plug-in choose file pick our third one install now activate plug-in add new upload plug-in choose file pick our fourth one open install now activate plug-in and we have one more the biggie Elementor you're gonna love it add new upload plug-in boosts file Elementor open install now and activate plug-in and we are officially 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 that says plugins - 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 is 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 it will click on update now and at the top of the WordPress updates page was an important notice to back up 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 now we already have a video for backing up your database and files called how to backup your WordPress and it's using a product called backup buddy and use that video to see how to do automated and manual backup so that you can go ahead and do that before you would proceed 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 updates complete and it usually doesn't take too long but it could take a little bit longer it just depends on circumstances then from here we can just click on dashboard to get back where we were at before we started the update now one of the things you'll quickly notice when you're working on your website is that the dashboard will change for example what you're seeing right now in the dashboard is what it looked like before we installed our plugins and it's just information about what's going on currently with WordPress and a lot of times it's advertisement for things that you have installed or advertising for things they might want you to install now once we installed our theme in our plugins you'll notice that this is what the dashboard looked like and it has information about our new theme and it has information about our mentor and things that are going on these little windows are movable so they might be useful for you and give you information about what's going on and things like that but many times things will come up like this little piece at the top is just an advertisement they recommending something but we're not going to be using that so we can close those little advertisements out like that 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 I can choose those bulk actions they've to trash apply and now we have no pages now to add our first page we're gonna click on add new and from here we don't need this little box it's only helpful we're gonna 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 in the defaults for all the new empty pages will already be set the 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 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 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 element or 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 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 Bethenny's site and we have our home we need 1 2 3 4 5 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 and now we have two copies three copies or copies and now five copies so at this point we just need to rename each of these to be the individual pages that are going to be so if we hover over the name we can choose quick at it 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 in a 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 and we're going to give it a title of travel tips a slug name of travel tips with the 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 but 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 lowercase role so we can see the word update and now 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 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 edit the pages of our website requires us to access the element or 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 it 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 and 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 element or next to it that means it's in the element or mode that also means when we go to edit 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 destination is 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 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 a 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 inset 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 then we hit reload you notice now we have a menu and each of these items is clickable and they take us through those default pages that we've made so notice that destinations is not clickable but the pulldown 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 not totally white that makes a little easier to read to make that effect we're going to go back to our WordPress admin and under appearance this time we're gonna choose customize and within customize we're gonna 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 gonna 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's in our website as are the default colors that she used all the logo colors and things like that so for her the menu he 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 let me come back over here I pick black notice it's all zeros or if I pick white it's all F's well all says why all zeroes is black and anything in between makes the number go up and down now for her she picked a color it 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 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 gonna 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 know if I pick white it's really really bright but if I pick the one that she chose it's a little less than why 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 this 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 Bethenny's menu this menu is to the left over here if we scroll to the top here's our option position left center right well she's left and what she's published 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 let's open up a new tab in our browser clearly there were lots of options for creating free logos out on the internet but we found that design Evo comm by far was one of the best choices out there to give you a high quality professional product as well at the same time being free they also reached out to us originally because they were interested in a partnership with web yet found a shinto provide some of the proceeds to create more free training for those who couldn't afford it so to get to their website we're going to do design Evo comm and then you can do front slash web Yoda and that takes you into the partnership link directly to the free logo section so you can see here we are ready to go we can start our new logo in the logo is a hundred percent free no cost to us at all now if it turns out you need a high-res version of your logo the link that you just went through is going to get you discounted rates and on top of that if you use the promotional code web Yoda 30 off it'll get you an additional 30 percent off if you decide to do that but you're not required to purchase anything and I'll show you how you can download and use this particular logo for free let's go ahead and click on make a logo to start our free logo and on the left you'll see a bunch of different categories if you want particular interest for example business and finance it'll bring up examples that may work for your business you're in the food and drink industry it'll have ones that are relative to that basically any industry you can think of now in Bethenny's case she was interested in travel so we can click on travel and then let's scroll down and see if we can find the logo that she settled on nice thing is as these logos you can change the colors out as well you're not restricted to that let's see where is she there it is so there's the one she use we're gonna go ahead and click on that and they're gonna ask you hey you know that's thatin the other you want a name of it and a slogan we're just going to skip that and go straight to making our logo however we want to make it and how the logo has been added to our environment and it's ready to be edited now for Bethenny's website there were more than one type of logo she needed he's gonna need this logo that has your ultimate vacation com built into it she's going to need a favicon icon the one that shows up on your browser tab and then on the interior pages if you go to about us he needed a third logo which is this one right here what turns out this logo and this leg are the same thing but basically we're going to have the logo by itself and then we're going to have one with this text next to it so let's go back to the editor and get started on that at first we'll build a logo that won't have any text to do that we're gonna highlight the text that they gave us by default hit delete highlight the text and hit delete now the free logo can only be 500 by 500 max so we're going to use that size and we'll take this to the edge and then we'll stretch this out and since I need this to have a transparent background on the about Us page what I want to do is come over here to background and I'm gonna change the background to a color that is a white white color that Bethany has in her website and that way it's gonna be easier to replace that as a transparent color now we're gonna change the colors in this logo to match the ones that Bethany used in her website so we'll click on the logo and it shows the colors that are in the logo in this case the yellow ones here we'll change that first so we're going to click on that and then click add and then we're going to change this to be the color that of yellow she used which won't be too much different but a little bit and then this blue was a green in her logo so we're gonna click that and add our green and finally this teal color is a little bit different as well so we'll go ahead and add her color in there and now we have all the colors of her logo in there Bethany's logo is ready to download and so we'll go up here and click the download and notice they're too fancy purchase methods and then right here is the link to get the free version they want you to share on social media if you don't mind to have the opportunity to use the free version and we're going to click download and agree now this comes up in my downloads folder in it's inside of a zip file and then I can click inside that folder and what I'm going to do is just pick one of these I'll right-click on the ping file the PNG when I copy that I'm gonna get back to my download folder then I'm going to paste it now I can delete the one that I downloaded that folder and I'm going to rename this one to be logo dot free free version doesn't come as a transparent version and we need it to be a transparent version but we need to go back to our browser and we're gonna open a new tab and we're going to do a search for Luna pic and then under Luna pic one of the choices is transparent we're going to choose a file from our computer then our download folder and we'll do logo free click on open and there's our logo and now if we click on the color we want to be transparent it will choose that and then we click on apply and it's applied now on the Left we can click on save and then it has a choice the default is to save as ping and that is being downloaded right there and if we go back to our download folder there it is I'm going to go ahead and rename this file and I'm going to rename it logo - brands so I know that that's the transparent version of our file so now we have our logo it's transparent and it's free now since this logo is going to be used to sit on top of a video I have a little bit of a concern of whether or not the resolution is going to be good enough to look correct with the motion behind it so if I take this logo and I drag it to my browser and a new tab like this you can see that it's a little grainy on the edges and that's the best it's gonna get when we've got a size that's so small now if we look at Bethany's website you'll see that it's super smooth around these edges and the reason hers is super smooth is because we made the commitment went ahead it bought it doesn't mean you have to buy anything but for our particular needs it just made sense to go ahead and buy this it wasn't really that expensive I'll show you how we did that but the free version certainly works as well to purchase the high-res version we go back to our logo maker and then we click on the download and just look at the options and let's just choose it I'm not saying you have to do this but we choose it you come down to the box have a coupon web get a 30 off redeem and now you're at less than $20 to get a high-res version your logo so it's your choice but now I'm going to show you what the difference looks like so let's say the purchase goes through and then now it's going to take you back to your screen where your logo is that and now because we're going to have a purchase version it can be larger than that and we're going to make it larger in the high-res it's going to give a ski bigger than that so let's put 1,000 and one thousand apply now we can take our logo and stretch it out really nice and big now we're ready to download the high-res version so we just click on download and it automatically starts downloading the high-res version of that now it's successful and it shows it in our downloads folder we'll go into the folder use high res and then I'm going to right click on logo transparency and we'll copy that get back to my downloads and then I'll paste it in here and so now I have the transparent version now I'm going to drag that to my browser over here just so we can compare the difference now we're ready to compare our two versions so if we come up to our browser and click on the logo you'll notice it's a little bit bigger and it's a little bit smoother so you say well that's really not that much of a difference I'm not sure what I paid for now over here this is as large as it gets over here if I click on and it'll show us how big it really is and I'm telling you I was shocked to see the resolution when I'm look at this I'm like I cannot believe how nice a quality this is and it was for less than $20 so for me we got our money's worth and we inserted in her site and it looks just absolutely wonderful on there so I don't think we made a mistake but once again it is possible to use the free version and in most situations maybe it'll be just fine for you as well go ahead and clean some of these tabs up so we can make the second logo that we need I don't need I don't need that only that and so now we're back to where we're at now at this point if we click Save it'll make a copy of that in our folder so that we have it permanently so if you come over here you can go into my logos and you'll see it shows up in there and there's a free one that I had looked at earlier and then I just saved it just because and here's the one that we have the basic agreement on now one of the wonderful things that I found out is that if you add it the one that's here you can download the new version so basically you can put whatever you want in here you can make unlimited logos inside of here as long as you didn't mind replacing the old one with a new one we're going to click on edit so we can go ahead and make the secondary version of this now let's go ahead and review the second logo to remind us of what we're doing but basically we're going to be building this logo now so we're gonna have the same logo here but this is gonna be going across this way so go back into our logo maker so the second logo is going to be a thousand across but it doesn't need to be nearly as tall so the first thing I'm going to do is shrink my logo down to say this big but at the middle of the screen and then I'm going to change the dimensions to 1,000 by say 200 and then I can bring our logo over here to the left into the top and then I'll stretch it out to fit perfectly just like that now the second logo is going to have the same background color as the menu bar so I'm gonna come over here to background and then we're going to go in and add a color and then we're going to add the color which is the background that we used in the menu bar for the website now we're ready to add the text to our new logo I'm going to click on text and the first text she used has a type that's modern sans and inside of that it's going to be this Julius sans one so we'll go ahead and click on that and then it's gonna be the word you're can't see anything yet so let's change the color the color is gonna be the yellow that we use on the website so now we can see it let's make it bigger and now let's kind of drag it over here somewhere and it might necessarily be the perfect spot yet but we're going to go ahead and keep working with it now since I know the dot-com in the corner is gonna be very similar to this same font in everything I can select the your and come over here and choose this icon and make a duplicate of it and then I can just drag that over here then I can click on the text change the text to be calm again we adjust sizes and things like that later now we're ready to do the word ultimate here now if we accidentally leave something highlighted and then we picked a new font say this it actually changes the font or the one that's selected and we didn't want to do that they have these undo and redo buttons that are really helpful so that undoes it redoes it that undoes it again so now we want to put new text here and to do that the next font that she wanted to use is also a modern font and it's called quick sin but we'll click on that makes a box here this particular one is going to be green and then inside the box we can type our new text ultimate and now let's give this a bigger size let's say 93 and now we'll move this somewhere up here let's say like that and now we're an age to do our next word now the last word we're going to put in is vacation that's going to be this Roboto condensed and it's going to be let's say size 100 and we'll change the color to the blue that's in the website and now we'll click on this text to go ahead and change it say vacation and now let's kind of drag it up into place so now we got all the content we just need to adjust everything to get it to fit just right now let's make some final adjustments to the positioning of the text let's move that basically there let's make this guy a little bit smaller move over here to the corner a little bit bring this guy down here just next to that like so bring ultimate down here so it lines up let's say like so and then for this text Bethany use this little magic one thing as you turned on this glow and you can barely see it but just add a little bit of effect it makes the letters pop out a little bit and then she clicked on vacation and she also added glow and basically we're done with the new logo the second one is complete now we're ready to download the second logo and remember since I purchased the slot that the logo lives in and I've updated the logo that's in that slot when I go to download I'm going to be downloading the new logo as a high-resolution as well so it's basically two for the price of one at this point so now I can click on download and just as before it'll bring it up in a download folder for me I'm gonna click on the logo folder click on the high res folder now I don't need it to be transparent because in this particular situation it's going to be in the menu so I'm going to right click on the ping version copy that to the clipboard go back to downloads I'm going to paste it and then I'm going to rename this one logo menu and hit enter now I'm going to drag that one over to my browser and I'll look at it in the browser and look how great it looks and then I'm gonna click on it and see it is really really nice but again now that I got to located for the price of one I'm pretty happy with myself at this point now let's go ahead and clean our browser up a little bit so we can proceed to start using our new logo so we'll close this now here I'm going to close that window and I'm actually gonna click Save because this was tougher to make and so that's the version it's saved inside of there I'll close this I'll close this I'll close this now go back to the wordpress dashboard by clicking the X at the top left 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 I currently don't have a logo in here so what do these select files we're gonna choose our logo - menu it open it select and we're just gonna skip cropping because we want to use the full thing and it's gonna fill in right here in whoa it's really big so we're going to make some updates to that go 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 gonna make it just a tiny bit bigger on both of these so that your and the.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 then 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 side 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 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 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 pace that isn't going to exist in our site the set our home page we're going back to our WordPress admin and again for the sake of being thorough where I'll start at the dashboard under appearance we're gonna 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 gonna go back to our WordPress go back to the dashboard and from the dashboard we're gonna 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 it's 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 it save changes now if we come back to our website and we reload about us page just comes with the word about he said 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 get back to our WordPress admin and under appearance from the dashboard we're going to go to customize then we're 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 wait 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 I we have our video pushing right against here do that we're going to get 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 make too much sense for it to be right here so once again we'll get 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 Webb Yoda Inc now we'll publish and now I'll notice it has this little ocean WP 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 Webb you had ink so our empty page is totally complete and we're ready to add real content to our website and of course we're gonna start with building our home page to do this we're going to go back to our wordpress admin get back to the dashboard and now we're gonna go into pages and pick the page we want to work on in this case home I'll notice again it doesn't say element or next to it because we haven't used home page with element or yet we click on home so the first time through the Edit with element or button is here we'll click on that and it brings up our new page inside element or 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 gonna learn the overview as we go along and the reason is is only about 20% of element are you ever gonna 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 element or 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 an order it's gonna make it a lot easier to build your website now Bethany also provided a folder that had all of the different files she's going to need so here's the files for the destinations there's gonna be a gallery here's some additional images from testimonials videos and audio different related stuff so again being organized and having your content available certainly some of it in advance is going to make it much easier for you to build your website I suppose you don't have good access to images and videos for your website what are your options below this video you'll find two sections one with royalty-free images meaning you can use them and not have to pay a fee and royalty-free video clips where you don't have to pay a fee for example if we click on this link it takes us to a website called unsplash and from here if I do a search for say cloud light rays there's the image we used at the very beginning of the video and then at that point we just click the download it goes to our download folder and it's ready for us to use now this site has lots of amazing pictures to use hundreds and hundreds and hundreds on the off-chance you don't have access to your own royalty-free images and videos 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 a choice how many columns we want now we can add columns as often as you 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 in that this really big area and it's gonna 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 is 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 that 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 gonna 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 gonna be able to paste that into our website and make it a background and this little add it's not going to show up in there let's go ahead and get back to our website and now to do the background so we 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 gonna select files and then we're going to go actually it's an easier way to do this let's use Bethany's folder we're going to go to images and then we're going to just drag this over here now our 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 to colors to gradiate between so let's pick a second color pick this green and so it Grady eights 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 yet you can also choose the type of gradient so if it's linear that's basically left or 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 in the here where it says video link we just paste that video link that we had in there and it'll just show up in the box for us and that's just really spectacular so we got have know where we went from having a website that didn't have any content in it they're 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 get back to our website and click on the home page and now we have this spectacular background for our homepage now in Bethany situation she created her own video so if we go to YouTube in another browser tab then when you do a search on your ultimate vacation he'll come up as one of the pop listings and here's the video coverage 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 and we appreciate that we'll also put these video credits at the bottom of the video you're watching now though for us to use this video we simply copy that URL to the clipboard we go back to our website 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 her 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 swish things we're gonna add the swoosh things and later once we built them at the majority of this page and so now to make the edit to this we can go ahead and go back to our website then 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 but we'll choose that and now we have these two little boxes we're going to want to 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 gonna 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 well worried 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 pictures 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 then 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 and 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 that widget to show back up you can click this little icon right here and I'll show you 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 bethenny 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 get to an image and we're gonna 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 our website at this point we're ready to format the rest of this text and make it look correct let's take a quick field trip back to Bethany site and notice that she has some large text here that's white medium text here it'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 him you can actually set defaults and so that's what we're gonna do next we're gonna 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 well a primary headline is the large white text Bethan to use the secondary headline is the medium texture 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 alotta and then the weight we're gonna leave as the default is 600 basically the weight is how bold something is and when you look inside of their default you got bold and then you've got a gradiated scale and six I think 400 is basically regular bold there's 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 they'll go ahead and choose open sans and we'll also use the default weight for that now 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 ladder look like well I can go and type it in and then I can see well that's what ladder 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 they cut the information that applies to that whole area if you edit in either of 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 it'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 gonna 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 capitalized 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 just say whether it's going to be underlined over line line through or none what's using default and at the bottom you can choose a line height which is how much space is between the lines and you can space how much or choose how much spaces 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 well 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 then choose black and then as we scroll up or down you notice that the letters over here and we're getting a line around I'm 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 gonna go to style and we want to use black for this one so we'll choose black well exit out of that and then in a typography it turned out that she had decided even though her secondary headlines she wanted to be roberto slab that in this particular use she 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 gonna go to style this text is supposed to be white so we'll choose white place that out and now we'll go to typography and default is the font for the size let's put 18 now we close out of that and we'll rage and 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 with 50% and clearly she's made her is less than 50% so we'll go back to our WordPress and then we'll click on the column itself and now we can make a change and set a 50 let's try 30 that looks a little bit more like what she had we'll click on update I'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 gonna 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 I'm going to go back to Bethany's website and notice the dividers that 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 in the bottom in the left and the right well if I don't want it that way I can click on this little guy here that 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 it allowed me to add the spacing at the top and the bottom just the way we want it 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 an 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 is 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 in 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 Bethenny's website to review the next section which are the three call-to-action areas and those 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 in this section it's 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 that 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 gonna 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 buttons 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 I've only 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 and for the description I mean free to 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 to 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 as normal and has hover and basically when you hover over its when it happens so we're going to click on hover and then their hover animation we scroll down and it says bounce in and now I knew our mouse over it bounces like the other one now I don't want these words to spread out in this section as they are but 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 Bethenny's green in there and close that out now we're ready to update we can go back to our website and see what it looks like they'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 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 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 get back 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 site it's that teal color then we're to come back over to our WordPress we're going to select this section as it's going to go at the bottom of this section then we're gonna go to a style and unjust inside of shape divider we're gonna choose the bottom one and then we're going to come inside of here and choose waves brush we're gonna set our color to that teal lays it out and we're gonna set the height to 60 and now we notice that there's some 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 going 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 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 Bethenny'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 do want to head back to our WordPress and we'll add a new section at the bottom gonna be one column and now in that column we want to first put a header you'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 five travel tips and the first item in our accordion if we click on the cordilla and it comes up over here first item in there we're gonna put the name here it's going to be make a list and then make scroll down here and this is where the content is going to go we'll need to leet 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 you 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 fourth of five the title there but our content there plays that one down and add our last one like that and so now this is where the title guy but this one will be sunscreen and the content sunscreens 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 Bethenny'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 gonna make it disappear for the moment so we'll pick white close that out and now we'll go into the background or where I'll set the background to that teal that we'll 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 gonna set the color and set it to that teal and all the 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 it bigger so let's say 30 and then close that out and then for the content itself typography and we're gonna set that content to say 18 and then we need to set the color for that to black and that might do it that looks kind of big though so let's change that out go back into title and typography write 20 and 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 our set 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 say this is 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 - and we're going to call this travel tips and now we have that particular travel tip 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 and when we get there I will show you how to do that so I'll 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 am right center just where we want it so now all I have to do is make the updates to this button now 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 it reload the our new accordion in action everything's working now the one thing is this is a little close to the top so sure we should add some space at the top and the bottom and we're gonna 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 hole say fit 20 right 30 and for the bottom 30 that should do it I'll do update back to our site it 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 her is 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 our so we're going to come back over here and then we're going to choose the accordion and then we're gonna go into style and then the border with nothing matters you put zero 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 then 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 resaved 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're on scroll to the bottom create a new section one column and on the right we're going to make this full stretch full width width columns having no gaps 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 that we can click on images here and we're going to upload images then we're going to go to Bethenny'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 the 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 gonna 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 it will close that out and then we're all set the height to 60 and it's not showing up but the reason is is we need to turn on this bring 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 or white and close that we're gonna 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 happen 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 two 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 and this will be carousel save it and now we have these two that we'll be able to recycle and use later 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 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 no pick another widget and then we're going to 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 is 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 gonna even gonna begin to try to pronounce that and we're gonna use a weight of 300 close that out go back to content I'll Center it now we need another widget we're gonna scroll down we want an image box drag it in there and notice that our images 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 I'll 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 holy load and that's the item we're gonna 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 but 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 and 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 Bethenny's so now we'll go over to our style tab and this determines the space between here and here well 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 or these two things for example the title we want that to be black that will 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 blows 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 only weird thing is there's a little tick mark in there so let's go ahead and change that get rid of that now we have one testimonial that's completed now to build the second one we'll 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 then we're going to right click there save as a template name our template your ultimate vacation testimonials its save and now we have three templates to use later on we'll close that we'll hit update get back to our site hit reload and the testimonial is 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 the next section we'll get a Bethenny's website and we're going to build this parallax section down here at the bottom or this image slides like that really nicely and then we're gonna put a joint email list in that so let's go ahead and go back to our WordPress and we're gonna go to the bottom and we're going to create a new section one column and then under advance for that column we're going to unlink those we're going to go to 130 at the top 130 for the bottom that spreads that out now I want to get his 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 roll down a little bit it's that 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'll set the width of our inner widget to say 500 they're 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 twelve and now we'll go ahead and add our separators for this so we'll come into that section we've got a style roll down and for our dividers we're going to do the top one it's going to be white that will pick our waves brush we'll pick a color it's already white so I'm gonna do that and we'll set a height 16 and then we'll choose bottom waves brush will set the color on this one to Bethenny's black and we'll close out of that and we'll set our height to sixty and we have that piece completed we'll click on update we'll go back to our website it reload and we have that working now we need to put in our join email list form in here 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 seven it's going to allow us to build the mechanics that are gonna 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 forum there we're gonna click on that forum and we're actually going to make our contact us form and then we're gonna 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 work for us 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 want it to have the telephone number in here I can go in here and add a 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 want to paste it there now if I take the telephone tag 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 asterik tells it to be required field so if we want the telephone field to be required which we do in this case we've put an Asterix there and now that will be required now for the label will just simply rename it to your phone you can make it whatever you want you notice that it says required here but that's just text we actually had to put a little bitty Asterix here to make it required we're just saying tell the person that's going to use the form that this is gonna be a required field now obviously this is just one example we added phone but you get at any of these other things with a text area dropdowns checkboxes radio buttons and it'll do all the Mechanics for you just be instructing on what you want it to do at this point one hit save in 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 setup for your WordPress environment but we want in this case to go to comments at your ultimate vacation 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 and that keeps a server happy who it's really coming from is under these additional headings that they already put there for you where it says your - 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 but we can come up here and we can highlight this is our field for our telephone and then inside of our form at 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 but email get rid of the less-than and greater-than now we'll just be receiving their name and email scroll back up its save and now both of our forms are joining 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 cuz 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 foreman right there at our forum we're going to go down and we're going to pick a very bottom one which is going to be this void contact form seven 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 joint our email and now we want to change some of the styling settings so let's go ahead and styling I'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 gonna 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 now 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 Bethany's yellow now at the end of that you'll notice we put a semicolon every time you do CSS or semicolon at the end 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 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 that 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 it's inside of here then we're gonna go to style I'm gonna 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 will 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 we'll say white and that should do it so we can now hit update and get back to our website and hit reload and now our site has a fully functional joint email form so we're ready to do the next section which is going to be the footer let's head back over to Bethenny's website and we're going to look at the footer we're gonna have a picture of her as our guide we're gonna 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 the end of the footer we need to exit back to the dashboard so we're going to 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 but our two for the three footer for and those relate to one two three four now for footer one we're gonna 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 well pick a picture and we'll use the one we already have for her right here add two 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 four foot or two we're going to use the social icon so we'll scroll up and find that widget choose footer to add widget and then we're going to use all the defaults but we're going to 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 it 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 3 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 per 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 in fact 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 us box as opposed to doing a website but for a title we're gonna put message us and for the URL we're gonna make it go to our contact us form and for our URL text we're gonna put message us now we won't have any Skype so we'll turn that off we can it save come back to our website hit reload and there's our third section ready to go so for our final section we'll get 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 for 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 gonna go to appearance customize and we're gonna scroll down and go into footer widgets roll to the bottom of that and where it says background color will change this to Bethenny's black will hit publish go Mike over here it 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 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 element or to get started now notice now our new blank page has our footer on it as well all of our pages but we'll go back to Bethany's website and we want to see what her about us looks like just going to have a little movie at the top special version of the logo we're gonna 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 and we're going to go to youtube so it will 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 though 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 you want to pause it for example I paused 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 then 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 at any 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 well unlink that at the top we'll put 30 and at the bottom up at 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 Bethenny's green said our height 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 then we'll close out of that and let's get a little shadow that would just go in and give it a black as a color and ramp that up and you see a little shadow behind it now we'll go over to the content tab well 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 it now for this particular column we're going to add a background to it but we'll come in here use that and we're going to use our logo that we used earlier well 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 gonna 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 and we can go back to our website and hit reload and our hitter 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 columns on 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 they'll be this one I'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 it with the right content use a style tab go into here color white close that let's make the font a little bit bigger and we can scroll down and that section is complete we can hit update go back to our page it 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 element or 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 always choose no on this and it inserts our carousel and I'll 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 just change those out so we're in the section and we'll go in here date divider change the top color to that will go into bottom and we'll change the bottom color to match the footer color which is the Bethany black and the next out of that we can hit update we can get back to our website and hit reload and the about Us page is done just like that now we're ready to get 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 destinations you make a page the first thing we'll do is make a column one column in that section we're going to stretch it whole with and now let's set the background and we're going to show you to use an image so we'll pick classic and we're gonna need to load an image from here so we need to get a Bethenny's folder so we'll go to backup 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 sighs two 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 the donation so we'll put that in there and then we'll go to style we'll set the color to white we'll go into typography I'll set this to say 23 she wanted to use a different font for this we're going to use this viga font 200 for the weight place that we're going to go into the shadow we're going to do five and two two this will kind of offset the shadow to the bottom right now we'll go into the next text will 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 keep typography this time we'll do 33 font the vigoss again and then we can close that out and we're do the shadow the exact same way five two to close that out for the last one it's gonna say Jamaica get a style and this one we're going to set the color to Bethany's screen I'll close that typography we're gonna pick another font that Bethany likes squatter one I'll make this really big 3:30 well is that get 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 exact same way five two two what is that and now for the blend mode on this we're gonna do luminosity it's fun to play with the different ones see the kind of effects now notice this hangs down a little bit as far as the word Jamaica we're gonna move it up some but it's still gonna look funny in here but only 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 gonna unlink the padding and for the left-hand side let's set that to 20 that moved it in a little bit and now we want to edit the position between here and here this is a neat trick but we're going to choose the Jamaica text we're going to go in in advance and now we're going to use margin this time we're going to unlink those and one of the neat things you can do with margin is you can also get margins and negative numbers so this top margin up here I'm gonna 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 and that'll move everything down just a tad so we'll click on destination advanced will unlink this and for the top on this will 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 space get a little bit of that space out of there and a little bit of this space out of here so 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 minus 10 and that is how it pulled it up a little bit and then for the Jamaica we had minus 30 let's try minus 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 inter column to do that and then we got a button a bunch of buttons across here that we want 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 and now we'll go over to our widgets we'll put a header in there come back to the widgets put a text editor in there just below that get back to the widgets I'm going to put an intersection just below that and get back to the widgets and I'm scrolling now 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 will make a cut 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 get a style it we're going to set the color to be Bethany's teal and then we're going to set the typography or the fancy font that Bethany likes size it 50 close that out now we'll edit this text based in our content go to style and I'm in the top our P well use default font 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 and 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 Texas a little too high up so we're gonna 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 and some that 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 sight 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 say 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 are ready to work on their 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 Bethenny's website it has the yellow coming up next so let's go ahead and add this little bar in between our separator they'll come into here we're going to choose that section get a style shape divider we're gonna do a bottom and we're gonna choose our waves brush and our color is going to be Bethenny's yellow blows that out I'll put a height of 60 now we can see that it's there but it's a little bit closed 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 two 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 cuz we'll just copy the button column that we have to the left so I'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 Bethenny's green and then we're going to choose hover and set the background color for the hover to Bethenny'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 I'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 going to 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 will 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 gonna put another heading in here like so we're go to edit the first heading style and we're gonna pick Bethany's fancy font and we'll set the height 250 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 texts will be that go in a style we'll set this also to white well is 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 was 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 pipe ography 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 the individual line when you apply the line numbers it'll only give you a one at the top and now we can select all that and I'm gonna go click on line number and if you notice now there's nice line numbers next to them now from here we're gonna go ahead and put in the bottom wave separator till let's come up to the section for that we'll go to style and then we'll get a shape divider so B for the bottom we're gonna use our waves brush and we'll use Bethany screen for this because that's gonna 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 in to 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 that 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 contents 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 element or templates you have 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 as a back-end for that one we're going to go into that back-end 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 I don't want to save this as template and then 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 I'll 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 we're gonna go ahead and rename that and I'm gonna 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 element or we need to save our updates that we were already working on and now we're gonna 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 that will 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 mean 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 it 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 no under pages these are entire pages that are complete so if you wanted to have an entire page that was done and used in 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 and then under my templates are the ones that we've created or we've imported or we've saved now under this video I've also have some content that shows you where you can find templates for example web Yakama slash templates has all the templates that were in the different courses where we've used them all so Elementor is a partner with web yet it just like Hostgator was a partner with webby etta 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 finally there's template monster and this site has templates for lots of different environments as far as building websites and particularly they have a really good collection of ones that were used for element or itself so let's go ahead and go back to our WordPress and notice that now this one's available because we added it to our library and so I'm just gonna 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 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 grey fortunately Bethany provided me with the 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 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 are so named 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 well if you 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 get back to our website and hit reload now this will be the new version and each of these buttons will work and go to the 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 Bowl with 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 roll down I'll 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 want to come over here and do this one same thing we're going to add another file this time we're gonna 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 or each one of those sections we can go ahead and style these we can set the color white I'll close that typography I'll put 18 as the font size and we'll do the same thing over here style color white was 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 I'll set the color to white you know do the other one the same way I all set the color of white and then 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 it 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 we'll scroll to the bottom we're going to put a photo gallery right here a bunch of images look at a widgets rolling down looking for image gallery drag that in then we want to add some images to it so we're gonna click on add images we're going to go back to Bethenny'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 later do we can click create new gallery now will 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 my 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 Elementor originally I thought wow you know the imports not working right can't really figure it out and I pointed out the bethany 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 that's 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 Bethenny'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 gonna put any spaces in between them so let's go back to our wordpress we need to go back to our dashboard dues 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 gonna put a gallery in there so let's go in and put our image gallery use that drag the image gallery in there like so well 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 work from our original carousel but we don't need Bethenny'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 3 now we're going to go back in for that section and set the style and we're going to set the background the Bethenny's green like so and then a 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 gonna change out the text go back into style color white clothes typography 18 well 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 pipe 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 we're ready to go on to 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 Bethenny'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 the 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 this named header at the top as we had for the about us as 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 where you already made that back in 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 it'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 Bethenny's green close that and then we'll come to this section we'll go into style for that one set the background to Bethenny's yellow we'll close that now inside the first section we're going to go into advanced well unhook that we'll put a top margin of 20 a bottom of 60 they'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 blows that that's 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 I'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 I'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 gonna 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 what is that typography we're going to pick rave a slab and we'll set the size to 26 now we'll go back over to content and we'll put in the content for the first one but you'll be phone email and now we'll come over here I'll right-click I'll make a duplicate drag it down there and we'll make another duplicate drag it over there and another duplicate right get down there and now the content is updated and 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 gonna need two of them here spacing between if you add something here it just spreads these apart a little bit under icon we're gonna set the color of our icon to black what is 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 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 will do a pulldown 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'll 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 for the second one we don't need an icon so we're just going to click this Xbox to get rid of it all together and then for the list title item two we'll put the second part of the address now notice this is inset here we really want it to line up over here but the problem is if you couldn't hear 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 then 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 unless they 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 minus 15 and that looks about right now we're ready to add our message box so we'll go back to our widgets and at the very bottom is our void contact form seven well add that in right there and then we'll come up and choose our contact us form it'll ready to do some styling on that it will 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 we're going to go back to our widgets use 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 it contact us and now we have a fully functional Contact Us page that's ready to go so at this point our websites pretty much complete but if you look at Bethany's website on the home page there was some animation that we want to show you how to do as well it will 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 swishes 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 roll down is home end it with Elementor scroll down and we want to animate this first section content animation is one of those super complicated looking things that's super easy to do there 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 pulldown and we can say it 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 will do zoom in again now this is complete for that section it 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 when 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 watches that animates in and we scroll down to the next section of that animates in and I went ahead and applied the animation to the rest of the sections let's go back to Bethenny'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 can make this site but 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 fly-in thing it's going to be the pro feature it's not really expensive go tell em intercom front slash web yet it gets you to the partnership and gets 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 and 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 want it 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 pro-version down here so that we can have access to this animated headline and I'm just gonna drag that in right there but let's see what that animated headline looks like and I want you to see a short piece about what you can do with just this look it's an underlying 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 and 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 but 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 will come in to 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 get reload and now we have that extra space in between and is the 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 at the top doesn't look as good if we might want it to look like as well as other sections below main also need adjustment now let's look at our website on a mobile device and back here now we click on mobile now at this point it looks like things may be working ok 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 it's a 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 sections gone altogether 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 it'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 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 the first thing we'll do is we'll come up to the top and we'll choose that section go in into advanced and then under responsive or tablet we'll 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 well 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 Bethenny's folder we want to drag that over and 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 well unclick these let's set this to say 400 and now let's see 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 section is 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 then 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 5 go to here advanced 5 and here advanced 5 and that gives us a lot more room but now we need some padding at the bottom of this because clearly that'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 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's Jonah 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 [Music] [Music] you're still here it's over go home

Channel: WebYoda

Views: 433,673

Rating: 4.9544344 out of 5

Keywords: elementor, elementor wordpress, elementor wordpress tutorial, elementor page builder, elementor page builder for wordpress, elementor pro, elementor page builder wordpress, elementor 2021, elementor website, elementor 2.0, best wordpress page builder, elementor pro elements, elementor plugin, elementor pro tutorial, elementor pro wordpress, elementor pro templates, elementor tutorial, elementor tutorial 2021, elementor tutorial for beginners, elementor for beginners

Id: KrEgYrXD9SI

Length: 180min 38sec (10838 seconds)

Published: Wed Feb 13 2019