Skip to main content

Create a page

A simple page consists of three sections. First, the lead section with the main page title, a short introduction (the text you are reading right now) and a header image. Second, the body with its information in the form of text, links, documents and images. And finally the 'call to action' section where you offer the audience further topics to explore, thus keeping them reading your content.

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Create page

In the media folder Pages click on CREATE PAGE and choose Content.

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Lead section

The lead section is composed of three web components: Title H1, paragraph, image. Please fill out all of these components in order to keep a consistent look of the E+E webpage. Do not delete any of these components as this might lead to technical problems.

Click on "Lead" in the top left corner of the lead component. The edit menu wil display on the right. You can chose to hide the publication date from the page. It is recommended to hide the publication date if it is not really necessary to know when the page was published.

Metadata

Your content from the lead will be copied to the Metadata section. You can always change it manually. Take time to fill out the metadata thoroughly. It helps your audience to navigate your page and it provides vital information to search engines cataloging your page for search results.

  • Click on the METADATA button next to the publication button.
  • Teaser image: If you have chosen not to use a header image, make sure you set a teaser image. It is key for a uniform look of the web page: Every teaser box must have a teaser image.
  • Teaser text: Is automatically copied from your lead text. Rewrite it to make it short and to the point.
  • Slug/URL: Is automatically copied from your lead title.
  • Backend Filter General: Set a filter according to the overall subject.
  • Backend Filter Pages: Set the filter to "News & Events".
  • Tag: Select "News (featured)" and “News & Events”.
Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

SEO

The search engine optimisation parameters are displayed when a page appears in a search result. They are key if you want people clicking on the link.

  • A good meta title answers the question your audience most likely asked the search engine.
  • The meta description field describes the page in one short sentence and carries the key words.
  • Leave all other SEO fields as they are.
Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Body section

The content page template offers you all the web components Livingdocs has to offer. The first component you should drag and drop below the lead section is the Section component. Place all other components into the section. The section defines:

  • The width of your page: Always set the section width to “Center small”.
  • The background color: The default color is white.
  • The display / or not of the table of contents. Click 'Add Anchor-Navigation to Section'. The table of contents displays H2 Titles only!
Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

There are many web components you can use to display your content. Here a short overview.

Headings H2, H3, H4

Different heading sizes are not just about what looks good. They structure the page so that web crawlers, such as Google Search, and AI agents can use the information on your page to provide results for people searching for your topics. Try to stick to the hierarchy: Start with H2. Use H3 for subheadings under H2, and so on.

List

The same applies to the list component. Do not create your own list within the paragraph component. Use the list component instead. Web crawlers will appreciate it. New bullets are created by pressing ENTER.

Manual Download List

Dynamic and Manual Download List components are here to display your documents for download. Dynamic lists display all Documents with a specific tag. This feature is used very little on the E+E site. Manual Download Lists are very common. They are explained in the 'Upload documents' tutorial section.

Accordion

Accordions are dropdown elements that help you save horizontal space on your page. For example, use the Accordion component to display a long list of documents in a Manual Download List, so that visitors don't have to scroll for too long. However, remember that whatever you put into an accordion is not visible at first. Visitors must click to see the content.

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.
  • Start by draging&dropping an Accordion Container into the Section component.
  • Title: Give each accordion item a title.
  • Paragraph: If you don't want to use the Paragraph component, delete it. Add other components into the accordion item!
  • For example, you can add a Manual Download List into the Accordion Item.
  • Accordion Item: For several dropdowns drag&drop Accordion Items into the Accordion Container.

Image

There is a separate tutorial on how to add an image to a page.

Video

Inserting videos into your page involves two steps. First you need to upload your video to the SDC YouTube channel. Contact the FDFA media team and provide them with the title and descpription of your video. Paste the YouTube video link into the Video Embed component. Do not upload videos directly to Livingdocs! The system doesn't host enough space for a dedicated video library.

'Call to action' section

At the end of this page you see 3 boxes inviting you to explore further tutorials. This is the 'Call to action" section. Insert a new Section component, set its width to 'Center medium' and its background color to 'Color three'. Now add your teaser boxes.

Teaser container

This web component comes with one additional component, a 'Manual Teaser'. Use it, delete it, or add more teasers!

  • Manual Teaser: Select a page from Livingdocs that you want to display as a teaser box. In order for the box to have an image, the selected pages needs to have a teaser image selected in its metadata.
  • External Teaser: Create a teaser box for a webpage outside Livingdocs. For this you need to fill out the necessary fields 'Title', 'Text', 'URL' and you need to upload or select an image from the image library.

The 'Teaser Container' lets you choose the 'PAGE CARD PRESENTATION'. We recommend to use 'Grid' for up to three teasers and 'Carousel' for more than three teaser boxes.

More tutorials for you!

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Livingdocs resources

Creating pages on Livingdocs is easy. All it takes is regular practice. These tutorials will help you start your journey to becoming a first-class page creator. Familiarizing yourself with the many tools and components will give you new ideas for structuring your content and designing a compelling Livingdocs webpage. Let's start with the basics: create your first news post!

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Create a news post

A news post is a short content page used to communicate announcements, publications, tenders, and similar information to network members and the public. It appears on the network home page and can be found through the news & events overview page.

Screenshot of the Livingdocs backend to show the place of the button or text field mentioned in the text.

Upload documents

Adding a document to a page involves two basic steps. First you upload it to the Livingdocs platform. Then you insert it into one of the page components available to you.

Need help with your page?

Hynek Bures
Switzerland

Hynek supports our network with everything related to Livingdocs and MS Teams.