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

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *