How To Make A WordPress Website & Food Blog (Genesis Lifestyle Pro)

How To Make A WordPress Website & Food Blog (Genesis Lifestyle Pro)


Hi everyone! I’m Katrina and in this video
I’m going to show you how to create a professional customized magazine style website using the
amazing Genesis Framework by StudioPress and the Genesis Child theme called Lifestyle Pro.
So, I received an e-mail from Shelly asking how to customize a Lifestyle Pro theme. So,
in this video in addition to showing you how to get this website up and running, I’m also
going to show you how to completely customize the site so that it matches the look and feel
of your brand and your business. So let’s take a quick tour around the website we’ll
be creating in this video. So here we are on the homepage of the website we’ll be creating
in this video using the Lifestyle Pro Genesis Child Theme. This particular theme comes with
two different menu navigation areas. Here at the top we’ll have our primary menu navigation
area followed by the secondary menu navigation area down below. The banner section here is
completely customized so I’ll show you in this video how to customize this banner section
including by adding an image in the background as we see here and also customizing the title
as well as the description. Just underneath this header section then begins the content
of the homepage starting with a featured post followed by a number of different featured
categories. Here we have the primary featured category right here and then we have two smaller
featured categories down below. On the right hand side of the homepage, we have the side
bar starting with an e-mail opt-in form. The side bar, I want to point out in this side
bar you can add all kinds of customized content but in this video this is the content that
I’m going to be adding starting with an e-mail opt-in form. The e-mail opt-in form is one
of the most important things you can have in your website because it’s one of the best
ways to capture leads directly from within your website. In addition to showing you how
to add an e-mail opt-in form on your website, I’m also going to show you how to completely
customize the look of this so that it matches the colors and the design of the rest of the
website. Just underneath the e-mail opt-in form we have an author bio here with a profile
pic and a short description followed by a search box so anyone can easily search for
content throughout your website then we’ll add an image here which has the call to action
which when you click on this it leads to a landing page. I’m going over landing page
in just a moment. Underneath this landing page call to action image right here the link
then we have some social icons so anyone can easily connect with you on the social web
either to Facebook, Pinterest, Twitter, or YouTube. Then underneath the social icons,
finally, we’ll have some pins from Pinterest. Now, the cool thing about this particular
side bar widget area right here is that when I click any one of these images, it pops open
into a really beautiful light box display which gives your visitors a way to look at
all the images but still stay on your website. It’s always a good thing to keep your visitors
on your website, of course, and not send them to another website so having this light box
feature here is really great. Finally, at the bottom of the website here is the footer.
In the footer, you also could have all kinds of customizable contents. In this video I’ll
be adding, once again, the social icons so anyone could connect with us, me, your website
via the social web. We’ll also include a description about the website and a video. This is what
the home page looks like for the Lifestyle Pro Genesis Child Theme. Let’s take a look
at some of the internal pages starting with the blog archive page. When I go to the blog
archive page, the blog archive page will have all of your blog post on one page one by one
vertically down the page like so. And on the right hand side there will be this sidebar
once again. Let’s take a quick look at one of the internal single blog post pages so
I’m going to click on this particular blog post right here and then we can see, when
we go to that post, there will be a date, the author, and comments followed by the actual
blog content. On this particular blog post, I have an image then I have some text content.
Underneath the blog post we’ll have, once again, this wonderful e-mail call to action,
e-mail opt-in form which is so good to put these pretty much wherever you could put this
on your site, the better. I’ll show you how to add an e-mail opt-in form at the bottom
of your blog post. Just underneath the e-mail opt-in form, we also have some social sharing
features so anyone can share your content across the social web either to Facebook,
Twitter, Pinterest, Google+, or some other social network. Then we’ll have an author
bio section and then at the bottom finally we’ll have a comment form so anyone can comment
on your blog post. So that is what the blog post looks like. Let’s take a look at the
about page. Most likely you’re going to want to have an about page about your website and
about you so on this page this is just a full-width page with no side bar. I’m going to add some
content and some image. Next I have just another page; I’m calling this one “Recipes” since
this particular demo website is about Green juices and wellness, and pressed juices so
I added a single page right here. So we see here is the page and then we have the sidebar
on the right hand side. Then when we click on this particular one, “The Free 14 Day Detox
Cleanse Plan” plan, this is a landing page. As we can see with the landing page there
are no menu items anymore, there is no header, there is no logo. All the attention is really
focused on your offer so having a landing page is really a great way to focus attention
on some kind of offer that you may want to encourage or motivate someone to take advantage
of. Also, this is a great place to add any kind of call to action that you may have.
As we see this landing page, you can read all about landing pages on the web and how
to optimize them and make them really effective but here we can see, I have my call to action
then I’m going to include a few reasons why someone should take advantage of this offer;
reason number one, reason number two, reason number three. And then finally at the bottom,
I’m going to add this e-mail opt-in form. So, I’ll show you how to do all of these in
this video as well. Going back to the homepage, here are the final, actually second to last,
page we have is a contact page we’ll be adding in this video. And here the contact page is
just as it suggest what it is, this is a great way for anyone to easily contact you directly
from within your website by filling out their info on the message and clicking on “send”.
Finally, last but not least, I’m going to add a shop page to this particular website,
I’ll show you how to set this up. Here I just have added a couple different images and I’m
going to show you in this video how you can link each of these images to an external website
or an internal website. For example, when I click on this one it’s going to go directly
to amazon.com so in the event that you have an Amazon affiliate account set up I’ve been
getting a lot of questions about affiliate marketing and things like that so stay tuned
for one of my next videos, future videos but for the moment I’m just going to set this
up so that when anyone clicks on this will go directly to Amazon. Okay, so that is what
the shop page looks like again with the side bar on the right hand side. The great thing
about this having the side bar throughout the website is that the e-mail opt-in form
is always pretty much front and center, you can’t get away from it. This is where we’re
headed toward in this video. Once again, we’re going to be using the amazing Genesis Framework
by StudioPress in this website. Before we begin, I want to take a quick moment to head
over to studiopress.com to go over the top reasons to use Genesis. StudioPress has been
recognized throughout the web world for their amazing WordPress Framework called Genesis
and the many Child Themes that they offer with this framework. As we see here, Genesis
and their child themes have been downloaded by over a hundred thousand website owners.
Over a hundred thousand websites trust StudioPress and the Genesis Framework to power their website.
You can be really rest assured that this is really an amazing framework to use for your
WordPress website. You can check all the different reasons, the eight different reasons, to choose
the Genesis Framework here on studiopress.com. Of the many reasons to choose the Genesis
Framework here are some of the top reasons at a glance: Number one, rock solid security.
Number two, blazing fast performance. Number three, out of the box SEO. Number four, beautiful
mobile responsive designs; and number five ultra, flexible foundational codes. The great
news with Genesis, is that not only are you getting a beautiful design on the outside
but you can be rest assured that the code that is actually generating your website is
state of the art code, it’s clean, it’s optimized and it adheres the latest WordPress security
standards. And through these reasons that over a hundred thousand website owners including
many of the webs leading internet marketers, bloggers, media producers, and developers
trust the Genesis Framework along with the StudioPress Child Themes to serve their content.
So this is where we’re headed toward in this video. We’re going to create a professional
completely customized WordPress website using the Genesis Framework and the Genesis Child
Theme called Lifestyle Pro. This is a magazine style blog style website, its mobile friendly
and responsive. As a quick demo of the responsiveness of this website, when I come to the bottom
right hand corner and I reduce the screen size we could see all the different elements
on the page are resizing to fit the new screen size. And here on the smartphone view of the
website, we can see that the menu items have repositioned themselves in the middle, the
banner image has also resized we can still see it really well, as we can also see the
title and the description. Meanwhile, all the other elements on the page are stacked
vertically, so we can so those very clearly as well. This is referred to as a responsive
WordPress website – it’s a website that responds to different screen sizes making it easy to
view both on desktops and laptops as well as on mobile devices like tablets and smartphones.
With the Lifestyle Pro Genesis Child Pro theme, we’re good to go in terms of mobile friendliness.
This is where we’re headed, let’s get started. Before we get started, how much is this website
going to cost? Well we need several things. Number one, we need a domain name and we also
need web hosting. In this video, I’m going to be using hostgator.com and at Hostgator
you can both get the domain name as well as the web host name. I’m also going to be using
a special coupon code at hostgator.com to get an extra amount off my order. There are
two coupons to choose from depending on which web hosting plan is preferred. If you decide
to go with hostgator.com, feel free to use these coupons as well to get an extra amount
off of your order as well. If you sign up for one month posting at hostgator.com the
best coupon to use is “wpcoupon25” and if you sign up for six months or more of web
hosting at hostgator.com, the best coupon to use is, “thankyou”. Be sure to refer to
these coupons if you’d like to get an extra discount when you sign up at hostgator.com.
Also, I do want to note, I do receive a small referral from Hostgator if you decide to use
these coupons, and if you go with them. Thank you in advance for your support and helping
me to continue these free WordPress training videos. I also noted additional web host and
deals on my website at 77webstudio.com/deals. Once we have the domain name and the web hosting,
the next thing we’ll need is the Genesis Framework and the Child Theme both of which we can get
at studiopress.com for $99.95. This is a little bit more than many of the other premium WordPress
themes out there in the online marketplaces but keep in mind that this is a package that
we’re getting which includes both the theme as well as the Genesis Framework. This is
a one-time purchase fee and it also includes unlimited updates and unlimited support. Once
we have the domain name, web hosting, and the framework and the theme the next thing
that we’ll need to put this together is some time and I’m estimating this should take roughly
just under three hours so please set aside about three hours or just under to go through
the video, watch the tutorial and put together the website. In sum to totally get started
with this particular website is around $125. Again, that’s using coupon code “wpcoupon25”
when you sign up for one month hosting at Hostgator or using coupon code “thankyou”
when you sign up for six plus months or more web hosting at hostgator.com. Considering
that, we’re going to be creating a completely customized professional WordPress website
using the Genesis Framework this price of $125 to get started is a really amazing value.
What are the steps to create this WordPress website? Well, the first step is we need to
get a domain and the web hosting. The second step is we need to install WordPress. And
number three, we need to build out the website. Let’s take care of step number one, getting
a domain name and the web hosting by heading over to hostgator.com. Here on Hostgator.com
to view the webhosting plans, go ahead and click on the button in the middle that says
‘view webhosting plans’. Then, you’ll see there’s three different web plans to choose
from. We have the hatchling plan, the baby plan and the business plan. If you’re just
getting your website up and running or if you have a small business website, then mostly
the hatchling plan or the baby plan will be a good fit for you. The difference between
these two is that with the hatchling plan, you can host one single domain name whereas
with the baby plan, you can host as many website domains as you would like. There’s definitely
more of a value when you’re looking at the baby plan. Go ahead and choose the one that’s
best for you. I’m going to choose the baby plan. I’m just going to click on ‘order now’
for the baby plan. Then we see that the next step is we need to enter our domain. So, if
you already have a domain name, go ahead and click on this button here to let them know
you already have a domain name. I’m actually going to register a brand new domain so I’m
just going to enter my domain name here. Just to see if something’s available, I’m going
to put a random name there. Of course, it is available because it’s super random. Once
you have your domain name added and once you can see the message here that it is available,
then go ahead and scroll down. The next step is we need to choose the package type. When
you come to this section, the default package type that Hostgator will display is 20% off
with a 36 months cycle. So, if you’re just getting your WordPress site up and running,
I usually prefer to just go month to month. In that case, I would change this cycle here
to be one month at 20% off. Now, I do have a coupon to get more off the order if you’re
signing up for one month. If you’re signing up for six months, 12 months, 24 months or
36 months, I have a different coupon to use that gives you more of a discount than what
the standard discount is that Hostgator is providing. To see how that works out, I’m
going to start with the first coupon code which is wpcoupon25. And when we sign up for
example of one month, then when you scroll down here, you’ll note that there’s a coupon
code here that Hostgator provides and this is the standard coupon code which we can see
here will give you a total of $65. If you put in the coupon code wpcoupon25 in this
instance and then click ‘validate’, note that now the coupon is $57. That’s less than the
standard coupon. There’s a lot of different addons that Hostgator provides here including
site lock and site backup and domain privacy. Most of these I usually do not use because
I have other plugins that I use to do the same things. That way I don’t have to pay
an ongoing charge. I am actually going to uncheck these two. If you’d like to sign up
for these, by all means continue to keep those checked. The other I just want to show you
for pricing — I’m going to remove this privacy just for the moment to show you how it works
out. Now, when I scroll down using a one month web hosting plan and a coupon code wpcoupon25,
the total is less than $15 which is really, really great. Now, if you are signing up for
more than one month, if you want to sign up for a billing cycle of say 6 months, 12 months,
24 or 36 months. I’ll go with say 6 months right here, then the coupon code to use is
‘thankyou’. Note that now when I use wpcoupon25, the total is $62 for six months. But when
I type in the coupon code ‘thankyou’ and then click on ‘validate’, now the price drops to
$56. So, the best coupon to use if you’re signing up for six months or more is ‘thankyou’.
This is an exclusive 30% off coupon that Hostgator has given me generously to share with all
of my viewers. So, thanks so much Hostgator for providing me with this exclusive coupon.
Once you have your order, I’m actually going to back up here and I’m actually going to
add in just one month right now. I’m going to sign up for one month right here and instead
of using the coupon code ‘thankyou’, I’ll just go back to my other coupon wpcoupon25
and I will click on ‘validate’. Now, we see my order total is less than $15. Keep in mind
that one of the things I did turn off is privacy protection. I actually do recommend using
the privacy protection or signing up for this. Here is why. When you do not sign up for privacy
protection then by default all of your information like your email address, your address and
your website domain and sometimes your phone number will be included in the public online
database related to domain names. If you prefer to keep all of that kind of personal contact
info private, then the privacy protection is what you’ll need to sign up for. I do think
this is a really good thing to sign up for. In this case, I’m going to sign up for this
one add on of privacy protection. Once I’ve clicked on that box and sign up for that,
now when I scroll down my order total will recalculate and it’s less than $25. Again,
that’s using coupon code wpcoupon25. And also, a reminder if you do sign up for more than
6 months of webhosting or more, then go ahead and use the coupon code ‘thankyou’ and you
will get the best deal for between these two coupons. Once you have the coupon code that
you need there, go up to the top. We also need to create a username and a security pin
and fill out our billing info. When you have that all filled out then come to the bottom
here and click on ‘create an account’ to create your account and sign up for web hosting.
Once you click on ‘create an account’, you’ll get this page which will thank you for your
order and will tell you to go check your email for information related to logging to your
web hosting account. I’m going to go checkout my email. Here we see on my email account,
here’s the email from Hostgator with my account info. I’m going to click this email to open
it. I want to point out two things. The first link that they’ll share with you in the email
is the billing system link. If you want to check out any info related to your billing,
you can go ahead and click on this link and use the password that they gave you. Right
below that you’ll see that there’s a link for your control panel with your username
and a temporary password. I’m going to copy this password here, the temporary password.
And to log in to your control panel, you’ll use this link. This is a really good email
to keep in a safe place for future reference because you will be needing this information
as well as the link to the control panel to log into your Hostgator web hosting account.
I’m going to click on this link here. Then here is my username, you want to type in your
username here that was found in the email and you want to add your password right here
as well. Once you have that setup, you want to click on ‘login’ to login to the control
panel of your web hosting account. Here we are on the Hostgator control panel. The next
step we want to do is step number two, we want to install WordPress. Thankfully with
Hostgator there’s a really easy way to install WordPress using their simple wizard script.
I am going to scroll down to where that is located. You want to scroll down to where
it says ‘software and services’. You want to find this icon that says ‘quick install’.
This is what we’re going to use to install WordPress really easily in Hostgator. We’re
going to use this ‘quick install’ link. So, I’m going to click on that. Once I click on
that you’ll note that there’s all these different kinds of software listed here on the left-hand
side bar. Right at the top you’ll note it says, “Blog software” and there’s a link here
for WordPress. This is what we want to install. So, I’m going to click on that. Then, we’ll
arrive on this page and we can see at the time of this recording, we will be installing
Wordpress version 3.8. That’s the most recent version of WordPress. The next step is we
need to click on this button here that says continue. Here you’ll get a panel where you
can decide which domain to install WordPress to. I’m going to add the domain name where
I want to install WordPress and I’m going to fill out this information below starting
with the admin email. I’m going to add my admin email right there. Next, you want to
give your new website a title so I’ll just call this the name of my domain. And also,
you want to add an admin username. Now, note that this is an important step for website
security. You want to make sure that you do not use an admin that is something like ‘admin’,
‘support’ or ‘administration’. These three names, admin, support and administration — those
are the first names that hackers will try when they’re attempting to break into your
Wordpress website. So, it’s important that you use an admin username that is more unique
than admin. For this instance, I’m just going to add my name right here. You can also add
your first name and last name. I’m going to leave that empty. Instead, I’m just going
to click on ‘install’ to install WordPress. Okay, congratulations. Your installation is
ready. You can access the installation of your new website by clicking on this link
here. Also note that here is the admin area login URL that you’ll use in the future to
access the login panel, to access your website in the future. You want to make a note of
this link here. It’s usually your domain name followed by wp-admin. That’s an important
link to remember as well so that going forward you can easily log into your WordPress website.
Also make a note of your username and password. This is what you’ll also need of course to
log into your website when you click on this link. I’m just going to highlight this temporary
password and copy it. Then, I’m going click on this link here to login to my new WordPress
website. Here we are on the log in screen of our WordPress website. To log in, you want
to enter your username in the username field and your password in the password field and
then you want to click on this button that says ‘Remember Me’ so that the next time you
come to WordPress, your username and password will be remembered. In the event that you
forget your password in the future or perhaps even now, you’ll want to click on this link
here that says ‘Lost Your Password’ and WordPress will send you a password reset to the email
that you used when you were creating your WordPress website. For the moment, here I
have my username and password. I’m going to go ahead and click on the log in button to
log in to the WordPress website. Here we are on the Dashboard. This is the first thing
that you’ll see when you log in to your WordPress website and when you first install WordPress,
you will also see this message that says “Welcome to WordPress” with a number of links here
to get started. I’m going to be covering these links in more detail later on in the video.
Right now I’m just going to dismiss this welcome message by clicking on the ‘Dismiss’ link
right here. On the dashboard here we can see ‘At a Glance’ we’re running the Twenty-fourteen
theme; this is the theme that comes with our WordPress 3.8 installation and at the time
of this recording, WordPress 3.8 is the most recent version of WordPress. Let’s take a
quick look at the website, what it looks like right out of the box when we install WordPress.
To check out the site, I’m going to go up to the top toolbar, hover over the website
name and click on ‘Visit Site’. Here we can see the homepage of our website when we’ve
just installed WordPress version 3.8 using the Twenty-Fourteen theme that comes by default
with the WordPress installation. Of course we’ve got quite a bit of work to do because
the end result that we’re headed toward in this video is this website view. This is the
website we’ll be building in this video using the Genesis framework and the Lifestyle Pro
child theme by Studio Press. The first step we need to take to move in this direction
is we need to change the theme from the Twenty-Fourteen theme to the Lifestyle Pro theme and the Genesis
framework. To do that, I’m going to go back to the dashboard by clicking on ‘Dashboard’,
and then I’m going to go down to ‘Appearance’ and click on ‘Themes’. Here on the ‘Themes’
page we can see that the active theme at the moment is the Twenty-Fourteen theme and we
need to add a new theme. To add a new theme, I’m going to click on ‘Add New.’ There’s this
link here that says ‘Upload’ — I’m going to click on Upload — and then here we can
install the Lifestyle Pro theme in dot zip format by clicking on ‘Choose File’. Of course,
first we need to go to Studio Press and get the theme. I’m going to head on over to StudioPress.com
to find the theme. Here on StudioPress.com you can find the theme by clicking on ‘Shop
for Themes’. Here on the WordPress themes page we can check out all the amazing Genesis
child themes. Of course, the theme that we want right now is the Lifestyle Pro theme
which is a magazine blog-style theme. I’m going to click on ‘All Categories’ then click
on ‘Magazine Style’ to do a filtered search for this particular theme. Here on the right-hand
side we see the Lifestyle Pro theme. When I hover on top of it, there’s a button: See
Details and Pricing; when I click on this it will bring me to the Lifestyle Pro theme
page where we can read all about this great theme. On the right-hand side we can see that
we can get this theme with the Genesis framework for just under one hundred dollars. I want
to make a quick note. This is a little bit more than many of the other themes out there
on the online WordPress theme marketplaces, but this is actually a really great value
because this includes not just the theme but also the Genesis framework as well as unlimited
updates and support and it’s a one-time purchase fee. The unlimited update is really an extra
value that comes when you buy the theme and the Genesis framework; not all developers
will give you updates down the road, a year or so or more when the theme is updated. That’s
a really important thing, to keep your theme updated, of course for so many reasons including
WordPress security. The other thing is that this also is a one-time purchase fee which
means that when you purchase this theme with the Genesis framework, if down the line you
want to change the theme to some other Genesis child theme, you will not need to buy the
Genesis framework, you will just need to buy the theme which is really great. As a quick
example, a few years ago I bought the Genesis framework and another theme, the Mocha theme
for a different website project. This time, when I wanted to create a website with the
Lifestyle Pro theme, I did not need to re-purchase the Genesis framework; I only need to buy
the brand-new theme, which is really great! That is the scoop on the theme and the Genesis
framework. If you do not yet own or have not yet purchase the Genesis framework, then you
want to click on ‘Buy Theme and Framework’. If you already have purchased the Genesis
framework at some point in the past, you can scroll down to the bottom, click on ‘Yes,
you are a returning customer’ to log in for special pricing and options on just the Lifestyle
Pro theme. I am a returning customer, I’ve already bought this so I’m going to log in
and I’ll see you on the other side, on the dashboard of my Studio Press account where
we can download the Lifestyle Pro theme. Here we are inside my Studio Press account. To
download the Lifestyle Pro Genesis child theme, along with the Genesis framework, I’m going
to click on ‘Downloads’ to go to the downloads page. Here on the downloads page I’m going
to scroll down to the Genesis framework as well as to the Lifestyle Pro child theme.
The first one up is the Genesis framework right here. On the right-hand side there’s
a blue button, I’m going to click on that to download the Genesis framework. Once the
Genesis framework has been downloaded, then I’m going to scroll down to the Lifestyle
Pro theme right here and do the same thing; click on the blue button here to download
the Lifestyle Pro Genesis child theme. Once both the Genesis framework has been downloaded
along with the Lifestyle Pro child theme, I’m going to go back to my WordPress website
by clicking on my site here. We’re back on the Install Themes page where we can install
both the theme and the framework in dot zip formats. When I downloaded these two files
there were both already in dot zip formats so I can just install them directly by clicking
on ‘Choose File’. Here we see both the Genesis zip file as well as the Lifestyle Pro zip
file. The first one I’m going to install is Genesis; I’m going to highlight that and click
on ‘Open’. Once I see that right here I’m going to click on ‘Install Now’ to install
the Genesis framework. Once the Genesis has been successfully installed, I’m going to
click on ‘Activate’ to activate Genesis. Now we see that Genesis is active. The next step
is we need to install the Genesis child theme called Executive Pro. Once again, I’m going
to click on ‘Add New’ to add the new theme, and then I’m going to click on ‘Upload’ and
then ‘Choose File’. Then I’m going to select this time the Lifestyle Pro theme and click
on ‘Open’. Once I see it right here in the window, I’m going to click on ‘Install Now’
to install the Genesis child theme called Lifestyle Pro. Once the Lifestyle Pro child
theme has been installed successfully, I’m going to click on ‘Activate’ to activate this
theme. Now we can see here that the Lifestyle Pro Genesis child theme is active. Once the
Lifestyle Pro Genesis child theme has been activated, the next step is we need to add
some plugins to our WordPress website. On the left-hand side, I’m going to go down to
‘Plugins’, hover over ‘Plugins’ and click on ‘Add New’. Here on the Install Plugins
screen, I’m going to do a search for the Genesis eNews Extended Plugin so I’m just going to
add that in the search field and click on ‘Search Plugins’. We’ll see here it is at
the top, the Genesis eNews Extended Plugin. I’m going to click on ‘Install Now’ to install
this plugin. Are you sure you want to install this? Yes, okay. Once the plugin has been
successfully installed, I’m going to click on ‘Activate Plugin’ to activate the plugin.
The next plugin that we need to add is the Simple Social Icons Plugins. Again, going
to ‘Add New’ under ‘Plugins’; I’m going to add a new plugin, then I’m going to search
for the Simple Social Icons and click on ‘Search Plugins’. Here we see at the top: Simple Social
Icons. Again, I’m going to click on ‘Install Now’. Are you sure you want to install this?
Yes, okay. Once this has been successfully installed, I’m going to click on ‘Activate
Plugin’ to activate the plugin. The other plugin that I want to add — one more this
time, we’ll add some more later down the road in this video. The other one I want to add
right now is the Contact Forms plugin. I’m going to click on ‘Add New’, then I’m going
to do a search for the Contact Form Seven Plugin and click on ‘Search’. Here it is at
the top, Contact Form Seven. I’m going to click on ‘Install Now’. Are you sure you want
to install this? Yes, okay. Once it has been successfully installed, I’m going to click
on ‘Activate Plugin’ to activate the plugin. Once the plugins have been installed and activated,
the next step is let’s take a quick look at the homepage to see what the website looks
like so far. Going up to the toolbar, I’m going to hover over the website name and click
on ‘Visit Site’. Here we can see the foundation for our website using the Lifestyle Pro Genesis
child theme. By default, when you install this theme, you’ll have this fabric canvas
background right here. The header section has this emerald green color; there’s a sample
post on the left-hand side. We see the primary sidebar widget area and the footer section
down below with the credits. Let’s take a look at some of the Genesis theme options.
Going back to the dashboard, I’m going to click on ‘Dashboard’ then I’m going to hover
Genesis and click on ‘Theme Settings’. Here we can configure all the different settings
for this particular Lifestyle Pro Genesis child theme. Starting at the top, if you’d
like to receive updates via email, you can click on ‘Notify and add your email here’.
These are updates related to the team or you can just click on this one; ‘Enable Automatic
Updates’. I’m going to leave it set for Enable Automatic Updates. Next, we have the color
style — this is an important one — so we can see right now its set to the default color
which is that emerald green color. But when I click on this, there are lots of other colors
to choose — blue, green, mustard and red — so choose whichever one best suits your
particular website. I’m going to leave this set as the default of the emerald green. Next,
scrolling down we have the Custom Feeds section; if you’d like to set up feeds you can do so
here. I’m not going to add any custom feeds; I just want to point out where that is if
you’d like to set that up. Here in Default Layout there are lots of different layouts.
We have a right-hand sidebar layout, left-hand sidebar, two right-hand sidebars, and two
left-hand sidebars. There’s a left-hand sidebar and a right-hand sidebar. Finally, there’s
a full-width page. Whatever you want the default layout for your website; you can configure
that on this panel right here where it says ‘Default Layout’. I’m going to leave it set
with the right hand sidebar. Next we have Navigation. I’ll be covering this shortly,
a little bit later in the video when we talk about the menu so I’m not going to touch this
right now. Next, if you’d like to add breadcrumbs — as it notes, breadcrumbs are a great way
of letting your visitors find out where they are in your site with just a glance. If you’d
like to enable breadcrumbs on the homepage, post pages or other pages, you can set that
up here. Next we have Comments and Trackbacks. By default, I’m going to enable comments as
well as trackbacks. As it notes here, comments and trackbacks can also be disabled on as
per post or per page basis when we are editing posts and pages. I will go over that a little
bit later when we’re covering posts and pages. Right now, for the moment, I’m going to leave
these two checked to enable comments and trackbacks. Next we have the content archives which refer
to the blog archive page. There are two choices here in terms of content to be displayed;
you can either display the post content or the post excerpts. I am going to follow along
with the theme instructions and I’m going to display the post content. I’m also going
to limit the content to zero characters or you can just leave that blank altogether.
I am not going to include a featured image and I’m not going to select the post navigation
technique of numeric. We can see you can also use previous or next; I’m going to leave it
as numeric. Then I’m going to scroll down for Blog Page Template if you want to exclude
certain blog page, categories, you can do so here. I’m not going to limit anything;
I’m going to display all of the posts that I publish. Then down below we have the Header
and Footer scripts. We’ll come back to this a little bit later in the video. Right now,
with all the savings that we saved up above I’m going to click on ‘Save Settings’ to save
my settings. Next, let’s take a look at the title of the website as well as the tagline.
To check that out, I’m going to go over to Settings. Hover over ‘Settings’ and click
on ‘General. Here we can see the site title as well as the tagline. When you install WordPress,
the default tagline across all WordPress websites is ‘Just another WordPress website’ which
is never a good tagline no matter what kind of website you have. At minimum, it’s a good
idea to at least delete this altogether. In this case, though, for my website that I’m
building in this video, I’m going to add in a special tagline. Since my website is about
green juices, pressed juices and wellness, I’ll just add that tagline there. Then I’m
going to scroll down and I’m going to click on ‘Save Changes’ to save my changes. Once
the settings have been saved, now we can check out the site by going out to the toolbar,
hovering over the website name and clicking on ‘Visit Site’. Here we are on out homepage.
We see at the top we have out title and our tagline. We still need to add the menu items
and fill out all the content on the website as well as change some styling elements on
the site to give it a different look. Let’s start by adding some posts to our WordPress
website. To create a new post, you can go up to the top, hover over ‘+ New’ and click
on ‘Post’ or you can click on ‘Dashboard’ — click on ‘Dashboard’ right there — and
then on the left hand-side, you can hover over posts on the left-hand sidebar and then
click on ‘Add New’. I’m going to click on ‘Add New’ right here to create a new blog
post. The first thing we want to do here on the new post page is we want to give our new
post a title. I’m going to add a title in right here. Then, in this white box you can
add the content; whether a video, an image or some text. I’m going to add some text content
in this white box here by just pasting in some demo texts. We can see here that I’m
in the ‘Visual’ view and then there’s a ‘Text’ view. If I want to format some of this content
here, just like an email I would highlight it and then I would use whatever formatting
icons here that I’d like. If I want to bold this I’d highlight these two words and click
on the B to bold these two words. Note that behind the scenes, WordPress is generating
the HTML code so this is also a great way to start learning HTML. When I click on the
‘Text’ view, for example, we can see the behind-the-scenes code that WordPress has generated to create
the bold feature right here on these two words. We see here we have the HTML code for the
opening bracket which is the opening tag of the bold tag, which is strong, then we see
that closing HTML tag right here for the closing bold tag right there. As you go through your
texts and you create different formatting of this, you can just refer back and forth
to the Text tab to check out what kind of HTML WordPress is creating behind the scenes.
The other good news with WordPress is that you don’t need to memorize all these different
formatting icons. If you hover over them one at a time, a little tool tip will pop up telling
you exactly what each one of these different icons does. If you want to insert a link for
example, we see that I’m on the ‘Insert Link’ icon right here and I could just create my
link, highlight it, and then I can click on this button right here to edit or insert a
new link. Here at the top you will just add your link — whatever it is — you can give
it a title, you can choose whether you want the link to open in a new tab or not in a
new tab, just within the website. Whenever I’m going to an external website, I always
click on ‘Open link in a new window or tab’. Then, you can just come down here and click
on ‘Add Link’ to create your link. The next step is here on the right hand side, we need
to create a category. I’m just going to click on ‘Add New Category’ here and I’ll call this
‘Pressed Juice’. Next, once you’ve added the new category then you can come down here and
click on the button ‘Add New Category’. Once the category has been set, the next step is
the tags. You can just call this whatever tag you want. Let’s see, this is about kale,
cucumber, parsley so I guess I’ll just highlight these words right here. I want each of these
to be their own tag so I’ll just add them all in right there. Note that you want to
separate your tags with commas so I just put a little comma there. Then, I’m going to lick
on ‘Add’ to add the new tags. The other thing I want to do is I want to add an image to
my post so I’m just going to place the cursor where I want the image to be displayed. Then
I’m going to come up to the top here, hover over ‘Add Media’ and click on ‘Add Media’.
From here we can either choose media from our media library or we can upload a new file.
Since I haven’t added any images yet to the website, I’m going to upload a file from my
computer by click on ‘Select Files’. I need to find the files so I’m going to click on
‘Images’. Next, I’m going to choose this image right here, this cucumber image right there,
then I’m going to click on ‘Open’ to open this image and upload it to WordPress. Once
image has been uploaded, you’ll see the attachment details on the right hand side, and then you
can add a title, caption, alternative text or description. It’s always a good idea, whenever
you’re adding images to your WordPress website to give at minimum, add a title and an alternative
text. This way, anyone who’s using text-to-speech software or perhaps cannot see the image on
their browser for some reason, they’ll at least know, via the alternative text what
this image is about. Then, I’m going to scroll down. You can choose where you want to align
this, either no alignment, left, centre or right. I’ll choose centre. If you’d like to
link this image to something, you can link it to the media file attachment page, a custom
URL or none. I don’t want to link this to anything so I’ll just click on none. Finally,
we have some sizes that we can choose right here: a thumbnail size, medium size or the
full width size. I’m going to choose full width or full size of five ninety pixels by
five ninety pixels tall (590×590). Finally, you want to click on ‘Insert into Post’ to
insert your image to the post. We can also add a featured image here, if you’d like.
I’m going to set a featured image by clicking on ‘Set Featured Image’. I’m going to choose
the same image right there and then I’m going to click on this button to set the featured
image. Okay, scrolling down we see on the left hand side we can add some Theme SEO Settings.
If you are using an SEO plugin like WordPress SEO by Yoast then by default these settings
will not be functioning which is always a good thing because they defer to the plugin.
If you’re not using an SEO plugin though, this is a great way to set up your SEO settings
right from within the theme. I’m going to leave this un-filled in for the moment but
this is a really important thing to check out when you’re creating your post or pages.
Finally, we can choose the layout settings. Once again, I’m going to keep it with the
default which is the right sidebar. But if you want to create unique pages or end posts
on your website, you can do so right here by choosing a unique layout. Once you’re all
ready to go then come up to the top here and click on ‘Publish’ to publish your new blog
post. Once the post has been published, we can view the post by clicking on ‘View Post’
or we can continue and create another post. I’m going to continue and create another post,
this time with a different category. Once again, there are three different ways to create
a new post: we can click on ‘Add New’ here at the top or in the toolbar we can hover
or ‘+ New’ and click on ‘Post’ or on the left hand sidebar we can go to ‘Post’ and click
on ‘Add New’. There are lots of different ways in WordPress to do the same exact thing.
I’m going to click on this one — ‘Add New’ — to create a new blog post. Once again,
the first thing we need to do is give our new post a title, so I’m going to pop in the
title right here. Next here in the white box, we’re in the Visual view right now; we can
add some texts, an image or a video. I’m going to start by adding some text so I’m just going
to paste in some text right here, then I’m going to add an image so I’m going to place
the cursor where I want the image to be displayed. I’m going to click on ‘Add Media’ at the top,
and then I’m going to click on ‘Upload Files’ and ‘Select Files’ to select a file from my
computer. Next, I’m going to choose an image — here it is right here, this chocolate smoothie
image — then I’m going to click on ‘Open’ to open the image. Once the image has been
uploaded, the next step is to give the image a title and an alternative text, so I’m going
to add one in right here. Then we can check out the attachment display settings. Scrolling
down, I want this to be centre aligned so I’ll keep it as centre. I do not want to link
this image to anything, so I’m going to change this to none. You can choose any of these
options right here. Then I’m going to choose the full size which is six forty pixels wide
and six forty pixels tall (640×640). Once everything looks good then go ahead and click
on ‘Insert into Post’ to insert the image into the post. Next, on the right hand side
we can choose a category. I’m going to create a new category this time so I’m going to click
on this button, ‘Add New Category’. This time, the category I’m going to add will just say
‘Smoothies’. I’m going to have a variety of different categories here so I’ll add the
category called Smoothies and then I’m going to scroll down. You can give this some tags,
if you’d like. I’ll just give it a few tags. Once again, you want to make sure that the
tags are separated with a comma. Once you have your tags go ahead and click on ‘Add’
to add the new tags. Here we see once again the Theme SEO Settings. If you’re not using
a WordPress SEO by Yoast SEO Plugin or some other SEO plugin then this is an important
part to fill out for SEO. Let’s see; scrolling down I’m going to keep the default layout
right here consistent throughout the website. Of course, there are lots of different options
if you want to change that. Then, just going to scroll to the top and I’m going to click
on ‘Publish’ to publish my new post. One more thing; I notice that I had added the category
right here but I actually didn’t officially add it. Once you add the word in here for
the new category, then you need to make sure that you click on this button here to actually
add the new category. Now we see that the category is checked so we’re good to go. With
that, I’m going to publish this by clicking on the ‘Publish’ button here. Now we have
our second blog post published, which is great! Let’s take a look at some of the pages. We
have not created any pages yet; we have a couple of blog posts. To create a page is
very similar to create a post. Once again, we can go up to the top, hover over ‘+ New’
and click on ‘Page’ or on the left hand side we can hover over ‘Pages’ here and click on
‘Add New’. The difference between posts and pages — posts are used for any kind of content
that changes on a daily basis: news or events or just fresh content. Pages are your static
content. Pages would be things that don’t change; there’s no published author associated
with this, there is no date associated with it. It’s a static page so things like your
Contact page, your About page, maybe a Photo Gallery page; those will be great topics for
your pages and then anything that’s fresh content would be perfect for a post. I get
that question a lot; what’s the difference between a post and a page so I just want to
point that out. Let’s go ahead and create some pages starting with the About page. Most
likely, you’re going to want to have an About page about your website or about you on your
website. Once we create some pages, then we’ll be able to add them to the menu navigation
on the homepage. To create a new page, I’m just going to come up to the top here, hover
over ‘+ New’ and click on ‘Page’. The first thing that we want to do is give our new page
a title so I’ll just call this ‘About’ since this is the ‘About’ page. Here on the white
box I’m going to add some content; I’ll just add some texts here and I also want to add
an image. Once again, as we did in the previous example with the blog post, it’s the same
thing with the pages so I’m going to place the cursor where I want the image to be displayed,
click on ‘Add Media’ then click on ‘Upload Files’ and ‘Select Files’. I’m going to select
my file right here and click on ‘Open’. Once the image has been uploaded I’m going to give
the image a title and an alternative text. Once you’ve added the title and alternative
text, you can scroll down and check out the Attachment Display Settings. This time I want
the alignment to be right-aligned so I’m going to click on right. I want to link this to
nothing so I’m going to click on ‘None’ and I do want the full size here and not the thumbnail
size so I’m going to click on ‘Full Size’ and then click on ‘Insert into Page’. Once
the image has been added to the page, then next steps are the page attributes here on
the right hand side. If you’d like to set up a parent page, you can do so. The About
page is going to be the top level page in this case, so I’m not going to have a parent
page but I just want to point that out; this is where you would do that if you’d like to
create parent pages. The template I’m going to use is the default template. You can see
when I click on that there are lots of other options, but the one I’m going to use is the
‘Default Template’. Then, scrolling down we have the Theme SEO Settings for this particular
page. This is a good idea to fill this out if you’re not using another SEO plugin. Coming
down to the bottom, we can choose our layout settings. This is a page and it’s specifically
about the About page so I do not want to have a sidebar here on the right hand side. For
this particular page I want it to be a full width page so I’m going to click on this layout
style right here. Then, scrolling down, everything else looks good. I’m going to come up to the
top and click on ‘Publish’ to publish the About Page. Once a page has been published,
we can check it out by clicking on ‘View Page’. I’m going to hold off on that just on the
essence of time right now and I’m going to go forward and I’m going to create a blog
archive page. To create a Blog Archive page, I’m going to come up to the top, hover over
‘+ New’ and click on ‘Page’. For the title I’m going to give this page a title of Blog
since this is the Blog Archive page. I’m not going to add any content here because this
page is actually going to pull all the blog posts and display them all on one single blog
archive page. I’m going to leave this all blank. On the right hand side though where
it says Page Attributes, the template that we need for the blog page is ‘Blog’ so I’m
going to click on ‘Blog’ here to set the blog template. Then, scrolling down, everything
else looks good. We’re using the default layout which is the right hand sidebar which is perfect.
I think we’re good to go. I’m going to click on ‘Publish’ to publish the blog archive page.
Once the blog page has been published, we can check out the blog page by clicking on
‘View Page’. I’m going to continue, though, once again in the essence of time. I’m just
going to move forward and create a Contact page. To create a Contact page — this is
a page where anyone can easily contact you from within your website. To create a Contact
page, I’m going to go up to the top, hover over ‘+ New’ and click on ‘Page’. Next, as
we did previously in the other examples, I’m going to give this page a title; I’m going
to call this Contact since this is the Contact page. I’m going to save the draft by clicking
on ‘Save Draft’. Note that earlier in the video we had added a plugin called Contact
Form 7 to our WordPress website so that is going to serve us now. To check out the code
we need for the contact form, I’m going to go back to my plugins page right here by clicking
on ‘Plugins’. Here we can see the Contact Form 7 plugin which we added earlier in this
video. If you haven’t yet added this, then you’re going to want to do a search to add
a new plugin by clicking on ‘Add New’ and then you want to search for the Contact Form
7 plugin and install that and activate this plugin. Once you have that here in your plugins
list right here, to find the code you want to click on ‘Settings’. Here we see the default
contact form that comes when we install this plugin so I’m going to click on ‘Edits’. Here
you can check out the fields that will be included in the Contact Form, mostly a name,
the email address, a subject title, the message and a ‘Send’ button. These are the standard
fields in any kind of contact form. The code we need is right here above so I’m just going
to copy all of this; highlight it and copy it. Going back to my page, I’m going to click
on ‘Pages’ here. Then we see we have the draft of the Contact page. I’m going to click on
‘Edit’ to continue working on this page. Here on the ‘Text’ tab — we have the ‘Visual’
tab and the ‘Text’ tab — I’m going to click on ‘Text’ and in this text view I’m going
to paste the code that I just copied in the previous step. Once you have this Contact
Form 7 short code here in the Text view, then we can scroll down. Everything else looks
good; I’m going to have default once again with the right hand sidebar. I’m going to
click on ‘Save Draft’ one more time because I want to point out one special thing about
the contact form. When you come up to the right hand side here and you click on ‘Screen
Options’, then when you click on ‘Discussion’, note that you’ll get another field down below
related to Comments and Trackbacks. On my contact form, this is a page, it’s not a blog
post so I prefer not to have any kind of comments or trackbacks on my pages, especially on my
Contact form. I’m going to un-check this to turn off Comments and Trackbacks on this Contact
Form page. Once these are un-checked, then I’m going to come up to the top and click
on ‘Publish’ to publish my new Contact form page. Once the page has been published, now
let’s check out what the site looks like so far. We’ve been doing a lot of work, adding
a lot of content to the website; let’s see what the homepage looks like now. Going up
to the top left hand side of the toolbar, I’m going to hover over the website name and
click on ‘Visit Site’. Here we can see the beginnings of our website. It’s looking good
so far. We’ve got lots more to do, starting with the Menu navigation items here with those
various pages that we just created. To create a Menu Navigation Area, I’m going to go back
to the dashboard by clicking on ‘Dashboard’ then I’m going to scroll down to ‘Appearance’
and click on ‘Menus’. Here on the Menus page we can start by creating a new menu. I’m just
going to call this Menu and then I’m going to click on this button to create the Menu.
Once the Menu has been created, now we can add pages to our Menu. I’m going to add the
Contact page, the Blog page and the Home page — check all these three. The sample page
is the default page that comes with your WordPress installation and I will be deleting this page
a little bit later on. We don’t need that. Once you have the pages that you want to add
to Menu, click on ‘Add to Menu’ to add these to the Menu. To reorder them, all we need
to do is drag them and drop them where we want them to be displayed. I’m going to have
the About page first followed by the Blog page and then the Contact page. Next I’m going
to click on ‘Save Menu’ to save my menu. Once the Menu has been saved, notice that we’re
missing the Home button. That’s always a good navigation item to include, the Home link
right there. I’m going to create that by going down to Links, clicking on this box to open
it up and then I’m going to add my URL right here for my actual website. I’m going to give
this a link text of home, then I’m going to add it to the Menu by clicking on ‘Add to
Menu’. Once again I’m going to drag it to the top right here so that it shows up first
in the list. Then I’m going to click on ‘Save Menu’ to save my menu. Once the Menu items
have been saved, we can see at the top we have the ‘Manage Locations’ tab. We have one
more step to make this display throughout our website. I’m going to click on ‘Manage
Locations’ and here we can see there are two different menus that come with the Lifestyle
Pro Genesis child theme. We have a primary navigation menu and a secondary navigation
menu. The primary menu is going to be displayed above the banner and the secondary one will
be displayed below the banner. For this particular menu that I just created, I want this one
to be displayed below the banner so for the secondary menu navigation, I’m going to set
that right there by adding the menu we just created to the secondary navigation menu.
Then I’m going to click on ‘Save Changes’. We’ll come back a little bit later in the
video to the primary navigation menu area. Once the menu location has been set, now to
check out the website I’m going to go up to the top toolbar, hover over the website name
and click on ‘Visit Site’. We can see here we have our menu items being displayed. That
looks great! We have our About page, Blog page and Contact page. When I click on each
of these, we can see here we have our About page, our Blog page — this is the blog archive
page — which will display all of our blog posts. We have our Contact form where anyone
can easily contact us from within our website. Looking over the homepage of our website so
far, we see we have the banner section, the menu navigation area, we have a primary sidebar
area that we need to setup. The main thing I want to point out here is that we have all
of our blog posts displayed one after the other vertically down the page. For some,
this may be exactly the display that you want on your homepage, with all of the full blog
posts displayed on the homepage. Of course, with the Lifestyle Pro Genesis child theme,
there’s another display option for the homepage. When I jump over to the completed website,
here we can see how that layout will be set up. We have the first blog feature post; there’s
one featured blog post right here. Then we have the first category section; then we have
the second category section and the third category section right here. For this video
I’m going to set up all of these different categories on the homepage. Keep in mind that
so far we’ve only created two categories; we’ve created a Pressed Juice category and
a Smoothie category. I need to create one more category in order to make this work.
I’m going to go back to my website over here. I’m going to create one more blog post so
that I can also create a new category because when we go to the dashboard, for example — I’m
going to click on ‘Dashboard’, then when we go to post by clicking on ‘Post’, here we
see categories. These are our categories so far and I only have two categories created
so far. I need at least one more category to make the homepage section work. I’m going
to go back up to my toolbar here, hover over ‘+ New’ and create another blog post with
my third category. Here on my new blog post, I’m going to give my new post a title so I’ll
just post in a title right there. I’m going to go a little bit faster since we’ve already
gone over this in the previous examples. Here on the white content box I’m going to paste
in some content so I have my text content right there. I’m also going to add an image
so I’m just going to place the cursor where I want the image to be displayed, click on
‘Add Media’ then click on ‘Upload Files’ and ‘Select Files’. I’m going to choose my files
— this one right here — and click on open. Once the image has been uploaded, then I’m
going to give it a title and an alternative text, then I’m going to scroll down, choose
the alignment. I’m going to have this just displayed in the centre; I’m going to link
this to nothing so I’ll click on ‘None’ and I want the full size which is six forty by
six forty pixels (640×640) six forty pixels wide and six forty pixels tall. Once you have
everything the way you like to have it set, go ahead and click on ‘Insert into Post’ to
insert the image into the post. Note that we don’t see the image here because we’re
in the text view. Now we can see the HTML code that WordPress is generating behind the
scenes to create this image right here; there’s the code. When I click on the Visual tab here,
we can see the actual image. Okay, great! Moving over to the categories, this is where
I want to add a new category so I’m going to click on ‘Add New Category’. I’ll call
this ‘Green Juice’ then I’ll click on ‘Add New Category’ — this button right here. Them
I’m going to scroll down, you can add some tags if you’d like, making sure that you separate
the tags with a comma and then click on the ‘Add’ button. Next, I’m going to scroll down.
Everything looks good; we have my default layout set. I’m going to come up to the top
and click on ‘Publish’ to publish my new post with my new category. Now that we have all
the categories set up for our website — I’ve got three categories here: the Green Juices,
Pressed Juices and Smoothies. I have three categories that I want to have displayed on
the homepage. The only catch is that I only have three blog posts. Behind the scenes,
to save time, I’m going to create a number of additional blog posts and I’m going to
add them to each of these three different categories. I’ll see you on the other side
once I’ve created all those blog posts so that we can set up the homepage with the featured
categories. Here on my all posts page we can see all the different blog posts that I’ve
added to my WordPress website as well as the categories and the tags. When I go to the
website homepage by going up to the top toolbar, hovering over the website name and clicking
on ‘Visit Site’, here we can see the homepage with all the different blog posts displayed
one by one, vertically after the other. This is the default view of the Lifestyle Pro Genesis
child theme if you don’t make any configuration settings to the homepage; you’ll just have
a blog post just like that. Of course, I want to add those featured posts and featured blog
categories to my homepage. To do that, I’m going to go back up to the dashboard, click
on ‘Dashboard’. Next, I’m going to go down to ‘Appearance’, hover over ‘Appearance’ and
click on ‘Widgets’. Here on the Widgets section we see all these different widgets that are
available with our theme. The main ones that we want right now are the ones that are related
to Home: Home — Top, Home — Middle, Home — Bottom Left and Home — Bottom Right. These
are the widgets that we need to set up in order to display the featured content on the
homepage. Starting with Home — Top, I’m going to click on this button here to open up this
box. Then I’m going to choose Genesis — Featured Post to display the featured post on my homepage;
I’m just going to drag that over and drop it in the Home — Top section. I’m not going
to give this a title; of course if you’d like to give this a title, by all means go ahead
and add your title here. I’m going to select the category, though so I’m going to click
on this. I’m going to choose Pressed Juice, so that is the category of the featured post
I want to display. I want to display one post; I’ll just leave it as one. You can of course
change that if you want to display more than one post. Then I’m going to order it by the
date; that looks good. Everything else in this box looks good. Moving over to the right
hand side, I want to display the post title so I’m going to click on that box. I’m not
going to display the post info so I’ll leave that un-checked. Then, here where it says
‘Content Type’, I’m going to click on this; there are a number of different options here.
I’m going to choose ‘Show Content Limits’ and the limit that I want is about two hundred
fifty (250) characters; I’ll just add that right there. For the More Text, I’ll just
add ‘Read More’ without the brackets so just ‘Read More’. Next, I’m going to scroll down.
I’m not going to add Author Gravatar here. The next part here — Show Featured Image
— I do want to do that, so I’m going to click on this. The image size though, I don’t want
a thumbnail, that’s way too small so I’ll choose the home — large size here. There’s
also a home — small size, if you like; but because this is the featured post, I want
a really large image so I’ll choose the home — large. Next, for image alignment, I’ll
just have it be left aligned right there. These boxes over here I’m not going to fill
out, I’ll just leave the default settings. Finally, I’m going to click on ‘Save’ to save
my settings. Of course, feel free to go through all of these different settings and set these
up according to however you want to have it displayed. These are the settings that I’d
like to have for my own demo right now in the video. Once you have all the settings
that you’d like to set here on the Featured Post section for the Home — Top widget, I’m
just going to close this by clicking on this button. I’m going to do the same thing for
these three widgets right here starting with the Home — Middle widget. I’m going to click
on this button to open it; I’m going to pull over the Genesis — Featured Posts widgets.
For this particular one I do want to give this a title so I’m just going to add a title
there. The category that I want, once again, is Pressed Juice. I want to show three posts
so I’ll just put the number three in there. Then, here where it says ‘Exclude Previously
Displayed Posts’; I do want to exclude the previous posts which is the one that is featured
just up above in the Home — Top section. I’m just going to click on ‘Exclude Previously
Displayed Posts’. I do want to order it by date, so that looks good. This whole box is
set up the way that I’d like. Moving over to the right hand box right here, as we did
in the previous example, I’m going to show the post title by clicking on ‘Show Post Title’;
I’m going to click on ‘Show Content Limit’ once again. This time I’ll just use two-fifty
characters as we did previously and I’ll include a Read More text right there. Then, scrolling
down I do want to show the featured image so I’m going to click on this box. Although
this time, instead of having the large image with six hundred thirty-four pixels, I’m going
to choose the smaller image so I’m going to click on home — small. I’m going to align
this, once again, to the left. Once you have all of the settings set up as you’d like them
here for the middle home widget, go ahead and click on ‘Save’ to save the settings.
I’m going to close this and moving on to the next one. I’m going to open up the bottom
left widget. Do the same thing; I’m going to pull over the Featured Post widget, drop
that in. Here on the title field I’m going to give my new featured category section a
title so I’ll just add in a title there. This time, the category that I want is Green Juices
so I’ll select Green Juices right here. The number of posts to show — I’m going to display
two posts; I’ll just put in the number two. Scroll down; I want to order this by date
so that looks good. I do want to exclude previously displayed posts. Of course, we haven’t really
added this particular category yet to the homepage, so it really won’t apply at the
moment, but later down the road, if I decide to change the featured post in the top area
or throughout the site, then this way it will make sure to exclude previously displayed
posts. On the right hand side, I do want to include the post title so I’ll click on that
and just to show how this will display with the author and the date; I’m going to click
on this button right here to show the post info. For Content Type, once again, I’ll click
on ‘Show the Content Limit’ and I’ll limit it to say, eight characters. Next where it
says More Texts, to keep it consistent I’ll just add in Read More right there. Scrolling
down here where it says Show Featured Image, I’m going to click on that and this time I’m
going to use not the thumbnail or the home — large, but once again, the home — small
featured image which is two hundred sixty-six pixels wide. I’ll just click it right there.
The image alignment I want is left alignment so I’ll just add in left alignment. I’m good
to go so I’ll click on ‘Save’ to save these settings. Once the settings have been saved,
then I’m just going to come up to the top once again and close the box to collapse this
box. Finally, the last one we have here is the Home — Bottom Right widget so I’m going
to open that up and just as we did previously, I’m going to drag the Genesis — Featured
Posts widget over, give this new widget area a title so I’m going to add a title in there.
The category that I want is Smoothies this time, and just like the post here in the bottom
left section, to keep it consistent in this area, I’m going to add two posts. I’m going
to click on ‘Exclude Previously Displayed Posts’, click on ‘Show Post Title’, ‘Show
Post Info’. I’m going a little faster because we’ve already just done this. Content Type,
I’m going to choose ‘Show Content Limits’. I’ll make this once again eighty characters
and I will use the Read More text right here. Finally, scrolling to the bottom, I’m going
to click on ‘Show Featured Image’ and the image size that I want is the home — small
size of two hundred sixty-six pixels wide. The image alignment is left; so we’re all
good to go. Finally, I’m going to click on ‘Save’ to save these settings. Just as a quick
double-check to make sure that this lines up correctly, the limit here that I’ve for
the bottom right widget is eighty characters. The bottom left one here should also be eighty
characters which is great! Let’s take a quick look at the homepage to see what all the different
categories look like now on the homepage. Going up to the top, I’m going to hover over
the website name and click on ‘Visit Site’. Here we see our featured post right here with
the title and some content with the Read More link to read more. Then we have the beginning
of category number one, the featured category, Healthy Pressed Juice with the thumbnail,
the title, the content excerpts, and the Read More button. We’ve got three of those; then
we have these two right here. Note that this isn’t really lining up very well because this
word — Energizing Green Juice — has too many characters so it takes up two rows instead
of one. I want to keep this consistent so really quickly I’m going to go back and I’m
going to fix that. I’m just going to call it Green Juice. Going back to the dashboard,
actually I can go directly to the widgets if I hover over the website name. There’s
this Widgets link here that will bring me directly to the Widgets page so I will click
on that to save time. Going back to the bottom left widget right here; I’m going to open
that up and then I’m going to change it and take out this adjective here so it just says
Green Juice. Now, when I scroll down and click on ‘Save’ and go back to my website by clicking
on ‘Visit Site’, now we can see that everything looks really good. That looks so much better
because that’s all in alignment. Okay, great! The next step is; now that we have some parts
of the homepage set up, let’s continue by setting up the sidebar widget area. As a quick
preview of the content, we’re going to be adding to the primary sidebar widget area,
I’m going to jump over to my completed website over here. We can see we’ve going to be adding
an email opt-in form just the Genesis eNews Extended Plugin. Then, we’ll be adding an
Author Bio section with a thumbnail image, search box, an image that has a call to action
and a link to an internal page within the website. Then we’ll be adding some social
media icons here so anyone can connect with you easily on the social web. Finally, we’ll
be adding some images from Pinterest. These are the content types that we’re going to
be adding in this video. The great news about the primary sidebar and all sidebars and footers
in WordPress is that this is where you can add completely customisable content. If you
want to add something else and not include this, by all means, you can do that. I’ll
show you where you can do that in this video right now. Going back to our Widget area,
I’m going to go back to the website. I’m going to go directly to the Widgets by clicking
on ‘Widgets’ right here. Here we can see on the right hand side we have a Primary Sidebar
and a Secondary Sidebar. When I open this Primary Sidebar here, it notes: This is the
Primary Sidebar if you are using a two or three column side layout option. The Lifestyle
Pro Genesis child theme has the option of adding three columns if we’d like, which is
really great. In this video, I’m only going to be using the Primary Sidebar, but everything
we do at the Primary Sidebar you can set up similarly in the Secondary Sidebar. The first
thing that I want to add here is the Genesis eNews Extended Plugin which is right down
here. Earlier in the video we had installed and activated this plugin so I’m just going
to drag this up into the Primary Sidebar. Here, I’m going to give this a title so I’ll
just add my title in here. I’m not going to go over in this video how to set this up because
I have another video which goes over this step-by-step, from scratch telling you how
to set up this entire email opt-in form. I’m going to refer you to my other video, it’s
called Genesis eNews Extended: How to add Mailchimp Emails to your Genesis WordPress
websites. I’ll be sure to drop a link in this video right here so you can go through the
process of setting up your email opt-in form using the Genesis eNews Extended Plugin. Once
you’ve set up the email opt-in form using the Genesis eNews Extended Plugin following
the YouTube video on my channel, the next step is to add another widget. I’m going to
close this box by clicking on this button right here. The next widget that I’m going
to add is User Profile so I’m going to drag the Genesis — User Profile widget just under
the email opt in form. Here within the User Profile widget we can configure these settings
including a title, if you’d like; I’m not going to add a title, I’ll just leave it blank.
Then you’ll want to select the user; I’ll leave it with my name right there. Next we
have Gravatar size; I’m going to choose the extra large one hundred twenty-five pixels
size. Left alignment sounds good. Next you can choose what kind of description you want,
either an author bio or custom text. I’m going to choose custom text and then just add some
custom text in there. Next, scrolling down, choose your About Me page from the list below.
I’m going to click on the About page right here. Finally, you can decide what kind of
text do you want this link to go to. I’ll just click on ‘Learn More’, or I’ll type in
Learn More. This will be the text that will link to the About page. The next step is I’m
going to click on ‘Save’ to save my settings. Once you have all the settings set for this
user profile widget, then we can close it by clicking on this caret right here. The
next widget that I want to add is the search box. It’s always a good idea to have a search
box on your website so anyone can easily find content on your site. Scrolling down, here’s
a search widget right here. I’m just going to drag this to the top and I’m going to place
it right underneath the user profile. The title will be ‘Looking for something?’ You
can add any title that you like. I’m going to click on ‘Save’ to save this setting. Next
I’m going to add the simple social icons; these are the icons to all of your different
social networks across the web. In the earlier part of this video we had added the Simple
Social Icons Plugin to our site. If you don’t have this here, you want to make sure that
you go to the Plugin page and install and activate the Simple Social Icons widget. I’m
going to go and bring this to the top here just underneath the search box and then we
can all add of the different social networks that we want to show up as an icon. Starting
at the top here where it says Title I’ll just say ‘Connect on the web’. Next, if you want
to open links in a new window, you can check this box; I’ll go ahead and do that, that’s
a good idea. It’s always a good idea to open links in a new window when you’re sending
someone away from your website, that way your website is always still open on another page.
The icon size is thirty-six pixels; I’ll leave the default here, I’ll leave all these defaults.
For the colors right now, these will be customized for the website that I’m creating. Of course,
you’ll have your own colors but for the background color I’m going to change it from the default
of a gray color to this kind of red color right here — the background color and the
background hover color — I’ll add this new color code here, this is a shade of red. I’ll
be sure to include this code in the video in case you can’t read it. Next, you just
want to add all the different URLs for the social network that you want to be displayed
as icons. Once you’ve added all the different URLs for your different social network profiles,
then go ahead and click on ‘Save’ to save your settings. Let’s take a quick look at
the homepage to see how our sidebar is looking so far. Going up to my site, I’m going to
hover over the website name and click on ‘Visit Site’. Here we see on the right hand side
we have our email opt-in form, our user profile right here, our search box and our social
network icons. The two particular ones that we’re missing so far, jumping over to our
completed website, are the image here and image with the call to action and a link to
an internal page and then the Pinterest images down below. Let’s start by adding the image
to our website so that we can add this widget as well to the sidebar. Going back to our
site — I’m going to go back to our site. Here, I’m going to go directly to Widgets,
and then here on our Widgets page we need to add a placeholder for the image. Here in
Primary sidebar — I’m going to open this up once again, and then I’m going to scroll
down to the bottom. The widget that we need is the Text widget so I’m going to drag this
up to the Primary Sidebar and I want it to show up right underneath the ‘Looking for
something?’ field right here. This is where we want to add our image. We don’t have an
image yet and we don’t have a link so I’m just going to save this as a placeholder by
clicking on ‘Save’. The next step is we need to add both an image as well as a new page
so that we can link the image to the new page. First I’m going to create the image or add
the image, I should say, by going up to the top, hovering over ‘+ New’ and clicking on
‘Media’. Next, I’m going to select a file by clicking on ‘Select File’. Here on my files,
the image that I want is this one that says ‘Sign Up’. I’m going to click on ‘Open’ to
open this file. Once the image has been uploaded, then I can edit it by clicking on ‘Edits’
and the first thing that I want to is give this a little bit better of a title; ‘Sign
Up’ is not very descriptive. I’m going to add another title right here: Get Your 14-Day
Detox Cleanse Program. Once you have the title set, you can also add an alternative text.
Once you have those two things set, go ahead and highlight this URL. This is the URL that
we’re actually going to need so I’m going to highlight this and copy it, then I’m going
to click on ‘Update’ to update this media image. Note also that the dimensions of this
particular image for the sidebar that I’m using are three hundred pixels wide and three
hundred pixels tall (300×300). The height doesn’t really matter that much but the width
does matter because the width of the sidebar is about three hundred pixels wide so whatever
image you upload I recommend using three hundred pixels for the width. Once you have your image
ready to go, and we’ve already highlighted and copied this URL, let’s go back to the
widget area to add the image to the widget. I’m going to go back to ‘Appearance’, click
on ‘Widgets’ and then I’m going to go to the Primary Sidebar. I’m going to go to the Text
widget right here and I’m going to add some HTML to add an image to this particular widget.
I’ll be sure to drop this HTML in the video in case you can’t see it. This is the code
that I’m adding; this is HTML code for an image. You want an opening bracket and then
img then there’s a space then it says ‘src’ for source then an equals sign, quotation
and then you have the actual URL of the image and then you have another closing quotation
and a closing bracket. When you have that all set and ready to go,
click on ‘Save’ to save this setting. Once the settings have been saved, so far we’ve
just added the image. We haven’t linked it to anything so the next step is we need to
create a page so that we can link this page to an internal page on our website. To create
a new page I’m going to go up to the top, hover over ‘+ New’ and click on ‘Page’. Here
on my ‘Add New Page’ screen I’m going to start by giving my new page a title. Here in this
white box I’m going to add some content just as we did in the previous examples. The page
that I’m going to create right now is going to be a landing page. Landing pages are used
to focus attention on any kind of product or service that you’re offering and a call
to action that you want your reader or viewer to take. Even in the title here we can see
this is actually the call to action which is to Get Your 14-Day Detox Cleanse Plan.
Of course, in order to incentivise someone to actually sign up to anything, you need
to give them some reasons. I’m going to add in some demo content right here which as we
can see I’m going to include reason number one why you should sign up, reason number
two and reason number three. You can read all about landing pages out there on the web;
there are lots of great tips out there and I encourage you to check that out. For now
I’m just going to leave this text here. I’m also going to add an image by placing my cursor
where I want the image to be displayed. I’m going to click on ‘Add Media’ to add media.
Next here within the media library I’m going to choose the image that I want then I’m going
to scroll down and I’m going to select the display settings. I want this alignment to
be right-aligned so I’ll click on ‘Right’. I want it to link to nothing so I’ll click
on ‘None’. The size that I want, I actually want a smaller size so I’m going to choose
the three hundred by three hundred size; then I’m going to click on ‘Insert Into Page’ to
insert this into the page. When I click on the ‘Visual’ tab here we can see the image
displayed next to the text. On the right hand side we have the Page Attributes. When I scroll
down, we can see there’s this view right here for Template. When I click on this, this is
how we can create a landing page using the Genesis child theme called Lifestyle Pro.
I’m going to click on ‘Landing’ right here to add the landing page template. Then I’m
going to scroll down, you can add your Theme SEO Settings for this page right here. The
layout setting that I want actually is going to be the full width page for with contents.
Then scrolling down I’m going to turn off discussion on this page because once again,
this is not a post, this is a page and I don’t want any comments happening on my landing
page because that would be super distracting from my call to action. I think we’re all
set and ready to go; I’m going to click on ‘Publish’ to publish my new page. We’ll be
coming back to this page a little bit later in the video because I still need to add the
email opt-in form to sign up for this particular offer. For now, I just want to select the
URL here so I’m going to click on ‘View Page’ to view the page. We can get a quick preview
of it, at least. Here we see that with the landing page, the logo, the banner, the menu
items are all no longer there; they’re no longer displayed at the top. The total focus
on attention on this page is on your offer, your call to action, the reasons why someone
should sign up. When we’re done — we’re not quite done right now; we’ll take care of this
a little bit later in the video — we’re going to add a call to action email opt-in form
down below at the bottom. Right now though, I just want to highlight the URL of this page;
highlight it and copy it and then I want to go back to my widgets page by clicking on
‘Widgets’. Here under Primary Sidebar I’m going to click on that then I want to scroll
down to the text placeholder here where that image was and I need to add the link. This
way, when anyone clicks on the image, on the sidebar, they’ll go directly to my offer on
the landing page. No worries if you can’t read this, I’ll be sure to drop this code
in the video so you can see it a little better. The link code that we’re adding starts with
bracket a href equals quotation then you have your actual URL to the landing page followed
by a quotation, a closing bracket; then after all of the image code right here we have a
closing link bracket right here. This is the
code that we use for both the image and the link. I’m going to scroll down and click on
‘Save’ to save these settings. A quick little trick; if you can’t remember or if you’re
not sure of the code or if you’re just learning code, a quick little trick to get the code
is to simply create a temporary poster page by going up to post. Then you can take advantage
of WordPress Behind-the-Scenes code generator by simply adding whatever it is in here. I’ll
add that image really quick by clicking on ‘Add Media’. This isn’t a part of our website;
this is just a quick demo to show you how to get the code. I’m just going to add the
image in right here — this is the image — then I’ll click on ‘Insert into Post’. Then we
can highlight it and then we can add the links. When you highlight anything, text or images,
then you see there’s this link icon right here. When I click on this link, here you
can add the actual URL wherever you want this particular image to go to. So this is just
a quick trick you can remember how to do the code that’s how you would do it. Then you
would just click on update to update it. Then when you click on save draft, and then when
you click on text here is the code that you would grab. So you would just highlight all
of this and copy it, and then you would paste it in your text widget in the widget area.
So that’s just a quick little way to create the code if you’re not familiar, if you can’t
remember how to create the code. Okay so I actually don’t want this page so I’m going
to move it to the trash by clicking on move tot rash. And now let’s just take a look at
that image that we added to our sidebar. So going up to the website I’m going to click
on visit sites and here we have a sidebar on our website. Everything looks really good,
here is the actual image that we just added in the previous step. When I click on it,
it will go to the landing page offer on the website which is really great. So going back
to the homepage, the last widget area that we need to add is the Pinterest widget area
with the Pinterest images from my Pinterest profile. So going back to my dashboard I’m
going to go up to the website name and click on dashboard. And in order to create the Pinterest
images in the sidebar we need to add a new plug-in. So I’m going to go down to plug-ins,
hover over plug-ins and click on add new. Then here on the plug-in screen I’m going
to do a search for the plug-in that we need which is the Alpine Photo Tile for Pinterest
plug-in. So I’m just going to add that here in the search box, and then I’m going to click
on search plug-ins. Here we see it’s at the top, Alpine Photo Tile for Pinterest this
is the one that we want. So I’m going to click on install now to install this plug –in.
Are you sure you want to install this? Yes okay. And once the plug-in has been successfully
installed I’m going to click on activate plug-in to activate the plug-in. Okay once the plug-in
has been activated now we can go back to the widgets area by hovering over appearance and
clicking on widgets. Next here on the primary sidebar I’m going to open this up by clicking
on this carrot and then I’m going to scroll down and then I’m going to find the Alpine
Photo Tile for Pinterest widget which actually is at the top. So I’m just going to drag this
to the bottom of my primary sidebar right there and drop it in. Then we can set up the
settings for this particular plug-in. So the first thing I want to add is the title so
I’ll use a call to action, get inspired follow on Pinterest. Next on Pinterest settings we
can choose where we want to retrieve the photos from, either from the user at large or a specific
board. I’m going to choose a board because I want a specific board to show up. Next I
need to add my Pinterest user name so I’ll add that in right here along with the Pinterest
board tags. I’ll just add the board tag right there, healthy food inspirations. So that
is the board name and the Pinterest username. Next where it says image links or the number
of other options, you cannot link images linked to the Pinterest page, a URL, or a light box.
I prefer a light box because that will keep everyone on my page, they won’t be sent away
from my website so I’ll choose a light box. I do want to include a pin it button and I
do want to display a link to the Pinterest page so I’ll click these two right here. Next
over here on style settings there’s a number of different items you can choose right here,
lots of different options. I’m going to choose windows, next we can choose the shape. I’m
going to choose a rectangle shape not a square. The photo size that looks good 192, and the
number of photos that I want to have displayed I’m going to change this to six. Next scrolling
down everything else looks good, I’ll leave the format settings default as they are right
here and then I’m going to click on save to save my settings. Now when we check out the
settings on the homepage by going up to the site by clicking on visit site, now we can
see our sidebar. We’ve got our email form, our user profile, the search box, our call
to action with this leading to the landing page. Some social network icons and we have
all of our beautiful Pinterest pins which when you click on each one of these it’s going
to open to a really cool light box display and keep everyone right on my website. So
now that we have the sidebar all set up on our website, let’s also set up the footer
section down below. There’s a footer area right above these footer credits that we can
add. So to add that once again I’m going to go back to the widget section by clicking
on widgets, then here on the right hand side we can see there’s a footer one, two and three
section widgets. So there’s three different areas for our widget section in the footer.
For footer number one I’m going to add those social media icons once again. So I’m going
to scroll down and add those by just dragging those up into footer number one. Now I’ve
already gone over how to set this up so I’m going to do this behind the scenes. I’ll just
use this as a placeholder now, if you want to refer to the previous example of how we
set that up that would be great. So I’ll do this behind the scenes, for now I’m just going
to close this. Next for footer number two I’m going to add a short description about
the website. So I’m going to open up this area by clicking on this arrow, then I’m going
to scroll down grab the text widget and drag that up into footer two widget area right
there. Then I’m just going to add a title then once I add the title then I’ll add a
short description about the websites. So I’ll just post in some demo content right there,
then I’m going to scroll down and click ion save to save the settings. Finally for footer
number three I want to add a video. To add a video I’m just going to drag this text widget
here, drag that into the footer three widget area. And from here we need to go to YouTube
and grab the embed code for the video. So here we are on the YouTube channel and this
is the video I want to add to the bottom right hand section of the footer. So to grab the
embed code I’m just going to scroll down, click on the share button right here and then
YouTube will provide the embed code down below. Now I want to create a custom size because
the width of the footer section is 300 pixels wide, so I’m just going to add 300 in here.
We can see that YouTube automatically adjusts the height as well. So from here all we need
to do is copy all this code, highlight it and copy it, then going back to our widget
area over here in the text field I’m just going to paste the code in this white box.
Once you paste the YouTube video code you can just scroll down and click on save to
save the settings. From here to check out our website I’m going to go back up to the
top and click on visit site. And here we have our website using the lifestyle pro Genesis
child theme. So we have our sidebar on the right hand side. Our header, our menu items
and our blog featured posts and categories. Then at the bottom we have our social icons,
a short description about the site and then a video. Okay and so the next part that we
need to do is we need to add actually the landing page to the menu area right here,
and then we need to completely customize this entire website. I also want to add a couple
additional pages to the site as well. So for starters let’s add the landing page to the
menu area right here in the secondary navigation area. I’m going to do that by going up to
the top and going directly to the menus page and clicking on menus. Here on the menus page
we can see here is the new landing page that I added, get your 14 day detox cleanse plan.
So I’m going to click on that and click on add to menu. Then I’m going to move it up
just a little bit right after the about page right there. And I’m also going to change
the title of this menu item so I’m going to click on this button right here, and then
in this area here where it says navigation label I’m going to add a new label. Then I’m
going to scroll down and I’m going to click on save to save the new menu. Once the menu
has been saved now I want to add two more pages to my website so that I can add them
to the navigation area – both the primary navigation above the banner, and another menu
item and secondary menu navigation below the banner. So to create those pages once again
I’m going to go up to the top click on plus new and click on page. Then here on the add
new page the first page that I want to create is a recipes page so I’ll just add in recipes
for the title. Then I’ll add some content, I’ll keep it as a default template, then I’m
going to click on publish. Actually before I click on publish because this is a page
not a post I’m going to click on screen options, make sure discussion is checked right here.
Then I’m going to scroll down and I’m going to turn off the discussion, comments and track
backs once again because I prefer to keep comments on my blog posts not on my pages.
Once the page is ready to go I’m going to click on publish to publish this new page.
Once the page has been published, the next page that I want to create is a shop page.
So I’m going to do this pretty quickly since we’ve gone over pages already. But this is
a page that I want to have appear and display above the banner, and I want it to be a shop
page related to some products that we may want to offer for sale. At the top I’m going
to hover over plus new and click on page. Here for the page title I’m going to call
this Shop. Then for the text here I want to add two images which will represent some kind
of product that I may want to offer. This could be both a physical product as well as
a digital informational product. So here in this particular box I’m going to click on
the visual view so we can see what it looks like. I’m going to place the cursor in the
white box and click on add media to add media. Then I’m going to click on upload files and
select files, then once WordPress has uploaded the image to your website here on the right
hand side you can add your title as well as the alternative text. Also know for this particular
example I’m also going to add a caption so I’ll add the same thing right here. Okay once
you have your caption title and alternative text added, then scrolling down I can choose
my display settings. I will just leave it as the left line I guess, or center, actually
I put no alignment. This is an important part so when I click on this so there’s lots of
different options. We can click to a media file which is the actual image itself which
is not very helpful, or an attachment page, a custom URL, or none. Usually I click on
none, but in this instance I’m going to click on custom URL. Because if this is an image
that you actually want to sell it would be great to be able to click on the image from
within your website and be sent to another page. Either to an internal page that talks
about the image or if you have an affiliate product you can add your affiliate link right
in here. I often get questions about affiliate products so this is one option, one way to
feature affiliate products on your site and include your affiliate link by just adding
it right here in this field right here. So imagining that I have an affiliate account
from Amazon set up, I’m just going to add the Amazon URL right here. of course I don’t
really have an Amazon affiliate link for this product but just for the demo purpose I’m
going to add the Amazon link right here. Then for the size let’s see, of all these sizes
I’m going to go with the medium size 200 x 300. We’ll see how that looks. Once it’s all
ready to go and you have all the settings like you want them to be, go ahead and click
on insert into page to insert this image into the page. Okay that looks great. So I’m going
to do this one more time because I want to add another image to my website right here.
So I’m just going to add media one more time and click on upload files, and select files.
This time I’m going to choose the kale recipes image right here, highlight that, click on
that, and then click on open. Next once the image has been uploaded I’m going to give
this a title caption and an alternative text. Okay, once I’ve got that set up I’m going
to scroll down and just as we did in the previous step I’m going to say alignment none, link
to I’ll make this a custom URL and once again I’ll add my Amazon link right here. Again
this is not really an affiliate link but if you have one you could add one right here,
or an internal page, or a PayPal link, or pretty much any link you’d like and of course
if you don’t want a link to anything you can just click on none. So I’ll leave it at that.
The size I’ll keep as medium 200 x 300 and then when I’m all ready to go I’ll click on
insert into page to insert this image into the page. Okay so here we are on the shop
page. We can see i have the two images lying vertically one by one. I actually want to
have these horizontally lined up right next to one another though. So in order to adjust
that I’m just going to click on this image once and when I do so I get two icons, an
edit icon and a delete icon. Of course I don’t want to delete anything so instead I’m just
going to click on the edit icon right here. And I need to change the alignment, right
now there’s no alignment. So I’m going to set this to left alignment then I’m going
to click on update. I’m going to do the same exact thing for this image down below. I’m
going to click on it once, then click on the edit icon right here and I’m going to change
the alignment from none to left alignment. Now when I click on update these show up one
by one right next to one another which is exactly how I want to have it displayed. Once
you have this set up the way you like go ahead and click on publish to publish the new page.
Okay great, so now to view the page I’m going to click on view page. And here we see that
I have my shop page with my two images and when I click on either one of these it’s going
to send me to Amazon.com because that is the external link that we set up. So once again
if you had an affiliate link that would work out really well for the demo though I’m just
going to keep it at Amazon.com. Then I want to add this particular page to the top primary
navigation bar so let’s do that now. I’m going to go to the top, hover over the website name
and click on menus. Then I’m going to click on shop but actually notice that this is the
actual main primary menu so I actually need to create another menu, the top menu. So I’m
going to click on this button here that says create a new menu, then here for the menu
name I’m going to call this top menu, and then create the menu click on this button
right here. Once the top menu has been created, now we can add items to this particular top
menu. So I’ll add the shop item, shop page right there click on that, and then click
on add to menu. Then once that shows up right there for the top menu I’m going to click
on save menu to save the menu. Now when we go to menu locations, manage locations at
the top this tab that says manage locations for the primary navigation menu I’m going
to select a menu by clicking on top menu. So now we have two menus that will be displayed
on our website. The last step is I need to save this by clicking on save changes. Okay
great, so now take a look at our website. I’m going to back to the website name and
click on visit site and here we have the top menu right here. Top menu item, the shop page.
And then we have all the other items down below which looks really great. The other
last thing that’s missing though, I have not yet added the recipes page right here so one
more time I’m going to go back to the menu by clicking on menu, then here where it says
recipes I need to find the main menu. So once again where it says select the menu to edit
I’m going to edit the secondary navigation menu right here by clicking on select. Then
I’m going to click on this recipes pages that I created and click on add to menu. Then I’m
just going to reorganize all of this right here. So the first thing that I want is I
want this one to show up first. Then I’ll add the blog page right there, or I should
say the recipes page. And then yeah you can order this or sort this the way you’d like.
So once you have everything ready to go, go ahead and click on save menu to save your
menu. Once the menu has been updated there’s two more features that I want to add to this
site before we check out the site. Number one, I want to add the social sharing icons
at the bottom of the blog post and number two, I want to add an email opt-in form to
the bottom of blog posts as well as to the bottom of the landing page. Related to or
regarding the email opt in form when we go to my completed website over here, we see
this is the landing page on my completed demo site. And when we scroll down we have this
email opt-in form. This is one of the two features that I want to add right now to this
site. First though let’s add the social sharing features to the website by going back to our
site. Then I’m going to click on plug-ins, the plug-in that we’re going to be using is
the Jetpack plug-in which should have come with your WordPress installation. We can see
it right here I have it listed. If you don’t see it here in your plug-in list then you
want to go to add new and you want to search for the Jetpack plug-in, you want to install
and activate this plus-in. So here we have it Jetpack by WordPress.com I’m going to click
no activate to activate this plug-in. Next we see okay Jetpack is almost ready but a
connection to WordPress.com is needed in order to enable the features. So I’m going to click
on this button right here to connect to wordpress.com. Next we’ll arrive on WordPress.com where if
you already have a wordpress.com account you can sign in with your username and password.
I already have an account and so I’ll sign in, in just a moment. If you need an account
though you can create a free account by clicking on this button that says get started. Once
you click on get started you’ll arrive at the sign up page, the only little catch with
this is that this is a sign up page to create a blog and we already have a blog so we really
don’t need a word[press.com blog. All we really need is a wordpress.com username and password.
To kind of circumvent this part when you come over to where it says wordpress.com free you
click on this little arrow right here. You’ll see actually where did it go, there we go.
If you hover over this it’s kind of tricky but if you kind of like hover over it right
here you’ll get this little message that says, if you don’t want to blog you can sign up
for just a username. That’s the one that we want so I’m going to click on that link to
sign up for just a username. Now you’ll see you can fill in just your email address, a
username and create a password, and then click on the button to sign up and create and WordPress.com
account. So go ahead and do that now and I’ll see you on the other side once I’ve logged
in to my wordpress.com account. Once you log into your wordpress.com account and then you
click on the Jetpack connection button you should come to this page where you can authorize
Jetpack to connect with WordPress.com. So I’m going to do that now by clicking on authorize
Jetpack and here we see Jetpack has been authorized and it will have this message that says welcome
to Jetpack 2.9, 2.9 is the current version at the time of this recording. In addition
to the welcome message you’ll also see all of these features down below, all of which
you can add to your WordPress website. The ones that we want right now I’m just going
to go down the list here. The one that I want is Jetpack comments so I’ll go ahead and activate
that by clicking on activate. Then once the Jetpack comments have been activated I’m going
to scroll down and see the other one that I want here, here is the sharing feature right
here. So I’m going to click on configure to configure the social sharing features. Here
on the sharing settings when we scroll down we can see all the different available services
that we can add to the bottom of our blog posts. So the ones that I want to add will
include Facebook so I’ll just drag that and drop it right here. Then I’ll add Pinterest,
I’ll also add Twitter, Google Plus and the other ones I’m going to all add on this smaller
more box right here. I’ll add LinkedIn and Tumbler, Read It and email in this box right
here. You can see a visual live preview of what it will look like on the site so you
can see here are all the different buttons and how they will be displayed underneath
the blog post. Then I’m going to scroll down the sharing label I’ll just leave it as Share
This. Then where I want to show these buttons, I want to show these on my posts so I’ll click
on posts and then I’ll click on save changes to save the changes. So now when we check
out the blog posts by going up to the site and clicking on visit site. Then when I scroll
down and click on one of my blog posts right here I’ll click on this one. We can see when
I scroll down to the bottom of the blog posts now we’ll see the social sharing icons here.
Okay so we’re good to go on the social sharing icons. The last feature that I want to add
to the website is that email opt-in form at the bottom of the blog post as well as at
the bottom of the landing page. So to add the magic action box I’m going to go back
to the dashboard, click on dashboard. Then here on the dashboard I’m going to scroll
down to plug-ins, click on plug-ins. Then the plug-in that I need to add here because
I don’t have it yet is the magic action box. So I’m going to click on add new, then in
the search field as you search for the magic action box and click on search plug-ins then
here it is right here. I’m going to click on install now, are you sure you want to install
this? Yes, okay. And once the magic action box has been successfully installed I’m going
to click on activate plug-in to activate the plug-in. Okay once the plug-in has been activated
now we can see the Magic Action box settings on the left hand side as well as the action
box right here. From here to continue setting up the Magic Action box and the email opt-in
forms for your blog post and your landing page I’m going to refer you to my other video
on my YouTube channel which shows you how to capture leads on your WordPress website
with one plug-in which specifically refers to the Magic Action box. So in this video
I guided you step by step from scratch in completely configuring and setting up the
Magic Action box and adding the email opt-in forms to your pages and posts. So I’ll be
sure to drop this link in the video so that you can check this video out and set up your
email opt-in forms. Once you’re done setting up your email op-in forms by following this
video then we can jump back to our website and pretty much we’re done totally adding
the content to our site. So to check out the site I’m going to go up to the top and click
on visit site. And here we can see all the content that we’ve added to the Lifestyle
Pro Genesis Child Theme. We have the top menu navigation area, the second menu navigation
area, the title, the tagline, our featured posts and categories, our sidebar, then scrolling
down we have the footer section down below. So the final thing we need to do this is the
fun part now, we get to completely customize the complete style and look of this entire
site so that when we’re done it will look just like the completed demo site over here
with a white background, larger navigation menu items, we have the Google fonts added
to the title and tagline, and we’ve completely customized this entire website. So the next
step is let’s move forward in customizing the style and design of the Lifestyle Pro
Genesis Child Theme. Before we start customizing the Lifestyle Pro Genesis Child Theme by Studio
Press it’s always a good idea to create a child theme so that our changes are not overwritten
when the developer comes out with an update to the framework or the theme. In the case
of the Lifestyle Pro Child Theme though we already have a child them, the Lifestyle Pro
Theme is the child theme, the Genesis framework acts as the parent theme. We have our parent
theme and we already have our child theme. The question then is how do you safely customize
a child theme? So in order to do that we need to create a custom style sheet for our child
theme. So I’m going to refer you to this video where I guide you step by step from scratch
in creating a custom style sheet. This is a really important thing to do so that once
again when any updates come out to the Lifestyle Pro Child Theme your changes and customizations
will not be overwritten. So I encourage you to first check out this video and once you’ve
set up your custom style sheet then I’ll join you back on the website where we can begin
create our customizations to the Lifestyle Pro Genesis Child Theme. Back on my WordPress
website I’ve already created the custom style sheet so now I can safely customize the Lifestyle
Pro Genesis Child Theme. The first part that I’m going to customize is this top section
with the top menu, the secondary menu, the banner, the title and the tagline. This was
a request that I received from Shelly so thank you Shelly so much for the question. This
is a common section that pretty much everyone wants to know how to customize because it’s
the first thing that we see on the website. Let’s take care of customizing this section
starting with this green emerald green, kind of block banner right here. I’m going to transform
this and change this to an actual image. So the first thing that I want to do is I need
to upload the image that I want to add to replace this green section right here. So
going up to my top toolbar I’m going to click on plus new and click on media, and I’m going
to upload the header image. Here on the new media screen I’m going to click on select
files, then here among my files I’m going to choose this file, this is one that I want
to add to my site. I’m going to highlight that, and click on that, and click on open
to upload this file to my WordPress website. Once the image has been uploaded, then I’m
going to click on this button to edit the image, then here on the edit media screen
I’m going to give the uploaded image a new title and alternative text since this is not
very descriptive. So I’ll just call it by my URL right here, so I’ll just add that.
And then I’ll add the alternative text down below. Next, the important part is I want
to highlight this URL here we’re going to need this in just a moment. So I’m going to
highlight this and copy it, then I’m also going to update the changes that I made to
the image. Then once we’ve highlighted and copied the URL for the header image I’m going
to go back to the website by clicking on visit site. Here I’m going to open up a developer
tool called Inspect Elements, this is a tool that you can find on the Google Chrome browser.
So here I am in Google Chrome, I’m going to go up to the top right hand side, click on
these straight lines which will give me a drop down box. I’m going to click on tools,
and then I’m going to click on developer tools. This will open up the Inspect Elements panel.
On the left hand side you’ll see all the different HTML code, that’s the different structure
and layout of the homepage. And on the right hand page you’ll see all of the different
CSS styles. Now the great thing about this particular Inspect Elements tool is that this
kind of acts as a sandbox, we can change all the different styles on the right hand side
and it will be actually set in the website until we add the new code to our custom style
sheet. This is a safe place to experiment with various styles. Okay so now I want to
find the code that is generating this emerald banner background right here. Drilling down
one by one we can see when I click on different code it highlights different sections of the
site here. And that is kind of a good indicator that we’re getting close to the code that
we need. So here we can see this is the primary navigation bar, and then here we have the
site header and this is what we want. So we can see when I click on this right here then
the exact section that I need highlights so that indicates that we’re on the right code.
On the right hand side we can see that the CSS code is .site-header. And we can also
see the palate color here, this emerald color for the background color. I want to replace
this color with an image so I’m going to click on background here and I’m going to remove
the color section, the color part of the actual code and I’m just going to leave it as background.
Then instead of having this color I’m going to replace that with an image by adding the
image right here. No worries if you can’t see this I’ll be sure to add this in the video
so you can see this a little bit better and there we go. So we can see that I just replaced
the emerald color with this new background. So next I’m going to copy all of this right
here, all of this code that I just created. I’m going to highlight it and copy it, and
then I’m going to add it to my custom style sheet. Going back to my custom style sheet
I’m going to click on dashboard. Then I’m going to scroll down to appearance and click
on editor, and here on the edit themes panel we can see that we have two different styles-
the original child theme style sheet right here which I’m not going to touch. I’m going
to leave that as it is and instead I’m going to add all of my custom styles to the custom.CSS
files so that the changes will be safely added. And if any kind of updates are added to the
Lifestyle Pro Theme then our customizations will not be lost. So this is a really important
thing. So I’m going to click on custom.css, and this is where I’m going to add all of
my custom styles starting with the image on the banner section right here. Now note that
once we add this, it’s not totally complete. We have this opening kind of tilde bracket
right here we need to close this off with a closing tilde bracket. This is what we have
.site-header, there’s a space, there’s an opening tilde bracket. It says background
with a colon, a space, URL, parenthesis, quote and here we have the actual image URL followed
by a quotation, a parentheses, a semi-colon and the closing bracket. I’ll be sure to drop
all of this in the video so you can see it really easily, then I’m going to come down
here and click on update file to update my file. So looking at the code really quick
on the site header I just noticed that I forgot to add one small element so I’m just going
to add that in here. I’m going to add the no repeat code right here within the CSS.
I’ll be sure to drop that as well in the video once you add no repeat, then I’m going to
scroll down and click on update file to update the file. Once the file has been edited successfully
then we can check out the changes by going up to the top, hovering over the website name
and clicking on visit site. Here we can see the image in the banner section so that looks
really good so far. The banner’s starting to take some shape. The next step is I want
to change the title as well as the tagline by adding some Google fonts. Google fonts
are a great and easy way to add some extra design elements to your website. And the best
part is that they’re free. So to add Google fonts is a two step process. Number one we
need to go to Google.com/fonts and we need to find the font that we want. For the title
I want to add kind of a script handwritten kind of script font which I’m going to use
this Sacramento one right here. Here we see what it will look like, normal 400 is the
weight of it and we can see that it has this handwritten effect. This is the one that I
want. To add this to the site there’s a button here when you hover over it or click on it,
it should say quick use so that’s the one we want. I’m going to click on quick use then
we can see here it is right here Sacramento. When I scroll down I’m going to leave the
character set to Latin that looks good. Then there’s three different ways to add this code
to your website. Either a standard import or JavaScript method. So the method I’m going
to use is the method that is recommended on the studiopress.com site so I’m going to click
on at import. Then I’m going to grab all of this code right here, I’m going to highlight
it and copy it, then going back to my website I’m going to click on dashboard. Then I’m
going to scroll down to appearance and editor, then I’m going to go to custom.css and step
number one is we need to add the Google fonts to our custom style sheet. Note that it’s
important to add the Google fonts at the top of the style sheet not at the bottom. If you
add it underneath the other code then they will actually not work. So make sure that
when you do add Google Fonts you add them first before adding in any of the other styles.
Once you’ve added the Google font import code at the top then scroll down step number two.
We need to associate this font with some of the code, some styles on the page. So to find
which style that would be for the title I go back to site, click on visit site and here
we are on the website. Now there’s two methods to open up Inspect Elements. Number one we
can go up to the top right hand side as we did previously, click on the three lines,
then click on tools, and then click on develop tools; or a faster method to go directly to
Inspect Elements when you’re on a Mac is to hover over the Element that you want, click
on the control key, then click on your mouse or your keyboard. This will open a box and
then you can go directly to Inspect Elements. Now if you’re on a PC you can do the same
thing by right clicking and then clicking on Inspect Elements. So going forward this
is a method I’ll be using in the video since this is a much faster way to open up Inspect
Elements. Once again all you need to do is click on the control key then click on your
mouse or keyboard when you’re hovering over this particular section elements that you
want, then click on Inspect Elements, and if you’re on a PC right click and click on
Inspect Elements. Okay great so when I do that, when I open yp Inspect Elements when
I’m looking at this title we can see that it goes directly to the code that I need right
here. And on the right hand side we can see the code that needs to be changed. So .site-title
and there’s a space and A, we can see that the color is white and this is the code that
we need to change. Now scrolling down the CSS here, just scrolling down we can see all
the other different styles for this particular element and let’s see if we can find the current
font family. Here we see it’s crossed out Roboto Slab and Sans Serif but here it is
right here. So .site-title and then we see the font family is this Sans Serif Roboto
Slab font right here and this is the one that I want to change. So just clicking in this
area right here my little sandbox I’m going to change this to Sacramento, making sure
that I include two different hyphens in between here. We can see automatically it changes
to that handwritten kind of font right here that we’ve added to our custom style sheet.
That looks good so far. Now the other thing here is this is rather small so I want to
change the font size from 50 pixels I’m going to change it to 84 pixels. I’ll just make
it a little bit larger. And there we go. We can actually make it a little bit smaller
but anyway that gives us a general idea. Okay so once we have that all set then I’m just
going to highlight the code that I just changed in my little sandbox here, highlight it and
copy it. Now I’m going to go back to my custom style sheet by clicking on dashboard, then
I’m going to scroll down to appearance and click on editor. Then I’m going to click on
custom.css to go to custom style sheet, and then I’m going to paste the code that I just
copied in the previous step making sure that I close it all off with a closing bracket.
So we have the opening bracket right here, and we have the closing bracket right here.
I’ll be sure to drop this code in the video so you can see it a little bit better. Then
I’m going to scroll down and click on update file to update the file. Once the file has
been edited successfully we can check it out by going up to the top and clicking on visit
site. And here we see the new title font, with a larger size and the Sacramento Google
font. Okay so the next step here for this description it’s a little bit small, it’s
hard to read so I want to increase the size of the font and I also want to add a Google
font here as well. So to add Google fonts I’m going to go back to the Google fonts page.
This time I want to add a Josephine Sans font so it’s going to look like this. Then I’m
going to click on the middle button here that says quick use and once again I’m going to
choose the style that I want, 400 is a little bit small so I think I’ll go with the semi
bold of 600 to make it a little bit stronger. Actually I’ll go with bold and 700, we’ll
see what that looks like. Then I’m going to scroll down, click on the import symbol right
here and I’m going to copy all of this code right here. Once I copy that I’m going to
go back to my website, I’m going to go to the custom style sheet by clicking on dashboard,
going down to appearance, clicking on editor, then clicking on vustom.css. Once again as
we did in the previous example I’m going to add my Google fonts right here, add it right
there and then I’m going to scroll down and I’m going to click on update file. Now note
that I’ve included all of these different versions of the Josephine Sans, I actually
don’t want that because the more Google fonts you add to your page, you can kind of start
to slow down the page. So I definitely don’t want to slow down the page with fonts that
I’m not using. So just checking on the Google fonts right here when I go back up to the
top it looks like I had checked all of these. I don’t want all of these checked so I’m going
to uncheck these two, and you can only see on the right hand side the page load time.
So note that when you click a lot of these it’s just going to keep going up, we don’t
want that. I’m going to uncheck the ones I don’t need and I’m only going to use the one
that I want which is the bold 700. So copying this one more time, highlighting it and copying
it then going back to my site here I’m going to replace this version with my new version
which is just one version of the Josephine Sans Google Fonts. Then I’m going to scroll
down and click on update file to update my file. Once the file has been updated successfully,
now we need to tag this Google Font to a specific element on the page just as we did the previous
example. So going back to the site I’m going to click on visit site, then here where the
description is I’m going to hold down my control key on my Mac, and then click on the mouse
key, then I’m going to click on Inspect Element. Once again if you’re on a PC you can click
on right click, and when you right click then you can click on Inspect Elements. Okay so
here we see the particular site description right here, we can see it right here on the
right hand side CSS. So scrolling down just to check out the font family we can see once
again it says Roboto Slab Sans Serif right here and it’s the H2 header two section. I
don’t want to do this all H2 throughout the entire site. I really just want ti to be specific
related to the site description because I only want this Google Font right here, I don’t
want it on every header 2 within my entire website. So scrolling down let’s just check
to see if the font family is listed anywhere else and it looks like it’s not. So in that
case here where it says site description I’m going to add a new font family by just clicking
in here. Then I’m going to type in font-family, then I’m going to add a kind of hyphen or
a little line, I’m going to add in the Josephine Sans, and then close it off right there, and
then we can see it has changed down below. Now note that the font size is really small
right now so I’m going to change it from 16 pixels, I’m going to double that to about
34 pixels and we’ll see how that looks. So that looks a lot easier to see so I’m going
to use that size instead. Okay so then I’m just going to copy all of this code right
here, I’m going to highlight it and copy it. Note that I’m not going to be adding any of
the code that we haven’t changed. We haven’t changed the color, or the line height, or
the margin so actually I might change the line height so that it syncs up well with
the font size. But otherwise I’m not really going to add the color but I’m going to copy
everything right now because it’s a lot easier to copy everything and delete it later. Once
you’ve highlighted and copied all of this code right here, then I’m going to close this
down and go back to my custom style sheet by clicking on dashboard, then going down
to appearance and editor. Then I’m going to click on my custom.css file, and then I’m
going to paste my code that I just copied in the previous step making sure that I close
it off with a closing tilde bracket. Okay now as I mentioned I didn’t change the color
so I’m going to delete that because that’s not a custom code, that’s the original code.
And the font size I’m going to keep at 34 pixels, the line height actually I do want
to change that because it’s like double the size of the font. So I’ll make this about
40 pixels and then I did not change the margins either so I’ll leave it like that. Once you
have everything ready to go I’ll be sure to drop this code in the video so you can see
a little better, then you want to click on update file to update the file. Now going
back to the site by going up to the top and clicking on visit site, now we can see the
new title right here. We have our new title with the Google font and we also have our
description with a Google font and a larger size. So looking at this top section right
here, the next part that I want to customize is the top menu right here, as well as the
secondary menu down below. Number one, the font is a little bit small so I’m going to
increase the size. I also need to change the background color here from that emerald to
white, and finally once again I want to add some Google fonts. This will be the last Google
font that we’ll add. So going back to Google fonts the one that I want to add is the Open
Sans Condensed so there it is. I’m going to click on the middle quick use button, then
I want the light 300 version that looks good. I’m going to scroll down, click on add import,
highlight this import code and copy it. I’m going a little bit faster because we’ve already
gone over this twice. Then going back to my website I’m going to go to the dashboard,
then I’m going to down to appearance and editor, click on custom.css and finally I’m going
to add my new Google font right after the other ones right above. So all the Google
fonts are at the top, then I’m going to scroll down and click on update file to update the
file. The next step is I’m going to back to the site by clicking on visit site, then I
need to find what this particular code is so I’m going to hover over that and then on
my Mac I’m going to hold down the control key and click on the mouse, and then I’m going
to click on Inspect Element. Here we can see when I open up Inspect Elements we see that
the element is highlighted here on the left hand side it starts with a HREF and then on
the right hand side we can see the CSS styles. So when I scroll down and I look for font
family I’m just going to scroll down here, here we see the .genesis-nav-menu and here
we can see the font size. So number one I want to increase the font size so I’m just
going to uncheck this and I’m going to change it from 14 to 24 to make it larger so that
looks better. And the other thing is I want to add my Google fonts so once again I’m going
to click in this section right here, add font-family and then I’m going to add the little line
Open Sans Condensed with a closing line. So now we can see the new Google font in the
larger size. That looks pretty good, we’ll see I might change that and make it larger
but for now that looks okay. Okay so I’m going to highlight all of this, this is what I want
to add to my website. So I’m going to highlight all of that and copy it, then I’m going to
back to the customs style sheet by going back up to the top, clicking on dashboard, then
I’m going to go down to appearance then to editor. Then I’m going to click on custom.css
and I’m going to paste the code that I just copied in the previous step, making sure that
I finish it all off with a closing tilde bracket. For the font size here we want it to be 24
so I’m going to reduce or eliminate that 1.4 REM then delete that. And for line height
I’ll make this 30 pixels, make it a little higher than the actual font size. I’ll be
sure to drop this code in the video, once you have that set go ahead and click on update
file to update the file. Once the file has been updated successfully now we can check
it out by going up to the top and clicking on visit site, and here we can see the new
Google font added to the top menu as well as to the secondary menu, and we can also
see that the size is much larger which is really great. It’s a lot easier to see. Now
the next step is I want to change this green background to a white background. We also
need to change the color of these menu navigation items and finally I want to capitalize all
of them. So we’ve got a few more styling elements to change on the top and secondary menu items.
So let’s start with the green background since that’s the most obvious thing. So I’m just
going to open up Inspect Elements right here by clicking on Inspect Elements. Then I’m
just going to kind of scroll the page up so we can see this green bar right here. Then
I need to go to where this green bars starts and it looks like it starts at the nav secondary
.nav-secondary code right here because we can see here is the palate for the background
color. So this is what I want to change. I want to turn it from green to white so I’m
just going to click in here, then I’m going to override it by adding my white color code
which is six F’S, there we go and we can see automatically it changes to white. Note that
we cannot see the words anymore because those are also white colored so it kind of blends
in with the background. We’ll also change the color of the font in just a moment. Right
now I’m just going to copy the nav secondary code right here with the background color,
highlight it and copy it. And I’m going to close this and go back to my dashboard, then
I’m going to scroll down to appearance and click on editor. And then finally over here
I’m going to click on custom.css to go to my custom style sheet, scroll down and then
I’m going to paste in the code that I just copied in the previous step. So I’ll be sure
to drop this code in the video, it’s .nav-secondary and then the background color is white which
are six F’s. Once that’s all set go ahead and click on update file to update the file.
Once the file has been updated then we can check it out once again by clicking on visit
site and now we can see that it’s all white. So that looks good, note that we can’t see
the words very well though. So the next step is I want to find out what the code is for
these fonts right here and I want to change them from white to a color that we can actually
see. So I’m going to open up Inspect Elements once again, and once I open up Inspect Elements
we can see on the left hand side the HTML that is creating this element right here.
And on the right hand side we can see the styles. So this white color right here where
it says three F’s, this is the white palate and this explains why we cannot see any of
the items in the menu area because they are white on a white background. So the first
step is I want to change these menu items here from white to a steel grey color so I’m
just going to click in here. Then I’m going to add my grey color code and now we can see
all of these different items are now visible. The other thing I want to do is I want to
capitalize all of these so I’m going to add some additional code down here below by clicking
in this little box. Then I’m going to add some text transform CSS code like so, make
it upper case and now everything is uppercase. I prefer this kind of view. If you prefer
lower case then that’s great too. Simply you don’t need to add the text transform. I’m
going to copy all of this right here, the main pieces I need are the text transform
with upper case and the color. I’ll remove all the other things in just a few moments
but I’m going to copy it all because it is a lot easier to copy it all in one swoop and
then I’ll delete it later. So I’m going to copy it right there, highlight it and copy
it. Then I’m going to close it, go back to my dashboard by clicking on dashboard. Then
I’m going to go to appearance and editor. Next I’ll click on custom CSS, and then finally
I’m going to scroll down the bottom and paste the code that I just copied in the previous
step, making sure that I close it out with this closing bracket. Then I’m going to delete
everything that was not customized. So for example this whole section was not customized,
the only thing that was customized was the color and the text transform so I’ll add that,
and then I’ll click on update file to update the file. Now I want to go back to the site
by going to the top and clicking on visit site. Now we can see all the different menu
items being displayed so that looks really good. Now the next thing is, when I hover
over each one of these I actually want this to turn red to kind of make it stand out and
pop out a little bit. So in order to change the hover color once again I’m going to open
up Inspect Elements, then scroll the page up so we can see the menu navigation area
right here. And now within Inspect Elements on a Mac I’m going to hold down the control
key and I’m going to click on my mouse to open up this force element state. I believe
on a PC it would be right key and then look for force element state. So once again on
a Mac I’m holding down the control key and I’m also clicking on my keypad which opens
up this box once again force Elements state and the force elements state I want is hover.
So I’m going to click on that right there and that will give us the code that is showing
this particular hover code right here. Here we see there’s a little dot that designates
the hover effect and here on the right hand side we can see the actual code right there.
Now the current code is this 222 number and this is the actual code that I want to change.
So I’m going to pop in a red color right here, now we can see when I pop in the red color
then the current page changes to red. So when I hover over each of these, these will also
turn into red so I’m going to copy this code right here and I’m going to add this to my
custom style sheet. I’m going to copy all of this code right here, highlight it and
copy it. Then I’m going to close my Inspect Elements go back to dashboard, go down to
appearance and click on editor, then go to my custom style sheet. And then at the bottom
of the custom style sheet I’m going to paste in the code that I just copied in the previous
step. Then I’m going to click on update file to update my file. Okay now let’s check out
the site, I’m going to go up to the top and click on visit site. Then here on the homepage
we can see that the current page is now red and when I hover over each of the other items
here those turn red as well so that looks really great. So that is how you customize
the top section of the Genesis Child Theme called Lifestyle Pro. We have the top menu
item that has been customized, the banner, the title, the tagline and all of the menu
items. Okay now scrolling down the page we have a little bit more to go here starting
with this bar right here. WE used to get all the bars are all kind of this emerald green
color which I’m not really that fond of. I want it to match the red color right here
that we see right here. In order to change this once again I’m going to open up Inspect
Elements, and I’m going to pull this up so I can see a little better. And here on the
right hand side we can see the emerald color right here, this background color. So I’m
going to change this and pop in that same red color that I used in the menu area, add
that there that looks so much better. Then I’m just going to copy this code right here,
highlight it and copy it, close Inspect Elements, go back to the dashboard then go to appearance
and editor, then I’ll click on the custom style sheet and then at the bottom of the
style sheet I’m going to paste in the code that I just copied in the previous step. Making
sure that I close it off with this tilde bracket. Then I’m going to click on update file to
update the file. Now I’m going back to the site by clicking on visit site. Here we see
the bar is all red which is really great. Okay that looks good. So the last one here
is we have this footer section so I’m going to open up Inspect Elements on this as well.
Once again we see the site footer has this emerald color so I’m just going to copy it
because I know exactly what that color is now. So I’m just going to copy all this code
with the emerald color, I’ll change the emerald color in just a moment. Once that’s copied
I’m going to go back to the dashboard, then I’m going to scroll down to appearance and
editor, I’m going to click on custom.css, scroll to the bottom and paste the code that
I just copied in the previous step. Making sure that I close it off with this tilde bracket,
keeping in mind that this color right here is the emerald color. So we either want to
change this emerald color by replacing it with this red color right above or I actually
am going to add this and make it a grey color because I don’t want the footer to really
stand out very much. I want it to kind of blend in with the white background. So I’m
going to add a light grey color here, we’ll see how that looks like in just a moment.
I’m going to click on update file to update the file. Now going up to the site I’m going
to click on visit site. Then scrolling down to the bottom here we see the really neutral
grey color footer with the words right here. Now note that we can’t really see this because
all of the different font colors are white on grey, it’s really hard to read so I’m going
to change that as well. By clicking on Inspect Element, then we can see I’m going to drill
down one at a time. Here we go and here we see the site footer this key, let’s see where
we can find it. So here is the site footer right here, the color is this white color
so white is really hard to hard so I’m going to change that to a grey color. Now we can
at least see the copyright and the non-linked words right here. But the other thing is that
note that there are these links right here and those are also white. So for example when
I click on this A right here and then I scroll down I should be able to find here at the
top we see the .site-footer and then A this is also white which is hard to read. So I’m
going to change that as well. Now I can see these credits a lot easier on my footer section.
So I’m just going to highlight al of this, I’m going to keep in mind that I need to add
this twice- one with the link and one without the link. The A refers to a link. So I’m going
to copy this, no worries I’ll drop all this code in the video if I’m going too fast. I’m
going to copy all that- highlight it and copy it, and then go back to the dashboard. Then
I’m going to go down to appearance and editor, then I’m going to click on custom.css, scroll
to the bottom and paste the code I just copied in the previous step. Making sure that I finish
it off with a closing bracket and I’m going to add this twice because one time is with
the A and one time is without the A. This particular one is just non-linked text and
this is text that has a link associated with it. Both of these will have the grey color
and then I’m going to click on this button to update the file. Okay so now I’m going
to check out the site by going up to the top and clicking on visit site. Now when I scroll
to the bottom we can see, now I can see the credits really well and this footer kind of
blends in with the white background. I’m going to be changing this background as well to
white so this will look even better. So coming up to the top here to find this background
right here, I’m going to open Inspect Elements let’s see if we can find this image right
here. It’s the first one that pops up, we can see that it has a kind of gradient to
it. There’s a fabric or canvass look, this is actually an image so I’ll take it off by
removing it right here. I don’t know if you can see it but it’s a lot smoother, it’s kind
of this cream color and that is this particular section right here where it says body. And
the background color is this EF, EF, E9 which is a cream color. So when I turn that to white
by just adding my white color code, now we can see this background looks really, really
clean. So I’m going to just memorize this, keep this in mind this body background color
is white and then meanwhile this particular image I’m going to copy this code right there,
highlight that and copy it so that we can remove that canvass image from the background
on the homepage and throughout the site. Once this code has been copied I’m going to close
this, go back to the dashboard, then go down to appearance and editor. Then I’m going to
click on my custom style sheet, scroll to the bottom and paste the code I just copied
in the previous step. Noting that the background image I want to say as none I’m going to add
a semi-colon and a closing bracket and then finally I’m going to add my body background
color of white. Okay once we have the code ready to go I can click on this button here
to update the file. Now checking out our site I’m going to go up to the top and click on
visit site, and here we can see we can still see this fabric image right here. So what
is going on with that? I’m going to click on this one more time to click on Inspect
Elements, and here we can see it’s still showing up. So what is going on with that? I think
what I need to do is I’m going to go back to this particular item right here, I’m going
to go back to the dashboard, then I’m going to go down to appearance and editor. Then
I’m going to click on custom.css, I’m going to scroll to the bottom and here where it
says background none I’m going to add an important tag to totally override whatever code is forcing
that to continue to be displayed. Whenever you add this exclamation point, important
and semi-colon it will really kind of force the change to go through. I try to use this
sparingly but in this case let’s see if this works. I’m going to click on update file,
then I’m going to go up to visit site to visit the site. And now we can see that the image
has been removed. Okay so we’re almost done with the entire website, we just have a few
more things left to add. So scrolling down when we hover over the title for example we
see this turns green, and the read more link is also turning green as well. So I want to
make both of these two items I want to make them these red color so that it’s more complementary
of the rest of the website. Opening up Inspect Element I’m going to find out what the code
is for that particular item, note that this is a hover code. This only really happens
when you hover over this particular title, then it turns green. So I want to turn it
red. To find the hover element here I’m just going to hold down the control key on my Mac,
click on my keyboard, then I’m going to choose a force element state of hover and then we
can see here on the right hand side the entry title with the hover code here put the CSS
style. Then I’m going to add the red color right here instead of the green emerald color
and I’m going to highlight and copy this entire code. So just highlighting it and copying
it, and at the same time I’m also going to look up the read more because I’m going to
do this in one big swoop. Looking up inspect element for the read more button, here we
can see here is the emerald green color and this is a really simple one and easy one to
remember because it’s simply an A. So all you need to remember this code is an A and
A in CSS language is the link. So okay keeping that in mind I’m going to close this, go back
to my dashboard, then I’m going to scroll down to appearance and editor. Then I’m going
to click on custom.css, scroll to the bottom and I’m going to paste the code that I just
copied in the previous step. Also I’m going to add the A code for the link and I’m going
to also add the same red color to that as well. Okay so once we have the code here,
note both of these are red. So the red for the title and red for the read more hyperlink.
I’m going to click on update file to update the file. Once the file has been updated I’m
going to go up to the top and click on visit site to visit the site, then when I scroll
down now when I hover over this title we see it turns red which is really great because
it matches the rest of the site. The last thing that I want to add right here, here
we have the eNews extended plug-in. In the video on my YouTube channel I did go over
how to customize this. But just to complete this entire website right now I want to customize
this as well. So I’m going to open up Inspect Element one last time. Then here in Inspect
Element we can see the HTML here on the left hand side with the widget eNews-widget. On
the right hand side here we see there’s a sidebar widget, there’s .widget, and there’s
all this other code and actually I do not see the eNews widget so I’m going to add that
in myself. Here where it says .sidebar I’m just going to add some code in here, we’ll
just override this for the moment. Once again this is really great with Inspect Element
because it is a sandbox that we can experiment with. I’m just going to add .enews-widget,
then I’m going to add the background color like so and that turns a green. I’m also going
to change the button to a red color so it matches. First I’m just going to grab this
code right here, this .sidebar-enews-widget, I’m going to copy that. Close Inspect Element,
go back to the dashboard, then I’m going to hover over down to appearance and editor,
I’m going to click on custom.css, scroll to the bottom and paste the code I just copied
in the previous step. Noting that I’m going to add an opening bracket in the background
which this time I want to do this screen color so I’m going to add the green color in there
and then have a closing bracket. Then I’ll click on update file to update the file. Now
I’m going to go back to the site. I’m going to click on visit site, we’re almost done.
And then here we have the eNews widget that looks good so far. Now this particular button
I want to have that turned orange or red, the same red as this red right here in the
menu items. So I’m going to find out what that code is by clicking on Inspect Elements.
Here we see when I open this up a little bit more here is the button code right here, this
background color. So I’m going to highlight this entire thing, all these codes, all the
button codes I’m going to highlight them and copy them. then I’m going to go back to my
dashboard, go to appearance and editor, then I’m going to click on custom.css and once
again I’m going to paste the code that I just copied in the previous step, noting that the
color is going to be red. This is an emerald color but I’ve used this red color often enough
that I know it’s this F color up above, so I’m going to highlight it and copy it. And
then I’m just going to override this current green emerald color like that. Then once I
have all the codes set I’m going to click on update file to update the file. There’s
one last piece to this. When I go to the top and click on visit site, now when I scroll
down we have the red buttons so this particular eNews widget area, this is really important
because this is a great way to capture leads on your website when you have an email opt-in
form like this. You want to make it kind of like pop out from other elements on the page.
Okay so the last thing though is that this black on green is a little bit hard to read,
I want to make that white. So I’m going to change that to white by opening up Inspect
Elements and then here we see it’s this H four right there, all the header four’s throughout
the site are this black color and that’s fine. But on this particular background I don’t
want it to be black, I want it to be white. So let’s find the eNews widget area right
here. So we’re going to use the same thing, it’s going to be .sidebar-enews-widget. Then
there will be a space, and then it will say H4 and then we’ll have the white color. That’s
how we’ll do that because otherwise if I change the H4 right now, like if I just use this
code right here, that’s going to turn all the header four’s throughout the entire site
white and then we won’t be able to see some of them because it will be white on white.
So just keeping in mind this is an H4 tag so that’s good to know. So I’m going to close
that, go back to the dashboard, scroll down to appearance and editor, then I’m going to
click on custom.css, scroll to the bottom. I’m going to borrow this code right here because
this is related to the eNews widget I’m just going to borrow that by copying it and pasting
it. This time though I’m going to add that H4 tag in addition. So this is referring to
the sidebar, it’s the eNews widget in the sidebar and it’s the header four in the eNews
widget. And I’m going to add the color of white, making sure that you end it with a
semi-colon and a closing bracket. Whenever you add these codes I’m sure you’ve gotten
this so far, there’s always an opening bracket and a closing bracket and every line has a
semi-colon after it. Okay then I’m going to click on update file to update the file. Now
when I go back to the site by clicking on visit site, now we see this is so much easier
to read with white on green. if you made it so far congratulations because you should
have a WordPress website using the Lifestyle Pro Genesis Child Theme that looks something
like this. This is a completely customized, professional WordPress website. Let’s do a
quickly review of all the different elements within the site that we’ve created in this
video. Starting at the top we have our customized banner with a background image, along with
some custom Google fonts in both the title and the description, and the menu times. Then
we have our featured post on the homepage along with some featured categories, this
is the first category right here. Then we have two other featured categories, then down
below we have our footer section where we feature some social network icons so anyone
can easily connect with you throughout the social web. Either through Facebook, Pinterest,
Twitter or YouTube. There’s this short description about the website in the middle, and then
we have a video. On the top right hand side in the sidebar, we have the all important
email opt-in form. This is front and center so this is really important because this is
one of the best ways to capture leads on your website is by having an email opt-in form.
Next we have a short bio with a thumbnail pic, a search box so anyone can easily find
content throughout your website, and then we have a call to action here which leads
directly to a landing page where you can feature your services or some kind of offer. Then
we have our social network icons once again and finally we have a beautiful display of
all the different Pinterest pins that you’ve collected on whatever board you set up. As
we note when I click on this it opens up into a really lovely display here, here a little
light box display. So we can see all the different images right on the site, we’re not sending
anyone away to another site which is really great. Now looking at some of the internal
pages that we’ve created in this video starting with the blog page I’m going to go to the
blog page. And here we have the blog archive page with all the blog posts that we’ve added
to our website. So taking a look at one of the blog posts I’m going to click on this
particular one, here we have the blog post title, the date, the author and any comments.
Then we have an image and we have our actual content right there, the text followed by
another email opt-in form. So again it’s so important to add these email opt-in forms
pretty much anywhere you can on your website because again it’s a great way to capture
leads and after someone reads content and gets to the end, this is a perfect location
to feature your email opt-n form. Because most likely it’s someone that’s read that
far they would be interested in receiving whatever it is that you may have to offer
that is related to your site. Then underneath the email opt-in form we have our social network
icons so anyone can easily share your content across the social web, either to Facebook,
Twitter, Pinterest, Google or some other social network. And then finally at the bottom we
have our comment form where someone can leave a comment. Okay so let’s take a look at some
of the other pages starting with the About page. Here we have our full width page, there’s
no sidebar- just a short description and a picture or an image. Then we have a, I just
call it recipes because this total website is about pressed juices and wellness. So I
added a page here, you can add anything. It could be a services, products. For here I
just called it Recipes and there’s just a short little page here. Then we have our landing
page again a landing page is a great way to focus attention completely on the offer that
you want to present to someone. We have our call to action, the different reasons why
someone should sign up. Reason one, reason two and then reason three and then at the
bottom we have our all important email opt-in form once again. So anyone can take attention
of this offer by signing up. After the landing page right here, then we have a contact form
where anyone can easily contact you directly from within your website by simply filing
out their name, their email, the subject and the message and submitting a message by clicking
on the send button. Finally last but not least we have a shop page where when I click on
Shop, here we can see a couple of items and in this video I showed you how you can link
each of these different items to either an external page such as to Amazon if you have
an Amazon affiliate account or some other type of affiliate accounts. Or you can link
to an internal page, or you can just leave it right here as it is with no link at all.
This is the WordPress website that we created in this video using the Lifestyle Pro Genesis
Child Theme. Thank you so much everyone for staying with me and thank you Shelly for the
inspiration to create this video with this particular theme. I hope this video was helpful
to all of you, if it was please feel free to leave a comment below, like the video and
share this video with your friends. I will be coming out with more videos related to
Wordpress, Genesis and how to build your business on the web and how to subscribe to my YouTube
channel. Last but not least all the conversation continues on my website at 77webstudio.com,
so feel free to head on over to my website to continue the conversation. One more thing
before I sign off, I just want to mention that I’ve begun pinning things on Pinterest
so if you are on Pinterest feel free to connect with me here, I’ll be pinning things related
to WordPress, themes that I love, quotes that inspire me and much more. Also if you’re on
Twitter feel free to connect with me @77webstudio. Until next time I hope you have a great week
and continue learning new skills that help you to build your business on the web.

64 thoughts on “How To Make A WordPress Website & Food Blog (Genesis Lifestyle Pro)

  1. Awsome Blossom katrina ..
    Waiting for the next tuesday too see a new website .. hahha

    tanxx a ton from all!!..!!

  2. Another awesome free video.. this is great content laid out step by step.. easily the best WordPress training on YouTube.. Thank you for providing this Katrinah

  3. Hi Katrina I do not want to use the site title or description as I already have a banner made that has the title and description in it.  When I take out the site title and description only about 1/3 of my banner will show … how do I get my banner to be full size without having to add the text over it?

  4. Another incredible tutorial Katrina! THANK YOU! I've learned a great deal and I especially LOVE the customizations – a tutorial in itself for sure! Thank you again!

  5.  THANK YOU KATRINA ! I've learned lot of things ! BUT Pllz can you make a video that shows to us how to Add Google ADDS on the blog and earn money by this website we made ? 🙂 Thaank you soo much (and sorry for my english :D) 

  6. Hi Katrina,
    I was wondering if you have a video for the Smart Magazine Word Press Themes. The one I am trying to work on is called the Lens Theme, to see it go to http://virtuousfaces.com  I love your videos they are a great help. Thanks!

  7. your videos are very helpful and i have been watching your tutorials in the last week, every night before i go to bed. i hope you'll do a tutorial on genesis magazine pro theme. im currently working on that theme but can't find tutorials in youtube.

  8. Awesome video!  What should the minimum image pixel size be for blog posts so that the images are wide enough for a content/right sidebar layout?

  9. ok so i am struggling with the header custom image please help i can't see whats wrong in my code but it not working 
    heres the code i have 
     .site-header {background:url ["http://wanttobuildawebsite.ca/wp-content/uploads/2014/05/bannerwanttobuild.png"];}

    please help
    thanks

  10. Katrina, I'm not sure what I did?  My Home page doesn't show anything except a short excerpt from a post (not finished post).  Shouldn't it show a list of posts?  If you want to see what I did visit www.simplylindseyloo.com.  Thanks!

  11. Hi Katrinah! Love your videos. Thank you. I am working through the ftp section. When I open style.css with Cyberduck it uses Safari to open it  (I use Firefox) and then when I save the textedit copy as css it again opens it in Safari not as a document on my computer as it does in your video. Is this something I am doing or is this the way it is supposed to work now? Thanks!

  12. Back again! I am stuck at trying to get custom.css on the  theme editor page. Your instructions for ftp were for adding a child theme folder to Genesis – I think? I already have Lifestyle in the WP themes folder so I tried replacing the style.css content in lifestyle with the content you indicate in the video, cut and paste the beginning part of Genesis style.css.Was that correct? I removed the original style.css to another folder. When I go to Lifestyle editor there is no custom.css and the style.css looks the same as the original. Am I missing a step? Thanks!!

  13. I just bought this theme today and this video was a great way to get it all setup and see where all the different options were, you've saved me tons of time in looking through. I just followed along with you to do my pages etc.

    One suggestion I would like to make is that you put a contents page on your YouTube videos. For example if I wanted to find the section of the video about creating pages, I click the "Create a page" link and it sends me to that time in the video. I only say this because I wasn't really interested in the start (setting up hosting, installing the theme etc) and there were some bits I would have liked to have skipped but didn't incase I missed something! (I know it'd be a pain in the arse to do this for all your videos though.)

    Anyway, I truly truly appreciate the hard work you've put into this video. You're the best and I'm amazed with how you can just speak non-stop about WordPress etc. 

  14. Thank you so much for this tutorial!!! It was soooo super helpful. Do you know if there is a way for me to make my font on the tabs two lines?? I have a really long title for one of my tabs and I need it to be two lines somehow so that it doesn't take over my whole tab line…

  15. Hi Katrinah, I made a custom css file but when i put changed css in here it doesn't flow to my site.  it does when i put the changes in my original css file.
    I've done the tutorial twice carefully. where can i be going wrong?. thanks
    shelley

  16. Hi this is fantastic may I ask is this able to include a fully working shop please?
    If not, what is the best free wordpress theme that has the option of shop page?
    Thankyou

  17. Katrinah, I cannot thank you enough for all of your superb videos. I followed your instructions to the letter on this video and several others, and designed/created my website myself, thanks to you! I was so afraid of CSS and had no clue, but your detailed explanations and patience in your videos made me feel comfortable and confident that I could do it! And I did! Thank you so much for giving us the knowledge and tools to empower ourselves and create something beautiful and hopefully useful for others (my website is for writers: www.lyricalchemistry.com), and I used Lifestyle Pro, with a few tweaks. ~ Andrea

  18. Great videos Katrina. I have watched a few of them now. I have a quick questions. I have Lifestyle Pro on two sites now. My first one I had a little help with but have learned so much from the person who helped me. Now, I am trying to set up the 2nd one and for the life of me I cannot find where to remove the line boxes that are around my posts and sidebar widgets. I don't have them on the 1st site. I have gone through the style sheet and I just can't see it. I see yours here doesn't have them after install. Mine did. Weird. Know how to remove them? I am not a fan of that boxed in feeling.

  19. Hi Katrinah,

    Love all the videos and have learnt so much by following them step by step. One question, how do you keep smiling for so long while talking?

    I have put up one site using woo themes and woo commerce this is http://giftsandcreams.co.uk/ I will be starting another site soon for a T-shirt company.  Not quite sure what theme to use for the best look. What do you think?

  20. Katrinah, thank you for this refreshing experience. I've been struggling for years with the Thesis theme and have finally come to the conclusion that it's far too difficult for non-programmers to use. Recently on one of my sites, the skin started doing odd things, and the fix was so complicated that I began to shop around for options. I decided on Genesis and the Lifestyle child theme, and from there found your videos and website. I'm in the middle of this video now, stopping to tweak things on my new Genesis site (it still looks pretty rough), and I thought I would take a break to tell you that this seems crystal clear compared to Thesis. I'm looking forward to viewing more of your videos. 🙂

  21. I've followed your instructions for installing jetpack, and the connection appears to be good, except that there are no icons at the bottom of my posts on http://www.1stspanish.com. I've watched that part of your video and followed the steps several times with the same result–no icons.  Do you have any suggestions for troubleshooting? Thanks!

  22. I simply had to stop the video & make a comment here before picking up where I left. You're Godsend. I have been struggling all night trying to figure it out & I found you with the tutorial I've been searching.

    Not only do you sound terribly efficient but for the last 3 minutes you've been talking with this huge smile on your face…Woww !

    This is going to be a painless and enjoyable "how – to" tutorial. Thank You ever so much 🙂
     Right, I'm off to the learning curve with a smile.

  23. Hi Katrinah, thanks so much for these videos. There's so much to do and learn but you lay it all out very nicely. What I noticed when I go to view my website is that the site doesn't fill up the whole screen. It's like a page within the viewing screen.  In your tutorial here, your website fills the entire screen.  How do I make my website fill the whole screen? Appreciate your help 🙂

  24. Hi Katrina,
                       Amazing tutorial, I designed http://www.bigdataexaminer.com.I need my posts one below the other as here http://www.quicksprout.com/blog/, maximum of 5 posts per page. So How can I do that. Which code should I edit?? . Thanks a lot Katrina

  25. Hi Katrinah, thanks for the really approachable how to!

    What I'm getting stuck on is this:
    Following your videos meticulously, but after saving any modification to the custom.css sheet, the changes are automatically reverting to the original. This after going to Appearance>Editor>custom.css

    I tried another way- by going  directly to Appearance>Edit CSS, and same issue- except here the site might show show the changes once before reverting to the original.

    Any ideas on what might be going wrong?

  26. Hi Katrina, awesome tutorial website. I having a difficult time making sure that my About tab actually has my information with my picture in it. I have the child genesis theme but not the executive pro. Also I am unable to set up the front page like yours is that because of the specific theme. Thanks I really appreciate your help.

  27. Wow. Thanks for doing this and making it rather straight forward for tech dummies like me to follow along. I'm still working my way through the tutorial, but I'm deeply satisfied with what I've been able to do so far. Thanks again for this very generous thing. And your voice is very easy to listen to. (: I'll be following you closely. 

  28. Hello everyone,

    Does anyone know the exact height and width the header image should be? I want to make one before I upload it to my site but I'm afraid if I don't know the right dimensions, it'll come out looking cropped or something. Thanks!

    And Katrina, thank you so much for this wonderful tutorial. You are lovely 🙂

  29. thank you so much for a great video Katrinah. I'm still a little confused with the custom css sheet. But otherwise, you answered so many of my questions about how to customize my new website. Thanks again!

  30. I am just starting my website and I have to say, you are so helpful.  You put my nerves at ease.  Thank you soo much

  31.  Hello
    How to fix the problem. Every time I try to login to http://localhost/xampp/wordpress/wp-admin I receive this error. 
    Object not found!
    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.
    If you think this is a server error, please contact the webmaster.
    Error 404
    localhost
    Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3

  32. I love this video! It's been very helpful. However, I still have a few questions! I love how on the homepage you can customize the length of the text shown and have the "read more" option to read the full article. I would like that on all the articles when you click the blog page. When I click the blog page I have to scroll through the full articles for everything I post and it can be a  bit overwhelming and not easy to scan through. The second challenge is I have created 3 sections: nutrition tips, recipes, the homestead, as categories that show on my homepage. I also have those three categories on my menu. However, I can't seem to figure out how to get posts that go under those categories onto those pages. Does that make sense? If it's helpful you can look at my website www.andismithwellness.com. Help! 

  33. This video is awesome. Without it, I would have no site. It has helped me tons! My only question(s): Since I inserted my own header image, the mobile responsive feature isn't working properly. When I shrink my window on a computer, I lose the image. When I look at the site on a phone, the image in missing. Also, the google font I chose doesn't get smaller, it just goes from the site title all on one line, to three lines. Lastly, my menu is missing. Have any suggestions? My website is: theoldtroddenlane.com if you have time to peak at it. Again, thanks a TON for sharing your knowledge!!!

  34. Hi cat-rinah 🙂
    thank you very much for this video.

    i'm new-bee 🙂 . Can you please show me how to split post into multiple pages, (to have next and previous page in one post)

    thank you very much.

  35. 1.How would i increase the header image so that its wider.

    2.  also can i extend the header image so that it stretches to the edge of the screen. 

  36. Katrina.  This was a great instructional video.  I am currently working on setting up my blog and want to create a wider header for the Lifestyle Pro theme.  I have watched the video and the custom css style sheet is referenced.  I clicked over to review the video and there was a notification that you do not have to set up a custom style sheet just make direct changes in the child theme.  I have my own image and want to make this image the wide background and center my text; however I am still unclear how to make these changes.  I have opened up the child theme and there are lines drawn through things such as back ground color change, size and so forth.  Do you have any suggestions on how I can create this wide header with text? Thanks

  37. Hi Katrinah, I just want to say how happy I am to find this video. I have had the Lifestyle Pro theme for two months and was going to give up because it was boring to me. Now I cannot wait to get at it and change it to what I want. Thanks so much. Just a very newbie question but how do you get your "leave a reply" box to show at bottom of posts and to show up after each post? I believe I had it then it disappeared. Thanks

  38. Hey Katrinah, I am working with wordpress v 4.1.
    I have bought Lifestyle Pro and have downloaded it and on my mac it unzips the file automatically. When I go to upload it it willno allow me to do it for the whole folder. I guess that is because it is not a zip file. 
    What now???? Help as I am going out of my head going round in circles.

  39. Thank you so so much for such a detailed video. God Bless ! Wanted to know how did you add the search above the header shown at the beginning of the video? I think you forgot to cover that….. Nevertheless awesome video !

  40. since genesis themes are responsive by default. will using px instead of % or em's mess it up for mobile?

  41. hi katrinah, Great video btw! is it possible to change the grey text color on the blog posts? also when i click on editor i only have the original stylesheet not a custom. however when i click on edit CSS i have a pretty blank CSS stylesheet editor and the option to save the stylesheet. is this the sheet i will use to add all the customization codes you were using in the video? hopefully these questions make sense…..i'm definitely not a pro at this =)

  42. Thank you so much for your time with this video. My site looks so professional now! However, somehow I lost my site title?? I have the image, but no site title or subtitle. Any help would be appreciated!

    Thank you again!

  43. So helpful. This video answered sooo many questions that I had about putting together my page. I've been trying to do this on my own to save money in the startup of my blog and I was completely LOST!! Your video was easy to watch and follow along, clear and simple instructions. Thank you Thank you Thank you.

  44. Could you show how to adjust the code when saving the custom header to allow for a larger image that stretches across the way yours does in the example? Mine is just a small little box & doesn't extend like yours.

  45. Heads up: Your affiliate link @ 8:27 went to a 404. Fix that so you can get paid.
    Great video. Very informative. Thanks.

  46. Up to 90% discount to create a blog website.I provide quality Website Design at a pocket friendly price. Recently I added a service on Fiverr “ Create a blog Website with 2018 latest technology” The price is cheaper than any others company or freelancer. Also, I provide premium theme and plugins that value about $2000. My package start from $40 and also you can contact me to make a new website or your current website redesign or make mobile friendly.

    Here is my Portfolio: https://goo.gl/xwCB5R
    Fiverr Profile: https://goo.gl/UHBqMx
    LinkedIn Profile: https://goo.gl/s8uTuu
    Twitter profile: https://goo.gl/rRtJY1
    Grab The deal Now only for $40 : https://goo.gl/6NMzn7

Leave a Reply

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