hi everyone! i'm katrina and in this videoi'm going to show you how to create a professional customized magazine style website using theamazing 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 alsogoing to show you how to completely customize the site so that it matches the look and feelof your brand and your business. so let's take a quick tour around the website we'llbe creating in this video. so here we are on the homepage of the website we'll be creatingin this video using the lifestyle pro genesis child theme. this particular theme comes withtwo different menu navigation areas. here
at the top we'll have our primary menu navigationarea followed by the secondary menu navigation area down below. the banner section here iscompletely customized so i'll show you in this video how to customize this banner sectionincluding by adding an image in the background as we see here and also customizing the titleas well as the description. just underneath this header section then begins the contentof the homepage starting with a featured post followed by a number of different featuredcategories. here we have the primary featured category right here and then we have two smallerfeatured categories down below. on the right hand side of the homepage, we have the sidebar starting with an e-mail opt-in form. the side bar, i want to point out in this sidebar you can add all kinds of customized content
but in this video this is the content thati'm going to be adding starting with an e-mail opt-in form. the e-mail opt-in form is oneof the most important things you can have in your website because it's one of the bestways to capture leads directly from within your website. in addition to showing you howto add an e-mail opt-in form on your website, i'm also going to show you how to completelycustomize the look of this so that it matches the colors and the design of the rest of thewebsite. just underneath the e-mail opt-in form we have an author bio here with a profilepic and a short description followed by a search box so anyone can easily search forcontent throughout your website then we'll add an image here which has the call to actionwhich when you click on this it leads to a
landing page. i'm going over landing pagein just a moment. underneath this landing page call to action image right here the linkthen we have some social icons so anyone can easily connect with you on the social webeither 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 particularside bar widget area right here is that when i click any one of these images, it pops openinto a really beautiful light box display which gives your visitors a way to look atall the images but still stay on your website. it's always a good thing to keep your visitorson your website, of course, and not send them to another website so having this light boxfeature 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'llbe adding, once again, the social icons so anyone could connect with us, me, your websitevia the social web. we'll also include a description about the website and a video. this is whatthe home page looks like for the lifestyle pro genesis child theme. let's take a lookat some of the internal pages starting with the blog archive page. when i go to the blogarchive page, the blog archive page will have all of your blog post on one page one by onevertically down the page like so. and on the right hand side there will be this sidebaronce again. let's take a quick look at one of the internal single blog post pages soi'm going to click on this particular blog
post right here and then we can see, whenwe go to that post, there will be a date, the author, and comments followed by the actualblog 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 thison your site, the better. i'll show you how to add an e-mail opt-in form at the bottomof your blog post. just underneath the e-mail opt-in form, we also have some social sharingfeatures 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 authorbio section and then at the bottom finally
we'll have a comment form so anyone can commenton your blog post. so that is what the blog post looks like. let's take a look at theabout page. most likely you're going to want to have an about page about your website andabout you so on this page this is just a full-width page with no side bar. i'm going to add somecontent and some image. next i have just another page; i'm calling this one "recipes" sincethis particular demo website is about green juices and wellness, and pressed juices soi added a single page right here. so we see here is the page and then we have the sidebaron the right hand side. then when we click on this particular one, "the free 14 day detoxcleanse plan" plan, this is a landing page. as we can see with the landing page thereare no menu items anymore, there is no header,
there is no logo. all the attention is reallyfocused on your offer so having a landing page is really a great way to focus attentionon some kind of offer that you may want to encourage or motivate someone to take advantageof. 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 howto optimize them and make them really effective but here we can see, i have my call to actionthen 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 inthis 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 isjust as it suggest what it is, this is a great way for anyone to easily contact you directlyfrom 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'mgoing to show you in this video how you can link each of these images to an external websiteor an internal website. for example, when i click on this one it's going to go directlyto amazon.com so in the event that you have an amazon affiliate account set up i've beengetting a lot of questions about affiliate
marketing and things like that so stay tunedfor one of my next videos, future videos but for the moment i'm just going to set thisup so that when anyone clicks on this will go directly to amazon. okay, so that is whatthe shop page looks like again with the side bar on the right hand side. the great thingabout this having the side bar throughout the website is that the e-mail opt-in formis always pretty much front and center, you can't get away from it. this is where we'reheaded toward in this video. once again, we're going to be using the amazing genesis frameworkby studiopress in this website. before we begin, i want to take a quick moment to headover to studiopress.com to go over the top reasons to use genesis. studiopress has beenrecognized throughout the web world for their
amazing wordpress framework called genesisand the many child themes that they offer with this framework. as we see here, genesisand 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 yourwordpress website. you can check all the different reasons, the eight different reasons, to choosethe genesis framework here on studiopress.com. of the many reasons to choose the genesisframework 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, beautifulmobile responsive designs; and number five
ultra, flexible foundational codes. the greatnews with genesis, is that not only are you getting a beautiful design on the outsidebut you can be rest assured that the code that is actually generating your website isstate of the art code, it's clean, it's optimized and it adheres the latest wordpress securitystandards. and through these reasons that over a hundred thousand website owners includingmany of the webs leading internet marketers, bloggers, media producers, and developerstrust 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 professionalcompletely customized wordpress website using the genesis framework and the genesis childtheme called lifestyle pro. this is a magazine
style blog style website, its mobile friendlyand responsive. as a quick demo of the responsiveness of this website, when i come to the bottomright hand corner and i reduce the screen size we could see all the different elementson the page are resizing to fit the new screen size. and here on the smartphone view of thewebsite, we can see that the menu items have repositioned themselves in the middle, thebanner image has also resized we can still see it really well, as we can also see thetitle and the description. meanwhile, all the other elements on the page are stackedvertically, so we can so those very clearly as well. this is referred to as a responsivewordpress website - it's a website that responds to different screen sizes making it easy toview 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 websitegoing to cost? well we need several things. number one, we need a domain name and we alsoneed web hosting. in this video, i'm going to be using hostgator.com and at hostgatoryou can both get the domain name as well as the web host name. i'm also going to be usinga special coupon code at hostgator.com to get an extra amount off my order. there aretwo coupons to choose from depending on which web hosting plan is preferred. if you decideto go with hostgator.com, feel free to use these coupons as well to get an extra amountoff of your order as well. if you sign up
for one month posting at hostgator.com thebest coupon to use is "wpcoupon25" and if you sign up for six months or more of webhosting at hostgator.com, the best coupon to use is, "thankyou". be sure to refer tothese coupons if you'd like to get an extra discount when you sign up at hostgator.com.also, i do want to note, i do receive a small referral from hostgator if you decide to usethese coupons, and if you go with them. thank you in advance for your support and helpingme to continue these free wordpress training videos. i also noted additional web host anddeals 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 getat studiopress.com for $99.95. this is a little
bit more than many of the other premium wordpressthemes out there in the online marketplaces but keep in mind that this is a package thatwe're getting which includes both the theme as well as the genesis framework. this isa one-time purchase fee and it also includes unlimited updates and unlimited support. oncewe have the domain name, web hosting, and the framework and the theme the next thingthat we'll need to put this together is some time and i'm estimating this should take roughlyjust under three hours so please set aside about three hours or just under to go throughthe video, watch the tutorial and put together the website. in sum to totally get startedwith this particular website is around $125. again, that's using coupon code "wpcoupon25"when you sign up for one month hosting at
hostgator or using coupon code "thankyou"when you sign up for six plus months or more web hosting at hostgator.com. consideringthat, we're going to be creating a completely customized professional wordpress websiteusing 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 toget a domain and the web hosting. the second step is we need to install wordpress. andnumber three, we need to build out the website. let's take care of step number one, gettinga domain name and the web hosting by heading over to hostgator.com. here on hostgator.comto 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 choosefrom. we have the hatchling plan, the baby plan and the business plan. if you're justgetting your website up and running or if you have a small business website, then mostlythe hatchling plan or the baby plan will be a good fit for you. the difference betweenthese two is that with the hatchling plan, you can host one single domain name whereaswith the baby plan, you can host as many website domains as you would like. there's definitelymore of a value when you're looking at the baby plan. go ahead and choose the one that'sbest 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, ifyou already have a domain name, go ahead and
click on this button here to let them knowyou already have a domain name. i'm actually going to register a brand new domain so i'mjust going to enter my domain name here. just to see if something's available, i'm goingto put a random name there. of course, it is available because it's super random. onceyou 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. whenyou come to this section, the default package type that hostgator will display is 20% offwith 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 hereto be one month at 20% off. now, i do have
a coupon to get more off the order if you'resigning up for one month. if you're signing up for six months, 12 months, 24 months or36 months, i have a different coupon to use that gives you more of a discount than whatthe standard discount is that hostgator is providing. to see how that works out, i'mgoing to start with the first coupon code which is wpcoupon25. and when we sign up forexample of one month, then when you scroll down here, you'll note that there's a couponcode here that hostgator provides and this is the standard coupon code which we can seehere will give you a total of $65. if you put in the coupon code wpcoupon25 in thisinstance and then click 'validate', note that now the coupon is $57. that's less than thestandard coupon. there's a lot of different
addons that hostgator provides here includingsite lock and site backup and domain privacy. most of these i usually do not use becausei have other plugins that i use to do the same things. that way i don't have to payan ongoing charge. i am actually going to uncheck these two. if you'd like to sign upfor these, by all means continue to keep those checked. the other i just want to show youfor pricing -- i'm going to remove this privacy just for the moment to show you how it worksout. 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 formore 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 wheni 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 allof 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 toadd in just one month right now. i'm going to sign up for one month right here and insteadof using the coupon code 'thankyou', i'll just go back to my other coupon wpcoupon25and i will click on 'validate'. now, we see
my order total is less than $15. keep in mindthat one of the things i did turn off is privacy protection. i actually do recommend usingthe privacy protection or signing up for this. here is why. when you do not sign up for privacyprotection then by default all of your information like your email address, your address andyour website domain and sometimes your phone number will be included in the public onlinedatabase related to domain names. if you prefer to keep all of that kind of personal contactinfo private, then the privacy protection is what you'll need to sign up for. i do thinkthis is a really good thing to sign up for. in this case, i'm going to sign up for thisone 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 than6 months of webhosting or more, then go ahead and use the coupon code 'thankyou' and youwill get the best deal for between these two coupons. once you have the coupon code thatyou need there, go up to the top. we also need to create a username and a security pinand fill out our billing info. when you have that all filled out then come to the bottomhere 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 yourorder and will tell you to go check your email for information related to logging to yourweb 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 openit. i want to point out two things. the first link that they'll share with you in the emailis 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. rightbelow that you'll see that there's a link for your control panel with your usernameand 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 emailto keep in a safe place for future reference because you will be needing this informationas 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 yourusername here that was found in the email and you want to add your password right hereas well. once you have that setup, you want to click on 'login' to login to the controlpanel of your web hosting account. here we are on the hostgator control panel. the nextstep we want to do is step number two, we want to install wordpress. thankfully withhostgator 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 whereit 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'regoing to use this 'quick install' link. so, i'm going to click on that. once i click onthat you'll note that there's all these different kinds of software listed here on the left-handside bar. right at the top you'll note it says, "blog software" and there's a link herefor wordpress. this is what we want to install. so, i'm going to click on that. then, we'llarrive on this page and we can see at the time of this recording, we will be installingwordpress version 3.8. that's the most recent version of wordpress. the next step is weneed to click on this button here that says continue. here you'll get a panel where youcan decide which domain to install wordpress to. i'm going to add the domain name wherei want to install wordpress and i'm going
to fill out this information below startingwith the admin email. i'm going to add my admin email right there. next, you want togive 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 websitesecurity. 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 -- thoseare the first names that hackers will try when they're attempting to break into yourwordpress website. so, it's important that you use an admin username that is more uniquethan admin. for this instance, i'm just going to add my name right here. you can also addyour first name and last name. i'm going to
leave that empty. instead, i'm just goingto click on 'install' to install wordpress. okay, congratulations. your installation isready. you can access the installation of your new website by clicking on this linkhere. also note that here is the admin area login url that you'll use in the future toaccess the login panel, to access your website in the future. you want to make a note ofthis link here. it's usually your domain name followed by wp-admin. that's an importantlink 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 tolog into your website when you click on this link. i'm just going to highlight this temporarypassword and copy it. then, i'm going click
on this link here to login to my new wordpresswebsite. here we are on the log in screen of our wordpress website. to log in, you wantto enter your username in the username field and your password in the password field andthen you want to click on this button that says 'remember me' so that the next time youcome to wordpress, your username and password will be remembered. in the event that youforget your password in the future or perhaps even now, you'll want to click on this linkhere that says 'lost your password' and wordpress will send you a password reset to the emailthat you used when you were creating your wordpress website. for the moment, here ihave my username and password. i'm going to go ahead and click on the log in button tolog in to the wordpress website. here we are
on the dashboard. this is the first thingthat 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 hereto 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' linkright here. on the dashboard here we can see 'at a glance' we're running the twenty-fourteentheme; this is the theme that comes with our wordpress 3.8 installation and at the timeof this recording, wordpress 3.8 is the most recent version of wordpress. let's take aquick 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 websitename and click on 'visit site'. here we can see the homepage of our website when we'vejust installed wordpress version 3.8 using the twenty-fourteen theme that comes by defaultwith the wordpress installation. of course we've got quite a bit of work to do becausethe end result that we're headed toward in this video is this website view. this is thewebsite we'll be building in this video using the genesis framework and the lifestyle prochild theme by studio press. the first step we need to take to move in this directionis we need to change the theme from the twenty-fourteen theme to the lifestyle pro theme and the genesisframework. 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 weneed to add a new theme. to add a new theme, i'm going to click on 'add new.' there's thislink here that says 'upload' -- i'm going to click on upload -- and then here we caninstall the lifestyle pro theme in dot zip format by clicking on 'choose file'. of course,first we need to go to studio press and get the theme. i'm going to head on over to studiopress.comto find the theme. here on studiopress.com you can find the theme by clicking on 'shopfor themes'. here on the wordpress themes page we can check out all the amazing genesischild themes. of course, the theme that we want right now is the lifestyle pro themewhich is a magazine blog-style theme. i'm
going to click on 'all categories' then clickon 'magazine style' to do a filtered search for this particular theme. here on the right-handside we see the lifestyle pro theme. when i hover on top of it, there's a button: seedetails and pricing; when i click on this it will bring me to the lifestyle pro themepage where we can read all about this great theme. on the right-hand side we can see thatwe can get this theme with the genesis framework for just under one hundred dollars. i wantto make a quick note. this is a little bit more than many of the other themes out thereon the online wordpress theme marketplaces, but this is actually a really great valuebecause this includes not just the theme but also the genesis framework as well as unlimitedupdates and support and it's a one-time purchase
fee. the unlimited update is really an extravalue that comes when you buy the theme and the genesis framework; not all developerswill give you updates down the road, a year or so or more when the theme is updated. that'sa really important thing, to keep your theme updated, of course for so many reasons includingwordpress security. the other thing is that this also is a one-time purchase fee whichmeans that when you purchase this theme with the genesis framework, if down the line youwant to change the theme to some other genesis child theme, you will not need to buy thegenesis framework, you will just need to buy the theme which is really great. as a quickexample, a few years ago i bought the genesis framework and another theme, the mocha themefor a different website project. this time,
when i wanted to create a website with thelifestyle pro theme, i did not need to re-purchase the genesis framework; i only need to buythe brand-new theme, which is really great! that is the scoop on the theme and the genesisframework. if you do not yet own or have not yet purchase the genesis framework, then youwant to click on 'buy theme and framework'. if you already have purchased the genesisframework 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 lifestylepro theme. i am a returning customer, i've already bought this so i'm going to log inand i'll see you on the other side, on the dashboard of my studio press account wherewe can download the lifestyle pro theme. here
we are inside my studio press account. todownload the lifestyle pro genesis child theme, along with the genesis framework, i'm goingto click on 'downloads' to go to the downloads page. here on the downloads page i'm goingto 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'sa blue button, i'm going to click on that to download the genesis framework. once thegenesis framework has been downloaded, then i'm going to scroll down to the lifestylepro theme right here and do the same thing; click on the blue button here to downloadthe lifestyle pro genesis child theme. once both the genesis framework has been downloadedalong with the lifestyle pro child theme,
i'm going to go back to my wordpress websiteby clicking on my site here. we're back on the install themes page where we can installboth the theme and the framework in dot zip formats. when i downloaded these two filesthere were both already in dot zip formats so i can just install them directly by clickingon 'choose file'. here we see both the genesis zip file as well as the lifestyle pro zipfile. the first one i'm going to install is genesis; i'm going to highlight that and clickon 'open'. once i see that right here i'm going to click on 'install now' to installthe genesis framework. once the genesis has been successfully installed, i'm going toclick on 'activate' to activate genesis. now we see that genesis is active. the next stepis we need to install the genesis child theme
called executive pro. once again, i'm goingto click on 'add new' to add the new theme, and then i'm going to click on 'upload' andthen 'choose file'. then i'm going to select this time the lifestyle pro theme and clickon '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 childtheme has been installed successfully, i'm going to click on 'activate' to activate thistheme. now we can see here that the lifestyle pro genesis child theme is active. once thelifestyle pro genesis child theme has been activated, the next step is we need to addsome 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 pluginsscreen, i'm going to do a search for the genesis enews extended plugin so i'm just going toadd that in the search field and click on 'search plugins'. we'll see here it is atthe top, the genesis enews extended plugin. i'm going to click on 'install now' to installthis plugin. are you sure you want to install this? yes, okay. once the plugin has beensuccessfully 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, goingto 'add new' under 'plugins'; i'm going to add a new plugin, then i'm going to searchfor the simple social icons and click on 'search plugins'. here we see at the top: simple socialicons. 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 'activateplugin' to activate the plugin. the other plugin that i want to add -- one more thistime, we'll add some more later down the road in this video. the other one i want to addright now is the contact forms plugin. i'm going to click on 'add new', then i'm goingto do a search for the contact form seven plugin and click on 'search'. here it is atthe top, contact form seven. i'm going to click on 'install now'. are you sure you wantto install this? yes, okay. once it has been successfully installed, i'm going to clickon '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 lookslike so far. going up to the toolbar, i'm going to hover over the website name and clickon 'visit site'. here we can see the foundation for our website using the lifestyle pro genesischild theme. by default, when you install this theme, you'll have this fabric canvasbackground right here. the header section has this emerald green color; there's a samplepost on the left-hand side. we see the primary sidebar widget area and the footer sectiondown 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 hovergenesis and click on 'theme settings'. here we can configure all the different settingsfor this particular lifestyle pro genesis
child theme. starting at the top, if you'dlike 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 automaticupdates'. i'm going to leave it set for enable automatic updates. next, we have the colorstyle -- this is an important one -- so we can see right now its set to the default colorwhich is that emerald green color. but when i click on this, there are lots of other colorsto choose -- blue, green, mustard and red -- so choose whichever one best suits yourparticular 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 sohere. i'm not going to add any custom feeds;
i just want to point out where that is ifyou'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 twoleft-hand sidebars. there's a left-hand sidebar and a right-hand sidebar. finally, there'sa full-width page. whatever you want the default layout for your website; you can configurethat on this panel right here where it says 'default layout'. i'm going to leave it setwith 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 thisright now. next, if you'd like to add breadcrumbs -- as it notes, breadcrumbs are a great wayof letting your visitors find out where they
are in your site with just a glance. if you'dlike to enable breadcrumbs on the homepage, post pages or other pages, you can set thatup here. next we have comments and trackbacks. by default, i'm going to enable comments aswell as trackbacks. as it notes here, comments and trackbacks can also be disabled on asper post or per page basis when we are editing posts and pages. i will go over that a littlebit later when we're covering posts and pages. right now, for the moment, i'm going to leavethese two checked to enable comments and trackbacks. next we have the content archives which referto 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 alongwith the theme instructions and i'm going
to display the post content. i'm also goingto 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 navigationtechnique of numeric. we can see you can also use previous or next; i'm going to leave itas numeric. then i'm going to scroll down for blog page template if you want to excludecertain 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 headerand 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 savemy 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 clickon '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' whichis never a good tagline no matter what kind of website you have. at minimum, it's a goodidea to at least delete this altogether. in this case, though, for my website that i'mbuilding in this video, i'm going to add in a special tagline. since my website is aboutgreen juices, pressed juices and wellness, i'll just add that tagline there. then i'mgoing to scroll down and i'm going to click on 'save changes' to save my changes. oncethe 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 itemsand fill out all the content on the website as well as change some styling elements onthe site to give it a different look. let's start by adding some posts to our wordpresswebsite. to create a new post, you can go up to the top, hover over '+ new' and clickon 'post' or you can click on 'dashboard' -- click on 'dashboard' right there -- andthen on the left hand-side, you can hover over posts on the left-hand sidebar and thenclick on 'add new'. i'm going to click on 'add new' right here to create a new blogpost. the first thing we want to do here on
the new post page is we want to give our newpost a title. i'm going to add a title in right here. then, in this white box you canadd the content; whether a video, an image or some text. i'm going to add some text contentin this white box here by just pasting in some demo texts. we can see here that i'min the 'visual' view and then there's a 'text' view. if i want to format some of this contenthere, just like an email i would highlight it and then i would use whatever formattingicons here that i'd like. if i want to bold this i'd highlight these two words and clickon the b to bold these two words. note that behind the scenes, wordpress is generatingthe 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 createthe bold feature right here on these two words. we see here we have the html code for theopening bracket which is the opening tag of the bold tag, which is strong, then we seethat closing html tag right here for the closing bold tag right there. as you go through yourtexts and you create different formatting of this, you can just refer back and forthto 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 differentformatting icons. if you hover over them one at a time, a little tool tip will pop up tellingyou exactly what each one of these different icons does. if you want to insert a link forexample, we see that i'm on the 'insert link'
icon right here and i could just create mylink, highlight it, and then i can click on this button right here to edit or insert anew link. here at the top you will just add your link -- whatever it is -- you can giveit a title, you can choose whether you want the link to open in a new tab or not in anew tab, just within the website. whenever i'm going to an external website, i alwaysclick on 'open link in a new window or tab'. then, you can just come down here and clickon 'add link' to create your link. the next step is here on the right hand side, we needto 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 andclick on the button 'add new category'. once
the category has been set, the next step isthe 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 theseto be their own tag so i'll just add them all in right there. note that you want toseparate your tags with commas so i just put a little comma there. then, i'm going to lickon 'add' to add the new tags. the other thing i want to do is i want to add an image tomy post so i'm just going to place the cursor where i want the image to be displayed. theni'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 mycomputer 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. onceimage has been uploaded, you'll see the attachment details on the right hand side, and then youcan add a title, caption, alternative text or description. it's always a good idea, wheneveryou're adding images to your wordpress website to give at minimum, add a title and an alternativetext. this way, anyone who's using text-to-speech software or perhaps cannot see the image ontheir browser for some reason, they'll at least know, via the alternative text whatthis image is about. then, i'm going to scroll
down. you can choose where you want to alignthis, either no alignment, left, centre or right. i'll choose centre. if you'd like tolink this image to something, you can link it to the media file attachment page, a customurl 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 thefull width size. i'm going to choose full width or full size of five ninety pixels byfive ninety pixels tall (590x590). finally, you want to click on 'insert into post' toinsert 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 choosethe same image right there and then i'm going
to click on this button to set the featuredimage. 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 settingswill 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 settingsright from within the theme. i'm going to leave this un-filled in for the moment butthis 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 thedefault which is the right sidebar. but if you want to create unique pages or end postson your website, you can do so right here
by choosing a unique layout. once you're allready to go then come up to the top here and click on 'publish' to publish your new blogpost. 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 createa new post: we can click on 'add new' here at the top or in the toolbar we can hoveror '+ new' and click on 'post' or on the left hand sidebar we can go to 'post' and clickon '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 thetitle right here. next here in the white box, we're in the visual view right now; we canadd some texts, an image or a video. i'm going to start by adding some text so i'm just goingto paste in some text right here, then i'm going to add an image so i'm going to placethe 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 mycomputer. next, i'm going to choose an image -- here it is right here, this chocolate smoothieimage -- then i'm going to click on 'open' to open the image. once the image has beenuploaded, the next step is to give the image a title and an alternative text, so i'm goingto add one in right here. then we can check
out the attachment display settings. scrollingdown, i want this to be centre aligned so i'll keep it as centre. i do not want to linkthis image to anything, so i'm going to change this to none. you can choose any of theseoptions right here. then i'm going to choose the full size which is six forty pixels wideand six forty pixels tall (640x640). once everything looks good then go ahead and clickon 'insert into post' to insert the image into the post. next, on the right hand sidewe can choose a category. i'm going to create a new category this time so i'm going to clickon 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 thecategory 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 thetags 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 usinga wordpress seo by yoast seo plugin or some other seo plugin then this is an importantpart to fill out for seo. let's see; scrolling down i'm going to keep the default layoutright here consistent throughout the website. of course, there are lots of different optionsif you want to change that. then, just going to scroll to the top and i'm going to clickon 'publish' to publish my new post. one more thing; i notice that i had added the categoryright here but i actually didn't officially
add it. once you add the word in here forthe new category, then you need to make sure that you click on this button here to actuallyadd the new category. now we see that the category is checked so we're good to go. withthat, i'm going to publish this by clicking on the 'publish' button here. now we haveour second blog post published, which is great! let's take a look at some of the pages. wehave not created any pages yet; we have a couple of blog posts. to create a page isvery 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 contentthat changes on a daily basis: news or events
or just fresh content. pages are your staticcontent. pages would be things that don't change; there's no published author associatedwith this, there is no date associated with it. it's a static page so things like yourcontact page, your about page, maybe a photo gallery page; those will be great topics foryour pages and then anything that's fresh content would be perfect for a post. i getthat question a lot; what's the difference between a post and a page so i just want topoint that out. let's go ahead and create some pages starting with the about page. mostlikely, you're going to want to have an about page about your website or about you on yourwebsite. once we create some pages, then we'll be able to add them to the menu navigationon the homepage. to create a new page, i'm
just going to come up to the top here, hoverover '+ new' and click on 'page'. the first thing that we want to do is give our new pagea title so i'll just call this 'about' since this is the 'about' page. here on the whitebox i'm going to add some content; i'll just add some texts here and i also want to addan image. once again, as we did in the previous example with the blog post, it's the samething 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 selectmy file right here and click on 'open'. once the image has been uploaded i'm going to givethe image a title and an alternative text. once you've added the title and alternativetext, you can scroll down and check out the
attachment display settings. this time i wantthe alignment to be right-aligned so i'm going to click on right. i want to link this tonothing so i'm going to click on 'none' and i do want the full size here and not the thumbnailsize so i'm going to click on 'full size' and then click on 'insert into page'. oncethe image has been added to the page, then next steps are the page attributes here onthe right hand side. if you'd like to set up a parent page, you can do so. the aboutpage is going to be the top level page in this case, so i'm not going to have a parentpage but i just want to point that out; this is where you would do that if you'd like tocreate parent pages. the template i'm going to use is the default template. you can seewhen 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 particularpage. this is a good idea to fill this out if you're not using another seo plugin. comingdown to the bottom, we can choose our layout settings. this is a page and it's specificallyabout the about page so i do not want to have a sidebar here on the right hand side. forthis particular page i want it to be a full width page so i'm going to click on this layoutstyle right here. then, scrolling down, everything else looks good. i'm going to come up to thetop 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 theessence of time right now and i'm going to
go forward and i'm going to create a blogarchive 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 blogsince this is the blog archive page. i'm not going to add any content here because thispage is actually going to pull all the blog posts and display them all on one single blogarchive page. i'm going to leave this all blank. on the right hand side though whereit says page attributes, the template that we need for the blog page is 'blog' so i'mgoing to click on 'blog' here to set the blog template. then, scrolling down, everythingelse 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 justgoing to move forward and create a contact page. to create a contact page -- this isa page where anyone can easily contact you from within your website. to create a contactpage, i'm going to go up to the top, hover over '+ new' and click on 'page'. next, aswe did previously in the other examples, i'm going to give this page a title; i'm goingto call this contact since this is the contact page. i'm going to save the draft by clickingon 'save draft'. note that earlier in the video we had added a plugin called contactform 7 to our wordpress website so that is
going to serve us now. to check out the codewe need for the contact form, i'm going to go back to my plugins page right here by clickingon 'plugins'. here we can see the contact form 7 plugin which we added earlier in thisvideo. if you haven't yet added this, then you're going to want to do a search to adda new plugin by clicking on 'add new' and then you want to search for the contact form7 plugin and install that and activate this plugin. once you have that here in your pluginslist right here, to find the code you want to click on 'settings'. here we see the defaultcontact form that comes when we install this plugin so i'm going to click on 'edits'. hereyou 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 standardfields in any kind of contact form. the code we need is right here above so i'm just goingto copy all of this; highlight it and copy it. going back to my page, i'm going to clickon '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 goingto paste the code that i just copied in the previous step. once you have this contactform 7 short code here in the text view, then we can scroll down. everything else looksgood; i'm going to have default once again with the right hand sidebar. i'm going toclick on 'save draft' one more time because
i want to point out one special thing aboutthe contact form. when you come up to the right hand side here and you click on 'screenoptions', then when you click on 'discussion', note that you'll get another field down belowrelated to comments and trackbacks. on my contact form, this is a page, it's not a blogpost so i prefer not to have any kind of comments or trackbacks on my pages, especially on mycontact form. i'm going to un-check this to turn off comments and trackbacks on this contactform page. once these are un-checked, then i'm going to come up to the top and clickon 'publish' to publish my new contact form page. once the page has been published, nowlet's check out what the site looks like so far. we've been doing a lot of work, addinga lot of content to the website; let's see
what the homepage looks like now. going upto the top left hand side of the toolbar, i'm going to hover over the website name andclick on 'visit site'. here we can see the beginnings of our website. it's looking goodso far. we've got lots more to do, starting with the menu navigation items here with thosevarious pages that we just created. to create a menu navigation area, i'm going to go backto 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 justgoing 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 thecontact page, the blog page and the home page
-- check all these three. the sample pageis the default page that comes with your wordpress installation and i will be deleting this pagea little bit later on. we don't need that. once you have the pages that you want to addto menu, click on 'add to menu' to add these to the menu. to reorder them, all we needto do is drag them and drop them where we want them to be displayed. i'm going to havethe about page first followed by the blog page and then the contact page. next i'm goingto click on 'save menu' to save my menu. once the menu has been saved, notice that we'remissing the home button. that's always a good navigation item to include, the home linkright there. i'm going to create that by going down to links, clicking on this box to openit up and then i'm going to add my url right
here for my actual website. i'm going to givethis a link text of home, then i'm going to add it to the menu by clicking on 'add tomenu'. once again i'm going to drag it to the top right here so that it shows up firstin the list. then i'm going to click on 'save menu' to save my menu. once the menu itemshave been saved, we can see at the top we have the 'manage locations' tab. we have onemore step to make this display throughout our website. i'm going to click on 'managelocations' and here we can see there are two different menus that come with the lifestylepro genesis child theme. we have a primary navigation menu and a secondary navigationmenu. the primary menu is going to be displayed above the banner and the secondary one willbe displayed below the banner. for this particular
menu that i just created, i want this oneto be displayed below the banner so for the secondary menu navigation, i'm going to setthat 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 thevideo to the primary navigation menu area. once the menu location has been set, now tocheck out the website i'm going to go up to the top toolbar, hover over the website nameand click on 'visit site'. we can see here we have our menu items being displayed. thatlooks great! we have our about page, blog page and contact page. when i click on eachof these, we can see here we have our about page, our blog page -- this is the blog archivepage -- which will display all of our blog
posts. we have our contact form where anyonecan easily contact us from within our website. looking over the homepage of our website sofar, we see we have the banner section, the menu navigation area, we have a primary sidebararea that we need to setup. the main thing i want to point out here is that we have allof 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 blogposts 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'sone featured blog post right here. then we
have the first category section; then we havethe second category section and the third category section right here. for this videoi'm going to set up all of these different categories on the homepage. keep in mind thatso far we've only created two categories; we've created a pressed juice category anda 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 sothat i can also create a new category because when we go to the dashboard, for example -- i'mgoing to click on 'dashboard', then when we go to post by clicking on 'post', here wesee categories. these are our categories so far and i only have two categories createdso far. i need at least one more category
to make the homepage section work. i'm goingto go back up to my toolbar here, hover over '+ new' and create another blog post withmy third category. here on my new blog post, i'm going to give my new post a title so i'lljust post in a title right there. i'm going to go a little bit faster since we've alreadygone over this in the previous examples. here on the white content box i'm going to pastein some content so i have my text content right there. i'm also going to add an imageso 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'mgoing to give it a title and an alternative
text, then i'm going to scroll down, choosethe alignment. i'm going to have this just displayed in the centre; i'm going to linkthis to nothing so i'll click on 'none' and i want the full size which is six forty bysix forty pixels (640x640) six forty pixels wide and six forty pixels tall. once you haveeverything the way you like to have it set, go ahead and click on 'insert into post' toinsert the image into the post. note that we don't see the image here because we'rein the text view. now we can see the html code that wordpress is generating behind thescenes 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 wherei want to add a new category so i'm going
to click on 'add new category'. i'll callthis 'green juice' then i'll click on 'add new category' -- this button right here. themi'm going to scroll down, you can add some tags if you'd like, making sure that you separatethe 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 topand click on 'publish' to publish my new post with my new category. now that we have allthe 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 onthe 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 toadd them to each of these three different categories. i'll see you on the other sideonce i've created all those blog posts so that we can set up the homepage with the featuredcategories. here on my all posts page we can see all the different blog posts that i'veadded to my wordpress website as well as the categories and the tags. when i go to thewebsite homepage by going up to the top toolbar, hovering over the website name and clickingon 'visit site', here we can see the homepage with all the different blog posts displayedone by one, vertically after the other. this is the default view of the lifestyle pro genesischild theme if you don't make any configuration settings to the homepage; you'll just havea blog post just like that. of course, i want
to add those featured posts and featured blogcategories to my homepage. to do that, i'm going to go back up to the dashboard, clickon 'dashboard'. next, i'm going to go down to 'appearance', hover over 'appearance' andclick on 'widgets'. here on the widgets section we see all these different widgets that areavailable with our theme. the main ones that we want right now are the ones that are relatedto home: home -- top, home -- middle, home -- bottom left and home -- bottom right. theseare the widgets that we need to set up in order to display the featured content on thehomepage. starting with home -- top, i'm going to click on this button here to open up thisbox. 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 goingto give this a title; of course if you'd like to give this a title, by all means go aheadand add your title here. i'm going to select the category, though so i'm going to clickon this. i'm going to choose pressed juice, so that is the category of the featured posti want to display. i want to display one post; i'll just leave it as one. you can of coursechange that if you want to display more than one post. then i'm going to order it by thedate; that looks good. everything else in this box looks good. moving over to the righthand side, i want to display the post title so i'm going to click on that box. i'm notgoing 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 hundredfifty (250) characters; i'll just add that right there. for the more text, i'll justadd '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 wanta thumbnail, that's way too small so i'll choose the home -- large size here. there'salso a home -- small size, if you like; but because this is the featured post, i wanta really large image so i'll choose the home -- large. next, for image alignment, i'lljust have it be left aligned right there.
these boxes over here i'm not going to fillout, i'll just leave the default settings. finally, i'm going to click on 'save' to savemy settings. of course, feel free to go through all of these different settings and set theseup according to however you want to have it displayed. these are the settings that i'dlike to have for my own demo right now in the video. once you have all the settingsthat you'd like to set here on the featured post section for the home -- top widget, i'mjust going to close this by clicking on this button. i'm going to do the same thing forthese three widgets right here starting with the home -- middle widget. i'm going to clickon 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 titlethere. the category that i want, once again, is pressed juice. i want to show three postsso i'll just put the number three in there. then, here where it says 'exclude previouslydisplayed posts'; i do want to exclude the previous posts which is the one that is featuredjust up above in the home -- top section. i'm just going to click on 'exclude previouslydisplayed posts'. i do want to order it by date, so that looks good. this whole box isset up the way that i'd like. moving over to the right hand box right here, as we didin 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-fiftycharacters as we did previously and i'll include
a read more text right there. then, scrollingdown i do want to show the featured image so i'm going to click on this box. althoughthis time, instead of having the large image with six hundred thirty-four pixels, i'm goingto choose the smaller image so i'm going to click on home -- small. i'm going to alignthis, once again, to the left. once you have all of the settings set up as you'd like themhere 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 bottomleft widget. do the same thing; i'm going to pull over the featured post widget, dropthat in. here on the title field i'm going to give my new featured category section atitle so i'll just add in a title there. this
time, the category that i want is green juicesso i'll select green juices right here. the number of posts to show -- i'm going to displaytwo posts; i'll just put in the number two. scroll down; i want to order this by dateso that looks good. i do want to exclude previously displayed posts. of course, we haven't reallyadded this particular category yet to the homepage, so it really won't apply at themoment, but later down the road, if i decide to change the featured post in the top areaor throughout the site, then this way it will make sure to exclude previously displayedposts. on the right hand side, i do want to include the post title so i'll click on thatand just to show how this will display with the author and the date; i'm going to clickon this button right here to show the post
info. for content type, once again, i'll clickon 'show the content limit' and i'll limit it to say, eight characters. next where itsays more texts, to keep it consistent i'll just add in read more right there. scrollingdown here where it says show featured image, i'm going to click on that and this time i'mgoing to use not the thumbnail or the home -- large, but once again, the home -- smallfeatured 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 goodto 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 thisbox. finally, the last one we have here is
the home -- bottom right widget so i'm goingto open that up and just as we did previously, i'm going to drag the genesis -- featuredposts 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 bottomleft section, to keep it consistent in this area, i'm going to add two posts. i'm goingto click on 'exclude previously displayed posts', click on 'show post title', 'showpost 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 charactersand i will use the read more text right here. finally, scrolling to the bottom, i'm goingto click on 'show featured image' and the
image size that i want is the home -- smallsize of two hundred sixty-six pixels wide. the image alignment is left; so we're allgood to go. finally, i'm going to click on 'save' to save these settings. just as a quickdouble-check to make sure that this lines up correctly, the limit here that i've forthe bottom right widget is eighty characters. the bottom left one here should also be eightycharacters which is great! let's take a quick look at the homepage to see what all the differentcategories look like now on the homepage. going up to the top, i'm going to hover overthe website name and click on 'visit site'. here we see our featured post right here withthe title and some content with the read more link to read more. then we have the beginningof 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; thenwe have these two right here. note that this isn't really lining up very well because thisword -- energizing green juice -- has too many characters so it takes up two rows insteadof one. i want to keep this consistent so really quickly i'm going to go back and i'mgoing 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'sthis widgets link here that will bring me directly to the widgets page so i will clickon that to save time. going back to the bottom left widget right here; i'm going to openthat up and then i'm going to change it and
take out this adjective here so it just saysgreen juice. now, when i scroll down and click on 'save' and go back to my website by clickingon 'visit site', now we can see that everything looks really good. that looks so much betterbecause that's all in alignment. okay, great! the next step is; now that we have some partsof the homepage set up, let's continue by setting up the sidebar widget area. as a quickpreview 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 addingan email opt-in form just the genesis enews extended plugin. then, we'll be adding anauthor bio section with a thumbnail image, search box, an image that has a call to actionand a link to an internal page within the
website. then we'll be adding some socialmedia icons here so anyone can connect with you easily on the social web. finally, we'llbe adding some images from pinterest. these are the content types that we're going tobe adding in this video. the great news about the primary sidebar and all sidebars and footersin wordpress is that this is where you can add completely customisable content. if youwant to add something else and not include this, by all means, you can do that. i'llshow 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 clickingon 'widgets' right here. here we can see on the right hand side we have a primary sidebarand a secondary sidebar. when i open this
primary sidebar here, it notes: this is theprimary sidebar if you are using a two or three column side layout option. the lifestylepro genesis child theme has the option of adding three columns if we'd like, which isreally great. in this video, i'm only going to be using the primary sidebar, but everythingwe do at the primary sidebar you can set up similarly in the secondary sidebar. the firstthing that i want to add here is the genesis enews extended plugin which is right downhere. earlier in the video we had installed and activated this plugin so i'm just goingto drag this up into the primary sidebar. here, i'm going to give this a title so i'lljust add my title in here. i'm not going to go over in this video how to set this up becausei have another video which goes over this
step-by-step, from scratch telling you howto set up this entire email opt-in form. i'm going to refer you to my other video, it'scalled genesis enews extended: how to add mailchimp emails to your genesis wordpresswebsites. i'll be sure to drop a link in this video right here so you can go through theprocess of setting up your email opt-in form using the genesis enews extended plugin. onceyou've set up the email opt-in form using the genesis enews extended plugin followingthe youtube video on my channel, the next step is to add another widget. i'm going toclose this box by clicking on this button right here. the next widget that i'm goingto add is user profile so i'm going to drag the genesis -- user profile widget just underthe email opt in form. here within the user
profile widget we can configure these settingsincluding 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 wehave gravatar size; i'm going to choose the extra large one hundred twenty-five pixelssize. 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 somecustom 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 oftext do you want this link to go to. i'll just click on 'learn more', or i'll type inlearn more. this will be the text that will
link to the about page. the next step is i'mgoing to click on 'save' to save my settings. once you have all the settings set for thisuser profile widget, then we can close it by clicking on this caret right here. thenext widget that i want to add is the search box. it's always a good idea to have a searchbox on your website so anyone can easily find content on your site. scrolling down, here'sa search widget right here. i'm just going to drag this to the top and i'm going to placeit right underneath the user profile. the title will be 'looking for something?' youcan add any title that you like. i'm going to click on 'save' to save this setting. nexti'm going to add the simple social icons; these are the icons to all of your differentsocial networks across the web. in the earlier
part of this video we had added the simplesocial icons plugin to our site. if you don't have this here, you want to make sure thatyou go to the plugin page and install and activate the simple social icons widget. i'mgoing to go and bring this to the top here just underneath the search box and then wecan all add of the different social networks that we want to show up as an icon. startingat the top here where it says title i'll just say 'connect on the web'. next, if you wantto open links in a new window, you can check this box; i'll go ahead and do that, that'sa good idea. it's always a good idea to open links in a new window when you're sendingsomeone 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 defaultof a gray color to this kind of red color right here -- the background color and thebackground hover color -- i'll add this new color code here, this is a shade of red. i'llbe sure to include this code in the video in case you can't read it. next, you justwant to add all the different urls for the social network that you want to be displayedas 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 atthe homepage to see how our sidebar is looking
so far. going up to my site, i'm going tohover over the website name and click on 'visit site'. here we see on the right hand sidewe have our email opt-in form, our user profile right here, our search box and our socialnetwork icons. the two particular ones that we're missing so far, jumping over to ourcompleted website, are the image here and image with the call to action and a link toan internal page and then the pinterest images down below. let's start by adding the imageto our website so that we can add this widget as well to the sidebar. going back to oursite -- 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 inprimary sidebar -- i'm going to open this
up once again, and then i'm going to scrolldown to the bottom. the widget that we need is the text widget so i'm going to drag thisup to the primary sidebar and i want it to show up right underneath the 'looking forsomething?' field right here. this is where we want to add our image. we don't have animage yet and we don't have a link so i'm just going to save this as a placeholder byclicking on 'save'. the next step is we need to add both an image as well as a new pageso that we can link the image to the new page. first i'm going to create the image or addthe 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' toopen 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; 'signup' is not very descriptive. i'm going to add another title right here: get your 14-daydetox 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 thatwe're actually going to need so i'm going to highlight this and copy it, then i'm goingto click on 'update' to update this media image. note also that the dimensions of thisparticular image for the sidebar that i'm using are three hundred pixels wide and threehundred pixels tall (300x300). the height
doesn't really matter that much but the widthdoes matter because the width of the sidebar is about three hundred pixels wide so whateverimage you upload i recommend using three hundred pixels for the width. once you have your imageready to go, and we've already highlighted and copied this url, let's go back to thewidget area to add the image to the widget. i'm going to go back to 'appearance', clickon 'widgets' and then i'm going to go to the primary sidebar. i'm going to go to the textwidget 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 codethat i'm adding; this is html code for an image. you want an opening bracket and thenimg then there's a space then it says 'src'
for source then an equals sign, quotationand then you have the actual url of the image and then you have another closing quotationand a closing bracket 
to be a landing page. landing pages are usedto focus attention on any kind of product or service that you're offering and a callto action that you want your reader or viewer to take. even in the title here we can seethis 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 needto give them some reasons. i'm going to add in some demo content right here which as wecan see i'm going to include reason number one why you should sign up, reason numbertwo 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 nowi'm just going to leave this text here. i'm
also going to add an image by placing my cursorwhere 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 goingto scroll down and i'm going to select the display settings. i want this alignment tobe right-aligned so i'll click on 'right'. i want it to link to nothing so i'll clickon 'none'. the size that i want, i actually want a smaller size so i'm going to choosethe three hundred by three hundred size; then i'm going to click on 'insert into page' toinsert this into the page. when i click on the 'visual' tab here we can see the imagedisplayed next to the text. on the right hand side we have the page attributes. when i scrolldown, we can see there's this view right here
for template. when i click on this, this ishow 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'mgoing to scroll down, you can add your theme seo settings for this page right here. thelayout 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 landingpage because that would be super distracting from my call to action. i think we're allset and ready to go; i'm going to click on 'publish' to publish my new page. we'll becoming back to this page a little bit later
in the video because i still need to add theemail opt-in form to sign up for this particular offer. for now, i just want to select theurl here so i'm going to click on 'view page' to view the page. we can get a quick previewof it, at least. here we see that with the landing page, the logo, the banner, the menuitems are all no longer there; they're no longer displayed at the top. the total focuson attention on this page is on your offer, your call to action, the reasons why someoneshould sign up. when we're done -- we're not quite done right now; we'll take care of thisa little bit later in the video -- we're going to add a call to action email opt-in formdown 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 scrolldown to the text placeholder here where that image was and i need to add the link. thisway, when anyone clicks on the image, on the sidebar, they'll go directly to my offer onthe landing page. no worries if you can't read this, i'll be sure to drop this codein the video so you can see it a little better. the link code that we're adding starts withbracket a href equals quotation then you have your actual url to the landing page followedby a quotation, a closing bracket; then after all of the image code right here we have aclosing link bracket right here
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'renot sure of the code or if you're just learning code, a quick little trick to get the codeis to simply create a temporary poster page by going up to post. then you can take advantageof wordpress behind-the-scenes code generator by simply adding whatever it is in here. i'lladd 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 theimage in right here -- this is the image -- then i'll click on 'insert into post'. then wecan 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 youcan add the actual url wherever you want this particular image to go to. so this is justa quick trick you can remember how to do the code that's how you would do it. then youwould just click on update to update it. then when you click on save draft, and then whenyou click on text here is the code that you would grab. so you would just highlight allof 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'tremember how to create the code. okay so i actually don't want this page so i'm goingto move it to the trash by clicking on move tot rash. and now let's just take a look atthat image that we added to our sidebar. so
going up to the website i'm going to clickon 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 backto the homepage, the last widget area that we need to add is the pinterest widget areawith the pinterest images from my pinterest profile. so going back to my dashboard i'mgoing to go up to the website name and click on dashboard. and in order to create the pinterestimages 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 goingto do a search for the plug-in that we need
which is the alpine photo tile for pinterestplug-in. so i'm just going to add that here in the search box, and then i'm going to clickon search plug-ins. here we see it's at the top, alpine photo tile for pinterest thisis 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 successfullyinstalled i'm going to click on activate plug-in to activate the plug-in. okay once the plug-inhas been activated now we can go back to the widgets area by hovering over appearance andclicking on widgets. next here on the primary sidebar i'm going to open this up by clickingon this carrot and then i'm going to scroll down and then i'm going to find the alpinephoto tile for pinterest widget which actually
is at the top. so i'm just going to drag thisto the bottom of my primary sidebar right there and drop it in. then we can set up thesettings for this particular plug-in. so the first thing i want to add is the title soi'll use a call to action, get inspired follow on pinterest. next on pinterest settings wecan choose where we want to retrieve the photos from, either from the user at large or a specificboard. i'm going to choose a board because i want a specific board to show up. next ineed to add my pinterest user name so i'll add that in right here along with the pinterestboard tags. i'll just add the board tag right there, healthy food inspirations. so thatis the board name and the pinterest username. next where it says image links or the numberof 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 awayfrom my website so i'll choose a light box. i do want to include a pin it button and ido want to display a link to the pinterest page so i'll click these two right here. nextover 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'mgoing to choose a rectangle shape not a square. the photo size that looks good 192, and thenumber of photos that i want to have displayed i'm going to change this to six. next scrollingdown everything else looks good, i'll leave the format settings default as they are righthere and then i'm going to click on save to
save my settings. now when we check out thesettings on the homepage by going up to the site by clicking on visit site, now we cansee our sidebar. we've got our email form, our user profile, the search box, our callto action with this leading to the landing page. some social network icons and we haveall of our beautiful pinterest pins which when you click on each one of these it's goingto open to a really cool light box display and keep everyone right on my website. sonow that we have the sidebar all set up on our website, let's also set up the footersection down below. there's a footer area right above these footer credits that we canadd. so to add that once again i'm going to go back to the widget section by clickingon widgets, then here on the right hand side
we can see there's a footer one, two and threesection 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 goingto scroll down and add those by just dragging those up into footer number one. now i'vealready gone over how to set this up so i'm going to do this behind the scenes. i'll justuse this as a placeholder now, if you want to refer to the previous example of how weset that up that would be great. so i'll do this behind the scenes, for now i'm just goingto close this. next for footer number two i'm going to add a short description aboutthe website. so i'm going to open up this area by clicking on this arrow, then i'm goingto scroll down grab the text widget and drag
that up into footer two widget area rightthere. then i'm just going to add a title then once i add the title then i'll add ashort 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 footernumber three i want to add a video. to add a video i'm just going to drag this text widgethere, drag that into the footer three widget area. and from here we need to go to youtubeand grab the embed code for the video. so here we are on the youtube channel and thisis the video i want to add to the bottom right hand section of the footer. so to grab theembed code i'm just going to scroll down, click on the share button right here and thenyoutube will provide the embed code down below.
now i want to create a custom size becausethe 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 needto do is copy all this code, highlight it and copy it, then going back to our widgetarea 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 tosave the settings. from here to check out our website i'm going to go back up to thetop and click on visit site. and here we have our website using the lifestyle pro genesischild theme. so we have our sidebar on the right hand side. our header, our menu itemsand 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 weneed 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 coupleadditional pages to the site as well. so for starters let's add the landing page to themenu area right here in the secondary navigation area. i'm going to do that by going up tothe top and going directly to the menus page and clicking on menus. here on the menus pagewe 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 upjust a little bit right after the about page
right there. and i'm also going to changethe title of this menu item so i'm going to click on this button right here, and thenin this area here where it says navigation label i'm going to add a new label. then i'mgoing to scroll down and i'm going to click on save to save the new menu. once the menuhas been saved now i want to add two more pages to my website so that i can add themto the navigation area - both the primary navigation above the banner, and another menuitem and secondary menu navigation below the banner. so to create those pages once againi'm going to go up to the top click on plus new and click on page. then here on the addnew page the first page that i want to create is a recipes page so i'll just add in recipesfor the title. then i'll add some content,
i'll keep it as a default template, then i'mgoing to click on publish. actually before i click on publish because this is a pagenot 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 trackbacks 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 isa page that i want to have appear and display above the banner, and i want it to be a shoppage related to some products that we may
want to offer for sale. at the top i'm goingto hover over plus new and click on page. here for the page title i'm going to callthis shop. then for the text here i want to add two images which will represent some kindof product that i may want to offer. this could be both a physical product as well asa digital informational product. so here in this particular box i'm going to click onthe visual view so we can see what it looks like. i'm going to place the cursor in thewhite box and click on add media to add media. then i'm going to click on upload files andselect files, then once wordpress has uploaded the image to your website here on the righthand side you can add your title as well as the alternative text. also know for this particularexample i'm also going to add a caption so
i'll add the same thing right here. okay onceyou have your caption title and alternative text added, then scrolling down i can choosemy display settings. i will just leave it as the left line i guess, or center, actuallyi put no alignment. this is an important part so when i click on this so there's lots ofdifferent options. we can click to a media file which is the actual image itself whichis not very helpful, or an attachment page, a custom url, or none. usually i click onnone, but in this instance i'm going to click on custom url. because if this is an imagethat you actually want to sell it would be great to be able to click on the image fromwithin your website and be sent to another page. either to an internal page that talksabout the image or if you have an affiliate
product you can add your affiliate link rightin here. i often get questions about affiliate products so this is one option, one way tofeature affiliate products on your site and include your affiliate link by just addingit right here in this field right here. so imagining that i have an affiliate accountfrom amazon set up, i'm just going to add the amazon url right here. of course i don'treally have an amazon affiliate link for this product but just for the demo purpose i'mgoing to add the amazon link right here. then for the size let's see, of all these sizesi'm going to go with the medium size 200 x 300. we'll see how that looks. once it's allready to go and you have all the settings like you want them to be, go ahead and clickon insert into page to insert this image into
the page. okay that looks great. so i'm goingto 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 onthat, and then click on open. next once the image has been uploaded i'm going to givethis a title caption and an alternative text. okay, once i've got that set up i'm goingto scroll down and just as we did in the previous step i'm going to say alignment none, linkto i'll make this a custom url and once again i'll add my amazon link right here. againthis 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 courseif 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 oninsert into page to insert this image into the page. okay so here we are on the shoppage. we can see i have the two images lying vertically one by one. i actually want tohave these horizontally lined up right next to one another though. so in order to adjustthat i'm just going to click on this image once and when i do so i get two icons, anedit icon and a delete icon. of course i don't want to delete anything so instead i'm justgoing to click on the edit icon right here. and i need to change the alignment, rightnow there's no alignment. so i'm going to
set this to left alignment then i'm goingto click on update. i'm going to do the same exact thing for this image down below. i'mgoing to click on it once, then click on the edit icon right here and i'm going to changethe alignment from none to left alignment. now when i click on update these show up oneby one right next to one another which is exactly how i want to have it displayed. onceyou 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 thati have my shop page with my two images and when i click on either one of these it's goingto send me to amazon.com because that is the external link that we set up. so once againif you had an affiliate link that would work
out really well for the demo though i'm justgoing to keep it at amazon.com. then i want to add this particular page to the top primarynavigation bar so let's do that now. i'm going to go to the top, hover over the website nameand click on menus. then i'm going to click on shop but actually notice that this is theactual main primary menu so i actually need to create another menu, the top menu. so i'mgoing to click on this button here that says create a new menu, then here for the menuname i'm going to call this top menu, and then create the menu click on this buttonright here. once the top menu has been created, now we can add items to this particular topmenu. so i'll add the shop item, shop page right there click on that, and then clickon add to menu. then once that shows up right
there for the top menu i'm going to clickon save menu to save the menu. now when we go to menu locations, manage locations atthe top this tab that says manage locations for the primary navigation menu i'm goingto select a menu by clicking on top menu. so now we have two menus that will be displayedon our website. the last step is i need to save this by clicking on save changes. okaygreat, so now take a look at our website. i'm going to back to the website name andclick 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 otherlast thing that's missing though, i have not yet added the recipes page right here so onemore time i'm going to go back to the menu
by clicking on menu, then here where it saysrecipes i need to find the main menu. so once again where it says select the menu to editi'm going to edit the secondary navigation menu right here by clicking on select. theni'm going to click on this recipes pages that i created and click on add to menu. then i'mjust going to reorganize all of this right here. so the first thing that i want is iwant this one to show up first. then i'll add the blog page right there, or i shouldsay 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 yourmenu. once the menu has been updated there's two more features that i want to add to thissite before we check out the site. number
one, i want to add the social sharing iconsat the bottom of the blog post and number two, i want to add an email opt-in form tothe bottom of blog posts as well as to the bottom of the landing page. related to orregarding the email opt in form when we go to my completed website over here, we seethis is the landing page on my completed demo site. and when we scroll down we have thisemail opt-in form. this is one of the two features that i want to add right now to thissite. first though let's add the social sharing features to the website by going back to oursite. then i'm going to click on plug-ins, the plug-in that we're going to be using isthe jetpack plug-in which should have come with your wordpress installation. we can seeit right here i have it listed. if you don't
see it here in your plug-in list then youwant to go to add new and you want to search for the jetpack plug-in, you want to installand activate this plus-in. so here we have it jetpack by wordpress.com i'm going to clickno activate to activate this plug-in. next we see okay jetpack is almost ready but aconnection to wordpress.com is needed in order to enable the features. so i'm going to clickon this button right here to connect to wordpress.com. next we'll arrive on wordpress.com where ifyou 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 accountthough you can create a free account by clicking on this button that says get started. onceyou click on get started you'll arrive at
the sign up page, the only little catch withthis is that this is a sign up page to create a blog and we already have a blog so we reallydon't need a word[press.com blog. all we really need is a wordpress.com username and password.to kind of circumvent this part when you come over to where it says wordpress.com free youclick 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 righthere you'll get this little message that says, if you don't want to blog you can sign upfor just a username. that's the one that we want so i'm going to click on that link tosign up for just a username. now you'll see you can fill in just your email address, ausername and create a password, and then click
on the button to sign up and create and wordpress.comaccount. so go ahead and do that now and i'll see you on the other side once i've loggedin to my wordpress.com account. once you log into your wordpress.com account and then youclick on the jetpack connection button you should come to this page where you can authorizejetpack to connect with wordpress.com. so i'm going to do that now by clicking on authorizejetpack and here we see jetpack has been authorized and it will have this message that says welcometo jetpack 2.9, 2.9 is the current version at the time of this recording. in additionto the welcome message you'll also see all of these features down below, all of whichyou can add to your wordpress website. the ones that we want right now i'm just goingto go down the list here. the one that i want
is jetpack comments so i'll go ahead and activatethat by clicking on activate. then once the jetpack comments have been activated i'm goingto scroll down and see the other one that i want here, here is the sharing feature righthere. so i'm going to click on configure to configure the social sharing features. hereon the sharing settings when we scroll down we can see all the different available servicesthat we can add to the bottom of our blog posts. so the ones that i want to add willinclude 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 smallermore box right here. i'll add linkedin and tumbler, read it and email in this box righthere. you can see a visual live preview of
what it will look like on the site so youcan see here are all the different buttons and how they will be displayed underneaththe blog post. then i'm going to scroll down the sharing label i'll just leave it as sharethis. then where i want to show these buttons, i want to show these on my posts so i'll clickon posts and then i'll click on save changes to save the changes. so now when we checkout the blog posts by going up to the site and clicking on visit site. then when i scrolldown and click on one of my blog posts right here i'll click on this one. we can see wheni 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 addto the website is that email opt-in form at
the bottom of the blog post as well as atthe bottom of the landing page. so to add the magic action box i'm going to go backto the dashboard, click on dashboard. then here on the dashboard i'm going to scrolldown to plug-ins, click on plug-ins. then the plug-in that i need to add here becausei don't have it yet is the magic action box. so i'm going to click on add new, then inthe search field as you search for the magic action box and click on search plug-ins thenhere it is right here. i'm going to click on install now, are you sure you want to installthis? yes, okay. and once the magic action box has been successfully installed i'm goingto click on activate plug-in to activate the plug-in. okay once the plug-in has been activatednow we can see the magic action box settings
on the left hand side as well as the actionbox right here. from here to continue setting up the magic action box and the email opt-informs for your blog post and your landing page i'm going to refer you to my other videoon my youtube channel which shows you how to capture leads on your wordpress websitewith one plug-in which specifically refers to the magic action box. so in this videoi guided you step by step from scratch in completely configuring and setting up themagic action box and adding the email opt-in forms to your pages and posts. so i'll besure to drop this link in the video so that you can check this video out and set up youremail opt-in forms. once you're done setting up your email op-in forms by following thisvideo then we can jump back to our website
and pretty much we're done totally addingthe content to our site. so to check out the site i'm going to go up to the top and clickon visit site. and here we can see all the content that we've added to the lifestylepro genesis child theme. we have the top menu navigation area, the second menu navigationarea, the title, the tagline, our featured posts and categories, our sidebar, then scrollingdown we have the footer section down below. so the final thing we need to do this is thefun part now, we get to completely customize the complete style and look of this entiresite so that when we're done it will look just like the completed demo site over herewith a white background, larger navigation menu items, we have the google fonts addedto the title and tagline, and we've completely
customized this entire website. so the nextstep is let's move forward in customizing the style and design of the lifestyle progenesis child theme. before we start customizing the lifestyle pro genesis child theme by studiopress it's always a good idea to create a child theme so that our changes are not overwrittenwhen the developer comes out with an update to the framework or the theme. in the caseof the lifestyle pro child theme though we already have a child them, the lifestyle protheme is the child theme, the genesis framework acts as the parent theme. we have our parenttheme and we already have our child theme. the question then is how do you safely customizea child theme? so in order to do that we need to create a custom style sheet for our childtheme. so i'm going to refer you to this video
where i guide you step by step from scratchin creating a custom style sheet. this is a really important thing to do so that onceagain when any updates come out to the lifestyle pro child theme your changes and customizationswill not be overwritten. so i encourage you to first check out this video and once you'veset up your custom style sheet then i'll join you back on the website where we can begincreate our customizations to the lifestyle pro genesis child theme. back on my wordpresswebsite i've already created the custom style sheet so now i can safely customize the lifestylepro genesis child theme. the first part that i'm going to customize is this top sectionwith the top menu, the secondary menu, the banner, the title and the tagline. this wasa request that i received from shelly so thank
you shelly so much for the question. thisis a common section that pretty much everyone wants to know how to customize because it'sthe first thing that we see on the website. let's take care of customizing this sectionstarting with this green emerald green, kind of block banner right here. i'm going to transformthis and change this to an actual image. so the first thing that i want to do is i needto upload the image that i want to add to replace this green section right here. sogoing up to my top toolbar i'm going to click on plus new and click on media, and i'm goingto upload the header image. here on the new media screen i'm going to click on selectfiles, then here among my files i'm going to choose this file, this is one that i wantto add to my site. i'm going to highlight
that, and click on that, and click on opento upload this file to my wordpress website. once the image has been uploaded, then i'mgoing to click on this button to edit the image, then here on the edit media screeni'm going to give the uploaded image a new title and alternative text since this is notvery 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 wantto highlight this url here we're going to need this in just a moment. so i'm going tohighlight this and copy it, then i'm also going to update the changes that i made tothe image. then once we've highlighted and copied the url for the header image i'm goingto go back to the website by clicking on visit
site. here i'm going to open up a developertool 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 onthese 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 structureand layout of the homepage. and on the right hand page you'll see all of the differentcss styles. now the great thing about this particular inspect elements tool is that thiskind of acts as a sandbox, we can change all the different styles on the right hand sideand it will be actually set in the website
until we add the new code to our custom stylesheet. this is a safe place to experiment with various styles. okay so now i want tofind the code that is generating this emerald banner background right here. drilling downone by one we can see when i click on different code it highlights different sections of thesite here. and that is kind of a good indicator that we're getting close to the code thatwe need. so here we can see this is the primary navigation bar, and then here we have thesite header and this is what we want. so we can see when i click on this right here thenthe 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 alsosee the palate color here, this emerald color
for the background color. i want to replacethis color with an image so i'm going to click on background here and i'm going to removethe 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 theimage right here. no worries if you can't see this i'll be sure to add this in the videoso you can see this a little bit better and there we go. so we can see that i just replacedthe emerald color with this new background. so next i'm going to copy all of this righthere, all of this code that i just created. i'm going to highlight it and copy it, andthen i'm going to add it to my custom style sheet. going back to my custom style sheeti'm going to click on dashboard. then i'm
going to scroll down to appearance and clickon 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 goingto leave that as it is and instead i'm going to add all of my custom styles to the custom.cssfiles so that the changes will be safely added. and if any kind of updates are added to thelifestyle pro theme then our customizations will not be lost. so this is a really importantthing. so i'm going to click on custom.css, and this is where i'm going to add all ofmy custom styles starting with the image on the banner section right here. now note thatonce we add this, it's not totally complete. we have this opening kind of tilde bracketright 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 backgroundwith a colon, a space, url, parenthesis, quote and here we have the actual image url followedby a quotation, a parentheses, a semi-colon and the closing bracket. i'll be sure to dropall of this in the video so you can see it really easily, then i'm going to come downhere and click on update file to update my file. so looking at the code really quickon the site header i just noticed that i forgot to add one small element so i'm just goingto 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 toscroll down and click on update file to update
the file. once the file has been edited successfullythen we can check out the changes by going up to the top, hovering over the website nameand clicking on visit site. here we can see the image in the banner section so that looksreally good so far. the banner's starting to take some shape. the next step is i wantto change the title as well as the tagline by adding some google fonts. google fontsare a great and easy way to add some extra design elements to your website. and the bestpart is that they're free. so to add google fonts is a two step process. number one weneed to go to google.com/fonts and we need to find the font that we want. for the titlei want to add kind of a script handwritten kind of script font which i'm going to usethis sacramento one right here. here we see
what it will look like, normal 400 is theweight of it and we can see that it has this handwritten effect. this is the one that iwant. 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 thenwe can see here it is right here sacramento. when i scroll down i'm going to leave thecharacter set to latin that looks good. then there's three different ways to add this codeto your website. either a standard import or javascript method. so the method i'm goingto use is the method that is recommended on the studiopress.com site so i'm going to clickon at import. then i'm going to grab all of this code right here, i'm going to highlightit and copy it, then going back to my website
i'm going to click on dashboard. then i'mgoing to scroll down to appearance and editor, then i'm going to go to custom.css and stepnumber one is we need to add the google fonts to our custom style sheet. note that it'simportant to add the google fonts at the top of the style sheet not at the bottom. if youadd it underneath the other code then they will actually not work. so make sure thatwhen 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 findwhich style that would be for the title i go back to site, click on visit site and herewe are on the website. now there's two methods
to open up inspect elements. number one wecan 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 toinspect elements when you're on a mac is to hover over the element that you want, clickon the control key, then click on your mouse or your keyboard. this will open a box andthen you can go directly to inspect elements. now if you're on a pc you can do the samething by right clicking and then clicking on inspect elements. so going forward thisis a method i'll be using in the video since this is a much faster way to open up inspectelements. once again all you need to do is click on the control key then click on yourmouse or keyboard when you're hovering over
this particular section elements that youwant, then click on inspect elements, and if you're on a pc right click and click oninspect elements. okay great so when i do that, when i open yp inspect elements wheni'm looking at this title we can see that it goes directly to the code that i need righthere. and on the right hand side we can see the code that needs to be changed. so .site-titleand there's a space and a, we can see that the color is white and this is the code thatwe need to change. now scrolling down the css here, just scrolling down we can see allthe other different styles for this particular element and let's see if we can find the currentfont family. here we see it's crossed out roboto slab and sans serif but here it isright here. so .site-title and then we see
the font family is this sans serif robotoslab font right here and this is the one that i want to change. so just clicking in thisarea right here my little sandbox i'm going to change this to sacramento, making surethat i include two different hyphens in between here. we can see automatically it changesto 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 tochange the font size from 50 pixels i'm going to change it to 84 pixels. i'll just makeit a little bit larger. and there we go. we can actually make it a little bit smallerbut anyway that gives us a general idea. okay so once we have that all set then i'm justgoing to highlight the code that i just changed
in my little sandbox here, highlight it andcopy it. now i'm going to go back to my custom style sheet by clicking on dashboard, theni'm going to scroll down to appearance and click on editor. then i'm going to click oncustom.css to go to custom style sheet, and then i'm going to paste the code that i justcopied 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. theni'm going to scroll down and click on update file to update the file. once the file hasbeen edited successfully we can check it out by going up to the top and clicking on visitsite. and here we see the new title font,
with a larger size and the sacramento googlefont. okay so the next step here for this description it's a little bit small, it'shard to read so i want to increase the size of the font and i also want to add a googlefont 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'mgoing to click on the middle button here that says quick use and once again i'm going tochoose the style that i want, 400 is a little bit small so i think i'll go with the semibold of 600 to make it a little bit stronger. actually i'll go with bold and 700, we'llsee what that looks like. then i'm going to scroll down, click on the import symbol righthere and i'm going to copy all of this code
right here. once i copy that i'm going togo back to my website, i'm going to go to the custom style sheet by clicking on dashboard,going down to appearance, clicking on editor, then clicking on vustom.css. once again aswe did in the previous example i'm going to add my google fonts right here, add it rightthere and then i'm going to scroll down and i'm going to click on update file. now notethat i've included all of these different versions of the josephine sans, i actuallydon't want that because the more google fonts you add to your page, you can kind of startto slow down the page. so i definitely don't want to slow down the page with fonts thati'm not using. so just checking on the google fonts right here when i go back up to thetop it looks like i had checked all of these.
i don't want all of these checked so i'm goingto 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'twant that. i'm going to uncheck the ones i don't need and i'm only going to use the onethat i want which is the bold 700. so copying this one more time, highlighting it and copyingit then going back to my site here i'm going to replace this version with my new versionwhich is just one version of the josephine sans google fonts. then i'm going to scrolldown 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 previousexample. so going back to the site i'm going
to click on visit site, then here where thedescription is i'm going to hold down my control key on my mac, and then click on the mousekey, then i'm going to click on inspect element. once again if you're on a pc you can clickon right click, and when you right click then you can click on inspect elements. okay sohere we see the particular site description right here, we can see it right here on theright hand side css. so scrolling down just to check out the font family we can see onceagain it says roboto slab sans serif right here and it's the h2 header two section. idon't want to do this all h2 throughout the entire site. i really just want ti to be specificrelated to the site description because i only want this google font right here, i don'twant it on every header 2 within my entire
website. so scrolling down let's just checkto see if the font family is listed anywhere else and it looks like it's not. so in thatcase here where it says site description i'm going to add a new font family by just clickingin here. then i'm going to type in font-family, then i'm going to add a kind of hyphen ora little line, i'm going to add in the josephine sans, and then close it off right there, andthen we can see it has changed down below. now note that the font size is really smallright now so i'm going to change it from 16 pixels, i'm going to double that to about34 pixels and we'll see how that looks. so that looks a lot easier to see so i'm goingto use that size instead. okay so then i'm just going to copy all of this code righthere, i'm going to highlight it and copy it.
note that i'm not going to be adding any ofthe code that we haven't changed. we haven't changed the color, or the line height, orthe margin so actually i might change the line height so that it syncs up well withthe font size. but otherwise i'm not really going to add the color but i'm going to copyeverything right now because it's a lot easier to copy everything and delete it later. onceyou've highlighted and copied all of this code right here, then i'm going to close thisdown and go back to my custom style sheet by clicking on dashboard, then going downto appearance and editor. then i'm going to click on my custom.css file, and then i'mgoing to paste my code that i just copied in the previous step making sure that i closeit off with a closing tilde bracket. okay
now as i mentioned i didn't change the colorso 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 wantto change that because it's like double the size of the font. so i'll make this about40 pixels and then i did not change the margins either so i'll leave it like that. once youhave everything ready to go i'll be sure to drop this code in the video so you can seea little better, then you want to click on update file to update the file. now goingback to the site by going up to the top and clicking on visit site, now we can see thenew title right here. we have our new title with the google font and we also have ourdescription with a google font and a larger
size. so looking at this top section righthere, the next part that i want to customize is the top menu right here, as well as thesecondary menu down below. number one, the font is a little bit small so i'm going toincrease the size. i also need to change the background color here from that emerald towhite, and finally once again i want to add some google fonts. this will be the last googlefont that we'll add. so going back to google fonts the one that i want to add is the opensans condensed so there it is. i'm going to click on the middle quick use button, theni 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 alreadygone over this twice. then going back to my
website i'm going to go to the dashboard,then i'm going to down to appearance and editor, click on custom.css and finally i'm goingto add my new google font right after the other ones right above. so all the googlefonts are at the top, then i'm going to scroll down and click on update file to update thefile. the next step is i'm going to back to the site by clicking on visit site, then ineed to find what this particular code is so i'm going to hover over that and then onmy mac i'm going to hold down the control key and click on the mouse, and then i'm goingto click on inspect element. here we can see when i open up inspect elements we see thatthe element is highlighted here on the left hand side it starts with a href and then onthe right hand side we can see the css styles.
so when i scroll down and i look for fontfamily i'm just going to scroll down here, here we see the .genesis-nav-menu and herewe can see the font size. so number one i want to increase the font size so i'm justgoing to uncheck this and i'm going to change it from 14 to 24 to make it larger so thatlooks better. and the other thing is i want to add my google fonts so once again i'm goingto click in this section right here, add font-family and then i'm going to add the little lineopen sans condensed with a closing line. so now we can see the new google font in thelarger size. that looks pretty good, we'll see i might change that and make it largerbut for now that looks okay. okay so i'm going to highlight all of this, this is what i wantto add to my website. so i'm going to highlight
all of that and copy it, then i'm going toback to the customs style sheet by going back up to the top, clicking on dashboard, theni'm going to go down to appearance then to editor. then i'm going to click on custom.cssand i'm going to paste the code that i just copied in the previous step, making sure thati finish it all off with a closing tilde bracket. for the font size here we want it to be 24so i'm going to reduce or eliminate that 1.4 rem then delete that. and for line heighti'll make this 30 pixels, make it a little higher than the actual font size. i'll besure to drop this code in the video, once you have that set go ahead and click on updatefile to update the file. once the file has been updated successfully now we can checkit out by going up to the top and clicking
on visit site, and here we can see the newgoogle font added to the top menu as well as to the secondary menu, and we can alsosee that the size is much larger which is really great. it's a lot easier to see. nowthe next step is i want to change this green background to a white background. we alsoneed to change the color of these menu navigation items and finally i want to capitalize allof 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 justgoing to open up inspect elements right here by clicking on inspect elements. then i'mjust going to kind of scroll the page up so we can see this green bar right here. theni 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 backgroundcolor. so this is what i want to change. i want to turn it from green to white so i'mjust going to click in here, then i'm going to override it by adding my white color codewhich is six f's, there we go and we can see automatically it changes to white. note thatwe cannot see the words anymore because those are also white colored so it kind of blendsin with the background. we'll also change the color of the font in just a moment. rightnow 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, theni'm going to scroll down to appearance and
click on editor. and then finally over herei'm going to click on custom.css to go to my custom style sheet, scroll down and theni'm going to paste in the code that i just copied in the previous step. so i'll be sureto drop this code in the video, it's .nav-secondary and then the background color is white whichare 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 visitsite and now we can see that it's all white. so that looks good, note that we can't seethe words very well though. so the next step is i want to find out what the code is forthese fonts right here and i want to change them from white to a color that we can actuallysee. so i'm going to open up inspect elements
once again, and once i open up inspect elementswe 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 whereit says three f's, this is the white palate and this explains why we cannot see any ofthe items in the menu area because they are white on a white background. so the firststep is i want to change these menu items here from white to a steel grey color so i'mjust going to click in here. then i'm going to add my grey color code and now we can seeall of these different items are now visible. the other thing i want to do is i want tocapitalize all of these so i'm going to add some additional code down here below by clickingin this little box. then i'm going to add
some text transform css code like so, makeit upper case and now everything is uppercase. i prefer this kind of view. if you preferlower case then that's great too. simply you don't need to add the text transform. i'mgoing to copy all of this right here, the main pieces i need are the text transformwith upper case and the color. i'll remove all the other things in just a few momentsbut i'm going to copy it all because it is a lot easier to copy it all in one swoop andthen i'll delete it later. so i'm going to copy it right there, highlight it and copyit. then i'm going to close it, go back to my dashboard by clicking on dashboard. theni'm going to go to appearance and editor. next i'll click on custom css, and then finallyi'm going to scroll down the bottom and paste
the code that i just copied in the previousstep, making sure that i close it out with this closing bracket. then i'm going to deleteeverything 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 siteby going to the top and clicking on visit site. now we can see all the different menuitems being displayed so that looks really good. now the next thing is, when i hoverover each one of these i actually want this to turn red to kind of make it stand out andpop out a little bit. so in order to change the hover color once again i'm going to openup inspect elements, then scroll the page
up so we can see the menu navigation arearight here. and now within inspect elements on a mac i'm going to hold down the controlkey and i'm going to click on my mouse to open up this force element state. i believeon a pc it would be right key and then look for force element state. so once again ona mac i'm holding down the control key and i'm also clicking on my keypad which opensup 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 showingthis particular hover code right here. here we see there's a little dot that designatesthe 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 colorthen the current page changes to red. so when i hover over each of these, these will alsoturn into red so i'm going to copy this code right here and i'm going to add this to mycustom style sheet. i'm going to copy all of this code right here, highlight it andcopy it. then i'm going to close my inspect elements go back to dashboard, go down toappearance and click on editor, then go to my custom style sheet. and then at the bottomof the custom style sheet i'm going to paste in the code that i just copied in the previousstep. then i'm going to click on update file to update my file. okay now let's check outthe site, i'm going to go up to the top and
click on visit site. then here on the homepagewe can see that the current page is now red and when i hover over each of the other itemshere those turn red as well so that looks really great. so that is how you customizethe top section of the genesis child theme called lifestyle pro. we have the top menuitem that has been customized, the banner, the title, the tagline and all of the menuitems. okay now scrolling down the page we have a little bit more to go here startingwith this bar right here. we used to get all the bars are all kind of this emerald greencolor which i'm not really that fond of. i want it to match the red color right herethat we see right here. in order to change this once again i'm going to open up inspectelements, and i'm going to pull this up so
i can see a little better. and here on theright hand side we can see the emerald color right here, this background color. so i'mgoing to change this and pop in that same red color that i used in the menu area, addthat 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 appearanceand editor, then i'll click on the custom style sheet and then at the bottom of thestyle sheet i'm going to paste in the code that i just copied in the previous step. makingsure that i close it off with this tilde bracket. then i'm going to click on update file toupdate the file. now i'm going back to the site by clicking on visit site. here we seethe bar is all red which is really great.
okay that looks good. so the last one hereis 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 itbecause i know exactly what that color is now. so i'm just going to copy all this codewith the emerald color, i'll change the emerald color in just a moment. once that's copiedi'm going to go back to the dashboard, then i'm going to scroll down to appearance andeditor, i'm going to click on custom.css, scroll to the bottom and paste the code thati 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 tochange this emerald color by replacing it
with this red color right above or i actuallyam going to add this and make it a grey color because i don't want the footer to reallystand out very much. i want it to kind of blend in with the white background. so i'mgoing 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 goingto click on visit site. then scrolling down to the bottom here we see the really neutralgrey color footer with the words right here. now note that we can't really see this becauseall of the different font colors are white on grey, it's really hard to read so i'm goingto change that as well. by clicking on inspect element, then we can see i'm going to drilldown one at a time. here we go and here we
see the site footer this key, let's see wherewe can find it. so here is the site footer right here, the color is this white colorso white is really hard to hard so i'm going to change that to a grey color. now we canat least see the copyright and the non-linked words right here. but the other thing is thatnote that there are these links right here and those are also white. so for example wheni click on this a right here and then i scroll down i should be able to find here at thetop we see the .site-footer and then a this is also white which is hard to read. so i'mgoing 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 addthis twice- one with the link and one without
the link. the a refers to a link. so i'm goingto copy this, no worries i'll drop all this code in the video if i'm going too fast. i'mgoing to copy all that- highlight it and copy it, and then go back to the dashboard. theni'm going to go down to appearance and editor, then i'm going to click on custom.css, scrollto the bottom and paste the code i just copied in the previous step. making sure that i finishit off with a closing bracket and i'm going to add this twice because one time is withthe a and one time is without the a. this particular one is just non-linked text andthis is text that has a link associated with it. both of these will have the grey colorand then i'm going to click on this button to update the file. okay so now i'm goingto check out the site by going up to the top
and clicking on visit site. now when i scrollto the bottom we can see, now i can see the credits really well and this footer kind ofblends in with the white background. i'm going to be changing this background as well towhite so this will look even better. so coming up to the top here to find this backgroundright here, i'm going to open inspect elements let's see if we can find this image righthere. it's the first one that pops up, we can see that it has a kind of gradient toit. there's a fabric or canvass look, this is actually an image so i'll take it off byremoving it right here. i don't know if you can see it but it's a lot smoother, it's kindof this cream color and that is this particular section right here where it says body. andthe background color is this ef, ef, e9 which
is a cream color. so when i turn that to whiteby just adding my white color code, now we can see this background looks really, reallyclean. so i'm going to just memorize this, keep this in mind this body background coloris 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 backgroundon the homepage and throughout the site. once this code has been copied i'm going to closethis, go back to the dashboard, then go down to appearance and editor. then i'm going toclick on my custom style sheet, scroll to the bottom and paste the code i just copiedin the previous step. noting that the background image i want to say as none i'm going to adda semi-colon and a closing bracket and then
finally i'm going to add my body backgroundcolor of white. okay once we have the code ready to go i can click on this button hereto update the file. now checking out our site i'm going to go up to the top and click onvisit site, and here we can see we can still see this fabric image right here. so whatis going on with that? i'm going to click on this one more time to click on inspectelements, and here we can see it's still showing up. so what is going on with that? i thinkwhat i need to do is i'm going to go back to this particular item right here, i'm goingto go back to the dashboard, then i'm going to go down to appearance and editor. theni'm going to click on custom.css, i'm going to scroll to the bottom and here where itsays background none i'm going to add an important
tag to totally override whatever code is forcingthat to continue to be displayed. whenever you add this exclamation point, importantand semi-colon it will really kind of force the change to go through. i try to use thissparingly 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 imagehas been removed. okay so we're almost done with the entire website, we just have a fewmore things left to add. so scrolling down when we hover over the title for example wesee this turns green, and the read more link is also turning green as well. so i want tomake both of these two items i want to make them these red color so that it's more complementaryof the rest of the website. opening up inspect
element i'm going to find out what the codeis for that particular item, note that this is a hover code. this only really happenswhen you hover over this particular title, then it turns green. so i want to turn itred. 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 wecan see here on the right hand side the entry title with the hover code here put the cssstyle. then i'm going to add the red color right here instead of the green emerald colorand i'm going to highlight and copy this entire code. so just highlighting it and copyingit, and at the same time i'm also going to look up the read more because i'm going todo this in one big swoop. looking up inspect
element for the read more button, here wecan see here is the emerald green color and this is a really simple one and easy one toremember because it's simply an a. so all you need to remember this code is an a anda in css language is the link. so okay keeping that in mind i'm going to close this, go backto my dashboard, then i'm going to scroll down to appearance and editor. then i'm goingto click on custom.css, scroll to the bottom and i'm going to paste the code that i justcopied in the previous step. also i'm going to add the a code for the link and i'm goingto 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'mgoing to go up to the top and click on visit site to visit the site, then when i scrolldown now when i hover over this title we see it turns red which is really great becauseit matches the rest of the site. the last thing that i want to add right here, herewe have the enews extended plug-in. in the video on my youtube channel i did go overhow to customize this. but just to complete this entire website right now i want to customizethis as well. so i'm going to open up inspect element one last time. then here in inspectelement we can see the html here on the left hand side with the widget enews-widget. onthe right hand side here we see there's a sidebar widget, there's .widget, and there'sall this other code and actually i do not
see the enews widget so i'm going to add thatin myself. here where it says .sidebar i'm just going to add some code in here, we'lljust override this for the moment. once again this is really great with inspect elementbecause 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 goingto change the button to a red color so it matches. first i'm just going to grab thiscode right here, this .sidebar-enews-widget, i'm going to copy that. close inspect element,go back to the dashboard, then i'm going to hover over down to appearance and editor,i'm going to click on custom.css, scroll to the bottom and paste the code i just copiedin the previous step. noting that i'm going
to add an opening bracket in the backgroundwhich this time i want to do this screen color so i'm going to add the green color in thereand then have a closing bracket. then i'll click on update file to update the file. nowi'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 buttoni want to have that turned orange or red, the same red as this red right here in themenu 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, thisbackground color. so i'm going to highlight this entire thing, all these codes, all thebutton codes i'm going to highlight them and
copy them. then i'm going to go back to mydashboard, go to appearance and editor, then i'm going to click on custom.css and onceagain i'm going to paste the code that i just copied in the previous step, noting that thecolor is going to be red. this is an emerald color but i've used this red color often enoughthat i know it's this f color up above, so i'm going to highlight it and copy it. andthen i'm just going to override this current green emerald color like that. then once ihave all the codes set i'm going to click on update file to update the file. there'sone last piece to this. when i go to the top and click on visit site, now when i scrolldown we have the red buttons so this particular enews widget area, this is really importantbecause this is a great way to capture leads
on your website when you have an email opt-inform 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 inspectelements and then here we see it's this h four right there, all the header four's throughoutthe site are this black color and that's fine. but on this particular background i don'twant it to be black, i want it to be white. so let's find the enews widget area righthere. so we're going to use the same thing, it's going to be .sidebar-enews-widget. thenthere will be a space, and then it will say h4 and then we'll have the white color. that'show we'll do that because otherwise if i change
the h4 right now, like if i just use thiscode right here, that's going to turn all the header four's throughout the entire sitewhite 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 closethat, go back to the dashboard, scroll down to appearance and editor, then i'm going toclick on custom.css, scroll to the bottom. i'm going to borrow this code right here becausethis is related to the enews widget i'm just going to borrow that by copying it and pastingit. this time though i'm going to add that h4 tag in addition. so this is referring tothe sidebar, it's the enews widget in the sidebar and it's the header four in the enewswidget. and i'm going to add the color of
white, making sure that you end it with asemi-colon and a closing bracket. whenever you add these codes i'm sure you've gottenthis so far, there's always an opening bracket and a closing bracket and every line has asemi-colon after it. okay then i'm going to click on update file to update the file. nowwhen i go back to the site by clicking on visit site, now we see this is so much easierto read with white on green. if you made it so far congratulations because you shouldhave a wordpress website using the lifestyle pro genesis child theme that looks somethinglike this. this is a completely customized, professional wordpress website. let's do aquickly review of all the different elements within the site that we've created in thisvideo. starting at the top we have our customized
banner with a background image, along withsome custom google fonts in both the title and the description, and the menu times. thenwe have our featured post on the homepage along with some featured categories, thisis the first category right here. then we have two other featured categories, then downbelow we have our footer section where we feature some social network icons so anyonecan 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 thenwe have a video. on the top right hand side in the sidebar, we have the all importantemail opt-in form. this is front and center so this is really important because this isone 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 findcontent throughout your website, and then we have a call to action here which leadsdirectly to a landing page where you can feature your services or some kind of offer. thenwe have our social network icons once again and finally we have a beautiful display ofall the different pinterest pins that you've collected on whatever board you set up. aswe note when i click on this it opens up into a really lovely display here, here a littlelight box display. so we can see all the different images right on the site, we're not sendinganyone away to another site which is really great. now looking at some of the internalpages that we've created in this video starting
with the blog page i'm going to go to theblog page. and here we have the blog archive page with all the blog posts that we've addedto our website. so taking a look at one of the blog posts i'm going to click on thisparticular 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 byanother email opt-in form. so again it's so important to add these email opt-in formspretty much anywhere you can on your website because again it's a great way to captureleads and after someone reads content and gets to the end, this is a perfect locationto feature your email opt-n form. because most likely it's someone that's read thatfar they would be interested in receiving
whatever it is that you may have to offerthat is related to your site. then underneath the email opt-in form we have our social networkicons 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 wehave our comment form where someone can leave a comment. okay so let's take a look at someof the other pages starting with the about page. here we have our full width page, there'sno sidebar- just a short description and a picture or an image. then we have a, i justcall it recipes because this total website is about pressed juices and wellness. so iadded a page here, you can add anything. it could be a services, products. for here ijust called it recipes and there's just a
short little page here. then we have our landingpage again a landing page is a great way to focus attention completely on the offer thatyou want to present to someone. we have our call to action, the different reasons whysomeone should sign up. reason one, reason two and then reason three and then at thebottom we have our all important email opt-in form once again. so anyone can take attentionof this offer by signing up. after the landing page right here, then we have a contact formwhere anyone can easily contact you directly from within your website by simply filingout their name, their email, the subject and the message and submitting a message by clickingon the send button. finally last but not least we have a shop page where when i click onshop, here we can see a couple of items and
in this video i showed you how you can linkeach of these different items to either an external page such as to amazon if you havean amazon affiliate account or some other type of affiliate accounts. or you can linkto 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 genesischild theme. thank you so much everyone for staying with me and thank you shelly for theinspiration to create this video with this particular theme. i hope this video was helpfulto all of you, if it was please feel free to leave a comment below, like the video andshare this video with your friends. i will be coming out with more videos related towordpress, genesis and how to build your business
on the web and how to subscribe to my youtubechannel. last but not least all the conversation continues on my website at 77webstudio.com,so feel free to head on over to my website to continue the conversation. one more thingbefore i sign off, i just want to mention that i've begun pinning things on pinterestso if you are on pinterest feel free to connect with me here, i'll be pinning things relatedto wordpress, themes that i love, quotes that inspire me and much more. also if you're ontwitter feel free to connect with me @77webstudio. until next time i hope you have a great weekand continue learning new skills that help you to build your business on the web.
0 Response to High Quality Free Blogger Templates
Post a Comment