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 studiopresscom 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 studiopresscom 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 hostgatorcom 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 hostgatorcom 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 hostgatorcom, 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 hostgatorcom the best coupon to use is "wpcoupon25" and if you sign up for six months or more of web hosting at hostgatorcom, 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 hostgatorcom 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 studiopresscom for $9995 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 hostgatorcom

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 Hostgatorcom 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 38 installation and at the time of this recording, WordPress 38 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 38 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 StudioPresscom to find the theme Here on StudioPresscom 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 <img src=http://your-imagecom> 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 <a href=http://your-page-link><img src=http://your-imagecom></a> 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 Amazoncom 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 WordPresscom 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 wordpresscom Next we'll arrive on WordPresscom 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[presscom blog

All we really need is a wordpresscom username and password To kind of circumvent this part when you come over to where it says wordpresscom 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 WordPresscom 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 wordpresscom account and then you click on the Jetpack connection button you should come to this page where you can authorize Jetpack to connect with WordPresscom 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, 29 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 customCSS 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 customcss, 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 customcss 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 customcss 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 vustomcss 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 customcss 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 customcss 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 14 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 customcss 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 customcss, 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 customcss, 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 customcss, 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 customcss 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 77webstudiocom, 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

Free Email Updates
We respect your privacy.

Recommended

Uncategorized

affiliate marketing