In this video we’re going to build the structure for a new single screen page. So I’m going to come here to the sitemap, we’re going to click on this page here. So we’re going to build this structure here. Each page lists articles and has some interesting characteristics such as sort buttons that reorder articles based on their date from the oldest or the newest article. 

We also have a search function and a pagination element. We’re going to look into building these three components in future videos. 

For now we’re going to just build this structure and link the flex layout and it’s elements to the corresponding attributes, in the articles collection. Since we already know how to build this we’re going to do it quickly. 

We’re going to continue by hiding this finished page example section and we’re going to show the build your page here section. Now we’re going to build the structure using the page elements. So all you have to do is start dragging and dropping.

Ok the structure has been built, now we’re going to link the flex layout to the collections articles. So to do this, we know that we need to select the first element that makes up the flex layout - this element here.

Now I am going to come here to the data panel and I’m going to enable dynamic data by clicking this button. Now I’m going to come here to this drop down menu in collections and I’m going to select the collection that I want to populate this structure.

So I’m going to select this collection called articles. We can see it appearing here in our flex item, it repeated itself based on the number of articles this collection has. Now we’re going to link it’s elements to its corresponding attributes. So I’m going to select this image element and then I’m going to go to the data panel and down here in dynamic data and style in get image from articles I’m going to link image to article. Ok we can now see the article’s image.

Now I’m going to move on to this element here called H5, I’m going to go to the data panel again and in get text from article I’m going to select the data field. We can see that for some of these elements, their value has been altered, but not in these first three elements. This means that for these entries the content manager hasn’t filled out this field, and what’s appearing is what is written here.

A placeholder can be added in case the content manager hasn’t populated a certain field, we can also create a conditional visibility rule, but we’ll have a better look at this in a future video.

In this case, I’m going to delete the placeholder so that nothing appears. As you can see a blank space is still reserved for this element. Ok this appears here in these elements and doesn’t appear in these up here. I’m now going to alter the date format. I’m going to come here to data and then to time format, where I’m going to select month, day and year. 

Ok, now I’m going to select the text element H3, and in the same place as before, in get text from articles, I’m going to select title. Ok the title is good to go.

Now I’m going to select this element here called P2, and I’m going to go to the same area in dynamic data and style and I’m going to select description. This description is quite long and I only want part of it so I’m going to come here to text formatting options. And I’m going to select the truncate option. This way the description will cut off at 180 characters, we can change this value but I’m going to leave it at 180 characters. 

What I don’t want is for any words to be cut, so I’m going to make sure I select this option.

Our structure is now, pretty much ready. We’re just missing one detail. I’m going to link this item here to the articles detail page that we built in the previous video. So what I want to do is allow the user to navigate to this page, click an article and be taken to that article’s detail page.  So now I’m going to select the flex item, I’m going to come here to the data panel and in this link area I’m going to select the detail option. And I’m going to select the detail that I want. I want a link to be made to the article detail page. 

The link has been created, now we’re going to hit publish to save and check out these latest updates that we have been working on. And now we’re going to visualise what we have just built. So we’re going to come here to the articles page, and now I’m going to click on an article and now I’m sent through to the article’s detail page. Now I’m going to go back and I’m going to click on another article.

Ok, so as you can see it was easy to build and link this structure, in the next video we’re going to look at how we can populate the sort buttons, the search functionality and the pagination element.