02 - Adding & Editing Page Content

Duration: 5 min 38 sec
Chapter 2 is all about adding and editing the content of web pages.


Welcome back to the Neos Training created for you by Paints Multimedia.

In the second chapter we will look at adding and editing page content.

After logging in to Neos, we are in the backend of our training website again.

As you can see on the left side of the Neos Interface, the Page and Element tree mostly share the same icons. Here is a quick overview of their functions. In total you can see eight buttons.

  1. With the first button you can add a new page or element.
  2. With the second button you can hide pages or elements in the frontend, so it will not be visible for the user.
  3. With the third button a page or an element can be copied to be pasted somewhere else.
  4. With the fourth button a page or an element can be cut to be pasted somewhere else.
  5. With this fifth button you can paste a page or an element that you have copied or cut before in the selected area.
  6. With the sixth button you can delete the chosen page or element.
  7. With the seventh button you can refresh the page or element list.
  8. And finally, to open or close the element list you can press this button.

To add a new page, you first have to select a destination, usually another page. In this example, we select the page named “Menu 2”. You can insert a new page through the “plus” button on top of the page tree.  Then you have to decide whether you want to place the new page before, within or after the selected destination. In this example, we place the new page after the page “Menu 2”.

Next, you select a name for the page and confirm with the "Create new" Button. Now, you can find the new page “Menu 3” under the page “Menu  2”.

After learning how to add a new page, let’s take a quick look at the different content elements which we’ll cover in-depth in the next chapter of the tutorial. The most common elements are the Headline element, the Text area, the Image element, and the XY Row element including XY Columns.

To add any of these elements you first have to select the destination of the element, usually another content element on a page. In this example we click on the page “Menu 1” and select the content element XY Row. Again, you click on the “plus” button and have to decide whether to insert the new element before, within or after the chosen element. In this example we insert a button after the previously selected element and named it “Test Button”.

Now we will show you how to copy or cut and paste elements or move them around across different pages in your website. To do that, you are required to stay in the same browser tab.

Choose the page or element you want to copy or cut and then press the respective button either in the Page or Element list on the left side of Neos or inside the content Area at the upper right of the selected Element. In this example we select the newly inserted button “Test Button”.

To paste the button, you have to navigate to the desired destination and decide whether to paste the respective element before, within or after the selected page or element. In this example we select the Homepage and will place the button after the text box.

You can also move around a page or element within a page and element lists on the left side of Neos. 

Before the changes made In the backend of Neos will be visible on the frontend, they need to be published.

When you are ready to publish your changes to the live version of the website, you go to the upper right side of the backend and either press the "Publish to live" Button or expand the publish Button and choose "Publish all". To publish the changes made on the current page, press "Publish to live". To publish all changes made on the whole website, press "Publish all".

Within the expanded menu you also have the options to discard all changes on the current page with the "Discard" Button or the option to discard all changes made on the whole website with the "Discard all" Button.

Besides publishing the changed content to the live version, you have three other options within the expanded menu.  
Under "Review changes", you can also review the changes made since the last live version of the website.

By clicking on “Content” on the upper left side, you go back to the main menu.

The second option is to automatically publish changes to the Frontend. To do so, press on "Auto-Publish". However, this feature should be used with care, especially when working on a website that is already live.

The third option in the list allows you to access your Workspaces. A workspace should be made use of in the following cases: When you want to make a bigger set of changes to the website. When you want to make changes that should not go live shortly after. When you want to be able to share a preview of your changes with a client or colleague.

You have now finished the training about adding and editing pages and elements within Neos. In the next video we will cover content elements more in-depth.

Thank you for your attention. 

More Basic learningLearn more about the basic modules and their functions