When looking at the way an article is set up, you can see that it consists of different parts: it will have a header, maybe a sub header, multiple paragraphs, perhaps one or more images with or without captions, and so on.
In a Digital article, each of these parts is represented by a 'component'. You will construct your story by adding all tho-cse components that your story needs using the Digital editor.
In this article here, we describe the components that are available for a Digital article.
|
Notes:
|
|
Info: Use the filter to only show information for specific components: |
Title components
Title
The title of your story.
Subtitle
A simple subtitle.
Standfirst
A Standfirst component consists of a Section, Title and Subtitle.
Figure: The Standfirst component before text is added.
Figure: The Standfirst component after text is added.
Hero
The Hero component is typically used as the first component of a Story as a way of setting the tone of the story and its content.
It consists of a background image, a title, subtitle and author. You can set the focus point for the image, crop the image and define if the background should scroll or should be fixed in place.
Figure: The Hero component before text and an image is added.
Figure: The Hero component after text and an image is added.
Scrolling or fixed background
By default the Hero component scrolls over the image until it is out of view. To fix the image so that it moves together with the Hero component, set the Fixed Background property.
Setting the image focus point or cropping the image
Click Edit Image to crop the image or set the focus point (for details, see the Image component).
Text components
Intro
The introduction of your story.
Body
The main text of your Story.
Use the 'Drop cap' properties to set a drop cap for your text.
Figure: To set the drop cap, click the Component Properties icon (A) enable the "Drop Cap" option (B) and set the properties.
Figure: A Body component with drop cap set.
Footer
The footer of your Story.
Quote
A quote consists of a quote field and an author field.
Figure: The Quote component before content is added.
Figure: The Quote component after content is added.
Styling the quote and its content
Use the options in the Properties panel to style the quote component or the text within the component.
Separator
A simple line to separate different sections in your Story.
Crosshead
A crosshead.
Author
Component for showing the author of the story consisting of an author image, a name, location and link (for example to Twitter or a Web site).
Figure: The Author component before content is added.
Figure: The Author component after content is added.
Media components
Slideshow
Create a slideshow with optional captions and filmstrip. Use the properties to let the slideshow play horizontally or vertically, set it to play automatically, change the order of the images, set captions, and more.
Figure: A slideshow and its properties.
Adding images
Add images by doing one of the following:
- Add an image that already exist in Studio by making sure it is part of the same Dossier as the article. The image then appears in the Attachments panel from where it can be dragged onto the Slideshow component.
- Add local images by doing one of the following:
- Use the Browse button of the Attachments panel.
- Drop the files:
- In the Slideshow component.
- In the drop area of the Properties panel of the Slideshow. They are automatically added to the Slideshow.
- In the drop area of the Attachments panel and then dragging them from the panel onto the Slideshow component.
|
Notes:
For all versions:
For Studio 11.165 or higher:
For Studio 11.164 or lower:
|
Removing images
Remove an image from the slideshow by removing it from the Slideshow properties.
Changing the order of the images
To change the order of the images in the slideshow, rearrange them in the Slideshow properties.
Setting the image focus point or cropping the image
Click Edit Image to set the focus point or crop the image (for details, see the Image component).
Using the image fitting options
Use the image fitting options to fit the image to the frame, the frame to the image, and so on.
Note: The options are applied to the first (leading) image; you might therefore see the slideshow jump to that image when any of the other images are in view. The setting affects all images though.
Image
Add an image with an optional caption. Control how the content should fit the frame, how the image should be positioned in relation to the text, and how to position the caption.
Note: Adding images in SVG format requires configuration steps.
You can also set the focus point of the image and crop the image.
Adding images
Add images by doing one of the following:
- Add an image that already exist in Studio by making sure it is part of the same Dossier as the article. The image then appears in the Attachments panel from where it can be dragged onto the Image component.
- Add local images by doing one of the following:
- Using the Browse button of the Attachments panel.
- Drop the files:
- In the component
- In the drop area of the Attachments panel
|
Notes:
For all versions:
For Studio 11.165 or higher:
For Studio 11.164 or lower:
|
Setting the focus point
When adding an image it is automatically positioned to best fit the frame. Sometimes this position needs to be adjusted so that the image better fits the design. This can be done by changing the focus point.
Tip: If you also want to crop the image, do this first (see below).
Step 1. With the image selected, click Properties in the toolbar followed by Edit image.
Note: The Edit Image button is also available for an image in a Hero component and a slideshow.
Step 2. Click anywhere in the image to set the new focus point. Keep an eye on the previews on the left to see how the result will look on various devices.
Figure: Setting the focus point.
Step 3. Close the screen by clicking Save in the top right corner.
Cropping the image
If only part of an image needs to be shown, the image can be cropped by using the cropping tool.
|
Notes:
|
Step 1. With the an image selected, click Properties in the toolbar followed by Edit image.
Step 2. In the toolbar, click the Cropping tool.
Step 3. Mark the area that you want to crop and click Save to leave the editor or use the Focus Point tool to set the focus point to make sure that the image is correctly displayed on the various devices.
Embed
Embed content from an external Web source such as a Google map, streaming audio, and so on (see sources such as embed.ly for more examples). Obtain the code and copy it in the Embed Code field in the properties.
|
Notes:
|
Product
Promote a product by displaying an image, the product name, a short description, the price and a Web site. Control the position on the page through the properties.
Figure: An empty Product component and its properties.
Figure: The Product component filled.
Video
Add a video from an online video hosting platform.
Note: Currently only YouTube is supported.
When adding the component, a window will appear in which to add the link to the video.
When clicking OK, the component is added. The thumbnail of the video is shown and the video can be played from within the component.
Further settings can be defined in the Properties window:
- Video link: the link of the video to embed.
- Start video at: define at which point in the video playback should start.
- Position: the position of the video in relation to the surrounding text.
Social media
Add content from social media.
The following social media types are supported:
- X (Twitter)
Note: Support for Facebook and Instagram has been dropped in January 2025. To add a Facebook or Instagram post, generate an embed code for that post and use the Embed component to add it to the article.
When adding the component, a window will appear in which to add the link to the content.
When clicking Add post, the component is added and the social media content is shown in the component.
Figure: A post on X (Twitter) included in a Story.
Further settings can be defined in the Properties window:
- Post link: the link of the post to embed.
- Include media: define if media such as an image should be included.
- Position: set the position of the position relation to the surrounding text.
Interactive components
An Interactive component displays content that is hosted on the Internet somewhere, such as a Google Map, a video, a poll, a quiz, and so on, and also makes it possible to customize the content in the Digital editor.
Example: A basic Google Map could be made available to which one or more locations can be added, the map settings changed, and so on.
Interactive components can be defined per Brand; depending on which Brand the article belongs to therefore, you might see different Interactive components.
Although each component will of course show different content, the working in the Digital editor is the same for each component. In the following steps a basic Google map is added and customized:
Step 1. Add the component.
A basic view of the content is shown.
Step 2. Access the Properties for the component and under Configuration, click Edit.
A window will appear in which you can change the settings for that component.
Step 3. Close the window to save the made changes.
Layout components
Container
The Container component can be used to create a story within a story (such as a sidebar). All types of other components can be added to it.
Use the Properties panel to control the position, opacity and background color of the container.
Figure: Here a Container component has been used to add a quote and an image to the right of some text.
Note: You can also place a container within a container (but not within a container that is already placed in a container).
Data components
Data components are used for visualizing data using the integration between Studio and Infogram. Components that can be added include tables, maps, and charts.
For full details, see Adding tables, maps, and charts to a Digital article in Studio.
Comments
0 comments