End User Guide

Written by Super User on 10 September 2021. Posted in End User Guide.

Bullets, Numbers, Ordered and Un-Ordered Lists

Joomla! content editor’s provide different types of lists to choose from when constructing your page. The most commonly used are ordered and unordered lists. Choosing what type of list to use, or to use a list at all, comes down to the content at hand and what is the most meaningful choice, for displaying the content of your document. Lists are commonly formatted as bullets or numbers when listing items.

An 'Unordered List', looks like this, in HTML:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

and will look like this when outputted in the editor's WYSIWYG view.

item 1
item 2
item 3

While an 'Ordered List', looks like this in, HTML:

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

and again, will look like this, when outputted in the editor's WYSIWYG view.

item 1
item 2
item 3

Creating Lists

You can do this, by selecting your text in the editing area and then select the 'Number List' button from the editor as seen below:

1. Ordered List

An 'Ordered list', places strong importance, on the order of items:

This is a sample Ordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Ordered List Properties

A little known secret, is that lists can have their own custom properties. This can be applied, simply by selecting and by right clicking on your list type. This can be used to define the starting number of your list or to change listing style or numbering type.

Here are a few examples

This is a sample of the 'Lower Alpha' number list.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

2. Un-Ordered List

Unordered lists, are for lists of items, where the order is not of importance:

This is a sample Unordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List Properties

Different bulleted list properties can be applied by selecting and by right clicking on the list:

This is a sample of the 'Square' bulleted list.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Hits: 35

Written by Super User on 10 September 2021. Posted in End User Guide.

Using H headers

H header's are used to structure the content of your document. For instance you might want to indicate a header or divide your page up with sub headings. This lets search engines know about the content structure of your document. For instance the H1 heading defines the most important heading while the H6 heading defines the least important heading. In most cases, you won’t need to use the H1 header within your article as the H1 header will be added when creating your article’s 'Title' in Joomla!. Search engines place a high value on the text inside H tags, so make sure that your H headings are well-represented within your article.

For instance you might write something like this in HTML:

<h2>Sub Header<h2>

When outputted on your page it will look like this:

Sub Header

Here are a few other examples of h headers:

Heading 1 sample

Heading 2 sample

Heading 3 sample

Heading 4 sample

Heading 5 sample

Heading 6 sample

Creating header's

Content editors simplify this process and will do most of the work for you. To do this, start by selecting your header text and then select: 'Heading 1' from the Format list as seen below:

Getting Started

Joomla Content Editor's like the one used on this site, provide an editing interface which resembles how the page will be displayed in your web browser. These editor's allow for typing, pasting, deleting and manipulation of your article or document. The goal is that, at all times during editing, the rendered result should represent what will be seen, later on your website.

So if you want to know how to get the best editing experience out of your site, read on…

The editor does this by creating containers, by default. This is because HTML was originally created to put the content of the page into some sort of structure. These containers are used to hold anything that would be structured as a paragraph, while there are other containers such as div's and span's which are reserved for general use, for facilitating formatting and grouping of related elements.

Creating paragraph containers

Let’s look at how this works! When you press the 'Return' key the editor will create a new P (Paragraph) container.

You can see these p containers in the editor by, selecting the 'Elements' tab which will highlight the containers in your page.

As you can see, being in 'Elements' mode is very helpful as it allows us to see these HTML containers and where they start and end.