- Hey guys, my name is Christian Taylor.
Welcome back to Craylor Made.
And today I'm gonna be showing you
how to build a WordPress website in just a few minutes
using Betheme.
Now, Betheme reached out and asked to sponsor a video.
And they wanted me to check out
their new Muffin Live Builder.
We've all heard of drag and drop page builders
for WordPress,
and Muffin Live Builder is a custom page builder
designed specifically for Betheme
which has over 600 pre-built websites.
Betheme is available on ThemeForest,
which is the marketplace where I personally go
to buy WordPress themes for my projects,
so I'm super excited to take a look
and show you exactly how to build a WordPress website
in just a couple of minutes.
Let's get started.
So I'm in the WordPress dashboard
and I've already installed Betheme.
Once you've done this,
you're just gonna go over to Pre-built websites.
And I'm gonna look through these templates
and find something that matches the project
that I'm working on.
I'm building a landscaping site for a client,
so I'm just gonna see if anything sticks out to me.
Obviously, there is a lot to look through
and this caught my attention.
Garden 3, I think is really cool.
Looks pretty clean.
So I'm just gonna click Install
and I've already installed the required plugins.
You can see Revolution Slider and Contact Form 7
both say Active.
Yours may say Install.
Make sure you install those plugins before continuing.
But since I've already installed them,
I'm just gonna click next.
And I am just gonna click Reset now
and clear everything out of WordPress
so we can get a clean start.
Reset now.
I'm gonna leave everything default,
I don't need to change anything here.
I'm gonna click Install.
And now Betheme is installing our prebuilt website.
Once this is done, we can actually start
to customize the site and make it our own.
Look at that,
Betheme has successfully imported our prebuilt website.
I'm gonna go over to Home up here and say Visit Site.
And, wow, this looks amazing.
I'm really excited to customize this
and make it a fit for the client,
but right off the bat,
this is a very clean looking website.
So I'm gonna jump in and start with changing the logo.
To do this,
I'm gonna go over to the WordPress dashboard
and go to Betheme and Theme Options,
under Global I'm gonna click Logo
and I'll just say Browse.
And I'm gonna upload my client's logo.
All right, I found the logo.
I'm gonna click Open
and I'm gonna click Select.
Now, I'm gonna put this in the retina section as well.
Same exact logo.
I'll click browse,
select the logo from the media library
and say Select.
And save changes.
Let's take a look.
I'm gonna go to the website here
and, wow, Look at that.
We've got the logo in place.
It's already looking great.
Next we wanna address the favicon,
which is this icon right here.
Currently, it's Betheme's logo,
but I'd like to make it this little lawn mower icon
to match our brand.
So once again, I'm gonna go over to Dashboard,
go to Betheme,
Theme Options,
open up Global and General,
and scroll down.
And right here we have a place to upload a favicon.
So I'll Browse,
go in Upload,
find my icon that I've created.
Save changes.
Let's go take a look at the website.
And just like that, we have our lawnmower icon.
That looks incredible.
Now it's time to start customizing the page,
and the first thing we're gonna do
is edit this slider up here.
So this whole top hero section
is created with a plugin called Slider Revolution.
And we're not gonna go in depth on how to use that today,
but to access it, you will go to the WordPress dashboard,
scroll down until you see Slider Revolution,
just click it,
scroll down and click the pencil icon on your slider.
Once again, I'm not really gonna talk
about editing this today.
I'm gonna make some changes to it
and then we're gonna get into editing the page
with Muffin Live Builder.
I've customized the slider to my liking.
I've got a new hero image and some text.
Now it's time to start customizing our home page.
And we're gonna do this using Muffin Live builder.
To get to Muffin Live Builder,
I'm gonna go to the admin bar
and click Edit with Muffin Live Builder.
Once you're here, you can pick some elements
and start editing your page.
I'm gonna scroll down
and this element right here looks good,
so I'll click this pencil icon.
And I wanna change my text.
Now it's really easy to do this.
And in fact, if I click the pencil icon for this section,
we'd see we can just edit our text here,
"This is some text",
and then when I click outside of the box here,
the text updates.
Now on this section up here,
I wanna modify this text,
but because the text is white and this box is white...
This is a quirk of WordPress.
It's actually nothing to do with Betheme
or Muffin Live Builder.
You face this in almost any WordPress editor.
I actually have to highlight the text to be able to see it
because it's white text on a white background.
But don't worry.
If you run into this,
just go ahead and highlight your text.
Maybe you can say, "This is some text".
And when you click outside of that box,
you will see it update here.
So I'm gonna put in the text that I want
in these two text boxes.
I think I like that.
That text looks nice.
The next thing we're gonna do is change out this image.
I've got an image that I'd like to use.
So I'm gonna click here
and click Browse on this sidebar,
go to the image uploader,
you know the drill,
select your file, insert it.
That looks pretty good.
Let's scroll down and address the next section.
I'm gonna do a little section about the client.
Because this is Morgan's quality lawn care,
so how about we get a picture of Morgan?
I think that'd be kind of fun.
Lucky for me I happen to have a picture of Morgan
right here in my files,
so let's just put that in.
Let's see, what should we say here?
Let's go with "Who We Are".
Just click outside of here.
And we can see it updates.
One cool thing we can do
is change this counter element right here.
I think it'd be pretty neat to have a counter
of how many clients the company has,
so let's make it happen.
We're gonna just click the pencil icon
and right here I'm gonna put 87
'cause Morgan told me,
"hey, I've got to growing client base.
"It's up to 87.
"I really want to brag about that number.
"Get some more clients,
"show some clout."
So I said, "Morgan, we can make that happen.
"No problem."
Look at that.
87 clients.
All right, now that we've got this section done,
let's go ahead and move on.
And this next section is an overview of the services
that the company offers,
so let's go ahead and spice this up
with services that Morgan offers.
Let's get that potential client interested
in making the call and hiring Morgan.
I'm gonna roll over this heading here, just click it.
And I wanna change this services heading.
So remember with white text,
we're just gonna highlight it.
I'll just say "What We Do".
Click outside of our box.
Boom! Heading is complete.
Now let's start changing these items.
Once again, I'll just click our pencil icon.
I've got an image for this section
that I've already got figured out
so I'll upload that.
And I'm gonna change the text here.
Maybe something like "QUALITY MOWING".
I think that's pretty good.
I'm gonna go through each of these sections
get it all changed out
and then our services section and what we do
will be good to go.
Sweet.
That What We Do section is looking fantastic.
Next I'm gonna scroll down.
And I actually don't want this section right here.
I think we already have enough about Morgan and his company
on the homepage.
So no problem.
If you ever don't want a section,
just hover over this trashcan icon
and click Delete
and click Delete again
and the section is gone.
Now that we have that section out of the way,
I want to add a call to action section
to the bottom of the website.
I wanna drive interested clients to Morgan,
give him some business,
that's what he hired us to do,
so we're gonna do this,
I'm just gonna go over to Pre-built sections right here
and up here also like Call to action.
And I'll just look for one that stands out.
I actually like Headings with buttons.
I'll click Insert.
Then it adds this section to the bottom of our website.
I'm gonna change out this background image.
I'll just click Browse,
go to Upload files.
This one looks good.
I'll just click Open and Select.
Nice.
It's really starting to take shape.
Our background image is looking great.
I'd like to edit this text.
And I wanna make the text white
so it stands out against the background.
To do this, you just highlight your block of text
and I've got the text color option right here.
I'll select white.
Click outside the box
and boom, our text is white.
And remember to edit white text,
you just highlight it and type what we're gonna say.
Great. That looks awesome.
Let's work on this button.
Before that I'm just gonna clear out this text up here.
It's hiding up in those trees, but we don't need that.
I'll keep it to "We want to hear from you!"
I'll click the button.
And whatever you have a button in Betheme like this,
it's really easy to edit.
You can just click here where it says "button"
and say edit,
and that gives you all the options
so you don't have to go in the code
and try and mess with stuff.
Let's do "Contact us".
This would be linked to your contact page,
so I'll just put that URL.
And let's change out this icon.
Let's see, what would be...
Do we have like email?
Yeah, that's great.
Click Update.
And look at that.
Contact us,
we've got the little email icon.
So the homepage is all customized.
It's looking awesome.
Let's actually open a new tab and take a look.
Wow, this looks incredible.
Our website is almost finished.
You can edit these other pages in your own time,
but I'd like to show you how to edit the contact page.
Because this is a different page,
it has a live functioning contact form on it
and I'd like to change this image
to something more of landscapy
and not a guy with a construction hat.
So let's jump in
and we're gonna click Edit with Muffin Live Builder.
And let's get started right away with changing this image.
I'm gonna go to Browse,
Upload files,
and put my image input my image file up.
Boom!
Now we just go in and change this text right here.
I've got the text changed out,
this contact form is looking awesome.
We're almost ready to go,
but there is one thing on this contact page
that you need to know.
And that's how you send email to your email address.
Because this is using a plugin called Contact Form 7.
And if someone fills this out right now
and clicks send message,
it's basically going to nowhere.
So let's go hook that up.
I'm just gonna click Update on my page,
make sure I've saved all my changes.
I wanna go back to WordPress.
And up here I'll just go over to the dashboard.
And let's go to Contact and Contact forms.
I'll say Edit under the Contact Form here.
And I'll click Mail right here.
Now, what we need to do is put an email address
in the two fields.
So for us that's gonna be hello@morganslawn.care.
We do need the from email address.
And that's just gonna be noreply@yourdomain.com,
so for us that's morganslawn.care.
Now, for Subject,
I'm just gonna put "Morgan's Lawn Care[Your-Subject]".
So what I just did here was insert the subject variable
in our subject line.
If I go over to form here,
you can see that how this is designed
is we have these variables:
Your subject, your name, your email, your message.
You get the idea.
Using this set up like this ensures
that anytime someone fills out our contact form
and clicks Send message,
we're gonna get an email exactly like this,
it'll just have the variables filled in.
So all we really need to do is scroll up,
click Save,
and our contact form is good to go.
I'm gonna go back to the website here.
Man, it just looks so good.
There's only one more thing to do,
and that's to edit this footer.
To do that, it's very simple.
We go, you guessed it,
back to the WordPress dashboard.
And we're gonna do this under Appearance and Widgets.
Once you click Widgets, we can just dismiss this.
Now the footer's got four sections.
We see footer one, footer two, footer three, footer four,
and that corresponds with these four sections
we see down here.
I'm not gonna edit everything today,
but I will edit footer number four
and put in the contact information.
So I'll put in our phone number.
And I'm just gonna go ahead and update this
with all the relevant info.
Fantastic.
Everything is switched out here.
I'll click Update.
We'll go refresh the page.
And just like that, our footage changed out.
Our homepage is done, our contact page is functioning.
Sending emails to Morgan when a client
is interested in getting a service.
This really looks incredible.
That's how you build a WordPress website
in just a few minutes using Betheme and Muffin Live Builder.
Now, I think Betheme is a great fit for beginners
who aren't sure how to approach their website design wise,
and that's thanks to the over 600 pre-built websites
to choose from.
There's a lot of options.
You can just scroll through,
find something that stands out to you
and customize it with your colors and logo
and go from there.
Overall, I really enjoyed my experience with Betheme.
And you can get Betheme
which includes Muffin Live Builder
at the link in the description below.
The next steps after you build out your pages
and headers and customize the site to your liking
would include installing a security plugin,
getting a plugin to help WordPress send mail
and getting a cache in plugin.
Now, I won't be covering that in this video,
but if that's a video you'd like to see,
definitely leave a comment down below
and hit that subscribe button
so you don't miss When I release new videos.
With that said,
I will catch you guys next time.