We know that pages store their visible content in page content elements. So editing a page must be editing page content elements!

It's really easy to edit page content in TYPO3. Just select the Page module (#1), click the page title of the page you want to edit (#2) and in the "Columns" view (#3) you click the edit icon (#4) of the page content element you wish to change:

This brings up this edit form:

First of all the field "Type:" (#1) tells you the type of page content element! In this case "Text". It could also be "Table" (like you saw earlier) or "Image" or "Text w/Image" etc. See for yourself! Each content element type has it's own look and fields for content and by inserting different elements you can achieve great diversity on your website.

The "Header" field (#2) contains the header and the "Text" field (#3) the bodytext. On the webpage this corresponds to:

Try to change the header field value and press "Save document and view page":

Because you saved by the bottom "Save document and view page" you will automatically have the frontend window shown to you in a few seconds:

What TYPO3 did was to send the change to the webserver, update the database with the new information, then clear the page cache and regenerate the page - the change is instantly online and people surfing on your website will now see the new header instead of the old! It's that easy and fast to maintain webpages with TYPO3!

Tip: Another way to activate page edit

Instead of clicking your way from the "Page" module to the page tree etc. there is also an "Edit item" in the click menu which also brings up the Page module:

Tip: QuickEdit - save a mouseclick...

If you want fast access to your page content elements you can change the Page module view to "QuickEdit" instead of "Columns" - then the first content element on a page is shown right away:

Creating new pages is very easy. Since pages are always organized in the hierarchy of the page tree you will have to settle for a position of the page first. Of course you can change that later if you like.

To create a new page use the Page module in Columns view to start the "New page" wizard - that will help you to find the right spot to insert the page:

Then a position selector will appear. By this you can click the right position for the page visually:

Finally a form for a new page is shown and you can enter a title for the page:

Save document and close.

Now the page tree should be updated:

And if you click the page icon of the new page "Topscorer" you should see that the menu in the frontend has been automatically updated as well!

Notice that the page is referred to by the id "27" - so the new page automatically got the "uid" number "27" assigned during creation.

The page is still blank - we need to create some page content elements on the page!

Creating page content elements

In the Page module, click the page title of "Topscorer" in the page tree and then the button "Create page content":

Immediately you will see a nice form like this (below). This allows you to select a page content element type - as I said earlier different content element types create different kinds of content on the web page.

Let’s create "Text with image below":

Right away we get this form. Now enter some dummy content and select an image from your hard drive (find a small jpeg image):

Press the "Save document" button. Now the image is uploaded to the webserver and attached to the new page content element. This should look like this if everything went fine:

On the web page the page now looks like this:

Inserting another content element

Back in the Page module the new content element is clearly shown:

Notice: Missing the thumbnail? If you don't see a nice little thumbnail of the image here TYPO3 is probably not configured correctly for using ImageMagick. This is most likely the case if you did not use the Windows Installer Package (see the install section of this tutorial). Please refer to the information on installation found on typo3.org and the install mailing list archives. You can complete this tutorial without these features working though.

Click the button "New content" to create another content element with a bullet list after this one:

This time we have to make another selection in addition to the first one - where should the element go? Before or after the current page content element?

We insert it after the current. Now there is only the content of the bullet list left:

Notice that the "Type" was preset to "Bullet list" - this could have been selected manually instead. And you can change it as you like later on! If you want to know about the various content element types available remember the little "?" icon - help is right at your fingertips!

Now the page has two content elements, a "Text w/Image" type and a "Bullet list" type - in that order:

In the Page module this looks like this:

Management of content elements

You just used the "New content" wizard to create new page content. However the wizards in TYPO3 just makes a common task quick and simple by taking you straight to the important options. But under the hood all the features can be selected, fine tuned and controlled manually. You will realize this as you work with TYPO3. Take your time to explore the buttons and options. There are many possibilities and you can only get to know them if you take time to play around!

Here are a few examples of interface features you can try:

Creating a new page content element after the first one can be done by this button (#1). You will by default get a "Text" type element - just change the type to whatever you want. The button "Move record down" (#2) can be used to change the order between many content elements on the same page/column. Likewise you can use the "Copy", "Cut" and "Paste after" features from the click menu (#8) - they even allow you to make copies and move elements to other pages! The "Hide/Unhide" button (#3) is a quick way to change the "Hide" flag of the element and the garbage can (#4) allows you to delete the element totally (actually it can be restored if you do it by accident).

If you need to edit only the content in the body text area of the content element it's a nice feature to click the "Edit in Rich Text Editor" button (#5). This will bring up a "full-screen" window for editing the text - nice if there is a lot of text! Clicking the icon of the page content elements will as usual bring up a context sensitive menu for the element. Finally you can actually edit not only one page content element at a time but two (or more) by clicking the Column-edit icon (#7).

Moving a page is also very easy with the wizard available from the Page module. Let’s say we want to move the page "Topscorer" from its current position to right after "Sitemap" in the "Home" section:

Then you will see a branch of the page tree and by clicking the top page you go up one level:

And by a single, logical click you have moved the page to the new position:

The page tree is instantly updated:

Using the cut'n'paste feature to move a page

The "Move page" wizard is absolutely the most intuitive tool for beginners. However when you want to get the bigger picture of how to move elements - including pages - around in TYPO3 you should use the internal clipboard. It works pretty much like you know it from windows: You right-click a document, select "Cut", then right click the folder where you want to insert it and select "Paste". The same principle is implemented in TYPO3. Let’s use that to move the page back again:

"Cut" the page:

"Paste after" the "Report results" page:

Answer "OK":

That's it! The page is back where it belongs:

Background: Watch out  - consistent concepts on board!

Notice that the same principles of copy/cut/paste can be used with not only pages but page content elements as well - well, in fact any database element or file that TYPO3 manages is subject to this functionality! This is a great example of how TYPO3 uses the same concepts consistently and throughout the system - so once you have learned a feature, a lot of other features make sense to you as well! If you open your eyes to it you will have many of those "Aha!" experiences when you see how things are designed to fit together.

A feature you will find for many elements - in particular pages and page content elements - is the publishing control fields or visibility settings. They look like this for pages:

For content elements they are in the bottom of the form:

Hiding a page

Try to check the "Hide page" flag:

Nice as it is the page icon even becomes dimmed in grayscale and has a little red cross over it - it's now hidden!

This means you cannot see the page in the frontend:

(Very important that you select "Show" for the "Last week" page!)

See... no "This week" page there!

However if you actually go directly to the "This week" page you WILL see it anyway:

... because when you are logged in as a backend user hidden pages can be previewed - as indicated with the little box in the bottom of the page:

But! - that is for your eyes only. No one out in the world can see the page before you un-hide it again!

Timing pages and content elements

Hiding pages and content element is probably the most typical kind of visibility setting. It's so common that it actually has its own item in the context menus:

But you can also determine when a page should go online - which date! For instance try to enter the code "d+10" in the "Start  time" field:

Automatically the date is set to the current date plus 10 days! If you save the page and hold the mouse over the icon you can also see this setting reflected:

And guess what - this page is currently not visible and will automatically be visible the 11th of April year 2003, 10 days later! That's how easy it is to control publishing of information based on Start times. The same principles work for the "Stop" field of course. And for page content elements, news elements, guest book elements - you name it. Same principle - many places - easy to understand.

When you are working with the body text on your pages you can use the same kind of formatting options as you are used to from your word processor. If you are using TYPO3 with Microsoft Internet Explorer you have access to a Rich Text Editor (RTE) for the body text field. "Rich Text" means that you can apply formatting to the text in addition to just writing it.

Try to edit the body text field of the new "Topscorer" page:

Mark the text "my first" and click the "B" (Bold) to make the text bold:

By a using the buttons "B", "I", "U" and "Center Justify" you can easily achieve this look of the paragraph:

Press the "Save document and view page" button - you will see this in the frontend:

Creating a bullet list

You can create a bullet list just as easily. Just click the "Bulleted list" icon and enter a few lines:

Save and view - the frontend will show:

Considerations about "rich content"

As you can see - this gives you two choices: a) Will you create bullet lists "inline" in the body text fields or b) will you create them by separate content elements? You can mix the two approaches. Personally I find it absolutely most convenient to just create bullet lists inside of body text fields with the RTE - but if someone with Microsoft Internet Explorer is going to edit the list it's usually very hard! And you might have "political reasons" for not inserting bullet lists in body text (keeping the body text "clean").

The RTE in more details

The Rich Text Editor may be very easy to use, but it also poses a lot of technical challenges when you investigate the details. There is extensive documentation available for the RTE. Read more in-depth about the RTE here and how to configure it.

Hyperlinks are what glues the internet together some say. In TYPO3 you already have links automatically made for you since the sheer creation of pages in the hierarchical structure of the page tree has generated the menu in the left frame automatically.

But you still might want to link from a piece of text to another page, a file, another website or an email address, right?

This is very easy if you use the Rich Text Editor:

Simply mark the text and press the "Insert Link" icon:

Then click the title of the guest book page:

... and the text is linked:

In the frontend this will produce a link as you would expect. Click it and you are taken to the page with the guest book!

Behind the scenes

Before I told you that it might be a problem to use the Rich Text Editor if you expect to edit the content in raw form later on. You can simulate that by editing the whole content element and selecting the "Disable Rich Text Editor" option in the bottom of the form (before editing anything):

The "Text" field will now look like any ordinary form field:

First of all you can see that the link to the "Guestbook" page was made by a TYPO3-specific tag, <link>, combined with the page id. This makes it very easy for people without the RTE to create links as well! This is simple enough to write by hand. (Note: The internal "<link>" tag is converted to a proper HTML "<a>" tag when the page is generated).

Apart from that you can see the bullet list has been converted to a series of lines encapsulated in <typolist>-tags - also custom TYPO3 tags. These are also converted to a real bullet list by the template engine when the page is generated later on.

The very first line contains regular HTML-markup for the bold, italic and underlining plus center alignment of the whole paragraph.

Other kinds of links?

You can create links to local files and external webpages - even links directly to a specific content element on a page (see the page "Last week" for an example and figure out how by yourself!).

Finally links to email addresses can be created as well of course. Very easy.

Now, since we have disabled the Rich Text Editor why not just use the Wizard icon for full-screen editing:

Now write a new bullet list item, mark it and press the "Insert Link" button. Then select "Email" in the link type menu and enter your email address:

The result should be as expected after saving:

 - a link which opens the user's email client and makes it ready to write a new email:

As you already know there are a number of page content element types available and combining them is the key to creating diverse web pages so not every single page on your site looks the same!

As a general rule of thumb - the longer down in the list an element is, the more advanced or rare it is in use. The absolutely most used element is the Text or Text w/Image element.

Wizards

Notice that some elements carry with them a little wizard. For instance try to edit one of the result-lists from the page "This week":

The "Text" field which normally contains pure body text now contains the table content apparently organized in some systematic way:

The table is constructed by interpreting each line in the "Text" field as a table row. Then the vertical line, | , is used to separate columns from each other. This is the "low level" way it works and it could be maintained by hand. But the "Table wizard" would be the right tool to use for most people (see image above, right). This will bring up designated form fields and buttons for adding, deleting and moving table content around.

For instance adding a new row would be this easy:

Then add some content to the row:

Save the content from the Table wizard and back in the Text field the real, underlying content looks like this:

When the web page in the frontend is refreshed we will see this:

If you wonder how the background color could be changed - read on!

Secondary options - "Palettes"

From the dawn of time TYPO3 has held to the concept of primary and secondary form fields. The editing forms in TYPO3 contain a lot of fields and can be extended with even more. But many fields shown at the same time become very hard to overview for the average user. In particular if you are a beginner and have lots of new things to keep inside of your head already.

The concept of primary and secondary fields means that normally you see only the most important and typically used form fields (primary). And more detailed options are hidden in the secondary fields which are shown on request.

Consider this form:

Three fields shown - easy to overview.

But if you click one of the icons next to the fields you will find secondary options shown in the palette (top frame):

That is very clever - we have many options, lots of details but they are stowed away until we need them so we don't get confused.

The downside is when you need one of these secondary options and can't remember "behind which icon" it is (or if you use the field a lot) - then it might in itself be confusing to find them!

Therefore you can activate the option "Show secondary options" in the bottom of all editing forms:

The result is a big - and possibly confusing - form. But with all options available at once:

Notice how each row of options corresponds exactly to the content of the palette in the top frame if you clicked the "More options" icon like before!

So how do we change the background color of the table? In the secondary options for the "Layout" selector:

(The label "Color 2" refers to the color with that name configured in the website template.)

The final note on editing pages is the frontend edit facility. I'm sorry that there are so many ways to do the same thing. In time you will appreciate this since you will find out what you like best and you can accomplish more work in less time because TYPO3 offers these features.

But frontend editing is not just a new button - it might actually be a revolution to the way you or your content contributers can work with the system.

You have probably noticed the small edit-icons that have appeared on the web page:

Try to click one of them:

Instantly you are taken to a form where only the header field and other relevant information can be edited right away!

Try to change the header text and press "Save document and close" - you are taken back to the webpage and the change is immediately there:

This is what frontend editing is - very intuitive, great for correcting small mistakes, making small adjustments, excellent for poorly skilled content contributers on your team etc. It is the context sensitive editing method - raw power at your fingertips.

So can everyone just edit my pages?

No, of course not - only when you are logged in in the backend. Otherwise the icons are hidden - and if anyone could click it we would be immediately rejected. Try it yourself - log out in the backend:

If you still have a frontend page with icons then try to click one - you will see this screen instead of the edit form:

... and when you refresh the webpage you can see that the icons are gone now:

Now, log in again at http://localhost/quickstart/typo3/  (username = "admin", password = "password")

More information

The frontend editing feature is also described in more details on this page - Frontend editing.