How to Make a WordPress Website - Enfold WordPress Theme - 2019

Hi everyone and welcome to eMediaCoach, the channel that helps you make an amazing WordPress website. Today we're going to help you create a website with WordPress using the Enfold WordPress theme, and we're going to do something groundbreaking - we're going to show you how to make this website right here, our own eMediaCoach website, because we in fact used the Enfold theme. Check this out guys just to get you excited about the possibilities of the enfold theme I've created this new module in about three minutes and all I've done is added a YouTube video as the background I have saved and updated that and now check out the website that is fantastic and that just gives you an idea of what is possible with the enfold theme a beautiful video dynamic header you can do basically anything you want but more about that little later in this tutorial and just in case you are unsure yes the web site by default will be a hundred percent mobile responsive as you can see there now in case you're not familiar with the enfold theme I've just opened up one of their demo websites and you can basically import one of these at a click of a button I'm going to show you how to do this later on and it looks very very cool and just for purposes of a demonstration I'm going to show you a few of the elements that Mpho allows you to add to the page sliders like this animated numbers and we're going to add some of these on our page later on buttons of any shape and size image galleries Google Maps so that people can find you very easily images with hotspots like that which I find very very cool when demonstrating a product and there are a bunch of other things some of which we're going to go through and some of which we're not but I'm going to give you all of the skills you need so that you can add any content type that you want to any page on your WordPress website and as you can see it's all pretty cool and the impressive thing is that you can actually import a lot of this stuff automatically with a few clicks of the button when we actually import the demo content in one of the next steps so here are the five high level steps that this tutorial will cover and if you have any of these steps already done then just look in the description below and you'll be able to find a link or a time stamp to skip to that section in this tutorial so you don't have to watch the sections which you've already covered for example first we're going to get you online that is getting your web hosting so that you're live on the Internet as well as a website address second we're going to install WordPress then we're going to get the unfold theme then I'm going to show you how to set up our homepage our entire homepage and then we're going to set up other pages and custom functionalities now if you've done any one of these steps already for example if you've already gotten online with your own domain and already installed WordPress then just skip to the relevant step I'll put the time stamps in the description below so to make a website with WordPress with the enfold theme the first thing we need to do for most of you will be to get online let's do that now okay so getting aligned involves two things firstly it involves getting a website domain for example in our case it's emediacoach com that is the address of your website on the Internet secondly you need to get web hosting and this is where all of the files are stored on the internet without web hosting if you go to your domain nothing will appear it's what makes your website publicly accessible 24/7 so we need to get these two things they're the two basic essentials to running any website and to do that I'll show you the quickest and easiest way that I've been using for about 14 years since about 2004 and that is if you look in the description below you'll see a link to this URL over here hostgator.com forward slash discounted just click on that link in the description below and you'll land on the Hostgator home page Hostgator are one of the world's leading web hosting companies and I've been using them ever since I started with my own websites and I now use them for my own business websites like the one you're looking at right now that one there and a bunch of other e-commerce sites they've got great support 24/7 and a dedicated customer login as well as live chat if you come across any issues so if you just go to the web hosting the link here all we need is a basic shared web hosting plan and that's the core essential to starting a website to plans we're concerned with is the hatchling and the baby the hatchling just allows a single domain so if it's your first web site that's the one you would choose it's also the cheapest a baby plan is the same as a hatchling except you can add more web sites to your hosting account if you want to you can always upgrade in the future so don't stress too much if it's your first if you clicked on the link in the description and went to that URL hostgator.com forward slash discounted you'll see a few discounts here but I'm going to show you how to get an even bigger discount so if you go down the page and in the coupon code type in DISCOUNTED. Click validate and you will go back up and see that there are a whole range of discounts to choose from so take advantage of that discount code the more you subscribe for upfront so for example a longer plan of 12 or 24 months is obviously cheaper per month that's how most things work my hosting account gets renewed every two or three years depending on which hosting account it is so it's literally a few dollars a month which is peanuts when it comes to your own website and the money that your website is going to generate for you if you don't want to do that there's also a discount code to get you the one month or the first month for free but the rest will be at the regular cost of about nine dollars per month but if you want to do that the discount code is one dirty cent so you can see that the first month is just one cents essentially for free but the rest will be at a much higher rate so what I'd suggest is if you're serious about your website just subscribe for at least a year or two years lock in a good rate you can always refund if you're not happy with their service they've got a 90 day refund policy I believe so all you need to do is enter a domain name now we've already registered a domain name emediacoach so I'm going to enter that in here but what you need to do well most people will need to do watching this tutorial is enter their requested business domain name here if it's available it will say it's available and if it's unavailable it will also say that so let's take this for example it will be your business name com it will say added to cart if it's available you've also got dotnet to choose from and org theater main domain extensions Com, Net but you can really choose any domain you want dot online tag it's all the same it doesn't matter in the process of setting up your website it's all the same so once you've done that just go down the page ensure you've selected the package that you're after enter a username enter a security pin then go down to your billing info and just enter your billing details and you'll receive a confirmation email in the next five to ten minutes with your brand-new hosting account ready to move on to the next step and it gets easier and more fun as we go along because we're going to be installing WordPress installing the theme and setting it all up so just get this bit out of the way I'm just going to blur my screen and pause this tutorial while I enter all of this out okay that's all done and I'm just going to enter my credit card details here or you can use PayPal once you've done that scroll down the page deselect any of the additional services these are all upsells and you don't need any of them you can actually do everything here without the need to purchase an upsell so it's completely up to you but I personally don't use any of these upsells myself you can still get your own email account with whatever you want your name at your website domain comm you don't need this upsell for example you can already back up your site you don't need this upsell go down and just confirm your order after you've used the discount code discounted you'll notice that your order total is less than it was when you started so just confirm that scroll down click the check box and click on checkout now and we'll go to the next step alrighty so we've opened our web account to get online we've got our web domain and web hosting which means we've done this step next we're going to get an email from Hostgator after you complete your account registration you'll receive an email from Hostgator and what you need to do is log in to your control panel so click on that link there enter your username and password over here and we need to do the next step which is install WordPress so let's do that right now so here we are we're into our cPanel you won't use this much during the course of this tutorial all we really need it for is to install the WordPress platform so we can start building our WordPress website so if you see this link here build a new WordPress website click on that otherwise scroll down and look for quick install and click on that then after you've done that click on WordPress and he will be able to install WordPress for free don't use any of these options here we're going to do it all ourselves and you don't need any of these upsells it's completely free to install the WordPress platform in this box here the domain that you've registered in the previous step so your business name com whatever that was should automatically appear if it doesn't just select it from the drop-down list so I'm going to select the domain that I'm going to use for the purposes of this tutorial in this box here leave that blank where you want to install WordPress on that domain on your business name com I'm just using this as a demo so ignore that leave this directory blank click Next enter your website title and enter an admin username your first name and last name and also your email address this email address is important because you'll receive your new WordPress login details to that email address if you lose them in the next step make sure both these checkboxes are selected and then click install and it will install WordPress to your web domain it might take about a minute or two okay that's all done it's installed to your domain that is your username and password for the next step so what you need to do is just copy that URL there it'll be your URL forward slash WP dash admin and that is the login screen for your website anytime you want to access the WordPress dashboard so what I would suggest is to write down whatever your domain is forward slash wp-admin put that down on a notepad write this username and password down on a notepad that password is just temporary before we change that in the next step but anytime now you want to log in to your WordPress dashboard use that there now when you go to that URL you should see a wordpress login box for a lot of you that won't happen and you'll get an error page that is for one of two reasons if you don't see the screen firstly contact Hostgator and tell them to activate your domain another reason could be that you've purchased your web domain for example emediacoach from another web registrar and you need to connect your website sorry your domain to your hosting so all you need to do is change the name server it sounds complicated but it really isn't all you need to do is tell the domain to point to your hosting and we've got some information on that on an immediate coach website so if you go to the e media code site go to the FAQ and you'll see some stuff there how do I connect my domain to my hosting so use that information other times everything could be ok but it sometimes just takes one hour or so to activate once you install WordPress so a lot of times I need to just wait an hour before I go to this screen here and I'll be able to see the box so there are three ways to troubleshoot if you don't see this login page so once you get to this login page all you need to do is enter the username and password that WordPress has given you when you installed WordPress we're going to change the password in the next step so don't worry there we go we are now into our wordpress dashboard and this is the engine behind the setup of our entire WordPress website including the setup with enfold believe it or not if you go to your website URL you'll notice that it's alive to the public it doesn't look like much at the moment but this is just the base WordPress installation we've installed the word for our CMS and now we're going to make a wordpress website with enfold step-by-step and the fun part begins here the first thing to do however is to just go to settings and go to actually just go to users in fact hover over that and go to all users I want you just to change the password so that you can change it to something more memorable so click on generate password down the screen there enter your new password check that tick mark over there if you need to and update your profile now when you access your login page just for the purposes of clarity you'll enter username your same username and your new password and that there will be updates what have your new password is there so there are now your login details to get into your WordPress dashboard anytime you need to make edits or changes to create your website so now we've successfully installed WordPress that step is done as well before we get involved we're going to do something else we're going to make sure that our WordPress installation is clean and free of all the clutter that we're seeing right now right now there are a whole bunch of plugins and other things activated and it's really going to affect the cleanliness of your website so we're going to do some simple website config and cleaning up to start with before we install the enfold theme firstly go to plugins hover over that and go to installed plugins you're going to see if you scroll down a number of plugins that have been installed by default as a result of you installing WordPress this is all a little bit of bloat and we don't need any of this stuff so click on that checkbox there so it selects all of them select all and then click on deactivate after that's all been deactivated select all again and then delete and yes we want to delete all of those plugins don't worry about accidentally deleting anything you don't need it's nothing is set in stone but just believe me when I say you don't need any of that stuff then go to posts and all posts and delete any of the default posts that exist so click on the trash button and then go to the trash can and you want to delete that permanently and then go to pages and all pages and do the same for any of the pages that have been set up by default such as a sample page okay very good next we're going to go into settings and go to the general tab here you can actually update your website title here you can enter a tagline if you would like to and then you can enter or change the email address if you would like a different email address to be your admin email for example if you forget your password any changes you make just go down and click on Save Changes go to the reading tab make sure that this checkbox here is deselected you do want search engines to find your website then go to the permalinks tab this custom structure right here doesn't work and is not best practice so when you create a new post what is saying is give that post or page a URL of whatever the index.php is /the year-month-day that you made it so we don't want any of that garbage what you want to do is click on category first and then click on post name so what that does is when you create a new post on your website it gives it a URL structure that's very clean it'll be your website /the category that post belongs in forward slash the name of that post so it's very good for search engines as well as human users go down and click Save and then go to privacy I think that all looks fine if you notice that your website is not actually published to the real world to the public so if you log out of your website and you see that you cannot access it because it's a website coming soon page you just need to make sure that you look out for that when you go to your dashboard you should see something saying your website is under construction it's in the under construction and disable that so that your website can be indexed by search engines from the start so that's all we have to do in terms of some basic site config next we're going to install the enfold theme alright guys so the next step to create our WordPress website is to install the enfold WordPress theme what I need you to do is click on the link in the description and the reason for that is that when you go to a theme forest which is where all the themes are available for sale there are a couple of different versions of info there's one that specifically for WordPress as we can see here WordPress but there's also one that's not for WordPress so I want to make sure that you've got the right theme so make sure you click on that link it should take you directly to this page I've already signed in for theme forest or envato whatever it's called so I've created an account already I'm signed in I just need to go to this page and purchase a regular license so I'll add that to cart I'll go to the checkout and I'll follow those steps through to the checkout once you've done that in the drop-down menu up here go to the download section you'll see an area for n-fold I've purchased quite a few themes in the past but look for your enfold download button click on that download button we don't want all the files and documentation at the moment we just want the installable WordPress file only so click on that that will prompt you to save that file to your computer so I'm going to save it somewhere that I can easily access for example my desktop and click on save just remember where you saved it because in the next step we're going to need to upload that file to WordPress so that's all we need to do to get enfold it was very very easy just go to that link purchase n-fold download the wordpress installable file only to your computer now go back into your dashboard go to appearance hover over appearance and go to themes click on add new theme typically you're able to search for themes here and search for anything that you want to use to make your wordpress website but we're going to be uploading that file that we just downloaded so I'll click on the Browse button scroll through and find that file that themeforest enfold zip file double click on that should be that thing there and then install now what this is going to do is install the enfold theme to your website this can take a few minutes depending on how fast your internet connection is so for me it usually takes between 3 and 4 minutes when that's all done just click on the activate button and that will activate enfold there we go n-fold has been activated now if I go to my websites domain I can see that that has taken effect it hasn't obviously been set up but in the next couple of steps we're going to go leaps and bounds and we're going to install one of the in folds pre-made demo sites to make the process easy for us and I'm going to show you how to use the various elements here to configure your website within fold and it makes it super easy to do that so that's all in terms of installing enfold now that we've successfully installed an fold to our WordPress website we need to now make this process easy and what we're going to do is import one of their pre-built demos and that's going to do a lot of the configuration for us without us having to do it ourselves so if you go into your dashboard and just click on enfold if you're not there already then if you scroll down and go to the demo import section you're actually able to import a range of pre-built demos that enfold offers directly to your website and you can see the demos by clicking on these links over here so I'll just open up a couple of them for example so you're able to import this entire demo yourself and then update the content or add and remove modules just as you need them and it makes the website creation process extremely easy but the one we're going to import if you scroll down is this one here it's the landing demo page and it's the one that I find easy to configure once it's been imported so you can choose any one of these pre-built themes or demos I should say don't worry you can choose any one of these if one looks just the way you like and you can scroll through them import that one and then just configure it module by module and you'll get those skills a little later in this tutorial to know how to update modules but if any one of these looks like the website that you want go for it don't hold back but we're going to install this one here the learning page demo so click on import and it will take a few minutes sometimes once you import this demo or one of the demos it says that it's done but when you go to your website you might have to refresh it a couple of times for you to see it if it still doesn't look right just click on the import button again and try that process again so let's wait a few minutes alright so it said that it's been successful let's just go to our website to check and you might have to press ctrl + f5 or command or whatever the refresh button is if you're a Mac to refresh your page to make sure it's taken effect and there is now our website you should see now that demo being imported and publicly viewable on your website domain and that's pretty amazing like I said this is the way the fun part begins and we've just gone leaps and bounds in terms of making our WordPress website if at any time this tutorial is hoping you don't forget to hit the thumbs up button and also subscribe to the channel and hit the bell icon to be notified of any new videos any questions at any point in this tutorial just ask them in the comments below so now I'm going to spend the rest of this video giving you the skills that you need to customize your website in any way you want alright so let's start setting up the home page of our WordPress website and what we're going to do first is I'm just going to take you through some of these general enfold theme options so if you go to enfold and the first tab up here you'll notice that the front page is the landing page which is correct or you can select another page to be a home page when you create more pages you can select if you have a blogger down the track where you want to display the blog you can add your logo here and I'll do that a little later actually I may as well do it now let's click upload you can choose a file from your computer that will upload it to the media library and you can use that image and anytime you make an update just make sure you click on the save all changes button at the bottom and there's also a button at the top now if we skip to the general layout tab you can configure how you want your website to be laid out and I'd recommend the stretched layout as opposed to the boxed or the fixed frame but you can actually click on them and just refresh your site to see what that looks like if you want to look at the other layouts you can select where you want your logo and main menu to appear at the moment we wanted either top header general styling tab this one's the one that is a little bit fiddly there are a range of options when it comes to colors for example the background color of where your logo or heading menu area is the main font color the highlight font color your main content color secondary content color that's alternate content color footer text color so these sections are a little bit fiddly and it may take a bit of trial and error but I'm going to eventually just use all the numbers all of the colors the exact colors that I use for my emediacoach site because that's the one that I want to try and recreate for this demonstration and at the last on the last tab over here you can actually select the font that you want to use for your website so all I'm trying to say is that pretty much everything you see in terms of colors fonts background colors text colors everything is configurable advanced dialing if you want to have a different style applied for example if you want a h1 heading which is your main headings to be a certain font color oh I've got a select edit element but once I do that if I want it to be a select a particular font color a particular font size you can customize all of that stuff as well if you don't want to use the default values I won't do that right now main menu you can configure how you want your main menu to play for desktop as well as for mobile and the burger menu which is basically this menu up here this is called the hamburger menu the header is the top part of your website and here you can configure the way you want your menu area displayed so for example at the moment it only displays when I scroll down but it doesn't display when I'm at the top there but you can configure all of that stuff over here header behavior that's the one there a sticky header is a header that stays with your page whenever you scroll down the page so I'm going to configure all of that eventually sidebar settings we'll look at that later social profiles anytime you want to enter social profiles on your website there is a social module that you can use through n-fold and all you need to do is configure your social media URLs over here once you enter them over here you just need to add that social module on the page where you want it to appear that will be one of the modules that you'll see later and it will just reflect everything in this section here Google services you can add any Google Analytics tracking code here and that's most of the stuff that we're going to use throughout this tutorial one thing I forgot to mention is see at the moment the logo is indented quite a bit and the social media ends about there so it's wasting a lot of the space on the screen and it's very skinny at the moment the site so what you need to do is go into your enfold general layout go into dimensions and at the bottom here content plus sidebar with make that a hundred percent Save Changes that's a very important step and it will add massive amount of space onto your web page just like that and now you can see it's using up the entire screen rather than just a smaller section so it's easier for your users so a very small but important step right there all right so the first thing we'll do is adjust the top header area over here for our website so at the moment it only appears when we're scrolling down but we don't want that for example to update that what you need to do is edit this front page so you can click here or you can go to pages and all pages and click on that landing page there which has been installed by default when you installed the demo content when you're on that page scroll down and look for layout then scroll down go to header visibility and transparency at the moment it's set to that there but we want to set it for example to no transparency whenever you make changes click on the Update button over here and then you can actually go and refresh your website to make sure that that has taken effect so there you guys you can see now it's there regardless of if you're scrolling down or not now go back in to enfold and go to the header area the header tab let's give this header a custom height so at the moment it looks a bit squashed so let's change that from 60 to perhaps 75 or you can enter a size such as slim large and what we've done there a custom value so you've got various things to choose from and it's all a little bit of trial and error so various stages during this tutorial I'm going to click the Save button and then refresh the website just so you can see any of the changes that have taken effect so I think that looks pretty cool it's giving the header a bit of space and it stays there when you scroll now if you go to header behavior currently sticky header is checked if you deselect that what happens is when you scroll down the page the header disappears up like that it doesn't stick to the top of the page so I recommend a sticky header it's much better for user experience let me save changes extra elements you may want to add you can add some social icons and you can display that in the main header area or you can select no social icons that's these over here if you select no social icons they obviously won't appear in this area here you can also add a secondary menu that's over here and you can say that's in the top bar at the right for example and you can display phone number or extra information as well just to give you an example this could come in handy for a lot of you out there who are creating this website for a small business that's what that looks like and just to be super clear this black by you're saying here won't be seen by your users that's purely for you because you're logged into WordPress so ignore that black bar at any time your users will never see that so that's that top bar that we've activated you can choose to have that or you can choose not to have that thirdly we want to adjust perhaps the colors behind this menu so I'm going to go into the general styling area and all I'm going to do here is copy and paste the colors that I've already set up for our website our emediacoach website and you can obviously tweak these in any way you want so the logo area background color is the background to this particular area here so I'm going to make that this color over here now all of these numbers and letters you see here correspond to a particular color it's known as a hex code so whenever you choose a color it's got a specific hex code assigned to it and so I'm just going to use the ones that I've got currently to make it easier but you can use this color picker over here to select any color you want for any of in one of these elements on your WordPress website okay so that's very close to white the primary color that I've got is a green so I'm going to enter that that's used for links when you bold something and other elements such as buttons I believe the logo area font color I'm going to use something that's very close to black and that is the color of our items in the logo over here right now they're a bit gray so I'm going to make that black then the logo area heading color that's going to be black I'm going to select a highlight color I'm going to add a secondary logo color and I'm getting all of these colors from another screen that I've got here so don't worry too much I did take about half an hour of trial and error to get all of this right so don't stress too much if yours doesn't look the way you want or if you're taking some time to figure out what these colors correspond to it is a bit little bit of practice and once you look at the screen and use the screen for a while you'll understand what each one of these items relate to on your website so I'll save that for now and refresh the site so there we've got that green okay looks a bit better now the main content color this relates to the text on your website the headings on your website and also the text of something called your secondary contact area your secondary area is well let me first start with your primary area your primary area is the background white with dark text and your secondary content area is usually a darker background with light text so that it contrasts so these are the settings for your main contact which is the primary area and these are the color settings for your alternate content which is your alternate color area so as you can see the alternate content you've got this background color that's this over here with this alternate content font color that's your text color and that's that grey over there so you can leave that as is or you can muck around with that as you like and this is the main content background color so the background is white and the font color is a nearly a black so these are the main two things that you're concerned with that there and this here so my main content font color I'm going to make nearly black but not black as you can see with the color picker over here the primary color I'm also going to make that green the main heading color I want to make closer to a black don't worry about these numbers and don't worry about understanding these numbers it's it's a little confusing if you don't know how these hex codes work so I suggest just sticking to the color picker when in doubt or just copy the numbers that I'm putting in in your website will turn out pretty good that one's okay the highlight color I'll change to that color they're the same as the primary color the main content secondary font color change that leave that as it is save all changes and now I'm going to go to alternate content I'm going to make my alternate content a green and to give you an example this is the alternate content now but this is what we're trying to get to this green background here that's our alternate content area so that's what that green over here is that's fine because that's green we want white text so it contrasts against the green background and I'm just copying this again from a screen that I've got so no I don't know all of these off by heart but feel free to copy the combinations that I'm putting in I have no problem with that okay we're going to add some quick CSS later on and that's going to allow us to customize the way in which this top area works for example or looks so that it looks more like this if that's what you want so that's done there here's an example it's a preview I'll save those changes and now to the footer the font color for the footer oh and I should explain the footer is this area down here it's the bottom of your website actually we can't see it at the moment it's it's this here we will see it when we eventually add that okay and last but not least what I'm going to do is update the fonts now these fonts that the site uses right now are actually really really good there's no problem with them what's over but you've got the flexibility to change the fonts to make them whatever you like so for example instead of this one I'll use this one here default content font size you can make that bigger or smaller whatever you like and all the rest looks okay so now you can see that the alternate color has changed now that we've made some of those changes we want to increase the font size of our top menu over here to do that just go back into your dashboard and go to advanced styling what we want to do is click on h1 actually click on main menu links that's the right one the main menu links at its element you can select a particular font color if you would like that let's say we don't want the green which has been selected previously through our general styling tab but say we want it to be close to black we can do that we can also select a font size and I will probably go with 17 pixels you can also choose a different font family if you would like to so I'm going to go with open sans and various other options if you would like to for example making them all uppercase or lowercase etc etc now you can also apply these to a mouse hover state or only to an active state so for example if I select that these settings will only apply when my mouse hovers over the words have I want this to appear at all times so let's do that save all changes so there we go the writings bigger and that is a lot more clear now how do we change this over here later on we'll talk about customizing your menu but if you go to appearance and menus you'll see there is a menu item for sign me up and the menu style is the colored style so this default style is a normal menu item just like this whereas the colored style is this box and the bordered style if I save that looks like that and that looks pretty cool as well so we'll talk about customizing our menu later in the tutorial when we've added new pages but hope that gave you a good idea of how to customize your header area over here on your new WordPress website next I want to show you how we created this amazing looking hero area on our website using enfold and now this is the part of the tutorial where we're going to start teaching you how to use or add various modules onto your page in any kind of configuration that you want and we're going to give you the knowledge and experience that you need to do this and it's going to be very very easy and you'll see this in a second so let's start with creating this over here so back into our dashboard let's go to pages and all pages and we'll actually use the landing page so let's click on that what you're seeing here is your current homepage you're seeing that reflected in very easy-to-use modules if you like any of those what you can do is actually click on the copy buttons or you can click on the cross to delete any one of those etc etc so I'm going to get rid of all of that actually I might leave it just for the time being what you need to do now to set up your hero is for any new module you need to drag-and-drop in the layout elements tab the color section drag and drop that to your top of your screen so you see that there if you accidentally drop it somewhere else that's okay for example you can always drag it back to where you need it then what we're going to do is add two columns and let's say we want them to be a half-and-half let's say this is taking up half the width and this is taking up half the width of the page so let's add a half column you can change that at any time by increasing or decreasing the width over here so nothing you do is set in stone then let's add another half column over here this one here we're going to put some text in and then the image is going to sit in this column here so now that we've added our color section which is the background we've added the columns the next thing we need to do is go to the content elements tab over here here you've got a range of content elements that you can choose from to add into any one of these sections so for this one we want to add a title a divider text and a button so here is the title it's called the special heading so let's drag and drop that in there there's our title we want to add our divider it's called a separator drag and drop that in there we want to add text and we want to add a button and here it is here okay if you save that right now it won't look too good but that's because we haven't configured anything so that's all it looks like right now but for the time being let's also go and add the image here we don't want to necessarily use the image content element there is one here somewhere media elements are there it is image actually we can use that or we can do it another way and add a text block click on that text block delete the text in there and add media and you'll be able to upload any files from your computer like I said before I'm giving you the tools and experience needed to create any site you want so all you need to do is learn the process of doing that and if you watch what I'm doing here you'll learn the process the best practice process that we go through to create a website from scratch and it's perfect for beginners as well just because of the drag-and-drop so I can use that text area to add an image the text element or I can delete that and use an image area they both behave slightly differently and that's why I say that you can experiment in your own time okay there it is here that will upload to your media library where all of the images for your website are stored when you upload them and then we click on insert we can choose alignment etc etc styling and you'll see a preview in this area here you can also have a hover effect and in this case yes slightly increase the image size or slightly zoom the image like that and that's completely up to you so now we've added that image let's just refresh our website okay so we can improve on that but let's now configure this area over here click on that module there the special heading add your text heading type make it a hatch one because we want it to be the main title we can select to link that anywhere if you like and the default style let's make it left we want to left align that you can also edit the size of that title or heading and also add a subheading and if you do that you can display it above or below the title and you'll get a box there anything you do you'll be able to see a preview of it in this screen here so let's save that next this divider currently it's just going across the entire page so let's click on that edit button over here that's the edit button this is the delete button and this button is for you to be able to clone that element so if you copy it here and want to put it somewhere else it's very very easy once you make it and this one is if you want to save that particular element as a template to reuse on other pages or modules of your site just you know but let's click on element you can have a whitespace separator but what we're going to do is a custom separator we want to position this one to the left perhaps use a fat border with the fifty pixels is okay the margins we will leave as default we don't want an icon on this occasion we can also select the color and this one is eventually going to be on a green background and I'll show you how to do that in a second so let's make that white so that stands out the text we can add all of our text so I'm just going to copy it from another screen I've got here but before you do that this text element over here it's just like Microsoft Word you can bold stuff italic stuff you can add bullet points you can Center align left align add numbered lists you can do everything you can in Microsoft Word you can also add links to any other website or page so you can enter any URL in there and link make sure that you're in the visual tab when doing that if you go to the text tab you won't see any of that the text tab is the part of the WordPress text interface where you put any code such as a YouTube embed video code or any other code onto your website to appear it's not the best to visually edit text it's where all the code sits behind the text that you're editing so the visual tab is the one that's more user-friendly so all I'm going to do here is just paste some text I've got from another screen here in the visual tab and you can put all your text anywhere you want in any way you want now for the button let's click on edit let's update this it's the wording of that particular button where you want a button to link you can set that you can set that manually or if you've already created pages on your website you can enter you can select the page on your current website but let's say we want to create that manually and I'm just going to copy our URL and eventually I just know that we're going to create a page called maker website and of course you will probably come back and edit all of this stuff after you start creating more content on your website you can select whether you want the button link to open in the same window for the user or a new user and choose the size of the button similarly you can align the button left right or Center and a few other configuration changes I probably won't select an icon to display but you can and if you want to display an icon you can just select one from this list over here so let's do it just for the sake of it there should be a youtube one there it is okay when you've done all that click Save so now we've gone ahead and we've configured a few of these elements so now let's click update and refresh our website to see what it looks like so there we go it looks much better than it was before where we do want to get to is a green background just like our website over here so the way we do that is actually we go to the color section that we dragged in so that's the color section we want to edit that color section it's the background of that particular module you can set various things such as the padding and that is the space between various color sections on your page or perhaps we want to display an arrow that points to the next section of our page and there is one here that's an example so let's do that just as an example the section background currently we've got it set to main content but remember previously I told you about the alternate content and we the colors for that so if we simply click on alternate content that will take on all of those color schemes click Save and update and then fresh this and there we are so now you might want to make a few more tweaks for example this button so if we click on the button again let's say we want to get rid of the icon where you want to change the theme color of this button currently it's a solid green oh sorry it's a solid color which is a solid white because we've chosen the alternate theme but say we want something else and here is something really cool if you make it light transparent it will have a light wire which will be your button as opposed to dark transparent it will look like that so for this scenario we can choose light transparent because it will contrast nicely against the green background and there it is there absolutely perfect now say we want to edit this image here to make it bigger we can go in there click on that image you've got a number of different things to choose from but I think I know what's happened with this image here when I uploaded the image it by default selected a smaller size for it so if I go to the media library again let's upload the image again what I forgot to show you was this here attachment display settings I don't want it to make the image smaller I want to be full size so let's click on full size and then insert and then save and now when I update let's wait for that to update and let's refresh our demo website and the other thing we might do actually is reduce the space in between this divider and the text because if we look at our proper website right now there's a less space between those two things and I've also reduced the size of the button to make it from extra-large to just large it looks a little bit better so what I might do is show you how to do that quickly back in the dashboard go to the divider area at the moment the top margin is 30 pixels so that's that margin there and the bottom margin is also 30 pixels so let's make the top margin just 10 pixels and the bottom say 20 and experiment with that okay maybe we'll make the top margin 0 and the bottom 30 we just want it to appear as an underline and or leave it as 20 we just want it to appear as an underline under the text under the heading that's a little better it's just a little divider but it doesn't consume too much space so there's how to do that and we've also made the button smaller sorry I didn't do this on the video I just changed that from exhale to at large so that's that there and now it's starting to really look like our actual main emediacoach website which is over here next what I want to show you is on our main website we've got these animated counters over here so if i refresh the page I'll just show you what I mean these animated counter buttons so I'll show you how to add that back in - bored what you need to do is drag and drop another colored section so let's drag that in and put that under the top section then let's go to content elements and the one we want to use is this one here animated numbers but before we do that we need to add some some column boxes and so say we want to display four of them what I might do is add one quarter boxes you can obviously change the size if you would like to but we're going to add four so we want four quarters I can just copy those boxes in there then I can go to content elements and drag in these animated numbers okay let's start with that one let's click on that now what do we want this one for let's say we want to demonstrate how many YouTube views we've got so we can put a number in there there can be some text if you would like that can add an icon in front of the number so for this it's view so let's say the eye over here we can add a link if we would want to as well and click Save and let's update that and just have a look to see what that looks like now very very cool let's add a few more once again you can drag and drop these animated numbers down to this box here or what you could do is copy this one that you have set up so you can clone that element drag the cloned one in there then click on that and you'll just be able to edit any of the settings so let's say this one is 99% thumbs up so let's put 99 we'll have to put D we can put the percentage in here as well as you can see here at a number here it will be animated you can also add non numerical characters and these are some valid examples so 99% thumbs up rating we want to display an icon and let's see if there's a thumbs up there is perfect I'm gonna clone that again for the next one and let's say here we've got 28,800 YouTube subscribers even put a plus icon there I think that will still work and we can put a let's put that in okay and now the last one I've actually put a youtube subscribe button there and that's done through the YouTube interface all I've done is actually dragged in a text block over here I've edited that text block let me show you so this is my real site I've dragged in text box and all I've done is gone to YouTube and pasted the YouTube subscribe code in the text tab over here not the visual because that wouldn't work in the text tab that's all I've done there using a text block so I can do that or I can do something else but may as well just put that in there just to show you and save let's update that and check that out absolutely perfect I think that's pretty slick next up in our real website we've got this section here with a title some text and an image I've already sort of shown you how to do that over here so I won't show you how to do that at the moment all we've done is again added in a color section added a title block a text block and an image content block over here so I'll skip that one but I'll show you how to add a testimonial okay so with every content module we need to start with a color section layout element and just drag and drop that on your page where you want that block to appear then we are going to go to content elements and we're going to select testimonials and drag and drop that into there now we can click on the edit button and we can add our testimonials over here so by clicking the Add button that's another testimonial that you can add and to edit a particular testimonial just click on that over there enter a name you can enter a subtitle below the name and then you actually enter your testimonial itself in the visual tab as you would in Microsoft Word you can link to a particular website if you would like to but I'm not going to do that you can also add an image of the person that's giving the testimonial okay so we've added one we can add another I'm just going to do one quickly for the purposes of this I'm just gonna find another testimonial just to throw in here okay cool I'm gonna get rid of this third one because you know what to do let's click save let's just check out what this looks like right now so we can go through this step-by-step here are testimonials so you've got the option of selecting a couple of different layouts currently we've got a testimonial grid over here we can select a slider and you'll be able to see that preview or we can select a large slider you can also select the interval between the rotation of each one of the testimonials so at the moment it's set to 5 seconds similarly the colors you can change the font colors and you don't need to use too much of the other settings but it's basically this one here how you do you want your testimonial to appear save that now similarly we want the background to be a different color like on our current live website we've got this green color over here again the way to do that is to edit the color section that sits behind the module I'm going to increase the padding to make it very spacious so there's a lot of space between the modules section background I'm going to choose alternate color and save let's see what that looks like now there we are and that should auto-rotate every five seconds perfect I've got an image for one I didn't remember to put an image for the second one but it's completely up to you how you want to set that out to edit anything it's as easy as going back into the relevant module and doing what you need to do there the last thing I'm going to show you how to do on our own home page is adding these logo sliders over here they're great if you want to add some social proof to your website and it's very easy to do so in the dashboard I'm going to add another color section and drag that in to where I want that to appear then I'm going to add a content element and it's called a logo partner section just trying to find it here here it is under media elements partner logo elements that's the one we want I'll just drag that in now we can click on that we can add all the images that we want and I'm going to upload them from my computer I'm just going to select all of them click open and they'll upload into your media library there we go let's insert those images and save there they all are now if I just update that for the time being just because I want to see what that has done by default okay so now let's configure that to make it look how he want columns let's have six columns scaling we just want them to be small thumbnail Styles images so let's try that let's just try this one here let's not stretch the image let's not display a border yes we want a slider or we can have a grid it depends how you want to lay that out it's up to you the transition yes we can make it slider we can make it fade we can display slider controls let's display the dot button controls and let's rotate that every three seconds okay let's see what that looks like now for some reason it isn't auto-rotating let me just recheck what I've done there okay oh yes you autorotation we want to enable the auto rotation so we'll rotate automatically without the user interacting with that let's try that again perfect it's Auto rotating however as we can see some of the logos are getting cut off so what we will need to do is adjust the sizing instead of selecting the thumbnail size let's just leave that no scaling original width and height there we go absolutely perfect now your wordpress website homepage is basically done we've given you all the tools that you need to know how to set up various modules on your page what you can do is if you like any of the existing default modules that you imported all you need to do is basically go down there edit the images edit the text anything you need to edit by clicking on those particular areas and you'll be able to do all of that stuff very easily but if you don't need it all you need to do is click on the the cross icon over here you can delete individual elements by clicking that or you can delete the whole block by clicking that so let's get rid of that let's get rid of this just as an example and also get rid of this and hit update and there we are and now folks one of my favorite things about this tutorial and that is how I created this amazing video header over here with a title and a button that just anchors down to the next section of the site just to show you what's possible with the enfold WordPress theme it's very very easy okay so I'm into my dashboard here now and what I'm going to do is again start with a new color section I'm going to drag that to the top now the first thing I'm going to do to that color section is I am going to go to the section background and then insert a link to a YouTube video here now you can insert a link to a YouTube video a Vimeo video basically anything you want so I'm just going to go to youtube and look for some sort of a cool looking video that I can add to the site okay so I'm just going to copy the URL of one of these which I've already done and I've just going to insert that video URL over here and that's now the background video for this entire section click Save now I'll take you through this bit by bit just so you know the mechanics of how it works so if I update that as it is that video has loaded but it's learning in this tiny little narrow space over here so what we need to do is a couple of things but first I'm going to add a title and we'll add a special heading and I'm going to name that special heading unlimited possibilities I'm going to make it a h1 so it stands out and I'm going to Center align that perfect and then after that I'm now going to go and add a button you can of course add anything you want in this section you can even add an opt-in form or a contact form that's aligned to the right hand side you can do anything you want with this section and add any one of these elements you want that video is just going to play in the background without any sound so it's a nice dynamic piece to the website okay let's name the button I'm going to make it a large button it's aligned to the center I'm not going to display an icon and then in the colors I'm going to give it a light transparent theme so that it's a light transparent wire around the words and that will contrast nicely against the video okay now if I update that you'll probably see that the title and button appear but there's still not enough space and we also need to change the color of the title so let's go back in what we're going to do is add a separator or whitespace so I'm going to drag that into here I'm going to edit that separator so you can do a number of things you can make it a short bar or a solid bar as a separator line or you can just add some white space so I'm going to do that add some white space I'm going to add a hundred and fifty pixels at the top above the title and I'm going to copy that line and then drag that under here so there's also some white space or free space I should say below the button so now there should be plenty of space above the title and below the button while I'm here I'll also update the title color so colors help choose a custom color and make that white perfect and update now let's have a look all right that's just brilliant now you can of course link that button anywhere you want but I'm going to link it so that it sends the user down the page to this section when they click on it but yeah you can link it anywhere you want to any URL on your website externally do whatever you want but I'm going to show you how to make an anchor so it links them to the next section so I want to link them to this section so that it automatically takes them to this section when they click on the button so I'll click on the edit and go to here it is section layout now I've got it in here this field will probably be blank for you all you need to do is enter something in there and I'm going to call it start now that exact word just remember that click Save now we've done that for this area here so what it's going to do now if we go into the button and we go to set a manual link and put hashtag start all it's doing is take the user to the section of that word associated with it save that section can be used for a few things but any word you can put in there it doesn't matter what you put in there just put a hashtag and that word has the link to your button and hit update now let's refresh the site and check it out okay that is absolutely brilliant perfect so that just gives you an idea of what you can do some people choose to have a little form on the right-hand side over here such as an opt-in form it's completely up to you how you want to use this area but I hope that gives you a taste of what's possible and now suddenly this website is actually not so static but more dynamic and it's really appealing for anyone that lands on this page now I'm going to show you how to add new pages to your brand-new WordPress website and I'm going to take the example of our live website we've got a page called make a website that page has this URL here our website forward slash WordPress website then we've got pages that are under or a deeper level to that particular website so let's take this one for example that structure is our website forward slash the page we just saw forward slash make a website so for example for your new WordPress website if you've got something called services for example and you've gotten a number of services you want the structure to be your website forward slash services forward slash whatever service you're offering and that's the structure you want to take up and I'm going to show you how to do that first things first you need to go to pages and add a new page and I'm going to take that example there of services for now we're just going to add the page services and click publish so that's got that URL there your website forward slash services now we're going to go and add another new page so think about your web site hierarchy what products or services or other things do you offer and what kind of a hierarchy do you want so under services perhaps we can add make an e-commerce website let's click publish but you'll notice that as soon as you do that the URL is just your website forward whatever page it is that you've just created and you may not want that it's perfect for things such as your contact us page which will be your website forward slash contact us but if you want to go one level deeper in terms of a URL hierarchy what you need to do is just click on that cross over here you need to go to page attributes let's say for example this page is a child page of the services parent page so select the parent page and then click update and now you'll see the new URL forward slash services forward slash make an e-commerce website so let's do that again let's add new actually I'll update this first let's add new you may have a business that delivers things as one of your services so let's say we deliver e publish but if you want this page to appear as part of your services hierarchy then you'll just have to go back go to page attributes and select that as your parent page because this is a child of the parent page and click update and that is how you create brand new pages while you're making your WordPress website it's important to get that hierarchy correct because it's great not just for users and human users but also the search engines okay so the next step to making your WordPress website you may want to add a page such as a detailed page which contains more detailed information on anything you offer and I'm going to take this page as an example I'm going to show you how to create this page with this heading with this green background the little arrow that points down embed a YouTube video add some text which should be pretty straightforward to you by now and then add this thing here which is called an accordion so let's do that let's go to pages and I have already added a new page called make an e-commerce website so then I need to go to the advanced layout editor first I'd like to make this green section over here with their heading so what I need to do is add a color section then I need to add a special heading I'm going to edit the color section first I'm going to give it a large padding and I'm also going to display a small arrow that points to the next section then I'm going to give it the alternate content background click Save now I'm going to just update that heading that I've inserted let's make it a h1 so it stands out and let's align it to the center perfect let's update that and check that out good stuff now I'm going to make this section here let's say I want to take up 3/4 of the width with a YouTube embed and then some text so I'm going to add the color section as per usual then I'm going to add a 3/4 section and then the remainder which is a 1/4 if your sizes are wrong you'll notice that it just goes to the next line like that so you can visually see what fits now in this first one here I'm going to embed a YouTube video so to do that I'm going to go to media elements and drag video all I need to do here is enter my video url so I'll just go to youtube and grab one okay let's take that one there I'll copy that URL and then I'll paste that in here that's about it and then this one I'm going to simply add some text so let's get a text block throw it in there click on that text block so you can edit and I'm simply going to add some text from another screen I've got here click Save let's update that and see what that has done absolutely perfect next I can show you how to add two columns with text very simple and you should already be able to do this I'll do this quickly what I can even do is copy this entire color section here if I wanted to so that will clone that but I'm going to delete this video module I'm going to make this module half size the half width I'm going to make this a full width sorry another half width so it adds up to a full width get rid of that add a text block add another text block here's some text I'm throwing in just as an example and the same thing here so that should be pretty straightforward to you by now but what I'm going to do after that is how do I make this background a light gray so far we've used a white background which is our main content background and we've used a green background but how do I make this light gray so it stands out a little in amongst the other stuff what I need to do is click on the color section here and it's section section background so we can choose from main content or alternate content but say I want the main content but all I want to do is select a custom background color so I can select a very light gray let's say that there and save now let's have a look perfect I've got that beautiful gray background now appearing and if I want the arrow to appear over here all I need to do is go to the content section above it the color section above it click on that and add a small arrow that points down to the next section and the same with this one here there we go perfect last but not least I'm going to show you how to add this accordion so let's throw in another color section down the bottom we want to add a title first so I'm going to add a special heading then we're going to add a divider and then the accordion there it is there and just rearrange the order in which that appears so let's add a heading here make it a h2 bit bigger and also change at the style so it doesn't have that line there we go now with this separator I'm going to add a custom separator make it a fat line with just 10 pixels space at the top 20 at the bottom I'm going to get rid of the icon and also I'm going to align it to the left now the accordion the important part you can add a new accordion as many as you want by clicking the Add button there to edit it just click on that and you'll be able to edit the title that appears before your user expands the accordion and then the description which shows up when it's expanded so let me do that now and I'm going to add some text as a demonstration now you can select if you want accordion to be open by default I usually leave it at zero so that nothing's open you can select whether you want multiple accordions open or you only want it to allow to open one at a time I like it when there's multiple open just so the user has more control if you want to change the order in which these accordions appear just click on the arrow and drag and drop it's so simple let's hit save and check that out one thing I forgot to do was hit update when you save you've also got to hit update so that the page updates and there we are there is our accordion very very clean and easy to use now I'm going to give you a tip that will literally have the amount of time it takes you to create a website with the enfold theme and that is how do you save this entire template for example and deploy that entire template to another page so that you don't have to build the whole thing by scratch so let's say this page for example you've got a page where you love the template and you need to add a few more pages using the exact same layout so let's go into this page let's click on the edit page you'll see a little drop down here called templates all you need to do is click on that drop down and click on save entry as template let's click on that and then you've got to give it a name so let's call it our service detail page name it's something that you'll be able to identify with because if you've got a few templates throughout your process of making this website you'll need to identify what's what now all we need to do is go to add a new page that template is safe we're now adding a brand new page and this could be any other service or any other page that you need on your website you just need to go to templates we've already saved that template now look it's going to be like magic this page is currently blank but now by clicking on this template that we've saved give it a few seconds and just like magic everything has been loaded and all you need to do here is now start editing or updating the content on your page so that it's relevant of course you can add edit delete anything you want and that will basically double if not triple the speed at which you're able to create your website with enfold so that's a really powerful tool I tend to have a template for each one of my sections that you'll see over here so I have actually saved this layout as a template and anytime I want to add a new make a website video page all I need to do is load up the template replace the title replace the video and the text and I'm pretty much done so seriously it's one of the biggest tips I can give you when using enfold is to use the save template functionality and reuse that on other pages and then just start adapting things as required all right so by the time you created a few pages on your new website you'll want to be able to adapt and customize the main menu and perhaps even add a drop-down menu to do that go to your dashboard hover over appearance and go to menus ensure that the enfold main menu is selected what you can do is actually create a brand new menu and customize menus in any way you want and it's all drag-and-drop as you can see here the structure of this list over here defines what your menu looks like now you can add things to your menu in a couple of different ways say you've already created some pages on your website that don't currently exist on your menu so let's take services for example we can add that to menu let's take these two for example we can add that to the menu another way to create new menu links is by using custom links so say we want to add a menu link called home let's add our homepage URL and call it home add to the menu very very straightforward but we want that to be the first thing in the list so if we save that now and refresh you'll see that the menu takes up a whole lot of space but it does reflect that list there but we want to drop down menu say we want services to be the parent item of this thing and this thing here all we need to do is get these two and indent them under services and perhaps we want the whole of services to appear after home in the structure so whenever you indent something like this it becomes a child or a sub item of the item above it and so you could do that for as many as you like and click Save there we go now a user will be able to hover over that and click on any one of these items now we'll adjust the look and feel of these sub items in a minute what about this box over here that's over here you can make that anything you want so you can even get rid of that completely add a new custom link to any URL that you may have on your site let's say it start now let's add that to the menu let's now give that that's a normal menu item by the way that has no styling or box around it as you see there but now if you go down and select a menu style a colored will be a full colored inbox there we go and this is that bordered box that we saw before there we are to get rid of these items here in case you missed it earlier on what you need to do is go to enfold go to your header area and then extra elements at the moment we've got the social icons displaying in the main header area we can completely remove that if we want and that's how you're able to fully manage that now the drop down now this drop down over here isn't styled the way we want it to be so what I'm going to do is go back into the dashboard and we need to go to the advanced styling area we want to really customize the way in which this looks what you need to do is from the drop down go to main menu sub level links edit element now these customizations over here relate to the main menu links that you're seeing here at the top level so let's say we want to keep the color the same I'm just going to copy that and paste that in there the font size we want it to be the same as well and the font family is not an option at the moment because that's taken I believe from this item over here so now let's save that there should be a Save button here it is and I'll refresh this side and there we are we've been able to edit the way that drop-down menu looks if this isn't wide enough there is a bit of custom code that you can input and I'll put this in the in the description of the video you'll a link to the page where this tutorial is summarized on our website and I will actually give you the code to add over here so all you need to do is go to enfold go to general styling in the quick CSS add this code over here and I'm going to put this somewhere on my website so check the description below it'll be the one-page cheat sheet I will have this on that page once you do that click on Save Changes all this is saying is putting some custom code that makes the width of the drop-down menu this wide so that when a user hovers over that the text isn't truncated and that is wider now as you can see you can even make that even wider if you need to just by changing the number and hopefully all of your text fits absolutely perfect and that's how we create and customize our drop-down menu using enfold alright let's add a contact page with a contact form on our new website so let's go to pages in that new page and creating a contact form is actually super easy using enfold I'll show you how to do that so let's add a new page called contact use the advanced menu the advance builder I'm going to do the usual and add a color section and call it the contact page okay now I'm going to add a new color section I want to make half of it a contact form and perhaps another half of it some other contact information so I've added two half columns now under the content elements section I'm just looking for the form module and here it is here so let's drag that in there and let's start customizing our webform and the beauty of this section here is you can actually preview what your contact form will look like so let's say yes we want name email subject maybe we want to get rid of subject we want to add telephone number and a message so we can do that here and we can also rearrange any of the elements just by doing that by clicking on a particular field for example name we can edit what that field is called we can choose the type of input fields for this it's a simple text input as opposed to an area of text and we can also choose whether there's any validation for example if it's not empty the user cannot complete submitting the form unless it's filled in so yes we want to make sure that's filled in now let's say we only want that half-width and click Save that will become half-width now let's go to email the validation for that is that it's a valid email address so someone just cut into some gibberish in there and come and submit the form maybe we'll make that half with as well so that it sits next to the name as you can see their subject will get rid of let's add a couple of new fields so the first one we'll add is perhaps phone number we want that to be a text input we want it to be a valid phone number but sometimes if you're dealing with international customers it may refuse to accept the phone number so I like to leave mine as just not empty so the user has the ability to enter their phone number in any format without being able to not submit the form so just as long as it's not empty I'm happy we'll leave that is full-width okay we'll drag that up above the message Vlad one more field let's call it availability let's make that a date picker make sure that's not empty either to force the user to fill that out click Save and drag that up as well so now for that the user can actually select a date from a date picker which you'll see in a second for the message here I can rename that too how can we help make sure that's not empty we want the user to fill that out and that's that now back to the top this is the email address that the completed form will be sent to when it's submitted so make sure that's your email address and you'll be able to reply directly to the customer to the email address that they've entered here you can rename the label now do you want the form to display a short message when it's submitted you can do that and you can edit that message alternatively you can redirect the user to another page on your website perhaps it's a thank you for filling out the form in the meantime here are some frequently asked questions so perhaps it's another page on your website to redirect the user to after they've hit the submit button so it's completely up to you how you want to do that the email subject make sure you enter that in because when you receive a new message in your email inbox it will have that subject and you'll be easily able to identify what that email or where that email has come from now in this area here you can add an autoresponder reply which is when the person submits this message through your form they'll receive an automatic email response to their email address that they've entered over here that auto response message will come from this email address that you enter here and will have this text it's just like a thank you for submitting our form we will get back to you it's a more formalized message after somebody fills out a form just to acknowledge that you've received it whatever you want to enter there the capture that is the thing that can validate a form so that you don't get spammed so you can prove it's a real human user if you've really customized a form like I have here with phone number availability you probably don't need a CAPTCHA because you're not going to get much spam through that form but if you have a simple form such as enter your name email and message you might get a bit of spam so it's good to have a CAPTCHA so that's completely up to you now let's click Save and let's click publish here's what our contact page looks like at the moment I'm going to fill out this form from a customer's point of view okay there we go there is that message that we customized and now in my email inbox is what I've received the person's details their email address the phone number and any other details in that form now when I hit reply you'll see that I'm able to reply directly to that customers email address now just one thing to remember also is that that customer will have automatically received this autoresponder email to the email address which they entered in their email INBOX so they've received acknowledgement of submitting that message so that's how you create a form after you've done that you can of course enter some more contact information here if you would like - such as alternative ways of contacting you for your business and maybe even some sample text there you go you can also add perhaps a Google map for somebody to find you you can go to media elements and there's the Google map there we can add that in that section there now if you click on that there's a couple of things you need to do firstly let's enter our address and this would be your real business address and to do that you'll need to enter a valid Google Maps API key and to do that you'll have to actually read the information over here to add the Google map and that will be configured and built into your info team and look very very natural but I'm going to do it a different way and I'm going to pretend I'm entering my real business address then if I click on that share or embed map embed a map I'll be able to copy actually first I can create a custom size so I can preview that actual size perfect say I want a little bit shorter let's make that 400 okay now I can copy that HTML so I'm going to copy that code that Google gives me I'm going to go and instead of using this module which you very much can do by the way and I recommend it I'm going to go to the text block now check this out instead of using the visual tab here I'm going to use the text tab and remember the text tab is for any code that you need to enter I'm going to paste that code into there and click Save and then hit update and what that's allowed us to do is embed the Google Maps code to embed that particular map on our website so I've updated that now let me just refresh the page to see what that looks like I think that's absolutely perfect a customer can actually look at that map scroll in scroll out and find your exact place of business of course you will be entering your exact business address here so they'll be able to pinpoint exactly where you are and to edit that for example if you want to edit the size and make it a bit taller you can do that all you need to do is go to google again enter perhaps let me use a real address Santa Monica Boulevard okay let's embed that previously I had a custom size with the height of 400 now I'm going to try 500 so I will look something like that perfect now let's copy that HTML let's go to the text tab delete all of that paste the new contents of that code update the page and now let's refresh so there we are with the few clicks of the button we've been able to create a fully functional contact page with a contact form some contact information and even a google map where customers can zoom in zoom out and find your exact place of business the last thing you'll probably want to do with the contact page is just add that to the menu and the way to do that of course is go to appearance go to menus and now you'll see the contact page available let's add that to the menu let's push it up in front of the start now button that we've got save that so now when a user goes to your website they can easily navigate to your contact page so I hope we've made it easy for you to make a wordpress website using the enfold wordpress theme if you've learned anything in this video please give it a big thumbs up and subscribe and hit the notification build because you'll be the first to know when we release another awesome wordpress website tutorial so thank you for watching and see you in the next video

Channel: eMediaCoach

Views: 9,965

Keywords: how to make a website, how to create a website, make a website, create a website, make a wordpress website, create a wordpress website, enfold, theme, wordpress, enforld wordpress theme, make a website with enfold, 2019

Id: K72lh7jKlvM

Length: 120min 58sec (7258 seconds)

Published: Thu Feb 21 2019