Create a Professional Website with WordPress and the Avada Theme

all right thank you for joining us for this third video tutorial of creating a website using WordPress and the ibadah theme this is Alan McNab with image building Mediacom already in our previous tutorials we have installed wordpress and we've installed a bada now we're going to start setting up the website first thing I'm going to do is set our permalinks this will this will structure how the links appear and the URL so I'm going to go to settings I'm going to go down to permalinks while that's going over there I'm going to any one second I've got to go capture this all right very good brought up this info sheet I'll post these things with the video when I copy this right here so I can paste the permalinks here and whatever you have here just put the custom structure and paste that right there and this will have the URL the category with the post category and then the post name and we typically structure it this way because we structure our categories in a way that helps our SEO all right and then of course I want to just save those changes and that'll take just a moment all right the next thing is we're going I want to show you how to update your ibadah the theme this is real super important because updates come out on a regular basis in previous I'm going to just click about it and support right there previous video tutorials showed you how to set up your registration and so you just click on support you go down here you see I've already applied these patches but just go through here if you have any patches that are not applied just do them one at a time these are super important google has recently changed the way it uses the Google Maps and we now have to have an API key put in there so that this patch allows us to do that so these are very important and anytime you have a problem come over here make sure you're up to date with with all this that'll help you out a lot alright so the next thing we're going to do is we're going to go and install plugins so I'm here with a bada and go to plugins and you'll see the list here all right so the required plug-in is the fusion core this will add the software that helps you with doing the layouts and the drag-and-drop functionality when that's done click return to required plugins installer all right so I'm going to install layer slider layer slider is used a great deal with these pages that we're going to be looking at I want to go back here again and when in install slider revolution because we use that quite a bit and yet I want to go back and I'm not going to install WooCommerce although we're going to add ecommerce to this website we'll deal with that later we're not going to use body press or events calendar but we are going to use contact form seven so I'll click install there all right so now I'm going to go down here on the left hand side and click plugins because there's some other plugins software's other software we want to install and I'll include this with the documentation with the video but here is a list of these right now I'll go through the list capped CAPTCHA by best web soft allows us to put caption on the website contact form seven we already installed through Avada duplicate post duplicate post allows us to quickly make a copy of a post so that we could use for something else enable media replace that lets us replace images very quickly flamingo requires no setup other than installation and it keeps a copy of email sent through contact form seven through the website it keeps a copy on the website it's handy for referencing and as a backup redirection allows us to set redirection if we change the URL of a page or a post and inevitably that's going to happen so we go and set that up tiny mice advance that is a etre we like to use so we set that up WP performance score booster this helps with speed and SEO WP super cache we will install but not activate that's a caching program we don't want to deal with cash till after everything is done with the website likewise with WP super cache clear all cash puts a button there to make it very easy to clear the cache we will install it but not activate it until we're completely down the website Yoast SEO we're going to install and activate now I'll show you more about how to use that with other videos Google Analytics by monster insights this is the plugin that we can use to connect to Google Analytics we'll install it and activate it but we will show you how to use it with another video generate thumbnails whenever you install a Nevada demo we have to use that plugin alright so I'm just going to copy the first one I'm going to come over to our website I'm going to click add new and then I'm going to just paste what we copy there and it will look for this plugin I'm going to say install and I'm going to say activate now while it's doing that I'm just going to come over and copy our next one again contact form seven has already been installed copy duplicate post we're going to come over click add new and are going to paste that I'm going to install and I'm going to activate I want to continue doing this through all of these remember my preference is not to activate either the caching plugins will do that at the end of the project when everything's been done so we don't have to constantly be clearing the cache so I'm going to pause you for right now and you can continue installing your plugins as I do mine and I'll catch up with you in just a little bit alright welcome back Alan McNab back with you with image building Mediacom and we've installed the plugins and you can just scroll down here and you can see that there's a blue line beside all of them except for the caching ones so they're all installed activated we don't have this one at the top activated yet either now the next thing we want to do is we want to install the travel demo so we go to ibadah we go to install demos and we're going to scroll down we're going to we're going to look at the travel demo again we encourage you to be looking looking at all these or at least a great deal of them you'll learn you're alone a lot as you see how these are these are set up alright so you could preview it if you want to look at it we're just going to go on it this time and install it it will give you information here about the resources that are needed if if you don't have the resources up I enough you can go and do that at this time but perhaps with your hosting service you can't get all these sets and if not just give it a try anyway alright this will take just a moment we'll get a checkmark here when that is all done and the next thing we're going to do any time you install a Nevada demo we need to go and regenerate the thumbnails so we're going to we're going to come down over here to plugins click on that hope excuse me wrong thing sorry about that we need to go down to tools and to regen thumbnails all right so I'm just going to click here to regenerate thumbnails it'll take just a moment to do that and so I'm going to pause you while the system is redoing that and I'll join back with you in just a moment alright so back with you and do you see that we had no failures here and so we are ready to continue I want to show you now the website as it stands right now I hovered over a bot of travel and I am right-clicking to open in a new tab with a PC I get my system running it's a little slower because I'm recording a high quality video while we're doing this and we're not running any cash at this time so you see the you see the setup that we that we have here and scroll down and see all of this all right now um you can click around at the pages and see what we've got here what I'm going to do now is I'm going to begin taking the demo and changing it around to what we want to use for this website we're not making a travel website so we're not going to use the destinations we're not including a blog right now so if we do later we can add that and we're not taking any reservations so what I'm going to do let me get rid of I want to get rid of the pages that we don't need and also the menu so what I'm going to do I'm going to first go to posts with the blog and if you don't know with WordPress posts are used for the blog pages are those other pages such as home about that are not related to a blog all right so you see there's nine published here we're not going to have a blog right now on this website so I'm going to just click here or click below I want to move to trash I'm going to apply that and I'm going to not want to empty the trash right now I'm going to leave these pages in case I perhaps want to reference one of them later kasa post excuse me now I'm going to go to pages before I did that let me correct one thing here I'm going to go to categories because with posts or category set up I'm going to highlight I'm going to delete all these categories so this is all cleared out if we do start a blog with this website we you can start all fresh all right so I'll just go on and click media and show you this for a moment now these are all the images that the demo put on the website I'm going to leave them all in there so that everything works everything works correctly at this point what I'll do is when we are completely done with the website I'll come in here and I'll delete all of these images I will leave alone for now so the websites the portion we're using continues to function with the images there right now I'm going to go to pages high so we're not using the blog make reservation just in our destinations or travel blog we're going to use the home and the about us so I'm going to move to trash here all right very good I'm going to go down to the menu which is to do that I go appearance and then I go menus and now I'm going to delete the menu items we're not using so I'm going to open up destinations click remove do the same thing for blog and do the same thing for reservations save menu all right now I'm going to go down near the bottom and a fusion slider Fusion sliders are used on on many of these pages so what I'm going to do is we've got two things here we've got the slides and we have the sliders let me go to sliders first and show you that there can be numerous slides on a single slider all right so here are our sliders on now we're not using the blog destinations or reservations all these pages had a slider at the top and so we're not using those and I'm going to delete that we'll checking myself okay good to go all right now let's go to the slides now these sliders had only one slide each you can put multiple slides that do different things but these only had one and slide each so let's delete the slides we don't need we don't need blog or reservation destination that just leaves home and about and move to trash apply that very good alright let's look at our website now and let's reload very good all right so we've got our homepage we've got our about page and we've got our menu that has been changed all right the next thing looks let's do is let's change our logo and to do that you will need a you'll need a you need a local file it need to be an image it'll need to be a PNG so that it's a transparent background so if you don't have that right now let's go on and make that if you want to just for now you can just use just just put your name create an image with your name on it make the font white and then have whatever whatever program you're using have them have it create a PNG with a transparent background so I'll pause you right now I'll get ready to show you how to do that all right back with you we have our logo PNG I've go on to avada theme options logo you can see the setting of the logo of course you can change these settings if you want to if you change these things around you want to go back to what came with the demo just click reset section if you really get in the mess and you just want to reset all of the options with the entire theme here just click reset all okay so you can see we've got we've got the logo here we've we've got a place to put the default one then the retina one which is twice the size that may work better with the with the Apple products so you can put you can put your regular size here your 2x size here and what we would do is not mess with any 2x sizes until we know we've got what we want and then we'll go through and make any any changes like that so in case we do need to change this logo it doesn't take so long to do all right so I just the default logo I just remove that now I'm going to upload and of course if this is already here with the media library I could go on and choose here of course it's not we just created it so we're going to click upload files and then we're going to say click file select files alright I'm going to come over here you just navigate on your computer wherever that is and click on it and then click open now the you can put a title here with that and for right now I'm just going to put logo and you can put your alt text there description and I'm just going to click select right now right so you can see that that is that that is there and when you save changes now I'm going to go and reload hi baby I just got us something there to start with and we can perfect that as we go but we've got something to get started with notice if you hover over that you can't click and go home as a result of that some websites don't put the home up in the nav bar because folks usually now just click the logo all right now the the next thing I'm going to do before I begin changing showing you how to to change these pages I'm going to create a a contact page and to do that I'm just going to come right here I'm going to go to pages and this page is about as a says about us I'm just going to add new and I'm going to so do that fully loads up name of the page is contacts for right now I want to put I will put name address phone I to fill that in later and the name I will make well I'll decide what to do with this later in formatting all right so I'm just going to publish this and of course I need to go down here to appearance and then to menus as soon as we get so we get everything loaded back up here and we go over to menus and then we want to add this so I'm going to click the contacts Add to menu puts it at the bottom I'm going to go on you see this is all it's was upper and lower case alright now I'm going to change now I'll stay consistent usually like to just use a CSS to control that but I'll just can stay consistent for the purpose of the demo here alright so we've got we've got all this right here save menu of course you can reload this and you'll see you'll see that you'll see that come up alright so now I'm going to take just a moment and I'm going to prepare to show you a couple of things as far as changing this up and making it your own so I'll I'll just leave you for just a moment and come right back alright now we're going to show you how to make some basic changes I want to go down to the bottom of the page and we have this whole bottom area that's the footer and there's three component parts to it we've got the logo I've got a basic basic menu copyright statements credit and social media icons so let me show you how to make these changes right here alright so I'm at a bada theme options and we're going to I'm going to go down to social media first and for your social media icons we've already got in your Facebook or it says Twitter Tumblr so if you want to keep your Facebook you would just go back and then just put in whatever your URL is to your facebook business page whatever Facebook page you want to put in there go the RSS let's say for example you didn't want to have your RSS in there just click delete for Twitter same thing some same thing goes if you want to keep your Twitter just put your Twitter URL just go to your Twitter account copy the URL and put it there let's say right here with this one with tumblr let's say you did not want that one but let's say you wanted to add a different one click Add and then you can click the drop down right here and you've got a long list of what what you can go in there including including custom so just pick what you once put in the URL and you're good to go when you're done just click Add alright the next thing let's address is is the footer will refresh later let's um let's address the copyright so I'm in the theme settings and we're going to just go to footer click on that and you'll notice there are all sorts of settings if you want to use a background image if you you've got options for styling but for right now let's just keep what we've got and this is the copyright and credit accreditation here and we're going to change this of course what I'm going to do I'm going to copy this whole thing I'm going to put it in a text editor such as notepad so that I can see exactly what's happening and it will it will strip all codes out of there I don't need to worry about that all right so the copyright says from 2012 to 2016 and of course this websites just starting right now so I'm going to delete 2012 so it's just going to say copyright and this is a small script that's going to automatically put the current year in there so I want to change this to 2017 you don't need to worry about it that will be automatic all right so let's say that your that was with yours instead of you want to you just want to have your company name another words copyright 2016 company name all rights reserved all right so all right so you've got that in there now let's say that for example you want to make your company name you want to make your company name a link to your home page and so what I'm going to do here I'm just going to copy this right here to make it nice and easy this is where the infusion and the original one create a link I'm just going to replace that right there and now you're going HTTP just get your URL I'm going to come over here and just get this one really quick just get your URL right there double-check it target --blank means open a new page I'm not going to do that because we're staying on our website here and then just put your company name there all rights reserved I'm just going to take this and copy it I'm going to delete the one that is here paste Save Changes alright now I'm going to come over here I'm going to reload this page so that we can see the changes that we made of course any time you create a page you create a link you want to make sure you check that all right so you see we've got here our social media you see here we've got copyright 2016 and your piece therapy is the name of this website and just click on that it just simply takes us to just simply takes us to the home page alright so we're good to go there alright so now let's go down again to the footer and now we're going to change this section here of course you can put anything here that you want totally up to you what I'm going to do I'm going to change the logo we want to put the logo that we're using right here show you how to do that and then I will change I will change these links right here alright so for this we go to appearance and we go to widgets and this is the first time we've talked about widgets blog site sidebar we're not using anything there for right now so I'm just going to leave those there for right now this is the footer widget though so I'm going to open that up and there is a plan main text widget which were able to use HTML and what we're going to do is we're just going to copy this right here I'm again going to put that in an editor so that we can so we can look at that alright so basically all we're going to do here is just just change just take this and just change it to what we what we want to be all right so of course here at the top in our demo that we're using there is the there is the ibadah there is the about image there and it is linked of course it links to the ibadah travel demo alright so first thing is I'm going to want to change the link to link to this link to this website I'm going to copy that I'm going to go here I'm going to replace the avada theme fusion comm demos slash travel just to the home page of our website alright and the next thing next thing you notice is that here is the HTML for the location of the logo so I'm going to go to go to the backend the website I want to go to media I'm going to go to this logo image it's right here I'm going to copy this URL right here let's do again very good copy going to come over here and of course their image is located on the infusion I'm going to just replace that URL with our URL all right so that deals with the logo image this next thing I'm going to do I'm going to take their URLs now they've got let's go over to just go over the website and check that again they've got home about us now we're not using destinations we're using contact we're not using blog we're not using reservation so we're basically going to take home and about us we're going to change the URL we're going to take destinations and change it to contact all right so we're done with this all right so the first thing we have here is we've got home of course that goes to theme fusion we don't need we're just going to copy from here above with the image or URL to the home page that's home for us the next one is about us now I'm just going to take this front replace it because we're still using the about a space slash about - us us we're going to go now the next one is what their destination that got their destination we're going to slash contact now if you didn't remember the URL just simply come up here go to contact page or you could just right click with a PC and copy the link from there just highlight copy come over here and oh I'll just show you right here I'll redo this link right here there you go and of course now it's not called destinations it's cold contact all right so now we need to delete contact over there we need to delete over here through reservations and we'll leave our closing for the div and just going to double check here okay first line looks okay second line third eye looks okay just going to copy going to go back over here we were at a bada theme options do again theme options oh excuse me no we were we were in widgets so we go appearance widgets and we went to the bottom open that widget open the text widget delete paste everything looks good save and go to our go to front end of our website so that we can double-check scroll down and you see we've got that I want to take time now to actually click on these links but I will hover over them and we're looking good all right now the next thing we're going to do is I'm going to show you how to make changes to these pages I'll just sort of review one of them probably the home page and that will show you how to do some things here and then after that we will set up the contact page and we'll probably put a Google map in there which means I'll show you how to go to Google get your API key put it in the website and you're good to go with that I'm going to pause for just second I'm going to do some housecleaning here get ready to show you the next thing and before you know it we're going to be all done here and you're going to have a great looking website all right welcome back this again is Alan McNab with image building Mediacom and we're going to want to show you how to change some of these pages all right so we're going to mess with the home page and they home the about page are already set up contact page is a different issue and both with the home page and the about page there is a large picture here there's a top text that's larger smaller text and on the homepage there is a button so let's um so let's on both the home the about there is a fusion slider that's what does this so we're going to go and look at the fusion slider first of all I'm going to click on add or edit sliders just to remind you that the slider for the home and for the about pages are already set up remember that each of the sliders has only one slide there can be multiple slides there but only one slide so let's start by looking at the home page slider alright so notice that the background type is uh is an image could be video three options there for videos and notice there's a note here if it is an image to set the featured image that's right here and I'll show you how that works I'm just remove remove that and let's say we're going to set it and you could set it to by uploading a new image we're just picking something that's here and I'll just pick the one that we have been using before alright so now let's say you want a different image then of course you've you need to find need to find an image it's usually good to use something that is the same size or close to the same size that they're using on the on the website here already so I'm going to click a media I'm going to show you how to go and find that size click media I'm going to click on the image and you see the image being used there right now is nineteen hundred my 1169 so it gives you a good idea what you're looking at you're going to want something that is similar to that and you can try some different sizes and they should another probably going to work just but that gives you an idea what you're looking at now if you wanted a different image number one let me warn you to make sure you use an image that you have rights to use because indeed you will be charged with a penalty for copyright infringement and a website we use to go and get images from time to time well quite often actually 1 2 3 RF comm and you can go here or to any of the other websites and you can find an image that works well for you and you can download a copy I'll just look up a word there and you can go and you can find an image that works for you and I'm just going to pick arbitrarily pick the first image there and you see the different sizes that are available and so you know that you're going to want to go up to the large one here with this website 2507 to 1673 and I would if I were going to use this image and I would purchase it make sure you check the copyright to pull with any website you do purchase an image to make sure that you can use it rarely almost never are you going to be able to use an image for a logo there's some images that will be restricted to only some uses and there will be other images that will allow you to to use it more liberally so make sure you understand that you don't want to be penalized with a fine for that alright so once you have the image you're going to want to take the image you're going to want to use an image editor photo editor or Photoshop so what we use but there are other free options out there and when you use Photoshop or whatever use you typically do not need a high super high quality rendering of the image it is just a background image there you're going to be better off if you don't have any writing on the image and you've got some open space because you're going to have writing year that you are going to want to overlay on that so typically we would try working with an image that is 30% quality which is going to drastically lower the file size which is important for your website to to operate with a good speed and of course speeded website does affect yours your search engine ranking so you usually don't need a high quality image just about 30% does and the other thing is make sure number one it's a JPEG you don't need a PNG because it's not transparent JPEG is going to it's going to be smaller file size and also make sure that your photo editor image editor is set to render it progressive scan and that will also speed up the load time so it's just a little information about images there now the just a little bit more honey images while I'm on the topic typically for an image you're going to use on a blog or something 60% quality is good enough the absolute highest quality would only be needed if it was an image that had text to be to be clearly read such a few were using had text on your on your logo you would want that the highest quality for that so that so the text was clear and also you you always want progressive scan so that your load time is faster alright so once you have an image that you once you have an image that you want to use as I had already already shown you you just replace that just replace the featured image I'll go back down here we are looking at slides just replace the featured image here's the home page and that will that'll be that you select the slider that this is applicable for of course it's for home you select the alignment and usually for background image like this you're going to want center alignment and here you select the heading area this is the top larger text what you want it to say not a separator here we're using 70 pixel font Cutler is triple-f which is white there's no background to it and here we set we type in the caption and that's the smaller text again no separator font size is 30 pixels color is white no background alright so this is where you have the button and this is you just uses the the button that's been set up with the CSS notice your URL here so if you wanted this to go to a different page just like we were just like we were working with links and HTML already and making some of the other changes you would just come in here and you would make that change and this one goes to our destination and let's say we just wanted it to go to contact this website we're going to again set up e-commerce so we'll probably do something there in regards to to that but for right now we'll just have it go to the contact page and we'll just have all caps let me change that you know some sort of cold action by now contact us I get started now what if you want to use with that it could set up a second button there's information for that if you wanted to have for example one button would be perhaps open up a video another would be a call to action some sorts all right so with that we update and as soon as that's done we can come over here and we can check can check the website just reload the homepage and that will take a moment especially since let's since I'm recording a high quality video here and you see the contact us there and you can also see at the bottom of the link there you can see in this area when it pops up that the link there goes to slash contacts alright so so you know that's how you make those changes now let's talk about the home page some more you see here in the next section this is where you have to use your imagination and how you're going to design and how many pages you have quite honestly you can see what we you can see what we have here with this we have you know an image and then image information about who we are separator you've got some sort of tagline there and you've got some text on the right and on the left and then you go down to the next section so let's go into the back end and let's go to the pages this is where it is of great value to spend some time and to see the many wonderful things you can do that's built in with Nevada and also with that also with that get some ideas first thing I'm going to do I'm going to click clone here since we set up the plug-in that allows us to to do that now this you see it's a it's a draft and I'm going to hover do quick edit okay it's just going to walk me through the page to do the full edit there some of us have my cursor slightly off I'm going to change soon as it's loads up here I want to change the name here just to make sure that I do not accidentally start working with the wrong page alright so this is going to load up I'm going to publish this alright that'll take just a moment especially as large as the page is takes just a moment there as soon as that is done I'm going to go back here to all the pages so basically I made a copy of it so in case I mess up on my live version I can I can go in there and recapture whatever I want to recapture here with this alright that's loading up right there all right very good I would do the same thing with the about us just clone it change the name so you know for sure you know what's the live one once what's the copy you can make a temp you can make a copy whatever you want to rename it's totally up to you all right so I'm going into our live homepage right here and if you want you can basically use the layout here change the image change the verbage you're good to go I'll show you a few things though in here as to how this works so you'll have a little bit of an idea and again I can't emphasize enough to just look at lots of pages load up some look up some different demos and look at what they're doing look at the demos you find a page that they like well go and see how they built that okay so here we've got some containers everything from full width all the way down to five to six the and basically you can see here we've got a full container and inside of that we've got a one half here one half here of course remember from the website over here is the website ask you me over here is the image and over here we have the who we are we have the line we have the tag line below that and then here we have another full width container we've got inside of that two containers half and half right left and just have fake text in there so if you want to go in here and change this you could of course their settings here with the full width container that you could that you could change you can also go into this with the one half I'm going to go into there and you see with this I want to scroll down that there's a background image that's how that's how we've got this image and it goes all the way over to the side it comes halfway here in the middle it is a background image with nothing on top of it and then you see we have the who are we separator line tagline and let me show you that you can just and easily just go right into your CI they've done this you can see how the you can see how the container is set up then inside of that there are one two three objects we have first one I'm going to open up this is just text and it's got who are we and you'll notice that it is a h1 heading you want to make sure you've got the h1 heading there and for your SEO it's just left aligned you could Center align this yeah do whatever you want right aligned you can make a different color just whatever you want cancel all right so now we've got a separator here and we're just we can go right in here and edit this alright so singer board or solid no top margin bottom margin is 30 that's gives some separation this is the color and it's got the separator width so it's 170 so it only goes across part way i'll instead of all the way across that's a little design feature and class is separator - left that puts it on the left-hand side and so that's how they did that all right and then same thing here it's just the text going to be another text box and it's just got information just got the text there again you can do whatever you want to with it this is an h3 tag for that alright so then you've got another full container two text blocks inside of that again we'll look at our website image three text blocks stacked right here another full container to text blocks right and left that's how we've got it alright so you can basically look at this right here and we have another plot separator textblock and we can we can go and see what we have there all right so here we are got a full width container textblock just like above we've got a separator the styling is a little bit differently you can go in there and check that out now notice with this text the center block is 2/3 and on either side is a block that's 1/6 oh now this is just an easy way to have this centered and to have a little space on both sides of it right here so instead of going all the way across the page here it just comes in this 2/3 area so you can see how this was built and it gives you some idea so some really easy ways to do that all right so there's a separator right there which it's nothing showing there it's just giving some space it's all that it is and then from this we use the recent works which what it does it allows you to bring to automatically bring in images in a grid layout and the categories you set here with that and you can select how many you want to be brought in and it automatically just automatically just does that for you right there I will go in here real quickly and look at the settings grid layout picture size is automatic grid without excerpts layout is boxed not to show the filters what's bringing them in there how many columns your pixel for your column spacing the categories that it is to grab these from and you could you could also instead of set setting this you could set all here and use all here and then just exclude something all right number of posts we're going to put six there so that'll be two rows of three and excerpt length if we were to put an excerpt would be 35 and whether it's to strip the HTML is usually a good idea to do that and care us all lay at carousel a layout title on rollover so when you roll over the title is shown and we see that right there and that's not showing anything so we don't have that on the setup there all right and so you can go down there and see the you can go and see the other settings speed of M&A animation all set cetera like that okay and here we have now another full container below that and all we've got in there is a button that's going to give us a call to action so scroll down say view all destinations so that's a button that's put in there that's all by itself and we're now ready to go down to the next thing and we go again another full width container and this time we're going to excuse me one second you can set the ayah the you can set the you've got the settings you can do here for the container come down here and hover then it appears your options for the elements click Edit and we can go down through here and we can set the testimonials for example this is testimonial one and name avatar etc you can go down make all the settings put the testimonial in and this creates a nice this creates a nice little slider for testimonials I'll also show you real quick while I'm here the clone element is very handy if you set up and whether it be a container you can do it here whether your whether it be an element you can do it here you can clone it so with one click makes a copy if you want to keep all the same settings that's great maybe change the text a little bit it's really really a much faster of course you can delete so for example if you're going down through here you're looking at the home page and you say okay I want all this but I don't want this at the bottom I don't want the travel blog thing so you just come right down here to to the bottom layout and we've got all this right here full width container all this and so I'm just going to go here and I'm going to delete all of these and and lastly the full width container and boom we're done and then just come right up here we update and then after that's done you can just reload and you'd see that this isn't there any longer the page stops right here with the with testimonials all right so that is really a quick tutorial will show you some more as we go about about how to make some of these changes and of course we're going to show you how to set up the contact page here in just a bit so you can you can do your homepage you can come up here you can do your about Us page and you can go to the fusion slider get a different image or use the same one if you want and remove your button and it's you'll notice with the the about Us page there's not a button there so when you get to that part of fusion slider just leave a blank nothing will appear so that's won't be a problem there just go down through your page see how it's got the image on this side it's got basically the same set up you'll see how to do the little list here with the little stars and I've got a different set up here with that so you'll see how to do all that it's pretty stuff here all right so I'm going to pause right now you can work on your homepage your about us and we're going to be back in just a moment and we're going to work on the contact page alright this is Alan McNab Witham is building Mediacom back with you and we are going to do the contact page now there's a couple of things that we need to do first thing we are going to do is set up the contact form so we're going to go contact contact forms and let's just take a look take a look at this one right here all right so we have a name email message and submit all right so I'm going to change this round just a little bit name space and just put a star there people know what that means nowadays and instead of your - name I'm just going to have name I'm going to have email here and little star the PR at the end of that is break all right and instead of the code being your - email just going to make it email and then message not going to have that required I put message right there I'm going to add I'm going to add phone right there I'm going to do is I'm going to copy this right here paste it in there I'm going to put phone and I'm not going to make that required all right and when it come down right here going to put so we're going to put here just a default by you click use that as placeholder and I want to insert tag it's going to give us the code right here so here's the code we're going to place right here alright okay so now we this is what the front of the form is going to look like it's going to have a name star and then it's going to the next line it's going to have a box to fill out and then email star phone message and then sin I'm just going to put sinned right there all right now all right so this is going to this is the sending information of the email that's going to be sent so this right here is you at your domain.com because that's your email address that's the email address it's going to is going to go to all right now it's going to come from you can put something in this this will be your this will be your email address from your website admin at your domain.com alright so I know this can be a little confusing this will be your email address that it's going to it can be gmail.com any good email address doesn't matter can be you at gmail.com the from this is what it's sending from now this needs to be your domain this is this website inner peace therapy dot online and so it needs to be this domain the reason for that is so it's less likely to be flagged as spam so that's admin at inner peace therapy dot online the subject and what I do here with the typically will do here with this subject I would say something like from okay so to be from inner-peace therapy dot online and then the subject that the user put in there so to have both of them they bracket subject bracket you'll see that in a few minutes when we save that you'll see that these codes come up here all right pull I reply to and this is what you're going to if you hit reply to the email that you receive from the website it will reply to the person before we go any further I'm just going to save this right here so you can see some of the changes that are being made alright so the email from the website is going to be sent to you at gmail.com you can have a comma there and have additional email addresses if you would like the email is being sent from the website the sending address is admin at your website URL enter peace therapy dot online for this website of course whatever remember we set this up in the cPanel you could set up your whatever email this just needs to be one of those email addresses the subject line when the email comes from inner peace therapy out online and then colon space and then the the we had a subject here that we had them put in we could put that there but we do not see we had on put in name email telephone message so there is no subject right there so a subject from inner piece therapy dot online website so when it comes in to you you know it's coming from from the website I'll reply to a good email right there now this is the this is what's going to come into your email all right so it's going to be from colon and then the name that they put in email this will be the email address now they put in is not going to be not going to be a subject but there's going to be loan and there's going to be a message all right so let me grab for for phone right here it's a till 55 I'm going to paste that right there and the message I go and put that all the way down on separate line because it could be multiple lines all right we should be good there generally the messages they're all default we're all good to go and we don't have any additional settings for this one all right so let's check real quick the form on the front end name email phone message and then the button says sinned and the email message sent sent to you at gmail.com from admin at your website URL from put in some subject there that be relevant to you to pick that up if you hit reply from the email you receive from the website it goes to the email address from the syndra here and then we've got this coding all right so we're going to save that okay so this right here is a shortcode there's a couple of places to a couple of places to grab it just grab it right there you can also grab it you can also grab it if you just go to contact here the screen that it gives you can grab it there also all right so now we're going to we're going to work on our contact page remember that our other pages had the fusion slider and I'm going to add the fusion slider to the about page so that it does not come up with this contact situation right here so this is this one I'm going to do I'm going to go down to fusion slider I'm going to add or edit sliders a second selection there and this is going to be contact Oh I'm going to show you something else sorry about that let me go back to sliders for one second I want to make this easier on you so you don't have to worry about so you don't have to worry about the settings there I want to click clone right there I hovered over about I clicked on clone alright so I'm going to edit about and what I'm going to do I'm going to put contact contact right here and I'm going to delete the shortcode so that instead of having about s to the website is going to put something else there and we're just so I'm just going to go back down through here I'm just looking very quickly and all the settings with the slider for the about page we're going to be applied here I'm going to update that alright now I'm going to go to fusion slider this time I'm going to add or edit slides and I'm going to make a slide for the contact slider alright so I'm going to do the same thing I'm going to take hover over about I want to click on clone because I'm going to use the same settings or the contact slider same as for the about so I click on the about slide and I'm going to rename this just saves time from having to go and figure out all these settings I'm going to change this to contact and the permalink I'm going to just delete that right there and say ok and WordPress will set a new permalink see it says contact now all right going to use an image yes let's pick something different it's a featured image all right let's see the size of this right here and the size will be about the size what we're dealing with set featured image all right so I right here this is the heading area instead of about us I'm just going to have contact us oops all caps all right and all these settings are all good now for the caption area you can put anything you want please contact us with your feedback any question you may all right and of course we're not going to have a button here so just leave that blank now this is going to be for the contact slider so I check that right there and update all right now that finish is updating and we go now to pages because now we want to edit the contact page and we go to contacts all right and after that's loaded in we will scroll down and check out the settings all right so we've got sliders here the position is default fusion slider is going to be on the contact page the type of slider is a fusion slider and that should be that should be a-okay now let's just double check here let me update that and let's see if just to make sure all this came out good with our contact page all right so we go to our contact page and we reload now all right oh so we've got a couple there so I've got a little issue there I'll straighten up alright so we've got the contact us and we have the little tag line right there and I've got a little issue I've got a little issue right there which let me go and let me go and deal with that really quick here all right and we are going to go here to page title bar and a page title bar we are going to hide that and we are not going to show any of the text and that should take care of us let's double check here we're going to go on up we're going to update again and as soon as that gets done we are going to reload I'll be wrapping up here soon we'll reload in just a moment now runs a little bit slow there you go we're going to reload now here runs a little slow because I'm recording a high quality video at the same time alright so there we go and there is the information we put in all right so let's format this page I'm going to double check here and just look how this contact us came through here I'll pause you for one second okay very good all right so now show you I'll show you how to build a page and I will use the I use the fusion page builder so you can see that I so I want to click fusion page builder and the first thing that I'm going to do I'm going to get in a full width container and I'm going to bring it down there and I am going if if you wanted to if you wanted to have a text area above everything you could just put in a text element there I'm going to click on build our elements now if you as I was saying you could put a text block just drag it right down there and if you want to put text at the very top above the contact page etc you could do that and you could just type whatever you want it here you could format it however you wanted and I'm going to I'm going to Center this right here maybe at the top of this here I'll put a well very got contact as above and the other thing some of with that I just put this right here like this and then I'm going to save alright now the next thing I'm going to do I am going to use our kala column options and I'm going to put a half and put a half now right here and this left hand side I'm going to put a I'll click builder elements I want to put a text block so that I can put in the contact information and contact form and then right here I'm going to want to put in a Google map just take it drag it right there all right so let's put in let's let's edit this text box right here and right in here I'm going to put the company name and then below that I'm going to put a dress line I'm going to not put in a new paragraph just just a line break so shift enter for PC another address line again shift enter to get a line break and then phone number I'm going to hit enter to get a new paragraph and then I'm going to paste in that shortcode there it is and it goes right there all right going to one more thing I want to make the company name h1 tag h1 tag I want when we put in the fusion slider does not put an h1 tag in so you need to make sure that you do that for SEO purposes all right so we're going to save that right there now with the Google map I'm going to hover here we get our options I click Edit right there all right so we want to Road map hundred percent the map height that we're going to use six oh six and the zoom level twelve everything else by default is good the address Tampa Florida that's where I'm at save that alright update the page and as soon as that is done and be just a minute now all right and we're going to reload this page all right we scroll down there's a company name address etc I'll show you about the Google map and just say it and make sure you test your form by filling out these blanks and click send and check the email address that you had had this go to and you should receive that also remember that in your back-end flamingo a copy will be stored there if you want to check that all right now the Google Maps let me show you about that we're going to go over here to Obata we're going to go down to theme options and we're going to scroll down to short codes short code short codes styling yeah all right and we're going to go to the Google map it was like let me check this out all right sorry about that this is a new option that's just been added and it's not in shortcodes is in contact form and google map right there all right so there's basic settings here this is the where you put your google api and to get your google api just follow the doc right here all you need is a Google account and once you have your Google account you just you just log in you just log in there and you click to get a key all right and so and so what you would do is simply you have to create a project and then you are just able to go in and get a key very easily and I'll do a video for you here soon about that there's we don't have a Google account yet for this the website we're working on right now but uh follow the instructions just get that very easily let me show you what it will look like here's a here's another project we're working on Isis on a development site this is for a pain management company and you can see here very much the same set up and also the map and made the height of the map so that they come out about together they're also got CAPTCHA added there for the for the contact form and perhaps will show you how to do that in an upcoming video also again just need a Google account to get your recapture information there and put it into the website and just make few other changes so it's pretty cool thing to do alright so let's get back over here really really quick to our website so basically we've got a simple but very nice very professional-looking website we've got three pages there and you can just do whatever you want and very easy to make the changes you want there with that and also we're going to be adding a little ecommerce to this website so we'll continue to do create some videos with this to show you how to do that we thought this would be a great website to do it because it's not very not very complex and just a very good small business website to get have a great looking website and to do so very quickly alright so look forward to seeing you back with some other tutorials again I'm Allen McNab with image building Mediacom thanks for being with us

Channel: Image Building Media

Views: 26,252

Keywords: WordPress, Avada, Avada theme, create a website, professional website, WordPress theme, WordPress plugins, edit WordPress pages, edit WordPress menu, create WordPress contact form, create WordPress contact page, add Google map to page

Id: 2rrRNgSUjbw

Length: 93min 8sec (5588 seconds)

Published: Mon Oct 10 2016