Right so no in this video I'm in a show you how to start customizing the appearance of
your new WordPress website and with WordPress there's more than one way to do things and
I'm in a show you one way here but there's also other ways of doing the same things so
about two years ago WordPress introduced a feature called the customizer and that's where
I want to teach you how to start customizing your websites were to be able to create menus
there and choose fonts and colors and all that and depending on the theme you use they'll
have certain options available in theirs you can do everything visually and it makes it
a lot easier to put together a beautiful website now on this website were using the generate
press theme now generate press is a free theme that gives you some options that you can use
to customize it however they sell a premium add-on pack that's going to give you more
customization options so here is generate press premiums website right here and I'll
have a link down below to this video and it's very affordable it's $39 and it just to give
you a additional features now it's not required but is sometimes the way it works is you could
spend so much time trying to tweak this one little thing or customize this one little
thing but the developer will also have an easier way to do it but involves paying a
little bit of money and that's the situation here would generate press premium so this
package is only $39 or so and it's going to give you more options to customize the colors
throughout your website through a visual interface also the topography those of the fonts of
every little area of your website where fonts show sections you wouldn't use and as you
scroll down there's just more and more features that it gives you that you can have for this
small amount of money but working to work with what we have here so the way we get into
the customizers you go to appearance and then it's the second option right there that says
customize order to go ahead and click on it now don't be alarmed that your website looks
like this right now that's because we haven't customized the visual style of it at all just
yet and that's organist are doing right now so so what to do some to go through each of
these different setting options in the customizer just to show you what it does and working
to make little changes along the way so the first thing is your site identity and that's
going to be this right here and this taglines when I click on it right here I can change
the site title and I can also change the tagline but if I had a logo I could just go ahead
and upload my logo right here and then I can hi these two items like that so that would
remove the text that we saw and it would go ahead and use the logo instead so what I'm
to do is I'm a new I want to show the site title but I'll put something in here but that
my learning management system just like that you can see in the customizer everything you
do it'll just dynamically show right there which is very nice so anyways I'll just leave
that I'm not can add a tagline I'll just leave that the way that it is and but you get the
point there how easy it is to change that area now the next thing is going to be the
layout now like I said earlier you would get more layout options if you had the premium
pack that is available for generate press let's take a look at the areas of the layout
that I wanted to show you so one of the areas of the layout is how this header area is going
to work where the logos going to be and where this net menu navigation is going to be now
you can actually leave it like this if you like it and it's actually very nice so what
I'm gonna do is play around with a little bit some of the click right here it says primary
navigation and take a look at the options that it gives us so what I want to look at
right here is the navigation locations right now it said to be below the header but we
can actually put it to the right if we wanted to I would just go like this and I would choose
a float right and what's what it's going to do is its canoe instead of had that that logo
in the middle it's gonna push it off to the left and then it were going to have our navigation
right there and see that's how easy that was but you have other options right here you
can have it be above the header and so now it's up there whatever makes sense to you
you can do so now I really wanted to be on this float right like this so the header doesn't
quite take up as much space and that's what I want to do but you can play around these
options if you didn't want the search option there a lot of times that's actually not needed
you can just go ahead right here and where it says navigation search we can disable that
and is gonna remove it and then push everything over to the side so I like how that is but
what looks kinda odd is that the logo area here is kind of centered in between this space
I don't think we want that I think we want to push that off to the left a bit so let's
find that option I'm in a click on this little back arrow and that's probably where it says
header right here and right here it's as header alignment it's at the center but I think I
want to go left there ago that actually looks better and this will be on the left and this
will be on the right and I think that's a perfect mix right there to back up and now
will take a look at the next setting option it's right here it says colors now when you
have the premium package there's more color options right now are just kinda limited to
this right here but it's actually okay so we have our background color right here we
probably don't want that to be black so I'm in a click on select color and here's that
color thing picker thing here I can go like this and I can choose different shades and
all that clarity know that I want this to be wide and here's some one click color option
some click on a white and that's probably how I wanted right there I didn't want that
dark background color like that now here you could choose your text color and it's kind
of a lighter shade of black we can maybe darken that up a little bit that's fine but not go
totally black but if you want to go totally black you can choose the black color right
here in your set area that I was selling you about where you can talk a pop in your color
code for a color that you found someplace else I write some to get rid of that now our
link color I'm going to go ahead and put a different color in there I'm not sure what
I want so you can see I've using that Panama purplish color right there what I think I
want to do is I'm not can have it be this blue I think I have that be black as well
but you can choose whatever link color you want just know that it's can a show and lots
of places so for instance there's an area here with all these links and so there's a
lot of places where that color is going to show so I'm just keep this old neutral and
I'm to just go with the dark color like that maybe even black but you can make that whatever
color you want and then there's a holler hover color I'm gonna leave it to be that color
right there so let's go back and that would obviously be one of the areas where if you
picked out your colors you can go ahead and put those in now for the topography let's
go ahead and click in here now this is another one of those settings work you had the premium
package you would have option after option after option but that's okay a working to
be doing a lot of work in the page builder anyway so it's fine like this so for the body
I chose the robot toe font and this is where if you're on that font pair website and choosing
a Google font you would see it here in this list so what I'm to do is scroll down to it
up there it is a rubato and that is the font that I want to write there and then you could
use the weight of the font that's can be how thick it is some believe that it normal and
in text transform this is whether you want to be capitalized in uppercase and lowercase
were to just leave that as is now a larger font typically so by default or at 17 pixels
right here I want to go up 1 to 18 I just I just like the size of the 18 size of pixel
for my body font like that II just prefer that like that right there in years dial to
you can use to set that larger or smaller here we can choose our line height him to
stick with the default option and then the margin of four paragraph only leave that at
the default option as well so this is all organ to do right now for our fonts so let's
go back now working to go ahead and create some menus now here is our menu area and I'm
in a show you right now how to create a menu and how to add items to it and in this process
were also going to create some pages that were going to be putting all of our content
on some to go ahead and click on menus right here and then what we need to do is click
right here it says add a new menu now this is going to be our main menu you can really
name it whatever you want you can name it main or primary I typically call it primary
menu so I'm going to type that in now there it is primary and then I'm a click on this
button to create the menu and then what you do after you create a menu you need to assign
it to a location now when you have the premium version of generate press there's other menu
locations but with the free version here we have this primary menu which is good to be
this area so I think when I click on it this is all going to disappear so let's see what
happens okay I clicked on it and then it disappeared because we created a new menu but we don't
have any items in it yet so now working to go ahead and create some items so him to go
and click where it says add items like this and right here is the pages that we have so
far on our site and these are actually automatically created by the learning management system
so what I want to do is create what's going to be our homepage so what we can do here
is we can enter a page name here and then click on add and so were killing two birds
with one stone were building a menu but it's also creating the page that working and then
go and start customizing it so I'm in a type home just like that in the number click on
the ad like that and so now organ actually have a menu item their fight made this go
away you would see it but were in a leave that up for right now the next thing I like
to do is create a members dashboard page so go ahead and type name that whatever you want
to name it Weatherby \'96 border members home but I like the phrase members dashboard summon
enter that now okay and another to have that enema hit ad alright so now I like to make
a page called courses and these are to be available courses that are in my learning
management system okay so there's courses and then if you're going to have a membership
on your site you can create a membership page is specific for that I'm not going to have
a membership on this site but I want to create the page just to show you anyway so I'm going
to name this memberships okay am I click on add and then I want to have a custom checkout
page but I'm many use the one that was automatically created by LifterLMS him to go ahead and click
on the plus right there and now it's added so here's our menu items right there we got
home members dashboard course memberships and purchase now Mexican actually made a mistake
I don't want that to be called course actually wanted to be plural and have it say courses
but I'll fix that when were editing the page and I will show you how to do that now if
you wanted any other page this is where you create it if you wanted it about page if you
wanted a testimonials page if you wanted any page you can go ahead and do that right here
right now and tag it in the menu but I'm in a go ahead and use this order right here now
if I wanted to change the order of the menu items you can see I have them there now if
I wanted to change that I can literally just drag and drop and change the order of my menu
it's completely up to you actually I just accidentally made that underneath I stacked
it by accident sometimes when you're doing this you have to kind of make sure you get
it right just like that so okay there you go now that's looking much better okay but
you can like is that you can have a drop down if you want on these menu items you could
just gonna tuck it in there like this and let go and now we have a drop down so let
me push that back and we have the perfect menu right now and like you said you can have
whatever you want here you can have pages that aren't linked to the menu but this is
just what I want to go with for this project that were on together so now that we've created
our menu let's go back and let's go back one more time to go here okay so now I want you
to click on right here where it says static or front-page and this is where we tell WordPress
what page on our website is the homepage the first page that someone sees when they come
to our site so by default it is set to show your latest blog posts but you never usually
want that sum to go ahead and click on this right here it's as a static page and then
now I have the option to choose a front page or a homepage summoner click on this drop-down
and I want to choose that homepage that I created some to click on that and obviously
we haven't built that page yet so it's not can it show anything but this is where were
telling WordPress which page is going to be our home page so no were to go back arrow
and then go right here it's as additional CSS now this is really the only two areas
were ready to get a little technical in building out this website and there's really no way
of avoiding it in one of them is adding some stuff to this additional CSS and so what I
need you to do is go back to the files that you downloaded and so here they are and you
can see I have a folder right there that's his custom CSS so when I go in that folder
to see two files one is custom CSS and the other one is colors used now many use this
colors used file later in a later video but right now we need to get the custom CSS out
of here now CSS is what controls all of the visual styling of your website and so I've
put together a bunch of customizations to make this site look beautiful and we just
need to copy and paste them in there and then I want to give you just a brief explanation
of it because later on you might want to change some of these styles some to go ahead and
double-click it and for me just can open and a file here were you just need to really copy
and paste everything out of it so on a Mac you would hit the apple key in a like this
and it highlights everything if you're on a PC you would hit control a and it will highlight
everything and then we want to put this in our clipboard so for a Mac it's the Apple
key and then see and on a PC it's command to see to put it in your clipboard you can
just right-click and choose copy so, not copy it like that and now I'm gonna move this out
of the way, to move this file out of the way and now what I need you to do is click in
this box and you can highlight everything and then I need you to paste everything that
you just put in your clipboard I need you to paste it in there so for me I'm in it the
apple key in V a further if you're on a PC you can type control V and then when you pasted
in your to see all this bit of text just pop in there like that and I want to scroll back
up to the top so I'm have to do a specific video just for my channel in general on CSS
but essentially these are the various styles that were going to use on the website and
a lot of them have to do with LifterLMS because unfortunately LifterLMS doesn't have a way
or an easy interface to customize the colors of all the elements that it has and the various
styles so I have to write these custom CSS entries in order to change certain colors
and things like that and I've tried to do my best to document everything so every little
thing has its own entry so right here you can see this is a little note I made where
it says pricing color stamp under price and so it's his background and then here's a color
code like that now I want to show you a little trick okay so let me pull back that custom
CSS file right here and let me actually open up that other file I had that showed all the
colors that I'm actually using on the site so here are two text documents that you have
here's a custom CSS and here's the colors I used so these are the color codes for the
two colors I use that you see in the demo that I showed you in the first video so we
got that pinkish color right here and we got that bluish color right here so what's really
neat about these text editors right here you can actually do a find and replace so for
instance if you saw all the places I was using that pink but you would've wanted to be that
pinkish purplish color you would want it may be a darker blue what we can do is a finder
for this color code and we can replace it with the color code that you want in this
file here and then we can copy and pasted into the live site so for instance let me
highlight and put this in my clipboard now in this document I'm going to use the find
and replace function now if you're on a PC on a PC to control F on a Mac it's command
F to bring up this find and replace option box by going that there it is here is this
box right here so I can go ahead and paste in anything like that and it will try to find
it and so right here there's a faint number that says seven this is telling me that it's
founded in seven locations and when I scroll down it has it all highlighted like that on
the different locations now if I wanted to change that color on all this CSS I can click
on this box here that says replace and I can paste in the color code that I actually want
so what you do is you do a find and replace make sure you the color that you want is in
there and then you would go here and then you would copy and paste all of this out and
put it in here this is how you're gonna very easily be able to change the colors really
quick on all of the elements that are in want to do that for that pink and that purple color
that I listed right here the pinkish and the bluish are in a want that you do that find
and replace for those colors if those are the ones that you want in that's totally fine
and so that is how you are going to without having to learn a whole bunch about this thing
called CSS that's are your to be able to customize it within two or three steps the colors now
what I'd recommend though is that after you do your find and replace and then you want
to close this file I would suggest not saving it because then it would overwrite the way
that it is originally unless you knew that it looked the way that you want did it to
look okay so that is this custom CSS that we needed to put in here and there's a bunch
of different entries now as you get better with website stuff you're gonna be able to
look at this in your and and know what it means I know it's kinda crazy to think that
you're in and know what this means but you actually will over time but right now I want
to get you up and running have it look great but with your work colors not the colors that
I put in there but the colors that you want in here so now that we have this custom CSS
in here I want to go back and we are pretty much done here in the customizers that's really
all that we needed to do here and you can easily come herein make changes in the future
so all we need to do now is click on this save and publish button and then to get out
of the customize arena click on this X right here and now we are out of the customizer
and that stage of this process is complete now I told you that that custom CSS was going
to be the one area at one of two areas where it's a little technical looking at code and
I don't want you to be afraid of that and there's on there's going to be one more location
for that now I kept showing you that generate press as a premium package that puts all these
options in the customizer well we still have access to those options we just don't have
a user interface to change some of them so this is what we need to do to change some
of those core styling options of the theme if you're not in a purchase generate press
premium what we need to do is go to appearance and then click on editor now if you followed
my advice on a Webhost you'll have this editor option right here some web hosts will actually
remove this option and you're not to be able to do this step if that's the case so here
we are in the editor there something you can click on right here that says theme function
so I'm go ahead and click on a theme functions and it's gonna show a bunch of information
here so these are all the options that if you had generate press premium you would be
able to modify these in the customizer visually but luckily if you don't have the budget to
purchase it it's okay we can go in here and we can make those changes there's just no
visual editor to its you can kind of read it what the feature is and then you would
change the setting right here so there's some spots where there is colors and you can see
it because it has that color hex codes are right here it's his background color and then
here it is here's the text color the link color the link hold hover color just like
that when we scroll down there's other areas right here where there's all these various
colors so if you had the premium you would have an interface to change these but since
we don't it's okay you would can come in here but you have to be super careful so if I wanted
to change and a color here that there isn't an option in the customizer for instance I
didn't see an option to change the site title color you can highlight this right here and
then paste in the color that you wanted but you have to be careful you see how you have
this' right here and you have an apostrophe in the back and then you have this; you can't
mess those up just change the color code only if you want to change the color of a particular
element that you don't have an option for so right here it's his H one that stands for
header 1H to his header to these are different header styles that you might want to put a
custom color in it right there so that's how you would do it and so there's all these different
elements that have colors you can see them right there and then there's some font options
right here that you can override as well where the premium would normally have it so here's
the size of your headers so it says right here you're heading one the font sizes at
the 40 pixels but if I wanted that small arc with 35 or 30 and you would have options for
heading to three and four so those are some of your font options right there and then
down here we have some spacing options and that is the space between elements and we
can play around with these numbers as well so essentially you just make your change you
would come here and click on update file but like I said if you do something wrong here
you gotta be careful because you could break something so if I wanted to change this 10
right here to make it zero and I accidentally deleted this; it's going to cause some problems
or just just severe to go in here be careful going in there and try not to break anything
so that's the only other technical thing like I said you could avoid the technical hassles
of what I just showed you if you had generate press premium but it's nice to know if you
don't go and get it you still have these options right here and I don't want this to slow you
down you really need to just get this up and going and then over time you can refine it
and then tweak it but don't let a font size is slow you down or the color of something
slow you down and cause you to not create your course that would be so sad if you let
that get in the way and sometimes people do let that get in the way so just go with the
style that I've put together of course change your colors for sure but go with the rest
of the style and then over time as it's starting to be successful that's when you're going
to want to go in there and start refining and tweaking things and I'll try to put out
some more specific videos on this topic right here but nothing you're really in a need to
go back here for is to change some colors and like I said I showed you right here is
those color codes you can see everywhere it has that pinkish is going to have this code
and to go back there and change it to the one that you want see you can see that code
being used in some of these locations are right around here for instance the navigation
text hub hover color that's right I changed it to one of those colorcode seal going here
and you'll just make the change like that and then scroll down click on update file
and you are set to so that's it for customizing edits and customizing them full control over
anything in your new website
For more infomation >> Scuba Diving and Hiking a Live Volcano- Sailing Vessel Delos Ep. 110 - Duration: 21:56. 
For more infomation >> beauty tips urdu | ناخنوں کی خوبصورتی اور لمبے کرنے کے لیے کما ل کا نسخہ | nail tips in urdu - Duration: 1:26. 
For more infomation >> Introducing the voices you don't usually hear from - Duration: 1:50. 
For more infomation >> Offer yard to a homeless family, and Multnomah Co will build you an ADU - Duration: 2:52. 
For more infomation >> sir ki joon ka ilaj in urdu | سر کی جووں سے نجات ہمیشہ کے لئے | hair lice treatment in urdu - Duration: 1:56. 
For more infomation >> The Buffet - Duration: 22:31. 
Không có nhận xét nào:
Đăng nhận xét