Unknown: Um,
okay, just making sure I was you couldget you guys could all hear me. Yeah,
Tracy will interrupt if there's aquestion in the chat that pertains to
something that you'd like me to kind ofgo over, or if you want to need a
particular question on what I'm doingright then and there. Okay, so we are in
the dashboard. I've created a site inlocal, and it's called Build live. So I
used this last time. As you see, thereis an update. So like I said, I'm not
going to update it to the new release,but we'll have some information about
that at the end. So we're going to lookat the page on the front end. And right
now, it's just pretty basic. We have ahome and we have a featured image, okay?
So we can go up and edit the page, andremember, you guys picked this glue last
time, so we're going to use that. Andwhen we ever, whenever we go into edit a
page, we always get a pop up that givesus different patterns that we can use
within our area. And we're going to pickone of those in a little bit, but I just
wanted to show you that I have afeatured image over here, so that's what
was pulling in the front end.
And when I am doing a site, I like tohave multiple multiple tabs open, but
especially a front end tab that I cansee what it actually looks like on the
front end the even though the editor isgetting better, once you get the list
view open and have this view, the viewis distorted so it's it's kind of hard
to figure out sometimes. All right, sofirst question, I'm doing a travel blog.
I need a name for my site. Anyone gotany good kind of travel the world titles
for my my blog? Or my website, want toshare my experiences of traveling the
world, so just put them in the chat forme see I
and as Tracy put in, I'm going to beusing images from the photo directory.
So WordPress has this awesome freephotos, and this is a resource for
everyone to use. And these are great forfiller images. So if you are doing a
design for a client and you don't havetheir photos yet, you can use any photos
from here, and it has the CC zerolicensing, common comment, a Creative
Commons licensing. So those were thelinks of the people that I used, and to
look at those, I've added them to mydashboard. So I go into dashboard, and I
go to media, and I've added the imagesalready to that that I'm going to use.
Okay, the thing that I have done is Ihave resize them, optimize them. So I
did that, and then I also added analternative text, alt text, to them for
accessibility. Okay? And it's good toalso like, if somebody's taking photos,
you know, they usually just get the likelong name, file name that has like
numbers and letters. It's always good toupdate the file name to like what it is,
and then using lowercase and hyphensbetween each word, and that really helps
with then, if you have an issue with it,you can look at it like a checker or
something and find out what image it isthat. It is maybe causing you a problem
or such. So that is always good to kindof rename, kind of all the, you know,
like the prep stuff within and, youknow, making sure that your file size
isn't, like oversized for what you'rewhat you want to do, which is good. All
right, so let's go back to our page. Andlike I said, we're going to got some
names. Let's see what we got. Scrollthrough. Smart Traveler for boomers
travel with us the place that placesI've been, I think, escapes getting lost
with Laura Third Rock Highlights,awesome. Anybody else? Jeanette on the
net? Okay, all right, let's go withPeter's travel boomers.
All right. Thank you, everyone. So we'llstart there. And remember how I said we
were going to add a template. So we cango over to the toggle on the left menu,
and I can go to patterns, and I can lookat all of them. I can look at about and
we can go into pages, portfolio, such,all different kinds. So we're gonna kind
of look to see which one I want to usefor right now, since I'm doing a I'm
want something some variety. I what Iwas playing what round with this one
right here, but it didn't have anythingelse which I could add something else
to. So let's, we'll try this one. Andthat's the fun thing about, you know,
like at this point, like you're kind oftesting out how it looks, so I'm going
to hit save, and then I can look at iton the front end. So right now that
looks like that. Okay, so you know acouple things, is that when you are open
a website, this is the first thing thatyou see, right? And this has to capture
your audience, so it doesn't do muchright now, because it's just a picture.
It's that featured image that's beingpulled from the template, the page
template that I'm using. So I'm like,Oh, that's not good, right? So I want, I
want this, you know, I want my title upthere, at least somehow. So how can I
change this up? So we can do a coupledifferent things. So we'll go back to
web page, and I'm going to open up mymenu and look under the templates, and I
can edit the template, swap thetemplate. So I'm going to look at
swapping the template, because I knowthat there's a template that has a no
title, okay? So it's going to take awaythe title, and I'm going to put the
title in as a heading one instead, anduse that okay, so even though the title
still here, it's not going to show onthe front end. So I'm going to hit save,
I'm going to refresh my page, and therewe go. Okay, so now what I'm going to do
is I'm going to go back and I'm openingup my list view, and in front of the
spacer here, I'm going to do an adbefore. So what I'm going to do is I'm
going to add I can do a couple differentthings. I really love to use groups,
because I kind of started out withlearning with containers, and I kind of
like that each section of your page is acontainer or group. So I like to use
groups, and this is one of those thingsthat it's nice because the group then
allows you to have some more settingsavailable, as opposed to individual
blocks. So we're just going to keep itwith a basic group. Block, and I'm going
to make it full width, okay, and I'mgoing to then I can rename it. So if I
click on the three dots of the groupblock, I can go down to rename. And this
is going to be kind of like you can do.I call it, it's like a cover block, but
cover first, you know, whatever. You canrename it, whatever works best for you
on that. So then I'm going to come overand I'm going to look at my settings and
layout. So my settings right now areokay. So I'm going to go to the Layout
and I can do, can add a backgroundimage, so I'm going to click on that and
the image that I had before. I'm goingto add as my background image. So again,
it doesn't look like much like okay, youwould expect that the whole thing. So
there's a couple settings that you needto do. One is your positioning. So I can
take this little dot and I can move itaround to get like the center of the
picture. And then there's anothersetting you can do, a cover, contain and
tile. Also, we'll come back to that, butI want to come down to this one down
here. Minimum, okay, this is going to behard today, minimum, minimum, there we
go, tight, and I'm going to adjust this.And there we go. Okay, so now I have a
true cover. And yes, you also have thecover block that you can use, but it
doesn't have as many set like displaysettings that you can use. So let's look
at this and look at the differencebetween cover contain and tile. So
contain is within the settings, and thena tile is like an overlap, which is kind
of cool. Okay, and you can do an repeator non repeat. Okay, so that could be a
fun thing to to work on. And then whatdoes the auto do? Let's see. Oh, wow.
Okay, no, don't want that definitely oneauto. Let's see if it's 600 Okay, so a
small number is, yeah, lots of, lots ofrepeats. So we'll go back to basic
cover, and then we want to go in and addour headings. See, it. Forgot to save
it. Oh, there we go. We'll come back.All right. So now we have the heading on
top of it. Now we can do a coupledifferent things. We kind of want it,
you know, not a little bit. But I don'twant it over the trees. And I want to
change it to a Heading One, because Itook away the title, okay? And let's see
what else we want. It full. And I wantto give it some adding, because it's too
far over. So I'm going to come over hereto dimensions and click on padding, and
then I can add, I'm going to just do aleft padding for now, because I did it
off that one side, because I think it'llbe okay. Let's hit save and go over and
refresh. Okay, so want to play with thisa little bit more, and my image is a
little bit off. Kind of looks weird. Soagain, that's why it's important to have
that front end open, because it looksgreat, kind of good here. But
something's up with it going to thefront. And those are those little things
that you kind of have to just play with.I am going to add, I clicked back on my
padding options to do top and bottom. SoI'm going to add a couple of that. Going
to just add top. Let's just add top. SoI just want it away from there. And then
I'm going to add some more to the left.You go, okay. And then I need to click
on my cover to go into. My styles.Remember that minimum height. I guess I
need to make it a little bit bigger.We'll see how that goes, and maybe
adjust that so we'll hit save. We'll goto the front end. There we go. Okay, all
right. So for accessibility, you noticethat it's kind of hard to read some of
the lettering, so if we can get it overto the blue, maybe we can. That would be
good. So if we add some more adding, andthis is where let's try, over here, we
kind of have to go back and forth to seeif it gets there. So it will play around
with that a little bit more.
So it won't let me get all the way. Oh,okay, you know what I need to do? I'm
going to align the tech center, then addthe patch, because then that will be
better. Yeah, it won't give me now itsays 57 Okay, all right, let's see where
that ends up. And then you can alsoclose this too, and close this kind of
so you can kind of see on that end that,hopefully, fingers crossed, that I got
it in the right place. And we'll Therewe go. Okay, little bit more, and get
out of the branches. There we go. Okay,look at that. Awesome. All right. So we
kind of, we have our thing. We need acall to action, right? So we need
something in here to then, why is theperson coming to visit your site? Right?
They can scroll? Yeah, we could do that,and it could just be a blog, but we'd
be, you know, selling a like, how totip. You know, we want to make this a
monetarized thing, or we want to add anewsletter, so we want them to click on
a button to to do that. So we're goingto go back to our Edit page, and I'm
going to open up my list view, andwithin here I'm going to add a
paragraph, so I'm going to add after,and we're going to do some filler text
and have a couple different ones. Ialways like to use cupcake Epson, and
because it's fun, I also found becauseI'm a big Taylor Swift Fan too, Taylor
Swift Ibsen, but I am in North Carolina,and I found Durham Ibsen, which Durham
is another city within North Carolina.So that was kind of fun. So I'm just
gonna It's just bunch of words that haveto do with things around the city. So
I'm gonna take that and only paragraphof filler text, and I'm going to go back
in and add that. And since this is goingon top of a picture, we're going to
going to then add a background so thatwe can see it a little bit better. We
want it kind of opaque. So if we dothat, it's always a fun effect to kind
of just play with the opacity of thatblock to see what we can do with it. I
might want on the gray side, though,because then the see if the lettering
will pop a little bit more. No, let's dothe blue. So I opened up the background
just to reiterate, and I clicked withinthe color, and then I'm playing with
this opacity. There we go, okay, so hitsave, and we'll go here. All right. So
my spacing is a little bit off, so Ikind of want to. Bring that down a
little bit so I can click on theparagraph block and go to two dimensions
add padding for me, I tend to just usepadding. I don't use margins a lot. I
and I try and kind of focus in on, like,is it just the top? You know, are we
just here? I might end up switching it,if, for some reason, I had another thing
here and I wanted it space, but kind oflike just build upon it. And, you know,
different people might do where thepaddings on the top and the bottom and
then have the spacing, but you mightneed more spacing on the top as opposed
to the bottom, so that I like to do eachone specifically with that. The reason
why I do that, oh, you know whathappened? Okay, so see, I put the
spacing in, but it just did the spacingwithin the block. It didn't do the block
between those so let's go back and takethat away. So that time I will, if it's,
if this is just controlling the top andthe bottom, I will just top and bottom.
So then it has it within the text. Sonow we need to do,
let's see. We can do a couple differentthings. We can go back to our cover our
group block, and go into setting,settings, yeah, and there is an option
here for block spacing. So we can kindof block spacing to adjust that and move
that around. All right, so there's that,and then we need our call to action, and
we're going to do an add after, and wecan click up here, and we can do type in
button. And there's a couple differentways that you can, you know, add these
things into it too. There's alsopreviews that you can see the different
by that. Why did it add two buttons?Maybe because I clicked on it twice.
Let's see. I'm going to do an Undo.There we go. Okay, so now we can style
our button to kind of go with dark flow.We're going to center it. And because we
did that block spacing, it might be toofar apart. So we'll have to see. And for
accessibility, we want to, you know, addkind of a little bit more information on
what this button does. Or, you know,like, Why should I, why should the
person click on it? So, if it's for anlike, a newsletter, sign up so you can
put newsletters, and
then we're going to, you know, startplaying around with the button type. So
I see that this has some opacity to it.So we'll go into our styles. And for
some reason, I'm going to make this adark blue and the text white, and I want
the text to be larger. Might be toolarge. All right, so this is too large.
This is too small. So what happens we goto a specific I do like to use the REMS
because of that that it happens to bethe default and it's easier for being
able to on different devices mobileresponsiveness that you don't have to,
like, add extra code for, like, a mobiledevice, it should, then, because of all
the newer updates, look good. So we'lltest that out in a second. So. And I'm
going to make it just a little bitbigger, hit save, and we'll look at this
on the front end. Now my zoom thing isin the way. So I like it when I can see
my header, I can see all of this and thebutton. So like I said, the button is a
little bit smaller. I would kind of likeit up here, so need to do a little bit
adjusting on that, and remember how Iadded in that padding for the cover. So
I'm going to come back here to my listview, come up to my group block and come
over here, and I added that blockspacing, so I need to adjust that, so
we'll see how that looks and refresh.There we go. So I like that, because
then it's all right when that paint,that image loads that people can see
that. All right, let me take a break. Isee that you guys have been chatting a
lot. So is there anything that pertainsto this right here that I can
Speaker 2: answer? There was quite a bitof discussion on the on padding and how
it relates to, uh, responsive devices,okay, and how it shows up and whether or
not you can do things for specificscreen sizes. And the answer to that is,
no, not at this time, not yet, yeah.
Unknown: I mean, a lot of people arejust designing in mobile first, you
know, if, if you feel that you're thecustomers are more or that, and so, you
know, you could just start out inmobile. So here's my mobile. It doesn't
look good in that instance. So there's alot of because of the fact that I moved
that. So that's when I have to kind oflook to see, like, Ooh, okay. Like, how,
how can I adjust this so that it wouldlook good on mobile? And those are those
little things that you kind of just haveto start playing with, then as you're
designing and and take off some ofpadding, or kind of adjust it and, and
sometimes you might have to add a someCSS to it, if it's particular, I don't
know why, because this isn't somethinghas to
Speaker 2: do with with the padding andthe container width and, you know, the
responsive device. And if it comes downto it, you can always go to Custom CSS
within the site editor.
Unknown: But the way I got here was thatI just clicked and did my developer
tools or inspect, depending on whatbrowser you're using, and there's a
little icon down here to get differentdimensions or different devices. So
that's a good this is a good tool fortesting of those devices, if you need
that. This is also a fun tool to playaround and change somebody's existing
website and freak them out totally,because you can make changes there, and
it doesn't affect their thing, anythingelse that.
Yep, Catherine pointed out that thegroup block, they've given it a lot, lot
more power, which is really fun, to makeit more user friendly, to get the things
that you you want. So just kind oflearning the tips and tricks I
Okay. Well, thank you everyone foranswering questions too. I appreciate
that. Are you gonna offer? Oh, are you,will you offer more of these? Or we will
have. One more session, and then we willdefinitely have a lot more coming in the
next couple months. Always look at ourmeetup or new things happening, new
workshops. Okay, we'll give you someinformation at the end of where to find
that information. All right, moving on.Okay. So what do we want next? I'm going
to let you guys decide. Do we wantsomething about you know, what should go
next in our page here. Do we want imagesof of different places? Do we want to
look at how to Create a post that thisis pulling from? I
so we'll look at posts first on how Icreated this, and then we'll see how
it's gonna we'll do one, a third one,and we'll see that it gets pulled into
here. Okay, you're supposed to be likeeight of them that get cold in but we'll
look at that awesome. Okay, I'm going togo back to the dashboard, I'm going to
go to posts, and I can add a new post,and I'm going to go over and set my
Featured Image. Okay, so this is a notitle post. Oh, wait. I'm sorry. It's a
single post template. I'm sorry. I don'tthey added this new feature where, when
you put the title in, it'll pop up overhere. So I'm going to get the feature
image because I want to get the name ofthe city, because, since I'm using
different cities, so use this one. Oh,this is where WordCamp Europe was. And
I'm just going to copy that name for asecond and add that, okay, and that
name will be my title, and I'll get somecake Ibsen, click and generate so do
that. I'm right? And I'll go into, okay,so it doesn't look much now, but then I
publish it. Publish it again. So
sometimes you'll, you'll kind of clicktwice because of the fact that you're
like updating the page, but then you'reupdating the global settings to then.
And then we can go and view the post, soyou see that this would be a post. So
what it is. It's pulling the featuredimage. It has the title. This post has
the date and the author's name. We canI'm going to show you how to categorize
it. And then we have our content, and wehave our comment and we have previous,
okay, so there'll be kind of a previousin future. So to look at, let's go back
into our post, and we'll look at thelist view. And right now, it's just, you
know, with two paragraphs, but what wecan do is take these paragraphs, I'm
going to click on one, and then I'mgoing to hold the Shift key, and I'm
going to click on the other, and thenI'm going to click on the three dots,
and I can group these. So remember howwe said that we have more function style
options with the group. So now I cantake this and I can make it wide width,
or I can make it the full width, and Ican save that. Look at this on the front
end, and.
Okay, did not make it the full width. Sosomething happened. Let's turn that.
There we go. So there's an inner blocksuses content with so because the content
width is like 640 or something, itwasn't letting me so let's try this.
There we go. Now that's too much, right?So we want to maybe add some padding, or
we can go back here and then just changethe content to 700 let's try that.
Okay, a little I wanted to try and makeit a little bit wider.
Let's try this. There we go, so thatthat worked out good. And then the
categories so under post, we're going toclick and gives you a lot of
information, which you this is a newthing too, that I don't remember seeing
the how many words in the read time,which is nice. And there's categories
and tags. So you can click oncategories, make this a little bit
bigger you can see, and we canuncategorize, and we can add a new
category name. So we can do a Europe andhit Enter, okay. And then we can do
another Italy, and hit Enter, all right.And then we can also tag, add tags to
this so we can do a travel. We can do.You know, it'll I think we can do. We
don't want to tag and categorize at thesame time we might be able to, because
when we do searches. All right, let'ssee what that looks like now. All right,
so you see that I've added thosecategories right there, and here are my
tags down here. And you know, you canadd something else, because it kind of
looks weird that there's only two tabs.There's like two words floating in
bubbles here. So like, why that? Butthen this tag would open up a page. If
there was more Italy, okay? Or if I goto travel, it would open up a page of
all my travel. So I that's always fun.But, yeah, I would probably want, like,
the wording tag, tags somehow, becausethat kind of looks weird. What do you
think? So let's look at the templatethat this is coming from. That's always
fun. And we're going to go back to here,and so I'm in the edit the post, and
this is usually the easiest, so I'mgoing to go to the single post, and I'm
just going to click Show post. Showtemplate. Okay, so it brings it up on
the page that I on the post that I'mediting. And what it did was, it's
showing the placeholders. It's includingthe header and the footer. Okay, so
these, if you notice, there's thesepurple, kind of purplish icons. Those
are parts of template, of the template.And so we can, we have a header, we have
the featured image, and in the template,if you wanted to adjust the size of the
featured image, this would be, you know,you could look at that. We have the
title, we have the post meta data, whichthen you could edit. We have the content
block. So remember that the contentblock is just a block that's going to
pull the information from. Them our payour post, and the information there, and
within the content, it's kind of match,mashing up the template with the post.
So within our Italy post, in ourcontent, we have the group, and we have
the the paragraph, and then we have thefooter. Okay? So we can look and see all
the different parts of the template,which is a nice thing to Okay. Now I
assumed that I could adjust the featuredimage, so that's I was going to show,
because sometimes the featured image canbe a little bit too big, but I don't see
that option. So let's go back and go toappearance and go to our editor.
Remember how I said there's always twoor three different ways. So we're going
to go to our templates and we're goingto look at all templates. Okay, so we're
looking over here, and we want the onewith let me do a search, single prompt.
Okay, so we have the header, and then wehave our group,
and within that group we have a featuredimage. There we go. So I want to make
this Featured Image. It's a placeholderright now, but I want to change it the
sizing.
Okay? So it's not giving me options toresize it because I was assuming that
there'd be maybe this sometimes, whenyou click on things, you can take it and
move it, but let's see if this willwork. There we go. Okay, so that's too
big. Okay, squares huge. Oh, let's sayneed to go back down to 100%
wide. There we go.
So let's see if I add my height of, Oh,that's really tiny.
Okay. Oh, yes, I can play around withthe sizes here.
Don't want one
to make that a different size. There wego. So if you want a different format
for all your posts, this would be thetemplate. Would be the place to either
change it, or you could keep the singlepost, and then we go back into
templates, and you could add a brand newtemplate. And what's nice about here is
that when you click on add new template,it will give you a single post item, or
you can do a custom template. Okay, sothose are some things that you kind of
have to think about as you're goingalong. And what would best serve you or
your customer, of if you know, if you'regoing to do a double blog and you're
going to use the same kind of format,it's nice to have that template ahead of
time, or a pattern that you userepeatedly, and set those things up to
work for you. All right, so I'm going togo back and save let's see how this
looks on the front end with the smallerimage. There we go. So
we can kind of. Play around with withdifferent things within there. Let's see
if I can add that. See it says tags. Iwonder, why could I add a four? I
Okay, and then make this and this into agroup. But then I want to change the
group into a over here I can put it intoa row. There we go. Okay, so hopefully
when I come back refresh, there we go.So I can hit have tags, and then I can
have my tags there, and I can style thatto, whoops. Be different. Okay, so those
are those, like little things that youcan adjust within there. All right. How
are we doing? Tracy, we have about 10minutes, so I'm going to kind of stop
there for today. I want to open it upfor questions, and I'm going to stop the
recording.
I'm any questions that we
Speaker 2: need to address most havebeen covered in in the chat that had to
do with editing images and and a way todo that outside of WordPress and.