Article view

INFO: The use of our article view design tool requires that your apps have Article View 2.0 implemented. If Article View 2.0 is not implemented in your apps, please contact our business developers.

Introduction

With the article view design tool you can style your own article view. You create your own template and assign this to one or more titles or one or more apps.

There are three main views:

* Titles

* App

* Templates

NB! As default your apps and titles will use our "Visiolink - default" template and you can always go back to this template. The "Visiolink - default" template is not editable.

Titles

Here you have an overview of which template has been assigned to which title. For each title you can choose between the different templates in the drop down menu on the right side. If you assign a template to a title, only that title will use it. The other titles in the app(s) will not use this template unless the same template is assigned to them. You can set a title to inherit a template from the title above. The titles to which you have not assigned your own template will use our "Visiolink - default" template.

NB! Remember to click "Update" when you have assigned a new template to a title.

Apps

Here you have an overview of which template has been assigned to which app. For each app you can choose between the different templates in the drop down menu on the right side. If you assign a template to an app, all titles in the app will use this template. The apps to which you have not assigned your own template will use our "Visiolink - default" template.

NB! Remember to click "Update" when you have assigned a new template to an app.

NB! If you assign a template to a title and assign another template to an app that contains the same title, the template assigned to the title will take precedence over the template assigned to the app.

Example: "Template A" is assigned to "Title A". "Template B" is assigned to "iOS app X", which contains "Title A". When the article view for "Title A" is opened in "iOS app X", "Template A" will be used. All other titles in "iOS app X" will use "Template B".

Templates

Here you have an overview of your various templates. If no template has been created, only our "Visiolink - default" template will be visible.

For each template you have these options on the right side:

* Edit

* Duplicate (in the "More" menu)

* Rename (in the "More" menu)

Selecting "Edit" will open the template in the article view design tool. Selecting "Duplicate" will duplicate the template. By selecting "Rename" you can give the template a new name.

NB! It is only when the template is published that the name change takes effect under "Titles" and "Apps" in the template dropdown menu.

Bulk assign

With the "Bulk assign" feature you can quickly and easily assign a template to several titles or several apps:

NB! The "Bulk assign" feature requires that "Titles" or "Apps" have been selected at the top level.

Under "Titles" you have the option to choose between "Toggle prefixes" and "Toggle titles":

- and under "Apps" you have the option to choose between "Toggle all", "Toggle Android", "Toggle iOS" and "Toggle Web":

Creating a template

If you are ready to create your own template, select "+ New template". After choosing an easily identifiable name for the template and clicking "Setup the template" the new template will open in the article view design tool with our default settings.

You start on the Default template. However, you also have the option of creating a category template (more info under "Category template" below)

The dashboard consists of two main parts. On the left side you have the settings panel, where you can adjust the various settings. On the right side you see the article view. The article view is responsive, i.e. any adjustment you make in the settings panel is reflected in the article view.

NB! Changes will not go live until the template is published and assigned to either a title or an app.

NB! Activate Dark mode in article view to see your dark mode changes

At the top there are two dropdown menus: "Preview size" and "Preview content". Both are set to default:

However, you have the option of selecting a different size (phone, tablet, desktop) and other content from the dropdown menus. This allows you to make the preview of your changes as authentic as possible. When the "Preview" button is clicked, a new preview window opens with the selected preview settings.

We have grouped the many settings into 5 main categories:

* General

* Global settings

* Element settings

* Special elements

* Interface

General

This is where you find the general settings. Here you can insert your own custom CSS and upload your own icons if you prefer to use these rather than our default icons.

Global settings

This is where you find the global settings. There are settings for brand color, background color, max content width, global padding, heading, body text and surface elements.

Element settings

This is where you find the element settings. There are settings for main gallery, progress bar, meta information, supertitle, title, subtitle, audio block, description, bylines and article content. These are the default elements in article view. The default elements cannot be deleted, but you can disable specific elements if you do not want them to be displayed:

At the bottom you have the option to add a dynamic block:

You can choose between these: Google Ads, custom HTML and a separator line.

NB! Booking of Google Ads in article view is explained in this article.

The dynamic blocks can be deleted - unlike the default elements.

With the drag and drop feature, you can change the relative position of the elements:

Special elements

This is where you find the special element settings. There are settings for galleries, fact box, quote, external content and drop cap.

Interface

This is where you find the interface settings. There are settings for text color, icon color, background color, panel elements color, panel text color, font and icons.

Category template

You can also create one or more category templates. A category template will be used when the article is marked with either a matching template tag or article category, eg. "Sport" or "Culture". The article categories can be found in your own editorial system and they are integrated in the article XML files that you deliver on our ftp.

Save & Publish

If you have to leave the article view design tool for a period of time - if, for example, there are other work tasks that require your attention, remember to save first:

When you have finished your template and it is ready for release, remember to save and publish:

After an article view template has been published, it can take up to 2 minutes before the changes are live.