Editing and Formatting Content


Editing and Formatting Content


Hi, I’m Jason from Dash Media and this video will be covering editing and formatting of content within rich text areas of MODX. As you can see I’m already logged in and editing my “About” page. If we just scroll down we’ll come to a rich text area. The first thing you’ll probably notice is how each section of the content is separated by these different colours. This is just a nice little touch from MODX letting you know that one piece of content is separate from another piece of content. We can tell a heading from a paragraph by the difference in font size and the bold feature, but when you have two paragraphs next to each other it can be a little difficult to tell them apart.

Let’s start with formatting. Within the text field you’ll see a large, bold text. If you look next to “Main Content” we’ve written here, “headings start at level 3”. So what does that mean?

The paragraph mark tab beneath “Main Content” is for all of our formatting options. Using it I can change the large, bold text block to be normal text if I want to or change it back to a heading of level 3 or I can make it heading 4 or 2, but we’ve been told that it should start at level 3 so we’ll leave that at level 3. That’s our first heading.

Any other headings that come beneath that heading need to be at heading 4 or if it’s a heading on the same level we could go back to heading 3.

Beneath the example heading are paragraphs and we can see normal text or I could change that to be a quote if I wanted to. You’ll notice that changing the heading type changes the entire block that I’m within, not just the section that’s been highlighted. So if I highlight this section and choose “quote” the entire thing is going to change. That’s because the paragraph mark options work on a block level.

The bold, italic, and strike through tabs work in-line. What that means is I can select a bunch of text and then choose one of them and then only that text is changed and I can change it back by pressing it again. You can use any combination of these tabs that you want on any text. You can one section that’s bold and then a section within that that has different formatting options.

The next four tabs deal specifically with lists. Lists can be a little bit tricky to get your head around first when you’re working with them. The first tab is an unordered list. Pressing enter or return will instantly put in another bullet row. Sometimes you’ll want to indent a bullet, for example having a sub-list of another item. Indent is the forth tab and after clicking it, any new items added will go directly after that list item. When we’re done with that and we want the next list item to be back on the top level, I can press the third tab which is called “Outdent”. Outdent will also exit from a list. If you’re finished adding list items and you want to add something after this list, hitting return once will enter a new item and hitting it twice will bring us back out of that list all together.

Our other type of list is the second tab, an ordered list or a numbered list. To start one of these I’m just going to exit the list and we’re going to click numbered list. This works exactly the same as the unordered list, so if I wanted a sub list below the first list item we’ll see the numbering start over again and then as I come back out we’ll come back out to the first level.

The next five tabs are specifically for embedding content, such as images, videos and files. We’ll cover that in a later video.

The last two tabs we’re talking about are “Alignment”, which is basically saying which direction you want the text to run in. By default all that text is “align text to the left”. This works on a block level as well, so you can’t just select a section and have that run differently to the entire block. One whole block has to go in that direction. We can center the text or we can align the text to the right or we can justify.

The first button here is labelled HTML but this toggles between the visual editor mode and the code editor mode. As you can see the code editor mode is a bit hard to look at and make sense of but if you’ve got a background HTML sometimes code editor mode can help just to debug anything that is going wrong. If you accidently hit the HTML button there’s nothing to worry about, you haven’t broken anything. You can just click the button again and you’ll go back to visual editor mode.

For more training videos visit DashMedia.com.au.