Landingpages (example: a dossier)

Have you read the introduction on containers and boxes? Do you know how sidebars work? If so, you can now build your own pages. For instance the landingpage for a new dossier.

Pelicans are masters of splashdowns. After having worked through this article you will be a master of landingpages

Step1 Creating a landingpage
Step 2 The three T's: Title, Teaser, Teaser image
Step 3 Categorising/Tagging, Visibility and Saving
Step 4 The Grid
Step 5 The basic structure with containers and boxes
Step 6 Arranging contents
Step 7 Entering box settings

A collection of articles related to a certain topic is called dossier. It can be a conference documentation or an ever-growing collection of articles related to a certain topic. It is important to think of an appropriate structure from the very beginning on and to plan, how to cluster articles and how to enhance the page with graphics, videos or audios.

By default, a dossier (landingpage with sidebar) consists of:

  • Lead photo/image and teaser
  • at least 3-4 relevant texts
  • relevant photos, images, charts, audios, videos
Step1 Creating a landingpage

In the Content menu you will find the option Add content - Landingpage. This will open the landingpage dialog.

Step 2 The three T's: Title, Teaser, Teaser image

Provide a Title. A good title is supposed to be short, offers an insight into the content of the dossier and - together with the teaser - awakes interest. Look for a matching teaser image. Attention: Teaser image and lead image of the dossier should be the same.

Step 3 Categorising/Tagging, Visibility and Saving

Now you have to assign the correct categories, the haven and probably tags to the landingpage.

  • Haven: The information provided here determines which menu tab will be highlighted together with the landingpage.
  • Format: Choose Dossier here. This way, it will be easy to have automatic lists of dossiers created later on.
  • Tags: Here you can tag your landingpage. This allows for creating automatic lists of landingpages and/or articles tagged alike.
    Please pay attention to a consistent spelling of the tags and avoid for instance double-tagging such as "Peace" and "peace". Typing slowly, the system will show existing tags. Attention: Editors of the international offices are not allowed to edit the tag lists. If you find double or misspelled tags contact the support.

In the Administration section you can decide whether your landingpage is supposed to turn up in automatic lists (such as All articles/landingpages tagged ... or categorised ... or formatted ...). If you don't want them to be displayed in automatic lists, leave Hide in Views ticked as this is the default landingpage setting (other than for articles where Show in Views is the default setting). You can, of course, still place the dossier manually on the page (by using the Contents-box).

Finally, you should not yet publish the landingpage. Work is much more relaxed, if users cannot see your work in progress. You can still publish when everything is as it should be.

Save your landingpage and go on with the next step.

Step 4 The Grid

Click on Grid in the blue line of landingpage links. You will also have to click on the grid link whenever you want to make changes later:

As there is no grid yet, have one booted:

Now you can start placing containers. If you have thoroughly planned your dossier before, it will not take long anymore until you gain your end and will have created a spiffy and well readable dossier.

Step 5 The basic structure with containers and boxes

It is clear: The dossier is supposed to have a sidebar and a lead image. That's why you have to pick at least one 2/3 container (from NEW CONTAINERS on the right) as well as the Sidebar Container. If you are not sure go back to the Introduction: Containers and Boxes to see which is which and how to place them correctly.

Let's start with the left side of the page now:

Click on Options and then on the Edit-pencil on the right hand side of the container to open the settings dialog:

Write the title of the dossier into the Title field and choose a container style. It determines the color of the title and the coloured bar on top of the container.

Now fill your containers with contents. For the lead image (the big featured image an top) the Imagebox with license works best. So pick it from the Static Boxes section on the right and drag and drop it to the left. Hover your mouse over the box, click on edit, upload your image, enter the licensing and image information and type a short introduction text into the Epilog section. Then Save your box settings by clicking on the green checkmark field on the left.

If you don't understand the meaning of the fields, go back to How to create picture galleries.

Now, as the lead image is in, you can go on with the sidebar. The sidebar placeholder has already been locked in the right column, but needs to be filled. To do so, hover your mouse over the sidebar and click on the edit pencil. If you don't remember how to assign an existing or how to create a new sidebar, go back to our Sidebar-How-To.

Step 6 Arranging contents

Your page has already been structured using a 2/3 -1/3 container on the top left, the image opener and the sidebar are in. You can now go on arranging your existing contents. These are the articles, videos, audios etc. belonging to the dossier. Variety is the spice of life. It doesn't look good to have just a long list of articles. Instead, take into consideration:

a) can I further cluster the existing articles by their content?  The dossier Focus on Hungary for instance, was clustered in Current Developments and Background Analysis whilst the Beijing+20 - Women’s rights worldwide shows a Table of contents on its startpage.

b) do I have videos, charts or great photos which can make the structure less monotonous?

c) can I alternate container types to achieve more variety on the page?
If you have a look at our example dossier you will see that container types alternate: The first one on top is 2/3 -1/3, the next two are 2/3 with a sidebar, then comes a 1/3 - 1/3 type with sidebar and at the bottom it switches back to the 2/3-type.

When planning for an ongoing dossier it makes sense to have the contents added almost entirely automatically. As a prerequisite articles must have been categorised, formatted and/or tagged before.  Then you can use the automatic boxes (called Lists) such as:

  1. Newest article by categories
    showing the latest articles (provided that one or more categories were assigned).
  2. Newest products
    showing the latest products, which means Publications. Note: No selection by categories possible here.
  3. Newest articles by tag:
    showing the latest Articles, provided that tags were assigned.
  4. Newest product by categories: all
    showing the latest products, which means Publications Note: it is possible to select by categories.
  5. Newest article by Format:
    showing the latest Articles by format (for instance Speech, Blog etc.)
  6. Newest products by format:
    showing the latest products, which means Publications, by format (for instance book, magazine, essay etc.)
  7. Newest product by series:all
    showing the latest products, which means Publications by series (for instance Perspectives)
  8. Content by selection: All categories, tags and formats. Nodetypes: all
    makes possible to combine all choices named above and thus to mix articles, publications and landingpages no matter to which category they belong or what they are tagged.

Principly, you can enter a title and design for all boxes, but don't do it twice: If the title/design was already set for the container, don't repeat it for the box.

Step 7 Entering box settings

The box settings are similar in all kind of automatic boxes. Here is one example:

Boxtitle is NEW here (compare with our example landingpage what it looks like.

Prolog: You can enter an introduction text here.

Specific: In this section you select the category/categories of the article/s to be displayed in the list: If you have selected more than one category, you will have to decide whether all articles meeting ALL of the criteria are supposed to be shown or whether only those meeting ONE of the criteria.

The following example will illustrate, what it is about:

All of these vs. any of these: AND-condition or OR-condition

You have chosen a box showing the latest articles by category/categories. Of course you can select more than one category, for instance "article" and "containers and boxes". Now you will have to decide whether to show articles categorised article AND container and boxes  - in this case you choose "All of these" - or whether to show only those articles either categorised article OR container and boxes - in this case you choose  "Any of these".

Viewmode: Choose here how to display the teaser and teaser image. You will mainly need one of the three options:

a) teaser: The teaser and teaser image will appear in small. This option is used for lists of articles (and also publications) categorised alike which will be displayed in a 2/3 (one column) or 1/3 - 1/3 (two columns) container.

b) main teaser: The image and teaser will appear in big. This option is used for the openers in a 2/3 (one column) container as ususally to be found on top of the homepage and all category overviewpages.

c) main teaser (Mosaic slot 3): This is used in 1/4 - 1/4 - 1/4 - 1/4 containers. Have a look at our help-homepage where this option has been used.

Article Count: Determines the number of articles/publications displayed in a box. For the lead/opener box this shown in main teaser viewmode this will usually be just one. Note: It makes sense to limit the number of articles/publications displayed in a box as long lists of article (teasers) can quickly become very boring. So it might be better to set a limitation here and to provide a link for more articles on another page.

Offset: Here you can choose whether to show all latest articles beginning from the latest (measured by date of creation) or whether to skip any. 0 means: Start with the latest, 1 means: Skip the latest and start from the second latest etc. Attention: Once set, it is often forgotten to reset this option to 0. It is better to use the Hide in views option in the article form if - as an exemption - an article is to be hidden from an automatic list.

If you don't want to use automatic boxes (lists) you can - of course - also place articles manually. This is a good option for dossiers, when you know that nothing else will be added. Use the box type CONTENTS, search for the respective article and drag & drop it into the desired container.

This is what the grid of our example dossier looks like:

Step 8 Adding a short URL

You may want to create a nicer and shorter URL for your new dossier. It will be created in addition to the long one created by the system. To do so, click on EDIT on the landingpage, scroll down to the ADMINSTRATION section, open it and enter the desired name into one of the PATHS. I have added for our dossier example. Try it out.