Back to Paligo Academy
Okay. Maybe the word fun is pushing it just a little bit, but allow me poetic license. I've done these videos for you. First of all, we'll talk about accordions. It's drop-down content, your large topic. You want to split it up and be able to click to see more information. Accordions, really useful, very common. Next, we'll talk about how to insert videos, other types of embedded content as well. Very useful, very simple. And we'll finish with menu choice and you have to watch to the end to see what a menu choice is. Go and enjoy and watch and play. I've taken the liberty of creating some content already so we can work with it quickly, and it's called fun stuff. I often forget to put it into a publication, so I'm specifically recording it. Let's put that there. So one day when we publish everything together, you'll see other fun stuff in there. So the first thing I want to do with insert a video is really very simple. You go to a new line without any other para related elements, insert, video. I wanna get the embed. Let me show you how to do that. So I've got Paligo next generation video in here. Now do not take this link at the top. This is not the embed link. It will not work. You need to go to share, and there's a link you see slightly different. You copy that link. And other systems like Wistia have their own little ways of doing it. You're essentially just looking for the whole, just for the URL. You're not looking for all the JavaScript. And if there is JavaScript, you haven't you have to extract the relevant part. But we're not looking for the the JavaScript side of it. Just that URL. So if I now go back into Paligo, I'll double click on here. I will paste that in. And there you can see the file ref has the link. So if you actually would want later to change that, then you can do. Let's just preview just to make sure that works okay. Preview, HTML5. And there's my video. Okay. What's actually really interesting, this same way of inserting a video works for lots of other types of links as well. Let me show an example of a publication I once created. And we'll go through it really quickly because I've actually maybe doing another recording on this. But with the same way of inserting video, I can insert lots of different things, and I'll put a link to this as well for you. I'm actually on Spotify. Somebody interviewed me once. You can take the embed from Spotify. You could just take the embed as well from Google Docs or spreadsheets and you can bring this documentation into Paligo. You can put a form from maybe Google or others. You can try yourselves. These are not officially supported integrations. They just work. And if they work, fantastic. If not, then maybe you need another method of getting the content in. The Google presentation. All works very simply the same method. You could even put 3D graphics, say from Sketchfab, same idea, or Lucidchart, which is an online, graphic application. You can use Lucidchart, which is a graphics application on the web, and the latest graphic is always shown in your output. You can even use what's called image maps. If you want to have somewhere to click to a certain page in your help, you can create a Lucidchart, and it'll open. Just an idea, each one, just take the embed and play with them. So this Spotify link, let me show you how to take that embed as an example as well. So if I go into Spotify, I click on the three dots, and there's an option called share embedbed episode. And I click on show code, each product obviously is different. Then I will select this here. It seems to be up to the question mark without the question mark. Copy. I'm going to go under here insert video again. Double click. It pasted the question marks. Getting rid of it. Tic. And let's do another quick review. And there we go. You will notice the YouTube video does show as a preview when you save inside the editor. The other types of links like Spotify won't. That's okay. So say I wanna change the link to these videos around beds, that's very simple. I go to the video. Add attribute. Choose width and say thirty percent. And we'll go into our Spotify link. Same thing, width. Thirty percent. And we'll do a preview of HTML5 and see how that works. And there you go. Both of them come smaller, so it's really quite simple to do. Now let's move to accordions. Accordions are drop downs I'm gonna show you. Sometimes you have a page with a lot of content, and people don't like scrolling down such a large amount of content. So we put drop down accordions in there. So maybe when they open the page, they see four main big headlines. Before main big headings. And each of them, you can click to expand the content underneath. Very simple to do, and we'll do it on this accordion here. I go to the top or I could even be on here, for example, and I go to the element attribute and I choose that second section level. This is an added section, and I put that here. We've learned about adding sections in the headings part of the training. And I'm gonna add attribute called role. And I'm gonna specify accordion. And if you noticed on the left here, there's an icon that appears as soon as you've put in the accordion. Now I'm going to preview this content. And you will see we have an accordion down here. I click on it and it expands for the text. You could also put an accordion on a topic. Now it wouldn't make sense putting it on this topic because as soon as it opens, the only thing you're gonna see is fun stuff for nothing underneath. When you might want to do, what you may want to do is if you're inserting topics inside of this topic, we'll talk about more in the reuse maybe you want those inserted topics, which essentially look like sections, like the one we've done here, to the to the end user, to the person using your content, want that to have an accordion. So let's do that. I'm gonna go to open second level heading in a different browser. Actually, go to the top here of this topic, because it's not going to be standalone. It's always gonna be inside a different topic. I'm gonna set this role as an accordion, and I'm gonna save. And I'll close. Now say I want to put that here as a section inside a section, another topic inside this accordion section of mine. We're getting expansive and creative here. So I'm gonna go to insert, component, all part of reuse. Go into recordings, go into topics, and I'm gonna put in second level heading. And now let's preview to see what it looks like. Open our first accordion. And there's our second level heading also as an accordion as well. So when I insert a component and the top of that component, in other words, the section has an accordion, then it's going to show as an accordion as well. There's another type of element that you can put an accordion to. That's called a sidebar. Let me just put one here at the top. I'll enter, sidebar. This is essentially a holder of content. It can be anything you want. It could be you don't want your accordion to be a full section. I want really, for experimentation, I wanted an accordion, a drop-down inside a table. I want a procedural list to be a drop down, but not the not the whole section it contains. So the sidebars like the holder components, something like a div in HTML that I can put whatever I want to. So I'm first gonna give this a procedure, and we'll just call it first, and second. I'm gonna go to the top, which is the sidebar. I'm gonna type the roll again, and the accordion. And I'll preview. If you notice, Paligo gave me an automatic title because I intentionally didn't put a title in our sidebar. So it looks like that. But if I go here and I go to the top of my list, Bring up my list of elements. I'm a put a title in. We'll call it intentional this time. When I do a preview, you'll see now that the title has intentional to click on to open the accordion. So this gives you a lot more flexibility when it comes to what you want to show as drop-downs as accordions. The last thing I wanna show you, it's something you might love to use or might not, but it's interesting to know. If you remember when we did the inline elements, we have GUI labels and GUI buttons, the GUI elements in order to define how inline elements look. But before I go and play with these, let's actually just use the XML tree view. And I want to move this section to here further up for us. There we go. Okay. So I've used the tree view. So I could click on here, go there, and click a gGUI button as you may have seen. What I wanted is get a slightly different effect. So I'm going to just create a new line just so you can see how this works separately. In a paragraph, it's been inline element. Alt + enter to bring my inline elements. I'm gonna have something called a menu choice. A menu choice is gonna give us a certain look and feel. Now I can't type in menu choice, so I need to do alt + enter again, and it gives me the list of elements that I need. So, for example, a GUI menu. And so I can now type in view. If you see, I'm still in the GUI menu inside the menu choice. Move my cursor out one, and I'm now just in the menu choice. Alt + enter to get that list again. So I'm gonna put a GUI submenu, and I'm gonna type dashboard in there. Just like that. Let's preview to see what it looks like. As you can see, I don't have them bolded, but you can see an arrow is between the two of them. If I use two of exactly the same type, so if I now go to again menu choice. And I go, say GUI menu one, and I'll do the same again, GUI menu and go to it, it looks different. Let's take a look. You can see it gave a plus rather than the arrow, so it shows it's the same together. In this section, we've learned how to add videos and similar embeds. We've learned all about accordions, the different levels you can put them, and we've used menu choices a different way to show instruction law command material.
Apr 11, 2024
