Speaker 1: All right, so I'm going tostart sharing my screen. Please put any
questions into the chat if you havethem, and Tracy will kind of stop me
along the way. If you need somethingkind of explained or want to look at it
also, please let me know about like,zooming in, if I need to zoom in a
little bit clearer, so that you can seestuff.
Okay. So Jean's question had to do withlike, how do you get started? Where do
you kind of what comes first, you know,it's like the chicken or the egg kind of
thing. And can we make sure thateveryone's muted too, please. Tracy at
this time, thanks. So I'm going to sharemy screen.
So can everyone see Publisher,Microsoft Publisher. It says header on
it. Give me a thumbs up if you do. Okay,thank you. All right. So I like to
doodle and stuff. So usually I'll take apiece of paper and kind of just draw out
stuff. So you like, met with the client,you have talked about some ideas they
might you know, you did. You had them doa little bit of homework of like, what,
what you what they like, what theydon't. Most websites have a basic format
or a template, as we, you know, we'regoing to use that word a lot, and so
what I did was I went into my MicrosoftPublisher, is something online that is
easy to add blocks, right? Becauseeverything is a is kind of blocks,
containers, groups, those words are someother things that we put in. So, you
know, we have a header at the top. Wemight have an image that will have that
h1 heading. There might be some morewording within that picture, image that
I have as a background. And then we, youknow, we might have different groups or
sections of the about, either about thebusiness, the services that it provides,
or if it's a like my website designbusiness, it's about me, a little bit
about my background, things like that, asection for testimonials. So you know,
people like to see that. That might be asection that your client would like to
see. And you're building these blocks sothat then you can take that and start
creating these, and then you have thefooter at the bottom. So, you know, this
is a very basic template of that,another one that I've started using is
figma, and I use the free version, okay?And got a copy of the 2023 theme. I
don't remember how I got it, so I can'tlink it, but I'll see if I can find it
later and link it within the meetupcomments. And this is another way that
you can kind of the next step, you know,or if you are this, a kind of designer
that likes this kind of tool to use, youcan create your homepage, okay, and then
you can set it up to look exactly likeit's going to look, you know, kind of
thing. And you can pull this over. So wewe have the site logo, we have the
navigation, we have this image, thenwe'll have our headings. This one is a
blog post. So then it's pulling in thedifferent blogs with a query loop. And
then you have your footer down here. Andthen this also allows you to, you know,
then you can go into deeper, of gettinginto whoops, the different pages. So you
could do a template for all the singlepost. You could do how a blog archive
page would look. So when you write abunch of post, then all those posts have
to have somewhere to kind of live. Andthis is a nice blog post, and I move
that in the wrong place, so this is justanother tool that I would use to set
that up.
Another thing I wanted to show was kindof inspiration, like, where do I get?
Like, new ideas and stuff do. Well,right now, WordPress is going through a
update on our wordpress.org and there'sa new section that we kind of started
last word I think it was around WordCampus last year, called Showcase. And we're
asking companies to showcase theirwebsites that are being hosted or being
used, that were that use wordpress.orgso this is another great resource to get
some inspiration for maybe something alittle bit different. And you know, you
can say to your clients, you know, well,you know, the Ray Charles video Museum
is using wordpress.org, and, you know,because you might have different
clients, the Rolling Stone mat, youknow, publication is using WordPress,
and to just look at how they are usingit to get some inspiration of maybe
changing it up a little bit, anddepending on the services that your
clients using, and it's, you know,that's the fun thing about this
community, is that we're willing toshare things, and in looking at other
people's themes and seeing how theywork, you know, taking a using a Local
Site and downloading one of the freethemes and looking at that to see, oh,
how did they do that? And, excuse me,being able to take that information and
then bring it to your clients as maybe anew feature for them. Okay, any
questions? Tracy,
Speaker 2: yeah, we have a have to goback up to it. No problem. There it is
from Julia. There's what do we open tostart with? When I open default 2024 a
business page opens.
Speaker 1: Okay, we haven't gotten thereyet. Julia, so yeah, we're still kind of
in the kind of free planning stages ofmeeting with a client deciding on, you
know, like, what their colors are. Youknow, if you're going to be doing the
branding, that's like a whole notheraspect of it, getting their colors and
stuff like that. Was there anything elseright now pertaining about, okay, so
we'll get to Julius in a in a littlebit.
Okay, another thing that I wanted totalk about was colors. So I'm a big
color person. I have another backgroundof mine is interior design and set and
lighting design for the theater. So Ireally love different color
combinations. So coolers is a site thatI use, and I use the free version, so
some of the tools aren't available, butit's nice to use this. I might use
Canva. I'll go into Pinterest and lookfor different color combinations that,
and just being able to get the hex codesto those and bring those to the client.
Is really beneficial. Of you know, doyou want this pink, or do you want this
pink? And kind of what works for them,but I would never show one thing is to
for your client, is beneficial. Narrowit down. Don't show them in this whole
page. Don't show them 10 differentvariations. Bring it down to three,
because it's going to overwhelm them. Ifyou show them too many options, you can
always change those options, but kind ofkeep it at like three is a good thing,
because you can do like a light a darkversion, and then maybe a medium tones
with that, if they're still not sure,and if you want to narrow it down. So I
always find from my days of teachingkids was, you know, narrow it down to
three choices, because it overwhelmsthem otherwise. All right, so, yeah, so
that's the basics of of that, of gettingthat all started and and just having
that open conversation with the with theclient of like, kind of, what do they
want and how do they want to see it? AndI'm going to stop sharing for a minute
because I forgot to open my local site,but give me a second here. So I'm using
local today. Um. We are. WordPress justlaunched the playground, and I was
playing with it yesterday, and I didn'tfeel as comfortable with it because of
the fact that I needed to be able tosave what I was going to be building,
and I was a little confused about it. SoI need a little bit more work on that
aspect of it, but it's a fun tool to beable to use to test different things on
a live site. Okay? And I forgot to shootdo that link, so let me get that link
for a second.
But the playground will take you rightto a WordPress dashboard, which is
really cool, and you guys put that inthe but I am using local, and local is
just a way to open up a site on mybrowser, and be able to see that. So
let's share this and make sure and makesure I have the site open. We have too
many windows right close a couple ofthese windows. Get rid of this. Okay,
here we go. We are good to go.
All right, so going to was it, was aJuliana Julia question about, we've,
I've created a site, and through throughlocal and that's a whole different
lesson. So please look at Learnwordpress.org for that kind of
information. So we have our dashboard,and what we want to do is if we open up
the site on the front end. So we're thedashboards in the back end. We see this.
And what this is, is just a basic viewof a blog home page. Okay, so this is
just to give you an idea of a way to go.You could take this and go ahead and
edit it, and you would have a siterunning. But to go back to, and this was
really confusing when they started doingthe block themes, is that the difference
between a template and a page, okay, oror or a post.
So we'll go back into the dashboard, andwe'll go down to appearances, okay? And
we are in the 2024, theme, okay? So Ijust want to make that clear now we're
going to go under appearances, down tothe editor for this, okay? And you have
different is under design, you have thenavigation, styles, pages, templates and
patterns and what from when we met withour client, you know, we're just going
to give them a homepage for right now,and we'll look at maybe in the next
session or the third session, addingsome different pages and stuff. So one
page and we want to create thathomepage. So there's two different
there's a couple different ways to dothat, and that's the confusing part of
it. So I want to kind of go back to whatmost people would understand is coming
back to the dashboard and going to thepages, okay, and then add a new page,
and we're going to create the we have.We can do different. We can pick one of
the patterns, or we can just leave itplain for now. So I'm just going to
leave it plain for now, just to show youwhat this is going to because there's
another. Depth that needs to beinvolved. So we want to create the home,
okay? And we're going to give it atitle, and I'm going to come over here,
and right now I need to publish, so seethis blue button up here. We'll need to
publish this and public. Click on thatagain. Okay, so now we have this, but if
you go to the front end, all you see is,is home. There's nothing else on it,
okay. But now if we do here, if we clickhere, this is still on it, that blog
home. So we have to do one more step.We'll need to go back into the back end.
So we're going to go back to ourdashboard, and we're going to go to
settings and over to General andwriting, reading, yes, reading. So we're
in the reading settings, and you have togo to because your last latest post that
blog home was the default. So we want toswitch it to a static page, and then our
home page is going to be that new homepage that we created. Okay? So you can't
do this step until you've created thatpage that you want for your home. We
don't have a post page right now, sowe're just going to leave that sure that
you click and hit the Save Changes.That's always important. I always forget
sometimes forget that. So now, if we goback and visit our site, we're going to
open up a new link. So now our home pageis with the right URL. Okay, I'm going
to close a couple of these otherwindows. So now I want to show you that
I can take my home page and adddifferent templates. So let's go back to
that homepage, and I'm going to justopen that here and over on the right
side, when you open up this toolbarhere, so up here there's a settings, and
then we have template, okay, so rightnow, it's pulling the default template
of pages, and we can look at that in asecond. But we also have this we can
edit the template, we can swap thetemplate, we can create a new template,
okay, so what is this template, right?So let's go in, and we're going to go
back over to here, and we're going to goto the appearance and remember, we were
in that editor, and you saw that Wordtemplates. So I'm going to click on the
templates. Now, this theme comes withpre loaded templates, okay? And then
there's even a couple of custom ones,because I really like this page no
title, because I want to be able to addmy header heading one instead of using
the the title that I don't have a lot ofcontrol over so here is our pages
template. So let's click on that, andthis gives us a preview of what that
page template looks like. Okay, so whatdoes that mean? So let's click on here.
We can also click on here, and this iskind of the overall so we don't really
we want to decide if this is how we wantour pages to look. Okay, do we want all
our pages to look this way? Do we want atitle at the top? Do we want to head a
header at the top, I'm sorry. And thendo we want a title? Do we want a
featured image? And then do we want thecontent and the footer? So first of all,
you want to start with your pagetemplates, okay, and look at how they're
going to be set up. So, like I said, Iwanted to be able to not have the this
title here. I wanted to be able to so ifI open up this group block, so this
group block entails a lot. Because thisis the main content, and when we open
this group up, We have a spacer at thetop and then we have the title. Okay,
and then we have another spacer, andthen we we're pulling a featured image.
So, and then we have this block that'slocked because of the fact that it's
going to pull the content from that homepage, any page that we make like a home
an about page. When we make that pageand we look at it on the front end,
it'll have all the same format, andwithin this block that's where all our
information. We don't put theinformation here. We just leave this
block by itself. So it's kind of magicalsometimes.
So if I wanted to maybe take my featureimage and I wanted it above my title so
I could do something like that, okay,and then I would save and save, okay, so
now let me go back to my that home page.I come back out to my dashboard and go
to my home page because we want to add afeatured image, don't we, because I want
to be able to see what that's look like.So we're going to do that, and we're
going to insert our featured image. Andalways make sure when you do feature
when you do images to add an alt text,alt text is just a simple, simple
explanation of what is in the picture,even if it's a decorative image, it's
always nice for somebody that might havepartial vision to be able to see it.
And I think it makes the experience evenof a person without sight, that when
they see that, having an explanation ofwhat the picture is is so important. All
right, so we've put the featured imagehere. So now we're going to click the
Update, and now we're going to look atthat page on the front end. So now we
see that, remember our template, we hadmoved that image above the title, okay?
So if that's how we want our page, ourpages to look moving forward, that's
what's going to be okay.How are we doingwith questions?
Speaker 2: Doing fine. So far, just acomment that the alt text is is great
for both SEO and accessibility.
Speaker 1: Yeah,
Speaker 2: Screen readers read the alttext, since they can't really say what
the picture.
Speaker 1: Yeah, so, all right, now I'mgoing to do a I had one more question.
Let me take a look at this real quick.
So Mark his question was, I keep hearingabout the site editing, and have used
the block editor, but I'm still confusedabout how to do site wide editing using
the block editor. Okay, so let's go backto this. So under appearances, so we've
met with the client. We kind of havesome colors. We might have a font that
they want to use, and so those arethings that are going to be across the
website, right? So we can set thoseinstead of having to do them for each
page, we can do it site wide. So we'regoing to go to appearance and we're
going to go to the editor, and underthis design, we're going to go to
styles. Okay? And so here's a questionfor everyone to answer, which of our
style combinations will we be using wecan't use the default. Is it Ember, ice,
fossil, Maelstrom, mint, rust or Onyx?Can you add your favorite to the chat?
Please do.
All right, we got two for Onyx. Onyx isin the lead. Three for Onyx. We're we're
just playing, I mean it. I'm just tryingto get it, make it more interactive for
everyone. Yeah, you would? You? Couldoffer a couple of these to your client,
if you know, you know that they like theoranges or the blues, and you, you know,
start there to make it easier foryourself to start, start with that. And
then there's always ways to edit thepallets too, which is really cool. Oh, I
think Maelstrum might be in the league.I think Onyx has won. I
Yeah, and then remember that this, youknow, this isn't going to be the final
copy, too. And if, like, if they'reworking with somebody who's like, doing,
like a graphic designer who's doingtheir branding, this is a great
placeholder to do, you know, like, whenwe did projects a sloppy copy, right? So
at least this gives you some kind ofcolor within there to start with, and if
you are, you know, testing things andplaying around with different things on
your own to learn how they work. That'sanother thing you can also, you know,
later on, as you get comfortable, youcan add your own palette of colors and
remove all of these, especially ifyou're going to give it to a company
that they're going to be doing blogposts or something like that, you don't
want to give them all of these options.So there, there's a, you know, there's a
way, as you get more comfortable, toremove all of these and just have their
colors that they can only see.
All right, let's go with the Maelstromthen. So we clicked on that, and we're
going to save that now up here, there isa eye icon called the style book, and
then there's the Edit style. So eitherway, you can go and click on that, you
can also click over here. So like Isaid, there's a lot of different ways to
do things on in you just have to findwhat's comfortable for you. So what we
have is up in the right hand corner, wehave a half moon icon, and we're going
to click on that. And this is our globalstyle setting, okay, so what we want to
do is to add our colors. Now, here'sanother way that we could look at those
same styles and pick them from here. Sothat's the brow styles.
And now we can look at typography. Sothis theme comes with a couple of fonts.
Okay, these are the defaults, and wealso have this icon here the Manage
fonts, where you can add fonts, and thishas become really easy. So we can do two
different things, we can upload or wecan install. Today, I'm just going to do
install, because this is connecting toGoogle fonts, and a majority of people
use Google fonts, and it's the easiestfor right now. So I'm going to add, I
like, I'm an Open Sans person. I likeOpen Sans so I clicked on the font that
I liked. Okay? And this is, again, doinga little bit of research on what kind of
fonts your client would like give them acouple of choices. Most websites you
only really need to you need, like, aheader and then a text one so your
heading one could be, you know, maybe alittle bit on the fancier side. And then
your text, since it's going to besmaller, should be, you know, a little
bit more readable, especially with itbeing on the smaller but preferably for
accessibility, it's recommended to go nosmaller than 14 pixels for text. Now, we
can pick different um. Uh, weights andstyling. I don't need all of them, do I?
So if I'm going to use my Open Sans formy text, okay, what kind of text am I
going to need? I'm going to need kind ofa basic one, and I can go with a 400 or
five, you know, 500 I might want to boldright, because I might want to pop some
words, and maybe I want to, like oneitalics size, so I'm just going to click
the ones that I really need, becausethen this is another way that we could
help save our database from blogging uptoo much with extra stuff that we don't
really need. So I'm going to just clicka couple of these, and you can always go
back if you find that, oh gosh, you knowI really needed a bold italic. So you
can always go back and add it later, butstart with the minimum and see how that
goes. So now that I clicked on that, sonow I have installed fonts All right.
Again, we do have a lesson aboutuploading different fonts. It takes a
little bit more step step wise to dodifferent that. So please look for that
video within learn, wordpress.org forthat. How are we on? Questions?
Speaker 2: Yeah, that that was the onecomment I was going to make. One person
asked whether or not they could ask averbal question.
Speaker 3: right, right. So can I beheard? I don't know, yeah.
Speaker 1: Can you wait till, till I'mfinished, first we'll open the floor up.
Okay? Thank you. Thank you. All right,so global styles, we're setting up our
fonts. Okay, so now we have thesedifferent fonts that we can choose from.
And again, you can open this into thatlibrary, and if, for some reason, you
don't want to use the default, you cango in and get rid of them. Okay, and as
you get into finishing up your clientsite, that's something that you would
want to do, because your client's notgoing to use these, right? So remove any
unnecessary things within there. Now youwant to go in and look at the different
text elements. So we have our text. I'msorry, links, headings and captions. So
I'm just going to look at one or two ofthese. And so we have our basic text.
And so I want to change that to I'mgoing to do the cardio is the default.
So I'm just going to keep that as thedefault. So I can either do cardio or I
can hit hit the default. Now, theheading I said that I wanted open
source, Open Sans, so I'm going to dothat. You can even get as detailed as
different headings for different solike, if I wanted an h1 to maybe be on
the bold, but then my h2 I would ratherhave it be open sands and just the
regular or medium. This is where you cando that. I wouldn't get as like
detailed, and do like every single one,but and then click to make sure that you
save because then you get anotherwindow. So it's almost like, like two
saves. So you're saving the the updatethat you made, but then you're also
saving the global style. So you see thatthe custom style, the Heading One and
Two was changed, so I double checked onthat, all right? And then we have, I'm
going to do captions because I have thatitalic, so I'm going to click on that
Open Sans, and I want to do the theitalic for that. Okay, so those are the
things that you can kind of set upbeforehand. There's also an option to do
the font for buttons. So if you wantedto pick one of these for the buttons in
that so I'm going to go. Back out.
Thank you everyone for the questions. Iknow that people are answering them in
the comments too, so that is veryhelpful, too. And then you also have
your colors. So remember, we picked thisand this palette, and it has five
colors. So say that you wanted to haveone of the colors you didn't you didn't
like. Okay, so maybe this, thisbackground was like, too dark. So what
we can do is we can go in and changethat to a lighter blue, so see how
that's changing. And we don't want to gogray, though, there we go. We want to
lighter blue. So I can change that. Ican also click on these three dots for
color options and show details. So thisis really fun, and especially if you are
doing a client site where you're pickingthe colors, knowing this information
about the theme that you're using isimportant. Different themes have
different ways of labeling their colors.So some will have more colors. Some will
and different palettes too. There'sthere's some palettes that might have
more colors and stuff. So knowing howit's named is important too. So I kind
of took a look, I took, take a littlegraph, and I put the names next to it,
and then I put my my hex codes so I knowthat base is this hex code, base two is
this hex code, and I know which. Andthen I like, Okay, what is base used
for? Bases used for the background ofthis. What else is that base color used
for? Is it used as a button? Color? Isit used for, you know, can I use it as a
font? So knowing what those specificthings are for is, is helps a lot. Okay,
we can so add a custom color if wewanted to do, you know, an extra color
there, we can add some custom colors.You can even do, you can remove all the
custom colors, and we can add differentopacities to those colors too.
Thank you again, everyone for coming,and thank you to all of my experts
within the field that have helped answerquestions for people, and we'll see you
next week. Okay, thank you
To view more learning materials, pleasevisit learn.wordpress.org