Working with Articles

Articles are a nice way to inform customers about news, recent events or create stories about your products (Figure 1.1).

Swift comes with item types for:

  • Creating articles
  • Creating article list pages (categories)

In this article we will explain how to create both articles and article lists. We’ll start by briefly explaining the structure of articles and how to create new articles in different categories (article lists). Then we will move on to explain how to create new categories. Finally, we’ve created a couple of examples to help you visualize some of the layout options you have when creating articles.

The structure of the article concept can be a bit tricky to understand. The article list column can only display one path of articles/article list pages. If you have divided your articles into three categories (e.g., news, tips, and features) you cannot mix and display all articles in one column. You would have to display the categories individually in different columns. You can see examples of two different article structures on Figure 2.1. Ideally you should stick to only one of the ways.

  1. All articles group in same article list page – You can display all articles in one column
  2. Articles divided into different article list pages – You can display articles based on categories
Figure 2.1 The two different structures of articles and article list pages

Articles are basically pages with an extra section for metadata. The content on article pages is built like any other content on pages: with the Visual Editor. This allows you to use presets and content columns to create content which reflects your company values. In our examples, however, we will not be using presets – instead, we will show how you can use a combination of rows and columns to create different looks.

When you want to create a new article, you must first decide what category it should be placed in - let’s say you want to create a new article in a category called Stories:

  1. Locate the wanted category in the content tree – in this case the article list page called User stories. Right click on it. In the drop-down menu click New page.
  2. Choose Article as the new page
  3. In the modal, give the article a name (This can be changed later, you can read more about that here) and hit OK

The next thing you’ll be asked to do is fill out some general details about the article. All this information is used on the article list column as it consists of article items based on these details. Depending on what kind of article you’re writing you can leave different data blank. In this case were creating a story article, that means we’ll fill out:

  • A cover image
  • A title
  • A short summary of the article
  • The author and the published date

When you’ve filled out the needed information remember to hit save.

After saving, it’s time to create the content on your page – this is done using the Visual Editor like on any other page:

  1. In the toolbar click on the Paragraphs button.
  2. Now click on the Visual Editor to start creating content on your article.

You can see a couple of examples of how to create content for article in the Examples section below.

On live solutions, you will most likely have a variety of different presets available to create your articles – this could be rows with different column combinations, like an image and a text column side by side, or a product slider showcasing the products mentioned in the article.  When building content on your articles we recommend using these presets. This guide’s examples, however will not be using presets.

The content on article pages can be tricky to design properly. We’ve made some different examples to show how the articles can be used and how they are built. You can try to copy the example articles 1:1 or use elements from different examples to create the expression you want for your own articles.

Articles can be used for User Stories. These are based on users trying out products and explaining their experience with the product. In this example, we’ve made a simple layout with some basic elements to give some inspiration.

This example consists of a few different columns, where some of them are used a couple of times.

The first column used in this article is an article header. It’s placed on a 1-column row. You have some different styling options, both in terms of layout and font sizes. 

Now the real content of the article will begin. First up is a text column. This is placed in a 1-column row with the narrowest width. You could use either the title or subtitle field in the column, to make small section headers for each text field. Most importantly for all text columns, we’ve changed the Text readability to Max width off. This is done in the styling part of the text column editor.

Instead of having all the text placed in one long text column, we’ve placed an image and a quote in between it. This is done with a 2-column row. To make the row stand a bit out, you could consider changing the row height.
On the first empty column we’ve placed an image. On the other empty column, we’ve placed a blockquote column and written the quote as the title of the column (Figure 5.2).  

Figure 5.2 The settings of the text column used as a quote

After the image and quote our article continues with text. Therefor we’ve added a 1-column row with a text column just like the first one.

Again, to break the article into smaller pieces, we’ve placed a product slider. Depending on what kind of user story you’re writing you can pick what products to display. If it’s a story about a specific product, like a mountain bike, you could choose to display variants of the same bike (color, sizes, etc). Besides variants you can choose to display specifically selected products, related products or products based on criteria such as most sold, trending, latest, and frequently bought. In this example we’ve displayed variants of the bike used in the story. To do that, you have to toggle Variants in the “Type” section and choose the product to show variants of in the “Relation” section (Figure 5.3).

Figure 5.3 Configuring a product slider to show variants

The product slider is followed by another text column. This is again placed on a 1-column row with the same settings as the other text columns.

The last element on the page is an article list column accompanied by a section header. We’ve changed the theme on the last two rows, to make them stand out a bit. This is done in the styling section in the row editor.
The section header is placed in a 1-column row.
The article list is also placed in a 1 column row. For the layout of the article list, we haven’t done anything crazy. The main thing we’ve changed is the maximum number of items in the list. As we only want the three latest stories, we’ve changed it to 3. You can combine these different layouts in a lot of different ways.

The most important thing to do when working with the article list column, is to choose what kind of articles you want displayed. This is done in the “Advanced” section. Locate the folder or article list page containing the stories you want displayed. In this case it’s the User stories article list page (Figure 6.1).

Figure 6.1 Locating the right group of articles to display

When you’ve added that, you should end up with something like our example.

Articles can also be used as a press release tools. Press releases can vary in designs, with or without images. In this example we’ve made a relatively simple press release consisting of a section header and text columns as the main part of the page. At the bottom we have a “footer” with some general information about the company and links to social media pages.

As mentioned, it’s relatively simple to make this press release. The first things that’s added is a section header. The section header is placed in a 1-column row with a standard width.
All the other rows are sat at the narrowest width. 

The next column is a text column placed in a 1-column row. In the text column we’ve used all the elements available in the text column. The title is used as an subtitle, and the subtitle is used as a date marker (Figure 7.2).

Figure 7.2 The use of the text column to create subtitles, date marker and text

The next two rows are used as a company contact information fields. In the first row, a 1-column row, a section header is placed. The next row, a 2-column row, two employee columns are placed to give all the needed contact information to the reader.  

The second element is an about the company row. This is used as a kind of footer, that’s placed at the bottom of every press release.

At the very bottom is a row with four features linking to different social media channels of the company.
First, we’ve placed a section header in a 1-column row. This will act as a header for the features below. The four features are placed in a 4-columns row. One in each column. The features are linked with our social media pages in the folder called social. This way clicking on the bird leads the reader to the twitter page of the company. As you can see on Figure 7.3 the settings are simple. It’s mainly about picking out the right icon (or uploading your own) and linking it to the right page.

Figure 7.3 Make sure to link your features with pages, that will redirect the reader to your social media channels