hi, everyone! i’m katrina. in this video,let’s go over how to create a website using virtue, a responsive e-commerce wordpresswebsite theme. i received a number of requests from youtube requesting i create a video specificallyabout this theme. thanks everyone for the great suggestion.let’s take a quick tour of the website we’ll be creating in this video. in this video,i am going to be showing you step-by-step from scratch how to get this website up andrunning. as we see here on the left hand side you have your logo, as well as your menu navigationarea. just underneath that, you have your image slider. on this image slider we havesome calls to action. it’s always a good idea on your website especially on the homepage that you have really clear calls to action.
i am going to show you in this video how toset this up. underneath the image slider we have the feature section. in here, you canfeature any kind of featured projects, photos, anything for your portfolio that you’d liketo feature. you can feature that here, and i can show you how to set that up as well.next, we’ll have the latest from the blog section. here we’ll have a few excerptsfrom our blog post, our most recent blogs. finally, underneath that, we’ll have anothermenu navigation area here represented by these blocks, which when i hover over them, theyactivate. they turn into different colors. i’ll show you how to set that up.finally, at the bottom, we have our photo section. here you can include customizablecontent. in this demo i’ll be including
a logo and a short description about the businessas well as the post gallery, featured products and some social icons where anyone can easilyconnect with me on social web either through facebook, twitter, youtube or pinterest.most likely, you’re also going to want a lot of different internal pages, so i’llshow you how to set that up starting with the about page. when i click on about, herewe’re going to be adding an image as well as some texts.next on your blog archive page. here on the blog archive page, the really cool thing aboutthis particular theme is we can feature a number of different styles for our blog excerpts.for example, here we have an image, a title and an excerpt. the next one, however, isan image carousel post which when i click
on these arrows here, it rotates to differentimages within the carousel. underneath that we’ll have the image slider post which againis a little larger size of an image with this rotating slider. i’ll also show you howto add simply a static large image like this and finally a video if you’d like to includea video right directly on the blog archive page.taking a look at one of the internal blog posts, i am going to click on this one righthere. we’ll see here this particular one at least at the top we’ll also include thisimage slider. i’ll show you how to put that up. we’ll also include the blog post title,details about the blog post including the author and the category it’s grouped intoand comments. then we’ll have the actual
blog post. underneath that, it’s alwaysa good idea to include a way for your readers to easily share content on social web. i’llshow you how to add these social sharing features right here so anyone can share the post totwitter, facebook, google+, linkedin or some other social network. next we’ll have anauthor bio section, so you can include a thumbnail image of any authors on your site, the authorname and a short bio. finally, we have a recent blog post sliderright here which will feature recent posts within your blog. it’s always a good ideato include this if you can because this helps to give your readers a way to explore otherareas to your website which helps them stay on your site longer, which is always a goodthing.
looking on the right hand side of this blogpost, we’ll also a have a side bar. the side bar includes customizable content. onceagain, in this video, i’ll be including those social icons as well as an email opt-inform so you can easily capture lead to your website. then i’ll be adding an image whichalso includes call to action and a link that goes to a page within the website. here, forexample we see that call to action is visit the collection. when we click on this particularimage, it will go directly to the e-commerce store.the next part of the website we’ll be adding is the portfolio section. here you can featureany kind of work within your portfolio or photos or even perhaps different productswithin your store. here for example, there’re
lots of different styles that this portfoliocomes with in terms of the actual portfolio item pages. looking at some of them startingwith this one, i am going to click on the landscape sider. one of the first optionsfor your portfolio item post page is this landscape sider. underneath the landscapesider, you’ll have the portfolio item description and the portfolio details.within the virtue theme there’re lots of different styles for the portfolio items aswell. taking a look at the next item here, i am going to click on this next item hereto go to the next portfolio item. here we can see, if you prefer, you can also add avideo to your portfolio item. once again, the description and the portfolio detailswill appear below. the other option for portfolio
items, when you go to the next one, is herewe have an image slider on the left hand side of the description. that is another cool optionfor portfolio items here. we have the description and then the details below. next we have anothervideo. i am going to fast forward through that since we just saw the video. you caninclude another video. here when we go to the next item here, itis simply an image. here you can include simply an image within your portfolio item if youprefer that. there’re all kinds of different styles and portfolio items and i’ll showyou in this video how to set up each one of them.next we have the learn page if you’d like to add a page with a side bar. i’ll showyou how to set that up. here we have our page
and we have our side bar to the right. finallyhere we have our shop page. the cool thing about this style of this particular themefor the shop pages is that it’s just a really clean white minimalist kind of display isthat the focus of attention is truly on your products which is always a good thing.let’s take a look at one of these actual products. so, i’m going to click on thebrasil tee. and here we’ll go to the actual product page where you have an image, thetitle, the price, the short description and the add to cart button. when i click on theimage right here, it opens up into really cool light box display so i can see the producta lot easier. underneath this section right here, you’ll have a longer product descriptionas well as a reviews tab if you have any reviews.
then we have some related products. just likewith the blog posts including the recent posts underneath the blog posts, when it comes toan e-commerce store, it’s always a great idea to include related products below youractual products because it gives your potential customers some other options and other productsto explore within your store. next, we have the contact page. i’ll alsoshow you how to create a contact page so anyone can easily connect with you directly fromwithin your website by filling out a form and clicking on a button.let’s go through the process that a potential customer will take if they want to purchasean item. going back to the shop page, i am going to click on this item here, this brasiltee. here we see the add to cart button. i
am just going to click on add to cart. thenyou’ll get this message. it says it was successfully added to the cart. if you’dlike to view the cart, you can click on this button that says view cart. here on the cartpage, you have a thumbnail image of the product, the product title, price, quantity and thetotal. down below, you’ll have a summary of your cart totals. to proceed to the checkout,we can click on this button here that says proceed to checkout. here we have the checkoutpage. if you have a coupon, you can enter it in here. in this video, i will show youhow to set up coupons as well. a potential customer would them fill out their billingaddress and their shipping address. they would scroll down, review the details of their orderand then they would click on this button here
to place order.as we see here on the left hand side, it says pay with paypal. you can pay with your creditcard if you don’t have a paypal account. in this video, i am going to be setting upthe payment method as paypal. but of course, there’s other payment methods you can use.i’ll show you in this video where you can set those up.this is where we are headed toward in this video. i am going back to the home page. we’regoing to be building a responsive e-commerce wordpress website using virtue. this is responsivemeaning it’s mobile-friendly and it works beautiful both on mobile devices like smartphonesand tablets as well as on laptops and desktops. as a quick demo, the responsiveness of thisparticular theme is going to come to the bottom
right hand side. i am going to slowly dragthe website to the left hand side to reduce the screen size until we get to about righthere. this is a view we can expect on a smartphone , the smaller screen size right here. as wecan see, all the different elements on the web page, the home page have re-ordered themselves.now we have a menu which is a drop-down menu so we can really easily explore other partsof the website within this smaller screen size version and all the other elements onthe home page are now neatly stacked up one on top of the other so they’re still reallyeasy to view directly within this smaller screen size. that’s what we refer to asa responsive wordpress website. these days, it’s really important to make sure thatyour website is responsive since more and
more of us these days are using the web onour mobile devices like our smartphones and our tablets. you’re good to go in termsof mobile readiness when it comes to this theme.this is where we’re headed toward in this video. let’s get started.before we get started, how much is this website going to cost? we’ll need several things.number one, we need a domain name and also we need some web hosting. in this video, iam going to be using hostgator.com for both the domain name as well as the web hosting.i am also going to be using a coupon code wpcoupon25 to get an extra discount off ofmy order at hostgator. if you decide to go with hostgator as well for the domain nameand the web hosting, feel free to use the
coupon code wpcoupon25 to get an extra discountoff of your order as well. i also want to note that i do receive a small referral ifyou do use the coupon code wpcoupon25. thank you in advance for supporting me and helpingme to continue to make these free wordpress training videos.next, once you have domain name and a web hosting, we need a theme. in this video, weare going to using the free responsive e-commerce portfolio theme called virtue. i will showyou in this video where to get that and how to set that up.finally, we need some time to build out the website. because there’s a lot of differentpieces within this website, i am estimating it will take roughly around 2 hours. pleaseset aside about 2 hours to get this website
up and running.the total to get started is less than $25. that’s using the coupon code wpcoupon25at hostgator. so what are the steps needed to get this website up and running? numberone, we need to get a domain name and a webhosting. step 2, we need to install wordpress. finally,step 3, we need to build out the website. let’s take care of step 1, getting the domainname and the web hosting by heading over to hostgator.com.here we are on hostgator.com. to view the web hosting plans, go ahead and click on thebutton in the middle that says view web hosting plans. here we’ll see there are 3 plansto choose from—the hatchling plan, the baby plan and the business plan. if you’re justgetting your website up and running, most
likely the hatchling plan or the baby planwill be a god fit for you. the main difference between these 2 is the hatchling plan givesyou a way to host only one domain name whereas the baby plan gives you a way to host as manywebsites and as many domains as you would like. the other difference between these 2plans is that the hatchling plan does not allow you to add an ssl certificate to yourown website. in the event that you are planning to create your own e-commerce website, mostlikely the baby plan is going to be a better fit for you because you can add an ssl certificatewhich will provide extra security to your site.keeping that in mind if you plan on using paypal as your main form of payment methodfor your e-commerce website, then you can
use the hatchling plan because with paypal,the ssl is included on the paypal site. in general though, if you are planning on ane-commerce website, i would go with the bay plan. also note that there’s more of a valueon the baby plan because you can host as many domain names and as many websites as you wouldlike. those are the main differences between theplans. i am going to go ahead and i am going to order this one, the baby plan, by clickingon order now. as we see at the top that first thing we need to do is we need to enter ourdomain name. if you already own a domain name, you can click on this button here and addyour domain name. or if you need to register a domain name, you can leave this box checkedand you can enter your domain name right here.
i am just going to add a random domain namefor the demo purpose. i am just going to add some random right here. of course, it’savailable because it’s a very random name. also note that you can decide whether youwill use .com or any of these other domain extensions. .com is the most common one soi am going to leave it as .com. then i am going to scroll down. the next thing is weneed to choose our package type and our billing cycle.we see here it says baby because i’ve already chosen the baby package type. the billingcycle right here however, by default is set at 36 months. i’d like to save a littlebit more on the front end of this particular order right here, so i am going to changethis to one month just to keep my expenses
low. of course, there’re many other differentcycles that you can choose from. go ahead and choose the one that works best for you.i am going to choose this one, the one month one. then coming down right here, you wantto add a username and a security pin, scroll down and you want to add all of your differentbilling information. the next thing i want to point out here down at the bottom is wehave the hosting add-ons. by default, hostgator will automatically adda few of these to your order. you can decide whether or not you want, for example, domainprivacy protection, the site lock or the site back-up. whenever i am creating a new websitedomain, i always to choose ‘privacy protection’. the reason why privacy protection is importantis without privacy protection, your order
details which include things like your phonenumber, your email address and your address will be included in the domain database soanyone on the web will be able to find that information as it pertains to your domainname—things like your email address, your address and your phone number that you useto place the order will be available on the web. i prefer keeping that information protectedso i always choose the privacy protection. of course, it’s up to you. you can decidewhat works best for you. here we have the site lock. i am going touncheck this. i am also going to uncheck the daily back-ups because i have other ways tosecure my site. of course, if you would like to choose these, go ahead and add those on.i am going to turn those off just for the
moment just to show you what the order costswould be with and without the privacy protection. scrolling down here, we have the coupon codeand, by default, you’ll get this standard coupon code. but if you use a different couponcode, you can get more off of your order. the standard one is snappy but if you usethe coupon code wpcoupon25 you will get an extra amount off of your order that’s betterthan the standard coupon code. here we go. i am just going to click on validate to validatethis new coupon code wpcoupon25. then we’ll see that i have a lower order amount downbelow. as we see here, i am looking at the orderdetails; i can see that without privacy protection, we’re looking at just under $13 to placethis order which includes the domain registration
and the first month of web hosting. then ifyou want to include the domain privacy for $9.95 a year, i’m going to click on thatone – and you’ll see that the order goes to about $22 or so. so, it’s still under$25. once again, decide which hosting add-ons worksbest for you. i prefer keeping the privacy protection so i’m going to leave that checked.then, i’m just going to click on this box here. i have read and agreed to the termsand conditions. and then, i’m going to click on ‘create account’ to place the orderand create my new web hosting account. once you click on ‘create your account’you’ll get this page which will thank you for your order and will tell you to go checkyour email for information related to logging
into your web hosting account. i’m goingto go checkout my email. here we see on my email account, here’s the email from hostgatorwith my account info. i’m going to click this email to open it. i want to point outtwo things, number one the first link that they’ll share with you in the email is thebilling system link. if you want to check out any info related to your billing, youcan go ahead and click on this link and use the password that they gave you. right belowthat, you’ll see that there’s a link for your control panel with your username anda 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 then you want to add your password righthere as 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 next step that we want to do is step number two, we want to install wordpress. thankfullywith hostgator there’s a really easy way to install wordpress using their simple wizardscript. i’m going to scroll down to where that is located. you want to scroll down towhere it says, “software and servicesâ€.
you want to find this icon that says ‘quickinstall’. this is what we’re going to use to install wordpress really easily. inhostgator, we’re going to use this ‘quick install’ link. i’m going to click on that.once i click on that, you’ll note that there’s all these different kinds of software listedhere on the left-hand side bar. right at the top, you’ll note that it says, ‘blog software’and there’s a link here for wordpress. this is what we want to install. so, i’m goingto click on that. then, you’ll see a button here that says ‘continue’. note that we’llbe installing wordpress version 3.6 which at the time of this recording is the mostrecent version of wordpress. i’m going to go ahead and click on ‘continue’. hereyou’ll get a panel where you can decide
which domain to install wordpress to. i’mgoing to add the domain name where i want to install wordpress and then i’m goingto fill out this information below starting with the admin email. i’m going to add myadmin email right there. next, you want to give your new website atitle. i’ll just call this a name of my domain. then, you also want to add an adminusername. note that this is an important step for website security. you want to make surethat you do not use an admin that is something like admin, support or administration. thesethree names, admin, support and administrations those are the first names that hackers willtry when they’re attempting to break into your wordpress website. it’s important thatyou use an admin username that is more unique
than admin. for this instance i’m just goingto add my name right here. you can also add your first name and last name. i’m goingto leave that empty and instead i’m just going to click on ‘install’ to installwordpress. okay, congratulations. you’re installationis ready. 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 futureto access the log-in panel. to access your website in the future, you want to make anote of this link here. it’s usually your domain name followed by wp-admin. that’san important link to remember as well so that going forward you can easily login to yourwordpress website. also make a note of your
username and password. this is what you’llalso need of course to login to your website when you click on this link.i’m just going to highlight this temporary password here and copy it. and then, i’mgoing to click on this link here to login to my new wordpress website. here we are onthe login screen of our wordpress website. to login, you want to enter your usernamein the username field and your password in the password field. and then, you want toclick on this button that says, “remember me†so that the next time you come to wordpressyour username and password will be remembered. in the event that you forget your passwordin the future or perhaps even now, you want to click on this link here that says, “lostyour password†and wordpress will send you
a password reset to the email that you usedwhen you were creating your wordpress website. for the moment, here i have my username andpassword. i’m going to go ahead and click on the login button to login to the wordpresswebsite. here we are on the dashboard of your wordpress website. this is the first thingyou will see when you login to your wordpress website. and when you first install wordpress,you’ll also see this “welcome to wordpress†message along with a number of links to getyou started. right now, i’m just going to dismiss this message by going up to the topon the right-hand side here and clicking on ‘dismiss’.here we are on the dashboard to take a quick look at what the website looks like now beforedoing anything just from the very beginning.
if you go to the top and click on ‘visitsite’, here we’ll see what the wordpress looks like right now. this is when you firstinstall wordpress. this is what you will see. we have quite a lot of work to do becausethis is where we’re headed toward. we’re going to be building out our website thatlooks something like this. going back to our wordpress dashboard, thefirst thing we need to do is click on ‘dashboard’ here to go back to the dashboard. here onthe dashboard where it says ‘appearance’ we need to change the theme from the 2013.we see that currently when you install wordpress with wordpress 3.6.1. the 2013 theme is automaticallyinstalled. what we need to do is to change this theme so that virtue, the theme calledvirtue, is installed instead.
the first step is to change the theme andwe do that by going to the left-hand side going on ‘appearance’. and then, herewe see we’re on the ‘themes’ screen. we see our current theme right now is the2013 theme. to install a new theme we need to click on this tab here that says ‘installthemes’. then, you’ll note that there’s a ‘search’ bar right here where you cansearch for the theme. there’s a number of links here related to themes that you cancheck out. but what we want to do now is you want to search for the theme called virtue.i’m just going to type in ‘virtue’ right here on the search field and click on ‘search’.here we see that the virtue theme pops up and this is the one that we want. so, i’mgoing to click on ‘install now’ to install
this theme. once the theme has been successfullyinstalled i’m going to click on ‘activate’ to activate this new theme.okay, welcome to the virtue theme. now, we see we have a number of additional settingsall related to the virtue theme right here. now, when we check out what the website lookslike by going up to the top and clicking on ‘visit site’ we see that the homepageof our website looks a lot different than it did the previous view.let’s take care of a few things first starting with adding some plugins to our website namelythe woocommerce e-commerce plugin. we’ll also add a toolkit specifically for this theme.then, we’ll go about adding all the different settings here to create the menu and changethe logo and the slider.
going back to the dashboard – i’m goingto click on ‘dashboard’ right here on the top. then, you’ll see this message thatsays, “this theme comes packaged with the following premium plugin – the virtue toolkit.â€we need to begin installing this plugin by clicking on ‘begin installing plugin’.so, i’ll click on that right here. and then, we’ll arrive on ‘install required plugin’screen which when i hover over this title here, this virtue toolkit, there’s a linkhere that says ‘install’. so, i’m going to click on ‘install’. then, once theplugin has been installed i’m going to return to the ‘required plugins installer’ byclicking on this link. to complete the process i’m going to click on that ‘activate’link right below where it says ‘virtue toolkit’.
okay, so the following plugin has been successfullyactivated so we’re good to go on that. now, going back to our ‘plugins’ screen – i’mgoing to click on ‘plugins’ right here on the left-hand side. here we can see allthe plugins that have been added to the site so far. many of these come with the wordpressinstallation. down below we can see the virtue toolkit right here.the next plugin we need to add is the woocommerce plugins. coming at the top right here, i’mgoing to click on ‘add new’. and then, i’m going to do a search for woocommerceand click on ‘search plugins’. here we see that the woocommerce plugins shows upat the top. you can read more about it by clicking on ‘details’ or you can clickon ‘install now’. i’m just going to
click on ‘install now’. “are you sureyou want to install this?†yes, okay. once the plugin has been successfully installed,you want to click on this link that says ‘activate plugin’.okay, welcome to woocommerce. you’re almost ready to start selling. now, we need to clickon this link here that says ‘install woocommerce pages’ to install the woocommerce pages.okay, welcome to woocommerce 2.0. the pages have been created and we can double checkby clicking on this ‘settings’ button right here. here we see all kinds of differentsettings related to the woocommerce e-commerce plugin. when i click on ‘pages’ righthere, this pages tab, here we can see all the woocommerce pages that have been created.once all the woocommerce pages are setup the
next step is to add a logo to the header.to do that, i’m going to go to the left-hand side hover over ‘appearance’ and clickon ‘theme options’. here on the theme options screen we can see all the differentsettings and options we’ll need to configure and setup the virtue theme. at the top wehave the ‘main settings’ option and on this screen we can see we can choose a sitelayout either a wide site layout or a boxed site layout. i’m going to choose the boxedone right here. next, you can choose how many columns you’d like in the footer for 4,3 or 2 columns. i’m going to choose 4. then, underneath that we have the beginning of thelogo options. the first option related to logo is the layout.so, if you want to have your logo on the left-hand
side you can choose this display. or if youprefer the logo to be centered in the middle you can choose this one right here. i’mgoing to leave it on the left aligned logo. and then, underneath that we need to chooseour logo. so, i’m going to upload a logo by clicking on the ‘upload’ link. then,i’m going to click on ‘upload files’ right here. then, i’m going to click on‘select files’ to select my file. then, once you find the folder where your logo islocated you just want to select it and click on ‘open’.once the logo has been uploaded to wordpress, the next step is to add a title and an alternativetext. it’s always a good idea no matter what kind of images you’re adding to yoursite to always include a title and an alternative
text so i’m going to add this right here.and then, i’m going to click on ‘select’ to select this particular logo and there wego. underneath that the next step is if you haveready logo you can upload that there. i don’t have one so i’ll leave that blank but thisis where you would add it. and then, you can choose the logo font. if you decide not touse a logo itself, you just want to have a website title, here you can choose the styleof font that you would like for your website title. underneath that, you can also choosethe styles, the font size, the font styles’ right here whether you want it to be light,bold or normal. and then if you prefer a color for your website title in the header, youcan select that here.
next, we have the site tagline. this is anoptional line of text below your logo. so, if you’d like to add a tagline below yourlogo you can add the text right in this field right here. i’m not going to add a taglinein this demo but just want to point out that you can do so by adding the text right here.and if you do decide to use a tagline, you can also set the tagline font as well as thetagline style in these boxes right here. underneath the tagline we have a few moreoptions including the logo spacing. so, if you’d like to change the default logo spacing,you can do so here. and also if you’d like to change the default primary menu spacingyou can do so here. finally, if you want to upload a banner for the bottom of the header,a site wide banner, you can upload a site
wide banner by clicking on this button ‘upload’and uploading your banner. when you’re all ready to go on this screenjust come to the bottom here and click on ‘save all changes’ to save your changes.once we have the main settings set including the logo, the next step is we need to createa menu. but in order to create a menu we also need to have some pages to add to our menu.so, let’s add some pages right now. to add a new page we want to go to the left-handside and click on ‘pages’. and then in wordpress there’s a few different ways todo the same thing. if you’d like to add a new page you can either come to ‘pages’here and then click on ‘add new’ or at the top you can click on this link here thatsays ‘add new’ or at the top here in the
toolbar where it says ‘+new’ you can hover+new and then click on ‘page’ to create a new page. so, there’s a number of differentways within wordpress to do the same thing. i’m going to add a new page here by clickingon ‘add new’. the first page i’m going to create is an ‘about page’. most likelywhen you create a website you’re going to also want an ‘about page’. here whereit says ‘title’ i’m just going to add ‘about’ since this will be the ‘aboutpage’. then, i’m going to add some text, just some random text. but this is where youwill add your text. note that here in this ‘edit’ page screenthere’s two tabs. there’s a ‘visual’ tab and a ‘text’ tab. the difference betweenthese two different tabs is that the ‘visual’
tab is the ‘what you see is what you get’view of your content. wordpress really gives you an easy way to format and setup the contentwithout knowing any code. for example, just like you would do with an email or with anykind of word processing program, if i want to highlight this for example by just highlightingthese words here, i can bold it by clicking on this b right here. also note that wheni hover over each of these icons, i’ll have tool tip which will tell me exactly what thisparticular icon will do. the good news is that you don’t have to memorize all of thesedifferent icons. if you forget what they are, you can just hover over them one by one andyou can see what they do. the other thing to note, if you’re not seeingtwo different rows right here, then you’ll
need to click on this link right here. wheni click on this, this is the hide or show kitchen sink, you can see that it either collapsesor fully displays all of the different formatting options that you have to format your content.to see the behind the scenes code that wordpress is generating to create the formatting youcan click on this link here, this tab that says ‘text’ and you can see the differenthtml elements and tags that are added by wordpress to create the formatting. i prefer to stayin the visual view. this is where i can just use all these different icons. so, i’lljust stay right here in the visual view. and the next step is we want to add an image tothis particular text. so, i’m going to place the cursor wherei want this image to be displayed. so, i’ll
put it to the left of the l right here andi’m going to click on ‘add media’ to add some media. next, i’ll click on ‘upload’file to upload a new file and then select ‘files’. here i’m going to choose thefile that i like and then click on ‘open’. once the image has been added to the website,next we need to add a title and an alternative text.once you have your title and alternative text, the next step is the attachment display settings.here you can choose whether you want the alignment of this image left, center, right or none.i’m going to choose left alignment. if you’d like to link this image to something, youcan choose that here whether you want to link to a media file, an attachment page, a customurl or none. i prefer not to link this image
to anything so i’ll just click on ‘none’.finally, the last step is the size that we want to display next to the text. the optionswe have are thumbnail size or full size and i’ll leave it at full size. and then, i’mgoing to click on ‘insert into page’ to insert this image into the page.okay, the image has been inserted. the next step is looking at the right-hand side wecan choose our page attributes. if you’d like to create a ‘parent page’, you canselect from this list here. i’m not going to include a parent. this page will actuallybe the parent page. as far as template goes we have a number of options. when i clickon this link right here we have a dropdown box. by default, you’ll have the defaulttemplate which includes a sidebar. but if
you’d like to include another type of templateyou can choose that here. and for this particular page, the about page, i’d like to have afull width template with no side bars so i’ll just click on full width.finally, scrolling down if you’d like to add a subtitle below the page title, you canadd that right here. and then, if you’d like to add a new slide or images to thisparticular page, you can do that by clicking on ‘add images’ right here. for this particularpage, the about page, i’m not going to add any of that. i’m just going to keep it reallysimple with an image and some text. when you’re all ready to go, we can click on ‘publish’or ‘update’ right here, this blue button, to update or publish the page.once the page has been published, we can view
the page by clicking on ‘view page’. andhere we can see what the about page will look like with our image and our text.the next page that i want to add is the ‘contact page’. we’ll add a contact page by onceagain going up to the top toolbar, hovering over +new and clicking on ‘page’. andas we did on the previous example for this particular page, i’m going to add a titlehere by just putting in ‘contacts’ since this will be the contact page. next here onthe ‘content’ box, now we can add our contact info. the really cool thing aboutthis theme is that this theme, the virtue theme, gives us some icons that we can addalong with our contact info. so, i’m going to add an icon by clickingon this smiley face right here by clicking
on that. and you can see that here we canchoose our icons. so, when i click on this there’s all these different icons that youcan choose. the one that i want right now is the ‘envelope’ icon so i’ll justclick on ‘envelope’. you can also choose the icon size, the color and whether you wantto float this to the left or to the right or not at all. i’ll just leave this as noneright there and then i’ll click on ‘insert’ to insert this icon. and you can see hereis the short code that has been inserted. after this, i’m just going to add my address.i’ll just add it right there. note that i’ve bolded this. i’ll just highlightthis and you can see you can click on the b to either bold it or to not bold this info.next, the next line after i’ve added my
address with the icon, i want to add a divider.i’m going to click on the second icon here where it says ‘insert divider’. i’mgoing to click on that. here i’m going to choose a ‘divider’ and the one that iwant is ‘clear’. i’m choosing the clear divider and i’m going to click on ‘insert’.this will just help to display the icons along with the contact info a little bit better.finally, i’m going to add my phone number. once again i’m going to add an icon withthe phone number. i’m just going to leave the cursor there and click on the smiley faceicon one more time. this time the icon that i want to choose is a phone. the phone iconis located all the way down the list in this dropdown list. so here it is right here, iconphones. i’m just going to click on that.
then, i’m going to click on ‘insert’to insert the short code for the phone. and then, i’m going to add my phone number righthere. once again, i’m going to highlight this phone with the colon and then i’m goingto click on the b to bold this word right here.as we did before, i’m going to add another divider. i’m going to click on ‘insertdivider’ icon. and the divider i’m going to choose is the clear divider right there.and then i’m going to click on ‘insert’. finally, when you’re done adding the iconsand the contact info, if you want to add any extra info you can add that right here. i’lljust add some demo text right there. on the right-hand side we see the ‘pageattributes’ and here is where we can set
the template. i’m going to click on ‘defaulttemplate’ and this time i’m going to choose the ‘contact template’. so, i’m justclick on that. since this is the ‘contact page’, i’m going to use the contact template.once i’ve chosen the contact template, then i’m going to click on ‘save draft’ tosave my draft. once you clicked on ‘save draft’ thenyou’ll note that all the different contact page options will pop up down below. hereyou can set all the different contact page options. as a note, yes we are using the contactform, so that should say ‘yes’. if you’d like to give the contact format title, youcan give it a title right here. so, i’ll just add a short title, “please contactus via the form belowâ€. if you’d like
to use a map and any address, you can do soby clicking on ‘yes’ and adding your location. i’m not going to add a map though; i’mjust going to leave it as it is with just the form. once you have all that ready togo, go ahead and click on ‘publish’ to publish the contact page.once the contact page has been created, the next page we’re going to create is a pagewith a side bar. to create the new page once again, you can either go up to the top, hoverover +new and click on ‘page’ or you can simply click on ‘add new’ next to whereit says ‘edit page’ or finally on the left-hand side you can hover over ‘pages’and click on ‘add new’. i am going to click on ‘add new’ righthere. the first thing we want to do on our
‘add new page’ as we did in our previousexamples, is we’re going to give our new page a title. so, i’m going to give my pagea title here. it’s going to say, “learn how to stand up paddle surfâ€. next hereon the content box, i’m just going to add some demo content right there. as we did previously,i’m going to add an image to this content. i’m going to place the cursor right to theleft of the l of this word and i’m going to click on ‘add media’ to add some media.next, i’m going to click on ‘upload files’ and then ‘select files’. then, i’m goingto find the image that i want, this one right here. and then i’m going to click on ‘open’.as we did before, we need to give our image a title and an alternative text.once we have the title and the alternative
text added, once again we can choose the alignment.i’m going to keep it at left alignment right there. we can link this image to somethingbut as we did previously i’m not going to link this image to anything so i’ll clickon ‘none’. then, finally we can choose the size that we’d like to add within ourcontent. here we see we have a thumbnail size, a medium size and a full width size. so iam going to choose the medium size right there. and then i’m going to click on ‘insertinto page’. once we have the image and the content added,then on the right-hand side you can choose the template. i’m going to keep it as thedefault template which comes with a sidebar. then, scrolling down we have a page titlea subtitle that we can add. if you’d like
to include a subtitle below the page title,you can do so by adding a subtitle right here. so, i’ll just add a short subtitle rightthere. then, if you’d like to add a page slider, you can do so. but i’m not goingto add that right on this particular page. we’ll add that on another page. okay, everythingis good to go. then i’m going to click on ‘publish’ to publish this page.the last page that i want to add right now is the ‘blog archive’ page. to do that,i’m going to click on ‘add new’ one more time. here on the ‘add new page’screen, i’m going to add ‘blog’. just put the word ‘blog’ right here as thetitle. here on the right-hand side for the default template, i’m going to choose ‘blog’.once you have those two things set, go ahead
and click on ‘publish’ to publish theblog page. once the various pages have been created,the next step is to add them to the menu in the header section. to create a menu, we needto go to the left-hand side, hover over appearance and click on ‘menus’. here on the ‘editmenu’ screen we need to create our new menu. to create a new menu, i’m just going toadd the name right here, ‘menu’. and then, i’m going to click on this button that says‘create menu’. once the menu has been created, now we need to add some menus tothis particular menu. the ones that i’m going to add, i’m going to add the blog,i’m going to ‘learn how to stand up paddle surf’, the contact page, the about page.and because this is an e-commerce website
as well, i’m going to add the shop pagealso. once you’ve checked the pages that you’dlike to include in the menu, go ahead and click on ‘add to menu’ to add these tothe menu. once the menu items have been added under menu structure, the next step is todrag them so that they display in the order that you’d like to have them displayed inthe menu. for example, i want the about page to be at the top, so just drag that to thetop. and then, i want the contact page to be at the bottom. and let’s see, i’llmove the shop page right after about. then, we have the blog and we have the ‘learnhow to stand up paddle surf’. so, this is awfully long for a title for a menu item soi’m going to click on this button right
here where it says ‘page’. here i canre-label the navigation label right here by simply calling it ‘learn’. just one wordright there. that’s a lot shorter, a lot better for a menu navigation item. so, itsays ‘learn’ and it will go to the page that is the ‘learn how to stand up paddlesurf’ page. once we have that setup, i’m going to click on ‘save menu’ to savemy menu. the next step is we need to manage the location.so, i’m going to click on ‘manage locations’ right here. note that at the top it says,“your theme supports five menusâ€. so there’s five different menus that we can configurehere. primary navigation menu, a secondary navigation menu, a mobile navigation, topbar navigation and a footer navigation. so,
in this demo i’m going to be using a primarynavigation menu bar. right here where it says ‘primary navigation’, i’m going to selectmy menu, the menu i just created. next we have secondary navigation, if you’d liketo add a secondary navigation bar you can do so by setting your location right here.i’m not going to be using a secondary navigation in this demo so i’m just going to leavethat as it is. next we have the mobile navigation menu. this is the menu that you’ll see ona smart phone or a tablet. so, we need to set that right here. i’ll just use the samemenu that i’m using for the primary navigation. finally, we have two more to go, the top barnavigation and the footer navigation. the top bar we’ll just create in just a momentso i’ll leave it as it is for the moment.
we’ll come back to this. and the footernavigation, i’ll use the same menu once again that i’m using for the primary navigationand the mobile navigation. that way i have the same menu bar in a variety of differentplaces so it’s easy for readers to see the menu in a variety of different places on thepage. once you have all the location set up foryour menu, you can go ahead and click on ‘save changes’ to save the changes. once menulocations have been updated, i’m going to click on ‘edit menus’ to create anothermenu. this time i’m going to create the top menu. i’m just going to click on thislink here, ‘create a new menu’. this time i’ll call the menu ‘top menu’. and theni’m going to click on ‘create menu’.
once again we need to add some menu itemsto the top menu. so, for this particular menu, i’m going to be adding two different pages.you can see them once again here on the left-hand side. you have the ‘most recent pages’as well as ‘view all pages’. so, i’ll click on ‘view all’.on the top menu, i’m going to include the ‘cart page’ and the ‘checkout page’,just those two. if you’d like to add some more go ahead and click those right here andthen click on ‘add to menu’. once the two items have been added to the top menu,i’m going to click on save menu to save the menu, and now once the menu has been updated,we can go back to manage location to set these menus. so, i’m going to click on managelocations and then here where it says, “top
bar navigation†i’m going to click onthought menu and then i’m going to click on save changes.okay, once the menu has been updated, now let’s take a look at what the website lookslike, so i’m going to go up to the top and click on visit site and here we see we haveour top menu navigation, we have our logo and we have our various pages.so the next thing that i want to add to get the homepage looking a little bit better isi want to add the full width slider right here underneath the header section. so whatwe’re going toward is i want to add this header here with the calls to action and therotating slider. so to do that, i’m going to go back to my dashboard by clicking on“dashboard.â€
on the dashboard, i’m going to go to appearance,hover over appearance, and then click on “theme options†and here on the virtue theme optionsscreen, i’m going to click on the third box down, where it says slider settings, soi’m going to click on “slider settings†and here we can set the slider on the homepage.here on the slider settings screen, the first thing we need to do is we need to choose ahome image slider type, so i’m going to click on this box here, and we have a coupleof different options that we can choose and the one that i’m going to be choosing isthe flex slider. so i’m just going to click on “flex slider†to select that particularone. next, underneath of that, we have our sliderimages, and this is where we actually add
the images that will be displayed in the slideron the homepage. so when i click on this carrot right here on the right hand side, we’llget a drop down box and this is where we can upload the image to the slider. if you’dlike to include a title as well, you can do so right here. i’m going to leave my titleempty, blank, because i have texts already in the image. so, i’m going to click on“upload†to upload my slider and then i’m going to click on “upload filesâ€and “select files.†then, i’m going to select the image that i want which is thisone right here and i’ll click on “open†and as we did with the previous images, weneed to add a title and an alternative text. once we have the title and the alternativetext added, we can go ahead and click on “selectâ€
to select this image.so here we see the image that i’ve added the slider, also note that we can that there’stext embedded within the image which includes the calls to action. so if you prefer keepinga title with the calls to action, you can add those words right here in the title field.again, because i already have words embedded on the image itself, i’m not going to adda title, but that is an option if you’d like to do that.next, we have the link url, so i want this image to be that anyone who clicks on theimage will go to my shop page, so i’m going to add the shop page url in the link url fieldright here. finally, you can add a description if you like, this is optional, and when you’reall-ready, go ahead and click on the top link
here to close this box.next, i want to add one more slide to the slider, so i’m going to click on this addnew slide box. then, i’m going to click on the carrot right here to open this, andthen we’re going to do the same process one more time where i’m going to click on“upload†to upload a new image and then click on “upload files†and “selectfiles†and this time, i’ll choose this particular image and click on “open†andas we did in the previous step, once the image has been uploaded, we need to add a titleand an alternative text. so, i’ll just add that right here and once we have the titleand the alternative text added, then we can click on “select†to select this image.just as in the previous example, this image
also includes text within the image, so i’mnot going to add a title, but if you like to do, please do so right here. then, i’mgoing to link this particular image to the learn page, the learn to stand up paddle servepage, so i’m going to add the link right here, and then finally once again, if you’dlike to add description, you can do that by adding your description right here.so i’m just going to use two different images for this rotating slider. if you’d liketo add more images, you can continue to click “add new slide†right here and keep doingthe same process. so i’m just going to come up to the top here and click on “save allchanges†to save the changes and once the changes have been saved, we scroll down andthere’s a few more options that you can
set. so i’m going to leave all the defaultsthat come with the virtue wordpress theme, but here if you like to change the slidermaximum height or maximum width, if you’d like to autoplay this or not, and if you wantto change any of these other features related to the slider, the slider pause time, transitiontime, the slider transition time, if you’d like to show captions or not, you can do soin these sections right here. also, if you’d like to include a video onthe homepage, you can embed the video code right here. so i’m not going to includea video on this particular homepage, i’m just going to keep it as the two differentsliders right here using the flexslider. once again, i’m just going to click on “saveall changes†to make sure all my changes
are set, and now once the changes have beenset, let’s take a look at the homepage, so i’m going to go up to the top and clickon “visit site†and here we are in the homepage with our new image slider.so the next step on the homepage is we need to build out the sections below the sliderright here including the featured project section, the blog post section, a few differentmenu icon, and then the footer section. so let’s take care of setting up which sectionswill be displayed on the homepage. to do that, i’m going up to the top click on “dashboardâ€then on the dashboard, i’m going to go to “appearance,†“hover over appearanceâ€and click on “theme options.†in the previous step, we setup the slider settings, now weneed to setup the home layout settings. so
here on the left had side bar, i’m goingto click on “home layouts†and here at the top, we have our homepage layout manager.this will determine which sections are displayed on the homepage.so right now, we see that by default we have enabled the page title and the page contentbut i actually do not want these particular sections, so i’m just going to drag thisone over to disable it and i’m going to drag page content over to disable that aswell. the sections that i want to enable include the portfolio carousel, so i will enable thatby dragging it over, i also want the latest blog post to be displayed underneath the portfoliocarousel, and finally i want the icon menu to be displayed as well. so here you can choosewhich sections you want to have displayed
on the homepage. for the demo, this is howi’m going to set it up. next, we can determine what we want the homeblog title to be, so here i’ll just put “ladies from the blog†and i’m goingto use capital letters, if you prefer lower case, of course you can use lower case letters.once you’ve added your homepage blog title, the next step is you can choose how many blogposts are displayed on your homepage. i’m just going to keep it up at 2, but if you’dlike to change this, you can just drag this bar over to the right so that the number willincrease. i’m going to leave it at 2. next, you can choose which posts are displayedon the homepage. i’m going to choose all categories, so i’ll just leave it as a defaultwith all, and then here under home portfolio
settings, you can create a title for yourhomepage portfolio section. so for the demo, i’m just going to call the title “featuredâ€you can call this featured projects, featured photos, whatever content you want to featurehere, you can add a title. here we have next portfolio carousel category type, if you’dlike to limit the category type for the portfolio on the homepage you can do so by clickingon this and choosing the category. i’m going to keep it as all.next, we have display the portfolio types under the tile. i’m not going to do that,i’ll just leave that unchecked, and then here we have the home icon menus. so thisrefers to the different blocks of menu items that will be displayed underneath the blogposts. so i’m going to create four different
icon menu blocks. so here icon number one,you just want to click on this drop down arrow right here, so i’ll click on that. hereyou can include an icon, you can add a title, and then you can add a url. so i’m goingto just choose the preset icons that come built in with the virtue theme, so i’m justgoing to click on this one right here and i think for this particular one, i’ll justcall this the about page. so for the about page, i’ll use this particular icon. youcan choose of course any icon that you’d like and there are plenty of them to choosefrom. so just for the purpose of this demo, i’ll just use this icon user and i’llcall this about. then, for the link url, i’m just going to add the about page right here,so i happen to know the url for the about
page is simply the domain name followed by(/)about, so i’ll just leave it like that. now, i need to add three more of these icons,so i’m going to click on “add new icon†to add another icon, and one again here weclick on the carrot to open up the box and i’m going to choose a preset icon, i’mgoing to choose the shopping cart because i want this to be the shop page. once youhave the icon selected then you can add a title as well as a link url as we did in theprevious step. so i’m just going to add shop since this will be the shop page andthen i’m going to add my link url, so i’ll just grab this one and paste it in there,and i know the link url is shop, so i’ll just call this shop right there. so now ihave the link for the second menu icon.
next, i’ll do this two more times, add anew icon, this one is going to be the portfolio, so i just opened it up. i’m going to callit portfolio, then i’m going to grab the icon. this time, i think i’ll use the cameraicon, the icon-camera, since this will be the portfolio page, and as we did before i’mjust going to copy the link, i’m going to add the link here and of course rename itbecause this is the portfolio page, and finally one last time i’m going to click on “addnew icon†this one will be the contact page. i’m going to open it up, i will call itcontact, then i’ll choose the preset icon which this time will be a phone, so i justneed to scroll down here and look for the phone icon, which is all the way at the bottomthen i’m going to choose the icon-phone,
and finally i’m going to add the link urlone more time as well. so this is the contact page, so i know that the url is just againthe domain name followed by (/)contact. finally, when all the icons have been added, then i’mgoing to click on “save all changes†to save my changes.so before taking a look at what the homepage looks like now, let’s first create the portfolioitems in the portfolio page. so we’ve actually already created the portfolio page, so whatwe need to do is we need to actually create the portfolio items for the portfolio page.so to add the portfolio items on the left hand side here, there’s a link that saysportfolio, so i’m going to click on that and here we see we don’t have any itemsadded to our portfolio yet, so let’s create
the first one by clicking on “add newâ€then we want to give our new portfolio item a title, i’m going to be creating a landscapeportfolio item with the landscape full width slider, so just for descriptive purposes,i’ll call this landscape slider. of course, whatever this item is called, you want toadd your title right here. next, i’m going to add some content. thisis just some demo content right here. i just added some text for the description. then,i’m going to scroll down. if you’d like to add portfolio type, you can do so by clickingon “add new type†and then just adding whatever this particular type is called foryour particular item, then you want to click on “add new type.â€next, scrolling down, we want to add a featured
image. so i’m going to set the featuredimage by clicking on “set featured image†then i’m going to click on “upload filesâ€and “select files†then i want to choose the file, so i’m just going to choose thisfile right here and click on “open†and as we did with the previous images, we wantto give this image a title and an alternative text. once you have a title and an alternativetext, you can click on “set featured image.†once the featured image is set, the next stepis over here in portfolio post options, we can choose the layout and because this isa landscape full width slider, i want to place this above the text, so i’m just going toclick for this particular portfolio item, i’m going to click on “above†and thenhere we have some project options. so when
i click on this, you can see we have an image,image slider or a video. so for this particular landscape slider, i want to use the imageslider project option. next, we can choose the maximum image sliderheight. so we see here that the default is 450, so we can just input the number, so i’lljust put in 450 right here. next, we have the maximum image slider width. once again,here we see the default is 670 or 1170 pixels wide for when you choose the above setting.so i’ll just leave it as 1170 right here, and then we can add some different projectelement, some different meta descriptions. so we have for example the title, so i’lljust call this “project type†as we see on the right hand side, there’s all theseexamples of possible values that you can include
in these particular fields right here. sofor the value title, i’ll just call it “project type.†next, we have value description.i’ll just call this “photography†since this is a photo. skills needed, i’ll addskills needed right here. value description, i’ll add photoshop and illustrator. notethat i’m just copying all the different items that are listed as examples here onthe right hand side. of course, for your own project item, feel free to of course customizeall of these different titles, descriptions and values in these fields right here.once you’ve added in all of your values, the next option is to decide whether or notyou want to display a similar portfolio item carousel underneath this particular portfolioitem. it’s always a great idea i think to
include related items underneath your maincontent because that helps people to explore other areas within your website. so i’mgoing to choose yes to display a recent project and for the carousel title, i’ll just callit “recent projects.†finally, at the very bottom, we need to add the additionalportfolio slider images. so we’ve already added our featured imageright here, the next step and final step is we need to add the additional images to bedisplayed within the slider. so i’m going to click on “add images†and then “uploadfiles†and “select files†and this time, i’m going to choose this image right hereand click on “open.†again, i’m going to give it a title and alternative text, andonce the title and alternative text have been
added, i’m going to click on “add to gallery.â€there’s one more image to be displayed, so i’m going to click on “add imagesâ€to add my next image, and this time i’m going to add the same image as the featuredimage right here. so this way, i’ll have two images in my slider. so once this is selected,i’m going to click on “add to gallery†to add this to my gallery.once the images have been added to the portfolio slider right here, i’m going to go to thetop and click on “publish†to publish this portfolio item. to view the portfolioitem, we can just click on “view post†to view the post and here we could see ourfirst portfolio item. so as we see, now we have these portfolio previous links here tolook at the previous portfolio item and the
next portfolio item. we can also click onthis particular image to go to the portfolio page, and then here we have our actual landscapeslider portfolio item. so when we click on this, it just rotates to the two differentimages in our slider. down below, we have our description, our different data aboutthis particular portfolio item, and then we have our recent projects which will beginto display one-by-one across this row here. so let’s add a few more portfolio itemsto our portfolio by going up to the top, clicking on “(+)â new†and clicking on “portfolioitem.†so the next portfolio item i want to add is simply an image with the descriptionon the right hand side of the image. so for this one, once again, i’m going to giveit a title, then i’m going to add my description
in this content box right here, then on theright hand side, i’ll also choose these as photos. i’m going to scroll down andset the featured image by clicking on “set featured image†then i’ll click on “uploadfiles†and “select files.†i’m going to select my image and click on “openâ€and once again, once we have the image, i’m going to add a title and an alternative text.then, once i have the title and alternative text, i’m going to click on “set featuredimage†to set the image. once the featured image has been set, thenext step is to check out the portfolio post options and this time, i’m going to placethe layout will be beside. so i want the image to show up beside the actual description inthe text. so i’m going to click on “besideâ€
and then i’m just going to scroll down thistime for project options, i’ll leave it as image, i’m going to keep the defaultas 450, you can add that in right here, so 450 for the default slider height. the defaultfor the width is 670, so i’ll just add that within there, and then you can continue toadd all the different values here for the data section underneath the description.once you’ve added all the different values in these fields right here, then i’m justgoing to scroll to the bottom. i’m also going to include a similar portfolio itemcarousel on this item as well. so i’m just going to click on “yes,†the carouseltitle i’ll add will be the same as the previous example, “recent projects.†there areno image sliders for this particular portfolio
item, so i’m not going to touch this righthere, and then i’m just going to come up to the top and click on “publish†to publishthis portfolio item. once the item has been published, we can checkit out by clicking on “view post†and now we see our new portfolio item. now, notethat this has a different layout than the previous example now the image is on the lefthand side and we have our text right here, our different item elements and attributesright here, and then we can see again the recent projects starting to slowly fill outhere in this row right here, and when i hover over each one of them, note that we can alsosee the title of the project item. so let’s add a few more portfolio itemsto our portfolio. the next one i want to add
is an image on the side but i want this tobe a slider instead of a static image. so to add the next portfolio item, again i’mgoing up to the top, hover over (+) new and click on “portfolio item.†then, onceagain here on the new portfolio item screen, i’m going to give it a title as well assome content description right here, and then i’m going to add this to the portfolio typephotos, scroll down i’m going to add featured image by clicking “set featured image,â€then i will click on “upload files†and “select files,†then i’ll choose myfile and click on “open.†once again, i’m going to add a title and an alternativetext, and when i have the title and alternative once the image is set on the left hand sidewhere it says portfolio post options, once
again i’m going to click on “besideâ€because i want this image to show up on the left hand side of the description, and theni’m going to click on project options image. this time as well, i’m going to give itan image slider, so i’m going to click on “image slider.†the default once againis 450 pixels wide, actually i should say 450 pixels tall, the height and the widthis 670 pixels wide, so i’ll leave it like that. also, i’m going to add in all thevalues right here. once we have all the values is added to thesefields, then i’m going to scroll down. i’m going to add a portfolio item carousel belowthis particular portfolio item, so i’m going to click on “yes,†the title as we didin the previous examples is going to be the
same thing “recent projects†and herewhere it says portfolios slider images, i’m going to click on “add images†and selectmy first image right here and click on “add to gallery.â€then, i’m going to add one more image to the gallery by clicking on “add images,â€â€œupload files,†“select files,†and this time i’ll choose the second image forthe slider and click on “open.†then, i’m going to add the title and alternativetext, and finally when we have the title and alternative text, i’m going to click on“add to gallery.†okay, once we have the images added, theni’m just going to come up to the top and click on “publish†to publish this newportfolio item. once the portfolio item has
been published, i’m going to click on “viewpost†to view the item and here i have my new portfolio item with the image slider tothe left of the description. so when i click on this, we can see that, now the images rotatefrom one to the next, and then underneath here we have our recent projects and theseare filling out really well in this bottom row right here. so this is how you add portfolioitems to your wordpress website. i want to add one more. i want to add a videoto show you how to add a video to the portfolio items. so i’m going to go up to the top,hover over (+) new one last time and click on “portfolio item.†this one is goingto be a video, so i’ll just call video. of course, add any title you’d like, theni’m going to add some content here in this
box. next, i’m going to add portfolio typeand this time because it’s a video instead of a photo, i’m just going to click on “addnew type†add video right here and click on “add new type†this button to createthe new portfolio type. then, i’m going to scroll down and set the featured imageby clicking on the set featured image link, and then i’m going to click on “uploadfiles†and “select files†then i’m going to choose my image, the video.png file,and click on “open.†then, as we did previously, i’m going to give this a title and an alternativetext. then, i’m going to click on “set featured image†to set the featured image.here where it says portfolio post options, i’m going to place this video above, soi’m just going to click on “above.â€
you can choose whichever layout here thatyou’d like, and then for project options, i’m going to choose video time. i’m alsogoing to leave the defaults, so i’ll just leave it as it is, i’ll leave these twoblank. next, we can set the maximum height and the maximum width of this particular videoand i’m not going to set that, i’ll just let the defaults take over right here, andthen finally we can fill out all the values in this area right here.once you’ve added all the different values here in these fields, we can scroll down andwe need to add the embed code of our video. so to grab the embed code, i’m just goingto go to youtube. i’m going to grab the embed code for this video by just scrollingdown, clicking on the share button right here,
and then i’m going to click on “embed.â€here, i’m just going to highlight this entire embed code, and then i’m going to copy it,and then going back to my wordpress website where it says “video project,†i’m goingto paste in this code right here. finally, at the bottom where it says “similar portfolioitem carousel,†i do want to display this, so i’m going to click on “yes.â€when you have everything ready to go, we can come up to the top here and we can click on“publish†to publish this portfolio item. once the portfolio item has been published,we can click on “view post†to view the portfolio item, and here we have the portfolioitem with our video. so note that there’s a black bar at the top of the video and blackbar at the bottom, i actually want to remove
that, so let’s go edit the portfolio itemreally quickly. i’m going to click on “edit portfolio item,†and here we can see thati included both the width and the height which is different from the default, so i’m justgoing to remove this all together. i’m just going to delete that, and then i’m goingto go back up to the top and click on “update†to update this item, and now when we checkout the item by clicking on “view portfolio item†now we see that the black bar at thetop and the black bar at the bottom has been removed. so that looks a lot better. so that’show you can remove the black bar of your video if you are having extra black bar inside ofyour video. okay, so this is what portfolio item lookslike with a video. we have our video at the
top and then we have our description, ourproject details and then underneath, we can see that now there’s a full row of recentprojects. so we have one more thing to do to set theportfolio up and that is to create a portfolio page. so to create a portfolio page, we wantto go up to the dashboard, so i’m going to click on “dashboard†and here on thedashboard, we want to create a new page, i’m going to click on “pages†and then i’mgoing to click on “add new†and the page we want to create is a portfolio page. soi’m just going to add that here in the title, and then we can leave this section blank,but here on the right hand side where it says page attributes, we can select a differenttemplate. so when i click on this default
template here, i get this drop down box andthe one that we want is a portfolio grid, so i’m just going to click on portfoliogrid here for the template, and then i’m just going to click on “publish†to publishthis page. once a portfolio page has been created, nowwe need to add it to our main menu. so to add it to the menu, i’m going to go to theleft hand side, hover over appearance and click on “menus.†there are two menuswe’ve created so far, the top menu and the primary navigation menus. so the one thatwe want is simply the primary menu right here, so you want to make sure that is selected,and then click on the select button right here, so that down below, we’re lookingat the main menu.
next, we need to add the portfolio to ouritem structure right here. so i’m just going to click on the portfolio page right here,looks like i miss spelled it, so i’ll need to respell that and i’m just going to clickon it, and then click on the “add to menu†button and once the portfolio has been addedto the menu structure, you can just drag it wherever you want it to be displayed in thisorder right here, so i’m going to drag it up so that it’s right after the shop page.once you have the portfolio page, where you like it to be displayed, you can click on“save menu†to save the menu. so to change the spelling, i’m just goingto go back to page as really quick, click on “all pages†then i’m going to findmy portfolio page and click on “quick editâ€
and i’m just going to respell this, so thatit’s spelled correctly, portfolio, there we go, the title as well as a slog, and theni’m going to click on “update.†okay, so once we have the portfolio renamed,then i’m going up to the top and i’m going to visit the site by clicking on “visitsite,†and here now on the homepage we have our portfolio page listed here in the primarymenu navigation area right here. we also see on the homepage that we have our slider, wehave our featured section, our blog section needs to be filled out, and we have our menuicons. so the next thing is, fill out this blog sectionby adding some blog posts. to create a new blog post, you want to come up to the top,hover over (+) new and click on “postâ€
or you can go to the dashboard by clickingon “dashboard†and here on the dashboard, on the left hand side, there’s a link thatsays “post,†so you can either click on “post†and then click on “add newâ€and here we can add the title of our new post. so i’m just going to pop in a title righthere. we’re going to be creating an image carouselpost. the image carousel post will look something like this. so here is a demo of what we areworking towards, so we’re going to be creating this in just a moment, i just want to showyou what it looks like. we have the blog archive page here with an image carousel post righthere. so you can see here on the blog archive page, my click on this arrow it rotates througha series of different images that’s different
of course than the image up here which isjust a static image. so right now, we’re going to create a blogpost, adding this image carousel post right here. so once we have added the title, thenext step is we need to add some content right here, so i’m going to paste in some contentright here. next, we can add our blog post to a category. i’ll just add a categorycalled blog, so i’m going to click on “add new category†and i’ll call this blog,and then i’m going to click on the button one more time, this is “add new categoryâ€to create the category. next, scrolling down if you’d like to addsome tags, you can add some tags right here. i’ll just call this yoga since this is apost about yoga, and then we want to create
a featured image. so i’m going to clickon this link that says “set featured image†to set the featured image. this is a blogpost so i’m going to choose an image that is already in my media library here, so i’mjust going to click on this image right here, and then click on “set featured image.â€next, looking at the post options over here, we can check out the head content. this isthe content that appears just above the actual blog post, so you have a few different options,you can include nothing or include an image slider, a video or an image.so for this particular post, i want to include an image above the blog post, so i’m goingto click on “image.†the defaults will automatically divert to or revert to the defaultsif you leave these blanks, so i’ll just
leave these blanks, but we see here the defaultis 400 pixels high and 770 pixels wide. those are the defaults. so i’m going to leavethose as they are, and then i’m going to scroll down. post summary, we can check outthese options right here. now, this is where we want to set the portraitimage slider. this will enable us to create that image carousel on the blog archive page.so i’m going to click on “portrait image slider†and then here it says “displaysidebar.†yes, i do want to display the sidebar. if you don’t want to do that, youcan click on “no,†i will click on “yes.†i want the primary sidebar, so i’ll leavethat as it is. do i want to display an author info box? yes, so i’m going to click on“yes†this is optional of course, choose
what you would like, and then it says do youwant to display a carousel with similar or recent post? i always think that’s a goodidea. again, it gives visitors a way to exploreother areas of your website and stay on your site longer, so i’m going to say yes, displayrecent post, and then you can create a title, and then scrolling down, i’m going to clickon “add images†in the post slider images to add the images to my image carousel. soi’m going to click on “add images†and i’m going to choose this image and thisimage, so these two images are checked and then i’m going to click on “add to galleryâ€to add these to my gallery. so once those images have been selected, we can come upto the top and click on “publish†to publish
our new blog post.once the blog post has been published, we can check it out by clicking on “view postâ€and here we our single blog post page with the image at the top, above the post itselfand we can scroll down and there’s our post and we have our author info right here whichwe can fill out in just a few moments. we also see that all of the different relatedposts or more recent post will begin to start showing up in this row right here. next, wecan check out our blog archive page, by clicking on “blog†and here we have our blog archivepage. now, it looks like there’s something goingon with the image carousel, it’s not displaying. this should have our image carousel righthere, and of course this happens when i’m
creating a video. so i guess it’s actuallya good thing, because you may encounter this as well, so let’s take a look at how wecan fix this. so when i click on this particular blog post right here and then i click on “editpost†at the top to edit this post, and here we see that our settings are set correctly.we have the portrait image sliders selected right here and when i scroll down, we havethe two images. now, it’s possible that these two imagesare not displaying because we did not actually upload them, we took them from the media library,so let’s take a look at this particular images. i’m going to go up to the top, clickon “media†and here we see the two images right here, these two different yoga images.so we see that they are uploaded to my yoga
page, so one thing that we can do, i’m gladactually that this happened because you may have this issue, so a little bit of troubleshootingon the side here. we’re going to be adding a plug-in called file unattached. so i’mgoing to the left hand side, click on “plug-ins.†then, i’m going to come to the top and clickon “add new†and the plug-in that we need to add is called “file unattached,†andthen i’m going to click on “search plug-ins†and here’s the plug-in listed four rowsdown. so it’s this one right here, so it’s called “file unattached.†i’m goingto click on “install now†to install this. are you sure you want to install it? yes,okay, and the plug-in has been successfully installed, we can click on “activateâ€to activate the plug-in.
once the file unattached plug-in has beeninstalled and activated, now when we go back to our media by clicking on “the media library,â€now we see here are our two images, they’ve already been attached as we can see, they’realready attached to the yoga page here, i have a different, another page, and this isactually the yoga portfolio item page. so we need to also attach this to the blogpost. so here now with this plug-in, we have these two additional features that say attachand detach. so this is a way that you can attach and detach your images from whateverpost, page or wherever else they may be located. so i’m going to attach it. so this one,i’m going to click on “attach.†i want to attach it to a post and our post is calledoutdoor yoga, that’ the blog post title.
so i’m just going to add that here and clickon “search†and we can see here that’s not currently attached even though we didadd it to the post. so sometimes, when an image is already added to something else,it doesn’t always catch in wordpress. so this is a good double check and a good troubleshootingmeasure to take to attach to multiple things. so i’m just going to click on this checkbox to attach it and then click on “save,†and now we see that now this image is attachedto multiple pages or post, so that’ great. so now we need to do the same things withthis other yoga photo, so i’m going to click on “attach.†i’m also going to do thepost type of post because it’s a blog post, and once again i’m going to look for theblog post called alter yoga and click on “search,â€
and here it is and we can see it’s not attached,so we need to click on this box to attach it and click on “save.â€okay, so now that these two images are now attached to multiple places and we can seehere, now it says attach to multiple right here. now, let’s check out the blog archivepage by going up to the top and clicking on “visit site.†next here on the menu, i’mgoing to click on “blog†to go to the blog archive page, and now we can see herefinally is the image carousel post. so it may be possible that if you upload thisimage directly to the blog post, you should not have to go through that extra troubleshootingmeasure, but if you are adding an image directly from within your media library, you may encounterthat issue, so this is how you can solve it.
okay, great. so let’s add a couple moreblog posts, so i can show you other kinds of formats that can be displayed here on theblog archive page. so the next one that we’re going to add is a blog post with simply astatic image, this one is a carousel, the next one we’re going to add is simply astatic image. so to add a new blog post, i’m going upto the top, hover over (+) new and click on “post,†and once again the first thingwe need to do is we need to give our new blog post a title. so i’m going to add my titlein here, five quick workouts, so you can do it anywhere, and then we need to add somecontent here in this box. so i’ll just paste some content in here.next, we can come over to the right hand side
and under categories, i’m going to add thisto the blog, so i’ll just click on this check box here, and then i’m going to givethis a tag of workouts. so i’m just going to add the word in and click on the word “addâ€and there we have the tag. next, i’m going to add a featured image,so i’m going to click on “set featured image†and this time i’m going to uploadan image, so i’m going to click on “upload files†and “select files.†then, i’mgoing to find the image right here and i’m going to highlight it and click on “choose,â€and once the image has been added, i’m going to add a title and an alternative text, andonce i have the title and alternative text, i’m going to click on “set featured image.â€great, so once the image has been set, then
on the left hand side under post options,once again i’m going to click on “none†because i want to open up the options forthe header content, the head content, and once again i’m going to choose an image,so i’ll just click on “image.†i’ll leave the defaults as they are, and then thistime in the post summary when i click on this, instead of the portrait image slider, i’msimply going to click on “portrait image,†a static portrait image.all the rest, i want to also have pretty much all the defaults expect for this one, theauthor info, i do want to display that, so i’ll click on “yes†and post carousel,i also want to display the recent post, so i’ll click on “yes†for that and herei’ll just click on more post, add my carousel
title, and then i’m going to scroll downand i don’t need to add any image sliders this time, so i’ll leave that as it is andi’ll come up to the top and click on “publish†to publish this new blog post.once the blog post has been published, i’m going to click on “view post†to viewthe post and here we can see my new blog post, once again with the image at the top on topof the blog itself, the author content and we can see slowly my different recent postsare starting to be displayed in this row here. so let’s take a look at the blog archivepage by clicking on blog and here we can see now this image shows up a static image rightnext to the blog title on the excerpt and the other one right here is this image carousel.so there’s a couple of different image styles
that i want to show you how to add here. thenext one is the landscape carousel. so we’re going to create one that looks something likethis. so going over to our completed side over here, the one that’s already completed,the next one i want to show you how to do is how to create an image slider post thatlooks like this and this is on the blog archive page.so to do that, we’re going to go back to our wordpress website here at the top. onceagain, i’m going to hover over (+) new and click on “post.†next, i’m going togive this new blog post a title, so i’ll just call it by what it is, the image sliderpost. then, once we have the title, we need to add some content here in the blog postbox right here, so i’ll just add in some
demo content. i will once again on the righthand side add this to the blog category. i’m not going to give any tags this time. forthe set featured image, i’m just going to click on “set featured image†and theni’ll click on “upload files†and “select files.†then, i’ll choose my file by justhighlighting it right here and clicking on “choose.†once the image has been uploaded,then i will give it a title as well as an alternative text and i’ll click on “setfeatured image.†next, this time for the head content, i’mgoing to click on “none†and a drop down box pops up and the one that i want this timeis the image slider. i’ll leave the defaults as they are, so i won’t touch that. forthe post summary, i also want to click on
the “landscape image slider†and the otherinfo i do want to display, so i’ll click on “yes,†and for post carousel i wantto display a recent post, and then this time i’m going to scroll down here where it says“post slider images†and click on â€add images.†then, i’ll click on “uploadfiles†and “select files†and the two files that i want, i’m going to just highlightthem both right here, two at a time and click on “choose,†and then each of these images,one at a time, i’m going to add a title and an alternative text. once the title andthe alternative text has been added, i’m going to click on “add to gallery†toadd these two images to my gallery. okay, once we have that all set up, i’mgoing to click on “publish†to publish
this blog post. once the post has been publishedthen i’ll click on view post to view the post and here we see we have our image sliderpost directly above the actual blog posts itself and we can just rotate through eachof these two different images. also, when we go to the blog archive page by clickingon “blog†we see we have a landscape image slider right here, and when i click on thisarrows, we can rotate through all of the different slider images that have been added to thisparticular carousel. okay, so the last one i want to show you howto add is a video. so to add a video, i’m going to once again go up to the top, clickon “post (+) new†and then post. this time i’ll just call this video, you cangive your blog post title whatever title you
like and then i’m going to add some contentright here. once we have the content, then on the right hand side, i will click on “blogâ€to add this to the blog category. you can give it some titles if you’d like and forset featured image, i will click on this link, set featured image. then, i’ll click on“upload files†and “select files†to select a new file and this time i’lljust choose this file right here and click on “choose.†then, we can add a titleand an alternative text, and once we’ve added the title and the alternative text,i’ll click on “set featured image.†so once the featured image is set, the nextstep is once again, going over to head content. this time, when i click on “none†i’mgoing to choose video, i’m going to leave
these two boxes here, so it goes to the defaults,and then for the post summary here i’m going to click on “video.†then as we did inthe previous examples for the author info, i’ll click on “yes†and post carouselalso “yes, display recent post,†and here we need to in the video, post video box, thisis where we can add the embed code for the youtube video, the vimeo video or some othervideos, we need to add the embed code right here.so i’ll just go to my youtube channel by going over to my youtube and i’m going tobe adding this video right here, so i’m just going to scroll down, click on “shareâ€as we did previously and then click on embed, and then i’m going to grab this embed codeby just highlighting it and clicking on “copy,â€
and then when i go back to my video post righthere, i’m just going to paste in the embed code right here.now, i am going to remove the width and the height because last time, that’s what createdthose black bars above and below the video, so i’ll just delete that and let the themetake care of the dimensions of the actual video. so i just have my embed code addedhere and then i’m going to scroll up to the top and click on “publish†to publishthis blog post. once the post has been published, you canclick on “view post†to view the post and now here we see the video above the blogpost just as we wanted it. also, when we check out the blog archive page by clicking on “blog,â€here we see on the blog archive page you can
also view the video directly within the blogarchive page. so that is how you add a video to your blog, a landscape slider, as wellas a simple image and an image carousel post. okay, so the next thing we need to do whenwe’re looking at our blog for example, we have all of this content, here this is customizedcontent in the side bars, so we can configure that and we can also add a footer with morecustomized content down below. so let’s take care of the side bar content right hereby going to the left hand side, going to the dashboard by clicking on “dashboard.â€then,here i’m going to hover over appearance and click on “widgets†and the widgetsare what will determine which content is placed in both the side bar as well as in the footer.so by default when you install wordpress,
it comes with all these other kind of widgetshere on the side bar. i’m going to remove all these by simply dragging them over andreleasing them to remove them all together. like so, the one i do want to keep is thesearch bar, so i’ll keep that. i also want to add some of the special virtue widgets,there’s about with image widget, a contact v-card, image grid, recent post, social links.so how about adding some social icon, so this one i want this virtue theme social link,i’ll just drag this widget to the primary side bar and release it, and here we can justgive it a title, here you can add your different urls for your different social networks soanyone can use the link to connect with you. so once you’ve added the urls of your differentsocial links, then you can just come to the
bottom here and click on “save.†then,to close this, you can just click on this carrot right here to close this box.so the next thing i want to add to my side bar right here is an image with the call toaction that goes to my e-commerce shop page. so for example, what we’re headed toward,this is the completed demo site and here in the side bar on the blog archive page, i wantto add an image which when you click on it, it will go to the shop page.so to add this to our website, going back to our widgets screen right here, the firstthings we need to do is we need to upload the image. so going over to ‘media’ righthere. i’m going to hover over media and click on add new. then i’m going to clickon select files, then i’m going to choose
the image which is right here and click onopen. then once the image has uploaded we need to click on this link right here thatsays edit to grab the url link of the image. here in the edit media screen we can see here’sthe image and on the right hand side here’s all the details related to the image includingthe file url. i’m going to highlight all of that and copyit, then i’m going to go back to the widgets area by hovering over appearance and clickingon widgets. and then here in the primary sidebar we need to add the text widgets. so i’mgoing to scroll down the bottom here, grab the text widget, and drag it up to the primarysidebar. and then here in this box we need to add some html code.i’m going to add the html code here, if
you can’t see it no worries i will dropthis code in the video so you can see it there as well. here i’m just going to add thehtml code for the image first which is a [img src=â€] and then we have the url for theimage, this is the url for the image. and then we close it off with a “]. now to alsoadd the link to make sure that this image is not simply an image but that it’s activatedand when you click on it, it goes to another page- we need to add additional html here.so i’m just going to add that right here. here’s the opening tag for the link it’san href tag, and again i’ll be sure to include the codes so you can read it easily. you canjust swap out my url of course, my shop url with your own url for where you want the imageto go when you click on it, so this is the
link url right there.at the end of the code we need to close out the link so i’m just going to also add aclosing bracket right there which is a bracket, a slash, a forward slash, an a, and then theclosing bracket. this is what the code looks like, i’m just going to click on save tosave this code. okay once we have this all set i’m justgoing to close that for the moment. next we need to configure all the different contentin the footer sections right here. we have four different footer columns so for startersi’m going to click on this carrot to open it. and first what i want to do there’sa bunch of virtue widgets here as mentioned previously. we have the virtue about widthimage, the content e-cart and image grid,
recent posts and social links.the one that i want is the about with image, this allows for an image and a simple abouttext. i’m going to grab that, drag it to footer number one, and here we see there’simage and text. first i’m going to click on upload to upload a new image. then i’llclick on upload files, and select files, then here is the file that i want this one righthere. i’m going to click on open and as we did previously i’m going to give thisa title and an alternative text. and then when i scroll down here we can see we canlink it to something. for this particular image i’m not goingto link this to anything so i’ll click on none. alignment i’ll just say center, andi want the full size so i’ll leave it like
that, and then click on insert into post.next we need to add some text so i’m just going to paste in the text right there andclick on save. and here we have all the content that i’ll be adding in footer column one.i’m going to close this by clicking on this bracket one more time, and now i’m goingto open footer column two by clicking on the same dropdown little arrow right there.for column number two i want to add the virtue image grid, so i’m just going to drag thisone to the column two section. this will display the recent posts in an image grid kind oflayout format. so there’s a number of settings here that we can configure including the titleso i’ll just call this post gallery. and i’ll leave all the defaults like that, thatlooks good. and then i’ll just click on
save to save the settings.next we have two more so i’m going to click on this one, footer number three, column numberthree. because this is a e-commerce website i want to add some of the featured productsin the footer so i’m just going to scroll down. there’s a bunch of different woocommercewidgets that you can include as well. this one is the one that i want the woocommercefeatured product. so i’m just going to grab that and drag it up to footer number three.and you can choose how many products you want to have displayed, i’ll just leave it astwo and click on save. finally footer column four i’m going toclick on this dropdown box and once again i’m going to use the virtual social links.so i’m just going to grab that and drop
that in column four, and here you can giveit a title once again. and you can fill out all the different urls for your differentsocial networks. once you have all the links set up, go aheadand click on save to save your settings for this particular widget. okay so we have allthese different things set up, that looks great. the other thing that i want to noteis in the primary sidebar i wanted to mention that it is always a good idea to have a wayfor your readers to sign up for your email list, and put a box that looks something likethis. to add a box like this i created another videothat you can check out. i’m not going to cover it in this particular video becausethere’s another video that will walk you
through all the different steps to createthis sign up form box. i will drop the video link in this video so you can come to thisvideo here and go through the process of setting up your email forms both on your sidebar,in your footer, and at the bottom of your blog post. i encourage you to check out thisvideo, it’s a pretty quick video and it will walk you all the way through the stepsto get your email form set up so that you can add it to your sidebar right here.here we are back on the homepage of our website, and if you’ve been following on you’vemade it this far then most likely your website looks something like this. so we have onelast thing to do before we finish this particular website and that is to add the woocommercee-commerce features. when we do that the featured
products will show up here in the footer andthey’ll also show up on the shop page. let’s add the woocommerce e-commerce featuresright now. to do that i’m going to go back to the dashboard and click on dashboard. herewe are on the dashboard, to add a new product to our wordpress website we can go up to thetop and click on plus new, and then click on product. or on the left hand side we canclick on products, and here on our products screen we can click on the link at the topthat says add product, or finally on the left hand side we can hover over products and clickon add product. wordpress gives us a number of different waysto add a new product to your e-commerce website. at the top here i’m just going to clickon this link that says add product to add
my new product. the first thing we need todo on the add new product screen is give our product a name. i’m going to call this braziltees since i’m going to be adding a brazil t-shirt to my e-commerce catalogue. next herein this white box i’m just going to add some content. this is going to be the descriptionabout the product. next on the right hand side where it saysproduct categories we want to add our product to a product category so i’m just goingto click on this link that says add new product category. and then i’m going to add thecategory just type it in, and then i’m going to click on this button one more time to addthe new product category. once the product category has been added i’m going to scrolldown and i’m going to give my new product
some tags so i’ll just add brazil and i’llspell it two different ways. the portuguese way and the english way, note that i’m separatingthese two different tags with a comma. when you’ve added your tags, go ahead andclick on add to add your new tags. next scrolling down we need to add a featured image for ourproduct so i’m going to click on this link that says set featured image. then i’m goingto click on upload files, and select files, here is the file that i want so i’m goingto highlight the image and click on open. once the image has been uploaded then i’mgoing to give it a title and an alternative text.once the title and alternative text have been added i’m going to click on seat featuredimage to set my image. once the image has
been set then we can look over the productdata section right over here. we have a number of different product types we can choose from,when i click on this box right here where it says simple product they all pop up righthere underneath product type. we have a simple product, a group product,external affiliate product or variable product. the first one that i want to create rightnow is a simple product. i’ll just keep it as simple product and we’ll need to adda price so i’m just going to give the price right here. i’ll make it $40, of coursenote that we’re looking at pounds right now so i’ll show you in just a moment howto change this from pounds to another currency. i’m not going to give this a sale or seta schedule for a sale right now so i’ll
just leave that blank. this is how you canset up a simple product. the basic thing that you need for a simple product is simply theprice. i’ll show you in a moment how to create a variable product. for this particularproduct i’m just going to be selling one color, that’s it and one price. so that’swhy we call it a simple product. if you’d like to give some attributes to this particularproduct you can do so by clicking on the attributes tab right here, then you can click on add,and then we would give the name of the attribute. i might want to call this the color. and thenfor the value because this is a simple product i’m only offering one color for this productso i’ll just put teal. yes we can make this visible on the product page so i’ll clickon that button right there. and then i’ll
click on save attributes.this is optional if you’d like to include attributes for your simple product you cando so. it’s not necessary, it’s really up to you. once the color attribute has beenadded there’s one more attribute i want to add which is the size. i want this to bea one size fits all because once again this is a simple product so it only comes in onesize. to just let everyone know this is a one size fits all i’m going to click onadd to add my other attribute and i’ll just call this the name of size, and the valuewill be one size fits all. once we have our size set there i will makethis visible on the product page so i’m going to click on this check box right there,and then i’m going to save this one as well
by clicking on save attributes. once we’veadded this information in here then i’m going to scroll down and then i’m also goingto add a short product description as well. i’ll just pop in the other content i addedearlier and i’ll just reduce it by eliminating everything but the first sentence. once youhave this all ready to go you can come up to the top and click on publish top publishyour new simple product. once the product has been published we cancheck it out by clicking on view product, and here we see our new product added righthere. we have the thumbnail image which when i click on it, it will open up to a reallycool light box display so i can see it really well. and then here on the right hand sidewe have the product title, the price which
i’ll change the currency in just a moment.a short product description, and an add to cart button right here.we also see it’s categorized in the category t-shirts with these two tags, and when i scrolldown i can see my larger product description right here. i can click on the additionalinfo and here we can see the different attributes here, both the color in teal and the sizeone size fits all. and if we have any reviews those will show up right here in the reviewstab. so this is how we add a simple product toa wordpress e-commerce website. the next example is let’s add another product but this timewe’ll add a variable product with multiple colors and multiple sizes. to go up to thetop once again i’m going to click on plus
new, and then click on product to add a newproduct. then here on the add new product screen once again i’m going to give thenew product a title. then once you’ve added the product title i’m also going to addsome description content in this light box right here.next on the right hand side i’m going to add this new product to a product category.this time i’ll also add it to the t-shirts category since this also is a t-shirt. thenscrolling down i’ll just give it a tag right here volunteer, keep calm and both of thesetags are separated by a comma. and then i’ll click on the add button right there. thencoming down once again i’m going to give this product a featured image by clickingon set featured image, and upload files, and
select files, and i’m going to select theimage that i want right here, and click on open.as we did with the previous images, i’m also going to add a title and an alternativetext. once the title and alternative text have been added i’m going to click on setfeatured image to set the image. once the image has been set then on the left hand sidewhere it says product data, this time instead of a simple product i’m going to add a variableproduct. this product is going to have different sizes and different colors. i’m going toclick on variable product, then i’m going to click on attributes right here, i’m notgoing to touch any of these sections you can check them out if you’d like.if you’d like to use this view management
system you can do so. also note that thesedifferent question marks when you hover over them you’ll get a tool tip and this willtell you exactly what this particular feature is. here we see when i hover over the questionmark it says, “eschew unit, a unique identifier for each product or service that can be purchased.â€if you’d like to add that you can give this a eschew id number right here.also there’s some other options including inventory if you’d like to manage stock,you can check this box right here. if you’d like to set the stock’s status or allowback orders, or sell this individually these are all kinds of settings that you can add.i’m not going to add this i’m going to keep it really simple in this example buti do want to point out all these different
options. you can just read through them andonce again when you hover over the question mark you’ll get this tool tip which willexplain what each of these things does. next we have shipping if you’d like to managethe weight, and dimensions, and the shipping classes you can do so. if you’d like tolink this product to other products to either up sell the product or cross sell the productyou can do so right here. and then finally here we see there’s the attributes sectionright here. so i’m going to click on attributes and the first attribute i want to create issize. so i’m going to click on add to add a new attribute, for the name i’m goingto call this size, for the values instead of one size fits all i’m going to be offeringvarious sizes, that’s why it’s a variable
product.for example i’m going to be adding a small size, and also note that i’m using thispipe symbol. it’s a vertical line and it’s located just above the right hand return buttonon your keyboard. when you look at your keyboard you see there’s the return button on theright hand side. just above that there’s a pipe symbol, it’s a vertical line. i’mgoing to separate each of the values with this pipe symbols. so we’re going to havesmall, medium, and large. and then once i have my sizes and values seti’m going to click on these two boxes right here. this one says visible on the productpage because i want customers to be able to see these different options. also i need touse these different attributes for my variations.
so you want to make sure that you click onboth of these boxes right here and then click on save attributes to save the attributes.okay, once these attributes have been saves i’m going to create one more type of attributeand that’s the color. again i’m going to click on add to add a new attribute, andthis time i’m going to call it color. with the value i’m going to call it navy andi’m also going to be offering this particular t-shirt in teal. here we have the two differentcolors, once again i’m going to click on these two boxes to number one make this particularattribute visible on the product page. also to use it for variations so you want to makesure you click on both of these boxes right here, and once again click on save attributes.once the attributes have been saved next we
need to click on variations. i’m going toclick on variations right here, once we click on variations then the first thing we seehere it says, default selections. it’s really important that you set a default selection,otherwise these variations will not be visible on the actual product page.step number one is we need to set the default location to any one of the various products.any one you want, it just has to say something. i’ll click on small, that will be my defaultand also we need to add the color i’ll put it as navy. so my default selection is a smallnavy so that’s the first thing we want to do. step number two here we need to clickon add variation to add the variation. here you just need to go one by one and you needto set up each of these different variations.
i’m going to click on small, and navy, andi’m going to give it a price of $40. again we’ll change the currency in a moment, youneed to set the price for every single version of this particular item. so we’re goingto do it for small, teal it will be $40 also. i’m going to click on add variation onceagain. i’m going to do a medium in navy, and also i’ll do it as $40, and then addvariation. this time we’ll do the large in navy; see i’m just going one by one eachsize and each color. so i’ll also do the price here of $40, if you don’t add allof these then the price will not be visible for one of the different variations.now i’m going to click last time add variation, this time we’re going to do the other colorand all the sizes. we’ll start back at small
one more time and this time we’ll do theteal color. and i’ll add the price of 440 here, add variation. this time i’ll saymedium in teal, add $40, and finally add variation. the last one i’ll say large in teal andhere we have the product price of $40. once all of those have been added then wecan come down here to the short product description and i’m going to add the previous descriptionbut this time i’m going to just reduce it so once again it’s just one or two sentenceslong. it’s a short product description, and when you’ve added in all these differentthings, all your attributes and all your variations, all your prices you can come up to the top.we can click on publish to publish this variable product.once a product has been published you can
check it out by clicking on view product.here we see our product on the product page. so we have the thumbnail image once againwhich when i click on it, it opens up into a really nice light box display so you cansee it really clearly. then we have the product title, the short description, and here youcan see now we have the different variations of these products that a customer can choosefrom. so they can choose this size by just clickingon this dropdown box, they can choose small, medium, or large. or they can choose the color,one of these two colors that we set up. then we have the add to cart button, the category,and the tags it’s been organized into. we have the full description right here. we canclick on additional information to see all
the different attributes and variations thatthis product is available in. and then when they click on reviews they can either submita review or read other reviews also note that we’re starting to see relatedproducts down below, because this particular product this keep calm and volunteer t-shirtis categorized in the t-shirt category, it will also be displaying here all the relatedt-shirts will be showing up down below. that is how you add a simple product and a variableproduct in woocommerce. let’s take a look at some of the other options.i’m not going to add them but i just want to point them out really quick. when we goup to plus new and click on product, the other two product types that you can add when wescroll down here, once again i’m not going
to add these right now in the essence of timebut i do want to point them out. when you click on product data you can create a groupproduct or an external affiliate product. i’m often asked how do you add an externalaffiliate product. well if you click on this link right here you’ll note that here areall the different attributes that you can fill out related to external affiliate products.you can add the most important thing right here is you would enter the external url ofthe product. you would enter that right in this field right here, and then you can changethe button text title if you’d like right here, and you can set the price and any saleprices. if you want to add an external affiliate product this is the section you would do thatin.
also often asked how do i add a downloadableproduct, and you can do that by clicking on this button right here. note that when i hoverover the check mark it says downloadable products give access to a file upon purchase. hereis a virtual product, it says virtual products are intangible and are not shipped. you canread more about this at woo themes in the woocommerce documentation. but again i justwant to point out there’s other different product types that you can choose from whenyou’re creating a e-commerce website using a woocommerce plug in.we have our two products right now. i’m going to go to visit the site, and now wheni click on shop to go to the shop page here we see our two products listed right here.of course the more products we add, they’ll
all just start displaying on this page ifyou have lots of products added. but in the essence of time i’m only going to be addingtwo products, a simple product and a variable product. pretty much it would just continuerepeating that process, rinse and repeat to keep adding more products. you can do it justlike this how we did this one and how we did this one to create all of your different products.also note we still have some missing featured products right here. to feature these twoproducts we’ve created in the footer, we want to go up to the top, click on dashboard,then we want to go to our product page right here. i’m going to click on products, thenyou need to one by one individually you need to click on quick edit for the products. i’mgoing to click on quick edit, then we get
this screen. right here there’s a box thatsays featured. we need to click on this box to feature thisproduct, and then click on the update button. and i’m going to do the same thing withthe brazil tee. i’m going to click on quick edit, and then scroll down, and i’m goingto click on this featured box right here and click on update. and now when we go back tothe home page by going up to the top and clicking on visit site, now when i scroll down to thefooter, now we can see our two products in the footer, the two featured products.the next thing i want to do, we see that the currency is in pounds. let’s change thatright now to a different currency. to change the currency we want to go up to the top,click on dashboard, next we want to hover
over woocommerce and go to woocommerce settings.so i’m going to click on settings right here, and then here you can see on the generaltab, here we have the general options on the base location is the uk and the currency isin pounds. to change this i’m simply going to clickon the country name right here, there’s all these different countries you can choosefrom. i will choose california, usa. then for currency i will just scroll down, there’sall these different currencies you can choose from and i’ll just choose us dollars, andonce that is all set i’ll come to the bottom and i’l click on save changes to save thechanges. once the settings have been saved, note thatat the top there’s all these additional
settings that we can choose all separatedby these different tabs. once the settings on the general tab have been saved, note thatthere’s a number of different settings as well on all these additional tabs right hereat the top. i’m just going to go through them one by one, starting with the cataloguetab. i’m going to click on catalogue and herewe can see there’s a number of different catalogue options on how you can display productsboth on the shop page, as well as here we see for example the first item is the defaultproduct sorting. again when you hover over each one of these it will say exactly whatit does. this particular one controls the default sort order of the catalogue, herethe next one shop page display. here you can
control what is shown on the actual shop page.if you want to show the products or if you want to show sub-categories, or both.one by one you can just look at all the different options here. there’s a lot of differentsettings. the ones that i want to point that i often get questions about on youtube include,weight and dimensions. this is where you can weight, for example when i hover over thiscontrols what unit you will define your weights in. a number of people are asking how do ichange the weight unit,, well this is where you would come under product data on the cataloguetab. when i click on this here you can change it from kilograms, to grams, pounds, or ounces.the other thing that i want to point out is related to pricing options, this is anotherquestion i often get on youtube related to
either if you do not want the decimals, oryou do want the decimals, or you want more decimals- here you can choose the number ofdecimal points that will be displayed in the prices. here’s an example, if you removethe zeroes after the decimal point $10.0 cents will simply become $10.also you can change the currency position by default it will be on the left, but ifyou want to put it on the right or put it on the left or right with space, you can choosethose settings right here. finally scrolling down here are the imageoptions. these settings affect the actual dimensions of images in your catalogue. thedisplay on the front end will still be affected by the css styles. if you need to change anyof your dimensions for your images, this is
where you will set the dimensions. then asit notes, it says after changing these settings you may need to regenerate your thumbnails.you can click no this link to learn more about how to regenerate your thumbnails. namelyyou’ll need to get a plug in called regenerate thumbnails.if you change these dimensions,then you also want to add a plug in to your wordpress website called regenerate thumbnails.so you can click on this link to learn about that.okay great. now you’ve kind of done a quick overview of the catalogue tab right here.i’m going to click on pages. when you set up woocommerce and you set up the pages, thepages will automatically be added to this particular tab right here. if you do not seeany words here, then you need to make sure
that you set up your pages one more time becausethe woocommerce e-commerce site will only work if all the pages here are set up.this is your pages tab, next we have inventory. if you’d like to manage stock you can setthose settings on this tab. next we have taxes, so i’m going to click on tax. this panelwill give you all the different options you need for taxes. next we have shipping. hereon the shipping options tab, you can decided what kind of shipping method you will provideon your website. also you can determine whether or not you want to enable the shipping calculatoron the cart page. i do not want to include the shipping calculatorso i’m going to uncheck this particular box. then i’m just going to come down hereand click on save changes. also note that
here we see the default shipping method downbelow, currently there’s a purple check mark next to free shipping. in this demo iwant to provide free shipping so i’m just going to click on this to make this the default,set free shipping as the default. and once again i’m going to click on save changesto save my changes. now there’s a number of other shipping methodsyou can choose from including flat rate shipping, free shipping, international delivery, localdelivery, and local pick-up. first of all i’m just going to click on flat rate. ifyou’d like to enable a flat rate shipping you can click on this box right here, andthen you can decide what the price will be. note when i hover over this question marlit says enter a cost per order, leave blank
to disable. so i’m not going to set up aflat rate shipping, i’m going to have free shipping on this demo but if you do want toallow or enable, or set up a standard rate flat rate shipping you would click on thisbox, and then you can add the price of the shipping right here.i’m going to leave that unchecked, you can also see that there’s additional costs thatyou can add related to shipping if you’d like. i am once again offering free shippingso i’m not going to enable this. i’ll just leave this unchecked, but i want to pointout this is where you will add a flat rate shipping if you’d like to do so.moving on to free shipping i’m going to click on this link right here. here we seethat the enable free shipping check mark is
checked. right now i have free shipping onmy site which is exactly what i want. next, i’m going to click on international delivery,if you’d like to set up international delivery you can do so by simply clicking on this box.and then you can go through all the different shipping related settings for internationaldelivery. again everything that you see with a questionmark you can hover over and it will explain exactly what it does. if you want local deliveryor local pick up you can set that as well. i’m not going to include that i only wantfree shipping. when i click on shipping options right here we see that here the only thingthe only thing checked right now in purple is free shipping. right now this website inthe demo is set up for free shipping.
okay so the next thing we need to do is weneed to set up our payment gateways. i’m going to click on payment gateways. here wecan see by default we have direct bank transfer, check payment and paypal are all set up. iactually want to disable everything except paypal. i’m just going to click on thischeckbox here to make paypal the default, and then i’ll click on save changes. theni’m going to go one by one to all these different pages right here, and i’m goingto disable the ones that need to be disabled, and set up the ones that need to be set up;so starting with the direct bank transfer, this bacs i’m going to disable that by un-checkingthis particular one, scrolling down and clicking on save changes. once bank transfer has beendisabled, then ill move on to the check tab
by clicking on check. i also want to uncheckthis and disable it so i’m going to uncheck this right here, and then click on save changesto save my changes. next we have cash on delivery, another onethat i do not want but i’m going to click on it anyway cash on delivery. this one isalready disabled so that’s great. and then i’m going to check on meijer check out ifyou’d like to set up or connect your e-commerce set up with meijer you can read all aboutthat here and you can set that up here. i’m not going to be using this service, i’mgoing to go directly to paypal by clicking on paypal.here we see that paypal is enable which is great. we see that it says pay via paypal,you can also pay with your credit card. but
if you don’t have a paypal account i’mgoing to set up paypal right here by clicking on enable. then i’m going to add my paypalemail and the receiver email. and then i’m going to scroll down, i’m going to uncheckthis that says enable paypal sandbox to disable that. and then i’m going to click on savechanges to save the changes. once the payment method has been saved, thenwe need to click on emails. here you can set up the email sender options that will be usedin the woocommerce emails, starting with the from names. here we see this is not reallythe best name right here so i’m going to override that by just putting in my domainname right there. and then i will leave my from email address right here, that all looksgood. if you’d like to add an email template
you can fill out these settings right here,and when you’re ready go ahead and click on save changes to save the changes.also note that right here where it says the email footer text i also don’t really wantit o say katrina’s wordpress so i’ll just override that, and i’ll also put my domainname in right there. if you’d like to remove this powered by wordpress you can do so, i’lljust leave it for now and then i’m going to click on save changes to save my changes.once the email settings have been saved, the next step is to check out the integrationtab. ill click on that, and here you can add your google analytics id if you’d like,and you can set up any kind of tracking code that you’d like by checking these boxesright here. i just want to point this out
so you can read more about it, and when you’veset this up the way you’d like you can click on save changes. the other thing i want topoint out about woocommerce is that you can set up some coupons on your woocommerce e-commercewebsite. here on the left hand side when i look atwoocommerce right here, there’s a coupons link so i’m going to click on coupons. andto add a new coupon you can click on this link here that says add coupon. there’slots of different settings that you can set up for your coupon. you can read through allof them, whether you want to have a coupon on one product, or on a certain dollar amount,or currency amount that a customer is using. you can read about all these different settingsright here for coupons.
the most simple coupon that you can do isjust add a coupon code so i’ll just put my coupon code right here. you can add ascoupon description, this is optional. here you can choose your discount type, whetherit’s a cart discount, a percentage discount, a product discount, or a product percentagediscount. i’ll just make it really simple and create a cart discount of $10, so thatwill be the coupon amount. and then you can once again check out all these different items,whether you want to enable free shipping, individual use, if you want to apply thisbefore the text. if you want to exclude sale items, here are all the different settingsyou can read through them. i’m just going to create a simply across the cart $10 discount,and i’m going to click on publish to publish
this coupon.so we have updated our coupon and created a coupon, let’s go check out what this sitelooks like now. i’m going to go up to the top and click on visit site. here we are onthe home page of your new wordpress website using the responsive e-commerce website themecalled virtue. now let’s go through the process that a customer will take to ordera product on your e-commerce website. i’m going to click on the shop page right here.here we see we have two items that we added to our website so far. i’m going to clickon this one, the brazil tee, and here we see the product image, the title, the price, ashort description, and the add to cart button. i’m going to click on add to cart and wheni do that we see that we’ll get a message
here that says the brazil tee was successfullyadded to your cart. you can click on this button here to view the cart.i’m going to click on this button right here. here on the cart page we’ll see asmall product image, the product title, the price, the quantity that’s being ordered,and the total. down below we’ll see the cart total, so here we see the subtotal is$40, the shipping is free shipping. the order total is $40, so let’s take a look at onemore time. i want to continue looking through the site and adding some more items to oursite right here, to our cart. i’m going to click on this button one moretime, shop. to add another item to the cart. this time i’m going to add the keep calmand volunteer tee. i’m going to click on
this particular item and let’s see, it lookslike sorry no products not your selection. please choose a different combination. okayso we should not be getting this message. i think i know what’s going on with this.i’m going to click on okay that’s not a good message. if you get that message thanas it notes here, we see that the size choose an option. there should be a default sizeand color listed here so in the event that you get that message then we need to checkout once again this product. before we continue i’m going to go up here and do a littletroubleshooting. once again not so happy that this happened during my video but in the eventthat it happens to you, i’m going to show you how you can fix it.going up to the top i’m going to click on
edit product, then i’m going to scroll downhere where it says product data i’m going to click on variations. and here is the issue,so the default selection is a small navy, but note that we only have a small teal anda small teal is listed twice which we don’t want. so somehow this didn’t actually getselected, the teal was selected. so we need to make sure this says navy.you should have a different variation for every single one of your sizes and colors,or other attributes that you’ve added to your product data right here. now that i havesmall and navy set and i have the default here small and navy, i’m going to go upto the top and i’m going to click on update to update this product page.now i’m going to view the product page by
clicking on view product, now we see whenwe go to the page we no longer get that popup up message and instead here where it sayssize it will say small which is the default size. and it also says the color is navy whichis the default color. that looks so much better. now we can choose by clicking on this particularfield right here, we get all these other options we can now choose from. a customer can onlychoose between the two colors we’ve added as well. i’m going to choose a medium sizenavy and then i’ll click on this button here to add it to the cart. once this itemhas been successfully added to the cart we’ll get a message letting us know that it hasbeen added to the cart, and we click on this button here that says view cart to view ourcart.
here on the cart page now i have two itemslisted, the brazil tee and the keep calm and volunteer tee both with the thumbnails. wesee the price of each one of these is $40, i’m ordering one unit of each for a totalof $40. we also see for this particular one, the keep calm and volunteer tee we see thatwe’re ordering the medium in the color navy. now we scroll down we see the cart total is$80 with free shipping so the order total is $80. however i do have a coupon so i canadd that right here to apply the coupon. i’m just going to add the coupon code right hereand click on apply coupon. here we see the coupon code was applied successfully and nowwhen i scroll down we see that the subtotal is $80, and the free shipping, and the $10discount is listed right here. so the order
total is $70.okay so now a customer could proceed to check out by clicking on this link here that saysproceed to checkout. here on the checkout page the customer could fill in their billingaddress and their shipping address. as we see i’ve added that right here, then we’regoing to scroll down they would review the details of the order noting that this is $70.and then down below here as it notes pay via paypal, you can pay with your credit cardif you do not have a paypal account. this is how we have it set up for this demo,then a customer would click on this button to place the order. once the customer clickson place order, then they’ll see the order summary on the left hand side as it notesthe item total is $70, the discount has been
applied. and then here on the right side itsays choose a way to pay. you can either pay with your paypal account by signing into paypalhere, or as it notes here it says don’t have a paypal account? you can click no this,and as it notes you can pay with a debit card or a credit card by just filling in your informationhere. once a customer fills in all their credit card details, then they would come down hereto the bottom and they would click on review and continue to make their payment.two more things before we wrap up. number one i want to show you the alternative homepagethat you can create. if you want to have a focus simply on your e-commerce website. aswe see here this is the homepage that if you’ve been following along this is what your homepagewill look like. but i want to create a homepage
where the shop page is the main homepage.to do that i’m going to go up to the top, click on dashboard, then i’m going to scrolldown to settings, and i’m going to click on reading. right now if you like the waythe homepage looks like now you can keep it on your latest post. however if you want tochange the homepage and have the shop page be the homepage, then you can click on thisbutton here as static image. the front page i’m going to click on that, i’m goingto make it the shop page as the front page, and the post page is going to be the blog.this is the alternative homepage, it’s optional. if you want to have your shop page be thehomepage. so i’m just going to set it up like that and click on save changes. now whenwe look at the homepage by going up to the
top and clicking on visit site, now we seethis is what the homepage looks like. again, this is an alternative homepage if you preferto have the shop page and the e-commerce features be featured on the homepage.the other thing we would need to do is we would need to create another home menu itemright here. so i’ll just go up over here, click on menus, and then here on the menustructure i want to click on links and i’m going to give this the url of the homepagewith a link text of home, and click on add to menu. then i’m going to drag that upto the top, and then i’m going to click on save menu, and now when we look at thehomepage by going to visit site, now we see we have our homepage menu item right hereand the homepage is the shop page.
once again this is optional; this is an alternativehomepage for your website. i prefer actually having the other, the original, the defaultview. so i’m going to back to the top and switch it back by clicking on dashboard, thengoing to settings, and reading, and then i’m just going to click on your latest post tomake sure my latest posts are featured, and then i’ll click on save changes. now wesee once the settings are saved when i go to visit the site, now we see that the originalhomepage is set up on the homepage right now which is great.the other thing that i wanted to touch upon was in the blog section, when i click on blogand i go to my blog post by clicking on this one for example. when i go to my blog posthere we have an author section, an author
bio. to add the author bio right here i’mgoing to go ip to the top, hover over my name, and click on edit my profile. and then i’mgoing to scroll down and here we see that here is about yourself. it says bio info,and here you can add your actual bio. once you add something in this box- your bio,then come to the bottom here and click on update profile. once the profile has beenupdated now when we go back to the blog post by clicking on visit site, and then blog,now when i check out once of my posts by clicking on this one for example, now when i scrolldown you see here is the actual bio. so that is how you can add an author bio right here.finally last little tip for your wordpress website is making sure that your url linksare search engine friendly. so this is really
important that you change your permalinks.to do that i’m going to go to dashboard, and then i’m going to go to settings. yousee there’s a link here that says permalinks, go ahead and click on permalinks. by defaultpermalinks are the web urls that are featured in the browser field as we can see right here.this entire thing right here this is the permalink. by default when you install wordpress it willsay default, and it will most likely will have a page number which is not a very helpfulor descriptive kind of form for your url. it’s much better to have words because searchengines can read the words but these numbers mean nothing to search engines. it’s alwaysa good idea whenever you’re setting a wordpress website, one of the first things you shoulddo is come to permalinks settings right here.
it’s under settings permalinks, and youwant to change it from default to pretty much anything that has words in it. so day andname is good, month and name, or post name, or you can create a custom structure.i usually prefer just the post name, i don’t have dates that way it keeps my content alittle bit more fresh. when you see old dates sometimes a lot of readers may think thatit’s old but actually a lot of time the content is still relevant. i prefer just takingthe dates out altogether. do whatever you like of course, it’s your preference, ijust recommend and encourage you in general to just add anything that’s not the defaultright here. i’m going to click on post to make surethat it says post name, and then i’m going
to scroll down, and then i’m going to clickon save changes. okay so now the permalinks structure has been updated. here we are backon the homepage of our wordpress website theme using the free responsive e-commerce wordpresstheme called virtue. so if you’ve been following along most likely your website looks somethinglike this. thank you so much everyone for joining andthanks to everyone on youtube for the suggestion to create a video about the virtue theme.this is a beautiful e-commerce wordpress website theme. if you’ve enjoyed this video pleasefeel free to share this video with your friends, like the video, comment on the video and favoritethe video. i’ll be coming out with more videos related to wordpress and how to growyour business on the web. please subscribe
to my youtube channel for updates on upcomingvideos. to continue the conversations about the virtuetheme as well as about wordpress in general, and other topics related to building a businesson the web, please join me on my website at 77webstudio.com. finally i want to give abig shout out of thanks to kadence themes, the developer of this beautiful free responsivee-commerce theme. thanks for joining everyone; i’ll see you in the next video.