Editing a Page

This transcript document is associated with the fourth video, "Editing A Page", in the Using Omni CMS Udemy course.

So now let's look at how you edit a web page in Omni. And I have an example page here pulled up. I'm going to go ahead and make sure I check it in. So making sure that light bulb turns yellow. So now it says checked in. I'm going to go over here to properties. We can see a few fields here. These fields are often shown whenever you create a document, but this is how you can edit them after the fact. So we have the title attribute here. We can see in, I have that same page open over here. We can see in the browser tab, it says training might be kind of hard to see on the video. But I'm going to update that to have just my name, just as an example. If I wanted to, here's also where I can update the author, keywords, and description for the page. So kind of just metadata about the page, who has written it. You probably still need to keep State of Texas and Texas Tech University there. But adding your departmental name or your program's name, maybe not your name specifically, because you are not always the owner of this page. You could win the lottery tomorrow and you're no longer working with us. Keywords, so what would someone be Google searching for to find this page and description just kind of summarizing what the content is on the page. I'm going to keep those blank and just update the title with my name. I'm going to make the heading also have my name there, just to put that on there. So whenever you create the page, you get prompted that once and it updates both. But the main heading is technically what this heading is, the heading one on the page. So we have a title attribute, which is in the browser tab and the main heading is the heading one on the page. So we're going to go ahead and update that. Now we're going to talk about these other tools in here. If you wanted to have your page be behind your eRaider and once you go through the other steps to have eRaider, you could say use eRaider and then link to your include file. You have the option of turning on a right sidebar if you would want. The banner can give you some call to action links on the bottom, but I'm going to keep all those off because you're not really in the scope of what we have and I'll hit save. We can see here parameters were saved. I just saved, so it updated the file in Omni. I haven't published yet, so the web page is still the same. I'm also going to go to properties and go to this multi-edit content. Here we have a box where we can add in any JavaScript, CSS, those kinds of custom code that would get added to the head of the page. If you need to do that stuff, if you don't have source code access, you can enter that in here.

I do have source code access. I often write pages just in HTML, so it's just something I'm comfortable doing. If you had source code or if you want source code access and you don't already have it, you reach out to IT Team Web, we can Grant you source code access. We just don't do it by default because we know most of our users aren't comfortable writing straight HTML, JavaScript, CSS, so we just give people the visual editor access. But if you are comfortable with coding, you can request source code access and we can give that to you.

But we're going to do everything from this edit menu. We have this green edit button here, so we go ahead and click that. We have a few things here that you can see. We can see now the editable region is where our content is on the page. The toolbar here probably doesn't look too different from other like WYSIWYG rich text toolbars that you've had, somewhat similar to what you would find in Microsoft Word or Outlook or other tools. We have buttons to save the document, exit without saving, revert to previous draft, cut, copy, and paste. You have a find and replace tool in here. If you wanted to do find and replace search stuff, if you know a staff member has been replaced with someone else, you could find one staff member's name and replace it with the new one, that kind of thing. Undo and redo changes. You have a spell checker here, which you have to toggle on to review any issues on the page. The next button here is clear text formatting. If you're pasting text in from a Word or Outlook, it probably comes with some formatting with it. It's not a bad idea to select it all and clear the formatting just to strip it down to just raw text so you can do whatever styles with it here that you would want. Bolding, underlining, or bolding and italicizing. You have bulleted list and numbered list. Numbered lists work better whenever it's like a step one, step two, step three, step four. If there's some ordinal value there where it's one thing and then the next thing, that's when a numbered list is best. If you don't have an ordinal value, numbered list might also be better for anything that's like a policy where it's like as per item one, bullet B or something like that. A numbered list would be easier to reference specific items where a bulleted list would just put a little symbol there and you wouldn't have that numerical reference. So keep that in mind about which one you would use. You have left and right or increasing and decreasing indents. Super script and subscript tools if you need those. Left, center, right alignment tools. Things to insert links. Then a few extra things on the bottom, editing styles, inserting images, showing source code and some other things we'll get into. So lots of things here that we can look at.

But let's go ahead and start editing our page. We see here this first bit of text, there's obviously some spelling mistakes in there. So I'm just going to select that text and edit it just like you would editing text and anything else. Notice where my cursor is in here. This box here says heading two and Here in the bottom left corner where it says path, you can see now it says H2. So that also says heading two. That's how the HTML version of the heading two. So this is a second level heading. If you watch the accessibility video on text, you want your content broken down almost as like an outline. So a heading two, this is like a main subject region of the page is this "Build a Website". This paragraph looks fine. In fact, we select it. We can see this as paragraph. This path says P. So we have a paragraph going on here. The next thing we have is this web account types. It's a paragraph and the B is selected here. So it's bolded in the path. You can see P and strong. So it's a bolded paragraph there as again as well. Think back again to our talk about the text accessibility. Visually, we're having this be a heading. It's a small bit of text that we've made bigger and bolder that describes the text below it. All of those are characteristics of a heading. But programmatically, we haven't defined this as being a heading. So let's go ahead and do that. So I'm going to select the text and change it to I'm going to say a heading three because it feels like it's a subsection of this build a website area. So we're going to make it be a heading three. We can see here for bold is still applied. So we still have a strong tag. You could remove it if you want it. It doesn't really matter that much because the heading three style already applies a bold status.

Scrolling down a bit further, we see, OK, we have a list here. Let's take a look at it. My web personal web page, student organization, web account, mailing list account, department web account, Omni Update, OU campus. None of those feel like that doesn't feel like a step one step to step three. There doesn't seem to be any ordinal value there. It doesn't seem like it's anything we want to use the numbers by reference. So I'm going to change it to a bulleted list. So I just selected everything there and I'm going to select bullet list. And now we can see the list style has changed. Clicking in on one of these, we see the path. It's a UL or unordered list and LI list item. So this is a list item of an unordered list. We can kind of describe or see what that is there. So kind of backhand teaching some HTML basics.Scrolling down a little bit, we see we have another heading two. That's just fine. We see this "web specific short courses include". Again, it's a bolded paragraph. I'm going to select that and make it be a heading three. And now we've changed that style a little bit. And then this last thing, it's a bulleted list. That seems like it's just fine.

Like I said in earlier videos, you don't have to do all of your edits in one pass. I've done quite a few things right now. I want to publish this and make sure it looks OK. So I'm going to go ahead and hit publish. Which is going to prop the save menu. I'm going to save it. We can see it is saved. I didn't get an extra window. I think it's often like the first time you do this, you're not going to get the publish window. But since I didn't get it, I'm going to hit publish again. And now I can see the publish window. So the one thing to note on here is this version description field. This is entirely for you and your staff. This is not something that we require by any stretch. It's really so you can know what edit was made, when you made it, possibly how, why you made it. You know, I've kind of been in departments before where someone may ask why a change was made. And so it's nice to have breadcrumbs of these changes were made as per email from this person received on whatever date, like that kind of thing, to leave those kind of breadcrumbs. Here I'm going to say updated some headings. Fixed a spelling mistake and changed a list style. It generally describes what we did. Now I'm going to go ahead and hit publish. We can see now we have we got a pop up to open the page in a new window. So you can click that. I already had it open over here. We'll just close that out. And so now we can see the main heading changed to my name. The title text under browser tab changed to that as well. Our spelling mistake in the heading two was fixed. That's now a heading three. The style is a little bit different. We have this as a bulleted list and this is now a heading three. So everything that we just applied to the page has happened now. So we've kind of got things moving a little bit.

I'm going to go back to our page and hit edit. We got a couple more things we can do to this page. I'm going to go ahead and insert a link. So I'm just going to select some text on the page for here. I'm going to do the Texas Tech University and select the insert link. You can insert the URL directly into this field. So whatever link you're sending users off to you can type in, you know, ttu.edu. You can type in that URL directly. That works fine. If you're linking within your site, it's often better if you use. the like URL browsing, the file picker button that's next to the URL field. So I'm going to click on that. And now I can see a file explorer of the site. I'm just going to pick some random other page on the site. Here I'll click the home page. Why not? And hit insert. Now we can see it's kind of put an internal key here, but like two curly brackets, F colon, and then some numbers. that is used kind of as an internal reference to the file that I am linking to. It's helpful in Omni because Omni has some tools where you can see like what pages a certain page links to or what other pages are linking to a different page. It kind of builds this kind of connection so you can kind of see that tree a bit better. It also helps if this index page got renamed or moved, you would get some kind of alert saying like, "Hey, it's going to invalidate links on these other pages that also would need to be updated." So it kind of helps protect you a bit if you build those off of internal links. So it's always a good practice to use based on that file picker. Text to display. I'm kind of doing a bit wonky here since I'm just linking to basically a random page. Your display text should always reference kind of the title of the page that you're sending a user off to. It should be descriptive of what that page is talking about. It shouldn't just be click here or read more. It should be something descriptive of what that information is that's on the page you're sending a user to. You can keep the title blank. You would want to have the link open in the current window because again, with accessibility, it's better for user choice to have links open in the context that you are sending them in. If you have to have a link open in a new window for some reason, adding something like "opens in a new window" to the link text is helpful for your users. Just to say, "Hey, something else is going to happen when you click this link.". There's also some classes you can apply. So the external icon I like to use whenever you're sending someone away from Texas Tech University. So it just says, "Hey, you're about to go to a website that's not controlled by the university. Kind of venture at your own risk." kind of thing. The mail icon puts a little letter icon next to it. I often use that for emails. So you wouldn't use it in this link dialogue. You'd probably use an email link one. PDF icon puts a little PDF symbol. And the button style styles the link as a button. So it makes it look a little bit different. It might be a little bit better for more call to action type. links, that aren't in like a paragraph of text. We're going to keep it not set. If you want to put a custom class, you can set it to custom and apply your own class there, but we'll keep it not set and go ahead and hit save. And now we can see we have a link here that we can reference. Kind of the same thing with email. If I just wanted to select something random. and go to the email, very much the same thing. We have the address you want to send the user to, the subject line of the email, and you can have those classes. You'd probably want to select the mail class, but you could do custom if you wanted, if you had your own styles going on.

I'm also going to insert an image. I'm just going to find a random spot on the page. Kind of from this point on, the page is going to make less and less sense. I'm going to use the image picker. Again, you could put in the full URL to your image, but it's likely better to use the image picker button next to it to go find the source. I'm going to click on that, go to images, going to find a picture of a cat. You do have an image editor here, so you can click on that and edit the image if you would want. You can crop things down if you would want. Actually, we'll crop that down to a one-to-one. Hit save. Looks like for some reason it didn't. Oh. apply crop. Boom. There we go. Now we can hit save. This image editor has some basic tools you can resize in here. We often have access to really high-quality images. You don't need to have anything super massive on a website unless you really are trying to show off some detail. Something around 500 or 1000 pixels is probably more than enough for all that's going to be displayed to a user, so keep that in mind. You can make things a lot smaller. The benefit there, the smaller the image, the quicker your page is going to load. Also, the more Internet connections that the page is going to work for. If you have someone that lives way out in the middle of nowhere, if it has maybe a bad Internet connection, maybe they only have a cellular connection, having smaller images, smaller web pages, it's less data for them to pull in when they're loading your site. That's all good. Resizing tools, cropping tools like I just applied, zooming in and out on the image, those kinds of things you can do. Go ahead and hit save there. I probably need to also go to this image and hit publish just to make sure those changes happen through. I'm going to hit insert. We have our image. Again, we have the internal code connecting to that file, but then we see the path under it Alternative description, so thinking back again on accessibility, if you're adding an image to your page, hopefully whatever meanings that are contained within that image you're conveying elsewhere on the page, hopefully in body text of the page, but describing what that image is, why it's important, or at least what messages it comes across. I think in my training, I have a picture of the Masked Rider leading the football team onto the field. That kind of image can convey a lot of excitement about attending football games or being at tech, those kinds of things. Hopefully we're using that on a page about that kind of excitement. For this case, I don't really need to convey a whole lot of information. I'm kind of doing this fully for demo purposes. I'm going to say "My cat Ann Perkins sitting on a cat tree" Just to give it a basic description there. Again, you kind of leave title blank, you can adjust the height and width, the display height and width there if you want, apply classes and IDs. I'm just going to hit save. So we have our image here.

And I'm going to go ahead and hit publish. It prompts me to save. Now I'm going to say "Added a link and an image." So basically again, describing the work that I did in the version description and hit publish. And now we can see that has happened. If I refresh our web page, notice my image didn't crop. Let's go back and take a look at that. So I'm going to go to content and pages. I'm going to go to my images folder. I'm going to guess this just needs to get published again. I'm going to publish this file. Little bit of a browser cache issue there, but now the image has cropped down to how I had cropped it. So because I cropped the image in the editor, it still needed to be published. So I had to go back to the image, publish it, and now it works on the site. And then just the way websites work, it takes a minute for changes to proliferate. through the servers. Sometimes browsers keep an older version of the file saved. So it wasn't loading, but it wasn't going to give a new version of the image because it already had a version. But eventually it came through just fine. A little bit of wonkiness this, you may have to deal with here and there.

I'm going to go back to our page and hit edit. I am now going to click on versions. Now we can see the history of what I have done to this page. So I updated some headings and fix a spelling mistake, changed the list style. That was my first edit. Then I added a link and an image. So I have that history of what I've done to a page. If I wanted to, I could select this previous version and view the page. So see what it looked like before. So I can kind of see that image isn't in here, the link isn't there. If I wanted to, I could revert to this prior version. So I could replace the file with this older version. If for some reason something really messed up or they didn't like that picture of the cat on the page, I could revert back to this older version and go from there. That revert updates the Omni file, not the website. So I would still have to go ahead and publish to the website to make that actually update. So keep that in mind, but you have some history control in here that you can work from.

But I'm going to go back to edit. And click on the green edit button. I'm going to get myself a bit more space to work on. I'm going to click on the show blocks button. It's going to be kind of hard to see, but you can kind of see some little dotted lines around the various components of your site. There are some because it's kind of like drawing a border around various regions of content on your page. It's super faint, I imagine very much not accessible for how tiny and faint the colors are, but can kind of help you see some of those regions. It's most helpful for this next thing we're going to do. So this kind of puzzle piece icon that's insert snippets. We're going to click on that in the UI toolbar. And now I'm going to select the grid two columns large snippet and insert that. And now we can see we have two columns of information. So we have some bit of content on the left and some bit of content on the right. So I'm going to say like here's the stuff on the left, and here's the stuff on the right. Actually, maybe I'll take this image. I'm going to enter the image on the left. I'm going to go back and insert that cat image. So I have a cat image on the left and some here is my cat on the right. And we'll have this be a paragraph. I think somewhere along the lines I messed up. There we go. I want to make sure I have the div container and a paragraph container for this, but now we have the image on the left and some text on the right. I know it's a bit offset here. When I go to publish, it will actually look okay. So "Added a two column structure with the image and some text".

Now we can see on the page, I added that two column structure. The left column was the cat, there was the picture, the right column was some text, and we see that reflected here on the page. We talk about in the accessibility course how you shouldn't use a table for like this. Tables you can have rows and columns, but it's meant to have tabular data. The problem with using a table for something like this or one of the issues is on different screen sizes, it will try to preserve that stable, that table layout. In this case, when I make this page smaller, we can see it's kind of tiles those together. So it has the cat picture and then that bit of text. And so as we go smaller, it's not forcing any widths or anything and kind of will always look okay based on the screen size that's being used on. So keep that in mind. It's using something called Foundation Grid to do that work. And so you can kind of build some structures there. So in the snippets tool, we have two, three and four column layout options that you can add to your site to do this kind of thing. And they are even column width things. So it's 50/50 or the three columns would be 33% and the four columns 25% splits on your screen. So that's how you do a basic column layout with that.

Next, I'm going to go to we can turn off that show blocks now or no, that's wrong. I guess I've accidentally clicked it twice. The thing between the show blocks and the insert snippet, that's kind of the left and right bracket icon is the source code button. If you ever need to view the source code of your page, you can do that from here. So even if you don't have source code access, you still have this tool in your toolbar. If you needed to do something in the HTML, you could do that. We can kind of get a feel for what's on our page already. We have the heading two and then a paragraph, which then if we look at the source code, we have a bit of text with the heading two and that's followed by a paragraph. We can kind of start breaking down, basically learn teaching yourself some HTML. If you're ever doing something where we say you need to add some raw code to your site and you don't really know where you should put it, you don't want to dissect that source code for where you're to go. You can always do something like, you know, I just hit enter here. I'm going to type in literally just random characters. Now I can pull up the source code and I can find it. So I can find right here is where I typed kind of that random garbage. So I know whatever HTML I put right where that is, it's going to show up exactly where this bit of code is placed. So that's kind of where you can do some of that work. If you want to try to be sure about where something's going to go.

We're going to skip over the insert asset kind of arrows going in a circle around like a square corner and go to this insert component that kind of looks like a like a planet with orbitals or like a atom kind of thing. I'm not sure what shape they're trying to call that, but something, some dot in the middle of orbitals around the sides. That's the insert component button. I'm going to give myself space on the page to click on that. I'm going to find the collapsible accordion menu item. And so the way components work, it's basically a way for us to give you a form to fill out, and then you have something awesome put on your page, that you don't have to do any design work for, for any coding work for, you kind of get a very basic interface to fill out and you get something cool on your page. So we're hoping to have more of these for you and available to you. We're slowly building those out. So take a look at those if we ever say to add a component, that's just where you would go to do that. So collapsible accordion menu, you probably have seen these on like FAQ pages, anything you would have a lot of text, you don't necessarily want to show all of it to your users, but you can let users kind of select what they want to see. So I'm going to fill this out with just some basic dummy text. So heading one, this is the text for heading one. I'm going to add a new group heading two here's what is in heading two. Let me hit save. So we have that item in here. Now we go ahead and hit publish. I'm gonna say "added an accordion" in the version description.

And now if I refresh the page, I have this accordion menu. So we can see it's collapsible, we can show and hide content based on what heading the user is selecting, and it's drawing that out to your page. So we have documentation on how to add this to your site. If you want to do it based on just the raw HTML and JavaScript, it's not that hard of a markup to have. But also it was super easy for me to just fill out a form and have that show up on my page. So that's one of the ways we can make components work for you. And hopefully we have more of those. It's a way that you can just fill something out and have something nice on your page without having any issues.

And in fact, another example of components that you can use is this accessible table from CSV. Basically the table tool in Omni is kind of just terrible and how you would make tables and how you can, it takes lots of clicks to make an accessible table with that tool. By the time you define certain cells as header cells and give them a proper appropriate scope, it's not a great experience. So I made this component, basically you just give me a CSV file. So I give you that file picker where you can just go find a CSV file with your data, and then this thing parses it out to be an actual table on your page, which also kind of works for you. If your data ever changes, you just have Excel to update your information, put it in, put that CSV file on the web server, publish it, and then bam, your table is up to date. Hopefully that's a good thing for you as well. Make it easier for you to update your tables. So think about that. Components are going to be hopefully some cool things. Hopefully we have more of those. Feel free to dive in there and explore what's available there. But that's kind of everything with editing an Omni page.