 Good morning and welcome to this week's edition of Encompass Live. I am your host, Krista Porter, excuse me, here at the Nebraska Library Commission. Encompass Live is the Commission's weekly webinar series where we cover a variety of topics that may be of interest to libraries. We broadcast the show live every Wednesday morning and at 10 a.m. central time, but in the show is recorded for anyone who is not able to join us on Wednesday, so you can watch it later at your convenience. And I'll show you at the end of today's show where you can access to all of our archives. Both the live show and the recordings are free and open for anyone to watch, so please do share. I spread the word about our show. We'd love to have all sorts of people come on and join us. For those of you not from Nebraska, the Nebraska Library Commission is the state agency for libraries, so similar to your state library, so we provide services and programs to all sorts of libraries in the state, so you will find shows on Encompass Live for all types of libraries, public academic K-12 corrections, museums, archives, etc., etc. Really your only criteria is something to do with libraries. We do book reviews, interviews, many training sessions, demos of services and products, all sorts of things. We bring guest speakers from around the country sometimes to do presentations for us, but we also have Nebraska Library Commission staff that come on and do shows. And that's what we have today. Today is the last Wednesday of the month, which means August is almost over. Sad. Where did it go? It depends on whether you're like your summer or you're looking forward to fall. But anyway, it's the last Wednesday of the month, and that means it is pretty sweet tech day. Last Wednesday every month, Amanda Sweet, our technology innovation librarian here at the Nebraska Library Commission comes on and talks to us about something techy. Good morning, Amanda. Good morning. Yeah, and today we are going to learn WordPress. Well, sweet. Some of WordPress. Yeah, there's a lot of WordPress. There is a lot to WordPress. We use it here at the Library Commission. I know lots of libraries do use it, and so I'm just going to hand it over to you, Amanda, and tell us all about how to work on our WordPress layouts. Cool. So when I do WordPress trainings, I found out that most people, they pretty much like the themes. That's their starting point to get started. But then you want to start getting more customization and doing your own thing with it as you get comfortable. So this WordPress demonstration is going to be about starting completely from the blank page. We're going to have absolutely nothing. And I'll be showing you how to do different things like building out this custom header. We'll use Canva. We'll learn how to do some different images. Like we'll go into Canva, and I'll show you how to get the right sizing and how to get it so it's not horrifically pixelated. I'll show you how to do this little shape divider here so that you have the color blocking that kind of flows from block to block. And you can kind of start replicating this across the page. And I'll also show you how to do these little card layouts on here so that even when you change the size of the screen, it'll start getting responsive. And I'll show you how to also customize those break points so that if your screen looks a little bit wonky when you resize it, you can adjust it and fix it. And that way, when you're viewing across different devices, it just doesn't look all messed up. That's something I think that whole what is it looking at? Everything is really hard to do and also be able to test in all sorts of different places. Yeah. I didn't know there's something you've done behind the scenes already that should account for all of that. It makes things a lot easier. Right. And also I'll show you how to put these little buttons together because these buttons you can find like they are everywhere. And okay. So let me pop back in here. So now again, we are going from complete blank slate. So I'm going to add a new page just from scratch. And excuse me, if my WordPress is taking just a hot miss second to load everything, but we'll get there. And I'm just going to call this class page because I'm going to delete it later. And all you have to do is give it that title. And I installed a plugin that's called element or Elementor. Elementor has a free version and a pro version. I'm using the free version here. And you can also customize it with in a million different ways. But if you don't already have Elementor on your installation, you can go just to your standard plugin, search Elementor and get it loaded in there. If you are a Nebraska libraries on the web library, Elementor is already included in the installation. So you don't have to worry about it. And once Elementor eventually loads here, we'll start, I can give you a quick overview of what that layout looks like and how the block system in Elementor works versus what it looks like traditionally in the Gutenberg editor, which is what you're probably used to in WordPress. Okay. So the first thing that we want to do is you'll notice that in this version, it actually took up the whole section. So the first thing that I usually do when I start from a blank page is I decide whether I actually want the sidebar to show up. And in this case, I don't. I actually wanted to we're going to be making a test home page. So I'm going to get rid of this. And I'm also going to make it so that this test page doesn't display. So I'm going to go down into this little there's a little gear icon of settings in the bottom left hand corner. I'll click on that. And I'm going to click on hide title. So now this is gone. And that just so now this will still look right on the top of the page. It'll still it still has that HTML to be able to pull from and it'll tell people what page they're on. It just won't look fugly and it won't show up there. And then in the page layout, we're going to go to one column, no sidebar and wait for it to load. And once it loads, that little sidebar will be gone. There we go. So now I'm going to click on this plus sign. So this is how our the block editor and Elementor works. The two options you have here are a plus sign to start choosing out your layout. And you can do a right now we're going to do a one column layout. I'll give you if I'll run through most of these just to show you what they look like. But I'm going to hit the plus sign on here. And when you hit this like semi grayed out plus sign, then you'll get your block options that you can actually use inside of your layout. So the first thing I usually try is the image block. And you'll see that by default, this image doesn't actually completely take up the full width. So the first thing I do is for whatever weird reason, the first block on the screen, you can never actually see this little menu up here. But there's actually a little menu like a hidden menu that's up here. If you click this little three dots that's in the middle, you'll get some secondary settings. So I usually change it from boxed setting to full width setting. And that's going to stretch it out so that it'll actually line up with your little header image. So that's why this actually lines up here. If it's boxed, it'll actually be indented just a probably about a quarter inch on each side. And it just looks weird. The world won't end, but it just looks weird. Yeah, a lot of this is just like, you know, making things look neat and like they pay attention to each other. Right? Just a lot of chaos in there, yeah. And if you have like layout OCD, you will love that feature. There's that too, yes. So now the way that you actually get this to be the right to be like the image that you want, we're going to go into Canva. So Canva actually has like a whole lot of different layouts that actually work incredibly well for the web. You just need to know where to look for them. So if you go to and search for banner, if you find an email header banner, a LinkedIn banner, or set a custom size banner, it's usually about the right size for that top header. But the thing that you will run into if you choose certain size banners is that it might stretch and pixelate. So I'm just going to choose this top one. And I'm going to click on this resize button. So this resize button, if you have the free version, it's not going to actually let you resize it from here. But I'm going to, but all I want to know is what size is it. So because this is actually already massive, we can use a massive layout and we can shrink it down. We just can't use a smaller layout and stretch it out because going from small to big is what pixelates and makes your eyes unfocused when you start looking at an image. So I just going to put in whatever weird random text. And I'm going to say test page and delete me please. Then we'll get rid of this because we don't need it. We're just doing a test. I'll shrink her down so that this doesn't look horribly huge. Then I'm going to get rid of this image, go into this little button that says, Pixabay, I'm going to clear out this, wipe out this, wipe out this. And all I'm doing is clicking on a shape on here and hitting the delete key on my keyboard. Click a shape, delete key, click a shape, delete key, click a shape, delete key. And now all I'm going to do is grab one of these images and drag it over. Pretty, right? That's why you see all these amazing little photos. But when you actually see it put together, you're like, oh, the magic is gone. You pulled away the curtain. Right? So now I'll send this and move this back up here. I'm not going to worry too much about what this looks like aesthetically just because it's a test. You just get the idea. So now once this actually looks the way that you want it to look, I'm going to go into this upper right hand corner where it says share. I'll go to download. And then I want to keep this as a PNG. And I can't actually change the size because I'm not using the paid version on here. But I'm going to download it. The commission actually does have the paid version of this, but I wanted to show you using only the free features just because I heard that's the one most people use. And if that's what you have, then yeah. So now this will get mine is set up to go straight to the download folder. So I'm going to go back into Elementor. I'll click on this image that I just set up. Now I'm going to, when I click on it, you'll see this little menu pop open on the left hand side. I'm going to click on the choose image here. Then this is just like loading in any other file. You click an upload file, grab the new one that you just pulled in, which is randomly called dark blue modern discount banner, but okay. And then once this loads in, you'll see on the bottom right hand corner, it'll say insert media. Eventually this button will actually be not grayed out, which means that it's loaded and ready to go. So I'm just waiting for this insert media to not be grayed out anymore. There we go. So now you can see this image is popping in here. And I'm going to go to the image size and go to full so that it actually is taking up that whole space. And you can, there are also some additional options on here. You can send this image over to link to, like if you're inserting an ad for an event that's coming up, you can also link this image over to like the signup form or registration form for the event or like a page with additional information about the event. You get the idea. You're linking an image to a website. So now we want to add more stuff underneath this. So I'll give you the example of how do you do this? So this is just a, this is a three column layout. And I'm going to show you how to do this little icon top with a little header, the description and kind of a little button on this on the underside here. And then I'll show you how to flood this background with color blocking to make distinct sections. And I'm going to pop this over on my side just so I remember what I just told you. And I'm going to go into the plus sign here. And I'm going to choose this three column layout here. And I want to go back into the, now you can see this full little menu. This is actually what I clicked on before. When you hover over it, it'll say edit section. And that's where you can change it from boxed to full width. And then you'll just see these little edge signs stretched out to mesh with this side here. And now I'm going to click on this little plus sign in the box on the left hand side here. And we're going to grab that first little section. And what I want to do is I'm going to search for the word icon. And you're looking for something called icon box. So this is one of the most common things that you'll see on the web, which is, and they just made it steep it easy to do it through Elementor. So I'll click on this little star symbol. We're going to change it to something cool. So Elementor actually uses something called font awesome. Font awesome is a collection of preset icons that you can just grab and go from. So if you were asking people to wake up in the morning and grab a little sun, and then you can, if you don't like that blue color, you can click on this style up here, go to primary color and then change it over to whatever you want. I was aiming for yellow that didn't happen. And so this is just kind of close enough there. And I want that heading to be the exact same color. So I'm going to copy this little hex code here. That's little six digit it's the number that says what it tells the computer what color you want it to be. So I just copied that. And I'm going to go into content now. And the content is what will change this header and the font color down here. So I'm going to go to this color here. And paste it. And now it's the same color. And now we go into the description section, because I want this to be a little bit darker of a gray. And I'm just going to do you there. And now better, right? Just a picture. Yeah, some of the littlest things. Yeah. Right. And so the other question is, Amanda, how do you choose what colors you're going to use? I can't match to save my life. Neither can I. I'm not a graphic designer. I have no clue. Okay, if it weren't for this website, I don't think I could ever I sometimes match my clothes with this website. It's a problem. And that's the thing about this the things that you're showing here. And I just mentioned, I'm not a graphic designer. I do not have the training and a lot of us in libraries are not. It's not right. Yeah. In library school at all. And using Canva and this color's website, it can it can make you you can pretend you might be really good that looks good together and doesn't clash and looks professional. Yeah. I like it. So this is when it when this coolers first loads, just click on start the generator. And what I usually do if I if I don't have a baseline color that I actually need to use, I will hit the spacebar key on my keyboard until I find one color that I like. So if I like this blue, I'll lock it into place by hitting this little lock icon. And then I'll hit the spacebar to refresh until I find more colors that I like. And it will bring up ones that only go with that one. And you can also drag these around. There's a little left and right arrow. So if you want to know what this would look like in order, you can also pull that over. And then you'll hit the spacebar again until you find something a combination that you really like. And so I'll lock that in. And I'm just going to use these as okay. So and the other thing that I want to point out on here is if you look at the colors on here, you'll see that sometimes this will be printed in white font and sometimes this will be printed in black font. So this is so this is actually surprisingly important for when you're doing a layout. And it's because of readability. So coolers is designed to automatically change the color of the font based on what background color is most readable against it. So that's why I started, I do this. This is something I do automatically now, but I realized, hey, I should probably tell you. But so you'll see that I started automatically choosing colors that have the same contrast. So I don't want to actually pair this one with a this black font with a white font because then it's not going to look right. And as it is with choosing these colors, I already have to go back into that Elementor and change the header font color and that icon font color to a lighter white color so that you can actually read it against it. So let me show you what that looks like. I'll use this glaring blue just because it'll be easier to see it. So I'm going to go to this little copy here. There's a little copy hex. I'll click it and now that color will automatically copy. I'm going to go back into Elementor. And now when you hover over this little section that you're working with, you're looking for this little gray section where it says edit column. So when you use edit column, this is going to flood the entire background. If you only, if you click on this little button here where it says edit icon box, you'll have a little thin sliver of white on the outside where it doesn't change. So I hit the edit column and now I'm going to go into style and I want background type. And it'll look like a little a little paintbrush. When you hover over it, it says classic. You'll click on this little color that has like a little slash through it and this is where you're going to paste in your color. So now you can start seeing how that contrast works because I had, I mean, this is a bad example because I forgot I had changed it orange. That's a really already contrasting color. But let me show you what it looks like from the default. So I clicked back in here and I'm going to go into here. If I had actually had it as the traditional black, I'll go into 10, 10, 10. So you can see that you can read it, but it's easier if you have it as white. Huge difference. Yeah. So that's why I always pay attention to this contrast and coolers. If you do that one small thing when you're choosing colors and cooler, it'll save you a lot of time. Yeah. And so now while I'm in here, I'm just going to change everything over to white or white-ish. One little random thing that you may and may not have known about graphic design for websites, it's that most websites don't use pure white and they don't use pure black. They actually use a hair off of it just because of the way that it renders across different screens. I'm sure there's other reasons, but you know. So now you kind of know kind of a better way to start formatting and fix and like setting this up. So the other thing that you can do is when you already have this all set up the way that you want to go, you can go to this edit icon box and you're going to right click it and duplicate. So it'll automatically go over to right below it, which is not what you want to do. So I'm going to hit the control Z, I'll right click and copy and then I'll click into this new space and now I'm going to go into right click and paste. So now this exact formatting just clicked over to here and you can see that you can barely even see the part where it says this is the heading and the little star and that is why we choose color contrasting. So I'll show you what happens when I go in here and I'm going to grab this green color. So I'll go back into the coolers, I hit copy hex, grab the green and now I'm going to click on this little edit column in this new section. I'll go into style, go to background type, we'll click that little paintbrush looking thing that says classic, then I'll hit the color palette square that has little slash through it. Now I'm going to back space over what was in here, put that in and now you can actually see what that looks like and then I'm going to right click on this last little cube, we'll do a paste. So now our little text is back in here and now I'm just going to grab this last little color over here, copy I just grabbed pink because it was there and who doesn't like pink? I'm wearing pink pants right now. Then I'm going to go back into that edit column, we're going to do the exact same thing again, go to style, go to the background type, hit that little paintbrush that says classic, go to this little color swatch that has the little slash through it, then paste it there and you can also go back through here, change your icons to whatever you happen to want change your heading, change your text, to do that all you have to do is click into this little box, if you click on the text you'll look to the left and this is where you'll actually type in your text and if you do wind up clicking over on this side and try to type in here, sometimes it'll accidentally work, more often than not it won't. Accidentally does what you want it, what you think it should do, right? Let's see if it'll, there we go, you know, but it's designed so that you actually type everything into this left hand side instead of the right, but again world won't end if you accidentally type it over here, it wouldn't be the first time I did it. So now I'm going to go back into this edit section up here and I'm going to go to this columns gap, so the columns gap I'm going to switch it to no gap and I'll also shift this one up here, I'll click on that little three dot and then go to no gap and that is actually how you get the blocks to blend together, so that columns gap is what provides automatic spacing between each of the little new different block systems on here and so that is actually how I got it to look like that, so that it actually all smears together. So then the next thing I'll show you is how to do a layout like this where it has those little cards but it doesn't have the flooded background, it just has like that smaller background and has some spacing in between and I'll use a more contrasting color than that gray just so it's easier to see and I'm also going to choose a contrast color like this just so I have fewer steps for changing the color of the font. Traditionally in a layout you would actually use a similar contrast so if you choose to use a white font on a dark background it's better to actually choose an entire web layout that looks like that because if you try it with a mix and match, unless you do it really focused and in the right way when the user opens up that website their eyes will focus in and out so your eye like your eye focuses one way to see light color on a dark background and then it focuses another way to see dark on light so it's possible but I recommend if you're just starting out choose one or the other. Did that make sense the way I said that? The best way to it's why your eyes wig out when you see when you go from light to dark and so now we're going to add in another little three-colomer here and we'll do that so I'm going to add in this little plus sign we're going to grab our three columns and I'm going to grab I'll go to this little edit section up here we're going to go from boxed to full width then I'm going to go over to no gap I'll hit the plus sign here and now we're going to go into I'll use the same icon box and I'm just going to drag and drop this icon box into the section that we wanted to live and now I'm going to go back into the style so that we can actually see what this color looks like and let's use I'll use that darker color and I'm going to go into content heading and and then I'll change that last one to there so now instead of going into so before we went into this edit column box and that is what flooded the entire column now we're going into this little edit box here right click and go to edit icon box and then when you go into the style and so now you'll see that this is actually laid out a little bit differently so we're going to go into advanced and background and that's going to be where our background color lives here so I'm going to go into coolers I'm going to grab this little random orange and we'll go to classic click on this little slash thing backspace that out and so this is what it looks like when you have it as a the white next to the dark so it just doesn't it works but it just doesn't look quite there and so now you'll see that again this flooded so we're going to do the control z to undo it huh well that was interesting we're just going to reset apparently control z doesn't work on that one that's interesting and I'm going to close this out so we'll go back into background go in here well there's another way we can do it so I'm going to show you a different method of putting that together in the same way so I'm going to go back into style and we'll go into there it was an advanced so the advanced and padding so this padding is going to be what adds space on all sides here and now we're also going to add a margin yeah so this is another way that we can add space just because that other setting doesn't seem to be working right now that's good it's interesting they mentioned because that was something that someone was wondering about those um someone asked about those icons on the top in the the blue green and pink they're really they're they're right up close yeah yeah is there a way to make that not it looks like they're kind of padding yeah actually so on those as well using that same oh yeah the advanced and if we add yeah yeah these two I need one yeah and this only takes like 10 seconds um just because I have graphic design OCD I'm gonna just do another last one now I have to yes right yeah so now the other thing is how do you get those little rounded edges on the side we're gonna go into border and border radius and then when you go to I usually do between like 8 and 15 that's what rounded out what that is what rounds it out on the bottom okay so now I'm going to show you the difference between there's a weird weird weird technicality in how this works so I'm gonna hit this little plus sign here and I'm gonna go into button and I'll go to I'll drag a button over here so if I drag a button down here it actually shows up by default right underneath the this section I'm gonna drag another button here so you'll see that when I dragged it over here this background color didn't flood it didn't go behind the button here too and it's because of the way that setting worked so on this one you use the edit column on the left so it actually by default floods whatever gets plopped into that column but when you use this other setting where it just you're you were only editing the icon box you're just flooding the icon box with color and anything else that you put into that column is it won't be affected it's its own thing so that is so if you do want to be able to put a button in there that looks like it actually meshes in together with that column you'll want to use this setting over here otherwise you're in for a world of hurt and then you can still add in go to the advanced and add your padding in to the button so it doesn't look weird and you can also mimic this exact same setting so if you don't want this to be flooded like next to each other you can go back up into this edit column and you can do the exact same thing we did over here go to the advanced add a margin and you can replicate and then you can go into the style and go to border and go to border radius so you'll see that you will looking at these two the these two different blocks my brain goes wonky when I look at it and yours probably will too and it's because whoever put together Elementor didn't put the settings in the same places so you'll see that border radius is in so the border radius for this one is in the advanced section but the border radius for this one is in the style section so basically my rule of thumb is to start by looking in style if the setting you're looking for isn't in style go to advanced and it's probably over there somewhere yeah yeah and this I think this is good that you went through this and like like the thing we just you thought it would do the control z but it didn't that was that what it was yeah there's somewhere you know don't be afraid to look somewhere else for something you might want to do click on something you're not going to break it um and you can always undo anything you've done yeah yeah so you know just you know look in the other areas there's very different various various places you can find ways to do different things and right yeah and there's always a different way to mimic a style at least like when you start learning about it and figuring it out and good times and I'm going to click back up here so now I'll also show you how to do that shape border and I'm going to get rid of this just because well I'll keep it just in case we need to go back to it later I'll click on this little plus sign here we're going to add a new block so we're going to use this one that goes straight across and I'll click on this little plus sign in the center of our new block and now I'm going to go over to a spacer so here is a spacer so a spacer actually is just completely empty air it's dead air and it'll show you how high this is actually set to be it's about 50 pixels high we're going to bump that up to about we'll go about a hundred and I'm going to change this I'll go to the this little edit button the edit section button and I'm going to go from boxed over to full width in the content in the content with section and then I'll go back into the no gap so that it smushes right up and then I'm going to go click back into this section go into advanced it will feel like you are clicking on dead air because I mean you kind of are and so this is going to be one of those moments where you're going to wind up bouncing across two different sections to be able to get this to look the way that you want it to look so the first thing you want to do is change the background color of your dead air so we're going to go to background background type click your little classic button for your color then I'm going to grab this green color here just because we're going to use two heavily contrasting colors I will paste it in here and now we're going to go click back on to this little edit section here and you're going to go into advanced style I lied and we're going to go to shape divider and type so I'm going to just choose any random one we'll go with clouds and I'm going to change the height of it so you can actually see it and I'll go into there fancy so now you can start to see what this will look like oh do you know what I did I clicked on the wrong area and I'm going to choose shape divider bottom and waves brush that is not behaving the way it is supposed to so when in doubt do it again yeah so I'm going to go back into this edit section we'll go back into the full width and I'm going to go into the advanced style there we go now it's going there you can see it yeah yeah so this is actually how I got this to look like this little wave pattern here that goes in between sections yeah that is how I got it to look like that and I'll go to one here so when you look at this little section here you would set your background color of this top section to that blue the background color of this bottom section to be yellow and then your shape divider the background color of your little empty air is going to be this bottom section and the color of your shape divider will be that top blue section they kind of merge into each other and do the transition yep one to another very slick and it's shiny and so these you pretty much already know how to do them but one thing I will show you is kind of a cheat sheet trick if you're doing multiple rows of these at one time and it will save you a lot of time so let's just assume that this is actually looking the way that you had wanted it to look it clearly isn't but we'll just assume that it is and so instead of going instead of clicking on this edit section I'm going to right click on it and you can go to duplicate and it will exact duplicate that right underneath it so that you can do multiple rows and multiple whatever and it's way easier to set it up configure it and do what you need to do and you can even go back through and start just because you duplicated it doesn't mean that you can't change it so you can also still you can change it to the fogliest shade of neon green you want to that's a good way to start it to duplicate that right off to start with yeah yeah it's just a cheat sheet that makes life easier and just because I do indeed have style ocd I'm changing this button color to the white and then the font color over to and there it is so there all the other reason I wanted to go in here was to show that show you that you can also change your font type so you can go into this in most areas that there is text you can go into the style and change your typography so if you remember I said that I would show you how to make it so that headings and paragraphs looked right when you were changing the font size so in the early days of writing websites they only use px the pixels but they added in em so em actually changes your font based on the size of your screen so the default is one em if you want it to look like everything else that's on your page but if you want it to be slightly smaller or slightly larger you can go into like 1.3 or 4 and I'll also change this so that you can actually see the color of the text on here and I will go into color and text color and I'll go to like black and then I'll go back into so we change this I'm going to show you what this looks like in a heading I'll click on this heading and now I'm going to go into style content and typography basically click around until you find the word typography click on the little edit pen and then switch this from pixels over to em and then we'll go into does that look like it's changing at all I don't think so no and if I'm going to go back into typography we'll try this again so there's two reasons this could be happening when you try to change a setting and it doesn't look like it's doing anything at all it's either because wordpress is glitching out in some way shape or form and it'll work next time you load it and open it or two if you've written some overriding CSS that's taking effect before this goes into effect your custom CSS will sometimes override anything that you try to do in your website I have a tendency of doing custom CSS so there is a possibility that that's happening if you are a beginner in wordpress and you have never touched the CSS it's probably wordpress you wouldn't be yeah that would not be because you wouldn't have got that yeah and so I'm going to go in here and so apparently since that setting is not working in that area I am going to delete this we'll add this go to add in a new block I'm going to grab a heading and I'm going to just type in any random thing and now I'm going to go back into change this to a more contrasting color so that it's easier for you guys to see we'll go over to and then I'm going to go back into style and as I said look for it to the word typography wherever it may land click on that little edit button click on the em and by default one should make it not really change at all but when you go up past one one is what should make it look a little bit larger and now I'm going to go into change this to a full width just because by default if you choose a full width layout make everything full width and then you can go over into this responsive mode here and it'll be an icon in the bottom left hand corner of your screen you'll click on it and then you'll be able to choose between different font size different screen sizes and so you can go from the full desktop over to tablet mode and then over into full screen or over into mobile view and when this responsive actually is working you'll actually see the heading size change automatically and so you can go back into this style and we're going to click on this little heading thing we'll go back into typography and then you can change it over here and let's see well that's interesting I'll have to fix that later 10 to 1 it's just a glitch and I'm not even going to have to do anything but this is just a good way to test out and see if you're how it's going to look yeah yeah so the other way that you can start looking at this is if you look in the very upper right hand corner this is actually the pixel screen size break that you can set manually if this actually starts to look weird so if you if you click on this mobile and then you test on three or four different people's phones and you find out that the average mobile screen in your little group is different than the setting in here you can manually change it so you can change that width to like a little bit wider you can change it to smaller and this way you have just more fine-tuned control over what your website looks like on different screen sizes and that's something that's that's I guess you got to go with what's the best you can get because phone sizes are so many different so many people have the big ones the note type ones and now there's a folding one folding ones that will have a whole different kind of view and yeah there is no standard yeah so you're gonna have to be a little forgiving with it's the best we can do yeah yeah and so as a general rule of thumb if you're designing a website and the it's going to be geared toward a class or a group of people that you have that you know then you can survey that class and you can find out the sizes of their own devices and design to the people that you know but if it is going out to like the library commission it goes out anywhere and everywhere we have no idea there's no way we can ever know I usually just leave it in the default mode and design and pray that's pretty much it's all you can do yeah you do the best and so that's like nine times out of ten you're probably not going to need to change it but if you're working for school or for a small group then it's super helpful and so now I'm going to go back into that desktop layout and I will ask if there is anything if there are any like pressing design questions that anyone had or if there's any like feature or function people wanted to see yeah definitely um yeah before we do wrap up it did um just hit 11 a.m central time but that's okay we started a little after 10 and we'll go as long as is needed for Amanda to show what she wants to and if any of you have any questions so if there was anything specific anything specific you were hoping to see how to do here or anything that you're confused about or you want to have her demo something or show something again or clarify something go ahead and type into the question section of your go-to-webber interface and I'm not looking to answer any other questions or show anything else that people might want to see and if you're unable to stick around while we're doing any other last minute things here after 11 o'clock if you only allotted this one hour that's fine we're recording the show as we always do and you can always watch the full recording later when it's available yeah we should be by the end of the day tomorrow and I'll also put in my email just in case people come up with things later on I know a lot of times that does happen mm-hmm and we do I think yes we do and Chris it looks like I only have the option to send out to panelists I don't think I can send to everyone so would you mind putting my email yeah yeah um yeah it's Amanda Sweet at Nebraska.gov which is all of our Amanda Datt yeah which is all of our emails here so yeah I'll send that out here just so you all have that but also I do have it linked if when you're on the session page for today's show if you notice Amanda's name is a hot link if you click on that it goes to a we have these web form type things where you can email to anybody on the commission staff you get their particular link so right from there I also have that and that will go to her as well and I just thought of like 10 of the things that I could show you in WordPress but there's always going to be some yes so we can yeah yeah and as you said you do do training um for our libraries Nebraska Library through the web uh and we could also do another encompass live on some specific aspect of WordPress so we might want to focus on in the future yeah and what I generally recommend if you want to request like a custom training is to kind of look at your website start making a list of the things that you want to be able to know and the things that you know you'll need to change out most frequently and then once you have that list handy then we can jump on the phone and I can kind of give you a demo and I'll also set up a set of um custom tutorials it's not tutorials that I will have made specifically all the time some of them I did some of them I didn't but if it's super generic like you can usually find it on the web and since I know the keyword terms to search for then I can just pop them over to you or I can give you the keywords so that you can find it yourself yeah um we do have a good question just came in a very good one and um I think it's something that comes up has been an ongoing question uh since the internet started um how do you know what pick what are free pictures ah where do you know if you're not using something and this is something you better be do have to be very careful with you do not want to use someone's picture that is copyrighted or restricted in use you want to make sure you're using something if you're not using your own photos that are from like the library or the other city um where can you find things like that so I just went to a website called pixabay um pixabay is it's p i x a b a y and the reason I went to it is because they have a boatload of free what images that are really high quality that you can pull from nine times out of ten for any project that I do I don't have to go beyond pixabay but the other thing that you want to look for is on this right hand side where it says pixabay license where it says free for commercial use no attribution required that is the golden nugget that you are looking for that says I can use this anywhere and I don't have to do anything to do it and so if you look at the creative commons licensing there are different tiers of licensing some of them say you can use it for education purposes only some of them say that you can use it but you have to give me attribution and that's when you get those little blurbs on here that says source or image author however they want you to cite it but this is the golden ticket free for commercial use no attribution required and they don't have to worry about that yeah but if you do find a photo you want to use that it has the difference it says you know attribution you know we do want you to like you know cite that you got this from this particular artist or something then you can use those you just got to make sure you follow whatever those license rules are that that artist has put onto their picture but you don't have to worry about that then just yeah make sure you limit it to that and anything you see it's out there for you to use freely yeah and if you do find like an image through like shutter stock or something that you I guess pixabay is promoting eye stock now but if you see something through eye stock shutter stock and you actually buy an image for like a buck or like two bucks or however much it is then it's yours you can use it right I mean you can do it and pay yes if you want to yeah yeah but I mean if you look at pixabay they have like all the things and up like up splash is the other one that I use and up splash also has the unsplash snippets and nope that was a typo for me up splash there yeah did up splash change to unsplash no I don't know it just rerouted because I typed in up splash then results for up splash huh well whatever it's unsplash now but it is freely usable images and it's basically exactly like pixabay but that one I've used that one before too yeah and were there any other questions that popped in uh no nothing right now no um anybody have any questions right now you want to ask go ahead and type them in um if not you can always reach out to Amanda at any time as she said also this little dude is adorable yeah yeah I've had problems okay these are great websites for looking for photos um but you can get lost yeah yeah where I ended just looking through so many of them and so many of them and it's just like uh and especially since you can use canva as like a meme maker now it's a problem I've meme so many frogs oh and at one at some point I should actually just make a list of the different um templates that work for canva but you can also make your custom size canva image and the custom size canva image is actually what I recommend for the header image that goes up here and for a two column image just so you know that you get the right size but it is 1109 so I guess if there are no other questions I will wrap it out and we can call that a good yeah awesome uh yeah this is great I learned a lot of things that I'm maybe using on some of the pages I work on some of the sites I work on some things I want to test out I know I'm digging into some of those settings so yeah I think we will thank you so much thank you everybody for being here today if you do have any readers and thanks coming through this program is very good thank you so much Amanda so we do have thanks coming so let's see where we are okay I'm going to pull presenter control back to my screen to wrap things up here there we go all right so um thank you everybody as I said um I put Amanda's email into the chat and everything but here is where I was talking about you can click on her name from here it brings you just to a nice web form that you can just go ahead and fill out if you want to or if you didn't want to get her email up here you click here and then in copy and paste that into your own email account if you want to get in touch with her uh the pages we were talking about pixabay.com unsplash.com are um those those two sites there so uh that will wrap it up for today's show um as I said we have recorded the show and it will be here in our archives these are our upcoming shows um it will be in our archives here at the top of the list as I said by the end of the day tomorrow should have everything ready I will email everyone who attended today's show and registered for today's show even if it didn't show up to let you know and then push it out into our various social media we do have a facebook page for Encompass Live where we promote things about here's our upcoming here's the this week's show reminder when our recordings are available we post it up here we also on to twitter and um instagram we have a hashtag and comp live little abbreviation so um you'll see the announcements out there as well as well through through our mailing lists this is our full show archives I had mentioned the beginning of the show we have lots and lots of topics so if you wanted to search our show archives to see if we've done a show on a topic you are interested in uh you can do that uh you can do the full archives are just the most recent 12 months something just current that is because this is our full show archives and I'm not going to scroll the way down if you look over here you'll see this this page is very is huge this goes back to the when Encompass Live first premiered which was January 2009 so we've got over 10 12 years of shows here so just pay attention to the original broadcast date of any shows that you watch some shows will stand the test of time and still be good valid information but some things will become old outdated um the services or resources might have changed drastically or disappeared entirely so just to pay attention if you are watching an old archive Amanda will be back with us on as I said the last ones in the month September 28th for a certain September pre-suite tech do we have a show idea for that one yet putting it on the spot here you don't have to but um or we'll see what that would happen I have a few ideas but I think this one I'll actually reach out to a couple people and see if I might be able to jump on yeah absolutely yeah so yeah keep your eyes open on our schedule to see what her next topic will be um at the end of September uh but next week's oh and I'll also mention here um while we're looking at the schedule here we do not have we will be off on the week of October 5th that is our state annual conference and I always we always take that week off of the show everyone's involved in the conference instead so um there will be no encompass live on October 5th because this is our Nebraska Library Association annual conference and next week we'll talk about retirement time to ease on down ease on down the road Robin Newell who used to be a library in Nebraska is now the executive director of the Emporia Public Library in Kansas and she's going to talk about um how to plan for your retirement if that's something um you are on that end of your library career so please do sign up for that show and any of the other ones we have coming up over September I'm getting my October dates scheduled in here too so um keep an eye on the schedule too to see uh what new shows come up for later in October on that thank you everybody for being here thank you Amanda uh we'll see you in a month on the show in a month I swear I see some of you on our next episodes of Emporia Public Library Conference Live. Bye bye.