Die Website wurde von Lundbeck Schweiz nur für Schweizer Angehörige der Gesundheitsberufe erstellt.
12 Nov, 2021
TEMPS DE LECTURE: 1 min
Advanced layouts - Section Article Content
In this article you will get an introduction to use the Section engine, and we will focus on using the section type 'Article Content'.
An article is basicly layoutet in two columns (on desktop screens):
Left - Description: Content under the Author tab is printed here.
Center - The main content flow
In most cases - an article can be build utilizing the basic inputs:
Title,
Hero Banner,
Lead
Body
and References
But the PIM CMS offers you a variety of possibilities to enhance your content using sections.
A section is a contained piece of content, and it can be edited directly in the flow of your content, by clicking the edit-button next to each section. It can also be edited through the normal edit interface, and here you can drag and drop the order of your sections. Sections can be enabled or disabled at any time, allowing you to change your content instantly.
In contrast to the normal 'body' field, sections can use up the entire space - and are themselves divided into a left- and a right side.
Every Article Content section have some general settings. It can have an overline, and either hide or display its title. All sections in this article have their overline hidden, and display the title as 'Large section headline'.
The Article Content section type have a left and a right column, that can hold content.
The left-hand-side can hold
Text
Image
The right-hand-side can hold
Text
Image
Video
Table
Collapsible node
Each Article Content section can use any combination of left-hand-side content and right-hand-side content - to layout the content in any way that is needed.
The left hand side content - type text.
The text / text combination gives you the opportunity to add a descriptive text to the left, and the main content to the right.
An image can have a descriptive text
This section has an Image in the left-hand-side and text in the right-hand-side.
In this section the text is placed in the left-hand-side, and an image in the right-hand-side
When using the video content type, you can embed videos from either YouTube or Vimeo
Used as a Q & A, this section allows you to refer to specific nodes, and make them collapsible.
A basic article follows a certain template for optimal readability, consistency and user experience:
Header image
Title
Lead
Body
References
Header image
When editing a page, header images are uploaded in the "Video and images" tab. Upload high resolution images and optionally crop the image when it is uploaded.
The CMS will always keep the original image and take care of creating web and mobile friendly versions of your images.
Cropping is how you select a certain area of an image to be displayed and the surrounding area to be discarded. The website will for instance show square cropped images in lists of articles teasers. Croppings are created automatically for each image. Each crop can be manually adjusted, and the editor should try out different crops until an optimal crop is found.
Extra wide crop - is used to display the header image across the full width of a page. The locked height of this crop assures the title and body text is visible below the image on most devices.
Square crop - The frontpage stream and other lists will display square images in the article teasers. If the automatic cropping is not optimal use the square crop to manually select the optimal crop.
If you want an alternative teaser image instead of the main image or if you do not want a main image but still have a teaser image, upload a teaser image in the "Teaser tab"
Preferred image formats are .jpg and .png.
Title
Titles should be descriptive, attention calling, not too long, not too short, and invite the reader to go explore the content. Avoid click-baiting and provide the title as a reliable service to the curious honest reader.
Lead
The lead is 1-3 short paragraphs that frames the actual content of the article.
Most online readers are swamped with quality content channels and so much relevant content to read.
The lead should be
a 3 second read that will let the speed-readers decide if this article is relevant
a promise about what the content will return
a hook that makes the reader curious about...
Body
The actual content of the article is in the body part. Several tricks will improve the readability and the quality of the content.
In many cases the content is copied from Word or a similar program. In that case copy the text, and click the "Paste from word" button and paste the text into special box.
[[{"fid":"2245","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"Click that cool Paste from Word button","field_file_image_title_text[und][0][value]":"Click that cool Paste from Word button"},"type":"media","link_text":null,"attributes":{"alt":"Click that cool Paste from Word button","title":"Click that cool Paste from Word button","height":109,"width":597,"class":"media-element file-teaser-large"}}]]
This procedure removes Word-specific styling, and prepares the content for optimal web presentation.
Break the content into sections of related paragraphs and assign headers to important sections. The headers also serves as input to search engines. To assign headers, avoid using bold or strong. Instead select the header text or place the cursor inside the header text, and select "Header" from the styles dropdown. Applying the correct header style improves search results significantly:
Pasting content from Word, can sometimes introduce or reveal duplicate linebreaks between paragraphs. Remove duplicate line breaks for a smoother reading experience.
Lists
Variations in the rythm of paragraphs throughout content will improve the reading experience. Sometimes a paragraph can be converted into a list of bullits. A list makes short paragraphs stand out, and can be a pleasant variation of rythm. Use the bullit style to create lists.
Links and Buttons
You can format links as buttons, by adding the class button in the advanced section of the link:
To attach a file to a button, you first need to upload your file in the Attachment and links tab. When your file is uploaded, copy its URL by right clicking the uploaded file. In your content flow, add a link and insert the file-URL. Remove all before /sites/default/files/attachments/[your-file-name] of the URL.
In the advanced section of the link pop-up, add the classes button and download - and you are ready to go. You file will be available inline in the content, and in the downloads section at the end of your article.
You can add audio in the content flow. Add a mp3 file via the media-insert button.
If you mark a paragraph text just before the audioplayer with the text-style Image-text, this will be used as a description of your sound:
This is marked as Image-text
Images
Placing images or videos in the content flow is highly recommended. However the quality,size and placement of the image should be handled carefully to make sure the image looks nice on all devices.
Simple images can be inserted with the "Add media" button:
Use the text-format image text to add descriptive text to your image
Avoid clipart, icons, low-res images. The image should never just serve an aestetical purpose.
For more advanced layouts with images see the Section engine.
References
Progress in Mind features an automatic reference system that with very little effort can be copied directly from Word. The inline reference must be marked with simple superscript1 using a numerical index, or a complex interval1,3-5 The list of references must be pasted into the References tab and marked as a numbered list. Each reference should be linked to it's source whenever applicable
