How To Make A WordPress Website

How To Make A WordPress Website


Hi there! My name is Ferdy Kopershoek from wordpressking.com
and I believe that everybody these days should have the possibility to make their own website. That is why I put all my time and effort in
making this amazing tutorial where I show you the best things I’ve learned in last
five years about making websites in WordPress. In this tutorial I will show you how to create
an amazing, stunning, professional website. If you want that stick around, because I’m
going to show you what we’re going to make and learn in this tutorial. This is the website we are going to make. A really nice first look. A logo over here, a nice clean menu. I like to keep it clean and neat. If I scroll down you see it’s shrinking, so
everywhere on the website I can navigate really easily. Here I have my slider with beautiful images,
I can also show a video here at the background, I will show you how you can do that, and you
have some information about my company, and call to action. You also can navigate by yourself through
slider. If I click on this arrow I scroll down here. I show my three services photography, films,
and web design. Some text about what I do, here are some results
of photos of websites I’ve made, a video displaying, and if I want to have more information about
one of the three services, I can click over here on the more information button. I scroll down, here I show my latest projects. This is my portfolio, here I show my latest
blog posts. If I hover over I see the title, and the date. Here we have widget areas, some text about
my company, like us on Facebook box, our latest project again, the latest blog post. Here’s some information about your website. You can add some terms of services over here,
and here I have my social media icons. They’re all in their own still, Facebook,
Twitter, Instagram. If I click here, I go up immediately. I go to the about page, and here I will show
you how you can create a simple text with a simple photo. Here again you see that the background is
fixed so you can see the whole picture. You can add a nice quote. Here I show some testimonials of my clients. I can navigate through them. If I want to change the look of this I can
do this very easily. I go to edit the page, now at the back end
you see all kinds of elements, text block, separator, special heading, and if I scroll
down, I go to the small elements. I click on it, I want to change the view,
here it says testimonial style, I click here, I say make it a grid. How many columns, two, save it, update it,
and I view the page again, now it’s looking like this, so you can change things very easily. I go to observe this page, I’ll show you
step-by-step how you can make this again with a nice parallax backgrounds,, and as you see
I have the same information is on the homepage because I will show you how to copy paste
elements to different pages. If I click here for more information, I scroll
down automatically, and same goes for films. So if I don’t have more information about
films, I click here, and I `scroll down. In front of contact I click over here I go
automatically down to contact area. And as you see, the website is also optimized
for smartphones or tablets. So if I watch it on the tablet or a smartphone
you see it’s looking amazing, and it works the same if we want to have more information
about photography, I click over here, and I go to photography. If I want of contact, scroll down, and I go
to contact. There’s also really nice menu, it’s looking
like this. So even on smartphones and tablets the website
is responsive. I go to portfolio, here I can showcase my
services, photography, films, if you want to see only the film’s I click over here,
I see only thaw films. Or photography, and see photography, and web
design, only web design. So if I click over here, I can see all these
images, and I can navigate to them, but also can show my photos like this. If I think I don’t want to have this sidebar,
click on edit portfolio entry, scroll down, and I say no sidebar. I save it, I view the portfolio entry again,
and now it’s looking like this. I can navigate to next portfolio item like
this, I can show a video over here, so that’s how to portfolio works. If I go to the blog page, and I’ve decided
that I want to show my latest blog post over here like this, you can navigate to different
blog posts. scroll down, and here
I can have a nice overview of my blog post, I can click and then go to a new page, again
I can change the look and feel very easily, I go to edit the page, scroll down go to the
elements blog posts, and I can change the block style to grid layout, decide how many
columns I want to have, two in this case, save it, update it, and view the page. Now if I scroll down, it’s looking like this. If I go to Oasis of the Seas, a simple text,
and two pictures, but if I go to Montana, I will show you how you can get the most out
of your blog post by creating a video in the background, and having a transparent header.
if I want to change the color I can do it very easily in the background, some text,
and the video, overview of the recent blog posts in the sidebar and like us on Facebook
widget, and then I go to the contact page, I will show you how to create an easy contact
form. Have some information over here, and again
like us on Facebook widget. So that’s how our website will look like. if you want you can follow along with exactly
the same images I use or you can create your website of your company, of your church, of
your organization, whatever you want to do, so that’s what we are going to make. If you like what you’re seeing so far please
give this video a thumbs up, I would appreciate it, and good luck with making your beautiful
amazing website. There are a few things you need in order to
get a website, you need a domain name, you need web hosting, you need word press, and
you need a theme. A domain cost around twelve dollars per year,
web hosting costs around eight-nine dollars per month. I can give you some discount on web hosting,
word press is free, the theme cost around sixty dollars, and this instructional video
is totally free. The first things we need are domain name and
web hosting. A domain name is basically the URL over here,
its address for your website. Something like facebook.com or apple.com or
google.com, if you type that in, it will direct you to your website. What is web hosting? Web hosting is a computer that’s online 24/7,
that stores your complete website. So with a domain name, and web hosting you
can create your own website. In order to do that let’s go to hostgatorDC.com,
and here we get our web hosting. I’ve been using hostgator for quite a while,
and I really like their support. They are always available, you can set with
them, or you can call them, and if there’s a problem they’re able to help you. I never had any big problem with hostgator
so I host all my websites over here. If you want to get web hosting click here
on web hosting, as you see there are three plans. This one, you can forget the business plan
it’s not what we need. We will choose between the hatchling plan,
and baby plan. The hatchling plan is if you want to have
one website only, and the baby plan is for people that want more than one domain. So as you see this is single domain, and this
is unlimited domains. So if you’re starting with website, and choose
the hatching plan, if you want to start with multiple websites, and choose the baby plan. You can always upgrade later, so I start with
the hatchling plan. So I say sign up now and then we have to choose
our domain name. You can enter your domain name, if I say I
want to have Facebook, click on enter. It says facebook.com is not available, so
we need to find the meaning that’s available. In my case I will try and fold that’s the
theme we are working with 2017, and press ENTER, and it’s still available. I was going to give me some different options,
but I don’t need that, I only wanted .com, after .com, .net, .org are the best ones,
but I always stick with the .com version. I scroll down I don’t want to have the main
privacy protection I can edit, and then people can see who am, I want people to know who
I’m so I don’t use it. I scroll down we just chose the hatchling
plan, and here we have the billing cycle. Longer the billing cycle the more discount
you get I like to choose for three or six months, and get some nice discount, and then
you’re not stuck if you don’t want to get along with your website. Let’s say three months right now I username
will be ENFOLD2017, my security PIN 12345, you need it if you have any questions at the
customer support you need this code, and here we need to enter some billing information. So my email address and [email protected],
and it’s important that you use the right email address. You need to have access to this email address
because hostgator will send some important information to this email address, ENFOLD2017. So I’ll fill this information, and here we
can choose your payment type. I
like to pay with credit cards, so I fill in my details over here and my account is business
I scroll down, and here are some additional service. I don’t use these because you can always add
this through word press, and it will be free, so I don’t need this. you see is $45.80, but I have a special coupon
code for you it’s “worth press king 25” if you validate
it, make sure this one is unchecked, and then it will be 37.59, maybe you will get even
more discount, and when you use this coupon code I get a commission, and help me to make
all these tutorials. You will not pay more, but I will get a commission. So thank you for that, it supports my channel
very much, and then here you have to agree to everything so I do that, and I say check
out now, and here we are. Get ready we’re setting up your account. so I will go to my email address, and here
you see thank you for choosing hostgator, and this email is very important, my account
information, I click here, and here I have access to my control panel. So I click on this link and then I can login. So I have to get my username ENFOLD2017 and
I generate password, copy. Paste. And I can log in over here. I close this popup, and over here are pop
up links, I want to use the word press install, you can find that essentials, word press installer
I click here, and I select my domain over here, in my case nofold2017.com, if I want
to I can install it at ENFOLD2017/new or something I type here, but I want to install it at the
root so I click on next. Before I do, here you can see you can let
people do it for you, and it can cost four hundred dollars or one hundred dollars, but
I will show you how you can do it for free, it’s not necessary to this. So I click on next and here’s the blog title
in my case it’s Ferdy Korpershoek Media, I have a media company where I make photos,
films and websites, and I want to make a website about that. My username will be this one, first name,
last name, and my email address, scroll down, I agree to the Terms of Service, and I install
it now, installing WordPress, have to wait for a minute. the installation is complete, but if I go
to this link over here, it can be at your website will not be active yet because you
just ordered your website, it can take up to 20 minutes, maybe one or two hours before
your website gets active, and right now mine is so I click on admin login, and here I am,
and then I can use these settings. My username, I copy it, I paste it, and my
password, I copy it, and I paste it, login. And here I am at the back end of my website,
and if I hold command, and click over here, then I go to the front page of our website. Everybody in the world that visits ENFOLD2017.com
at this moment will see this website. I will close the Cpanel, my hostgator billing
step, and I go back the dashboard. What I want to do I want to clean it up, and
I want to change a few things. The first thing I want to do I want to go
to users, click on myself, and scroll down to add a first name and last name. first name, last name, and then I can choose
display name publicity as Ferdy Korp over here or Ferdy Korpershoek, I prefer my whole
name, so I choose Ferdy Korpershoek, and I can change new password over here. So I choose a new password, I have to confirm
the use of a weak password, I update profile. Now if I log out, and I login, I can use my
own password I know by heart. I say remember me, and I log in. so I want to clean this up, how can I do that,
I go to plugins, and I want to do new plugins, I close this one, I close this one, I don’t
like this read new things, and I want to do a bulk action which means I select all the
plugins except for this one, I click on the deactivate, apply. All the plugins are deactivated right now,
I select them all again except for a keysmith, delete and apply, yes. Now they are the leader one by one. Now I go and update WordPress to the most
recent update, so I click over here, please update now. Update now, and updates the WordPress database. Continue, here it is. Here I see that there are still two updates
I can do, so I click on those, and they are theme updates, don’t need that. So I go to appearance, themes, and since we’re
not using these themes I click on theme details, and I delete this one. Everything I don’t need I want to delete because
it takes space, it can make your WordPress slower, and I want to keep it organized. So also this one, theme details, delete. Ok, if I click here now you see there are
no more updates. I go back to the dashboard its and I want
to dismiss some things making a little bit more organized, and I close this one, this
one, and this one. We have one post, one comment, and one page. So if I go to the front page, and refresh
it, we can go to a blog post, it’s called ‘Hello World’. If I click here, you will see enfold2017.com/index,
and a date. I don’t like this, so what will I do? I will go to the dashboard, I go to settings,
and permalinks. I want my whole website to be clean so I rather
have ENFOLD2017.com/hello world, so go back to permalink settings, and I click here on
post name. I save the changes, permalink structure updated,
I go back to the front page, I click here to go to ENFOLD2017.com, and if I click on
the ‘Hello World’, you’ll see the link structure is now ENFOLD2017.com/hello world, it’s
more organized, and it’s better for Google. What’s next? I go to dashboard, and I’m going to delete
the post, and the page, and if I delete the post the comment will also be automatically
deleted. I open them in a new tab, pressing commands,
and clicking like this. I click here on trash, so Hello World goes
to trash, and then I click on trash I can delete permanently or empty the trash. Also in pages I click trash, again I go through
the trash, and I can delete it permanently or empty the trash. If I have more pages over here, I want to
delete them, and I click on empty the trash. So if I go back to my dashboard, I close these
steps, you see it’s really clean. So this is our WordPress website, and now
we are going to create a few pages. You can hover over here and go to page, or
you can go to pages, and create a new one. I click here on at new, and the first page
I want to create is the home page, so I click your home, this is the title of the page,
and I say publish, that’s all I do for now. Now it’s published and I click on at new. Second one is, about. I want people to know who I am, what my company
is, what my company is doing, a little background information about my company, so an about
page, I publish it. I want to offer my services so I create a
page which is called services. I have three major services in business. the first one, will be a page also is photography,
the second one is film, videos, I add a new one, film, and the third one is web design,
web design, publish. I want to showcase my projects, so I want
to create a new page which is a portfolio. I want to keep people up to date with news,
and stuff so I create a new page which is called blog page publish. The latest one at new is a contact page so
people can get in contact with me, publish? If I go to the website in the new tab, you
see those pages now where. I go to edit page, and I got to appearance,
menus. Here we can make menu, we have to create one
so my menu name will be main_menu, create menu, and I want select everything, all the
pages over here, and add them to the menu by clicking this button. If I save it, and I refresh the page, you
still will see no menu. We have to assign the menu. So I scroll down and here the display location
of this menu will be the primary menu. I can also select social links menu. If I save the menu, I refresh the page, you
will see the menu over here, and you will see it over here. I don’t like this at all, it was just to show
you what is possible, save the menu. And actually I want to change the order, I
want contact page at the right, so I’m going to change the order of the menu in the back
end. Over here is really easy, I can drag it, holding
with my mouse, over here. The home over here. About, the second page, the third one is services. What I can do, I can make sub menu items. So I’ve over here photography, I can drag
it over here, like this. Film, web design, portfolio, blog, and contact,
I save the menu, and then it looks like this, or I can make sub menu. It’s very easy, I drag photography little
bit to the right, right now it will be a sub-item of services. Same goes for film, I drag it to the right,
and you see a step like this, release it and then it will be sub item of services, and
I could even make a sub-item in films like this. If I save it, I refresh the page, you’ll see
services, and film as a sub item which is called web design. That’s how you can navigate through the
menu. But this is not sub item of film so under
get back and if you take a look at apple.com, you see they have the logo. if I click on
that, and I want to go back to the homepage, and click on the logo, and I’m back at the
home page, so I don’t use the home page, so I don’t need it. Remove it, save the menu, refresh the page,
and if I’m at the about page, I click on Ferdy Korpershoek, I will be at the home page. So this is what I like, but if you take a
look at apple.com, they spent millions of dollars to optimize their website so that
people buy more, and this look like crap in my opinion in comparison with this website. So I take a look at the websites of big companies
and see how they do it, and that’s how I want to do it. So in order to do that I’m going to change
my theme to premium theme, and in order to get a premium them, go to WordPressKing.com,
go to themes, scroll down, here you see the ENFOLD theme. I click on the image, and I want to see more
details. I click over here, the theme cost sixty dollars,
and let’s take a look at the live preview. I can choose a demo. So for instance the default demo, I hold command
and click, and choose some different demos, and here you can see how it looks like. You see a logo over here, nice clean menu,
really beautiful slider, you the way ENFOLD show things is really beautiful. Here is animating, it’s really nice, nice
light box. I’m a web designer myself, and I make websites,
and ninety percent of the cases I use the ENFOLD theme to make websites for my customers. It’s so intuitive, it’s really beautiful,
it’s really optimized for Google. So let’s take a look at a different example,
you can watch promo video like this. The nice thing about this theme is you can
install all these websites as demo content, and then you can adjust it to your needs,
and wishes. Look at this, for instance this website, I
know a customer, it’s called wecloudit.nl. If I drag it like this. let’s take a look at this website. a logo menu, nice text, you can watch a video. If I take over here, a logo menu, text and
the video. I scroll down, you see something like this,
I scroll down over here, and you see something like this. so you see its really nice what you can do
with this theme. if I take a look at another demo, you see
you can show your blog post, a really nice way for restaurant, is really nice, there
are so many options for this theme. I love this theme, that’s the reason why I
show you how to work with this theme. I think it’s the best theme out there, not
only the front end but also in the back end, I really love this theme. So in order to get this theme you can buy
it over here, at Theme Forest, buy the theme, and go to the checkout. First name will be Ferdy Korpershoek, second
name will be Korpershoek, [email protected], and I got to the next. My username will be ENFOLD2017, and my password
will be this one. I have to say that I am not a robot, I don’t
want to sign up, and I agree, create account and continue. My company name Ferdy Korpershoek, identification
number, and save, and continue. If you don’t have this one price will go up
a little bit. I have one, sixty dollars, and I want to pay
with PayPal. I check out with PayPal, I have to fill in
my details over here, and I say login, Pay now. I need to confirm this before I can download
it, so I go to my email, and here confirm your email to complete your purchase, and
I will do that, confirm your email, and what I can do I can go to download, and I want
to download only the installable WordPress file only. I click over here, if you don’t find this
page then go. For instance if you’re here, and go to ENFOLD
or username to downloads, you click here on download, and click on installable WordPress
file only. Its downloading right now, so what I will
do now I will go back to my website, I’ll remove the email tab, so this tab. I go to appearance, themes, and then I add
a new one, you can find quite some free themes over here, I want to use a premium theme,
the ENFOLD theme, upload the theme, and I choose a file, I go to my downloads, and here
it is. It’s almost 70mb, I open it, and I install
it now, and this can take a minute. If you use chrome you see left at the bottom
how long it’s taking to upload, it’s at forty percent right now so I have to be patient
for a while. So the install is complete, I have to activate
the theme, and when it’s activated I go directly to the ENFOLD tab over here, to the theme
options. Before we go to work on the theme options,
I want to go to appearance, themes, and I want to the theme details of the 2016 theme,
and delete it. So right now we have the newest WordPress
with the newest ENFOLD version, and if I take a look in the new tab, you see this is our
website right now. It’s not looking perfect yet, but the beginning
is here, and now we’re going to configure our website. Before we do that you can download a package
with all the images I will use in my tutorial if you want to follow along with my images. You can also use your own images and logos,
its fine. The choice is up to you, in order to do that
go to wordpressking.com, go tutorials, ENFOLD2017 tutorial, and scroll down, click here at download
the images I use in the tutorial. You can use these images, you can also use
your own if you want something to start with, and click over here. I click here, it’s going to download, and
I go back to our website. One thing I want to do if I go to the front
end you see nothing is found, sorry no posts make sure criteria. When the WordPress started, it was a blog
website, so that’s the reason why the homepage starts with blog post. But we don’t have blog post right now, and instead of showing
the blog post at my first home page, I want to have
a home page without blog post. So in order to do it let’s go to the settings,
over here settings, let’s go to general, and walk through these settings. My side title is Ferdy Korpershoek, I want
to change it to media. The tagline can be ‘you deserve it to be seen’,
you don’t see this anywhere in the website. I scroll down, you can select date formats,
I want to keep it like this, and this one I want to change to this time structure. My week starts on Monday, site language is
English, you can change it over here, and I save it. Then we can go to reading, I don’t do anything
in writing, and there it says front page display your latest posts or static page. In this case I want the static page, the homepage,
the post page is the blog page. If you want to, you can discourage search
engines from indexing the site, but we want to be found in Google so I don’t check this
on. I save the changes, I go to media, and here
it says organize my uploads into month, and year basis folders. I don’t want that, I want them all to be in
one folder, so I uncheck this, is my personal preference. I save the changes, and permalinks we had
already. So now if I refresh the page, you will be
at the homepage, you are here at home. This is our home page, we just created only
without any content. I unpacked all the files I downloaded, here
they are. I will direct them to the desktop, and here
you can see the settings, my logo, about me page, whatever I use. So you can follow along. A lot of pictures are from Nsplash and pixels
and those are free image websites, you can use them without giving credit, so that’s
really nice. And here you have all the things you need
in order to make exactly the same website I’m going to make. So I close this tab, and I go to the back
end, over here to ENFOLD, and here again it says the front page settings, and I think
these settings override the settings over here. So if I would say film is the main page, I
save all the changes, I refresh this page, you see now film is the homepage, but I leave
that as always the same, homepage is my FrontPage, and where do I want to display my blog? Over here. My logo, you can upload a logo. For the best results and header or you can
change the header settings. I upload my logo, and if I click there, I
can select a file. I can also do, I can go to finder, ENFOLD
settings, and I can drag it over here my logo like this, or I go back over here, I can select
the files. So I go over here, and I select the white
logo, and I upload it. I click over here, and I say use image as
logo. You see a small icon over here from Hostgator,
you can replace it with your own, and they have to be square. So the aspect ratio needs to be square one
by one, or fifty by fifty, or hundred by hundred. I upload mine, upload files, select the file,
it says it’s 62 x 62 pixels. I use this one. You can have a page pre-loading icon, you
can choose custom logo, I don’t use it, and my pages load very quickly so no need for
that. A light box is really nice, I leave the check,
I don’t do anything with this and this I leave as it is, I save the changes, and if I refresh
the page you see my logo over here. If I scroll down, you see the menu is sticky,
we’re going to walk through these settings later. So let’s go to the general layouts. We can have a stretch layout like now if I
press command minus minus minus. You see, those lines, they’re stretching through
the whole wide of the website, no matter which size. If I change this, 10, I could say I want box
layout. So I save the changes, and then you’ll see,
if I make smaller, we have a box, and this is the background. If we have done that, then we can go to the
second step, and we could say, I will decide it to be 800 pixels wide. What you’ll see then, you can increase or
decrease the size of your website the white. And then if you change it
to stretch layout again, you’ll still have this size, like this, but your website will
be stretched. I want to continue wise to be something like
11-20, save the changes, refresh. Often I take a look at other websites, for
instance apple.com, it’s over here, control tab, see it’s around the same size, so I
like that. I go back over here, then we have the content
cyber ratio, seventy-three percent. This area, and twenty-seven percent is this
area. I leave it as this, you can change it, and
then I go to general styling, and here we can change the look and feel of our website. So for instance I could say I wanted to be
splash red, I save all the changes, and this is how it looks. You’ve seen not much change, only this thing
is red. If I would say mother and black, you can see
this is how it’s going to look, so I save the changes. I refresh the page, and now all of a sudden
we have a dark page. So totally different, in a few clicks you
can change the look and feel of your website. So you can take a look at a few settings,
and immediately you see the result over here. I choose splash blue, and I save all the changes. I refresh the page, you see our icon over
here, we just uploaded, and it’s looking nice. I see the color is blue over here, and if
I it over this little bit lighter, but I want this color, to be the color of my logo. I have a tool, it’s the color pic eyedropper. If I click over here, hover, and click and
I can copy this color code. If I go to the backend, I scroll down. I can change these colors, and paste it. I copy this whole color codes, and everywhere
the blue appears, I will replace it with the color of the logo. Right here it’s a little bit lighter so I
paste it, and I click on the color, and then here I change the brightness to 255. So it’s a little bit lighter as you see. The same goes over here for this step, and
I paste it, and I change this to 255. The footer is same, there’s no blue color,
and here we can change the font size. I like open sans, default content font size,
I want it to be a little bit bigger, and some people can read better, I change it to 14. Now I can save all the changes, refresh it. Now you see this has a blue color. Now I go to advanced styling, you see there
are some headers over here, recent comments, and archives categories. We can change the cells on the whole page
or individually. How can we do that>we go to the backend to
add font styling. I can select an element over here to customize. I know these are H three titles, so if I want
to change them I go to the headings, H three, and I say by clicking edit elements, and I
can change the style of all the H three titles in the website. So for instance I could say the font color
will be this one, and it needs to be really big, 40, and then I can save all the changes. If I refresh the page you see its way too
big, and also here, but what if I want to change only the titles and the sidebar over
here? Then I can make it smaller of course, something
like 16, and I could say apply to section main content. So I leave this as it is, and I save all changes
so that means that this will not be changed but only over here in the main content. This is still blue, little bit smaller, and
this is grey again. what I can do now, I can go back again select
again element H three, edit elements, and only for the footer and the socket, I can
change this color to red for instance, and I save all the changes, refresh the page,
now here at the right it should be blue, and here its red. In that way you can change a lot of things
in the website without touching the code. And if you want to delete it, you can delete
it over here. I want to leave the size to default, I like
the color so I leave it, and I want to change it everywhere in the website, save all the
changes. We also can adjust the menu, but before I
do it, let’s look I want to implement the many we already made. So I go over here, click on menus close this
tab, and close this tab. here we have our main menu, and it’s not applied yet to our
website. So here at display location I say and ENFOLD
main menu, you know also the footer menu, it won’t have any dropdowns, but the main
menu will have. So I say save menu, open menu tab, now you’ll
see our menu, like this. I scroll down, they are just also looking
really nice, and actually I want to make the font a little bit bigger, and create a nice
hover. So I go to menus, to ENFOLD, to advanced styling,
and I say main menu links. Edit element, default color, can be this colors,
I grab this again, I click over here, and I see this is the codes of my logo, and I
paste it over here like this. It can be a little bit bigger, maybe 22, let’s
see what happens. It’s too big in my opinion, so what I will
do, I will make it smaller, 16, save it. I will go to menus, and change everything
into capitals. I can do it like this, there’s also another
way, but this way is also a possibility. Services, click over here, latest one, contact. Save it, refresh it, I like this, maybe a
little bit smaller. Again I go to ENFOLD, font styling, make it
15, and save it. Now I select the links again, main menu links,
edit elements, now I say apply to mouse hover state. I copy this color, paste it over here, I save
it. Now if we hover, you only see here below a
blue line, if I refresh the page you see it’s also getting blue. I click over here, you will see this blue
line will stay here so you see wherever you are in the website, and that services page. There’s still too much space over here,
so I’m going to decrease it. So go through the settings again now go to
the header settings. Here you see what happens when we change a
few things. I can change the position of the menu, I could
say could say logo must be in the center the menu below, like this, but you can also see
over here what’s happening. So if I change it, I would say the menu needs
to be left, and the logo right. You see immediately what the result will be,
I like it as it is, logo left, menu right. Display of menu items text, or as an icon
like this. You can add a separator like this, between
every link there will be a separator, and we can remove all these lines over here. I’ll leave them as they are. Then you see here, a title, and where you
are in the website. You can change that, you can hide both. If you save it, it will look something like
this. No header anymore with home, and where you
are. I’ll leave it as it is, but you can change
it anywhere you can also change it on individual pages, and blog posts, so I showed them both. Over here the header size right now is slim. I can make it slimmer, custom pixel value,
and then I could say make it something like this, as will appear to be quite large like
this, but I want to make it small. If I go to my logo, and see the height is
62, so I want to change it to 62. Let’s see what happens. It’s not 62, but now it can’t shrink. Let’s make it 82. Now it can shrink. I should make my logo a little bit bigger
then if I go down it looks perfect, and now it doesn’t look perfect. For now I leave it as this, and if I go to
eENFOLD, to header behavior, you can say this header should not be sticky, or should not
be shrinking, and then if you scroll down, the menu stays on top. If you want it to be sticky you can select
over here, and make its shrinking. you can let the logo in the menu adapt to
the left and the right of your website so if I check this, and I refresh the page, and
I press command minus, you’ll see no matter how big the website is, the logo will be at
the left, and the menu at the right. I don’t like that option so I uncheck it,
I go to extra elements, the search icon, I don’t use it, so I can check it off, and we
can have a top bar above the menu. So let’s show social icons, secondary menu,
I don’t have one so I don’t use it, or I could have some extra information at the right,
welcome, my phone number, something like that. Save it, refresh, and now we have top bar. Some social media icons, and welcome and our
phone number. If you scroll down it will still be here,
if I go back to header behavior I can unstick the top bar. So if we refresh the page, the top bar is
over here, and if I scroll down it will be gone. Let’s take a look at social icons over here,
go to extra elements, and click on social profiles, you can also find them over here. We have Twitter, Ferdy Korpershoek, I don’t
use Dribble, I use Facebook, click on the plus to add more, Instagram, you can fill
in your own URL, I’ll leave it as this for now, LinkedIn, what else? Google+, YouTube, maybe one more, my email
address, if we save all changes, and we refresh the page you see looks like this, really nice. If I scroll down, it’s gone. I don’t use it, you can use it, can I go back
to the header settings, the extra elements, and I say no social icons, and no phone number
extra information, in that way top bar will be gone. Let’s continue. Transparency options, this is very interesting. We already uploaded our logo, if you upload
the same logo but that in white over here you almost don’t see it, and you see images
logo, and later in the tutorial I’ll show you what you can do with this, that changes
also to white. You can have a picture over the whole website,
and then your logo will be transparent. It will be white logo with white text over
here, we will take a look at later. Save all changes and go to the sidebar settings. Archive page do we want to have a sidebar? Yes, at the right side. on our blog page I want to have a sidebar,
our single post entries also that means that when somebody’s reading a blog, they can go
to the sidebar and see other posts see, our Facebook profile, or some other stuff. So I like that, but on pages I don’t like
it. So on our homepage for instance, I don’t need
a sidebar. And again if you have the contact page, and
there’s only page you want to have sidebar, you can figure it individually, but for all
the other pages I don’t need sidebar on that page. So I say no sidebar, sidebar our smartphones,
no. page sidebar navigation, yes. That’s ok with me. And again here is the border, so if I say
no border this border will be gone. I would say with border. Save all changes, now if I refresh it, it’s
gone, no more sidebar. the footer, that’s this dark area over here,
we can have widgets over here, which is like the latest news or latest pictures, latest
portfolio, a Facebook like box, an email opt-in, they’re all kinds of things you can get over
here. Right now I don’t use it, we will use it in
this tutorial, and for now I can say only displayed a socket, that’s this thing here
below. Here we have a menu, this I will use later. I will leave it as it is for now, later in
the video we’ll take a look at it, and here we can take a look at it right now. So I go back ends, the copyright area, over
here we can change. So I would say Alt G 2017, Ferdy Korpershoek
Media, and I can go to social icons right below like this. So I have a menu, social icons, and over here
Ferdy Korpershoek Media. Over here it says ENFOLD theme by Chrissy,
I want to remove that. It’s very easy, over here parentheses, no
link, closing, save the changes, and refresh, now it’s gone. I don’t want this menu over here, so I go
over here to menus, and then we can deselect over here, or I go to manage locations. Then we can at every menu select certain menu,
and I don’t want it here, the footer. So I save the changes, go to our homepage,
it’s looking quite clean. As you see the logos, bigger now, what I did. We made the height of this header 82 pixels,
so I created the logo of the height of 82 pixels, with 10 pixels margin above, and below. So the logo itself is 62 pixels high, and
then 10 pixels, and 10 pixels. So now it’s perfectly fitting, if I scroll
down, you see it’s shrinking, so I like it. Now we can continue with the local, it is
fitting, so I go back to the backend, to the eENFOLD settings, and we can go to block layout,
but I’ll show you a better way to use your block layout, so I’ll skip it for now. Social profiles, we had already newsletter,
is for when you have Mail Chimp, I will make a tutorial about this, and here are the Google
Services. If you have a Google Analytics then you can
paste the code over here. I’ll place my Google Analytics tracking
code here, and if you want to follow the tutorial about getting Google Analytics go on our website
and click here. We can use Google Maps you need to adjust
an API key, if you want to do that, click over here, and save the changes, and demo
imports. You can install these demos because we’re
building a website from scratch. You can export your settings, you can upload
your settings, and you can take a look if you have theme update, and I could say ENFOLD2017,
as a username, and then I can go to Theme Forest. Take a look at my API key. Copy it, and I can paste it over here, and
then the theme will be updated automatically. So if we take a look at our website, this
is how it looks like. Logo, nice clean menu, title where we are,
the website, some widgets we have to fill in yet, this is looking clean. I like to work from the right to left, so
let’s start with our contact page. What I want to create on this page is a contact
form, and some information about our business. In order to do that let’s go to edit this
page by clicking over here. Here we
can type some text, and if we update it, and we take a look at the page, you’ll see the
text appearing over here. If you want to have more options over here
then click on this icon, the toolbar toggle, and here you have more options. I can make this text bold, I can give it a
color, and I can even make this a header. If we update it, you’ll see it appearing like
this. Later I’m going to talk more about all the
options over here. For now I want to make use of the advanced
layout editor. That’s the editor of the ENFOLD theme. I love this editor, this is the reason why
I’m such a huge fan of this theme. There are three parts, the first part is the
layout, will be one part or three parts or five, or 2/5th or 3/5th. Then we have the content elements, the text
show the member, a nice table. All kinds of ways to show the information
on your website, and then we have the media elements. Images, galleries, videos, sliders, those
three parts work really nice together. So I start with a one-on-one layout element. What I can do, go to content elements, and
I want to have a text block. I drag it over here, and then here I can type
text again. So if I save it, I update it, and I check
it, you’ll see click here to add your own text. What we are going to do, I go to plugins,
and say add a new plugin. I’m going to install the contact form plug
in. a really nice began that helps you to create
a contact form on your website. So I say contact form 7, press enter, and
here it is, contact form 7. Over 1 million active installs, now I am going
to install now by clicking here, activated. So here you see contact appearing. I click there, and dismiss this, and here
we have our contact form. If I click over here, you see this is our
contact form, you can make this really big, and add more options, and over here I’ll show
you a tutorial where I show you everything I know about the contact form. So I leave it as it is, I go to mail, if somebody
sends you a message, and it will be sent to this address. So right now I can copy this code over here,
I copy it, and I go to contact, edit the page, click over here, and paste this code. Save it, update it, move this one, take a
look, and now where we have our contact form. So if I fill this in, I’ll get an email
in my inbox. And you see we have a one-on-one element,
and it’s spreading over the whole page. If I don’t want to spread this over the whole
page, but only the half, I can decrease it over here like this, update it, refresh. That’s only half the page. For this page, I want to make use of a sidebar
and then I can go over here to lay out after scroll down a little bit
and I want to select a sidebar, right sidebar and I can select default sidebar, I have to
create one for this page, I say update and let’s see what happens or what does not happen. Right now we see the right sidebar, if I change
this back to one on one full white and I update it, you see this is the full white now that’s
great. If I use a color section, it could be different,
color section has more options, you can change the background for instance so if I change
the background to this ugly color maybe you like the color but for this website I don’t
like it and I drag the context form over here and update it, then you see is overriding
the side bar, the side bar comes here below. So maybe you have a contact page or you have
a page and you want to have full wide place and below that you want to have the sidebar
then you use color section. I think I explain a little bit too much in
the last five minutes, maybe I should take a little bit slower but along the video I
will show you again and again how things work. So I drag this outside of the color section,
I’m bringing back to one on one so here we have the contact form and here we have the
widget area, it’s the same area as over here and we can install widgets over here. I will refresh the page, there is the contact
form and here I want to add some information about our company. How do I do that, I go to the back end to
appearance widgets, we have to make a widget area and assign it to the contact page so
I say contact at widget area and here it is. I want to add a simple text widgets to this
area so I could drag it like this or I can click on it, scroll to contact and the widgets. You can have more widgets below each other,
now I have two, one I dragged and one I clicked and I delete one, here’s second one and here
I say 30 or media and then we can create our content and this is not a visual editor but
it’s a code editor. So if I would say line one, line 2, line 3
and I save it, I go to backend of this page and I scroll down and we have the sidebar
at the right and the sidebar I want to choose is contact and I save it and I go back to
view the page, you see line one, line two and line three are all after each other. So I have to add some code, I can do this
with a break like this but I can also do it different way, I’ll show you. So if I save it now, this means break the
rule or line so now every line should be below each other like this. What I want to do, I want to edit the page
and go to the text editor so I click over here, make sure you’re in the visual editor
and then I will add some information that I want to paste in the widget so my address
is this one, I say shift enter for a new rule, also code. Now say enter, that means I will make a new
alinea and I like to say E of email, P of phone number and shift enter over here and
w of website and if I go to the text over here then I see the code. I see no enter yet, I have to make manually
but I can edit some stuff, I want to make this big so I select and say command is B
or click over here and I want to give this a color, again I want to give it the same
color as in the font settings so I go to the font settings, at font styling I copy this
code, go to text color custom, paste it over here, remove this one, say okay sign goes
here, making it bold, click on this color, make it bold, click on this color and here
I want to make link , mail to link. So I click on this icon, insert link, it automatically
see it’s an email address so it says mail to and over here is a make a link. I can click on the link options and open it
in a new tab, so I go to the text and right now you see here the code, I copy this or
I cut it, save it, paste it over here and then here I need to have two times the break
and one time closing off a paragraph, here the opening of the paragraph and if I save
it now and I take a look at the page, you see Fredy Korpershoek media, my address. My address is a little too long and something
is still going wrong over here so let me see, I still have to put a break after the dates,
it’s a little bit hard, I said do before to span twice, save it, refresh it and now it’s
working and I don’t like this, it’s too long so maybe I should just do info and also here
info, save it and now it’s looking like this. If I click here, it opens in a new tab, that’s
what I wanted, so that’s our first widget. You see a few other widgets over here, I don’t
like that so I go to widgets again, I close this and it displayed everywhere, what I want to do is add a Facebook widget and
remove everything else. So a Facebook like box displayed everywhere,
that’s the widget and I could say like us on Facebook, Facebook/wKingcom, save it, refresh
the page and here it is. People can get in contact with us, you see
some information about a company you can see our Facebook. I want to change one more thing, click over
here, press Enter, let’s say, save, update, view the page and what were you see contact,
we are here at home / contact, you can get in contact with us, leave a message. Here’s some information about my company,
a Facebook like box and that’s how the contact page is made. So we go to the blog page and we are going
to create our first blog post. This is a page where we can find an overview
of a blog post but we have no posts yet, so if you want to create your first post, you
can do it over here, click on new posts. I’m going to walk you through the process
of creating a blog post, I’m going to make a blog post about 2016 and I will say 2016
was great year and I want to make use of the advanced layout editor so I click there and
the first thing I want to do, here is a category it’s called uncategorized, I want to create
a new category, I call this one blog, you can see amphle2017.com /2016wasagreatyear. I go to content elements and text block and
I’m going to type some text, I started with this text, I press enter and you see there’s
some space skipping over here because if you press ENTER, you open a new alinea so I will
type my texts over here, a alinea one. Okay I have my first alinea over here, I press
ENTER and by pressing answer I create new Alinea and I type a new title, I press enter
again and I type a new linear. Okay please don’t look at the text, text is
just a dummy text and if I save this and I publish it and I go to our blog page over
here, this is what you will see, ‘2016 was a great year’. Read more, it is December 22nd 2016, 0 comments
in blog Fredy Korpershoek, no picture. I can read more, if I read more this is what
you’ll see, actually there are four alineas, the first one, second one, third one and the
fourth one and I want to style this a little bit more so I go to edit post, I drag this
to left and I click here text in the text block and what I can do, I can select this
and I say make it heading 1. If I do that it will become a header but what
can happen, if I have a title over here for instance I have this text over here and I
stay shift enter, I select this and I want to make this header 1 then everything will
be a Header one because it’s the same linear. So in order to get a new Alinea you need to
press enter and shift enter but if you want to start a new rule then press shift enter
until still be the same a alinea that you have in your line. So also this one I can make it header one,
header one titles are found better in google so if there’s a certain word you want to be
finding in google or them that you can use it in the title. Now if I save this, it will look like this
is, if the title is too big then you could go to the back end of the website in a new
tab, go to enfold, that’s font styling, go to header one, edit the element and change
it to let’s say 16 pixels, save it. Now if I refresh it, yes and I want them blue again, it’s up to you what
you would do it, I make a blue, save it, refresh it so it looks like this. I go to the post again and maybe I want to
highlight a word so for instance ‘business films’, I can select it, click on the bold
icon, give it a certain color and just copy it, I can select website, make it
a link and if I click on link options, I can search for a different page. For instance a web design, I can let open
a new tab or in the same window and if I save it, update it and check it, you’ll see the
link color will be blue automatically. If I click on it, I go to the page web design,
maybe I want the second alinea to, here a difference I go back to the post, I click
here and I could select the whole alinea and say this Alinea I want to align right like
this and will be aligned to the right. I can make a quote, most important thing is
that we do what makes us happy, new alinea I can select this, make it a quote, I save
it, update it, let’s take a look, it looks like this. So there are quite a few things you can do
over here but we also can do, I’ll bring in back, the left, I got this phrase, this
quote, I save it and maybe I want to have a quote, then I go over here and I search
for special heading, I click on it, now I can have a nice quotes. I past the text, make it a Header one and
I wanted to be in the center and now I can change the size so I wanted to be quite big,
you can change the color so for instance make it red and let’s see what happens. Now it’s looking like this, I can click on
it again, make it a bit smaller, I change the color the blue color or else do something
else. I go to layout elements and if I want to scroll
down and still see all the elements, I can click over here, this is what I like about
the FL theme and now it’s on the whole page. So if I scroll down, it will still be with
us so I can say I can drag this over here and this over here and this over here. I go to content elements and I go for animated
numbers so I scroll down and drag it over here and I click over here, the number can
be in my case 27 and here I can say video or film projects. We can add an icon, this one and the size
of the number can be quite big, I think 60, description maybe 25 and we can add a link
to a page, for instance the film page, open it new window, no. Let’s update it and let’s see what happens
and this is view count, the amount of film projects of the last year. I would like to change the color so I scroll
down again, click over here, go to colors and make a custom color and again this one,
save it, just to illustrate. Now I can delete those two areas and I can
replicate this and here I say 14 websites, different icons. Let’s see and again 42 photography projects,
I select this one and of course we have to change the link into photography, now here
to web design so there’s more than only styling text if you want to and in a blog post you
also can make something like this. What I can do also here in the text, I can
insert a photo, if I place my mouse over here I can add media, select files, go to blog,
honeymoon and I search for a photo of me and Anna. I could go for this one, open it, insert it
into the post, now here comes this photo into the post and what I can do, I can align it
to the right so it will be aligned like this and if I save it and update it, it looks like
this, quite nice. We can do much more with that, I click here
again, I click on the photo, I can align it to the left or in the middle somewhere, I
bringing back to the right and now I click on this icon to edit it and I want to edit
the original, maybe I want to drop over here like this, I can crop it over here, I can
save it, now I can update it and now you see it’s better. So this is what you can with adding photos,
you can add photo, a different one over here, the second linear, that image, find a photo
and later I will show you how to optimize for google, for now I just import it here
at the left. You can link it to a file or through URL,
change the size, I wanted to be medium, insert it, is what we over here, save it, update
it, let’s see what happens. So I’ve shown you how to create a text with
the alineas, how to edit the text colors, how to add links, how to add images, how to
add different elements. I don’t like this but it was just to illustrate
what is possible. So if I want to have more space over here,
I can go to separators over here, click on this icon to edit it, let’s say custom separator,
no border, I just want to have a margin of 30 pixels, no icon and that’s also 30 pixels
in the bottom, now you see has more space over here. Well there was one blog post, I will show
you some more that was to illustrate what can happen but a very important thing, if
I go to edit post again, I close this over here and I scroll down here at the right,
I see the featured image. Right now if I go to blog, close this one,
I see no picture, I want to have a featured image so I select it over here and then I
go for this photo, set featured image and I don’t want this picture to display at the
single post so I click on this so it won’t be displayed above the post, I update it,
I refresh the page, now you see it over here. What I’m still missing is a small text,
so I grip this text over here, this one I bring back like this and select this text,
I copy it, save it over here, then I go to screen options and I check excerpt and then
I have to scroll down and here I can paste text that I want to be shown over here. So if I save this, you’ll see the text of
the first alinea like this, if I read more and see the whole blog post. What I want to do now, I want to add a widget
over here, so I go to edit post, to appearance widgets and here’s a cyber blog, I want to
go to in fault latest news, I drag it over here recent blog posts and show five of all
categories, save it, refresh it, what you’ll see now is the recent blog posts, 2016 was
great year, the date, the time and the image so that’s how you can make a blog post. I will show you some more, I go back to blog
over here, create a few more blog post and then I will show you how you can edit the
look of few of your blog posts. So I’ll edit any one, click on posts and
I want to make a blog post about Montana Lisianthus, the Netherlands. Again I choose for the advanced layout editor,
one on one post and go for a text block and I start typing, I save it, I want to add a
featured image, upload it, I select the file, you can find it in fall 2015, blog Montana,
you click here, I open it and this image I optimized for google, how do I do that. I’ve optimized by the title Montana Lisianthus
Netherlands and I remove all the dashes and I copy this title and paste it in the old
text, that’s how you optimize for google and then set this featured image and don’t display
this image on a single post. I posted in blog and I can make a subcategory,
for instance film projects and I can select the parent category which is blog and I say
add in your category, I publish it and if I go to the blog, you’ll see two blog posts
like this and also here. No read more text so again I copy this text,
go to the excerpt, paste it but I want to do more with it. If I go to this post Montana Lisianthus, you
see here at the right, the sidebar but I want to do something different, first I want to
add a video, you can go to the file, desktop, portfolio, films, Montana, click over here,
there you can find vimeo link. I go to edit the post, I go to media elements
and I want to drag video here below, I click on it and I paste the vimeo link, save it,
update it, view the post and here it is the video. It’s automatically adjusting to the size of
the blog post and what I want to do with it now, area of the sidebar but I want to work
with a color section so I drag it here above and what I do now, I can go to the color section,
I can select background image here at the section backgrounds, insert an image. I will use this image I have already, the
size will be full-size, insert it and let’s see what happens, so let’s take a look over
here. You see there’s image over the full white
of the website below, the blog post will start the recent blog post. This is so low because it has no height adjusted
to it because I did not configure any height so I go back to edit post, go to settings
here and select a custom height, for instance 800 pixels, save it, update it, let’s see
what happens. Now we see this and below video starts, you
see the picture is not fully white so let’s see what happens there because I just need
a larger image and we can make it parallax backgrounds, we can align the background image
position that comes in really handy when you open this on the iPhone, you can select on
which place in the picture doesn’t need to be focused, I think in the center and top
so I say top-center background , stretch to fit, you know what, scale to fit so it will
maintain aspect ratio and save it and update it and that’s why you can configure the color
section background and now you’ll see that is looking quite nice. What else can we do, I want to make it a little
less high so let’s say 500 pixels, save it and now in this color section we can add elements,
all the same elements we have so for instance a special heading, I drag it over here and
then I can copy this title over here and paste it here. I create a header one, the heading style will
be in the center and then I can change the size to 30, text will be heading text, save
it, update it and let’s see what happens. I don’t like the color so I can change it
to something else, you see the white is not completely anymore. Let’s see if I can do with that but first
I want to remove this bar over here, so I go to edit post and scroll down and here at
the right, layout, I see title bar settings default and I want to hide both, update it
and refresh. Now you see title will be gone and when we
picture it with title, it’s a parallax background and here the blogpost starts. So that’s a way to play around with a blog
post, how you can do that. Let’s see we can change some more things about
background image, scale to fit, maybe stretch to fit and see what happens, yes that is what
I wanted. Only one more thing I want to change this
of course, the picture is quite light so I can make the color maybe the dark color, maybe
something like 444444, save it like this, Montana Lisianthus the Netherlands, this title
for the blog post, here’s the video. What else can we do, we can play a video over
here so I go to edit post, click here, we have link of the video, copy it, go to color
section, section background, remove the image and go over background video, I paste it,
I save it, I update it and I refresh it. Now we’ll see the video is starting itself
without sounds but it’s a nice way to show your blog post title, so that shows you a
little bit about all the possibilities there are, I really love this thing, I hope you
do too and well we are working on this, let me show you one more thing, I go to edit the
post, scroll down and I want to give this header some transparency. So I would say transparent and the glassy
Header, let’s refresh this and what see now is that this is the header, you see it’s transparent,
logo is and if I scroll down and it becomes visible again. That’s really nice, at this moment we sea
white logo and that is what we need in the beginning of the video, if I go to the back
ends to the enfold options, to the Header and over here to transparency options. Here I uploaded exactly the same logo as my
normal logo but now with white colors. You can also change the color to black, I
could change this to a black logo, upload files, select files, logo and save it so if
I would refresh it, what I will do then everything is black like this and when I scroll down,
it becomes normal. So quite some information about how you can
adjust blog post and the layout of it, I hope you liked it, if you free to be creative with
it in your own way. I want to show you one more thing, as you
see right now I don’t see logo, now I see in the menu when we have a white background
like now, there you don’t see the text so what I want to do, I want to make this a little
bit more or less transparent. How can do that, go to WPKing.com or WordPressking.com,
go to tutorials, enfold 2017 and scroll down and copy this code over here and copy it,
then I go to enfold over here to settings and I go to general styling, I scroll down
and there you have a quick CSS area, here you can add some quick CSS and if you paste
it over here, what you see in this CSS is the top Header transparency of this page,
every page has transparency like this. The background color needs to be 000 that
means black and the transparency 0.6 so if I save this, let’s see what happens. Right now it will look like this. So even though there’s a white background,
you still see the menu, we can play around with this so if I say point one that looks
like this. It’s very light, if I say 0.9, it’s almost
one hundred percent black without any background transparency so you can play around with that. I like 0.6 or maybe 0.4 like this, you still
see the video and you see the menu no matter what background there is. So I’m going to add a few blog posts, now
fast-forward and we’ll take a look at the blog page, here I want to show you how I add
photos to my website, there are a lot of ways, I will show you other ways but this is my
way how I do it. I create a text over here about our honeymoon
in this blog post and then I place all images like this and copy to the excerpt and then
I go back here. How I do it, I press enter, new Alinea, add
media, I upload the files, select the files, I go to blog, honeymoon and I select first
one, hold shift, select the latest, one of them I already uploaded, this one I don’t
upload and I open them. So here they are, they’re all selected, I
scroll down and I say alignment center, no link maybe to the media file in size medium,
I wonder if it’s for all now and we see no. So deselect them, I select the first one,
scroll down, as I center a link to media file and I want to have the full size, there it
is, I press shift enter and now with the same settings I can select the rest so probably
it will all be in the center now linked to the media file and then full-sized. I insert them into the post and here they
come, I remove this everywhere, it’s an amazing photographer in South Africa Cape town, I
save it, I publish it and if I take a look, these are texts and these are all the photos,
if I click on them I can go to the right and to the left and see all the pictures, so that’s
how I do it. Now we have five blog posts so if I click
here or refresh, you see we have five different blog posts. Also here it looks really nice but the day
we got engaged is almost the same day we went on a honeymoon, both December that 22nd of
2016. What we can do, we can click on we are engaged
and I know it was the 26th of October 2014 so I go over here to published and I click
on edit, I select October 22nd of 2014 and blog was written probably at six o’clock so
I say okay, I update it and in that way you change the published time of your post. So if I go to view the post, now it says we
are engaged October 22nd 2014 at six o’clock in the evening. We can do it to all our blog posts so I just
do that and if I refresh, you see 2016, 2015, 2014 so now they’re in nice order. If I want to publish this the first of January
2017 then I click on the post, I edit the post and I say edit and I select January the
first 2017 at 000. Ok schedule it says now, so if I go to the
website to blog, I don’t see it over here but if I go to the backend to posts, I see
scheduled so it will be there. I’ll bring it back to write this moment
so I click on edit and its 22nd, you know what, make it 21st 2016 at eight o’clock in
the morning, publish. Now it’s back align, that’s how you can do
that and if you want to adjust the categories, click on categories over here and then you
can adjust things over here and if I go to widgets, I want to select categories over
here in the blog page, I can display everything, I save it, I go to the blog page. What you’ll see when you make categories especially
when you have a lot of blog posts, you can select the category film projects and you
see all the blog post with film projects. Well it’s the only one but if you click on
private, you see all the blogs that are private, we’re engaged, we’re on honeymoon and if I
say 2016 was a great year, that blog posts actually is also a private blog post and I
can check private, update it, view post and if I click on private, now you see there are
three posts also 2016 was a great year. How to change the look of view of our blog
page, you can do that by going to enfold and go to the blog layout and here you can change
a few things, let me check block styling elegant, refresh the page, you see a different look
and feel now. So here are the categories, the title, you
click on the title you go to the blog post, the excerpt, the remote text and the date,
how many comments and the author and the image of course. If I go to the blog layout, I can select grid
layout, save all changes, refresh. Now see it looks like this, you see everything
in grids form or go for a big preview pic, refresh, I like this a lot but you can also
take it to the next level, we are going to do it of course. I say you see font layout editor to build
your own blog layout, that’s what we want to do. So I save all changes, I go to blog, refresh,
see if something happens and now see nothing, I’m going to edit the page and says you’re
currently editing the page that shows your latest post I say it’s fonts layout editor
and I go for a color section and I go to media elements and I go for a featured image slider,
I go to layout, I say I want to have a right sidebar with a cyber blog, I updated, close
this and let’s see what happens, this is what I wanted, 2016 was a great year, you can click
on it and then I go to the blog post, go to the right and I can see a three latest blog
posts. Let’s adjust it a little bit more, I click
on it, you can select the category, you can select how many numbers you wanted to have
over here, I want to have only one, I want to show the title and read more button and
that’s okay, I go to content elements and I go for blog posts and direct them below
so outside of the color section so it will appear over here and click on it, display
blog post of all the categories, single author big preview except with read more link and
this is ok. Post number I want to have one, you know what,
make it two and here I say do not allow duplicate posts so first post over here will not be
also here, no pagination, always display element, save it and let’s do one more blog post. Below click on it, display blog post, grid
layout, when in title excerpt and read more link and two columns and post numbers, all
of them and again do not allow duplicates, recognition yes, save it, update it and now
we have really nice blog post, it will featured blog the latest one, you can click on it with
two more and then the other two blog posts. I want change this this to one so I do that,
post number one, refresh and now we have one blog posts over here and then a few over here,
wellness change featured image slider you can of course figured as you wish, I will
say I want to have 3 over here and the rest I want to have below in grid view. So here I can navigate, read more and here
you can read this and again I can still go to the enfold settings, to the blog layout
and blog styling, make it default so I refresh this, now it looks like this, it’s up to you
what you want to do. I remove the category widgets I don’t use
it, go to widgets, blog and remove this, so that’s how it works. If I scroll down, I see four widget areas
over here and I want to change them so I go to the widget area again and here we have
footer column 123 and 4 and I want to have only three columns so I go to enfold over
here, go to footer, footer columns I want it to be three, save it. I go to appearance, widgets, and I go to footer
column 1, I want to tell something about my company so I’m searching for the text widgets,
I click on it and I want to edit into footer column one at the widgets, I say Ferdy Korpershoek
Media, so I save it, let’s see what happens, here is our first place and as we had before
at the contact page, we have to make our own breaks so I go back, let’s say break and another
break so we will have two alineas like this. The second one, I want to have a Facebook
like box in column 2 and I say WP King, save it and the third one again is enfold latest
news footer column 3, how many post 5, all categories, only show the title and now if
we take a look at the blog post footer, we see Fredy Korpershoek media W King like box
and our latest blog posts. Also here at contact you see them, you see
them everywhere. If you don’t want to seem on certain page
and go to edit page, you can go to the footer settings and say I only want to see the socket
or only the widgets, I want to see it everywhere so I leave it as it is. One more thing, I see that quality is not
that great over here so I edit the page, scroll down, go to the featured image slider, I scroll
down, I go to preview image size and I want to choose a preview image size manually and
you see the quality is very low so I go for extra-large, I save it, update it, view the
page and now the quality is better and now let’s go to the portfolio page. On this page we are going to showcase the
things we are making or offering or have done for clients and in my case, I make photos,
videos, websites. So I’m going to showcase that and this is
the portfolio page so let’s create our first portfolio item, in order to do that click
on new and click on portfolio entry. My first entry is a wedding of Daniel and
Elia, I changed the names just for privacy and but they’re still a really nice couple
so I say wedding Daniel and you know what, let’s make like this Elia. At fonts layout editor and you know, what
one-on-one and content elements and I will use the text block, I click here and I can
write a text but I’m not blogging so for now I will add the media, how will I do that,
I go to add media, upload files, select files and I go to enfold portfolio, photography,
Daniel Elia and I will click on first one, Alt shift and select more and open them. As soon as they’re uploaded, I’ll optimize
them for google and as you see, I already optimized them by giving all kinds of names. It’s very important, if I search for photography,
places where I live and I go to images, this is mine, this is mine, this is mine. So you see, if I take a look over here I click
on it, I want to watch the image and it says ‘inside of the city of Maassluis’ so you see
the title is very important for google in order to place your image higher in the rankings. Also here Maassluis, so you can rank really
nice if you upload nice titles in your images so I will remove the dashes and paste it in
all text, same goes over here and I insert them into the post, you can take well because
they are quite a few images and here they are. I save it for now, I go to featured image
and choose a nice image, I like this one, it was a wedding of two couples, two sisters
marrying on the same day and I select this as my featured image. Also at portfolio, we can have categories
so I will add one, it’s called photography. Add a new category and now I publish it and
I changed the date to August 26th of 2016. Now I want to check my portfolio so I go to
portfolio and you see nothing, why? Because we have to make a portfolio page of
this page, so I say edit this page, that’s fonts layout editor, no element, I go to content
elements and I go for masonry, I click on it, I select portfolio entries, all the categories,
yes display sort options, show 12 of them that’s enough and I’ll leave it as automatic
based on screen light, display navigation I want to have a lot more button. Order by date, descending, this will take
a look into later, I don’t want to have an overlay that means that the picture is little
bit darker and as you hover over it and it becomes new color, deactivate it and I say
save, update. Before we edit this footer, we’re going to
add some more portfolios entries. So right now we have this one, I like it and
the reason if I make it smaller, the reason that it’s totally to the left is because I
did not put an element around it so no one by one, no color section, I just directed
over here and when you do that and it goes outside of the borders of your website which
can be very nice, I like it the way it is. Otherwise if somebody has a big screen and
this is the area you can see the pictures and now the area is bigger so the pictures
can be bigger so I like it the way it is. I’m going to show you how to add another
portfolio entry but now showed a pictures in different way and I really like this way. Add new, this is a newborn shoot, it is still
photography, it is made in 2014 5th of June, so okay that’s fonts layout editor, one by
one. Now I go for media elements and I go for a
masonry gallery, I click on it and I can get the pictures, I will go to upload files, select
the files, photography, newborn shoot, select them all, Commands A, ctrl+A and again I will
optimize the pictures. I add them all to the gallery and here I can
drag them so I can change it like I want to and this one close-up, that’s 40, featured
image, here I can show how many numbers, how many columns. For now I save it, I go to set featured image
and that’s the close up over here and I publish it, I refresh the page and here it is, I click
on it. Now you see, pictures are like this, if I
click on it, I can go to the right and to the left, navigate through them but actually
I want to change this. As you see there is light glow over the picture
unless I hover over it so I’m going to edit some settings and now you can see what you
can do it is and it’s really nice. I go to edit portfolio entry, first I want
to remove the sidebar, no sidebar for this, I click over here, now let’s dive into it
a little bit more. I want to have three columns, display pagination,
now load more. I want to have a load more button and here
it says it’s a flexible masonry, all the images are the same white they are displayed, at
original height and white ratio. It’s fine, I don’t want to have a large gap,
I want to have one pixel gap. No overlay that’s the light thing, over the
photo I want to deactivate it and I want to have a lightbox and something else, you see
the title over here I don’t need it, so I would say that the element captions, no title,
display neither of them, that’s few portfolio entry and now we see like this and this is
what I like about enfold, it looks so clean I really like it. Especially when you have more pictures, looks
really nice, let me see if I can find it FredeKorphsk.com, my own website it’s looking like the tutorial
I’m making and I go to photography or the portfolio, photography, event photography
and here I have a lot of pictures more happens, people can navigate through them really quickly
and then this is a picture and they’re like hey that was my picture. After that I just go to the right and to the
left but the errors on the keywords, really nice way if they’re too much, I just say go
to the next page and over here I show 400 images in a really nice way. Again you see the animation is nice it’s working
perfectly in my opinion. The best gallery I have seen my life so close
this, so what I like about is WordPress website, there now it’s really clean, the pictures
are clean, there’s one pixel gap. If you hover over it, it zooms in a little
bit, if you click on it, you can go to the right, to the left, you can navigate very
easily. If I scroll down, my logos are nice here,
everything is really nice, that’s what I like about his website I hope you liked it too. Ok next thing, I will add few more portfolio
entries, add new so I’ve now five portfolio entries, I go to portfolio and there they
are, it’s looking quite nice. Now I’m going to add films so I click on
new portfolio entry and again there’s Montana Lisianthus, go to the advanced layout editor,
one-on-one, I go to media and add a video, I click on it, I insert the link, we have
it already on the website so I go to blog, Montana, edit post, we have the link over
here, place it over here and I add a new category, it’s called films, add new category, scroll
down, Set future image, we already have it over here and this was in 2014, ok, publish
and by the way this page you can also set it up like we did in the blogpost of Montana
so you can also make it like this. Actually a page or blog post and portfolio
item have all the same possibilities, add a new one and there we have the wedding film
of Ruth and Mariska. I go to the advanced layout editor, one-on-one,
content, elements, media over here. Normally my wife makes every nice blog post
about it, I’m not such a writer so in this case you can type it over here but for now
I’ll leave just to illustrate how to insert a video, I’ve the video link over here, I
copy it but for this there’s something slightly different because this is anamorphic video
so if I go to the format over here, it’s not 16×90, go to custom and the custom ratio for
anamorphic is 7×3, I save it films publish and of course it was published before, this
was not long ago, November 6th, update. Now if you take a look over here you’ll see
it’s anamorphic, really nice, you see here like us on Facebook so people see it, they’re
happy, I think I’m going to like them because then I can see more videos like this, this
is how it should work. Next one new portfolio entry, I’m going
to fast-forward through this and over here, she’s called Sarah Banamita but in a title
it will be a little bit too long but in the permalink, I can change it say Sarah Banamita
Bride, so I update it and if I take look, now you see in the title it’s Sarah Bermbrite
but here it’s Sarah banamita Bermbrite so for google this is very interesting. Next one, so let’s take a look at our portfolio,
it’s getting bigger and bigger and this is how it looks like so far. Ok one more few websites, I’m going to show
first one and then I’m going to fast forward again, it’s a little bit same and so solice,
fonts one on one image, I scroll down I’m going to upload all the images at once, upload
files, portfolio, web design, open them and I will use this website, set the featured
image, same goes over here, insert image, this one but here I want to have the link
so I want have a manual link, it’s Strawman leavings second slice this touch, why the
long URL that they wanted it, open a new tab in the window, add the new category, web design,
add it, this was also 2014, publish. What I can do now, I can click on templates,
save entry as template I say were design, save it, web design and publish it as this
in a capital and update and if I click on new, I go advanced, layout editor, go to templates,
web design, now the photos are loaded I click on it, I change it to J.Lee cosmetics, J.Lee
.com, saved image here below, I load it and in this way I can work a little bit faster. I go to the homepage and I go to portfolio
and here we see it, I think it’s a little bit too massive so I edit the page and I bring
this all into a one on one element like this, like that and I change the columns to 4, four
columns and let’s see, portfolio entry yes, films, photography and web designers select
them all three, yes display sort options. I want to show all, order by date, descending
order also ok. On picture gap an overlay deactivated and
here I’ll show you something in a minutes, I will update it and let’s see what happens,
now it’s looking like this. I don’t like the text over here so go to masonry
element captions, title, only title and display on mouse hover, refresh and when you hover
over it, you will see the title but you also see this one is white, this one is square
also white. I want to make them all square, how can I
do that, I scroll down, I go to these options, flexible masonry, all entries get the same
white but the image of its entry are display their original height and white. We choose this, it will look like this the
white is always the same and the height is different per picture as you see. Different option perfect grid so all the pictures
also this standing one will be exactly the same like this and in this case I would say,
let’s change it to three columns so you can see the pictures better. I like this optional, you see it’s still in
the image or you can say masonry perfect automatic, that is what we had or perfect manual masonry
and now we can decide by ourselves which pictures will be standing and which pictures to be,
clicking here in the new tab and I added the portfolio entry and I say landscape, add,
update, refresh and now you see this is wider so I could click over here and if I edit portfolio
entry and I go to text, I could say portray and if I add this, that means that this will
be standing from now on as this will be a long picture. So now it’s long and that’s why you can change
everything how you want it and you take a look at the FerdyKorpershoek.com, it’s my
website, I go to portfolio, you see all the videos are wide and this is how I do it. For instance there’s a long picture, in that
way you can display everything really nice I like it so that’s our portfolio. What I like also, if I click on films, I only
will see films. if I click on photography I only will see
photography, if I click on design I only will see web design and that’s a beautiful way
to display our portfolio but we also can do now, we have over here three widgets, I can
go to the back ends to enfold to the footer settings, change it to four, save changes,
go to widgets and let’s see. Latest news, I drag it to the fourth column
and in the third column I want to have enfold latest portfolio widget, column three add
widget, how many, 5 latest projects and all the categories. Show only title, save it, refresh the page,
that’s how easy this. I want to give this also a title so I go to
the widgets again, close this and I say latest blog posts, save it, refresh it and since
we have three titles, I want to have a fourth, it’s Facebook column, let’s say like us on
Facebook, four titles, maybe change this and then we finished here. Our company so it’s one line instead of two
lines, maybe no I finished over here so this is how it looks like, I really like it, really
clean and let’s go to the next page, the service aspect. For me it’s more important that you learn
a few things, well I edit this page then that I create a perfect page which is website of
my company. So I’m going to show you a few new things
with the advanced layout editor, I added the page, I close this and of course we go to
advanced layout editor, I start with a color section, content elements and special heading,
on to write a text over here, I don’t know if this English is correct, centered and that’s
will probably be long sentence so let’s see how it’s looking. Ok its ok, I think we make it bigger, so here
I can say make it 35, update, right. What we can do since we have a color section,
I click over here at the color section settings, I go to the backgrounds, I insert an image,
upload file and I go to home, portrayed a solice, I open it full-size, insert it and
I save it and I want my text to be white so I go to content, special heading colors, I
want to have a custom color which is white, I save it, update it and refresh the page. Now it’s look like this, the text is readable,
it’s a white text on the dark backgrounds but I want to see their face so I will go
to the color section, I will change the height to 700 pixels and a go to section background
and I say, make it a parallax background, update, refresh. Now you see better and this is what I like
but now you see because there’s a white text over a light area in the photo, we can do
something else, we can edit page, go to the color section settings, go to the section
background overlay and now we can make an overlay color so for instance I say black
and opacity is 1.0 and probably will have a black background like this. So I put it on 0.7 or 0.6, let’s see what
happens, you still see her but now you can also read texts. I’m going to get rid of the services so
I go over here to the right, title bar I say height both and I want to give this a transparent
glassy header, refresh, now it look like this, services we love what we do, we make photos,
films bla bla and what else can we do. I want to change the height to 400 pixels
so I go to color section settings, the minimum height is 400 to custom height, save it, refresh
it like this, I like it. The next thing is going to be a one on one,
I can click over here and self-dragging it will appear down below so if I click again
on one-third, you’ll see that it appears over here and I want to open this again to have
the whole view and here after 101, I cannot put a one-third in a one-on-one but what I
can do, if I get in color section I can do it so I’m going to create three sections
of videography, photography and web design and start with photography, I go for a special
heading and let’s say photography, add three in the middle and I’m going to create a text
block, I drag it below, simple text, I save it and now I go to media elements and I want
to add a easy slider like this. I open it and I want to add some photos, I
set this to no scaling and these images, it will be the best if they’re all the same at
a white. So I’m going to try it let’s see, I grab
this one and grab a few photos, I crop the same, we’ll see. I insert them into the image, I can change
the order, no scaling, the slideshow transition will be a fade, auto rotation yes, every three
seconds, save it and update it and you see photography, we love photography and here
is the first image, second, third and fourth. It’s not satisfying yet so I duplicate this,
I close this closes this and then I go for content elements and I go for an item box,
over here I click on it and I want to display an icon above the title and as icon will be
photography icon, scroll down and text is still photography, , save it, I drag this
text, copy it, click on the icon and paste the text over here, I save it, refresh it
and in my opinion this looks a little bit better. So this one I remove like this and this one
I will use, I’m going to duplicate it twice and here is web design also would be the same
IDS photography, web design and I will create a text over here. I scroll up and I change the icon to this
one, save it and I change over here the easy slider images, I remove those and of course
I add these images, click on this one alt shift, click on the first one and insert them
into the image, save it, update, refresh. I don’t like that they doesn’t show up at
the same time maybe if I remove this one it will happen so I click on this icon box, I
search for this video option, I say films and make a text over here, save it. I click on the easy slider, I remove all the
images and I want to add a single image or a video, I click on it, I go to a video link,
copied the link, I change the image slide to a video slide, I can apply video or I choose
this one. I can have a fallback image if the video doesn’t
start, I can choose an image, it’s about Montana so I could choose this picture, video aspect
ratio is 16×19, hide video controls, I can mute the video player, I can loop the video
and I can make it auto play. I can apply a link or add some text to the
video but I don’t want it, I save it, I updated it and let’s take a look. You see the pictures are changing automatically
and here the video starting, it’s not exactly the same height as this over here so what
I prefer to use is 16 x 90 aspect ratio, that’s a video image, this is already and this is
not and what I can do, I go to the back end, we have again a color section, I can edit
the settings, I go to backgrounds and I say insert image, I upload a file, I go to web
design, grab this as a background. Here I already made a difference overlay color
in Photoshop, you can do it also in website so I did not have to do this, I insert it
and make it fixed, update, refresh the page. Now you see, the background is stuck, I really
liked it so if you scroll, the background will be still at the same place and in order
to make it perfect, I’m going to change it also so I removed those images, go to add
some images, upload files, select files, go to enfold, to home, photography and I upload
those, four pictures and we can insert them into slider, update. Now we have a really nice overview of the
services we offer, as you see all the same height, wide so really nice. I’m going to tell something about photography
so I go back again to a color section, from now I will use the color section every time
I click on it once. Now I just create it over here and I want
to have one-third at the left and two thirds at the right, I get a special heading, I drag
it over here, I drag it below to the one-third and say photography, each one default style
and then want to have the text block, I drag it over here. So I have text over here, I make a new Alinea,
save it and I call this ‘wedding photography’ and here at the right we did it already but
we’re going to do it again. I want to have a masonry gallery so I go to
media elements, masonry gallery, I’m going to add some photos and I grab all the wedding
photos I have so let me see, those over here add them to the gallery, you can change the
order and insert them into the gallery again, all images, automatic based on screen wide,
flexible masonry, you can do whatever you want to. I choose one pixel gap, no overlay and I want
to have a lightbox and here we have it. I don’t like this so I will change the few
other things, you know what I will choose for three columns and I go to element captions
and then I don’t want to have a title and no excerpt so save it, update it, refresh
it and it looks like this. If you click, here you can navigate to it,
really nice. What I will do now? In order to save time, I will copy this color
section of wedding photography, I click here, now we have another one, I drag this to third
section to the left like this and here I say films, save it, you can have text about films. What I will do now, I will change the background
color to this color, save it. Then I go to films, I click on it, I click
on colors and I want to change the colors to white because we have a blue backgrounds,
I want to have different texts, same goes for here, I click over here at the text block,
go to colors, I change these colors to white like this, save it, update, refresh and here
it is. Again those images, maybe I want to show a
portfolio area over here so I click over here and I remove this masonry gallery but I go
to content elements, I go for masonry. I click here and I select portfolio entries
and films, no sort display options, maximum of 12, 2 columns, no pagination, based on
the date descending order, one picture gap, no overlay, save it, update it and refresh
the page and then it looks like this. I don’t like it so again I change it, no title
and captions or excerpts and I want to have a perfect grid like this so they will all
behave like this. Much better in my opinion, you click on it
and then you go video or to the link. Again I click here, I scroll down and I copy
wedding photography, the whole color section and I press minus minus minus a few times
and then I want to drag this below the films, do more time minus minus minus, drag it like
this or drag this one below those two. Now you see I press command zero again, you
can change this really easily to web design, save it, in this moment I delete this one,
I duplicate this masonry because I have all the right settings, then I press command minus
minus minus minus again, I drag it over here, press command ‘-‘ and now just change this
to web design and we are good to go, update, refresh, films and web design, you can change
it to three columns, it’s way better, three columns and also hear three columns, save
it. What I want to do know? One more blue area so that’s the film area
I’m going to duplicate it, command minus and there you see films, I drag this one above
it and I remove this stuff 10 by the way and I go for a text block, I go to the back side
to contact, copy this code and paste it over here, then I go to colors, they have to be
white, save it, update. Let’s take a look at services like this and
what we can do now, it’s really interesting. I’m going to add a few buttons so over here,
I see a button, I say more information and I want to set the link manually to pound sign
and then I say the photography and I don’t want to have icon, no icon, Let’s see how
it looks, refresh and I like it the way it is. If I click here you see nothing happens, why
is that? We have to make anchor link over here so I
copy this here, I go to edit the page and because we work with color sections, a color
section can have an anchor link so I click on the settings of photography, wedding photography
and here at the for developers section ID, we can add this over here photography, update,
refresh and if we click here, I scroll automatically down to wedding photography so that’s a really
nice way to navigate through the website. So I will duplicate this and again and here
I say, it should be films and here I say it should be web design, I duplicate it again
over here and I drag it over here and I stay over here contact and here I make it contact
and duplicate it again, command minus. I drag it over here and below I duplicate
it again and I drag it here below and again command zero. I go to layout elements because then have
more space, wedding photography we have an anchor link, films we do not have an anchor
link over here yet so I say films and web design, we say web design, save it and then
here of course we say contact, save it and this is our service page, refresh the page,
careful not to have already anchor link over here so I go to services. We have a nice text with the background, its
parallax, we have three services photography films and web design with some images or video. If I click on more information, I go to wedding
photography, if I click here I go to films and if I click here I go to web design. When somebody sees this pictures, they could
think wow I want to have contact with those people for my own wedding and click on contact
and you go to the contact form also here and the other one. So that’s what you can do with the amphle
theme, don’t you love it, I hope you love it. Maybe this is a good time if you still watching
and you like this video, please give it a thumbs up, it will help me a lot and I really
hope you like this theme as much as I do and what we are going to do now? I go to edit page, close this and I make template
of this and I call this ‘services’ and I save it, I update it and I have to say I’m quite
happy with what we have made over here. Let’s go through the last page the homepage,
I remove this one, I close it and now I say edit the front page and they always open in
a new tab so I close this one and we go to advanced layout editor, I go to templates
and I click on services and I update it and take a look and this is our home page right
now. With a few clicks we have exactly in the same
page, of course we don’t want to have exactly in the same page but I want to use this also
on my front page so it saves us quite some time. What we will do over here, I will go to the
settings, title bar settings I don’t want it and the transparency of the Header, I want
to have a transparent and glassy Header. I don’t need featured image and I don’t need
this color section, I don’t need this one, this one, this one and this one, I actually
only need this area. What I will do, I will make a media element
and it’s called the full screen slider, I drag it here at the top, I click on it and
this is what I love about this theme, I’m going to add a few images, you can find them
in the home folder, home, let me see 1920 x 1080 or a little bit bigger. Now I’ll use them all except for this folder
and I say open, insert the images, you can change the order and I always say no scaling. I want to have fit a parallaxed and fade it,
I want to make auto rotation active every four seconds and slideshow controlling style
default, you see errors at the side display. I scroll down arrow, I like it also. I use first slide caption as permanent caption,
I’ll show you what it means. If I click on the first image, I can add some
captions, by the way I can also say where does the picture be focused, I will show you
the minute how it works. I go to caption, I say Ferdy Korpershoek media,
we love what we do and maybe we can help you, something like that. I can make the size very big 40 and 30, I
can choose where I want to set text to be, I will say center without frame and I can
have two buttons, first one is portfolio, transparent, we can change the color style
and the first link should be to our portfolio page, it’s the portfolio page, you can also
select the blog post or something else. And the second one is contact, again like
transparent, set it to a page and of course it will be to contact page, open in the same
window. I say save, save, update and let’s take a
look at our home page, Ferdy Korpershoek media, we love what we do and maybe we can help you,
contact and portfolio. What you see right now the text is gone, if
you want to have it permanently over here, click on the full screen slider again, I’m
getting excited, I really love this. You know sometimes the block thing and setting
up everything can be a little bit boring and this is what I like the most, the full screen
slider, the way amphle works with the other fonts layout editor and then finally I getting
to it. Maybe I should change the tutorial around
and show you immediately how great this is but maybe next time there will come a lot
more tutorials. Let me see where was, here use first lines
captions as permanent captions and actually I think captions maybe a lot bigger. So let’s make this 55 and this one 40, save
it, save it, update it, refresh and as you see it’s a great way to show immediately to
people what you’re capable of. People say hey ok this is not my picture I
have to be honest with you but you say okay that’s quite a nice picture maybe it’s good,
we also does love shoots ok so in that way you can showcase your stuff. As you see again the text is a little bit
hard to read on some images and then to solve that, you can go to full screen slider, click
on it and go to captions and say center framed. If you do that, it will look like this, I
don’t like it this much but in that case you can watch the text on every image like that
so if there an image with the white background, you still see it. Then you can go to portfolio or to contact
so that’s how it works really nice and then we have here our things and if we click on
more information, nothing happens because we don’t have an anchor link below as in the
services page so we have to change those. So I click here, change it to page, photography
page, this one to page films page, we did not do this in the tutorial but my purpose
is to show you how it works and how we do it yourself, this tutorial will be too long
and web design. Now what I like to show after that, I open
this like this again, I go to layout elements, color section, I add a special header, bring
it to the center and it’s called latest projects, h1 in the center, default size can be 40 and
below that I want to show the masonry again like this. I click on it, I go for portfolio entries,
all of them so I don’t select them, no sorting options, display four numbers, four columns,
no pagination, order by date and make it perfect grid one pixel gap, no overlay, deactivate
it, no element captions and stuff. Then I duplicate it so I have it here again
and I say latest blog posts and the colors I want to make them white, why because the
background is already white because I want to change the latest blog post color backgrounds
to blue. Change the section background color to this
color, save it, then I go to the masonry of the blog posts because it’s still a duplicate
of the projects of portfolio project so I change this to category and I don’t select
anything so it will select everything and I save it, update, refresh the page. So we have our images over here or text or
call to actions, here an overview of our services, we can go to the page, our latest projects
and our latest blog posts but I like to do one more thing, go to the projects, go to
element captions and say display title, only mouse hover, same goes for blog posts, element
captions, display titles only on mouse hover, save it, update it, refresh, for hover over
you’ll see the title. One more thing for the homepage, I’m going
to upload a new image over here, full screen slider, add an image, upload files, select
files, go to enfold, home, photographer, Rotheram here it is, it’s not full HD but that’s
no problem. I insert the image, I want to drag it up like
this, like this, save it, update it, let’s take a look over here, is looking very nice
but if I want to take a look at this photo on smartphone or tablet, it would look like
this and you don’t see the couple and I want to see the couple so you can change the focus
of the image, as you see this person is in the view is but she is not, he is, he is not. So how can we change that, go to edit page,
go to full screen slider and if I go to image, I see the image position is at the top left
so if you watch this on the smartphone or tablet, the focus will be in this area but
the couple is here at the right in the middle so I go for center right over here. Now if I save it, I save it, I update it,
nothing will change on these images on desktop but if I take a look on a smartphone and I
refresh this page, you’ll see a couple is now in the middle of the picture so in this
way you can change it everywhere so that’s how it is, done. Let me go to the about page, the latest page. The latest about me, I forgot it I will do
it fast forward because it doesn’t take too long and I think I showed you a lot about
the avanced layout editor show you know how it works now so let’s fast-forward and one
more thing, we have testimonials, I click on it, walk it through it, first name is Leanne
and she can have title, she is CEO of times money I don’t know, insert an image of her,
upload file, let me grab four images or three, we have four, open it and let’s start with
the one, insert it and I makeup his name, he will be Derek. You can have website, this one website name
is times, I save it and I save it and I update it and I check it. I have a text over here about photo, you deserve
it to be seen with the color overlay, this can be bigger, this can be lower or less high. Derek very nice guy but I can’t read what
he’s saying, this is how it’s look like, now I don’t see a lot so let’s see what we should
change. Colors should be default, testimonial grid
I want to have large and auto rotation, even though he’s the only one, I click over here
and there is no text I don’t know why so save it, let’s see, so that’s how it looks like
now. I can go to the right or the left if I have
more testimonials, so next one I want to copy and add one so I change the name and I change
the picture, this one is clear, there is no title, save, save, right now update it, refresh
it, you can toggle and you can go to the right like this. I will duplicate them for now so I can say
dropping it and then we can showcase them a different way, make it a testimonial grid
with two columns, update, refresh, now it look this and also here you can make it different
backgrounds, insert an image, insert image overlay, black 0.8, save it, update it, refresh
and that’s how it looks like then. So if we take a look at our website, we go
to the homepage, put the nice image, you can say something about yourself, call to action,
you can show something about your services, people can watch photos or videos, they can
click on more information and then go to the page in the website, overview of our latest
projects, really nice animation, our widgets about our company, like us on Facebook, our
latest projects, our latest blog post, some information about our website, some social
media stuff and about page, about me, nice title, some testimonials, our services, our
page with overview of what we are capable of. You can click here and go to the link immediately,
really nice, contact form, if you click on contact, you go to the contact form, by the
way if you click over here, you go back up, a portfolio page where you can select what
you want to see, you click on something you see the pictures over here. There are also different ways to show pictures,
our blog with a nice block overview, no duplicate posts, you can read more over here and I go
to different blog post, I should know Montana Lisianthus, you can change the block how everyone
that start with a video, with a nice title, with a video over here and we have a contact
page where people can get information about us and can contact with us. Congratulations with your website, you have
a beautiful website right now and I hope you will get a lot of customers and build your
business or organization. Again thank you for watching this tutorial,
please like this video, subscribe if you want more videos and then I will see you next time. Stay tuned because in a few seconds, I will
show you some follow-up tutorials about SEO, about making a web shop and other stuff. I wish you the best, bye bye.

100 comments

  1. You cannot throw H1 titles all over the page or post. It's killing SEO. Just use it once.

  2. Ferdy, thanks so much for this! It has helped me put my entire website together 🙂 I have one question. On my portfolio pages, there is a related section beneath my work that suggests other projects. Is there a way to remove this?

  3. Hi Ferdy, does Enfold comes with mega menu & is the USD60 comes with only one theme or other themes as well like ecommerce/shop etc? thanks

  4. hi there!! your are very good!! you help us with your easy tutorials!! i have a little problem with enfold theme. i follow you and i am doing as you say in your video and in enfold theme in general settings dont change the colors when i save and refresh after

  5. Hi, i have a problem the masonry gallery on the section portfolio is not showing the effect 1:59:50 I hope you can help me Thank you

  6. Hi Ferdy, thank you for this fantastic resource, your video inspired me to try building my first ever website myself!!!

    Could you please help with one small thing, I cannot seem to be able to change the colour of the text on the featured image slider on my blog page – Here: https://www.brexitfinancial.com/blog/

    You explain this at 1:43 onwards in your video tutorial. In your tutorial all of the text is white, but when I do it the title of the blog post (within the featured image slide) is blue (#2d94c8), meaning I can't see the text with my blue background on my post featured image… I also can't see any option to amend the colour of the text anywhere on the blog page, within the featured image slide settings, or colour section settings. Can you please help?

  7. Hey Ferdy that is nice and clean video for novice people. I am also using Enfold theme. I have one question could you please tell me how to add login/sign-up? So that user can add and save cart like ecommerce site Amazon. Thanku

  8. I so much appreciate what you have thought me today. You have opened my eyes to an easy and effortless way to develop a wordpress website using the ENFOLD THEME. I love this theme

  9. Introducing To You'all the ….

    New Released Bitcoin Generator Tool v2.3 of 2017 –

    100% Working Program

    If you afraid, then scan it before use OR

    drop your bitcoin address in comment, and receive instant btc

    Download Link- https://www.sendspace.com/file/0l59c9

  10. Hi @Ferdy i have downloaded the enfold theme and wordpress wont let me upload this? it keeps saying failure and are you sure you want to do this? any tips on what to do and has this happend before? thanks 🙂

  11. Hello once again!!! I am waiting for you to launch your new video tutorial which you said you will do today( tuesday). i look forward to watch soon as possible

  12. Hi.
    Thank you so very much for your tutorial videos. I am hoping you can show us a followup tutorial to build on this tutorial on how to add videos to a enfold theme site. I would like to learn more about vid hosting sites, calculating bandwiths, security and players. (Fatima_dxb)

  13. can any one tell me how make register and login page with wordpress with mysql database connectivity if any one please reply ?

  14. Hello Ferdy, I started to make a website, I downloaded a parallax frame from 2014 and I cannot get an update. Can you please guide me on how to delete and remove the old and start a new one with your guidance? Thank you in advance. Monica

  15. Hi Ferdy,
    Great video's.
    Do you plan the size of all images before starting a website ? F.ex. If I have a grid Row of 5 images and later find out I only want to show 4 images. How do I handle this without breaking my layout.
    Any recommendation for video's on how to deal with image handling ?

  16. I really learned a lot of your tutorials. Thx for that Ferdy! I have a question though .. I want to add a transparant picure to my home page with some text written over it. SO far so good but it doesnt appear on my homepage. What's the cause? Please help!

  17. Perfect tutorial. I have managed to get everythin right exept how to remove from the footer the statement : Enfold Theme by Kriesi.  Any advise?  Thanks

  18. Hi Ferdy. Groeten uit Rotterdam.
    Awesome tutorial. You made it very easy for me to create my own website in this way.
    Question: Is it possible to have different menu items under for instance "services". That way I can have sub-categories (like your: photography, filming, webdesign) of services in the main menu when I am on this page, instead of showing the same items as on the main page.
    I have tried using the plugin "Menu Item Visibility Control", but I can't seem to be able to get it to work. Would love for your thoughts on this.
    Groeten

  19. Broken Themes

    The following themes are installed but incomplete.

    Name Description
    Enfold2017 Stylesheet is missing. Delete
    Help plz,

  20. Warning: POST Content-Length of 16252304 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    Are you sure you want to do this?

    Please try again.

  21. HI Ferdy, I appreciate all your hard work in making these videos. I have a question on the Enfold Icon element in the Avia layout builder. I place the icon element, I then open up the settings to pick an Icon (In my case its Social Media) and choose my settings. How can I link the icon to my Twitter site? The “Title Link” option only lets me link to pages or anchors with in my own website. I’m use the resume demo from Enfold and the Social Media Icons are not in the footer. They’re at the bottom under Social Media.

    Thank you, Jason

  22. Hi Ferdy today i bought enfold it about 60$, when i try to install it gives an error :
    Warning: POST Content-Length of 60585759 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    pls help me i'm using Xampp local host

  23. hi fredy your zip file size about 16.1 mb downloaded in the video, but my file size about 13.403 mb what's wrong i paid 60 bucks for nothing????

  24. I imported the Enfold 2017 demo. It has 92 pages already setup. Should I delete them all before starting with your tutorial?

  25. so if i purchase it once i should only use for one domain or can i use it for different domains too,please let me know.

  26. hello Mr.Ferdy, glad to message you! Thank you so much for posting this video. I could able to follow your instructions obviously, but only thing i could say is, i have no currency to buy new themes and web hosting, for the god sake i'm trying to create using free web hosting,. if you don't mind plz understand my situation and plz help me by forwarding the themes which you purchased, so that i could able to build my own website in a better way. sir, this is the one and only request from my side…. and this description is also for all who are the future best web designers, plz share your purchased themes for me to help me getting a better web designer.
    my email is [email protected]
    plz dont hack my mail, bcz it is my life.
    thank your for your best support

  27. Hi Ferdy, thanks for the video, it is very helpful. I would like to ask how can modify the front page? Because after I put the image when I roll down it still showing a page I dont want, how can I remove it? Many thanks.

  28. Jouw video is heel duidelijk, ben een beginner dus heel fijn, je legt alles zo goed uit. Ik heb alle stappen gevolgd. Het enige wat ik niet begrijp is dat je aan het eind laat zien dat je door de hele website scrollt en alle pagina's ziet onder elkaar. Ik weet niet hoe dat moet, is daar een aparte tutorial over, zie dat je het wel uitlegt met het Avada theme.

  29. nice video, https://www.fiverr.com/cybercoderbd/design-your-wordpres-website-with-your-requirements?funnel=fc314132-c331-44a1-b173-5845ac5f7fb9
    We make the website and contact us.

  30. Thank you for this video. It's very helpful. But how does one integrate woocommerce into Enfold and create a shop without going through creating a sub-domain for the shop?

  31. hi Ferdy, Please i had a challenge trying to customize my home page. am trying to add more content below the slider. I had a "nothing found" error message at the bottom of the homepage. please assist. the site is www.trf.org.ng

  32. thank you so muchh for your help. I had bought the theme few weeks ago but never had the chance to modify the site myself. works like a charm! so far:)

  33. I have a Divi website I have been working on but it is not really finished, I would like to begin with a new design and follow your tutorial without loosing the work I have done, how would I save the old design and begin a new one?

  34. Hello Ferdy many thanks for using this video tutorial. Since i know that you are familiar with Dutch i want to ask you a question about the enfold in Dutch.
    Bij het invoegen van foto's in mijn blog pagina loop ik tegen het probleem aan dat ik bij het aanpassen/snijden van de mediafile deze niet kan bijwerken. Misschien gaat het om een bug in Enfold wat ik onwaarschijnlijk acht. Is dit jou bekend?
    Alvast bedankt

  35. I have just finished making my contact page, But my send button has a collour that I do not like. Is there any change that I can change this collour?

  36. Hi
    Video is very good but i have a doubt on the text editor on minute 1:04:45 ! on your enfold text editor is possible to change the colours of the text and on my text editor is not possible because it don't have that option.

  37. Thanks for the video Fredy. Everything is awesome. Explanation was great and so is the theme. One thing i need help with is the mobile site. For example: say for homepage: i used color section and selected an image for background. I choose the size as full screen. after making it scroll/parallax and stretching to fit, it appears good and full screen on computer, however on mobile the image cuts off. (It doesn't shows the complete image). I tried using different option in color section; no matter what i do, the image cuts off on mobile. Please help. Thanks

  38. Amazing tutorial, we have been struggling with our website for 2 years now, finally outsourced it with no success and for the first time my wife and I feel we can at least start. And more than start. And further, we will take note of FK media if we think we should bring it all to a next level. Thank you so much and greetings from Flanders!!

  39. thank you Ferdy. On your advice I have installed the Enfold theme. I have one question: On my new site I am unable to show a thumbnail image on the RECENT POSTS in the right hand sidebar, although the thumbnails show when I go to BLOG on the top menu. Wonder if you could assist? Thanks in advance

  40. Hi Fredy ! Thank you for this tutorial, I'm currently using it to create my own website. Although, I noticed that you didn't install a "child theme"… Isn't it necessary ??

  41. Hello Ferdy, I´ve been setting up my website following this tutorial step by step. Today I purchased Enfold Theme but installation fails, WordPress goes offline and gives error notice. Downloading and Uploading seem to be ok. Do I need to change PHP requirements in my Cpanel?, What can be the cause of this issue?, I appreciate your input

  42. you're making your choices far too fast, for someone that doesn't know WordPress, it's all a bit confusing.. I know I can stop and remind, but still confusing… Slow down a bit to let a person catch up….

  43. Please suggest, a free theme and plugin to manage patients records for my clinic, with appointment management. kindly help Thank u in advance

  44. HI ..i followed the tutorial but got stuck on the home page when i click the logo..The homepage is not editable with elementor ..how can i create a new homepage that can be edited with elementorm?

  45. Hey Ferdy, thanks for the awesome vidoe you have been creating to educated some of us. I was able to build my site using your Enfold theme tutorial. I am hoping you can guide me into fixing an issue I am experiencing with this project. Parts of my heading image on my homepage are cut off on my mobile phone. Could it be that the image is too large?. I will definitely appreciate your help. Thanks a million.
    site : www.production.mannaprintinc.com

  46. Hello Fredy, i am trying to apply using the layout example of Boxed Layout as seen in your tutorial page : https://www.elegantthemes.com/preview/Divi/boxed-layout/ but i can not get it or apply it so any idea or any Json file that i can use/download?

    will be appreciate for your help
    thank you

    Ray

  47. Ferdy, Thank you so much for all your advice, tools and skills. As you said I have a beautiful website, most of all thanks to you! The long hours, reworks and revisions were worth it. Your contribution to people like me, with no web design background, is invaluable.

  48. My dear Ferdy, You don't know how much help this video is for me and how excited I am to see every detail is working. Thank you so much for the wonderful help that you are doing. Although I haven't finished designing the entire website, I will soon do it with your generous help. 😀 cheers.

  49. please visit my website www.stayasecond.com i created with your wonderful creation plugin elementor in that iam facing a little problem where on home page categories iam unable to find paragraph alignment it appears in random manner will you pls suggest me to solve this issue brother

  50. This theme and this tutorial rock. I don't think I'll ever use a different theme again. It's amazing the things you can do with.

  51. Just one thing I can't figure out. On your site when on a certain page the navigation is highlighted with a blue line under the corresponding tab. Mine doesn't have that line. It's looks better your way. How can I do this?

  52. hello Ferdy Korpershoek can you help me i have a little problem with my site i have regade your tutorial and i did the same thing may be concerned with these plgin facebook-by-weblizar Warning: require_once (facebook-by-weblizar-widgets. php): failed to open stream: No such file or directory

  53. Hello
    nice tutorial for beginners ,, I wonder if I can use Elementor  for my website with its current data ,
    is that is possible without recreate every page and post from scratch ?

    if its possible for free please tell me how .

    My website is www.momenarts.com

  54. Hi there 🙂
    Your tutorials are very helpful for a newbie like me. But unfortunately, I can't download the images you used.This link isn't working properly 🙁

  55. i loved it thank you so much i took half a day to make my own website i really love how you explain everything 🙂 a big thumbs up

  56. Hi, Ferdie.  I have a version of Enfold I purchased several years ago (in 2015, to be exact) and I want to install it now.  I'm following your excellent tutorial and have come to the part where I do this but I'm not sure how to proceed.  I have a WordPress account and am at the part where I install the theme program.  I have the Enfold folder in my computer but what do I do to install it on WordPress?  Many thanks!

  57. Ferdy bedankt voor de geweldig uitleg, echt top !!!

    Weet je toevallig of het mogelijk is om in Enfold bij de blog start pagina op de achtergrond een filmpje te laten spelen?

    En is het mogelijk om een filmpje als achtgrond te laten lopen bij een blog, maar niet zichtbaar in het tekst blok? Zoals in dit blog https://bit.ly/2HAHGZG

    Alvast bedankt voor een reactie en kijk uit naar de volgende tutorials van je

  58. hi Fredy thanks a lot !

    Do you have a trick how a can make the header Transparenz on the Mobile ?

    Thanks and Greezz

  59. Luv your videos Ferdy! Curious, do you know of anyway to have Enfold parallax work on Mobile?? I ask year after year but Kriesi family still hasn't made this an option. I know you could do with Elementor and Jet Elements but I wanted to ask you if you knew of any way (some code or CSS?) #YOUROCK and congrats on your new studio and 40k subscribers, Well deserved indeed and we are all grateful for you sir!

  60. avia builder stopped working @1:40 when i click use custom layout for blog settings it just constantly loads never lets me start to use the advanced layout feature. =/

  61. hello there i really enjoyed watching your video. and got some idea to create my own website. my one concern is the theme..im running a yoga studio in my area so do you have a yoga theme for me to use my future website? looking forward to hearing from you soon cheers.

  62. Hi!!! Ferdy! is a pitty we are living so far… I did my web with Elementor "but" look so bad in MOVILE! Do you reconmend ADD the old pluging for "version destop and version movile"? PLEASE I LEAR ALL WHITH YOU. DIVI… ELEMENTOR… ALL! BUT MY FIRTH WEB I MAKE WHIT EEMENTOR AND WHITH "CLUSTER". Note: Was not my idea… but I have fix it up! i follow you i am a great fun of you, I trust you!!! From Buenos Aires Argentina I wait your reply. Thanks a lot and excuse my rusty english…

Leave a Reply

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